:root{--bg:#070b0a;--panel:#0c1210;--panel2:#101714;--line:#24302c;--line2:#35423d;--text:#f4f7f5;--muted:#7d8983;--green:#a9e51b;--green2:#6f9f0d;--gold:#e5b63e;--red:#e45a55;--shadow:0 24px 80px rgba(0,0,0,.38)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 70% 0,#17221b 0,transparent 25%),var(--bg);color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif;min-height:100vh}.noise{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}.topbar{height:68px;position:sticky;top:0;z-index:50;display:grid;grid-template-columns:260px 1fr auto;align-items:center;padding:0 3vw;background:rgba(5,9,8,.94);backdrop-filter:blur(18px);
  color-scheme:dark;border-bottom:1px solid #17201d}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:white;font-weight:950;letter-spacing:.01em;font-size:18px}.brand>span:nth-child(2)>span{color:var(--green)}.brand small{display:block;font-size:9px;letter-spacing:.22em;color:#707c76}.brandShield{width:32px;height:36px;display:grid;place-items:center;border:2px solid #596854;color:var(--green);clip-path:polygon(50% 0,100% 16%,92% 78%,50% 100%,8% 78%,0 16%)}nav{display:flex;gap:30px}nav a{color:#b7c0bb;text-decoration:none;text-transform:uppercase;font-size:11.5px;font-weight:850;letter-spacing:.08em}nav a:hover,.uploadNav{color:var(--green)}.topActions{display:flex;align-items:center;gap:12px}.liveDot{font-size:10.5px;color:#9aa49f;border:1px solid #36413c;border-radius:18px;padding:7px 10px}.liveDot:before{content:"";display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:7px;box-shadow:0 0 12px var(--green)}.signIn,.button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;text-transform:uppercase;font-weight:900;letter-spacing:.055em;font-size:11.5px;border-radius:5px;cursor:pointer}.signIn{color:#fff;padding:10px 17px;background:linear-gradient(#78ad17,#4c7509);border:1px solid #8ec51c}.button{padding:13px 18px;border:1px solid #39443f;background:#111715;color:white}.button.primary{background:linear-gradient(#86bd19,#577f0d);border-color:#9bd327}.button.ghost:hover,.button:hover{border-color:#5d7258}.button.primary:hover{filter:brightness(1.08)}.button[disabled]{opacity:.5;cursor:default}.hero{position:relative;min-height:560px;overflow:hidden;border-bottom:1px solid #1d2824;background-image:linear-gradient(90deg,#060a09 0%,rgba(6,10,9,.88) 37%,rgba(6,10,9,.26) 68%,rgba(6,10,9,.7) 100%),url('/assets/hero_tank_scene.webp');background-size:cover;background-position:center 53%}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 68%,#070b0a 100%);pointer-events:none}.heroCopy{position:relative;z-index:2;padding:70px 0 75px 5.2vw;max-width:610px}.eyebrow{color:#99a39e;font-weight:900;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}.eyebrow:before{content:"";display:inline-block;width:21px;height:2px;background:var(--green);vertical-align:middle;margin-right:9px}.hero h1,.pageTitle{font-size:clamp(52px,5.4vw,82px);line-height:.92;letter-spacing:-.055em;text-transform:uppercase;margin:17px 0 22px}.hero h1 em{font-style:normal;color:var(--green)}.hero p{max-width:540px;color:#aab3af;line-height:1.65;font-size:15px}.heroButtons{display:flex;gap:11px;margin-top:28px}.topBattle{position:absolute;z-index:4;right:3.2vw;top:58px;width:295px;padding:19px;background:rgba(7,12,10,.88);backdrop-filter:blur(10px);border:1px solid #2b3631;border-radius:8px;box-shadow:var(--shadow)}.topBattle .label{color:var(--green);font-size:11.5px;font-weight:900;letter-spacing:.05em}.topBattle h3{margin:14px 0 3px;font-size:18px}.topBattle small{color:#84908a}.topBattle .bigDamage{font-size:34px;font-weight:950;color:var(--green);line-height:1;margin-top:12px}.topBattle .mini{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;border-top:1px solid #28312e;margin-top:15px;padding-top:14px}.topBattle .mini strong{display:block;font-size:19px}.topBattle .mini span{font-size:9px;color:#738079;text-transform:uppercase}.metrics{position:relative;z-index:6;max-width:1210px;margin:-32px auto 0;display:grid;grid-template-columns:repeat(4,1fr);background:#0b100f;border:1px solid #28322e;box-shadow:var(--shadow)}.metrics>div{padding:20px 25px;border-right:1px solid #28322e}.metrics>div:last-child{border:0}.metrics strong{display:block;font-size:23px}.metrics span{display:block;color:#718079;font-size:9px;text-transform:uppercase;letter-spacing:.12em;margin-top:3px}.wrap{max-width:1210px;margin:62px auto;padding:0 20px}.sectionHead{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}.sectionHead h2{font-size:32px;text-transform:uppercase;letter-spacing:-.035em;margin:7px 0 0}.cardGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.replayCard{position:relative;overflow:hidden;background:linear-gradient(150deg,#111815,#090e0c);border:1px solid #26312d;border-radius:7px;min-height:310px;cursor:pointer;transition:.2s ease;box-shadow:0 10px 35px rgba(0,0,0,.15)}.replayCard:hover{transform:translateY(-4px);border-color:#526444;box-shadow:0 20px 55px rgba(0,0,0,.35)}.replayCard .art{height:128px;background-size:cover;background-position:center;filter:saturate(.72) contrast(1.07)}.replayCard .art:after{content:"";display:block;height:100%;background:linear-gradient(180deg,transparent 35%,#0d1311 100%)}.cardBody{padding:14px 15px 15px}.cardTop{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}.rank{color:var(--green);font-weight:950}.region{border:1px solid #3a4741;color:#8e9a94;font-size:9px;padding:3px 6px}.replayCard h3{margin:0;font-size:18px;text-transform:uppercase}.mapline{font-size:11.5px;color:#77837d;margin:4px 0 12px}.outcome.win{color:var(--green)}.outcome.loss{color:#e17872}.statsRow{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #26312d;border-bottom:1px solid #26312d;padding:10px 0}.statsRow strong{display:block;font-size:16px}.statsRow span{font-size:9px;color:#6d7872;text-transform:uppercase}.cardFoot{display:flex;justify-content:space-between;color:#77837d;font-size:10.5px;padding-top:11px}.cardFoot b{color:var(--green)}.featureBand{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #26312d;margin-top:20px;background:#0c1110}.featureBand>div{padding:24px;border-right:1px solid #26312d}.featureBand>div:last-child{border:0}.featureBand strong{display:block;text-transform:uppercase;font-size:12px;margin:9px 0 6px}.featureBand p{margin:0;color:#75817b;font-size:11.5px;line-height:1.55}.pageShell{max-width:1210px;margin:0 auto;padding:54px 20px 85px}.pageTitle{font-size:58px;margin-bottom:12px}.pageSub{color:#89958f;line-height:1.6;max-width:710px}.toolbar{display:grid;grid-template-columns:1.5fr repeat(3,minmax(120px,.55fr)) minmax(130px,.55fr);gap:9px;margin:25px 0 18px;background:#0c1210;border:1px solid #28322e;padding:11px}.toolbar input,.toolbar select{width:100%;background:#080d0b;color:#fff;border:1px solid #2e3934;padding:12px;outline:none;font-size:11px}.toolbar input:focus,.toolbar select:focus{border-color:#66804f}.empty{padding:48px;border:1px solid #28322e;background:#0c1210;color:#7e8a84;text-align:center}.uploadGrid{display:grid;grid-template-columns:1.5fr .8fr;gap:16px;margin-top:27px}.dropzone{min-height:390px;border:1px dashed #53624f;border-radius:8px;background:radial-gradient(circle at 50% 47%,rgba(169,229,27,.075),transparent 33%),#0a0f0d;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:.18s;cursor:pointer;padding:25px}.dropzone.drag{border-color:var(--green);background-color:#0e1610}.dropIcon{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;color:var(--green);font-size:32px;border:1px solid #53624f}.dropzone h2{margin:14px 0 5px;font-size:22px}.dropzone p{color:#74817a}.uploadSide{border:1px solid #28322e;background:#0c1210;padding:24px;border-radius:8px}.uploadSide h3{font-size:12px;text-transform:uppercase;letter-spacing:.08em}.pipeline{display:grid;gap:18px;margin-top:20px}.pipeline>div{display:grid;grid-template-columns:35px 1fr;gap:10px}.pipeline b{color:var(--green)}.pipeline strong{font-size:12.5px;text-transform:uppercase}.pipeline p{font-size:10.5px;color:#74817a;line-height:1.45;margin:4px 0}.uploadStatus{margin-top:14px;border:1px solid #28322e;background:#0c1210;padding:16px}.progress{height:4px;background:#1f2824;margin-bottom:12px}.progress div{height:100%;background:var(--green);transition:width .15s}.statusRow{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px}.statusRow .error{color:var(--red)}.statusRow .ok{color:var(--green)}.recordsTabs{display:flex;gap:8px;margin:22px 0 13px;flex-wrap:wrap}.recordsTabs button{background:#0b100e;border:1px solid #2f3a35;color:#89958e;padding:9px 13px;text-transform:uppercase;font-size:10.5px;cursor:pointer}.recordsTabs button.active{color:var(--green);border-color:#637d40}.recordsTable{border:1px solid #28322e;background:#0c1110}.recordRow{display:grid;grid-template-columns:52px 84px 1.2fr .8fr .7fr;align-items:center;gap:12px;padding:16px 19px;border-bottom:1px solid #222c28;cursor:pointer}.recordRow:last-child{border:0}.place{font-size:19px;font-weight:950;color:var(--green)}.recordRow small{display:block;color:#77837d;margin-top:4px}.recordScore{font-size:21px;font-weight:950;color:var(--green)}.detailHero{position:relative;min-height:440px;overflow:hidden;border:1px solid #2b3531;border-radius:8px;background-image:linear-gradient(90deg,#070b0a 0%,rgba(7,11,10,.82) 44%,rgba(7,11,10,.2) 77%),url('/assets/battle_atmosphere.webp');background-size:cover;background-position:center}.detailCopy{position:relative;z-index:2;padding:54px 45px;max-width:650px}.detailCopy h1{font-size:58px;text-transform:uppercase;letter-spacing:-.05em;margin:13px 0 4px}.detailCopy p{color:#93a09a}.detailStats{position:absolute;z-index:3;left:45px;right:45px;bottom:30px;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(9,14,12,.87);border:1px solid #34413b}.detailStats>div{padding:15px 18px;border-right:1px solid #2d3833}.detailStats strong{display:block;font-size:24px}.detailStats span{font-size:9px;color:#738079;text-transform:uppercase}.detailGrid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:14px}.panel{background:#0c1210;border:1px solid #28322e;padding:20px}.panel h3{font-size:12px;text-transform:uppercase}.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#26312d}.kv>div{background:#0b100f;padding:13px}.kv span{display:block;color:#718079;font-size:9px;text-transform:uppercase}.kv strong{display:block;margin-top:3px}.achievementChips{display:flex;gap:7px;flex-wrap:wrap}.chip{font-size:10.5px;border:1px solid #4a5034;color:#d5bb64;padding:6px 8px;border-radius:18px}.detailActions{display:flex;gap:12px;margin-top:14px}.toast{position:fixed;right:20px;bottom:20px;z-index:80;background:#0e1512;border:1px solid #3d4a43;padding:13px 16px;box-shadow:var(--shadow);font-size:12.5px;max-width:380px}.toast.error{border-color:#743f3f;color:#f0a6a2}.boot{padding:80px;text-align:center;color:#7e8a84}footer{max-width:1210px;margin:0 auto;padding:24px 20px 40px;border-top:1px solid #202a26;display:flex;justify-content:space-between;color:#66736d;font-size:9px}footer b{color:var(--green)}@media(max-width:1050px){.topbar{grid-template-columns:1fr auto}.topbar nav{display:none}.hero{min-height:530px}.topBattle{display:none}.heroCopy{padding-left:7vw}.metrics{margin:0 16px}.cardGrid{grid-template-columns:repeat(2,1fr)}.featureBand{grid-template-columns:repeat(2,1fr)}.toolbar{grid-template-columns:1fr 1fr 1fr}.uploadGrid,.detailGrid{grid-template-columns:1fr}.detailStats{position:relative;left:auto;right:auto;bottom:auto;margin:20px 30px}.detailHero{padding-bottom:20px}}@media(max-width:650px){.topbar{padding:0 14px}.topActions .signIn{display:none}.heroCopy{padding:48px 22px}.hero h1{font-size:47px}.heroButtons{flex-direction:column;align-items:flex-start}.metrics{grid-template-columns:repeat(2,1fr)}.metrics>div{padding:15px}.cardGrid{grid-template-columns:1fr}.featureBand{grid-template-columns:1fr}.pageTitle{font-size:43px}.toolbar{grid-template-columns:1fr}.recordRow{grid-template-columns:42px 1fr .7fr}.recordRow>div:last-child{display:none}.detailCopy{padding:40px 25px}.detailCopy h1{font-size:43px}.detailStats{grid-template-columns:repeat(2,1fr);margin:15px}.detailStats>div{border-bottom:1px solid #2d3833}.statusRow{align-items:flex-start;flex-direction:column}footer{flex-direction:column;gap:6px}}
.tankMeta{font-size:9px;color:#96a29c;text-transform:uppercase;letter-spacing:.08em;margin:5px 0 2px}.vehicleBadges{display:flex;gap:7px;flex-wrap:wrap;margin-top:15px}.vehicleBadges span{border:1px solid #3b4a43;background:rgba(9,15,12,.68);padding:6px 9px;color:#aeb9b3;font-size:9px;text-transform:uppercase;letter-spacing:.07em}.chip.mastery{border-color:#718c37;color:#c7ed77;background:rgba(101,137,30,.09)}.mutedChip{color:#849089;border-color:#36423c}.catalogNote{color:#69766f;font-size:10.5px;line-height:1.55;margin:11px 0 0}

/* v0.1.7 — LIVE HOME / approved mockup match */
.topbar{grid-template-columns:225px auto minmax(220px,1fr) auto;gap:20px;max-width:none}.topbar nav{gap:26px}.navSearch{justify-self:end;width:min(330px,100%);height:36px;display:flex;align-items:center;gap:9px;border:1px solid #303a36;border-radius:20px;background:#090e0c;padding:0 13px;color:#66716c}.navSearch input{width:100%;border:0;outline:0;background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));color:#d6ddd9;font-size:10px}.navSearch span{font-size:16px}.homeHero{min-height:0;height:450px;background:#090e0c;border-bottom:1px solid #1e2824;isolation:isolate}.homeHero:after{background:linear-gradient(180deg,rgba(7,11,10,0) 63%,#070b0a 100%);z-index:0}.heroBackdrop{position:absolute;inset:-28px;z-index:-2;background-image:linear-gradient(90deg,rgba(5,9,8,.98) 0%,rgba(5,9,8,.9) 28%,rgba(5,9,8,.42) 58%,rgba(5,9,8,.68) 100%),url('/assets/hero_tank_scene.webp');background-size:cover;background-position:center 46%;filter:blur(5px) saturate(.72) brightness(.72);transform:scale(1.08);opacity:.78}.heroTankVisual{position:absolute;z-index:-1;left:31%;right:17%;top:10px;bottom:-9px;background:url('/assets/hero_tank_scene.webp') center bottom/contain no-repeat;filter:saturate(.83) contrast(1.04) brightness(.86);-webkit-mask-image:radial-gradient(ellipse 70% 92% at 52% 53%,#000 48%,rgba(0,0,0,.92) 62%,transparent 91%);mask-image:radial-gradient(ellipse 70% 92% at 52% 53%,#000 48%,rgba(0,0,0,.92) 62%,transparent 91%)}.heroInner{position:relative;z-index:2;max-width:1210px;height:100%;margin:0 auto;padding:0 20px}.homeHero .heroCopy{height:100%;padding:42px 0 0;max-width:520px;display:flex;flex-direction:column;align-items:flex-start}.homeHero .heroCopy .eyebrow{font-size:9px;color:#a2aca6}.homeHero h1{font-size:clamp(52px,4.2vw,70px);line-height:.94;margin:13px 0 13px;max-width:520px}.homeHero p{font-size:15px;line-height:1.55;max-width:475px;margin:0;color:#b0b8b4}.homeHero .heroButtons{margin-top:20px}.homeHero .button{padding:11px 17px}.heroMetrics{display:flex;gap:25px;margin-top:auto;margin-bottom:25px}.heroMetrics>div{min-width:94px;position:relative;padding-left:25px}.heroMetrics>div:before{content:"";position:absolute;left:0;top:4px;width:15px;height:15px;border:1px solid #64706a;border-radius:2px;opacity:.7}.heroMetrics strong{display:block;font-size:18px;line-height:1}.heroMetrics span{display:block;margin-top:4px;text-transform:uppercase;font-size:9px;color:#77827d;letter-spacing:.09em}.homeHero .topBattle{right:20px;top:55px;width:285px;padding:17px;border-radius:7px;background:rgba(6,11,9,.91);border-color:#28342e}.topBattleMain{display:grid;grid-template-columns:105px 1fr;gap:11px;margin-top:12px;cursor:pointer}.topTankThumb{height:91px;background-size:cover;background-position:center;border:1px solid #202a26;border-radius:3px;filter:saturate(.75)}.topBattleInfo h3{font-size:16px;margin:3px 0 4px}.topBattleInfo small{display:block}.homeHero .topBattle .bigDamage{font-size:28px;margin-top:10px}.damageLabel{display:block;color:var(--green);font-size:9px;margin-top:3px}.homeHero .topBattle .mini{margin-top:12px;padding-top:10px}.homeHero .topBattle .mini strong{font-size:16px}.topMastery{padding:10px 0 8px;font-size:10.5px;color:#d8c47b;border-top:1px solid #28312e;margin-top:8px}.topBattleButton{width:100%;border:1px solid #28332e;background:#101614;color:#dfe6e2;padding:9px 10px;text-transform:uppercase;font-size:9px;font-weight:900;display:flex;justify-content:space-between;cursor:pointer}.topBattleButton:hover{border-color:#657b52;color:var(--green)}.topBattleLoading,.homeMuted{color:#7a8780;font-size:11.5px;margin-top:14px}.homeDashboard{max-width:1210px;margin:14px auto 0;padding:0 20px;display:grid;grid-template-columns:.86fr 1.22fr .92fr;gap:12px}.homePanel{background:linear-gradient(145deg,#0d1311,#090e0c);border:1px solid #26312d;border-radius:6px;min-height:244px;padding:13px}.panelTitle{height:28px;display:flex;align-items:center;gap:8px;text-transform:uppercase;font-size:9px}.panelTitle>span{color:var(--green)}.panelTitle strong{font-size:11.5px;letter-spacing:.02em}.panelTitle a{margin-left:auto;color:var(--green);text-decoration:none;font-size:7px}.damageList{display:grid}.damageRow{height:33px;display:grid;grid-template-columns:20px 43px 1fr 62px 46px;align-items:center;gap:6px;border-top:1px solid #202a26;cursor:pointer;font-size:9px}.damageRow:hover{background:#0f1713}.damagePlace{color:#75817a}.damageTankThumb{width:40px;height:25px;background-position:center;background-size:cover;filter:saturate(.65);border-radius:2px}.damageRow>strong{font-size:9px}.damageRow>b{text-align:right;font-size:11px}.damageOpen{text-align:right;color:var(--green);font-size:7px}.panelButton{height:31px;margin-top:8px;border:1px solid #202a26;background:#101614;display:flex;align-items:center;justify-content:space-between;padding:0 10px;text-transform:uppercase;text-decoration:none;color:#d8dfdb;font-weight:800;font-size:8px}.panelButton span{color:var(--green);font-size:13px}.latestGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.latestCard{overflow:hidden;border:1px solid #29332f;border-radius:5px;background:#0b100f;cursor:pointer;transition:.18s}.latestCard:hover{transform:translateY(-2px);border-color:#526545}.latestArt{height:104px;background-size:cover;background-position:center;position:relative;filter:saturate(.72)}.latestArt:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,#0b100f 100%)}.latestArt>span{position:absolute;z-index:2;top:6px;left:6px;background:#1b2420;border:1px solid #39463f;padding:3px 5px;font-size:6px}.latestBody{padding:8px}.latestBody>strong{display:block;font-size:11.5px;text-transform:uppercase}.latestBody>small{display:block;color:#7c8882;font-size:9px;margin:3px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.latestStats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.latestStats b{display:block;font-size:10px}.latestStats span{font-size:5px;color:#68736e;text-transform:uppercase}.popularList{display:grid}.popularRow{min-height:37px;display:grid;grid-template-columns:18px 42px 1fr auto;grid-template-rows:18px 15px;align-items:center;border-top:1px solid #202a26;column-gap:6px;padding:3px 0}.popularNum{grid-row:1/3;color:#6f7a75;font-size:8px}.popularTankIcon{grid-row:1/3;width:38px;height:22px;background:url('/assets/top_tank.webp') center/cover no-repeat;filter:saturate(.55)}.popularRow strong{font-size:10.5px;align-self:end}.popularRow small{grid-column:3;color:#69756f;font-size:6px;align-self:start}.popularRow b{grid-column:4;grid-row:1/3;color:#a8b1ac;font-size:9px;font-weight:500}.homeLoading,.homeEmpty{padding:35px 10px;color:#6f7a75;text-align:center;font-size:9px}.homeFeatures{max-width:1210px;margin:12px auto 0}.homeFeatures>div{padding:18px 24px}.homeFeatures .featureIcon{font-size:24px;color:var(--green)}.homeFeatures strong{margin-top:4px}.homeFeatures p{font-size:9px}.homeFeatures{border-radius:6px}.homeDashboard+.homeFeatures{margin-bottom:26px}

@media(max-width:1200px){.navSearch{display:none}.topbar{grid-template-columns:225px 1fr auto}.homeHero{height:430px}.heroTankVisual{left:36%;right:15%}.homeDashboard{grid-template-columns:1fr 1fr}.popularPanel{grid-column:1/3}.popularList{grid-template-columns:repeat(2,1fr);gap:0 14px}}
@media(max-width:900px){.homeHero{height:410px}.heroTankVisual{left:43%;right:-4%;opacity:.65}.homeHero .topBattle{display:none}.homeHero .heroCopy{max-width:540px}.homeDashboard{grid-template-columns:1fr}.popularPanel{grid-column:auto}.latestGrid{grid-template-columns:repeat(3,1fr)}.homeFeatures{margin-left:18px;margin-right:18px}}
@media(max-width:650px){.homeHero{height:auto;min-height:520px}.heroInner{padding:0 22px}.homeHero .heroCopy{padding-top:36px}.heroTankVisual{left:35%;right:-30%;top:95px;bottom:60px;opacity:.43}.homeHero h1{font-size:50px;max-width:390px}.homeHero p{max-width:390px}.heroMetrics{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 20px;margin-top:85px;width:100%}.homeDashboard{padding:0 14px;margin-top:10px}.latestGrid{grid-template-columns:1fr}.latestArt{height:140px}.homeFeatures{grid-template-columns:1fr;margin:10px 14px 25px}.popularList{grid-template-columns:1fr}.topbar{grid-template-columns:1fr auto}.topbar nav,.navSearch{display:none}}
/* stacking fix for the v0.1.7 hero artwork */
.homeHero:after{z-index:2}.heroBackdrop{z-index:0}.heroTankVisual{z-index:1}.heroInner{z-index:3}


/* v0.1.7 ASSETS PASS */
.replayCard .art{position:relative;height:170px;background-size:cover;background-position:center;overflow:hidden;filter:none}.replayCard .art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,8,6,.02) 35%,#0d1311 100%);z-index:1}.tankSprite{position:absolute;z-index:2;width:82%;height:88%;object-fit:contain;left:50%;transform:translateX(-50%);bottom:-2%;filter:drop-shadow(0 14px 14px rgba(0,0,0,.72))}.cardMapName{position:absolute;z-index:3;left:10px;top:9px;padding:4px 7px;background:rgba(5,9,7,.7);border:1px solid rgba(163,203,83,.22);color:#aab7af;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.cardAwards{min-height:30px;display:flex;gap:7px;flex-wrap:wrap;align-items:center;border-bottom:1px solid #26312d;padding:7px 0}.cardAwards span{display:flex;align-items:center;gap:5px;color:#b8c1bc;font-size:7px}.cardAwards img{width:18px;height:22px;object-fit:contain}.damageTankThumb{background:none!important;display:grid;place-items:center}.damageTankThumb img{width:48px;height:28px;object-fit:contain;filter:drop-shadow(0 3px 3px #000)}.latestArt{overflow:hidden;filter:none}.latestArt>img{position:absolute;z-index:2;width:86%;height:88%;object-fit:contain;left:50%;transform:translateX(-50%);bottom:-4%;filter:drop-shadow(0 10px 10px rgba(0,0,0,.76))}.topTankThumb{position:relative;background-size:cover;background-position:center;overflow:hidden;filter:none}.topTankThumb:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(5,10,8,.52))}.topTankThumb img{position:absolute;z-index:2;width:104%;height:90%;object-fit:contain;bottom:-5%;left:50%;transform:translateX(-50%);filter:drop-shadow(0 8px 8px #000)}.topMastery{display:flex;align-items:center;gap:7px}.topMastery img{width:22px;height:28px;object-fit:contain}.popularTankIcon{background:none!important;display:grid;place-items:center}.popularTankIcon img{width:45px;height:28px;object-fit:contain;filter:drop-shadow(0 4px 4px #000)}.detailHero{min-height:470px;background-size:cover;background-position:center;isolation:isolate}.detailHero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,8,6,.02) 58%,rgba(5,9,7,.56) 100%);z-index:0}.detailTankRender{position:absolute;z-index:1;right:3%;top:56px;width:57%;height:285px;object-fit:contain;filter:drop-shadow(0 24px 20px rgba(0,0,0,.72))}.detailCopy,.detailStats{z-index:3}.detailMapTag{position:absolute;z-index:3;right:24px;top:20px;padding:7px 10px;border:1px solid rgba(169,229,27,.28);background:rgba(5,10,8,.72);font-size:9px;color:#c6d0ca;text-transform:uppercase;letter-spacing:.09em}.awardHeader{display:flex;align-items:end;justify-content:space-between;margin-top:20px}.awardHeader h3{margin:0 0 4px}.awardHeader p{margin:0;color:#69766f;font-size:9px;line-height:1.45;max-width:520px}.awardGrid{display:grid;grid-template-columns:repeat(3,minmax(130px,1fr));gap:8px;margin-top:10px}.awardTile{min-height:72px;display:flex;align-items:center;gap:12px;border:1px solid #3c402a;background:linear-gradient(145deg,rgba(167,125,38,.08),rgba(9,14,12,.72));padding:9px}.awardTile.masteryAward{border-color:#607c32;background:linear-gradient(145deg,rgba(132,174,44,.1),rgba(9,14,12,.72))}.awardTile img{width:42px;height:54px;object-fit:contain}.awardTile strong{display:block;font-size:10.5px;color:#e1cf8d}.awardTile span{display:block;margin-top:3px;font-size:9px;color:#7e8983}.awardEmpty{grid-column:1/-1;color:#78847e;font-size:10.5px;padding:12px 0}.vehicleIdentity{display:flex;align-items:center;gap:12px;border:1px solid #28322e;background:#0a100d;padding:8px 10px;margin:0 0 12px}.vehicleIdentity img{width:78px;height:48px;object-fit:contain}.vehicleIdentity strong{display:block;font-size:12px}.vehicleIdentity span{display:block;margin-top:4px;color:#78847e;font-size:9px;text-transform:uppercase}.recordsTable .recordRow:before{content:""}@media(max-width:850px){.detailTankRender{opacity:.46;right:-16%;width:78%}.awardGrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.replayCard .art{height:170px}.tankSprite{width:78%}.detailTankRender{top:100px;right:-30%;width:100%;opacity:.34}.detailMapTag{right:12px}.awardGrid{grid-template-columns:1fr}}

/* v0.1.8 REAL ASSETS ENGINE */
.assetNotice{max-width:1210px;margin:12px auto 0;padding:11px 16px;border:1px solid rgba(229,182,62,.36);background:linear-gradient(90deg,rgba(87,67,19,.34),rgba(14,18,15,.92));display:flex;align-items:center;gap:16px;color:#d8dfdb;font-size:10px}.assetNotice b{color:#f1c856;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.assetNotice span{color:#98a49e}.assetNotice strong{color:#dfe8e2}.tankSprite,.latestArt>img,.topTankThumb img,.detailTankRender,.vehicleIdentity img,.damageTankThumb img,.popularTankIcon img{image-rendering:auto}.detailTankRender{max-width:820px}.awardTile strong{line-height:1.2}.awardTile span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.assetNotice+section.pageShell{padding-top:34px}@media(max-width:750px){.assetNotice{margin:8px 12px 0;display:block}.assetNotice b{display:block;margin-bottom:5px;white-space:normal}}

/* v0.1.9 MOCKUP WIDTH + CARD RENDER POLISH */
.heroInner,.homeDashboard,.homeFeatures,.assetNotice{width:min(1210px,calc(100% - 40px))}.homeFeatures{padding:0}.latestCard{min-height:214px}.latestBody{padding:10px}.latestBody>strong{font-size:11px}.latestBody>small{font-size:9px;line-height:1.4;white-space:normal;min-height:20px}.latestStats b{font-size:11px}.replayCard{min-height:340px}.replayCard h3{font-size:24px;line-height:1}.tankMeta{font-size:9px;color:#75817b;text-transform:uppercase;letter-spacing:.05em;margin:7px 0 5px}.mapline{font-size:12.5px;margin:2px 0 12px}.statsRow strong{font-size:18px}.statsRow span{font-size:8px}.cardAwards{min-height:34px}.cardFoot{font-size:10px}.topBattleMain{align-items:start}.topBattleInfo h3{font-size:18px}.topBattleInfo small{font-size:11px}.damageRow{grid-template-columns:20px 50px 1fr 70px 46px;min-height:38px;height:auto;padding-right:4px}.damageTankThumb{width:48px;height:28px}.damageRow>strong{font-size:10px}.popularTankIcon{width:48px;height:30px}.popularRow{grid-template-columns:18px 50px 1fr auto}.recordTankIcon{width:76px;height:44px;display:grid;place-items:center}.recordTankIcon img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.7))}.recordRow strong{font-size:14px}.recordRow small{font-size:11.5px;line-height:1.35}.recordScore{font-size:26px}.recordScore small{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}.pageShell,.wrap{width:min(1210px,calc(100% - 40px));padding-left:0;padding-right:0}.toolbar{grid-template-columns:1.45fr repeat(3,minmax(120px,.55fr)) minmax(130px,.55fr)}@media(max-width:1200px){.heroInner,.homeDashboard,.homeFeatures,.assetNotice,.pageShell,.wrap{width:min(100% - 32px,1210px)}.homeDashboard{padding:0}.homeFeatures{margin-left:auto;margin-right:auto}}@media(max-width:900px){.recordRow{grid-template-columns:42px 70px 1fr;grid-auto-rows:auto}.recordRow .recordScore{grid-column:2/4}.recordRow>div:last-child{grid-column:2/4}.homeDashboard{grid-template-columns:1fr}}@media(max-width:650px){.pageShell,.wrap,.heroInner,.homeDashboard,.homeFeatures,.assetNotice{width:calc(100% - 24px)}.replayCard{min-height:350px}.topbar{padding:0 12px}.homeHero .heroCopy{max-width:100%}}

/* v0.2.0 FULL BATTLE REPORT */
.replayPage{padding-bottom:70px}.reportTopActions{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:14px 0;padding:14px 16px;background:#0b100f;border:1px solid #28322e}.reportTopActions>div:first-child strong{display:block;text-transform:uppercase;font-size:12px;letter-spacing:.05em}.reportTopActions>div:first-child span{display:block;color:#74817a;font-size:10.5px;margin-top:4px}.reportTopActions>div:last-child{display:flex;gap:8px}.fullReportNotice{display:flex;gap:14px;align-items:center;border:1px solid rgba(229,182,62,.4);background:rgba(87,67,19,.18);padding:12px 15px;margin:12px 0}.fullReportNotice strong{color:#f1c856;font-size:11.5px;text-transform:uppercase}.fullReportNotice span{color:#9ca8a2;font-size:9px}.battleTabs{height:49px;display:flex;align-items:end;gap:0;border-bottom:1px solid #303a35;background:#090e0c;margin-top:12px;padding:0 10px}.battleTabs button{height:48px;padding:0 22px;border:0;border-bottom:2px solid transparent;background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));color:#7f8b85;text-transform:uppercase;font-size:10.5px;font-weight:900;letter-spacing:.05em;cursor:pointer}.battleTabs button:hover{color:#dce4df}.battleTabs button.active{color:var(--green);border-bottom-color:var(--green);background:linear-gradient(180deg,transparent,rgba(169,229,27,.04))}.battleReportContent{background:#080d0b;border:1px solid #27312d;border-top:0;padding:14px}.reportPane{display:none}.reportPane.active{display:block}.overviewReportGrid{display:grid;grid-template-columns:1.05fr .95fr;gap:12px}.personalReportGrid,.detailedReportGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.reportCard{background:linear-gradient(145deg,#0d1311,#090e0c);border:1px solid #27322d;min-width:0}.reportCardHead{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 15px;border-bottom:1px solid #26302c}.reportCardHead span{display:block;color:#77847d;font-size:9px;text-transform:uppercase;letter-spacing:.1em}.reportCardHead h3{margin:4px 0 0;font-size:15px;text-transform:uppercase}.reportCardHead>b{color:var(--green);text-transform:uppercase;font-size:10px}.overviewStatGrid{display:grid;grid-template-columns:repeat(4,1fr);padding:3px 15px 15px}.overviewStatGrid>div{padding:14px 8px 9px;border-bottom:1px solid #222c28}.overviewStatGrid strong{display:block;font-size:22px}.overviewStatGrid span{display:block;color:#69756f;text-transform:uppercase;font-size:9px;margin-top:3px}.overviewAwards{padding:0 15px 15px}.overviewAwards h4{margin:5px 0 8px;text-transform:uppercase;font-size:9px}.compactAwards{grid-template-columns:repeat(3,1fr);margin-top:0}.compactAwards .awardTile{min-height:58px}.compactAwards .awardTile img{width:30px;height:38px}.interactionList{padding:4px 12px 12px}.interactionRow{min-height:58px;display:grid;grid-template-columns:76px minmax(110px,1fr) auto;align-items:center;gap:9px;border-bottom:1px solid #202925}.interactionRow:last-child{border-bottom:0}.interactionTank{width:74px;height:48px;display:grid;place-items:center}.interactionTank img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 6px 6px #000)}.interactionTarget strong{display:block;font-size:10px}.interactionTarget small{display:block;color:#6f7b75;font-size:9px;margin-top:3px}.interactionNumbers{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap}.interactionNumbers b,.interactionNumbers span{padding:4px 6px;border:1px solid #2c3832;background:#0c1210;font-size:9px;white-space:nowrap}.interactionNumbers b{color:#d9e1dc}.interactionNumbers .killPill{color:var(--green);border-color:#536a34}.reportStatList{padding:7px 15px 14px}.reportStatLine{min-height:37px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;border-bottom:1px dotted #2d3833}.reportStatLine span{font-size:10.5px;color:#909c96}.reportStatLine strong{font-size:12.5px;color:#e7ece9;text-align:right}.reportStatLine small{grid-column:1/-1;color:#69756f;font-size:7px}.fullInteraction{margin-top:12px}.twoColInteractions{display:grid;grid-template-columns:repeat(2,1fr);gap:0 16px}.teamsGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.teamCard{border:1px solid #2b3531;background:#0b100f}.teamCard.ownerTeam{box-shadow:inset 0 2px 0 rgba(169,229,27,.55)}.teamCard.enemyTeam{box-shadow:inset 0 2px 0 rgba(228,90,85,.5)}.teamHeader{height:68px;display:flex;align-items:center;justify-content:space-between;padding:10px 13px;border-bottom:1px solid #26302c}.teamHeader span{font-size:9px;color:#7d8983;text-transform:uppercase}.teamHeader h3{margin:4px 0 0;font-size:15px;text-transform:uppercase}.teamTotals{display:grid;grid-template-columns:auto auto;gap:1px 7px;text-align:right}.teamTotals b{font-size:12px;color:var(--green)}.teamTotals span{font-size:6px;color:#6e7a74;text-transform:uppercase;align-self:center}.teamColumns{height:27px;display:grid;grid-template-columns:1fr 54px 42px 48px;gap:6px;align-items:center;padding:0 9px;color:#5f6a65;font-size:6px;text-transform:uppercase;border-bottom:1px solid #202925}.teamColumns span:not(:first-child){text-align:right}.teamMember{min-height:52px;display:grid;grid-template-columns:70px minmax(120px,1fr) 54px 42px 48px;align-items:center;gap:6px;padding:3px 9px;border-bottom:1px solid #202925;position:relative}.teamMember:last-child{border-bottom:0}.teamMember.owner{background:linear-gradient(90deg,rgba(169,229,27,.1),transparent);box-shadow:inset 3px 0 0 var(--green)}.teamTank{width:68px;height:44px;display:grid;place-items:center}.teamTank img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(0,0,0,.8))}.teamIdentity{min-width:0}.teamIdentity strong{display:block;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.teamIdentity strong span{color:#98a59e;font-weight:600}.teamIdentity small{display:block;color:#707c76;font-size:9px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.teamMetric{text-align:right}.teamMetric b{display:block;font-size:9px}.teamMetric span{display:none}.reportHint{padding:0 15px 14px;color:#647069;font-size:9px;line-height:1.5}.reportEmpty{padding:28px 12px;text-align:center;color:#718079;font-size:9px}.efficiencyCard{min-height:100%}
@media(max-width:980px){.overviewReportGrid,.teamsGrid{grid-template-columns:1fr}.personalReportGrid,.detailedReportGrid{grid-template-columns:1fr 1fr}.twoColInteractions{grid-template-columns:1fr}.battleTabs{overflow-x:auto}.battleTabs button{white-space:nowrap;padding:0 15px}}
@media(max-width:650px){.reportTopActions{align-items:flex-start;flex-direction:column}.reportTopActions>div:last-child{width:100%;flex-wrap:wrap}.battleReportContent{padding:8px}.personalReportGrid,.detailedReportGrid{grid-template-columns:1fr}.overviewStatGrid{grid-template-columns:repeat(2,1fr)}.compactAwards{grid-template-columns:1fr}.interactionRow{grid-template-columns:64px 1fr}.interactionNumbers{grid-column:1/-1;justify-content:flex-start;padding-bottom:6px}.teamMember{grid-template-columns:58px minmax(100px,1fr) 50px 34px}.teamMetric:last-child{display:none}.teamColumns{grid-template-columns:1fr 50px 34px}.teamColumns span:last-child{display:none}.teamTank{width:56px}.battleTabs{padding:0}.battleTabs button{font-size:9px;padding:0 12px}}

/* v0.2.1 COMPACT BATTLE REPORT */
.replayPage{padding-top:22px;padding-bottom:42px}
.replayPage .detailHero{min-height:300px;height:300px;border-radius:5px}
.replayPage .detailCopy{padding:34px 34px;max-width:570px}
.replayPage .detailCopy h1{font-size:48px;margin:10px 0 4px}
.replayPage .detailCopy p{font-size:12px;margin:8px 0}
.replayPage .detailTankRender{top:18px;right:2%;width:54%;height:225px}
.replayPage .detailMapTag{top:14px;right:14px;font-size:9px;padding:5px 8px}
.replayPage .detailStats{left:34px;right:34px;bottom:18px}
.replayPage .detailStats>div{padding:11px 14px}
.replayPage .detailStats strong{font-size:21px}
.replayPage .detailStats span{font-size:8px}
.reportTopActions{min-height:54px;margin:10px 0;padding:9px 12px}
.reportTopActions>div:first-child strong{font-size:11px}
.reportTopActions>div:first-child span{font-size:8px}
.reportTopActions .button{padding:10px 14px;font-size:9px}
.battleTabs.compactTabs{height:44px;margin-top:7px;padding:0 8px;position:sticky;top:68px;z-index:22;background:rgba(8,13,11,.97);backdrop-filter:blur(10px)}
.battleTabs.compactTabs button{height:43px;font-size:11.5px;padding:0 24px}
.battleReportContent{padding:10px}
.personalCompactGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.compactHead{min-height:54px;padding:9px 12px}
.compactHead h3{font-size:16px;margin-top:2px}
.compactHead span{font-size:7px}
.positiveText{color:var(--green)!important}.negativeText{color:var(--red)!important}
.personalScoreStrip{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #25302b}
.personalScoreStrip>div{padding:10px 12px;border-right:1px solid #25302b}
.personalScoreStrip>div:last-child{border-right:0}
.personalScoreStrip strong{display:block;font-size:19px;line-height:1.05}
.personalScoreStrip span{display:block;margin-top:4px;color:#748079;font-size:9px;text-transform:uppercase}
.quickStatGrid{display:grid;grid-template-columns:1fr 1fr;padding:5px 12px 8px;gap:0 18px}
.compactLine{min-height:29px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px dotted #2a3530}
.compactLine>span{color:#909b95;font-size:10px}
.compactLine>strong{font-size:12px;text-align:right;font-weight:850}
.value{font-size:12px;font-weight:900}.value.positive{color:var(--green)}.value.negative{color:#ef6b64}.value.accent{color:#d8f58a}.value.gold{color:var(--gold)}.value.neutral{color:#eef3f0}
.compactAwardsRow{padding:7px 12px 10px;display:flex;gap:7px;overflow-x:auto;border-top:1px solid #202925}
.compactAwardsRow .awardGrid{display:flex;gap:7px;margin:0;flex-wrap:nowrap}
.compactAwardsRow .awardTile{min-width:130px;min-height:46px;padding:6px 8px}
.compactAwardsRow .awardTile img{width:28px;height:34px}
.compactAwardsRow .awardTile strong{font-size:8px}.compactAwardsRow .awardTile span{font-size:6px}
.compactEfficiency .reportCardHead{min-height:48px}
.compactInteractionList{padding:2px 10px 7px}
.compactInteractionList .interactionRow{min-height:46px;grid-template-columns:58px minmax(95px,1fr) auto;gap:7px}
.compactInteractionList .interactionTank{width:56px;height:36px}
.compactInteractionList .interactionTarget strong{font-size:10px}.compactInteractionList .interactionTarget small{font-size:7px}
.compactInteractionList .interactionNumbers b,.compactInteractionList .interactionNumbers span{font-size:9px;padding:3px 5px}
.compactTeams{gap:12px;align-items:start}
.compactTeamHeader{height:53px;padding:7px 10px}
.compactTeamHeader h3{font-size:15px;margin-top:2px}.compactTeamHeader span{font-size:7px}
.teamWin .teamHeader h3,.teamWin .teamTotals b{color:var(--green)}
.teamLoss .teamHeader h3{color:#ef6b64}.teamLoss .teamTotals b{color:#d9e1dc}
.teamColumns{height:23px;grid-template-columns:1fr 58px 38px 48px;padding:0 7px;font-size:7px}
.teamMember{min-height:38px;height:38px;grid-template-columns:49px minmax(105px,1fr) 58px 38px 48px;gap:5px;padding:1px 7px}
.teamTank{width:47px;height:31px}.teamIdentity strong{font-size:10px}.teamIdentity small{font-size:9px;margin-top:1px}.teamMetric b{font-size:10px}
.teamMember.owner{background:linear-gradient(90deg,rgba(169,229,27,.16),rgba(169,229,27,.025));box-shadow:inset 3px 0 0 var(--green)}
.classicReportGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.classicBlock{min-height:0}.classicTitle{height:38px;display:flex;align-items:center;padding:0 12px;border-bottom:1px solid #28322e;background:#101611;text-transform:uppercase;font-weight:900;font-size:13px}
.compactTable{padding:4px 12px 8px}.classicBlock .compactLine{min-height:30px}.classicBlock .compactLine>span{font-size:10px}.classicBlock .value{font-size:12px}
.reportMiniHint{margin:0;padding:5px 12px 9px;color:#68746e;font-size:9px;line-height:1.35}
@media(max-width:980px){.personalCompactGrid,.classicReportGrid{grid-template-columns:1fr}.battleTabs.compactTabs{top:68px}.replayPage .detailTankRender{opacity:.55;right:-7%;width:68%}}
@media(max-width:650px){.replayPage{padding-top:10px}.replayPage .detailHero{height:auto;min-height:330px}.replayPage .detailCopy{padding:28px 20px}.replayPage .detailStats{position:absolute;left:12px;right:12px;bottom:12px;margin:0}.replayPage .detailTankRender{right:-26%;width:96%;opacity:.38}.personalScoreStrip{grid-template-columns:repeat(2,1fr)}.quickStatGrid{grid-template-columns:1fr}.battleTabs.compactTabs button{font-size:9px;padding:0 12px}.teamMember{grid-template-columns:45px minmax(92px,1fr) 55px 32px;height:38px}.teamMetric.xpMetric{display:none}.teamColumns{grid-template-columns:1fr 55px 32px}.teamColumns span:last-child{display:none}}

/* v0.2.2 REPORT UX + MEDALS + DRAW */
:root{--draw:#e2aa3a}
.outcome.draw{color:var(--draw)}.resultText.win{color:var(--green)}.resultText.loss{color:#ef6b64}.resultText.draw{color:var(--draw)}.resultText.unknown{color:#a4aea9}
.resultEyebrow.win{color:#c7e98a}.resultEyebrow.loss{color:#ef8b85}.resultEyebrow.draw{color:#f2c86b}
.drawHero{box-shadow:inset 0 2px 0 rgba(226,170,58,.55)}
.homeHero h1{font-size:clamp(48px,4vw,66px);max-width:560px;line-height:.93}.homeHero h1 em{display:block}.homeHero .heroCopy{max-width:570px}
.heroMetrics{gap:12px;margin-bottom:24px}.heroMetrics>div{min-width:112px;padding:9px 12px 9px 9px;border:1px solid #28332e;border-radius:5px;background:rgba(8,14,11,.66);display:flex;align-items:center;gap:9px}.heroMetrics>div:before{display:none}.metricIcon{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:rgba(169,229,27,.08);border:1px solid rgba(169,229,27,.25);color:var(--green);flex:0 0 auto}.metricIcon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.metricText{display:block}.metricText strong{font-size:19px;line-height:1.05}.metricText small{display:block;margin-top:3px;color:#86928c;font-size:9px;text-transform:uppercase;letter-spacing:.07em}
.replayPage .detailHero{height:270px;min-height:270px}.replayPage .detailCopy{padding:25px 30px;max-width:620px}.replayPage .detailCopy h1{font-size:43px}.replayPage .detailTankRender{top:9px;height:205px}.replayPage .detailStats{left:30px;right:30px;bottom:13px}.replayPage .detailStats>div{padding:9px 13px}.replayPage .detailStats strong{font-size:20px}.replayPage .detailStats span{font-size:8px}
.heroAwards{display:flex;align-items:center;gap:6px;margin-top:10px;max-width:560px;min-height:38px}.heroMedal{height:38px;max-width:125px;display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid rgba(226,183,72,.26);background:rgba(10,13,10,.72);border-radius:4px;color:#e4d29a;overflow:hidden}.heroMedal.mastery{border-color:rgba(169,229,27,.34)}.heroMedal img{width:29px;height:31px;object-fit:contain;flex:0 0 auto}.heroMedal b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.heroMedal.more{min-width:59px;justify-content:center;flex-direction:column;gap:0;color:#e8c86c}.heroMedal.more b{font-size:14px}.heroMedal.more small{font-size:6px;text-transform:uppercase;color:#a69768}
.reportTopActions{margin:7px 0}.battleTabs.compactTabs{margin-top:4px;height:42px}.battleTabs.compactTabs button{height:41px;font-size:12.5px;color:#9ba69f}.battleTabs.compactTabs button.active{color:var(--green)}
.personalCompactGrid{gap:8px}.compactHead h3{font-size:15px}.compactHead span{font-size:8px}.clearerStats .compactLine>span{font-size:12.5px;color:#a1ada6}.clearerStats .compactLine>strong,.clearerStats .value{font-size:13px}.quickStatGrid{padding:4px 12px 8px}.compactLine{min-height:31px}
.compactInteractionList .interactionRow{min-height:43px}.compactInteractionList .interactionTarget strong{font-size:11px}.compactInteractionList .interactionTarget small{font-size:8px}.interactionNumbers b,.interactionNumbers span{font-size:8px}
.teamDraw{box-shadow:inset 0 2px 0 rgba(226,170,58,.62)!important}.teamDraw .teamHeader h3,.teamDraw .teamTotals b{color:var(--draw)}
.compactTeamHeader h3{font-size:14px}.compactTeamHeader span{font-size:8px}.teamMember{height:35px;min-height:35px}.teamIdentity strong{font-size:10.5px}.teamIdentity small{font-size:7.5px}.teamMetric b{font-size:10.5px}.teamColumns{font-size:7.5px}
.classicTitle{font-size:14px}.classicBlock .compactLine>span{font-size:12.5px;color:#9ba69f}.classicBlock .value{font-size:13px}.classicBlock .compactLine{min-height:31px}.creditTotal{margin:5px 12px 8px;padding:10px 11px;border:1px solid #36423c;background:#0a100d;display:flex;align-items:center;justify-content:space-between;gap:10px}.creditTotal>span{font-size:11.5px;text-transform:uppercase;font-weight:800;color:#b7c0bb}.creditTotal .value{font-size:18px}.creditsBlock .reportMiniHint{padding-top:0}.value.neutral{color:#edf2ef}.value.positive{color:#a9e51b}.value.negative{color:#ff6e66}.value.accent{color:#d6f48b}.value.gold{color:#efc45b}
@media(max-width:980px){.heroAwards{max-width:430px}.heroMedal{max-width:105px}.replayPage .detailHero{height:290px;min-height:290px}}
@media(max-width:650px){.homeHero h1 em{display:inline}.heroMetrics{display:grid;grid-template-columns:repeat(2,1fr);margin-top:55px}.heroMetrics>div{min-width:0}.replayPage .detailHero{min-height:330px;height:330px}.heroAwards{max-width:66%;flex-wrap:wrap}.heroMedal{height:34px}.heroMedal img{width:25px;height:27px}.teamMember{height:38px;min-height:38px}}

/* v0.2.3 MEDAL CATALOG FIX */
.heroMedal.iconOnly{min-width:52px;padding:5px 7px;justify-content:center}.heroMedal.iconOnly img{width:38px;height:38px}.awardTile.iconOnlyAward{display:grid;place-items:center;min-width:72px}.awardTile.iconOnlyAward img{width:48px;height:48px}.cardAwards .awardCount{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:22px;padding:0 7px;border:1px solid #4b584c;color:#a6b1a8;background:#111714;font-weight:800}.cardAwards span:empty{display:none}

/* =========================================================
   v0.2.5 REPORT CLARITY + MEDALS V3 + DIAGNOSTIC LOG
   ========================================================= */
.catalogMeta{min-height:26px;margin:8px 0 10px;color:#839089;font-size:11px}.catalogMeta b{color:#dfe7e2}.catalogPager{margin:20px 0 4px;padding:12px 14px;border:1px solid #29332f;background:#0a100e;display:flex;align-items:center;justify-content:space-between;gap:18px}.pagerInfo{color:#87938d;font-size:11px}.pagerInfo b{color:#e8efeb}.pagerButtons{display:flex;align-items:center;gap:6px}.pageBtn{min-width:34px;height:32px;padding:0 9px;border:1px solid #35413c;background:#101714;color:#bec8c2;font:800 11px/1 Inter,"Segoe UI",Arial,sans-serif;border-radius:3px;cursor:pointer}.pageBtn:hover:not(:disabled){border-color:#71894b;color:#fff}.pageBtn.active{background:#6d9f10;border-color:#9bd327;color:#fff}.pageBtn.arrow{font-size:16px}.pageBtn:disabled{opacity:.28;cursor:default}.pageGap{padding:0 3px;color:#59655f}

/* Compact hero: the report should start without a long scroll. */
.replayPage .detailHero{height:228px!important;min-height:228px!important}.replayPage .detailCopy{padding:21px 28px!important;max-width:590px}.replayPage .detailCopy h1{font-size:39px!important;margin:7px 0 2px}.replayPage .detailCopy p{font-size:12.5px;margin:5px 0}.replayPage .detailTankRender{top:5px!important;right:2%!important;width:50%!important;height:169px!important}.replayPage .detailMapTag{top:10px;right:10px}.replayPage .detailStats{left:28px!important;right:28px!important;bottom:10px!important;height:52px}.replayPage .detailStats>div{padding:7px 12px!important}.replayPage .detailStats strong{font-size:19px!important}.replayPage .detailStats span{font-size:7px!important}.replayPage .vehicleBadges{margin-top:6px}.replayPage .heroAwards{margin-top:7px;min-height:30px;gap:4px}.replayPage .heroMedal{height:31px;max-width:116px;padding:2px 5px}.replayPage .heroMedal img{width:24px;height:26px}.replayPage .heroMedal b{font-size:7.5px}.replayPage .heroMedal.more b{font-size:12px}
.reportTopActions{min-height:43px!important;margin:6px 0!important;padding:7px 10px!important}.reportTopActions>div:first-child strong{font-size:10px!important}.reportTopActions>div:first-child span{font-size:7px!important}.reportTopActions .button{padding:8px 12px!important;font-size:8px!important}.battleTabs.compactTabs{height:38px!important;margin-top:3px!important}.battleTabs.compactTabs button{height:37px!important;font-size:10px!important;padding:0 20px!important}.battleReportContent{padding:8px!important}

/* Personal score: familiar post-battle layout, modernized. */
.postBattlePersonal{display:grid;grid-template-columns:.92fr 1.08fr;gap:8px}.personalResultCard,.postBattleEfficiency{min-height:365px}.personalTitle{min-height:38px;height:38px;padding:0 14px;display:flex;align-items:center;justify-content:space-between}.personalTitle>span{font-size:15px;font-weight:900;text-transform:uppercase}.personalTitle>b{font-size:10px}.personalBattleScene{height:112px;position:relative;overflow:hidden;background-size:cover;background-position:center;border-bottom:1px solid #26302c;display:flex;align-items:center;padding:8px 12px}.personalBattleScene:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(2,5,4,.22));pointer-events:none}.personalBattleScene>img{position:relative;z-index:1;width:42%;height:102px;object-fit:contain;filter:drop-shadow(0 9px 8px rgba(0,0,0,.75))}.personalBattleScene>div{position:relative;z-index:2;min-width:0}.personalBattleScene strong{display:block;font-size:17px}.personalBattleScene span{display:block;margin-top:5px;color:#b7c2bc;font-size:10px}.personalBattleScene small{display:block;margin-top:4px;color:#718079;font-size:8px}.personalMoneyXp{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #26302c}.personalMoneyXp>div{padding:11px 13px;border-right:1px solid #26302c}.personalMoneyXp>div:last-child{border-right:0}.personalMoneyXp span{display:block;color:#8d9993;font-size:10.5px;text-transform:uppercase}.personalMoneyXp strong{display:block;margin-top:5px;font-size:19px}.personalMoneyXp strong .value{font-size:19px}.personalMoneyXp small{display:block;margin-top:4px;color:#65716b;font-size:8px}.efficiencyStrip{display:grid;grid-template-columns:repeat(4,1fr);padding:9px 8px}.efficiencyStrip>div{text-align:center;border-right:1px solid #28322e}.efficiencyStrip>div:last-child{border-right:0}.efficiencyStrip strong{display:block;font-size:15px;color:#d8ef9c}.efficiencyStrip span{display:block;margin-top:3px;color:#738079;font-size:9px;text-transform:uppercase}.postInteractionList{padding:0 8px}.effRowWrap{display:block}.effRowWrap.extraEff{display:none}.effRowWrap.extraEff.show{display:block}.postBattleEfficiency .interactionRow{min-height:38px;height:38px;padding:2px 5px}.postBattleEfficiency .interactionTank{width:52px;height:34px}.postBattleEfficiency .interactionTarget strong{font-size:9.5px}.postBattleEfficiency .interactionTarget small{font-size:7px}.postBattleEfficiency .interactionNumbers{gap:4px}.postBattleEfficiency .interactionNumbers b,.postBattleEfficiency .interactionNumbers span{font-size:9px;padding:3px 5px}.showMoreEff{display:block;width:calc(100% - 16px);margin:6px 8px 8px;height:28px;border:1px solid #33413a;background:#0e1512;color:#a9e51b;font-size:9px;font-weight:900;text-transform:uppercase;cursor:pointer}.showMoreEff:hover{background:#141d18}

/* Teams: 15x15 should fit like a classic battle table. */
.compactTeams{gap:8px}.compactTeams .teamHeader{height:50px!important;padding:7px 9px!important}.compactTeams .teamHeader h3{font-size:13px!important;margin-top:2px}.compactTeams .teamHeader span{font-size:7px!important}.compactTeams .teamTotals b{font-size:11px}.compactTeams .teamColumns{height:21px!important;font-size:7px!important}.compactTeams .teamMember{height:30px!important;min-height:30px!important;grid-template-columns:42px minmax(100px,1fr) 56px 34px 44px!important;padding:0 6px!important}.compactTeams .teamTank{width:40px!important;height:28px!important}.compactTeams .teamIdentity strong{font-size:9.5px!important}.compactTeams .teamIdentity small{font-size:6.8px!important;margin-top:0!important}.compactTeams .teamMetric b{font-size:9.5px!important}

/* Detailed report: four compact blocks with aligned values and dotted guides. */
.postBattleDetailGrid{display:grid;grid-template-columns:.92fr 1.08fr;gap:8px}.postBattleDetailGrid .postBlock{min-height:185px}.postBattleDetailGrid .classicTitle{height:37px;display:flex;align-items:center;padding:0 14px;font-size:13px!important}.postBattleDetailGrid .compactTable{padding:4px 10px 7px}.postBattleDetailGrid .compactLine{min-height:24px!important;height:24px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;border:0!important;position:relative}.postBattleDetailGrid .compactLine:before{content:"";height:1px;border-bottom:1px dotted #33403a;align-self:center;grid-column:2}.postBattleDetailGrid .compactLine>span{grid-column:1;font-size:9.5px!important;color:#a0aca6!important}.postBattleDetailGrid .compactLine>strong{grid-column:3;text-align:right;font-size:11.5px}.postBattleDetailGrid .compactLine>strong .value{font-size:11.5px!important}.finalCredit{margin:4px 10px 9px!important;padding:8px 10px!important}.finalCredit>span{font-size:9px!important}.finalCredit .value{font-size:18px!important}

@media(max-width:980px){.postBattlePersonal,.postBattleDetailGrid{grid-template-columns:1fr}.personalResultCard,.postBattleEfficiency{min-height:auto}.catalogPager{align-items:flex-start;flex-direction:column}.replayPage .detailHero{height:250px!important;min-height:250px!important}.replayPage .detailTankRender{opacity:.52!important;width:60%!important;right:-5%!important}}
@media(max-width:650px){.catalogPager{padding:10px}.pagerButtons{max-width:100%;overflow-x:auto}.pageBtn{min-width:32px}.efficiencyStrip{grid-template-columns:repeat(2,1fr);gap:8px}.efficiencyStrip>div:nth-child(2){border-right:0}.postBattleDetailGrid .compactLine>span{font-size:9px!important}.replayPage .detailHero{height:315px!important;min-height:315px!important}.replayPage .detailTankRender{width:90%!important;right:-23%!important;opacity:.38!important}}

/* =========================================================
   v0.2.5 REPORT CLARITY + MEDALS V3 + DIAGNOSTIC LOG
   ========================================================= */
.replayPage .detailStats span{font-size:8.5px!important;letter-spacing:.05em;color:#84948b!important}
.replayPage .detailStats strong{font-size:20px!important}
.heroAwards{overflow:visible}.heroMedal.more,.awardCount{display:none!important}
.efficiencyStrip .dangerMetric strong{color:#ff6e66}
.receivedDamagePill{color:#ff9891!important;border-color:rgba(228,90,85,.45)!important;background:rgba(111,29,25,.16)!important}

/* Team table: player first, tank title centered, then numbers. */
.compactTeams .teamColumns,
.compactTeams .teamMember{
  grid-template-columns:42px minmax(112px,1.18fr) minmax(104px,1fr) 58px 58px 48px!important;
  column-gap:7px!important;
}

.compactTeams .teamColumns{padding:0 6px!important;align-items:center}
.compactTeams .teamColumns span:nth-child(2){text-align:left}
.compactTeams .teamColumns span:nth-child(3){text-align:center}
.compactTeams .teamColumns span:nth-child(n+4){text-align:right}
.teamPlayer{min-width:0;overflow:hidden}
.teamPlayer strong{display:block;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#edf3ef}
.teamPlayer strong span{color:#8ea497;font-size:8px}
.teamVehicle{font-size:8.7px;color:#a9b6af;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compactTeams .teamMetric{text-align:right}
.compactTeams .teamMetric b{font-size:9.7px!important}
.compactTeams .teamHeader{border-top-width:2px}
.compactTeams .teamCard.teamWin .teamHeader{border-top-color:#78ae17!important}
.compactTeams .teamCard.teamLoss .teamHeader{border-top-color:#b94c48!important}
.compactTeams .teamCard.teamDraw .teamHeader{border-top-color:#d5a93d!important}
.compactTeams .teamCard.teamWin .teamHeader h3{color:#a9e51b!important}
.compactTeams .teamCard.teamLoss .teamHeader h3{color:#ff6e66!important}
.compactTeams .teamCard.teamDraw .teamHeader h3{color:#efc45b!important}

/* Detailed report: readable labels and less visual noise. */
.postBattleDetailGrid .compactLine>span{font-size:10px!important;color:#aab5af!important}
.postBattleDetailGrid .compactLine>strong,
.postBattleDetailGrid .compactLine>strong .value{font-size:12px!important}
.finalCredit>span{font-size:10px!important;color:#d5ddd8!important}
.finalCredit .value{font-size:20px!important}
.personalMoneyXp span{font-size:9.5px}
.efficiencyStrip span{font-size:7.5px;color:#87958d}

@media(max-width:1100px){
  .compactTeams .teamColumns,.compactTeams .teamMember{grid-template-columns:38px minmax(100px,1.1fr) minmax(90px,.9fr) 52px 52px 44px!important;column-gap:5px!important}
  .teamVehicle{font-size:8px}.teamPlayer strong{font-size:8.8px}
}
@media(max-width:760px){
  .compactTeams .teamColumns span:nth-child(3),.compactTeams .teamMember .teamVehicle{display:none}
  .compactTeams .teamColumns,.compactTeams .teamMember{grid-template-columns:38px minmax(110px,1fr) 52px 52px 44px!important}
}

/* =========================================================
   v0.2.6 COMPACT PERSONAL SCORE + MEDALS PIPELINE FIX
   ========================================================= */
.compactReplayPage{padding-top:12px!important}
.replayContextBar{min-height:58px;border:1px solid #2c3833;background:linear-gradient(90deg,#0b110f,#0d1512);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:9px 12px;margin:0 0 5px}
.replayContextIdentity{min-width:0;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:10px}.replayContextIdentity .contextResult{font-size:11.5px;font-weight:950;letter-spacing:.09em;text-transform:uppercase;padding-right:10px;border-right:1px solid #334039}.replayContextIdentity strong{font-size:18px;white-space:nowrap}.replayContextIdentity small{font-size:10.5px;color:#8f9c95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.winContext .contextResult{color:#a9e51b}.lossContext .contextResult{color:#ff6e66}.drawContext .contextResult{color:#efc45b}.replayContextActions{display:flex;gap:7px;flex:0 0 auto}.replayContextActions .button{padding:8px 11px!important;font-size:8px!important}.compactReplayPage .battleTabs.compactTabs{margin-top:0!important}

.compactPersonalScore{grid-template-columns:.94fr 1.06fr;gap:8px}.compactScoreCard{min-height:0!important}.scoreResultBand{min-height:72px;display:grid;grid-template-columns:180px 1fr;align-items:stretch;border-bottom:1px solid #303c36;background:linear-gradient(90deg,rgba(49,70,28,.36),rgba(16,24,19,.88))}.lossBand{background:linear-gradient(90deg,rgba(103,33,30,.42),rgba(25,18,17,.9))}.drawBand{background:linear-gradient(90deg,rgba(114,85,25,.37),rgba(23,21,16,.9))}.scoreResultText{display:flex;justify-content:center;flex-direction:column;padding:10px 14px;border-right:1px solid #344039}.scoreResultText small{font-size:9px;color:#89958f;text-transform:uppercase;letter-spacing:.08em}.scoreResultText strong{font-size:24px;line-height:1;margin-top:5px;color:#a9e51b}.lossBand .scoreResultText strong{color:#ff6e66}.drawBand .scoreResultText strong{color:#efc45b}.scoreMainNumbers{display:grid;grid-template-columns:repeat(4,1fr)}.scoreMainNumbers span{display:flex;justify-content:center;flex-direction:column;padding:8px 12px;border-right:1px solid #344039}.scoreMainNumbers span:last-child{border-right:0}.scoreMainNumbers b{font-size:18px;color:#fff}.scoreMainNumbers i{font-style:normal;font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:#839089;margin-top:3px}
.scoreAwardRibbon{min-height:43px;padding:4px 8px;border-bottom:1px solid #29342f;background:rgba(79,38,25,.17)}.scoreAwardRibbon .heroAwards{margin:0!important;max-width:none!important;min-height:34px!important;gap:6px}.scoreAwardRibbon .heroMedal{height:34px!important;max-width:145px!important}.scoreAwardRibbon .heroMedal img{width:27px!important;height:28px!important}.scoreAwardRibbon .heroMedal b{font-size:8px!important}
.compactBattleScene{height:96px!important}.compactBattleScene>img{height:90px!important;width:40%!important}.compactBattleScene strong{font-size:16px!important}.compactMoneyXp>div{padding:8px 11px!important}.compactMoneyXp strong{font-size:17px!important}.compactMoneyXp span{font-size:8.5px!important}.compactMoneyXp small{font-size:7.5px!important}.compactEfficiency{padding:7px 6px!important}.compactEfficiency strong{font-size:13px!important}.compactEfficiency span{font-size:7px!important}.compactEfficiencyCard{min-height:0!important}.compactEfficiencyCard .interactionRow{height:35px!important;min-height:35px!important}.compactEfficiencyCard .interactionTank{height:30px!important;width:46px!important}

.teamsSortMaster{height:38px;border:1px solid #2a3631;border-bottom:0;background:#0b120f;display:flex;align-items:center;padding:3px 7px}.teamSortBar{display:flex;align-items:center;gap:4px;width:100%}.teamSortBtn{height:29px;min-width:42px;padding:0 7px;border:1px solid transparent;background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));color:#7f8c85;display:inline-flex;align-items:center;justify-content:center;gap:4px;cursor:pointer;font:800 8px/1 Inter,"Segoe UI",Arial,sans-serif;text-transform:uppercase}.teamSortBtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.teamSortBtn span{display:none}.teamSortBtn i{font-style:normal;font-size:11.5px;min-width:8px}.teamSortBtn:hover{color:#d7e0db;border-color:#39463f}.teamSortBtn.active{color:#a9e51b;border-color:#607b35;background:rgba(169,229,27,.06)}.compactTeams{margin-top:0!important}.compactTeams .teamVehicle{text-align:center!important}.compactTeams .teamColumns span:nth-child(3){text-align:center!important}

@media(max-width:980px){.replayContextIdentity{grid-template-columns:auto 1fr}.replayContextIdentity small{grid-column:1/3}.compactPersonalScore{grid-template-columns:1fr}.scoreResultBand{grid-template-columns:155px 1fr}.scoreMainNumbers b{font-size:15px}.scoreMainNumbers i{font-size:6.5px}}
@media(max-width:650px){.replayContextBar{align-items:flex-start;flex-direction:column}.replayContextActions{width:100%}.replayContextActions .button{flex:1;text-align:center}.scoreResultBand{display:block}.scoreResultText{border-right:0;border-bottom:1px solid #344039}.scoreMainNumbers{grid-template-columns:repeat(2,1fr)}.scoreAwardRibbon .heroAwards{overflow-x:auto!important;flex-wrap:nowrap!important}.teamSortBtn{min-width:38px}}

/* =========================================================
   v0.2.7 PERSONAL SCORE LAYOUT REWORK + BRIGHTER MAP CARD
   ========================================================= */
.compactReplayPage{padding-top:14px!important;padding-bottom:52px!important}
.v027ContextBar{min-height:54px!important;background:linear-gradient(90deg,#101815,#121c18)!important;border-color:#394740!important;box-shadow:0 10px 28px rgba(0,0,0,.16)}
.v027ContextIdentity{display:flex!important;align-items:center!important;gap:12px!important;min-width:0!important}
.v027ContextIdentity strong{font-size:21px!important;letter-spacing:-.015em;color:#fff}
.v027ContextIdentity small{font-size:10px!important;color:#a6b2ab!important;border-left:1px solid #46534d;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Slightly brighter report surfaces without changing the approved site palette. */
.compactReplayPage .battleReportContent{background:linear-gradient(180deg,rgba(18,29,24,.34),rgba(9,15,12,.12));border-color:#35443d!important}
.compactReplayPage .reportCard{background:linear-gradient(145deg,#111a16,#0c1411)!important;border-color:#35443d!important}
.compactReplayPage .classicTitle{background:linear-gradient(90deg,#15211b,#101915)!important;border-bottom-color:#394740!important;color:#f8faf9!important}

.personalScoreStack{display:flex;flex-direction:column;gap:10px}
.v027ScoreCard{width:100%;overflow:hidden}
.v027ScoreResultBand{min-height:92px!important;grid-template-columns:220px 1fr!important;background:linear-gradient(90deg,rgba(57,83,30,.48),rgba(18,29,23,.88))!important}
.v027ScoreResultBand.lossBand{background:linear-gradient(90deg,rgba(121,42,37,.48),rgba(31,22,19,.88))!important}
.v027ScoreResultBand.drawBand{background:linear-gradient(90deg,rgba(130,99,35,.48),rgba(31,28,19,.88))!important}
.v027ScoreResultBand .scoreResultText{padding:14px 18px!important}
.v027ScoreResultBand .scoreResultText small{font-size:9px!important;color:#afbbb4!important}
.v027ScoreResultBand .scoreResultText strong{font-size:31px!important;margin-top:7px!important}
.v027ScoreResultBand .scoreMainNumbers b{font-size:25px!important;line-height:1!important}
.v027ScoreResultBand .scoreMainNumbers i{font-size:8px!important;color:#9ba8a1!important;margin-top:6px!important}
.v027ScoreResultBand .scoreMainNumbers span{padding:12px 18px!important}

.v027AwardRibbon{min-height:56px!important;padding:7px 12px!important;background:linear-gradient(90deg,rgba(117,69,23,.20),rgba(41,28,17,.10))!important}
.v027AwardRibbon .heroAwards{gap:8px!important;min-height:42px!important}
.v027AwardRibbon .heroMedal{height:42px!important;max-width:190px!important;padding:3px 8px!important;background:rgba(11,17,14,.54)!important;border-color:#6a5d2a!important}
.v027AwardRibbon .heroMedal img{width:34px!important;height:35px!important;object-fit:contain}
.v027AwardRibbon .heroMedal b{font-size:9px!important;color:#f2df9a!important}

/* User asked for the map to be the visual centre: larger and much less dimmed. */
.v027BattleScene{height:168px!important;min-height:168px!important;background-size:cover!important;background-position:center 48%!important;filter:saturate(.98) brightness(1.12) contrast(1.03);position:relative;overflow:hidden}
.v027BattleScene:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,9,7,.18),transparent 54%,rgba(4,9,7,.03));pointer-events:none}
.v027BattleScene>img{height:158px!important;width:43%!important;object-fit:contain!important;left:2%!important;right:auto!important;bottom:-5px!important;filter:drop-shadow(0 14px 14px rgba(0,0,0,.70)) brightness(1.08)!important;z-index:2!important}
.v027BattleScene>div{position:relative;z-index:3;margin-left:45%!important;padding-left:22px!important}
.v027BattleScene strong{font-size:25px!important;text-shadow:0 2px 8px #000}
.v027BattleScene span{font-size:11px!important;color:#e0e7e3!important;text-shadow:0 2px 6px #000}
.v027BattleScene small{font-size:9px!important;color:#c3cdc7!important;text-shadow:0 2px 5px #000}

.v027MoneyXp{grid-template-columns:1fr 1fr!important;background:#101915!important}
.v027MoneyXp>div{padding:12px 16px!important}.v027MoneyXp span{font-size:10px!important;color:#aeb9b2!important}.v027MoneyXp strong{font-size:22px!important}.v027MoneyXp small{font-size:8px!important;color:#84938b!important}
.v027EfficiencyStrip{padding:10px 8px!important;background:#0e1713!important}.v027EfficiencyStrip strong{font-size:17px!important}.v027EfficiencyStrip span{font-size:8px!important;color:#9ca9a2!important}

/* Efficiency moves below the result and uses the full content width. */
.v027EfficiencyCard{width:100%;min-height:0!important}
.v027EfficiencyCard .personalTitle{height:42px!important;padding:0 13px!important}.v027EfficiencyCard .personalTitle span{font-size:14px!important}.v027EfficiencyCard .personalTitle b{font-size:10px!important}
.v027InteractionGrid{display:grid!important;grid-template-columns:1fr 1fr;column-gap:12px;row-gap:0;padding:5px 9px 7px!important}
.v027InteractionGrid .effRowWrap{min-width:0}
.v027EfficiencyCard .interactionRow{height:44px!important;min-height:44px!important;padding:0 7px!important;background:rgba(15,24,20,.38)}
.v027EfficiencyCard .interactionRow:nth-child(even){background:rgba(18,28,23,.55)}
.v027EfficiencyCard .interactionTank{width:52px!important;height:38px!important}
.v027EfficiencyCard .interactionTarget strong{font-size:10px!important}.v027EfficiencyCard .interactionTarget small{font-size:7.5px!important;color:#93a198!important}
.v027EfficiencyCard .interactionNumbers b,.v027EfficiencyCard .interactionNumbers span{font-size:7.5px!important}
.v027EfficiencyCard .showMoreEff{margin:7px 9px 9px!important;width:calc(100% - 18px)!important}

/* Raise readability of compact tables on 2K/1080p. */
.compactReplayPage .battleTabs button{font-size:10px!important;color:#aeb8b2!important;padding-left:18px!important;padding-right:18px!important}.compactReplayPage .battleTabs button.active{color:#b7ef2e!important}
.compactReplayPage .compactTeams .teamColumns{font-size:7.8px!important;color:#91a098!important}.compactReplayPage .teamPlayer strong{font-size:10.2px!important}.compactReplayPage .teamVehicle{font-size:9.2px!important;color:#c0cbc5!important}
.compactReplayPage .postBattleDetailGrid .compactLine>span{color:#b7c1bb!important;font-size:10.3px!important}

@media(max-width:980px){.v027ContextIdentity{display:grid!important;grid-template-columns:1fr!important}.v027ContextIdentity small{border-left:0;padding-left:0}.v027InteractionGrid{grid-template-columns:1fr}.v027ScoreResultBand{grid-template-columns:180px 1fr!important}.v027BattleScene>div{margin-left:42%!important}.v027BattleScene>img{width:44%!important}}
@media(max-width:650px){.v027ScoreResultBand{display:block!important}.v027ScoreResultBand .scoreResultText{border-right:0!important}.v027BattleScene{height:205px!important}.v027BattleScene>img{width:68%!important;height:145px!important;opacity:.72;left:-8%!important}.v027BattleScene>div{margin-left:28%!important;padding-left:12px!important}.v027BattleScene strong{font-size:21px!important}.v027InteractionGrid{grid-template-columns:1fr}}

/* =========================================================
   v0.2.8 — REPORT POLISH + TRUE MEDAL DECODER
   ========================================================= */
.detailIntroStrip{min-height:54px;border:1px solid #35443d;border-bottom:0;background:linear-gradient(90deg,#101a16,#0b120f);display:flex;align-items:center;justify-content:space-between;padding:9px 14px}.detailIntroStrip>div:first-child{display:flex;flex-direction:column;gap:2px}.detailIntroStrip strong{font-size:12px;text-transform:uppercase;letter-spacing:.035em}.detailIntroStrip span{font-size:8.5px;color:#8f9d95}.detailIntroMetrics{display:flex!important;flex-direction:row!important;gap:20px!important}.detailIntroMetrics span{font-size:9px!important;color:#91a098!important}.detailIntroMetrics b{font-size:12px;color:#eef3f0;margin-right:4px}
.polishedDetailGrid{grid-template-columns:1fr 1fr!important;gap:10px!important;align-items:start!important}.polishedDetailGrid .postBlock{min-height:0!important;height:auto!important}.polishedDetailGrid .compactTable{padding:4px 13px 9px!important}.polishedDetailGrid .compactLine{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:18px!important;min-height:31px!important;height:auto!important;align-items:center!important;border-bottom:1px solid rgba(74,92,83,.42)!important;position:relative!important}.polishedDetailGrid .compactLine:last-child{border-bottom:0!important}.polishedDetailGrid .compactLine:before{display:none!important;content:none!important}.polishedDetailGrid .compactLine>span{grid-column:1!important;font-size:10.5px!important;line-height:1.25!important;color:#b8c3bd!important;white-space:normal!important}.polishedDetailGrid .compactLine>strong{grid-column:2!important;min-width:110px!important;text-align:right!important;font-size:12.5px!important;line-height:1!important}.polishedDetailGrid .compactLine>strong .value{font-size:12.5px!important;font-variant-numeric:tabular-nums}.detailTitle{height:auto!important;min-height:54px!important;padding:9px 13px!important;gap:10px!important;display:flex!important;align-items:center!important;border-bottom:1px solid #3a4942!important;position:relative}.detailTitle:after{content:"";position:absolute;left:0;bottom:-1px;width:58px;height:2px;background:#7cae1e}.detailTitleIcon{width:31px;height:31px;display:grid;place-items:center;border:1px solid #42534a;background:#101a16;color:#a9e51b;border-radius:4px;flex:0 0 auto}.detailTitleIcon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.detailTitle>div{display:flex;flex-direction:column;gap:2px}.detailTitle b{font-size:15px;text-transform:uppercase;letter-spacing:.025em}.detailTitle small{font-size:9px;color:#829087;text-transform:none;letter-spacing:0}.detailTitle-credits .detailTitleIcon{color:#e4b840}.detailTitle-time .detailTitleIcon{color:#b8c4be}.detailTitle-xp .detailTitleIcon{color:#a9e51b}.detailBlock{overflow:hidden}.detailBlockStats{border-top:2px solid rgba(169,229,27,.56)!important}.detailBlockCredits{border-top:2px solid rgba(228,184,64,.52)!important}.detailBlockTime{border-top:2px solid rgba(153,169,160,.42)!important}.detailBlockXp{border-top:2px solid rgba(128,184,31,.48)!important}.polishedDetailGrid .finalCredit{margin:10px 13px 13px!important;padding:11px 12px!important;border:1px solid #45544d!important;background:#0e1713!important}.polishedDetailGrid .finalCredit>span{font-size:10px!important;color:#dce5e0!important}.polishedDetailGrid .finalCredit .value{font-size:21px!important;font-variant-numeric:tabular-nums}
/* Personal Score final clarity pass */
.v027MoneyXp>div>span{font-weight:800!important;letter-spacing:.035em;text-transform:uppercase}.v027MoneyXp>div:first-child{background:linear-gradient(90deg,rgba(30,43,28,.5),rgba(13,21,17,.18))}.v027ScoreResultBand .scoreMainNumbers b{font-variant-numeric:tabular-nums}.v027AwardRibbon{border-top:1px solid rgba(212,168,48,.16)!important;border-bottom:1px solid rgba(212,168,48,.22)!important;background:linear-gradient(90deg,rgba(61,47,17,.24),rgba(15,22,18,.74))!important}
/* Team sort affordance: direction is always obvious on the active control. */
.teamSortBtn{position:relative}.teamSortBtn.active i{display:inline-block!important;font-size:12px!important;font-weight:950!important;color:#a9e51b!important}.teamSortBtn:not(.active) i{display:none!important}.teamSortBtn:hover:after{content:attr(title);position:absolute;left:50%;top:34px;transform:translateX(-50%);z-index:40;white-space:nowrap;background:#050907;border:1px solid #415048;color:#dce5e0;padding:6px 8px;border-radius:4px;font-size:9px;font-weight:700;text-transform:none;letter-spacing:0;pointer-events:none;box-shadow:0 8px 25px rgba(0,0,0,.5)}
@media(max-width:980px){.polishedDetailGrid{grid-template-columns:1fr!important}.detailIntroStrip{align-items:flex-start;gap:8px;flex-direction:column}.detailIntroMetrics{gap:12px!important}.polishedDetailGrid .compactLine>strong{min-width:92px!important}.teamSortBtn:hover:after{display:none}}

/* =========================================================
   v0.2.8.1 — REPORT GRID POLISH + TRUE MEDAL CATALOG
   ========================================================= */
.detailIntroStrip{border-color:#415148!important;background:linear-gradient(90deg,#132019 0%,#0e1713 48%,#0a100e 100%)!important;box-shadow:inset 0 1px rgba(255,255,255,.015)}
.detailIntroMetrics{align-items:center;flex-wrap:wrap}.detailIntroMetrics>span{min-height:28px;display:flex;align-items:center;padding:0 0 0 18px;border-left:1px solid #34423b}.detailIntroMetrics>span:first-child{border-left:0;padding-left:0}.detailIntroMetrics b{font-size:13px!important}.detailNetMetric .value{font-size:13px!important;font-weight:950}.detailNetMetric em{font-style:normal;color:#8e9b94;margin-left:5px;font-size:8.5px;text-transform:uppercase}
.polishedDetailGrid{gap:12px!important}.polishedDetailGrid .reportCard{background:linear-gradient(145deg,#111a16 0%,#0c1411 100%)!important;border-color:#3a4942!important;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.polishedDetailGrid .compactTable{padding:5px 14px 10px!important}.polishedDetailGrid .compactLine{grid-template-columns:minmax(190px,1fr) 132px!important;gap:22px!important;min-height:34px!important;border-bottom:1px solid rgba(83,103,94,.48)!important;padding:0 2px!important;background:none!important}
.polishedDetailGrid .compactLine:nth-child(odd){background:linear-gradient(90deg,rgba(255,255,255,.012),transparent 75%)!important}
.polishedDetailGrid .compactLine>span{font-size:11px!important;color:#c0cbc5!important;letter-spacing:.005em}.polishedDetailGrid .compactLine>strong{min-width:132px!important;font-size:13px!important;font-variant-numeric:tabular-nums}.polishedDetailGrid .compactLine>strong .value{font-size:13px!important}
.detailTitle{min-height:57px!important;background:linear-gradient(90deg,rgba(255,255,255,.018),transparent)!important}.detailTitleIcon{width:34px;height:34px;border-radius:5px!important}.detailTitleIcon svg{width:19px;height:19px}.detailTitle b{font-size:13.5px!important}.detailTitle small{font-size:8.5px!important;color:#8d9b93!important}
.detailBlockStats{border-top-color:#9fdc21!important}.detailBlockCredits{border-top-color:#d3a83b!important}.detailBlockTime{border-top-color:#7f9488!important}.detailBlockXp{border-top-color:#88c21a!important}
.polishedDetailGrid .finalCredit{display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important;min-height:52px!important;background:linear-gradient(90deg,#111c17,#0c1411)!important}.polishedDetailGrid .finalCredit .value{font-size:23px!important}
/* Compact award ribbon is reserved for trusted/official achievements only. */
.v027AwardRibbon .heroMedal{min-height:42px!important;padding:5px 9px!important}.v027AwardRibbon .heroMedal img{width:34px!important;height:34px!important}.v027AwardRibbon .heroMedal b{font-size:9px!important}.v027AwardRibbon:empty{display:none!important}
@media(max-width:980px){.detailIntroMetrics>span{border-left:0;padding-left:0;margin-right:14px}.polishedDetailGrid .compactLine{grid-template-columns:minmax(0,1fr) 112px!important}.polishedDetailGrid .compactLine>strong{min-width:112px!important}}

/* =========================================================
   v0.2.9 — MODERN UI SYSTEM + VERIFIED MEDAL MAPPING
   ========================================================= */
:root{
  --modern-surface:rgba(15,24,20,.82);
  --modern-surface-2:rgba(18,29,24,.72);
  --modern-line:rgba(151,175,163,.16);
  --modern-line-strong:rgba(159,190,173,.27);
  --modern-glow:0 24px 70px rgba(0,0,0,.28);
}
body{background:radial-gradient(900px 520px at 72% -120px,rgba(77,113,63,.20),transparent 68%),radial-gradient(700px 600px at 6% 36%,rgba(47,78,61,.10),transparent 72%),#070c0a!important}
.modernReplayPage{padding-top:30px!important;max-width:1240px!important}.modernReplayHeader{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:13px 17px;margin-bottom:10px;border:1px solid var(--modern-line);border-radius:12px;background:linear-gradient(115deg,rgba(22,35,29,.92),rgba(10,17,14,.72));box-shadow:var(--modern-glow);backdrop-filter:blur(16px)}
.modernReplayIdentity{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:12px;min-width:0}.modernReplayIdentity>span{font-size:9px;font-weight:900;letter-spacing:.16em;color:var(--green);padding:5px 7px;border-radius:999px;background:rgba(169,229,27,.08);border:1px solid rgba(169,229,27,.18)}.modernReplayIdentity>strong{font-size:24px;letter-spacing:-.025em;white-space:nowrap}.modernReplayIdentity>small{font-size:11.5px;color:#98a7a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modernReplayActions{display:flex;gap:8px;flex:0 0 auto}.modernReplayActions .button{border-radius:8px;padding:11px 15px}
.modernReportTabs{display:flex;gap:7px;margin:0 0 11px;padding:5px;border:1px solid var(--modern-line);border-radius:11px;background:rgba(8,14,11,.62);width:max-content;max-width:100%}.modernReportTabs button{border:0;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));color:#8d9b94;padding:10px 15px;display:inline-flex;align-items:center;gap:8px;font:850 10px/1 Inter,"Segoe UI",Arial,sans-serif;text-transform:uppercase;letter-spacing:.035em;cursor:pointer;transition:.18s ease}.modernReportTabs button span{font-size:9px;color:#5f6d66}.modernReportTabs button:hover{color:#dbe4df;background:rgba(255,255,255,.03)}.modernReportTabs button.active{color:#dff7a6;background:linear-gradient(180deg,rgba(169,229,27,.13),rgba(169,229,27,.055));box-shadow:inset 0 0 0 1px rgba(169,229,27,.25)}.modernReportTabs button.active span{color:var(--green)}
.modernReportContent{border:0!important;background:transparent!important;padding:0!important}.modernPersonal{display:grid;gap:12px}.modernBattleOverview,.modernEfficiencySurface,.modernTeam,.modernTeamToolbar,.modernDetailSummary,.modernDetailCard{border:1px solid var(--modern-line);background:linear-gradient(145deg,rgba(17,27,23,.90),rgba(9,16,13,.84));border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.16);overflow:hidden}.modernBattleOverview.winSurface{box-shadow:inset 0 1px 0 rgba(169,229,27,.18),0 18px 52px rgba(0,0,0,.18)}.modernBattleOverview.lossSurface{box-shadow:inset 0 1px 0 rgba(228,90,85,.18),0 18px 52px rgba(0,0,0,.18)}.modernBattleOverview.drawSurface{box-shadow:inset 0 1px 0 rgba(229,182,62,.18),0 18px 52px rgba(0,0,0,.18)}
.modernBattleHeadline{display:grid;grid-template-columns:210px 1fr;align-items:stretch;min-height:112px;background:linear-gradient(90deg,rgba(24,38,31,.72),rgba(12,20,16,.28))}.modernOutcome{display:flex;flex-direction:column;justify-content:center;padding:18px 22px;border-right:1px solid var(--modern-line)}.modernOutcome small{font-size:9px;color:#8f9d96;letter-spacing:.08em}.modernOutcome strong{font-size:31px;line-height:1;margin-top:8px;letter-spacing:-.035em}.winSurface .modernOutcome strong{color:var(--green)}.lossSurface .modernOutcome strong{color:#ff726d}.drawSurface .modernOutcome strong{color:#e5b63e}.modernPrimaryMetrics{display:grid;grid-template-columns:repeat(4,1fr);align-items:center}.modernPrimaryMetrics>div{padding:16px 22px;position:relative}.modernPrimaryMetrics>div:not(:last-child):after{content:"";position:absolute;right:0;top:28%;height:44%;width:1px;background:var(--modern-line)}.modernPrimaryMetrics b{display:block;font-size:28px;letter-spacing:-.035em;font-variant-numeric:tabular-nums}.modernPrimaryMetrics span{display:block;margin-top:6px;color:#819089;font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.modernAwards{display:flex;align-items:center;gap:9px;min-height:54px;padding:6px 14px;border-top:1px solid rgba(230,185,70,.12);border-bottom:1px solid rgba(230,185,70,.12);background:linear-gradient(90deg,rgba(61,47,17,.22),rgba(13,21,17,.25))}.modernAwardsLabel{font-size:9px;color:#a69563;text-transform:uppercase;letter-spacing:.14em;margin-right:2px}.modernAwards .heroAwards{margin:0!important;min-height:38px;max-width:none!important;gap:7px}.modernAwards .heroMedal{border:0!important;background:rgba(255,255,255,.025)!important;height:40px!important;max-width:160px!important;border-radius:8px!important}.modernAwards .heroMedal img{width:34px!important;height:34px!important}.modernAwards .heroMedal b{font-size:9px!important;color:#eadcae}
.modernBattleScene{height:260px;position:relative;overflow:hidden;background-size:cover;background-position:center 48%;display:flex;align-items:center;justify-content:flex-end;padding:24px 34px}.modernBattleScene:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(3,8,6,.16));pointer-events:none}.modernBattleScene>img{position:absolute;z-index:2;left:4%;bottom:-4%;width:56%;height:245px;object-fit:contain;filter:drop-shadow(0 24px 20px rgba(0,0,0,.56))}.modernSceneText{position:relative;z-index:3;text-align:right;max-width:38%;text-shadow:0 2px 18px rgba(0,0,0,.85)}.modernSceneText small{display:block;color:#c8d2cd;font-size:10.5px;text-transform:uppercase;letter-spacing:.11em}.modernSceneText strong{display:block;font-size:31px;margin-top:6px;letter-spacing:-.035em}.modernSceneText span{display:block;color:#c0cbc5;font-size:11.5px;margin-top:6px}
.modernEconomyRow{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--modern-line)}.modernEconomyCard{background:rgba(11,19,15,.94);padding:15px 20px}.modernEconomyCard>span{display:block;font-size:9px;color:#86948d;text-transform:uppercase;letter-spacing:.09em}.modernEconomyCard>strong{display:block;margin-top:5px;font-size:24px}.modernEconomyCard>strong .value{font-size:24px}.modernEconomyCard small{display:block;margin-top:3px;font-size:9px;color:#66746d}
.modernInsights{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:14px;background:rgba(8,14,11,.7)}.modernInsight{min-width:0;padding:9px 10px;border-radius:8px;background:rgba(255,255,255,.018)}.modernInsightTop{display:flex;align-items:center;justify-content:space-between;gap:10px}.modernInsightTop span{font-size:9px;color:#8d9b94;text-transform:uppercase}.modernInsightTop strong{font-size:15px}.modernInsightTrack{height:3px;margin-top:8px;border-radius:10px;background:#26322d;overflow:hidden}.modernInsightTrack i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6b9915,#b1ec28)}.modernInsight.amber .modernInsightTrack i{background:linear-gradient(90deg,#8d6516,#e6b83d)}.modernInsight small{display:block;margin-top:6px;color:#65736c;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modernEfficiencySurface{padding:0}.modernSectionHead{min-height:70px;display:flex;align-items:center;justify-content:space-between;padding:12px 17px;border-bottom:1px solid var(--modern-line)}.modernSectionHead span{font-size:9px;color:var(--green);font-weight:900;letter-spacing:.12em}.modernSectionHead h3{margin:4px 0 0;font-size:17px}.modernSectionHead>b{font-size:11.5px;color:#aebbb4;border:1px solid var(--modern-line);padding:7px 9px;border-radius:999px}.modernInteractionGrid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;padding:5px 16px 8px}.modernInteractionGrid .interactionRow{min-height:58px;height:auto!important;border-bottom:1px solid rgba(151,175,163,.105);grid-template-columns:70px minmax(130px,1fr) auto;background:transparent!important;padding:4px 0!important}.modernInteractionGrid .interactionTank{width:66px;height:46px}.modernInteractionGrid .interactionTarget strong{font-size:11px}.modernInteractionGrid .interactionTarget small{font-size:7.5px;color:#718078}.modernInteractionGrid .interactionNumbers b,.modernInteractionGrid .interactionNumbers span{border:1px solid var(--modern-line);border-radius:999px;background:rgba(255,255,255,.02);font-size:7.5px;padding:4px 7px}.modernInteractionGrid .interactionNumbers .killPill{color:var(--green);border-color:rgba(169,229,27,.26)}.modernMore{width:calc(100% - 32px);margin:0 16px 14px;border:1px solid var(--modern-line);border-radius:8px;background:rgba(255,255,255,.018);height:34px;color:var(--green);font-size:9px;font-weight:900;text-transform:uppercase;cursor:pointer}
.modernTeamToolbar{min-height:54px;margin-bottom:10px;padding:8px 12px;display:flex;align-items:center;justify-content:space-between}.modernTeamToolbar>div:first-child{display:flex;flex-direction:column;gap:2px}.modernTeamToolbar>div:first-child span{font-size:9px;font-weight:900;color:#bac5bf;letter-spacing:.08em}.modernTeamToolbar>div:first-child small{font-size:9px;color:#66736d}.modernTeamToolbar .teamSortBar{width:auto;gap:6px}.modernTeamToolbar .teamSortBtn{height:34px;min-width:38px;border-radius:8px;border-color:transparent}.modernTeamToolbar .teamSortBtn.active{background:rgba(169,229,27,.09);border-color:rgba(169,229,27,.27)}.modernTeamsGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.modernTeam{overflow:hidden}.modernTeam.teamWin{border-top:2px solid rgba(169,229,27,.68)}.modernTeam.teamLoss{border-top:2px solid rgba(255,103,96,.62)}.modernTeam.teamDraw{border-top:2px solid rgba(229,182,62,.64)}.modernTeamHead{min-height:66px;display:flex;align-items:center;justify-content:space-between;padding:10px 13px}.modernTeamHead small{display:block;color:#708078;font-size:9px;text-transform:uppercase}.modernTeamHead strong{display:block;margin-top:4px;font-size:15px;text-transform:uppercase}.teamWin .modernTeamHead strong{color:var(--green)}.teamLoss .modernTeamHead strong{color:#ff716c}.teamDraw .modernTeamHead strong{color:#e5b63e}.modernTeamHead>div:last-child{display:grid;grid-template-columns:auto auto;gap:1px 7px;align-items:center;text-align:right}.modernTeamHead>div:last-child b{font-size:12px}.modernTeamHead>div:last-child span{font-size:6px;color:#6f7d76;text-transform:uppercase}.modernTeamColumns{display:grid;grid-template-columns:52px minmax(125px,1.35fr) minmax(105px,1fr) 68px 62px 58px;column-gap:7px;align-items:center;height:27px;padding:0 9px;border-top:1px solid var(--modern-line);border-bottom:1px solid var(--modern-line);color:#66746d;font-size:6.8px;text-transform:uppercase}.modernTeamColumns span:nth-child(n+4){text-align:right}.modernTeamColumns span:nth-child(3){text-align:center}.modernTeamMembers .teamMember{height:39px!important;min-height:39px!important;grid-template-columns:52px minmax(125px,1.35fr) minmax(105px,1fr) 68px 62px 58px!important;column-gap:7px!important;padding:1px 9px!important;border-bottom:1px solid rgba(151,175,163,.085)!important;background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));transition:.15s ease}.modernTeamMembers .teamMember:hover{background:rgba(255,255,255,.025)}.modernTeamMembers .teamMember.owner{background:linear-gradient(90deg,rgba(169,229,27,.13),rgba(169,229,27,.025))!important;box-shadow:inset 3px 0 0 var(--green)}.modernTeamMembers .teamTank{width:49px!important;height:34px!important}.modernTeamMembers .teamPlayer{min-width:0}.modernTeamMembers .teamPlayer strong{display:block;font-size:10px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modernTeamMembers .teamPlayer strong span{color:#7f9488;font-size:8px}.modernTeamMembers .teamVehicle{text-align:center!important;font-size:8.6px!important;color:#b7c3bd!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modernTeamMembers .teamMetric b{font-size:10px!important;font-variant-numeric:tabular-nums}
.modernDetailSummary{min-height:82px;margin-bottom:10px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between}.modernDetailSummary>div:first-child span{font-size:9px;color:var(--green);font-weight:900;letter-spacing:.12em}.modernDetailSummary>div:first-child h3{margin:4px 0 0;font-size:18px}.modernDetailQuick{display:flex;gap:22px}.modernDetailQuick b{display:flex;flex-direction:column;align-items:flex-end;font-size:16px}.modernDetailQuick small{font-size:7px;margin-top:3px;color:#718078;text-transform:uppercase;font-weight:700}.modernDetailQuick .dangerQuick{color:#ff716c}.modernDetailGrid{display:grid;grid-template-columns:1.08fr .92fr;gap:12px;align-items:start}.modernDetailCard{overflow:hidden}.modernDetailCard.time,.modernDetailCard.xp{align-self:start}.modernDetailHead{height:66px;display:flex;align-items:center;gap:11px;padding:10px 14px;border-bottom:1px solid var(--modern-line)}.modernDetailHead>span{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:rgba(169,229,27,.07);border:1px solid rgba(169,229,27,.18);color:var(--green)}.modernDetailHead svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.modernDetailCard.credits .modernDetailHead>span{color:#e5b63e;background:rgba(229,182,62,.07);border-color:rgba(229,182,62,.18)}.modernDetailCard.time .modernDetailHead>span{color:#a9b8b0;background:rgba(169,184,176,.06);border-color:rgba(169,184,176,.15)}.modernDetailHead h3{margin:0;font-size:14px}.modernDetailHead small{display:block;margin-top:3px;color:#718078;font-size:7.5px}.modernDetailRows{padding:4px 14px 9px}.modernDetailRow{min-height:46px;display:grid;grid-template-columns:minmax(0,1fr) 140px;align-items:center;gap:20px;border-bottom:1px solid rgba(151,175,163,.11)}.modernDetailRow:last-child{border-bottom:0}.modernDetailRow>div span{font-size:12.5px;color:#b7c3bd}.modernDetailRow>div small{display:block;margin-top:2px;color:#5f6d66;font-size:7px}.modernDetailRow>strong{text-align:right;font-size:15px;font-variant-numeric:tabular-nums}.modernDetailRow>strong .value{font-size:13px}.modernCreditTotal{margin:7px 14px 14px;min-height:58px;display:flex;align-items:center;justify-content:space-between;padding:10px 13px;border-radius:9px;background:linear-gradient(90deg,rgba(229,182,62,.055),rgba(255,255,255,.018));border:1px solid rgba(229,182,62,.14)}.modernCreditTotal span{font-size:10.5px;font-weight:800;text-transform:uppercase}.modernCreditTotal .value{font-size:24px}
@media(max-width:1050px){.modernReplayIdentity{grid-template-columns:auto 1fr}.modernReplayIdentity>small{grid-column:1/-1}.modernBattleHeadline{grid-template-columns:180px 1fr}.modernPrimaryMetrics>div{padding:14px}.modernTeamsGrid{grid-template-columns:1fr}.modernInteractionGrid{grid-template-columns:1fr}.modernDetailGrid{grid-template-columns:1fr}.modernInsights{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.modernReplayHeader{align-items:flex-start;flex-direction:column}.modernReplayActions{width:100%}.modernReplayActions .button{flex:1}.modernReportTabs{width:100%;overflow-x:auto}.modernReportTabs button{white-space:nowrap}.modernBattleHeadline{grid-template-columns:1fr}.modernOutcome{border-right:0;border-bottom:1px solid var(--modern-line)}.modernPrimaryMetrics{grid-template-columns:1fr 1fr}.modernBattleScene{height:220px;padding:18px}.modernBattleScene>img{width:72%;height:205px;left:-7%}.modernSceneText{max-width:48%}.modernSceneText strong{font-size:23px}.modernEconomyRow{grid-template-columns:1fr}.modernInsights{grid-template-columns:1fr}.modernTeamToolbar{align-items:flex-start;flex-direction:column;gap:8px}.modernTeamToolbar .teamSortBar{width:100%;overflow-x:auto}.modernTeamColumns,.modernTeamMembers .teamMember{grid-template-columns:44px minmax(100px,1fr) 60px 52px!important}.modernTeamColumns span:nth-child(3),.modernTeamColumns span:last-child,.modernTeamMembers .teamVehicle,.modernTeamMembers .xpMetric{display:none}.modernDetailSummary{align-items:flex-start;flex-direction:column;gap:12px}.modernDetailQuick{width:100%;justify-content:space-between;gap:8px}.modernDetailQuick b{align-items:flex-start}.modernDetailRow{grid-template-columns:minmax(0,1fr) 105px;gap:10px}}

/* =========================================================
   v0.3.0 APPROVED CINEMATIC UI PORT
   Approved reference: design_reference/approved_cinematic_replay_reference.png
   ========================================================= */
:root{--cin-bg:#070b0d;--cin-panel:rgba(12,18,19,.82);--cin-panel-2:rgba(17,24,23,.72);--cin-line:rgba(172,198,183,.15);--cin-line-strong:rgba(189,213,199,.24);--cin-green:#a8eb31;--cin-green-hot:#baff42;--cin-gold:#efbf54;--cin-red:#ff6d63;--cin-text:#f4f7f5;--cin-muted:#8f9b96;--cin-shadow:0 28px 80px rgba(0,0,0,.38)}
body{background:radial-gradient(circle at 76% 4%,rgba(44,63,53,.30),transparent 28%),radial-gradient(circle at 10% 40%,rgba(18,35,31,.22),transparent 34%),#070b0d}
.topbar{height:72px;background:linear-gradient(180deg,rgba(7,10,12,.98),rgba(6,10,11,.94));border-bottom:1px solid rgba(181,205,192,.12);box-shadow:0 12px 40px rgba(0,0,0,.18)}
.brandShield{border-color:#7c8c83;color:#f3f5f4}.brand>span:nth-child(2)>span{color:var(--cin-gold)}nav a{color:#aeb7b2;font-size:10.5px}nav a:hover,.uploadNav{color:#fff;text-shadow:0 0 18px rgba(168,235,49,.35)}

.cinematicReplayPage{max-width:1500px;margin:0 auto;padding:26px 24px 72px}.cinematicReportShell{margin-top:12px}.cinematicReportContent{border:0!important;background:transparent!important;padding:0!important}
.cinematicHero{position:relative;min-height:610px;border:1px solid rgba(182,204,193,.16);border-radius:14px;overflow:hidden;background-image:linear-gradient(90deg,rgba(5,10,11,.96) 0%,rgba(5,10,11,.84) 30%,rgba(5,10,11,.28) 61%,rgba(5,10,11,.12) 100%),var(--battle-map);background-size:cover;background-position:center;box-shadow:0 30px 90px rgba(0,0,0,.38);isolation:isolate}.cinematicHero:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 30% 49%,rgba(125,230,32,.14),transparent 25%),linear-gradient(180deg,rgba(255,255,255,.02),rgba(2,5,6,.3) 70%,rgba(3,7,8,.9));pointer-events:none}.cinematicHero:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;background:linear-gradient(90deg,rgba(0,0,0,.08),transparent 22%,transparent 75%,rgba(255,215,138,.07)),radial-gradient(circle at 87% 22%,rgba(255,223,158,.18),transparent 25%);mix-blend-mode:screen;opacity:.78}
.cinematicAtmosphere{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:.55;background-image:radial-gradient(circle at 14% 19%,rgba(255,149,54,.8) 0 1px,transparent 1.7px),radial-gradient(circle at 47% 13%,rgba(255,183,80,.7) 0 1px,transparent 1.8px),radial-gradient(circle at 73% 31%,rgba(160,230,41,.7) 0 1px,transparent 1.8px),radial-gradient(circle at 88% 76%,rgba(255,164,55,.65) 0 1px,transparent 1.8px);background-size:340px 260px,430px 300px,520px 390px,620px 440px;animation:cinSpark 16s linear infinite}.cinematicAtmosphere:after{content:"";position:absolute;left:0;right:0;bottom:0;height:170px;background:linear-gradient(180deg,transparent,rgba(4,8,9,.94))}@keyframes cinSpark{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(10px,-7px,0)}100%{transform:translate3d(0,0,0)}}
.cinematicHeroTop{position:relative;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:20px 24px}.cinematicBattleMeta{display:flex;align-items:center;gap:11px;color:#b0bbb6;font-size:10.5px;text-transform:uppercase;letter-spacing:.085em}.cinematicBattleMeta i{width:4px;height:4px;border-radius:50%;background:var(--cin-gold);box-shadow:0 0 12px rgba(239,191,84,.55)}.cinematicHeroActions{display:flex;gap:8px}.cinematicAction{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 15px;border:1px solid rgba(222,233,226,.17);border-radius:6px;background:rgba(9,13,14,.58);backdrop-filter:blur(12px);color:#e5eae7;text-decoration:none;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;transition:.18s ease}.cinematicAction:hover{border-color:rgba(168,235,49,.42);background:rgba(23,33,28,.75);transform:translateY(-1px)}
.cinematicHeroCopy{position:absolute;z-index:8;left:42px;top:90px;width:47%;max-width:610px}.cinematicTankIdentity{display:flex;align-items:center;gap:13px}.cinematicTier{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:31px;padding:0 9px;color:var(--cin-gold);font-size:15px;font-weight:900;border:1px solid rgba(239,191,84,.30);background:rgba(239,191,84,.07);clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}.cinematicTankIdentity strong{font-size:40px;line-height:1;letter-spacing:-.035em;text-transform:uppercase;text-shadow:0 4px 24px rgba(0,0,0,.55)}.cinematicPlayerMeta{display:block;margin:9px 0 27px;color:#9aa7a1;font-size:10px}.cinematicHeroCopy h1{margin:0;font-size:76px;line-height:.88;letter-spacing:-.055em;text-transform:uppercase;text-shadow:0 0 34px rgba(168,235,49,.13),0 6px 30px rgba(0,0,0,.54)}.cinematic-win .cinematicHeroCopy h1{color:var(--cin-green-hot)}.cinematic-loss .cinematicHeroCopy h1{color:#ff7167}.cinematic-draw .cinematicHeroCopy h1{color:#e9b947}.cinematicHeroCopy p{margin:13px 0 18px;color:#b7c2bc;font-size:12px;letter-spacing:.055em;text-transform:uppercase}.cinematicAwardRail{min-height:64px;display:flex;align-items:center;gap:9px;max-width:610px}.cinematicAwardRail .heroAwards{display:flex;gap:9px;margin:0!important;max-width:none!important}.cinematicAwardRail .heroMedal{height:58px;min-width:58px;max-width:150px;padding:4px 9px;border:0;background:radial-gradient(circle at 50% 35%,rgba(239,191,84,.13),rgba(10,14,14,.22));box-shadow:none}.cinematicAwardRail .heroMedal img{width:48px;height:48px;filter:drop-shadow(0 5px 8px rgba(0,0,0,.45))}.cinematicAwardRail .heroMedal b{font-size:9px;color:#e6cf8e}.cinematicNoAwards{color:#68756f;font-size:10.5px;border:1px dashed rgba(152,175,162,.17);padding:10px 12px;border-radius:7px;background:rgba(8,12,13,.2)}
.cinematicHeroTank{position:absolute;z-index:4;right:5%;top:103px;width:53%;height:365px;object-fit:contain;object-position:center;filter:drop-shadow(0 36px 30px rgba(0,0,0,.65)) saturate(.96) contrast(1.06);transform:perspective(900px) rotateY(-2deg);pointer-events:none}.cinematicHeroTank:after{content:""}
.cinematicHeroMetrics{position:absolute;z-index:9;left:42px;right:48%;bottom:128px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(202,219,210,.14);border-bottom:1px solid rgba(202,219,210,.14);background:linear-gradient(90deg,rgba(7,12,13,.52),rgba(7,12,13,.14));backdrop-filter:blur(8px)}.cinematicHeroMetric{min-height:76px;display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:8px;padding:12px 16px;position:relative}.cinematicHeroMetric:not(:last-child):after{content:"";position:absolute;right:0;top:20%;bottom:20%;width:1px;background:rgba(202,219,210,.12)}.cinematicHeroMetric>span{grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;color:#cbd3cf}.cinematicHeroMetric svg,.cinematicSubMetrics svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.cinematicHeroMetric strong{align-self:end;font-size:28px;line-height:1;font-variant-numeric:tabular-nums}.cinematicHeroMetric small{align-self:start;margin-top:4px;color:#8d9a94;font-size:9px;text-transform:uppercase;letter-spacing:.09em}
.cinematicEconomyCards{position:absolute;z-index:9;right:36px;bottom:128px;display:grid;grid-template-columns:1fr 1fr;width:42%;min-width:500px}.cinematicEconomy{min-height:116px;padding:17px 22px;border:1px solid rgba(214,226,220,.10);background:linear-gradient(115deg,rgba(20,47,25,.70),rgba(18,28,23,.58));backdrop-filter:blur(12px);transform:skewX(-4deg)}.cinematicEconomy>*{display:block;transform:skewX(4deg)}.cinematicEconomy.experience{background:linear-gradient(115deg,rgba(76,56,20,.68),rgba(33,27,18,.54))}.cinematicEconomy span{color:#b8c2bd;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em}.cinematicEconomy strong{margin-top:8px;font-size:31px;line-height:1}.cinematicEconomy.silver strong{color:#e9f1ed}.cinematicEconomy.experience strong{color:#f1c85d}.cinematicEconomy small{margin-top:7px;color:#7f8d86;font-size:8px}
.cinematicSubMetrics{position:absolute;z-index:9;left:42px;right:36px;bottom:28px;display:grid;grid-template-columns:repeat(4,1fr);min-height:72px;border:1px solid rgba(202,219,210,.12);background:rgba(7,12,13,.60);backdrop-filter:blur(14px);border-radius:4px}.cinematicSubMetrics>div{display:grid;grid-template-columns:34px auto;grid-template-rows:auto auto;align-content:center;column-gap:9px;padding:10px 20px;position:relative}.cinematicSubMetrics>div:not(:last-child):after{content:"";position:absolute;right:0;top:22%;bottom:22%;width:1px;background:rgba(202,219,210,.12)}.cinematicSubMetrics>div>span{grid-row:1/3;color:#c8d0cc;display:grid;place-items:center}.cinematicSubMetrics strong{align-self:end;font-size:20px}.cinematicSubMetrics small{align-self:start;margin-top:2px;color:#8d9993;font-size:9px;text-transform:uppercase}.cinematicSubMetrics .danger strong{color:#ff8179}

.cinematicTabs{display:flex;gap:0;margin:0;border-bottom:1px solid rgba(190,210,199,.14)}.cinematicTabs button{height:52px;padding:0 22px;border:0;border-right:1px solid rgba(190,210,199,.10);background:rgba(8,13,14,.36);color:#9aa59f;font:800 10px/1 Inter,"Segoe UI",Arial,sans-serif;text-transform:uppercase;letter-spacing:.055em;cursor:pointer;position:relative}.cinematicTabs button:hover{color:#d9e1dd;background:rgba(255,255,255,.025)}.cinematicTabs button.active{color:#eef6f1;background:linear-gradient(180deg,rgba(72,113,55,.22),rgba(18,27,23,.10))}.cinematicTabs button.active:after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:2px;background:var(--cin-green);box-shadow:0 0 12px rgba(168,235,49,.55)}
.reportPane{display:none}.reportPane.active{display:block}.cinematicEfficiency,.cinematicTeamsHeader,.cinematicDetailIntro,.cinematicReportPanel,.cinematicTeam{background:linear-gradient(145deg,rgba(15,22,22,.72),rgba(8,13,14,.64));border:1px solid rgba(181,203,191,.12);box-shadow:0 18px 56px rgba(0,0,0,.18);backdrop-filter:blur(10px)}.cinematicEfficiency{margin-top:14px;border-radius:6px;overflow:hidden}.cinematicSectionHeader{min-height:72px;display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid rgba(181,203,191,.11)}.cinematicSectionHeader span,.cinematicTeamsHeader>div:first-child>span,.cinematicDetailIntro>div:first-child>span{color:var(--cin-green);font-size:9px;font-weight:900;letter-spacing:.14em}.cinematicSectionHeader h3,.cinematicTeamsHeader h3,.cinematicDetailIntro h3{margin:5px 0 0;font-size:18px;letter-spacing:-.02em}.cinematicFilterPills{display:flex;gap:6px}.cinematicFilterPills button{height:32px;padding:0 12px;border:1px solid rgba(181,203,191,.13);border-radius:5px;background:rgba(255,255,255,.02);color:#8f9a95;font-size:9px;cursor:pointer}.cinematicFilterPills button.active{color:#dfe8e3;border-color:rgba(168,235,49,.25);background:rgba(168,235,49,.08)}
.cinematicInteractionGrid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;padding:9px 18px}.cinematicInteractionGrid .interactionRow{min-height:66px!important;height:auto!important;grid-template-columns:78px minmax(120px,1fr) auto!important;padding:5px 0!important;border-bottom:1px solid rgba(181,203,191,.08)!important;background:transparent!important}.cinematicInteractionGrid .interactionTank{width:72px!important;height:52px!important}.cinematicInteractionGrid .interactionTarget strong{font-size:11px!important}.cinematicInteractionGrid .interactionTarget small{font-size:7.5px!important;color:#74817a!important}.cinematicInteractionGrid .interactionNumbers{gap:6px}.cinematicInteractionGrid .interactionNumbers b,.cinematicInteractionGrid .interactionNumbers span{font-size:7.5px!important;padding:5px 7px!important;border-radius:4px!important;background:rgba(255,255,255,.025)!important}.cinematicMore{display:block;width:calc(100% - 36px);height:34px;margin:3px 18px 16px;border:1px solid rgba(181,203,191,.12);background:rgba(255,255,255,.02);color:var(--cin-green);font-size:9px;font-weight:900;text-transform:uppercase;cursor:pointer}.cinematicEmpty{padding:30px;color:#728079;text-align:center}

.cinematicTeamsHeader{margin-top:14px;min-height:64px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;border-radius:6px}.cinematicSortInline .teamSortBar{width:auto;gap:3px}.cinematicSortInline .teamSortBtn{height:35px;min-width:40px;border:0;background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));color:#738079;border-radius:5px}.cinematicSortInline .teamSortBtn span{display:none}.cinematicSortInline .teamSortBtn.active{color:var(--cin-green);background:rgba(168,235,49,.08)}.cinematicTeamsGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.cinematicTeam{overflow:hidden;border-radius:5px}.cinematicTeam.teamWin{box-shadow:inset 0 2px 0 rgba(168,235,49,.70),0 18px 56px rgba(0,0,0,.16)}.cinematicTeam.teamLoss{box-shadow:inset 0 2px 0 rgba(255,109,99,.60),0 18px 56px rgba(0,0,0,.16)}.cinematicTeam.teamDraw{box-shadow:inset 0 2px 0 rgba(239,191,84,.65),0 18px 56px rgba(0,0,0,.16)}.cinematicTeamHead{height:64px;padding:10px 13px;display:flex;justify-content:space-between;align-items:center}.cinematicTeamHead small{color:#6f7d77;font-size:7px}.cinematicTeamHead strong{display:block;margin-top:4px;font-size:15px;text-transform:uppercase}.teamWin .cinematicTeamHead strong{color:var(--cin-green)}.teamLoss .cinematicTeamHead strong{color:#ff7168}.teamDraw .cinematicTeamHead strong{color:var(--cin-gold)}.cinematicTeamTotals{display:flex;gap:18px}.cinematicTeamTotals b{text-align:right;font-size:13px}.cinematicTeamTotals small{display:block;margin-top:3px;color:#65726c;font-size:6px;text-transform:uppercase}.cinematicTeamColumns{display:grid;grid-template-columns:52px minmax(125px,1.35fr) minmax(105px,1fr) 68px 62px 58px;column-gap:7px;height:30px;align-items:center;padding:0 9px;border-top:1px solid rgba(181,203,191,.08);border-bottom:1px solid rgba(181,203,191,.08);color:#65736c;font-size:6.8px;text-transform:uppercase}.cinematicTeamColumns span:nth-child(3){text-align:center}.cinematicTeamColumns button{border:0;background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));color:#65736c;text-transform:uppercase;font-size:6.8px;text-align:right;cursor:pointer}.cinematicTeamColumns button:hover{color:var(--cin-green)}.cinematicTeamMembers .teamMember{height:40px!important;min-height:40px!important;grid-template-columns:52px minmax(125px,1.35fr) minmax(105px,1fr) 68px 62px 58px!important;column-gap:7px!important;padding:1px 9px!important;border-bottom:1px solid rgba(181,203,191,.07)!important;background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));transition:.15s ease}.cinematicTeamMembers .teamMember:hover{background:rgba(255,255,255,.027)}.cinematicTeamMembers .teamMember.owner{background:linear-gradient(90deg,rgba(168,235,49,.12),rgba(168,235,49,.01))!important;box-shadow:inset 3px 0 0 var(--cin-green)}.cinematicTeamMembers .teamTank{width:49px!important;height:35px!important}.cinematicTeamMembers .teamPlayer strong{font-size:10px!important}.cinematicTeamMembers .teamVehicle{text-align:center!important;font-size:8.5px!important;color:#b1bdb7!important}.cinematicTeamMembers .teamMetric b{font-size:10px!important}

.cinematicDetailIntro{margin-top:14px;min-height:78px;padding:13px 17px;display:flex;justify-content:space-between;align-items:center;border-radius:6px}.cinematicDetailIntro>div:last-child{display:flex;gap:26px}.cinematicDetailIntro>div:last-child b{display:flex;flex-direction:column;text-align:right;font-size:17px}.cinematicDetailIntro>div:last-child small{font-size:7px;color:#6b7872;text-transform:uppercase;margin-top:3px}.cinematicDetailIntro .dangerQuick{color:#ff7168}.cinematicReportGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;align-items:start}.cinematicReportPanel{border-radius:6px;overflow:hidden}.cinematicPanelTitle{height:66px;display:flex;align-items:center;gap:11px;padding:10px 14px;border-bottom:1px solid rgba(181,203,191,.10)}.cinematicPanelTitle>svg{width:28px;height:28px;padding:5px;border:1px solid rgba(168,235,49,.19);border-radius:6px;color:var(--cin-green);fill:none;stroke:currentColor;stroke-width:1.5}.cinematicPanelTitle h3{margin:0;font-size:14px}.cinematicPanelTitle small{display:block;margin-top:3px;color:#6f7c76;font-size:7.5px}.cinematicRows{padding:3px 14px 10px}.cinematicFinanceRow{min-height:45px;display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:15px;align-items:center;border-bottom:1px solid rgba(181,203,191,.08)}.cinematicFinanceRow:last-child{border-bottom:0}.cinematicFinanceRow>div>span{font-size:11.5px;color:#b5c0ba}.cinematicFinanceRow>div>small{display:block;margin-top:2px;color:#5f6c66;font-size:7px}.cinematicFinanceRow>strong{text-align:right;font-size:15px;font-variant-numeric:tabular-nums}.cinematicFinanceTotal{margin:4px 14px 14px;min-height:62px;padding:10px 13px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(90deg,rgba(239,191,84,.065),rgba(255,255,255,.015));border:1px solid rgba(239,191,84,.15);border-radius:5px}.cinematicFinanceTotal span{font-size:10.5px;text-transform:uppercase;font-weight:800}.cinematicFinanceTotal .value{font-size:25px}.cinematicMiniBars{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px 14px}.cinematicMiniBars .modernInsight{padding:9px 10px;border-radius:5px;background:rgba(255,255,255,.018);border:1px solid rgba(181,203,191,.08)}

@media(max-width:1180px){.cinematicHero{min-height:650px}.cinematicHeroCopy{width:55%}.cinematicHeroTank{right:-2%;width:58%;opacity:.86}.cinematicHeroMetrics{right:42%}.cinematicEconomyCards{width:39%;min-width:420px}.cinematicHeroCopy h1{font-size:66px}.cinematicTeamsGrid,.cinematicInteractionGrid,.cinematicReportGrid{grid-template-columns:1fr}}
@media(max-width:760px){.cinematicReplayPage{padding:12px}.cinematicHero{min-height:830px}.cinematicHeroTop{align-items:flex-start;gap:12px;flex-direction:column}.cinematicHeroCopy{left:22px;right:22px;top:130px;width:auto}.cinematicTankIdentity strong{font-size:32px}.cinematicHeroCopy h1{font-size:54px}.cinematicHeroTank{top:325px;right:-12%;width:92%;height:265px;opacity:.72}.cinematicHeroMetrics{left:18px;right:18px;bottom:206px;grid-template-columns:1fr 1fr}.cinematicHeroMetric{min-height:60px}.cinematicEconomyCards{left:18px;right:18px;bottom:103px;width:auto;min-width:0}.cinematicSubMetrics{left:18px;right:18px;bottom:18px;grid-template-columns:1fr 1fr}.cinematicSubMetrics>div{padding:7px 11px}.cinematicTabs{overflow-x:auto}.cinematicTabs button{white-space:nowrap}.cinematicSectionHeader,.cinematicTeamsHeader,.cinematicDetailIntro{align-items:flex-start;flex-direction:column;gap:11px}.cinematicFilterPills{overflow-x:auto;width:100%}.cinematicDetailIntro>div:last-child{width:100%;justify-content:space-between;gap:8px}.cinematicTeamColumns,.cinematicTeamMembers .teamMember{grid-template-columns:44px minmax(100px,1fr) 58px 52px!important}.cinematicTeamColumns span:nth-child(3),.cinematicTeamColumns button:last-child,.cinematicTeamMembers .teamVehicle,.cinematicTeamMembers .xpMetric{display:none}.cinematicFinanceRow{grid-template-columns:minmax(0,1fr) 105px}.cinematicAwardRail{max-width:100%;overflow-x:auto}}

/* =========================================================
   v0.3.1 — CINEMATIC POLISH PASS
   Approved direction: premium glass + atmospheric light
   ========================================================= */
:root{
  --polish-glass:rgba(10,17,17,.54);
  --polish-glass-strong:rgba(11,19,18,.68);
  --polish-line:rgba(212,231,220,.14);
  --polish-line-hot:rgba(210,238,218,.24);
  --polish-green-glow:rgba(168,235,49,.20);
  --polish-gold-glow:rgba(239,191,84,.20);
  --polish-red-glow:rgba(255,109,99,.18);
  --polish-soft-shadow:0 28px 90px rgba(0,0,0,.30),0 1px 0 rgba(255,255,255,.035) inset;
}
body{
  background:
    radial-gradient(1100px 620px at 72% -8%,rgba(109,143,116,.16),transparent 65%),
    radial-gradient(900px 700px at 4% 45%,rgba(47,79,68,.12),transparent 70%),
    linear-gradient(180deg,#07100f 0,#070b0d 38%,#060b0c 100%)!important;
}
body:before{content:"";position:fixed;inset:72px 0 0;pointer-events:none;z-index:-2;background:radial-gradient(circle at 50% 8%,rgba(255,255,255,.022),transparent 32%),linear-gradient(90deg,rgba(255,255,255,.012),transparent 25%,transparent 75%,rgba(255,255,255,.01));}
.noise{opacity:.024!important;mix-blend-mode:soft-light}
.topbar{background:linear-gradient(180deg,rgba(6,11,12,.88),rgba(5,9,10,.74))!important;backdrop-filter:blur(28px) saturate(1.25)!important;border-bottom-color:rgba(212,231,220,.11)!important;box-shadow:0 14px 45px rgba(0,0,0,.20),inset 0 -1px 0 rgba(255,255,255,.018)!important}
.navSearch,.liveDot{background:rgba(11,18,18,.48)!important;border-color:rgba(210,228,218,.13)!important;backdrop-filter:blur(16px)}

/* HOME — brighter atmosphere and premium glass */
.homeHero{height:480px!important;background:transparent!important;border-bottom-color:rgba(210,228,218,.09)!important;overflow:hidden}
.heroBackdrop{inset:-42px!important;background-image:linear-gradient(90deg,rgba(4,9,9,.91) 0%,rgba(4,9,9,.73) 28%,rgba(4,9,9,.22) 58%,rgba(4,9,9,.36) 100%),url('/assets/hero_tank_scene.webp')!important;filter:blur(3px) saturate(.95) brightness(.88) contrast(1.04)!important;opacity:.96!important;transform:scale(1.06)!important}
.homeHero:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 70% 24%,rgba(255,222,153,.18),transparent 22%),radial-gradient(circle at 47% 64%,rgba(155,229,55,.10),transparent 25%),linear-gradient(180deg,rgba(255,255,255,.016),transparent 48%,rgba(5,10,10,.72) 100%);mix-blend-mode:screen}
.homeHero:after{background:linear-gradient(180deg,transparent 52%,rgba(5,10,10,.24) 74%,#070b0d 100%)!important}
.heroTankVisual{left:29%!important;right:11%!important;top:-3px!important;bottom:-16px!important;filter:saturate(1.02) contrast(1.10) brightness(1.02) drop-shadow(0 34px 30px rgba(0,0,0,.56))!important;opacity:.98!important;-webkit-mask-image:radial-gradient(ellipse 75% 96% at 53% 50%,#000 50%,rgba(0,0,0,.96) 68%,transparent 94%)!important;mask-image:radial-gradient(ellipse 75% 96% at 53% 50%,#000 50%,rgba(0,0,0,.96) 68%,transparent 94%)!important}
.homeHero .heroCopy{padding-top:48px!important}.homeHero .heroCopy .eyebrow{color:#c2cbc6!important;text-shadow:0 1px 15px rgba(0,0,0,.8)}
.homeHero h1{text-shadow:0 4px 35px rgba(0,0,0,.55)}.homeHero h1 em{text-shadow:0 0 28px rgba(168,235,49,.18),0 4px 35px rgba(0,0,0,.55)}
.homeHero p{color:#c3cbc7!important;text-shadow:0 2px 18px rgba(0,0,0,.62)}
.homeHero .button,.signIn{box-shadow:0 10px 28px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.08)}
.heroMetrics>div{background:linear-gradient(145deg,rgba(16,27,23,.62),rgba(6,13,12,.43))!important;border-color:rgba(212,231,220,.14)!important;backdrop-filter:blur(16px) saturate(1.25)!important;box-shadow:0 12px 30px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.025)!important}
.metricIcon{background:radial-gradient(circle,rgba(168,235,49,.12),rgba(168,235,49,.025))!important;box-shadow:0 0 24px rgba(168,235,49,.07)}
.homeHero .topBattle{background:linear-gradient(145deg,rgba(13,22,20,.68),rgba(6,12,12,.54))!important;border-color:rgba(221,235,227,.14)!important;backdrop-filter:blur(24px) saturate(1.25)!important;box-shadow:0 26px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035)!important}
.topTankThumb{filter:saturate(.92) brightness(.96)!important}.topBattleButton{background:rgba(255,255,255,.025)!important;border-color:rgba(214,231,221,.12)!important}
.homeDashboard{gap:14px!important}.homePanel,.homeFeatures{background:linear-gradient(145deg,rgba(15,24,22,.62),rgba(7,13,13,.50))!important;border-color:rgba(210,229,218,.12)!important;backdrop-filter:blur(18px) saturate(1.18)!important;box-shadow:0 20px 56px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025)!important}
.homePanel{transition:.2s ease}.homePanel:hover{border-color:rgba(187,220,195,.20)!important;box-shadow:0 26px 70px rgba(0,0,0,.24),0 0 35px rgba(126,180,74,.035),inset 0 1px 0 rgba(255,255,255,.035)!important}
.damageRow,.popularRow{border-top-color:rgba(210,229,218,.07)!important}.damageRow:hover{background:linear-gradient(90deg,rgba(168,235,49,.055),transparent)!important}.latestCard{background:linear-gradient(145deg,rgba(17,27,24,.66),rgba(7,13,13,.55))!important;border-color:rgba(210,229,218,.12)!important;box-shadow:0 12px 30px rgba(0,0,0,.14)}.latestCard:hover{border-color:rgba(168,235,49,.24)!important;box-shadow:0 22px 50px rgba(0,0,0,.24),0 0 22px rgba(168,235,49,.04)!important}.latestArt{filter:saturate(.94) brightness(.94)!important}

/* REPLAY HERO — glass, depth, brighter map and tank */
.cinematicReplayPage{max-width:1540px!important;padding-top:30px!important}.cinematicHero{min-height:635px!important;border-color:rgba(218,234,225,.16)!important;background-image:linear-gradient(90deg,rgba(4,9,10,.90) 0%,rgba(4,9,10,.72) 31%,rgba(4,9,10,.16) 63%,rgba(4,9,10,.06) 100%),var(--battle-map)!important;background-position:center 49%!important;box-shadow:0 38px 110px rgba(0,0,0,.36),0 0 0 1px rgba(255,255,255,.018) inset!important}
.cinematicHero:before{z-index:1!important;background:radial-gradient(circle at 23% 45%,rgba(139,234,45,.14),transparent 30%),radial-gradient(circle at 85% 14%,rgba(255,218,146,.22),transparent 25%),radial-gradient(circle at 70% 71%,rgba(255,164,75,.07),transparent 25%),linear-gradient(180deg,rgba(255,255,255,.024),rgba(2,5,6,.04) 56%,rgba(3,7,8,.78) 100%)!important;mix-blend-mode:screen;opacity:.92}
.cinematicHero:after{z-index:2!important;background:linear-gradient(90deg,rgba(0,0,0,.05),transparent 20%,transparent 72%,rgba(255,221,160,.06)),radial-gradient(circle at 82% 18%,rgba(255,234,187,.16),transparent 23%),radial-gradient(circle at 50% 90%,rgba(168,235,49,.055),transparent 28%)!important;opacity:1!important}
.cinematicAtmosphere{z-index:6!important;opacity:.70!important;filter:blur(.1px)}.cinematicAtmosphere:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 46%,rgba(255,242,211,.035) 50%,transparent 56%);animation:cinSweep 12s ease-in-out infinite}.cinematicAtmosphere:after{height:210px!important;background:linear-gradient(180deg,transparent,rgba(3,8,9,.70) 72%,rgba(3,8,9,.94))!important}
@keyframes cinSweep{0%,100%{transform:translateX(-18%);opacity:.2}50%{transform:translateX(18%);opacity:.75}}
.cinematicHeroTop,.cinematicHeroCopy,.cinematicHeroMetrics,.cinematicEconomyCards,.cinematicSubMetrics{z-index:10!important}.cinematicHeroTop{padding:22px 28px!important}.cinematicBattleMeta{color:#c3ccc7!important;text-shadow:0 2px 14px rgba(0,0,0,.60)}.cinematicAction{background:linear-gradient(145deg,rgba(17,25,24,.52),rgba(8,13,14,.40))!important;border-color:rgba(221,235,227,.15)!important;backdrop-filter:blur(20px) saturate(1.2)!important;box-shadow:0 12px 30px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035)}
.cinematicHeroCopy{left:48px!important;top:92px!important}.cinematicTankIdentity strong{font-size:43px!important;text-shadow:0 5px 26px rgba(0,0,0,.62)!important}.cinematicTier{background:linear-gradient(145deg,rgba(239,191,84,.13),rgba(239,191,84,.035))!important;box-shadow:0 0 24px rgba(239,191,84,.055)}.cinematicPlayerMeta{color:#b4c0ba!important}.cinematicHeroCopy h1{font-size:82px!important;text-shadow:0 0 42px rgba(168,235,49,.16),0 8px 35px rgba(0,0,0,.58)!important}.cinematic-win .cinematicHeroCopy h1{text-shadow:0 0 48px rgba(168,235,49,.24),0 8px 35px rgba(0,0,0,.58)!important}.cinematic-loss .cinematicHeroCopy h1{text-shadow:0 0 46px rgba(255,109,99,.20),0 8px 35px rgba(0,0,0,.58)!important}.cinematic-draw .cinematicHeroCopy h1{text-shadow:0 0 46px rgba(239,191,84,.20),0 8px 35px rgba(0,0,0,.58)!important}
.cinematicHeroTank{right:2.5%!important;top:84px!important;width:58%!important;height:405px!important;filter:drop-shadow(0 38px 30px rgba(0,0,0,.64)) drop-shadow(0 0 20px rgba(255,231,184,.045)) saturate(1.12) contrast(1.09) brightness(1.08)!important;transform:perspective(1100px) rotateY(-2deg) translateZ(0)!important}
.cinematicNoAwards{background:rgba(9,15,15,.34)!important;border-color:rgba(220,232,225,.11)!important;color:#82908a!important;backdrop-filter:blur(14px)}.cinematicAwardRail .heroMedal{background:radial-gradient(circle at 50% 28%,rgba(255,218,128,.18),rgba(12,17,16,.32) 66%)!important;box-shadow:0 8px 24px rgba(0,0,0,.18),0 0 26px rgba(239,191,84,.045)!important}
.cinematicHeroMetrics{left:48px!important;right:45%!important;bottom:132px!important;border-color:rgba(218,234,225,.12)!important;background:linear-gradient(90deg,rgba(8,14,15,.54),rgba(8,14,15,.20))!important;backdrop-filter:blur(18px) saturate(1.18)!important;box-shadow:0 16px 40px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.018)}
.cinematicHeroMetric{min-height:80px!important}.cinematicHeroMetric strong{font-size:31px!important}.cinematicHeroMetric small{color:#9eaaa4!important}.cinematicHeroMetric>span{color:#d5ddd9!important}
.cinematicEconomyCards{right:36px!important;bottom:132px!important;width:44%!important;min-width:520px!important;gap:0!important}.cinematicEconomy{min-height:112px!important;padding:18px 25px!important;border-color:rgba(221,235,227,.12)!important;background:linear-gradient(125deg,rgba(37,77,45,.61),rgba(17,30,25,.50))!important;backdrop-filter:blur(24px) saturate(1.22)!important;box-shadow:0 20px 55px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.04),0 0 30px rgba(93,197,91,.045)!important}.cinematicEconomy.experience{background:linear-gradient(125deg,rgba(111,76,24,.61),rgba(43,32,18,.50))!important;box-shadow:0 20px 55px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.04),0 0 30px rgba(239,191,84,.055)!important}.cinematicEconomy strong{font-size:34px!important}.cinematicEconomy span{color:#d3ddd8!important}.cinematicEconomy small{color:#8e9a94!important}
.cinematicSubMetrics{left:48px!important;right:36px!important;bottom:26px!important;min-height:78px!important;background:linear-gradient(145deg,rgba(11,19,19,.52),rgba(6,12,13,.42))!important;border-color:rgba(218,234,225,.13)!important;backdrop-filter:blur(24px) saturate(1.22)!important;box-shadow:0 20px 50px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.025)!important;border-radius:7px!important}.cinematicSubMetrics strong{font-size:22px!important}.cinematicSubMetrics small{color:#9aa6a0!important}.cinematicSubMetrics>div>span{color:#d2dad6!important}

/* TABS & SURFACES — lighter, premium glass */
.cinematicReportShell{margin-top:16px!important}.cinematicTabs{border-bottom-color:rgba(218,234,225,.11)!important;background:linear-gradient(90deg,rgba(9,16,16,.32),rgba(9,16,16,.10))!important;backdrop-filter:blur(12px)}.cinematicTabs button{height:56px!important;background:transparent!important;color:#9ea9a4!important;border-right-color:rgba(218,234,225,.08)!important}.cinematicTabs button:hover{background:rgba(255,255,255,.022)!important;color:#e1e8e4!important}.cinematicTabs button.active{background:linear-gradient(180deg,rgba(109,158,72,.15),rgba(18,28,24,.04))!important;color:#f2f6f4!important}.cinematicTabs button.active:after{height:3px!important;box-shadow:0 0 18px rgba(168,235,49,.68)!important}
.cinematicEfficiency,.cinematicTeamsHeader,.cinematicDetailIntro,.cinematicReportPanel,.cinematicTeam{background:linear-gradient(145deg,rgba(16,25,24,.58),rgba(7,13,14,.48))!important;border-color:rgba(215,232,222,.12)!important;backdrop-filter:blur(22px) saturate(1.20)!important;box-shadow:var(--polish-soft-shadow)!important}
.cinematicEfficiency,.cinematicTeamsHeader,.cinematicDetailIntro,.cinematicReportPanel,.cinematicTeam{border-radius:10px!important}.cinematicSectionHeader,.cinematicPanelTitle{border-bottom-color:rgba(215,232,222,.09)!important}.cinematicSectionHeader{min-height:78px!important;padding:15px 20px!important}.cinematicSectionHeader h3,.cinematicTeamsHeader h3,.cinematicDetailIntro h3{font-size:20px!important}.cinematicFilterPills button{height:36px!important;border-radius:8px!important;background:rgba(255,255,255,.018)!important;border-color:rgba(215,232,222,.10)!important;color:#98a49f!important;transition:.18s ease}.cinematicFilterPills button:hover{background:rgba(255,255,255,.035)!important;color:#e0e7e3!important}.cinematicFilterPills button.active{background:linear-gradient(180deg,rgba(168,235,49,.13),rgba(168,235,49,.055))!important;border-color:rgba(168,235,49,.24)!important;box-shadow:0 0 20px rgba(168,235,49,.045)!important}
.cinematicInteractionGrid{padding:8px 20px 11px!important;gap:0 28px!important}.cinematicInteractionGrid .interactionRow{min-height:70px!important;border-bottom-color:rgba(215,232,222,.065)!important;transition:.16s ease}.cinematicInteractionGrid .interactionRow:hover{background:linear-gradient(90deg,rgba(255,255,255,.025),transparent)!important}.cinematicInteractionGrid .interactionTank{filter:drop-shadow(0 9px 9px rgba(0,0,0,.50)) saturate(1.02)}.cinematicInteractionGrid .interactionTarget strong{font-size:12px!important;color:#eef2f0!important}.cinematicInteractionGrid .interactionNumbers b,.cinematicInteractionGrid .interactionNumbers span{border:1px solid rgba(216,232,223,.10)!important;background:rgba(9,16,16,.44)!important;backdrop-filter:blur(8px)}.cinematicMore{height:38px!important;border-radius:8px!important;background:rgba(255,255,255,.018)!important;border-color:rgba(215,232,222,.10)!important;transition:.18s ease}.cinematicMore:hover{background:rgba(168,235,49,.055)!important;border-color:rgba(168,235,49,.20)!important}

/* TEAMS — soft grid, premium selected row */
.cinematicTeamsHeader{min-height:72px!important;padding:12px 18px!important}.cinematicSortInline .teamSortBtn{border:1px solid transparent!important;transition:.16s ease}.cinematicSortInline .teamSortBtn:hover{background:rgba(255,255,255,.026)!important;color:#dce3df!important}.cinematicSortInline .teamSortBtn.active{background:linear-gradient(180deg,rgba(168,235,49,.12),rgba(168,235,49,.04))!important;border-color:rgba(168,235,49,.17)!important;box-shadow:0 0 16px rgba(168,235,49,.04)}
.cinematicTeamsGrid{gap:15px!important;margin-top:14px!important}.cinematicTeam{overflow:hidden!important}.cinematicTeam.teamWin{box-shadow:inset 0 2px 0 rgba(168,235,49,.66),var(--polish-soft-shadow)!important}.cinematicTeam.teamLoss{box-shadow:inset 0 2px 0 rgba(255,109,99,.58),var(--polish-soft-shadow)!important}.cinematicTeam.teamDraw{box-shadow:inset 0 2px 0 rgba(239,191,84,.62),var(--polish-soft-shadow)!important}.cinematicTeamHead{height:70px!important;padding:11px 15px!important;background:linear-gradient(180deg,rgba(255,255,255,.018),transparent)}.cinematicTeamColumns{height:32px!important;border-color:rgba(215,232,222,.06)!important;color:#78857f!important}.cinematicTeamMembers .teamMember{height:42px!important;min-height:42px!important;border-bottom-color:rgba(215,232,222,.052)!important;transition:.16s ease!important}.cinematicTeamMembers .teamMember:hover{background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.010))!important}.cinematicTeamMembers .teamMember.owner{background:linear-gradient(90deg,rgba(168,235,49,.16),rgba(168,235,49,.028) 55%,transparent)!important;box-shadow:inset 3px 0 0 var(--cin-green),0 0 25px rgba(168,235,49,.03)!important}.cinematicTeamMembers .teamTank{filter:drop-shadow(0 6px 6px rgba(0,0,0,.50)) saturate(1.05)}.cinematicTeamMembers .teamPlayer strong{font-size:10.5px!important;color:#eef3f0!important}.cinematicTeamMembers .teamVehicle{color:#c1cbc6!important}

/* DETAILED REPORT — fewer boxes, cleaner hierarchy */
.cinematicDetailIntro{min-height:88px!important;padding:15px 20px!important}.cinematicDetailIntro>div:last-child{gap:34px!important}.cinematicDetailIntro>div:last-child b{font-size:19px!important}.cinematicReportGrid{gap:15px!important;margin-top:15px!important}.cinematicReportPanel{overflow:hidden!important;position:relative}.cinematicReportPanel:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent)}.cinematicPanelTitle{height:72px!important;padding:12px 17px!important;background:linear-gradient(180deg,rgba(255,255,255,.018),transparent)}.cinematicPanelTitle>svg{width:34px!important;height:34px!important;padding:7px!important;border-radius:8px!important;background:rgba(168,235,49,.035);box-shadow:0 0 20px rgba(168,235,49,.025)}.cinematicReportPanel.credits .cinematicPanelTitle>svg{color:var(--cin-gold)!important;border-color:rgba(239,191,84,.20)!important;background:rgba(239,191,84,.035)!important}.cinematicPanelTitle h3{font-size:15.5px!important}.cinematicPanelTitle small{font-size:8px!important;color:#84918b!important}.cinematicRows{padding:4px 17px 12px!important}.cinematicFinanceRow{min-height:48px!important;border-bottom-color:rgba(215,232,222,.065)!important;grid-template-columns:minmax(0,1fr) 160px!important}.cinematicFinanceRow>div>span{font-size:10.5px!important;color:#c5cfca!important}.cinematicFinanceRow>strong{font-size:14px!important}.cinematicFinanceTotal{margin:7px 17px 17px!important;min-height:68px!important;padding:12px 15px!important;border-radius:8px!important;background:linear-gradient(90deg,rgba(239,191,84,.085),rgba(255,255,255,.018))!important;border-color:rgba(239,191,84,.16)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}.cinematicFinanceTotal .value{font-size:27px!important}.cinematicMiniBars{gap:10px!important;padding:0 17px 17px!important}.cinematicMiniBars .modernInsight{background:rgba(255,255,255,.018)!important;border-color:rgba(215,232,222,.075)!important;border-radius:7px!important}

/* REPLAY CATALOG AND RECORDS */
.replayCard,.recordsTable,.toolbar,.uploadSide,.uploadStatus,.dropzone{background:linear-gradient(145deg,rgba(16,25,23,.62),rgba(7,13,13,.52))!important;border-color:rgba(213,231,220,.12)!important;backdrop-filter:blur(16px) saturate(1.15);box-shadow:0 18px 52px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.018)}.replayCard:hover{border-color:rgba(168,235,49,.22)!important;box-shadow:0 28px 70px rgba(0,0,0,.25),0 0 28px rgba(168,235,49,.035)!important}.replayCard .art{filter:saturate(.95) contrast(1.04) brightness(.95)!important}.recordsTable{overflow:hidden;border-radius:10px}.recordRow{border-bottom-color:rgba(213,231,220,.06)!important}.recordRow:hover{background:linear-gradient(90deg,rgba(168,235,49,.045),transparent)}

@media(max-width:1180px){.cinematicHeroTank{right:-4%!important;width:62%!important}.cinematicHeroMetrics{right:41%!important}.cinematicEconomyCards{width:41%!important;min-width:430px!important}.heroTankVisual{right:3%!important}}
@media(max-width:760px){.homeHero{height:auto!important;min-height:560px!important}.heroTankVisual{opacity:.52!important;left:30%!important;right:-32%!important}.cinematicHero{min-height:850px!important}.cinematicHeroTank{top:325px!important;right:-15%!important;width:98%!important;height:280px!important;opacity:.82!important}.cinematicHeroCopy{left:22px!important;top:132px!important}.cinematicHeroCopy h1{font-size:56px!important}.cinematicHeroMetrics{left:18px!important;right:18px!important;bottom:210px!important}.cinematicEconomyCards{left:18px!important;right:18px!important;bottom:106px!important;width:auto!important;min-width:0!important}.cinematicSubMetrics{left:18px!important;right:18px!important;bottom:18px!important}.cinematicReportGrid,.cinematicTeamsGrid,.cinematicInteractionGrid{grid-template-columns:1fr!important}.cinematicFinanceRow{grid-template-columns:minmax(0,1fr) 110px!important}}

/* ========================================================================== */
/* FermaniHUB v0.3.2 — APPROVED MOCKUP EXACT PORT + WG HD ASSETS              */
/* The replay page below intentionally follows the approved reference layout. */
/* ========================================================================== */
:root{
  --approved-bg:#070b0d;
  --approved-panel:rgba(11,16,18,.78);
  --approved-panel-soft:rgba(13,19,21,.66);
  --approved-line:rgba(216,225,223,.13);
  --approved-green:#a7e432;
  --approved-green-2:#7fb51d;
  --approved-red:#ff6c62;
  --approved-gold:#e8b849;
  --approved-text:#f2f4f3;
  --approved-muted:#a2aaa7;
  --approved-font:"Bahnschrift Condensed","Arial Narrow","Segoe UI",Arial,sans-serif;
}
body{background:#05090b!important;color:var(--approved-text)}

/* Header — same density / geometry as the approved mockup */
.approvedTopbar{height:76px!important;display:grid!important;grid-template-columns:220px minmax(520px,1fr) auto!important;gap:26px!important;padding:0 28px!important;background:linear-gradient(180deg,rgba(8,12,14,.99),rgba(6,10,12,.965))!important;border-bottom:1px solid rgba(255,255,255,.085)!important;backdrop-filter:blur(22px) saturate(1.15)!important}
.approvedBrand{gap:10px!important;font-family:var(--approved-font)!important;font-size:23px!important;letter-spacing:.015em!important}
.approvedBrandShield{width:32px!important;height:38px!important;border:2px solid #d9dddd!important;color:#e5e8e7!important;clip-path:polygon(50% 0,100% 14%,92% 77%,50% 100%,8% 77%,0 14%)!important;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent)!important}
.approvedBrandShield span{font-size:11.5px;font-weight:950;letter-spacing:-.06em}.brandWord{white-space:nowrap}.brandWord>span{color:var(--approved-gold)!important}
.approvedNav{display:flex!important;align-items:center!important;gap:37px!important}.approvedNav a{font-family:var(--approved-font);font-size:14px!important;font-weight:650!important;letter-spacing:.02em!important;text-transform:uppercase!important;color:#c2c7c5!important}.approvedNav a:hover{color:#fff!important}
.approvedHeaderActions{height:100%;display:flex;align-items:center;justify-content:flex-end;gap:18px}.headerSeparator{height:24px;width:1px;background:rgba(255,255,255,.12)}
.headerIconButton,.profileButton{height:42px;display:inline-flex;align-items:center;gap:12px;border:0;background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));color:#cbd0ce;text-decoration:none;font-family:var(--approved-font);font-size:16px;cursor:pointer;padding:0 4px}.headerIconButton:hover,.profileButton:hover{color:#fff}.headerIconButton svg,.profileButton>svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.profileAvatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);background:radial-gradient(circle at 45% 35%,#615543,#262b2b 55%,#0d1112 72%);color:#fff;font-weight:800}.profileButton{gap:11px}.profileButton>svg{width:15px}

/* Replay canvas width matches the 1672px approved reference */
.cinematicReplayPage{max-width:1672px!important;margin:0 auto!important;padding:0 0 72px!important;overflow:visible!important}.cinematicReportShell{margin-top:0!important}
.approvedReplayHero{height:570px!important;min-height:570px!important;border:0!important;border-radius:0!important;overflow:hidden!important;box-shadow:none!important;background:none!important;isolation:isolate!important;position:relative!important}
.approvedReplayHero:before,.approvedReplayHero:after{display:none!important}
.approvedHeroBg{position:absolute;inset:0;z-index:-6;background-image:var(--battle-map);background-size:cover;background-position:center 48%;filter:saturate(.92) contrast(1.04) brightness(.98);transform:scale(1.015)}
.approvedHeroVignette{position:absolute;inset:0;z-index:-5;background:linear-gradient(90deg,rgba(3,8,10,.97) 0%,rgba(3,8,10,.86) 25%,rgba(4,9,11,.34) 50%,rgba(4,8,9,.05) 69%,rgba(4,8,9,.17) 100%),linear-gradient(180deg,rgba(3,6,7,.08),rgba(3,6,7,.02) 62%,rgba(4,8,10,.82) 100%)}
.approvedHeroGlow{position:absolute;inset:0;z-index:-4;pointer-events:none;background:radial-gradient(circle at 18% 43%,rgba(108,219,42,.14),transparent 23%),radial-gradient(circle at 86% 18%,rgba(255,222,154,.17),transparent 28%);mix-blend-mode:screen}
.cinematic-loss .approvedHeroGlow{background:radial-gradient(circle at 17% 43%,rgba(255,79,67,.12),transparent 24%),radial-gradient(circle at 84% 18%,rgba(255,196,128,.13),transparent 28%)}
.cinematic-draw .approvedHeroGlow{background:radial-gradient(circle at 17% 43%,rgba(236,179,67,.11),transparent 24%),radial-gradient(circle at 84% 18%,rgba(255,212,135,.14),transparent 28%)}
.approvedReplayHero .cinematicAtmosphere{z-index:-2!important;opacity:.52!important}

/* Top metadata / actions */
.approvedHeroTop{position:absolute;z-index:12;left:69px;right:39px;top:27px;display:flex;align-items:center;justify-content:space-between;gap:20px}.approvedBattleMeta{display:flex;align-items:center;gap:13px;color:#c7ccca;font-family:var(--approved-font);font-size:15px;letter-spacing:.01em}.approvedBattleMeta i{width:4px;height:4px;border-radius:50%;background:var(--approved-gold);box-shadow:0 0 10px rgba(232,184,73,.7)}
.approvedHeroActions{display:flex;gap:12px}.approvedAction{height:43px;display:inline-flex;align-items:center;gap:9px;padding:0 17px;border:1px solid rgba(255,255,255,.16);border-radius:4px;background:linear-gradient(180deg,rgba(18,22,23,.74),rgba(10,13,14,.72));backdrop-filter:blur(16px);color:#eceeed;text-decoration:none;font-family:var(--approved-font);font-size:15px;cursor:pointer;box-shadow:0 8px 26px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.04)}.approvedAction:hover,.approvedAction.active{border-color:rgba(232,184,73,.48);background:linear-gradient(180deg,rgba(41,39,28,.76),rgba(13,16,16,.72));color:#fff}.approvedAction svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.approvedAction:first-child svg{stroke:#e5b63e}

/* Left outcome block */
.approvedHeroCopy{position:absolute;z-index:8;left:70px;top:78px;width:620px}.approvedTankTitle{height:50px;display:flex;align-items:center;gap:11px;font-family:var(--approved-font)}.approvedTankTitle .approvedLaurel{font-size:41px;line-height:1;color:#d4ad5a;transform:rotate(-15deg);text-shadow:0 0 20px rgba(231,183,71,.16)}.approvedTankTitle>b{font-size:30px;font-weight:650;color:#f6f7f6}.approvedClassDiamond{font-size:15px;color:#d4ad5a}.approvedTankTitle>strong{font-size:43px;line-height:1;font-weight:720;letter-spacing:.008em;color:#f6f7f6;text-transform:uppercase}.approvedSurvival{display:block;margin-top:3px;color:#8f9a95;font-family:var(--approved-font);font-size:14px}.approvedHeroCopy h1{margin:20px 0 2px;font-family:var(--approved-font);font-size:88px;line-height:.9;font-weight:720;letter-spacing:-.025em;text-transform:uppercase;color:var(--approved-green);text-shadow:0 0 24px rgba(160,235,68,.40),0 4px 30px rgba(64,143,23,.25)}.cinematic-loss .approvedHeroCopy h1{color:var(--approved-red);text-shadow:0 0 25px rgba(255,76,65,.31),0 4px 32px rgba(131,28,20,.25)}.cinematic-draw .approvedHeroCopy h1{color:var(--approved-gold);text-shadow:0 0 24px rgba(232,184,73,.28)}.approvedHeroCopy>p{margin:8px 0 0;color:#bdc4c1;font-family:var(--approved-font);font-size:15px;letter-spacing:.025em;text-transform:uppercase}.approvedAwardsRail{height:86px;margin-top:16px;display:flex;align-items:center;gap:13px}.approvedAward{width:66px;height:66px;display:grid;place-items:center;filter:drop-shadow(0 9px 10px rgba(0,0,0,.52))}.approvedAward.mastery{width:92px;height:82px}.approvedAward img{max-width:100%;max-height:100%;object-fit:contain}.approvedAward:hover{transform:translateY(-2px);filter:drop-shadow(0 10px 12px rgba(0,0,0,.55)) brightness(1.05)}

/* Tank render — independent HD layer */
.approvedHeroTank{position:absolute;z-index:4;right:10.7%;top:92px;width:min(51%,820px);height:355px;object-fit:contain;object-position:center;filter:drop-shadow(0 28px 22px rgba(0,0,0,.57)) drop-shadow(0 0 2px rgba(255,255,255,.08));transform:scale(1.04);transform-origin:center;image-rendering:auto}.approvedReplayHero:hover .approvedHeroTank{transform:scale(1.055);transition:transform .55s ease}

/* Primary stats / economy use the exact row geometry from approved mockup */
.approvedHeroPrimaryStats{position:absolute;z-index:10;left:70px;bottom:115px;width:54%;height:92px;display:grid;grid-template-columns:repeat(4,1fr);background:linear-gradient(90deg,rgba(8,13,15,.91),rgba(8,13,15,.78));border:1px solid rgba(221,229,226,.10);backdrop-filter:blur(18px);
  color-scheme:dark;box-shadow:0 18px 40px rgba(0,0,0,.18)}.approvedHeroMetric{display:flex;align-items:center;gap:14px;padding:0 22px;border-right:1px solid rgba(255,255,255,.10)}.approvedHeroMetric:last-child{border-right:0}.approvedHeroMetric>span{width:28px;height:28px;color:#d8dcda;display:grid;place-items:center}.approvedHeroMetric svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.approvedHeroMetric strong{display:block;font-family:var(--approved-font);font-size:32px;line-height:1;font-weight:620;color:#f3f5f4}.approvedHeroMetric small{display:block;margin-top:7px;font-family:var(--approved-font);font-size:12.5px;color:#a1aba6;text-transform:uppercase}
.approvedEconomyCards{position:absolute;z-index:11;right:70px;bottom:115px;width:40.2%;height:106px;display:grid;grid-template-columns:1fr 1fr}.approvedEconomy{position:relative;padding:18px 26px;border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(20px);overflow:hidden}.approvedEconomy:after{content:"";position:absolute;inset:-40% -10%;background:linear-gradient(105deg,transparent 37%,rgba(255,255,255,.06) 49%,transparent 60%);transform:translateX(-80%);animation:approvedSweep 8s ease-in-out infinite}.approvedEconomy.silver{background:linear-gradient(120deg,rgba(28,66,39,.81),rgba(8,26,20,.78));transform:skewX(-5deg);transform-origin:right bottom}.approvedEconomy.silver>*{transform:skewX(5deg)}.approvedEconomy.experience{background:linear-gradient(120deg,rgba(100,70,25,.83),rgba(42,32,19,.82));border-left-color:rgba(232,184,73,.23)}.approvedEconomy>span{display:block;font-family:var(--approved-font);font-size:12px;color:#d9dddb;text-transform:uppercase;letter-spacing:.025em}.approvedEconomy>strong{display:inline-block;margin-top:8px;font-family:var(--approved-font);font-size:36px;line-height:1;font-weight:650;color:#fff}.approvedEconomy.experience>strong{color:#efc255}.approvedEconomy.experience>strong i{font-style:normal;color:#e9ba48}.approvedEconomy>small{display:block;margin-top:8px;color:#87928d;font-family:var(--approved-font);font-size:10px}.coinStackIcon{display:inline-block;margin-left:12px;color:#d8dedb;letter-spacing:-4px;font-style:normal;font-size:24px;vertical-align:3px;text-shadow:0 1px 0 #fff,0 3px 10px rgba(255,255,255,.1)}
@keyframes approvedSweep{0%,58%{transform:translateX(-95%)}74%,100%{transform:translateX(115%)}}
.approvedSubMetrics{position:absolute;z-index:12;left:70px;right:70px;bottom:22px;height:69px;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(7,12,14,.78);border:1px solid rgba(221,229,226,.12);backdrop-filter:blur(19px);box-shadow:0 16px 40px rgba(0,0,0,.18)}.approvedSubMetrics>div{display:grid;grid-template-columns:31px auto 1fr;align-items:center;column-gap:12px;padding:0 22px;border-right:1px solid rgba(255,255,255,.10)}.approvedSubMetrics>div:last-child{border-right:0}.approvedSubMetrics span{width:29px;height:29px;color:#cfd5d2}.approvedSubMetrics svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.5}.approvedSubMetrics strong{font-family:var(--approved-font);font-size:24px;font-weight:620;color:#f4f6f5}.approvedSubMetrics small{font-family:var(--approved-font);font-size:12.5px;color:#a7afac;text-transform:uppercase}.approvedSubMetrics .danger strong{color:#ff786f}

/* Tabs align exactly under the hero */
.cinematicTabs{height:52px!important;display:flex!important;align-items:stretch!important;border-bottom:1px solid rgba(215,223,220,.18)!important;background:#060b0d!important;padding:0!important;backdrop-filter:none!important}.cinematicTabs button{height:52px!important;padding:0 22px!important;border:1px solid rgba(215,223,220,.14)!important;border-bottom:0!important;border-right:0!important;background:linear-gradient(180deg,rgba(15,21,23,.83),rgba(8,12,14,.88))!important;color:#a7aeab!important;font-family:var(--approved-font)!important;font-size:14px!important;font-weight:620!important;letter-spacing:.01em!important;text-transform:uppercase!important;position:relative!important}.cinematicTabs button:last-child{border-right:1px solid rgba(215,223,220,.14)!important}.cinematicTabs button.active{color:#f5f6f5!important;background:linear-gradient(180deg,rgba(28,51,36,.82),rgba(9,18,16,.9))!important}.cinematicTabs button.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--approved-green);box-shadow:0 0 12px rgba(167,228,50,.75)}

/* Personal result / battle efficiency */
.cinematicEfficiency{margin-top:0!important;border:1px solid rgba(216,224,222,.13)!important;border-top:0!important;border-radius:0!important;background:linear-gradient(180deg,rgba(11,16,18,.96),rgba(7,12,14,.96))!important;box-shadow:none!important;backdrop-filter:none!important}.cinematicSectionHeader{height:58px!important;min-height:58px!important;padding:0 19px!important;display:flex!important;align-items:center!important;border-bottom:1px solid rgba(216,224,222,.12)!important;background:rgba(8,13,15,.84)!important}.cinematicSectionHeader>div:first-child{display:flex;align-items:center;gap:8px}.cinematicSectionHeader>div:first-child>span{display:none}.cinematicSectionHeader h3{margin:0!important;font-family:var(--approved-font);font-size:14px!important;font-weight:570!important;text-transform:uppercase!important;color:#d8dcda!important}.cinematicSectionHeader h3:after{content:" ⓘ";color:#79847f;font-size:12px}.cinematicFilterPills{margin-left:auto;display:flex;gap:9px}.cinematicFilterPills button{height:34px!important;border:1px solid rgba(216,224,222,.12)!important;border-radius:3px!important;padding:0 14px!important;background:rgba(9,14,16,.72)!important;color:#a7aeab!important;font-family:var(--approved-font)!important;font-size:12px!important}.cinematicFilterPills button.active{color:#fff!important;border-color:rgba(167,228,50,.35)!important;background:rgba(25,46,29,.62)!important;box-shadow:inset 0 -2px 0 var(--approved-green)!important}.cinematicInteractionGrid{display:grid!important;grid-template-columns:1fr 1fr!important;column-gap:20px!important;padding:10px 15px 12px!important;background:transparent!important}.cinematicInteractionGrid .interactionRow{height:48px!important;min-height:48px!important;display:grid!important;grid-template-columns:82px minmax(170px,1fr) auto!important;align-items:center!important;padding:0 8px!important;border-bottom:1px solid rgba(216,224,222,.08)!important;background:rgba(255,255,255,.008)!important}.cinematicInteractionGrid .interactionRow:hover{background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.008))!important}.cinematicInteractionGrid .interactionTank{width:76px;height:46px;display:flex;align-items:center;justify-content:center}.cinematicInteractionGrid .interactionTank img{max-width:75px;max-height:46px;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(0,0,0,.48))}.cinematicInteractionGrid .interactionTarget strong{display:block;font-family:var(--approved-font);font-size:14px!important;color:#f1f3f2!important}.cinematicInteractionGrid .interactionTarget small{display:block;margin-top:2px;color:#8b9690;font-size:10px}.cinematicInteractionGrid .interactionNumbers{display:flex!important;gap:7px!important;align-items:center!important}.cinematicInteractionGrid .interactionNumbers b,.cinematicInteractionGrid .interactionNumbers span{height:28px!important;display:flex!important;align-items:center!important;padding:0 9px!important;border-radius:3px!important;background:rgba(12,18,20,.88)!important;border:1px solid rgba(216,224,222,.11)!important;color:#dfe3e1!important;font-family:var(--approved-font)!important;font-size:11px!important}.cinematicInteractionGrid .interactionNumbers .killPill{color:#9fdf41!important;background:rgba(45,83,29,.48)!important;border-color:rgba(112,170,60,.18)!important}.cinematicInteractionGrid .interactionNumbers .receivedDamagePill{color:#ff786f!important;background:rgba(86,35,31,.42)!important;border-color:rgba(164,72,64,.25)!important}.cinematicMore{margin:0 15px 12px!important;width:calc(100% - 30px)!important;height:34px!important;border-radius:2px!important;background:rgba(12,18,20,.6)!important}

/* Teams — same two-panel score table geometry */
.cinematicTeamsHeader{height:62px!important;min-height:62px!important;margin:0!important;padding:0 15px!important;border-radius:0!important;border:1px solid rgba(216,224,222,.13)!important;border-top:0!important;background:#080d0f!important;box-shadow:none!important;display:flex!important;align-items:center!important}.cinematicTeamsHeader>div:first-child>span{display:none}.cinematicTeamsHeader h3{margin:0!important;font-family:var(--approved-font);font-size:16px!important;font-weight:620!important;text-transform:uppercase!important}.cinematicSortInline{margin-left:auto}.teamSortBar{gap:4px!important}.teamSortBtn{width:38px!important;height:36px!important;border:1px solid transparent!important;border-radius:2px!important;background:transparent!important}.teamSortBtn svg{width:18px!important;height:18px!important}.teamSortBtn span{display:none!important}.teamSortBtn.active{color:var(--approved-green)!important;background:rgba(67,101,31,.30)!important;border-color:rgba(167,228,50,.25)!important}.teamSortBtn i{position:absolute;right:1px;bottom:0;font-size:8px}.cinematicTeamsGrid{grid-template-columns:1fr 1fr!important;gap:11px!important;margin-top:10px!important}.cinematicTeam{border-radius:0!important;background:linear-gradient(180deg,rgba(12,18,20,.96),rgba(8,13,15,.96))!important;border:1px solid rgba(216,224,222,.12)!important;box-shadow:none!important}.cinematicTeam.teamWin{border-top:2px solid rgba(167,228,50,.8)!important}.cinematicTeam.teamLoss{border-top:2px solid rgba(255,108,98,.75)!important}.cinematicTeam.teamDraw{border-top:2px solid rgba(232,184,73,.75)!important}.cinematicTeamHead{height:68px!important;padding:10px 13px!important}.cinematicTeamHead small{color:#7f8b85!important;font-size:9px!important}.cinematicTeamHead strong{font-family:var(--approved-font);font-size:20px!important;text-transform:uppercase}.teamWin .cinematicTeamHead strong{color:var(--approved-green)!important}.teamLoss .cinematicTeamHead strong{color:var(--approved-red)!important}.teamDraw .cinematicTeamHead strong{color:var(--approved-gold)!important}.cinematicTeamTotals{gap:22px!important}.cinematicTeamTotals b{font-family:var(--approved-font);font-size:19px!important}.cinematicTeamTotals small{font-size:8px!important;color:#7f8984!important}.cinematicTeamColumns{height:30px!important;grid-template-columns:45px minmax(150px,1.4fr) minmax(110px,1fr) 70px 70px 70px!important;padding:0 7px!important;color:#88928d!important}.cinematicTeamMembers .teamMember{height:42px!important;min-height:42px!important;grid-template-columns:45px minmax(150px,1.4fr) minmax(110px,1fr) 70px 70px 70px!important;padding:0 7px!important}.cinematicTeamMembers .teamTank img{max-width:42px!important;max-height:34px!important}.cinematicTeamMembers .teamPlayer strong{font-family:var(--approved-font);font-size:12px!important}.cinematicTeamMembers .teamVehicle{font-family:var(--approved-font);font-size:11px!important;text-align:center!important}.cinematicTeamMembers .teamMetric{font-family:var(--approved-font);font-size:12px!important;text-align:right!important}.cinematicTeamMembers .teamMember.owner{background:linear-gradient(90deg,rgba(94,149,42,.22),rgba(48,76,30,.06))!important;box-shadow:inset 3px 0 0 var(--approved-green)!important}

/* Detailed report — exact three-column approved composition */
.approvedDetailQuick{height:56px;margin-top:10px;display:grid;grid-template-columns:repeat(8,1fr);background:rgba(10,15,17,.92);border:1px solid rgba(216,224,222,.13)}.approvedDetailQuick>div{display:grid;grid-template-columns:28px 1fr;grid-template-rows:1fr 1fr;align-items:end;padding:8px 13px;border-right:1px solid rgba(216,224,222,.09)}.approvedDetailQuick>div:last-child{border-right:0}.approvedDetailQuick span{grid-row:1/3;width:24px;height:24px;align-self:center;color:#c4cbc8}.approvedDetailQuick svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}.approvedDetailQuick strong{font-family:var(--approved-font);font-size:15px;line-height:1;color:#f1f3f2}.approvedDetailQuick small{font-family:var(--approved-font);font-size:9px;color:#7f8984;margin-top:4px}
.approvedReportGrid{display:grid;grid-template-columns:1.08fr 1.08fr 1fr;gap:11px;margin-top:11px}.approvedReportPanel{min-width:0;background:linear-gradient(180deg,rgba(15,21,22,.96),rgba(8,13,15,.96));border:1px solid rgba(216,224,222,.13);border-radius:4px;overflow:hidden}.approvedReportPanel.credits{border-color:rgba(159,190,75,.25)}.approvedReportPanel.xp{border-color:rgba(232,184,73,.28)}.approvedPanelTitle{height:52px;display:flex;align-items:center;gap:9px;padding:0 14px;border-bottom:1px solid rgba(216,224,222,.10);background:linear-gradient(180deg,rgba(255,255,255,.018),transparent)}.approvedPanelTitle svg{width:24px;height:24px;padding:4px;border-radius:50%;fill:none;stroke:var(--approved-green);stroke-width:1.5;border:1px solid rgba(167,228,50,.25)}.approvedReportPanel.credits .approvedPanelTitle svg{stroke:#d7b231;border-color:rgba(215,178,49,.25)}.approvedReportPanel.xp .approvedPanelTitle svg{stroke:#e8b849;border-color:rgba(232,184,73,.28)}.approvedPanelTitle h3{margin:0;font-family:var(--approved-font);font-size:16px;text-transform:uppercase}.approvedPanelTitle>small{margin-left:auto;color:#8b9590;font-size:9px}.approvedRows{padding:9px 14px 12px}.approvedDetailRow{min-height:28px;display:grid;grid-template-columns:minmax(0,1fr) 120px;align-items:center;border-bottom:1px solid rgba(216,224,222,.07)}.approvedDetailRow:last-child{border-bottom:0}.approvedDetailRow>div>span{font-family:var(--approved-font);font-size:12.5px;color:#b2bab6}.approvedDetailRow>div>small{display:block;color:#6f7a74;font-size:8px}.approvedDetailRow>strong{text-align:right;font-family:var(--approved-font);font-size:12px;color:#f0f2f1}.approvedFinanceTotal,.approvedXpTotal{height:52px;margin:6px 12px 12px;padding:0 13px;display:flex;align-items:center;border:1px solid rgba(167,228,50,.16);background:linear-gradient(90deg,rgba(69,97,35,.20),rgba(20,28,20,.10))}.approvedFinanceTotal span,.approvedXpTotal span{font-family:var(--approved-font);font-size:15px;text-transform:uppercase}.approvedFinanceTotal strong{margin-left:auto;font-family:var(--approved-font);font-size:22px}.approvedXpTotal{border-color:rgba(232,184,73,.20);gap:22px}.approvedXpTotal strong{margin-left:auto;font-family:var(--approved-font);font-size:17px}.approvedXpTotal .premiumXp{color:#e8b849}.approvedXpFoot{padding:0 12px 12px}

/* Footer / report max width */
footer{max-width:1672px!important;margin-left:auto!important;margin-right:auto!important;border-top-color:rgba(216,224,222,.09)!important}

@media(max-width:1300px){
  .approvedTopbar{grid-template-columns:190px 1fr auto!important}.approvedNav{gap:19px!important}.approvedHeaderActions .headerIconButton span,.profileButton>span:not(.profileAvatar){display:none}.approvedHeroCopy{left:42px;width:520px}.approvedHeroTop{left:42px;right:26px}.approvedHeroTank{right:4%;width:52%}.approvedHeroPrimaryStats{left:42px;width:55%}.approvedEconomyCards{right:28px;width:39%}.approvedSubMetrics{left:42px;right:28px}.approvedHeroCopy h1{font-size:72px}.approvedTankTitle>strong{font-size:36px}
}
@media(max-width:900px){
  .approvedTopbar{grid-template-columns:180px 1fr auto!important;padding:0 14px!important}.approvedNav a:nth-child(n+4){display:none}.approvedReplayHero{height:790px!important;min-height:790px!important}.approvedHeroTop{left:22px;right:18px}.approvedBattleMeta span:nth-of-type(2){display:none}.approvedHeroActions .approvedAction span{display:none}.approvedHeroActions .approvedAction{width:40px;padding:0;justify-content:center}.approvedHeroCopy{left:22px;top:80px;width:calc(100% - 44px)}.approvedHeroCopy h1{font-size:58px}.approvedHeroTank{top:270px;right:-4%;width:88%;height:300px;opacity:.88}.approvedHeroPrimaryStats{left:18px;right:18px;bottom:188px;width:auto;height:88px}.approvedEconomyCards{left:18px;right:18px;bottom:102px;width:auto;height:84px}.approvedEconomy{padding:12px 17px}.approvedEconomy>strong{font-size:26px}.approvedSubMetrics{left:18px;right:18px;bottom:18px;height:68px}.approvedSubMetrics>div{padding:0 9px}.approvedSubMetrics small{font-size:8px}.approvedSubMetrics strong{font-size:18px}.cinematicInteractionGrid,.cinematicTeamsGrid,.approvedReportGrid{grid-template-columns:1fr!important}.approvedDetailQuick{grid-template-columns:repeat(4,1fr);height:auto}.approvedDetailQuick>div{min-height:54px}.approvedNav{gap:15px!important}.approvedNav a{font-size:11px!important}
}

/* v0.3.2 icon system: every UI glyph used by the approved mockup lives as an
   editable SVG under web/assets/ui and is tinted through CSS masks. */
.uiMaskIcon{display:inline-block;width:1em;height:1em;flex:0 0 auto;background:currentColor;-webkit-mask:var(--ui-icon) center/contain no-repeat;mask:var(--ui-icon) center/contain no-repeat;filter:drop-shadow(0 0 1px rgba(255,255,255,.07)) drop-shadow(0 1px 2px rgba(0,0,0,.30))}
.uiAssetIcon{display:inline-block;object-fit:contain;background:none!important;-webkit-mask:none!important;mask:none!important;vertical-align:middle;color:inherit!important;filter:drop-shadow(0 0 2px rgba(255,255,255,.08)) drop-shadow(0 2px 3px rgba(0,0,0,.24))}
.uiAssetIcon.uiMaskIcon{background:none!important;-webkit-mask:none!important;mask:none!important}
.cardPremiumKpiIcon.uiAssetIcon{width:20px;height:20px}
.actionIcon{width:18px!important;height:18px!important}.metricIcon{width:28px!important;height:28px!important}
.approvedAction>svg,.approvedHeroMetric svg,.approvedSubMetrics svg,.teamSortBtn svg{display:none!important}
.approvedAction .uiMaskIcon{color:currentColor}.approvedAction:first-child .uiMaskIcon{color:#e5b63e}
.approvedHeroMetric>span>.uiMaskIcon{width:28px;height:28px}.approvedSubMetrics>div>span>.uiMaskIcon{width:24px;height:24px}
.teamSortMask{width:18px;height:18px}.teamSortBtn{position:relative!important;color:#7e8984!important}.teamSortBtn.active{color:var(--approved-green)!important}
.detailSectionMask{width:22px;height:22px;color:currentColor;display:inline-block;vertical-align:middle}

/* Tier + class symbol is no longer a text glyph. This mirrors the approved
   title row while staying original to FermaniHUB. */
.approvedTierEmblem{position:relative;width:72px;height:48px;display:grid;place-items:center;color:#d6ad55;flex:0 0 auto}.approvedTierEmblem .tierLaurel{position:absolute;inset:0;width:72px;height:48px;opacity:.95}.approvedTierEmblem>b{position:relative;z-index:2;font-family:var(--approved-font);font-size:26px!important;line-height:1;color:#f0e4c8!important;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.vehicleClassMark{width:25px;height:25px;color:#d6ad55;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}
.approvedTankTitle .approvedLaurel,.approvedTankTitle .approvedClassDiamond{display:none!important}
.approvedTankTitle{gap:13px!important}

/* Economy pictograms from the local icon pack, matching the approved card. */
.economyCoinIcon{position:absolute;right:24px;bottom:27px;width:43px;height:43px;color:#d8dddb;opacity:.95;filter:drop-shadow(0 5px 8px rgba(0,0,0,.4))}
.economyXpIcon{width:29px;height:29px;color:#e8b849;vertical-align:-5px;margin-right:5px;filter:drop-shadow(0 0 8px rgba(232,184,73,.25))}
.approvedEconomy.experience>strong{display:flex;align-items:center;gap:3px}

/* Personal result follows the approved mockup exactly: 3 rows in the left
   column, then 3 in the right column. Remaining interactions stay collapsed. */
.cinematicEfficiency{background:rgba(7,12,14,.94)!important;border:1px solid rgba(216,224,222,.13)!important;border-radius:0!important;box-shadow:none!important}
.cinematicSectionHeader{height:56px!important;padding:0 20px!important;border-bottom:1px solid rgba(216,224,222,.11)!important;background:linear-gradient(180deg,rgba(255,255,255,.015),transparent)!important}
.cinematicSectionHeader h3{font-family:var(--approved-font)!important;font-size:15px!important;font-weight:600!important;letter-spacing:.015em!important;color:#c7cdca!important;text-transform:uppercase!important}
.sectionInfoDot{display:inline-grid!important;place-items:center!important;width:16px!important;height:16px!important;margin-left:5px!important;border:1px solid rgba(196,205,201,.42)!important;border-radius:50%!important;font-family:Arial,sans-serif!important;font-size:10px!important;color:#9ba5a0!important;vertical-align:2px!important}
.cinematicFilterPills{gap:10px!important}.cinematicFilterPills button{height:34px!important;padding:0 16px!important;border-radius:3px!important;font-family:var(--approved-font)!important;font-size:12px!important;background:rgba(10,15,17,.82)!important;border:1px solid rgba(216,224,222,.14)!important;color:#959e99!important}.cinematicFilterPills button.active{background:rgba(30,39,31,.82)!important;color:#f0f3ef!important;border-color:rgba(167,228,50,.28)!important;box-shadow:inset 0 -2px 0 rgba(167,228,50,.78)!important}
.cinematicInteractionGrid{display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-rows:repeat(3,50px)!important;grid-auto-flow:column!important;gap:0 20px!important;padding:8px 20px 12px!important}
.cinematicInteractionGrid .effRowWrap{min-width:0!important}.cinematicInteractionGrid .interactionRow{height:50px!important;grid-template-columns:82px minmax(170px,1fr) auto!important;border-bottom:1px solid rgba(216,224,222,.08)!important;background:transparent!important;padding:0 9px!important;border-radius:0!important}.cinematicInteractionGrid .interactionRow:hover{background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.01))!important}.cinematicInteractionGrid .interactionTank img{max-width:78px!important;max-height:46px!important}.cinematicInteractionGrid .interactionTarget strong{font-size:14px!important}.cinematicInteractionGrid .interactionNumbers{justify-content:flex-end!important}.cinematicInteractionGrid .interactionNumbers b,.cinematicInteractionGrid .interactionNumbers span{height:27px!important;font-size:10px!important;padding:0 8px!important}
.cinematicMore{height:34px!important;margin:0 20px 14px!important;width:calc(100% - 40px)!important}
.extraEff{display:none!important}.extraEff.show{display:block!important}

/* The reference is a full-width cinematic composition, not a card floating in
   empty space. At desktop width it starts directly below the navigation. */
#app{min-height:calc(100vh - 76px)}
.cinematicReplayPage{width:min(100%,1672px)!important}
.approvedReplayHero{width:100%!important}
.cinematicReportShell{background:#060a0c!important}
.cinematicTabs{padding-left:68px!important;background:#070b0d!important;border-bottom:1px solid rgba(216,224,222,.12)!important}
.cinematicTabs button{min-width:175px!important;height:52px!important;font-family:var(--approved-font)!important;font-size:15px!important;text-transform:uppercase!important;border-radius:0!important;color:#a5adaa!important}
.cinematicTabs button.active{color:#f0f3f1!important;background:linear-gradient(180deg,rgba(33,59,35,.55),rgba(18,28,22,.55))!important;box-shadow:inset 0 -2px 0 var(--approved-green),0 0 18px rgba(167,228,50,.08)!important}

/* Keep the background sharp and the vehicle render optically integrated into
   it. We avoid blur on the source asset itself. */
.approvedHeroBg{filter:saturate(.98) contrast(1.06) brightness(1.04)!important;image-rendering:auto}
.approvedHeroTank{filter:drop-shadow(0 30px 23px rgba(0,0,0,.63)) drop-shadow(0 0 1px rgba(255,255,255,.16)) contrast(1.035) saturate(1.02)!important}

@media(max-width:900px){
  .cinematicInteractionGrid{grid-template-columns:1fr!important;grid-template-rows:none!important;grid-auto-flow:row!important}
  .cinematicTabs{padding-left:18px!important}.cinematicTabs button{min-width:0!important;flex:1!important;font-size:12px!important}
}
.approvedBrandLogo{width:36px;height:42px;display:block;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}.approvedBrandShield{display:none!important}.headerIconButton>.uiMaskIcon{width:20px;height:20px}.approvedBrand{align-items:center!important}

/* =========================================================
   v0.3.3 — HERO HD TANK RENDER + TYPOGRAPHY PASS + TRUE MOCKUP MATCH
   Final approved target: design_reference/approved_cinematic_replay_reference.png
   ========================================================= */
:root{
  --approved-font:"Bahnschrift Condensed","Arial Narrow","Segoe UI",Arial,sans-serif;
  --approved-ui:"Bahnschrift","Segoe UI",Arial,sans-serif;
  --approved-green:#a7e432;
  --approved-green-hot:#b7f542;
  --approved-red:#ff665c;
  --approved-gold:#e9b84b;
  --approved-panel:rgba(7,12,14,.86);
  --approved-panel-soft:rgba(10,16,18,.72);
  --approved-line:rgba(221,232,226,.13);
}
body{font-family:var(--approved-ui)!important;background:#05090b!important;color:#f3f5f4!important}
.approvedTopbar{height:76px!important;background:rgba(4,8,10,.975)!important;border-bottom:1px solid rgba(255,255,255,.08)!important;backdrop-filter:blur(24px) saturate(1.15)!important}
.approvedBrand .brandWord{font-family:var(--approved-ui)!important;font-size:23px!important;letter-spacing:.012em!important}
.approvedNav{gap:34px!important}.approvedNav a{font-family:var(--approved-font)!important;font-size:15px!important;font-weight:600!important;letter-spacing:.055em!important;color:#c3c8c6!important}
.headerIconButton,.profileButton{font-family:var(--approved-font)!important;font-size:15px!important}

/* Hero: full cinematic composition at the same visual scale as the approved mockup. */
.cinematicReplayPage{max-width:1672px!important;width:calc(100% - 48px)!important;padding-bottom:64px!important}
.approvedReplayHero{height:640px!important;min-height:640px!important;background:#080c0e!important;box-shadow:0 28px 90px rgba(0,0,0,.34)!important}
.approvedHeroBg{background-size:cover!important;background-position:center 48%!important;filter:saturate(1.02) contrast(1.08) brightness(.96)!important;transform:scale(1.008)!important}
.approvedReplayHero.hasHeroWallpaper .approvedHeroBg{background-position:center 44%!important;filter:saturate(1.06) contrast(1.08) brightness(.98)!important}
.approvedHeroVignette{background:
  linear-gradient(90deg,rgba(3,7,9,.97) 0%,rgba(3,7,9,.89) 22%,rgba(3,7,9,.52) 37%,rgba(3,7,9,.16) 58%,rgba(3,7,9,.03) 78%,rgba(3,7,9,.12) 100%),
  linear-gradient(180deg,rgba(2,5,7,.05) 0%,rgba(2,5,7,.02) 55%,rgba(3,8,10,.82) 100%)!important}
.approvedReplayHero.hasHeroWallpaper .approvedHeroVignette{background:linear-gradient(90deg,rgba(3,7,9,.96) 0%,rgba(3,7,9,.82) 24%,rgba(3,7,9,.30) 46%,rgba(3,7,9,.05) 75%,rgba(3,7,9,.08) 100%),linear-gradient(180deg,rgba(2,5,7,.02),rgba(3,8,10,.76) 100%)!important}
.approvedHeroGlow{opacity:1!important;background:radial-gradient(circle at 15% 44%,rgba(113,237,47,.18),transparent 27%),radial-gradient(circle at 84% 13%,rgba(255,225,166,.24),transparent 30%)!important}
.cinematic-loss .approvedHeroGlow{background:radial-gradient(circle at 15% 44%,rgba(255,80,64,.17),transparent 27%),radial-gradient(circle at 84% 13%,rgba(255,191,115,.21),transparent 30%)!important}
.cinematic-draw .approvedHeroGlow{background:radial-gradient(circle at 15% 44%,rgba(235,182,68,.17),transparent 27%),radial-gradient(circle at 84% 13%,rgba(255,218,151,.20),transparent 30%)!important}
.approvedHeroLightBeam{position:absolute;z-index:-3;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 46%,rgba(255,244,216,.05) 50%,transparent 55%);mix-blend-mode:screen;animation:heroBeamV33 11s ease-in-out infinite}
@keyframes heroBeamV33{0%,100%{transform:translateX(-10%);opacity:.15}50%{transform:translateX(12%);opacity:.65}}
.cinematicAtmosphere{opacity:.58!important}

.approvedHeroTop{left:70px!important;right:42px!important;top:28px!important}.approvedBattleMeta{font-size:14px!important;gap:12px!important;color:#cbd1ce!important}.approvedBattleMeta .metaIcon{width:15px;height:15px;vertical-align:-2px;color:#c5cbc8}.approvedAction{height:46px!important;padding:0 18px!important;font-size:15px!important;border-radius:5px!important;background:linear-gradient(180deg,rgba(20,25,27,.80),rgba(9,13,15,.76))!important}.approvedAction .actionIcon{width:19px!important;height:19px!important}

.approvedHeroCopy{left:70px!important;top:91px!important;width:660px!important}.approvedTankTitle{height:57px!important;gap:12px!important}.approvedTierEmblem{width:76px!important;height:52px!important}.approvedTierEmblem .tierLaurel{width:76px!important;height:52px!important}.approvedTierEmblem>b{font-size:27px!important}.vehicleClassMark{width:27px!important;height:27px!important}.approvedTankTitle>strong{font-size:47px!important;font-weight:650!important;letter-spacing:.008em!important}.approvedSurvival{margin-top:4px!important;font-size:15px!important;color:#a0aaa5!important}.approvedHeroCopy h1{margin-top:25px!important;font-size:94px!important;font-weight:670!important;letter-spacing:-.018em!important;line-height:.86!important}.approvedHeroCopy>p{font-size:16px!important;margin-top:11px!important;color:#c8cecb!important}.approvedAwardsRail{height:86px!important;margin-top:15px!important;gap:10px!important}.approvedAwardsRail.emptyAwards{height:48px!important}.awardRailEmpty{display:inline-flex;align-items:center;height:32px;padding:0 13px;border:1px solid rgba(255,255,255,.10);background:rgba(8,13,15,.48);color:#7f8a85;font-size:12.5px;border-radius:3px}.approvedAward{width:64px!important;height:64px!important}.approvedAward.mastery{width:88px!important;height:78px!important}.unresolvedAward{opacity:.72!important;filter:drop-shadow(0 8px 10px rgba(0,0,0,.48)) saturate(.78)!important}.unresolvedAward:hover{opacity:1!important}

/* Keep a local-client render at native visual scale instead of enlarging it until it blurs. */
.approvedHeroTank{right:4.8%!important;top:82px!important;width:min(56%,900px)!important;height:390px!important;object-fit:contain!important;object-position:right center!important;transform:scale(1)!important;filter:drop-shadow(0 40px 26px rgba(0,0,0,.67)) drop-shadow(-10px 5px 24px rgba(0,0,0,.30)) contrast(1.07) saturate(1.06) brightness(1.02)!important}
.approvedReplayHero:hover .approvedHeroTank{transform:scale(1.012)!important}.approvedReplayHero.hasHeroWallpaper .approvedHeroTank{display:none!important}

/* Main values and economy cards match the approved 4+2 strip. */
.approvedHeroPrimaryStats{left:70px!important;bottom:120px!important;width:55.2%!important;height:96px!important;background:linear-gradient(90deg,rgba(8,13,15,.94),rgba(8,13,15,.80))!important}.approvedHeroMetric{gap:15px!important;padding:0 24px!important}.approvedHeroMetric>span>.uiMaskIcon{width:30px!important;height:30px!important}.approvedHeroMetric strong{font-size:35px!important;font-weight:600!important}.approvedHeroMetric small{margin-top:8px!important;font-size:12px!important;color:#aeb6b2!important}
.approvedEconomyCards{right:70px!important;bottom:120px!important;width:41.5%!important;height:112px!important}.approvedEconomy{padding:18px 29px!important}.approvedEconomy>span{font-size:13px!important}.approvedEconomy>strong{font-size:39px!important;font-weight:620!important}.approvedEconomy>small{font-size:11px!important}.economyCoinIcon{right:27px!important;bottom:29px!important;width:46px!important;height:46px!important}.economyXpIcon{width:31px!important;height:31px!important}
.approvedSubMetrics{left:70px!important;right:70px!important;bottom:22px!important;height:76px!important}.approvedSubMetrics>div{grid-template-columns:32px auto 1fr!important;column-gap:11px!important;padding:0 24px!important}.approvedSubMetrics>div>span>.uiMaskIcon{width:27px!important;height:27px!important}.approvedSubMetrics strong{font-size:26px!important;font-weight:600!important}.approvedSubMetrics small{font-size:12px!important;color:#aab2ae!important}

/* Tabs are bigger and clearer at normal 100% Windows scale. */
.cinematicReportShell{background:#060a0c!important}.cinematicTabs{height:58px!important;padding-left:0!important;background:#070b0d!important}.cinematicTabs button{min-width:198px!important;height:58px!important;padding:0 25px!important;font-size:16px!important;font-weight:610!important;letter-spacing:.015em!important}.cinematicTabs button.active{background:linear-gradient(180deg,rgba(38,67,41,.58),rgba(15,24,19,.58))!important}

/* Personal score: player -> vehicle -> action, as in the approved mockup. */
.cinematicEfficiency{border-radius:0!important;background:rgba(7,12,14,.94)!important}.cinematicSectionHeader{height:62px!important;padding:0 20px!important}.cinematicSectionHeader h3{font-size:16px!important}.cinematicFilterPills button{height:37px!important;padding:0 16px!important;font-size:13px!important}.cinematicInteractionGrid{grid-template-columns:1fr 1fr!important;grid-template-rows:repeat(3,58px)!important;grid-auto-flow:column!important;column-gap:22px!important;padding:10px 16px 13px!important}.cinematicInteractionGrid .interactionRow{height:58px!important;grid-template-columns:minmax(120px,1fr) minmax(205px,1.32fr) auto!important;gap:12px!important;padding:0 10px!important}.interactionPlayer{min-width:0}.interactionPlayer strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--approved-font);font-size:16px;color:#e9eeeb}.interactionVehicle{min-width:0;display:grid;grid-template-columns:82px minmax(90px,1fr);align-items:center;gap:9px}.interactionVehicle img{width:80px;height:50px;object-fit:contain;filter:drop-shadow(0 7px 7px rgba(0,0,0,.48))}.interactionVehicle strong{font-family:var(--approved-font);font-size:16px;color:#eef2ef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cinematicInteractionGrid .interactionNumbers{gap:6px!important;flex-wrap:nowrap!important}.cinematicInteractionGrid .interactionNumbers b,.cinematicInteractionGrid .interactionNumbers span{height:29px!important;font-size:11px!important;padding:0 9px!important;white-space:nowrap}.assistPill{color:#e7b94d!important;border-color:rgba(231,185,77,.22)!important;background:rgba(95,70,24,.34)!important}

/* Teams: raise typography without losing all 15 rows on a 1080p screen. */
.cinematicTeamsHeader{height:68px!important;padding:0 18px!important}.cinematicTeamsHeader h3{font-size:18px!important}.teamSortBtn{width:42px!important;height:38px!important}.teamSortMask{width:20px!important;height:20px!important}.cinematicTeamsGrid{gap:14px!important;margin-top:12px!important}.cinematicTeamHead{height:72px!important;padding:10px 15px!important}.cinematicTeamHead small{font-size:10px!important}.cinematicTeamHead strong{font-size:22px!important}.cinematicTeamTotals b{font-size:21px!important}.cinematicTeamColumns{height:31px!important;font-size:8px!important;grid-template-columns:48px minmax(165px,1.45fr) minmax(120px,1fr) 74px 70px 70px!important}.cinematicTeamMembers .teamMember{height:43px!important;min-height:43px!important;grid-template-columns:48px minmax(165px,1.45fr) minmax(120px,1fr) 74px 70px 70px!important}.cinematicTeamMembers .teamTank img{max-width:47px!important;max-height:36px!important}.cinematicTeamMembers .teamPlayer strong{font-size:13px!important}.cinematicTeamMembers .teamVehicle{font-size:12px!important}.cinematicTeamMembers .teamMetric b{font-size:13px!important}

/* Detailed report: larger readable typography, aligned three-card composition. */
.approvedDetailQuick{height:62px!important;margin-top:12px!important}.approvedDetailQuick>div{grid-template-columns:30px 1fr!important;padding:9px 13px!important}.approvedDetailQuick span{width:26px!important;height:26px!important}.approvedDetailQuick strong{font-size:17px!important}.approvedDetailQuick small{font-size:9px!important}.approvedReportGrid{gap:12px!important;margin-top:12px!important}.approvedPanelTitle{height:58px!important;padding:0 15px!important}.approvedPanelTitle svg{width:27px!important;height:27px!important}.approvedPanelTitle h3{font-size:18px!important}.approvedPanelTitle>small{font-size:10px!important}.approvedRows{padding:10px 15px 13px!important}.approvedDetailRow{min-height:32px!important;grid-template-columns:minmax(0,1fr) 135px!important}.approvedDetailRow>div>span{font-size:12px!important}.approvedDetailRow>div>small{font-size:9px!important}.approvedDetailRow>strong,.approvedDetailRow>strong .value{font-size:13px!important}.approvedFinanceTotal,.approvedXpTotal{height:58px!important;margin:7px 13px 13px!important}.approvedFinanceTotal span,.approvedXpTotal span{font-size:14px!important}.approvedFinanceTotal strong{font-size:24px!important}.approvedXpTotal strong{font-size:19px!important}

/* Main nav and main surfaces remain inside one aligned 1672px canvas. */
footer{font-size:11px!important}.cinematicReportContent{font-family:var(--approved-ui)!important}

@media(max-width:1400px){
  .cinematicReplayPage{width:100%!important}.approvedHeroCopy{left:45px!important;width:560px!important}.approvedHeroTop{left:45px!important;right:30px!important}.approvedHeroCopy h1{font-size:78px!important}.approvedTankTitle>strong{font-size:40px!important}.approvedHeroTank{right:2%!important;width:55%!important}.approvedHeroPrimaryStats{left:45px!important;width:56%!important}.approvedEconomyCards{right:30px!important;width:40%!important}.approvedSubMetrics{left:45px!important;right:30px!important}.approvedHeroMetric{padding:0 17px!important}.approvedHeroMetric strong{font-size:30px!important}.approvedSubMetrics>div{padding:0 15px!important}.approvedSubMetrics strong{font-size:22px!important}.approvedSubMetrics small{font-size:10px!important}
}
@media(max-width:1000px){
  .approvedReplayHero{height:820px!important;min-height:820px!important}.approvedHeroCopy{left:25px!important;top:80px!important;width:calc(100% - 50px)!important}.approvedHeroTop{left:25px!important;right:20px!important}.approvedHeroTank{top:275px!important;right:-2%!important;width:86%!important;height:300px!important}.approvedHeroPrimaryStats{left:20px!important;right:20px!important;bottom:195px!important;width:auto!important}.approvedEconomyCards{left:20px!important;right:20px!important;bottom:108px!important;width:auto!important}.approvedSubMetrics{left:20px!important;right:20px!important;bottom:20px!important}.cinematicInteractionGrid{grid-template-columns:1fr!important;grid-template-rows:none!important;grid-auto-flow:row!important}.approvedReportGrid,.cinematicTeamsGrid{grid-template-columns:1fr!important}.cinematicTabs button{min-width:0!important;flex:1!important;font-size:13px!important;padding:0 10px!important}
}

/* v0.3.3 latest approved STK-2 reference refinements */
.approvedTopbar{grid-template-columns:220px 1fr minmax(420px,auto)!important;padding:0 max(28px,calc((100vw - 1672px)/2))!important}
.approvedHeaderActions{gap:14px!important}.approvedSearchBox{width:285px;height:38px;display:flex;align-items:center;border:1px solid rgba(255,255,255,.14);border-radius:20px;background:rgba(5,10,12,.78);overflow:hidden}.approvedSearchBox input{min-width:0;flex:1;height:100%;border:0;outline:0;background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));color:#d8ddda;padding:0 8px 0 16px;font-family:var(--approved-ui);font-size:11px}.approvedSearchBox input::placeholder{color:#65716b}.approvedSearchBox button{width:42px;height:100%;border:0;background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));color:#8e9993;display:grid;place-items:center;cursor:pointer}.approvedSearchBox button:hover{color:#fff}.approvedSearchBox .uiMaskIcon{width:17px;height:17px}.approvedLivePill{height:36px!important;display:inline-flex!important;align-items:center!important;padding:0 14px!important;border-radius:18px!important;background:rgba(6,11,13,.80)!important;border:1px solid rgba(255,255,255,.13)!important;font-family:var(--approved-font)!important;font-size:11px!important;color:#9da7a2!important;white-space:nowrap}.approvedSignIn{height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px;border-radius:4px;background:linear-gradient(180deg,#79ac19,#4d760d);border:1px solid #8dc31d;color:#fff;text-decoration:none;text-transform:uppercase;font-family:var(--approved-font);font-size:15px;font-weight:700;letter-spacing:.04em;box-shadow:0 7px 18px rgba(0,0,0,.18)}.approvedSignIn:hover{filter:brightness(1.08)}

.approvedTankTitle{height:54px!important;gap:14px!important}.approvedBackButton{width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:5px;background:rgba(6,11,13,.62);color:#e8b849;cursor:pointer}.approvedBackButton:hover{background:rgba(38,31,16,.65);border-color:rgba(232,184,73,.32)}.approvedBackButton .backIcon{width:20px;height:20px}.approvedTankTitle>strong{font-size:44px!important}.approvedTierEmblem,.vehicleClassMark{display:none!important}

@media(max-width:1200px){.approvedTopbar{grid-template-columns:190px 1fr auto!important;padding:0 18px!important}.approvedSearchBox{width:230px}.approvedLivePill{display:none!important}.approvedNav{gap:20px!important}.approvedNav a{font-size:13px!important}}
@media(max-width:850px){.approvedTopbar{grid-template-columns:180px 1fr auto!important}.approvedSearchBox{display:none!important}.approvedNav a:nth-child(n+4){display:none}.approvedSignIn{padding:0 12px}.approvedTankTitle>strong{font-size:38px!important}}


/* ================================================================
   v0.3.4 — VISUAL READABILITY + HONEST HD GUARD
   ================================================================ */
:root{--approved-font:"Bahnschrift Condensed","Arial Narrow","Segoe UI",Arial,sans-serif}
.approvedTankTitle>strong,.approvedHeroCopy h1,.approvedHeroMetric strong,.approvedEconomy>strong,.approvedSubMetrics strong,.cinematicTabs button,.cinematicSectionHeader h3,.cinematicTeamHead strong,.approvedPanelTitle h3{font-family:var(--approved-font)!important}
.approvedTankTitle>strong{font-weight:700!important;letter-spacing:.012em!important}.approvedHeroCopy h1{font-weight:700!important}.approvedBattleMeta{font-size:15px!important}.approvedSurvival{font-size:16px!important}.approvedHeroCopy>p{font-size:17px!important}
/* Do not upscale a small client render until it turns into a pixelated poster. */
.approvedReplayHero.lowResHero .approvedHeroTank{width:min(43%,650px)!important;height:330px!important;right:7%!important;top:104px!important;filter:drop-shadow(0 35px 25px rgba(0,0,0,.68)) contrast(1.03) saturate(1.02)!important}
.approvedReplayHero.lowResHero .approvedHeroVignette{background:linear-gradient(90deg,rgba(3,7,9,.96) 0%,rgba(3,7,9,.82) 30%,rgba(3,7,9,.32) 55%,rgba(3,7,9,.10) 100%),linear-gradient(180deg,rgba(2,5,7,.02),rgba(3,8,10,.70) 100%)!important}
/* Real medals or a single +N counter — never a row of fake stars. */
.approvedAwardCount{height:48px;min-width:58px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(232,184,73,.42);background:linear-gradient(180deg,rgba(76,56,20,.68),rgba(30,24,12,.74));color:#efc55a;font-family:var(--approved-font);font-size:20px;font-weight:800;border-radius:6px;box-shadow:0 8px 22px rgba(0,0,0,.28)}
/* Personal score: tank first, then its player under the name, actions on the right. */
.cinematicInteractionGrid{grid-template-rows:repeat(3,64px)!important;column-gap:28px!important;padding:12px 18px 14px!important}
.cinematicInteractionGrid .interactionRow{height:64px!important;grid-template-columns:minmax(250px,1fr) auto!important;gap:16px!important;padding:0 12px!important}
.cinematicInteractionGrid .interactionVehicle{display:grid!important;grid-template-columns:94px minmax(140px,1fr)!important;gap:12px!important;align-items:center!important}.cinematicInteractionGrid .interactionVehicle img{width:92px!important;height:58px!important;object-fit:contain!important}.cinematicInteractionGrid .interactionVehicle strong{display:block;font-size:16px!important;font-weight:700!important;color:#f3f5f4!important}.cinematicInteractionGrid .interactionVehicle small{display:block;margin-top:3px;color:#818c87;font-size:11px!important}.cinematicInteractionGrid .interactionPlayer{display:none!important}.cinematicInteractionGrid .interactionNumbers{gap:7px!important}.cinematicInteractionGrid .interactionNumbers b,.cinematicInteractionGrid .interactionNumbers span{height:31px!important;font-size:12px!important;padding:0 10px!important;border-radius:4px!important}
.cinematicSectionHeader{height:66px!important}.cinematicSectionHeader h3{font-size:18px!important;color:#d7dcda!important}.cinematicFilterPills button{font-size:13px!important}
/* Team table: slightly larger reading size without losing compactness. */
.cinematicTeamColumns{font-size:9px!important}.cinematicTeamMembers .teamMember{height:46px!important;min-height:46px!important}.cinematicTeamMembers .teamPlayer strong{font-size:14px!important}.cinematicTeamMembers .teamVehicle{font-size:13px!important}.cinematicTeamMembers .teamMetric b{font-size:14px!important}
/* Detailed report: align labels and numbers on a clean baseline. */
.approvedDetailRow{grid-template-columns:minmax(0,1fr) 142px!important;min-height:34px!important}.approvedDetailRow>div>span{font-size:13px!important;line-height:1.15}.approvedDetailRow>strong,.approvedDetailRow>strong .value{font-size:14px!important;line-height:1!important;font-variant-numeric:tabular-nums}.approvedRows{padding-top:8px!important;padding-bottom:10px!important}.approvedDetailQuick strong{font-size:18px!important}.approvedDetailQuick small{font-size:10px!important}.approvedPanelTitle h3{font-size:19px!important}
@media(max-width:1200px){.cinematicInteractionGrid .interactionRow{grid-template-columns:minmax(210px,1fr) auto!important}.cinematicInteractionGrid .interactionVehicle{grid-template-columns:78px minmax(120px,1fr)!important}.cinematicInteractionGrid .interactionVehicle img{width:76px!important;height:52px!important}}


/* ================================================================
   v0.3.5 — MEDAL DECODER UTF8 + HERO QUALITY GUARD + UI POLISH
   ================================================================ */
/* A 160x100/low client render must never be stretched into a 600px poster.
   Keep it as a deliberate vehicle cutout; the map/wide scene remains the hero. */
.approvedReplayHero.lowResHero .approvedHeroTank{
  width:clamp(230px,22vw,340px)!important;
  height:250px!important;
  right:9%!important;
  top:132px!important;
  object-fit:contain!important;
  image-rendering:auto!important;
  opacity:.92!important;
  transform:none!important;
  filter:drop-shadow(0 30px 24px rgba(0,0,0,.74)) drop-shadow(0 0 22px rgba(0,0,0,.28)) contrast(1.05) saturate(1.04)!important;
}
.approvedReplayHero.lowResHero:hover .approvedHeroTank{transform:none!important}
.approvedReplayHero.lowResHero .approvedHeroBg{filter:saturate(1.06) contrast(1.09) brightness(.99)!important}
.approvedReplayHero.lowResHero .approvedHeroVignette{background:linear-gradient(90deg,rgba(3,7,9,.97) 0%,rgba(3,7,9,.85) 29%,rgba(3,7,9,.38) 55%,rgba(3,7,9,.08) 100%),linear-gradient(180deg,rgba(2,5,7,.02),rgba(3,8,10,.66) 100%)!important}

/* Medal rail: enough room for real achievements; +N is visibly a temporary decoder count. */
.approvedAwardsRail{min-height:72px!important;align-items:center!important}
.approvedAwardCount{height:50px!important;min-width:62px!important;font-size:21px!important;letter-spacing:.01em!important}

/* Team table was still the smallest text on the approved 1440p screenshots. */
.cinematicTeamColumns{font-size:10px!important;color:#89958f!important}
.cinematicTeamMembers .teamMember{height:48px!important;min-height:48px!important}
.cinematicTeamMembers .teamPlayer strong{font-size:15px!important;line-height:1.05!important}
.cinematicTeamMembers .teamVehicle{font-size:14px!important;color:#c9d0cd!important}
.cinematicTeamMembers .teamMetric b{font-size:15px!important;font-variant-numeric:tabular-nums!important}
.cinematicTeamMembers .teamTank img{max-width:50px!important;max-height:39px!important}

/* Personal contacts: clearer vehicle name and pills without increasing page height much. */
.cinematicInteractionGrid .interactionVehicle strong{font-size:17px!important}
.cinematicInteractionGrid .interactionVehicle small{font-size:12px!important}
.cinematicInteractionGrid .interactionNumbers b,.cinematicInteractionGrid .interactionNumbers span{font-size:12px!important}

/* Detailed report: stronger hierarchy, aligned numbers, less "spreadsheet tiny text" feel. */
.approvedPanelTitle h3{font-size:20px!important}
.approvedDetailRow{min-height:36px!important;grid-template-columns:minmax(0,1fr) 150px!important}
.approvedDetailRow>div>span{font-size:13.5px!important;color:#b8c2bd!important}
.approvedDetailRow>strong,.approvedDetailRow>strong .value{font-size:15px!important;font-variant-numeric:tabular-nums!important}
.approvedFinanceTotal strong{font-size:25px!important}
.approvedXpTotal strong{font-size:20px!important}

@media(max-width:1200px){
  .approvedReplayHero.lowResHero .approvedHeroTank{width:260px!important;height:220px!important;right:5%!important;top:150px!important}
  .cinematicTeamMembers .teamPlayer strong{font-size:13px!important}.cinematicTeamMembers .teamVehicle,.cinematicTeamMembers .teamMetric b{font-size:12px!important}
}


/* ================================================================
   v0.3.5.9 — HERO MEDALS POLISH
   ================================================================ */
/* The battle result must read first, then the award ribbon. The rail is intentionally
   denser than v0.3.5.8 and uses labels instead of a decoder +N counter. */
.approvedAwardsRail{
  position:relative!important;
  width:max-content!important;
  max-width:820px!important;
  min-height:100px!important;
  height:100px!important;
  margin-top:10px!important;
  gap:4px!important;
  align-items:flex-end!important;
  padding:6px 10px 4px 4px!important;
  isolation:isolate!important;
}
.approvedAwardsRail:before{
  content:"";position:absolute;z-index:-1;left:-16px;right:-18px;bottom:19px;height:48px;
  background:linear-gradient(90deg,rgba(70,46,19,.30),rgba(24,20,13,.18) 62%,transparent);
  border-bottom:1px solid rgba(232,184,73,.18);
  transform:skewX(-8deg);filter:blur(.1px);pointer-events:none;
}
.approvedAwardCount{display:none!important}
.approvedAward{
  width:66px!important;height:94px!important;display:flex!important;flex-direction:column!important;
  justify-content:flex-end!important;align-items:center!important;gap:2px!important;
  position:relative!important;overflow:visible!important;filter:none!important;
  transition:transform .18s ease,filter .18s ease!important;
}
.approvedAwardIcon{
  width:60px;height:66px;display:grid;place-items:center;position:relative;isolation:isolate;
  filter:drop-shadow(0 9px 8px rgba(0,0,0,.60));
}
.approvedAwardIcon:before{
  content:"";position:absolute;z-index:-1;width:54px;height:54px;border-radius:50%;
  background:radial-gradient(circle,rgba(229,188,89,.12),rgba(229,188,89,0) 70%);
  opacity:.42;pointer-events:none;
}
.approvedAward img{max-width:100%!important;max-height:100%!important;object-fit:contain!important}
.approvedAwardLabel{
  width:76px;min-height:19px;display:block;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#bbc3bf;font-family:var(--approved-font);font-size:11.5px;line-height:18px;font-weight:650;letter-spacing:.01em;
  text-shadow:0 2px 5px rgba(0,0,0,.82);
}
.approvedAward.mastery{width:82px!important;height:100px!important;margin-right:1px!important}
.approvedAward.mastery .approvedAwardIcon{width:78px;height:78px;filter:drop-shadow(0 9px 9px rgba(0,0,0,.62)) drop-shadow(0 0 9px rgba(232,184,73,.18))}
.approvedAward.mastery .approvedAwardLabel{width:86px;color:#f0d28a;font-size:11px}
.approvedAward.tier-epic .approvedAwardIcon{width:66px;height:70px;filter:drop-shadow(0 10px 9px rgba(0,0,0,.64)) drop-shadow(0 0 8px rgba(222,177,75,.18))}
.approvedAward.tier-epic .approvedAwardLabel{color:#d5d9d6;font-size:10.5px}
.approvedAward.tier-legendary{width:78px!important;margin:0 1px!important}
.approvedAward.tier-legendary .approvedAwardIcon{width:74px;height:76px;filter:drop-shadow(0 11px 9px rgba(0,0,0,.68)) drop-shadow(0 0 12px rgba(245,193,74,.42)) brightness(1.05)}
.approvedAward.tier-legendary .approvedAwardIcon:before{width:72px;height:72px;opacity:1;background:radial-gradient(circle,rgba(255,207,89,.30) 0%,rgba(232,176,55,.12) 44%,rgba(232,176,55,0) 73%)}
.approvedAward.tier-legendary .approvedAwardLabel{width:88px;color:#f0c969;font-size:12.5px;font-weight:760}
.approvedAward:hover{transform:translateY(-4px) scale(1.035)!important;filter:brightness(1.07)!important;z-index:7}
.approvedAward:hover .approvedAwardLabel{color:#fff}

/* Tank showcase: keep the sharp cutout at a safe size, but give it a larger cinematic
   presence through a blurred duplicate, warm rim light and a grounded shadow. */
.approvedTankStage{
  position:absolute;z-index:4;right:4.2%;top:74px;width:min(54%,850px);height:390px;
  display:grid;place-items:center;pointer-events:none;isolation:isolate;
}
.approvedTankStage:before{
  content:"";position:absolute;z-index:-3;width:78%;height:62%;right:5%;top:8%;border-radius:50%;
  background:radial-gradient(circle at 55% 48%,rgba(255,223,166,.18),rgba(255,218,146,.055) 43%,transparent 72%);
  filter:blur(8px);mix-blend-mode:screen;
}
.approvedTankStage:after{
  content:"";position:absolute;z-index:-2;left:15%;right:5%;bottom:31px;height:42px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.74),rgba(0,0,0,.26) 52%,transparent 74%);filter:blur(6px);
}
.approvedHeroTankGhost{
  position:absolute;z-index:-1;width:100%;height:100%;object-fit:contain;transform:scale(1.13);
  opacity:.20;filter:blur(16px) saturate(1.08) brightness(1.18);
}
.approvedTankStage .approvedHeroTank{
  position:relative!important;z-index:2!important;right:auto!important;top:auto!important;width:94%!important;height:94%!important;
  object-fit:contain!important;object-position:center!important;transform:none!important;
  filter:drop-shadow(0 34px 23px rgba(0,0,0,.70)) drop-shadow(0 0 2px rgba(255,241,210,.18)) contrast(1.045) saturate(1.04)!important;
}
.approvedReplayHero:hover .approvedTankStage .approvedHeroTank{transform:translateY(-2px) scale(1.012)!important;transition:transform .55s ease!important}
.approvedTankStage.compactSource{right:7%!important;top:104px!important;width:420px!important;height:310px!important}
.approvedTankStage.compactSource .approvedHeroTank{width:330px!important;height:250px!important}
.approvedTankStage.compactSource .approvedHeroTankGhost{width:420px!important;height:300px!important;opacity:.17!important;filter:blur(19px) saturate(1.05) brightness(1.12)!important}
.approvedReplayHero.lowResHero .approvedHeroTank{right:auto!important;top:auto!important}

/* Slightly stronger hierarchy around the result without changing the approved page geometry. */
.approvedHeroCopy h1{letter-spacing:-.022em!important;text-shadow:0 0 28px rgba(160,235,68,.43),0 5px 34px rgba(64,143,23,.28)!important}
.cinematic-loss .approvedHeroCopy h1{text-shadow:0 0 28px rgba(255,76,65,.34),0 5px 34px rgba(131,28,20,.28)!important}
.approvedHeroCopy>p{font-weight:620!important;letter-spacing:.035em!important}
.approvedHeroActions{gap:9px!important}.approvedAction{height:41px!important;padding:0 15px!important;background:linear-gradient(180deg,rgba(14,19,20,.76),rgba(8,12,13,.72))!important}

@media(max-width:1200px){
  .approvedAwardsRail{max-width:610px!important;gap:1px!important}.approvedAward{transform:scale(.94);transform-origin:center bottom;margin-left:-3px!important}.approvedAward:hover{transform:translateY(-3px) scale(.97)!important}
  .approvedTankStage{right:1%!important;width:52%!important}.approvedTankStage.compactSource{right:3%!important;width:360px!important}.approvedTankStage.compactSource .approvedHeroTank{width:290px!important}
}
@media(max-width:850px){
  .approvedAwardsRail{width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;justify-content:flex-start!important;padding-bottom:2px!important}
  .approvedAwardsRail:before{right:0}.approvedAward{flex:0 0 62px!important}.approvedAward.mastery{flex-basis:78px!important}.approvedAward.tier-legendary{flex-basis:72px!important}
  .approvedTankStage{top:282px!important;right:-4%!important;width:88%!important;height:300px!important}.approvedTankStage.compactSource{top:290px!important;right:1%!important;width:380px!important;height:270px!important}
}


/* ================================================================
   v0.3.5.10 — HERO MEDAL ORDER + KPI ICON CONTRAST
   ================================================================ */
/* No text under medals: the browser tooltip remains the only label surface. */
.approvedAwardsRail{
  min-height:84px!important;height:84px!important;margin-top:8px!important;
  gap:0!important;align-items:center!important;padding:2px 8px 2px 0!important;
}
.approvedAwardsRail:before{bottom:14px!important;height:48px!important}
.approvedAwardLabel{display:none!important}
.approvedAward{
  width:58px!important;height:78px!important;justify-content:center!important;gap:0!important;
  margin-right:-2px!important;flex:0 0 auto!important;
}
.approvedAwardIcon{width:58px!important;height:64px!important}
.approvedAward.mastery{width:76px!important;height:82px!important;margin-right:0!important}
.approvedAward.mastery .approvedAwardIcon{width:76px!important;height:76px!important}
.approvedAward.tier-marks{width:66px!important;height:80px!important;margin:0 -1px 0 1px!important}
.approvedAward.tier-epic{width:62px!important}
.approvedAward.tier-epic .approvedAwardIcon{width:64px!important;height:68px!important}
.approvedAward.tier-legendary{width:72px!important;height:82px!important;margin:0 -1px!important}
.approvedAward.tier-legendary .approvedAwardIcon{width:72px!important;height:76px!important}
.approvedAward.tier-trailing{width:54px!important;opacity:.88!important}
.approvedAward.tier-trailing .approvedAwardIcon{width:52px!important;height:58px!important;filter:drop-shadow(0 8px 7px rgba(0,0,0,.56))!important}
.approvedAward:hover{transform:translateY(-4px) scale(1.045)!important;opacity:1!important}

/* Marks of Excellence are rendered as a compact barrel-mark badge so they always
   sit directly after mastery without pretending to be a medal. */
.approvedMarkIcon{
  width:58px;height:58px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;gap:4px;
  background:radial-gradient(circle at 50% 38%,rgba(242,216,145,.24),rgba(37,31,20,.60) 58%,rgba(10,14,13,.22) 72%);
  border:1px solid rgba(232,190,92,.38);box-shadow:0 9px 12px rgba(0,0,0,.52),0 0 16px rgba(232,184,73,.14);
}
.approvedMarkIcon:before,.approvedMarkIcon:after{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid rgba(232,190,92,.17)}
.approvedMarkIcon:after{inset:13px;border-color:rgba(255,236,183,.09)}
.approvedMarkIcon i{display:block;width:6px;height:31px;border-radius:2px;transform:skewX(-17deg);background:linear-gradient(180deg,#f5e5b1,#d5aa4f 54%,#8a6226);box-shadow:0 0 5px rgba(255,218,120,.30)}

/* KPI icons were too dark in the approved dark glass cards. Give them a controlled
   luminous plate and explicit colors instead of inheriting muted green. */
.approvedHeroMetric>span{
  width:40px!important;height:40px!important;border-radius:50%!important;
  display:grid!important;place-items:center!important;
  background:radial-gradient(circle,rgba(169,229,27,.12),rgba(169,229,27,.025) 68%,transparent 70%)!important;
  border:1px solid rgba(169,229,27,.16)!important;
  color:#b9ed55!important;opacity:1!important;
  box-shadow:0 0 15px rgba(169,229,27,.055)!important;
}
.approvedHeroMetric>span>.uiMaskIcon{width:27px!important;height:27px!important;color:inherit!important;background:currentColor!important;border:0!important;border-radius:0!important;box-shadow:none!important;filter:drop-shadow(0 0 4px rgba(185,237,85,.22))!important}
.approvedHeroMetric:nth-child(4)>span{color:#e7bf55!important;background:radial-gradient(circle,rgba(231,191,85,.14),rgba(231,191,85,.025) 68%,transparent 70%)!important;border-color:rgba(231,191,85,.18)!important}
.approvedHeroMetric:nth-child(4)>span>.uiMaskIcon{filter:drop-shadow(0 0 4px rgba(231,191,85,.25))!important}

.approvedSubMetrics>div>span{
  width:34px!important;height:34px!important;border-radius:50%!important;display:grid!important;place-items:center!important;
  color:#9fbe6c!important;background:radial-gradient(circle,rgba(159,190,108,.095),rgba(159,190,108,.018) 70%)!important;
  border:1px solid rgba(159,190,108,.10)!important;opacity:1!important;
}
.approvedSubMetrics>div>span>.uiMaskIcon{width:23px!important;height:23px!important;color:inherit!important;background:currentColor!important;border:0!important;border-radius:0!important;box-shadow:none!important;filter:drop-shadow(0 0 3px rgba(159,190,108,.16))!important}
.approvedSubMetrics>div.danger>span{color:#e96d64!important;background:radial-gradient(circle,rgba(233,109,100,.10),rgba(233,109,100,.015) 70%)!important;border-color:rgba(233,109,100,.12)!important}

@media(max-width:1200px){
  .approvedAwardsRail{gap:0!important}.approvedAward{transform:scale(.95);transform-origin:center center;margin-left:-2px!important;margin-right:-3px!important}
  .approvedAward:hover{transform:translateY(-3px) scale(.98)!important}
}
@media(max-width:850px){
  .approvedAward{flex-basis:56px!important}.approvedAward.mastery{flex-basis:72px!important}.approvedAward.tier-legendary{flex-basis:68px!important}.approvedAward.tier-marks{flex-basis:62px!important}
}


/* ================================================================
   v0.3.5.11 — INTERACTION GRID POLISH + DETAIL ICON BOOST
   ================================================================ */

/* Make hero medals slightly larger again without bringing back captions. */
.approvedAwardsRail{
  min-height:92px!important;height:92px!important;gap:1px!important;padding:4px 10px 2px 0!important;
}
.approvedAwardsRail:before{bottom:16px!important;height:50px!important}
.approvedAward{width:62px!important;height:84px!important;margin-right:-1px!important}
.approvedAwardIcon{width:62px!important;height:68px!important}
.approvedAward.mastery{width:80px!important;height:86px!important}
.approvedAward.mastery .approvedAwardIcon{width:80px!important;height:80px!important}
.approvedAward.tier-marks{width:70px!important;height:84px!important}
.approvedAward.tier-epic{width:66px!important}
.approvedAward.tier-epic .approvedAwardIcon{width:68px!important;height:72px!important}
.approvedAward.tier-legendary{width:78px!important;height:88px!important}
.approvedAward.tier-legendary .approvedAwardIcon{width:78px!important;height:80px!important;filter:drop-shadow(0 12px 10px rgba(0,0,0,.70)) drop-shadow(0 0 14px rgba(245,193,74,.48)) brightness(1.08)!important}
.approvedAward.tier-trailing{width:56px!important}
.approvedAward.tier-trailing .approvedAwardIcon{width:54px!important;height:60px!important}
.approvedAward:hover{transform:translateY(-4px) scale(1.055)!important}

/* Stable all-targets layout: no expanding rows, always readable, ordered and dense. */
.cinematicInteractionGrid.stableAllTargets{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:none!important;
  grid-auto-flow:row!important;
  align-items:start!important;
  gap:10px 18px!important;
  padding:10px 18px 14px!important;
}
.cinematicInteractionGrid.stableAllTargets .effRowWrap{display:block!important}
.cinematicInteractionGrid.stableAllTargets .interactionRow{
  min-height:68px!important;height:auto!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:14px!important;padding:8px 12px!important;
  border:1px solid rgba(127,147,124,.12)!important;
  background:linear-gradient(180deg,rgba(10,14,13,.70),rgba(7,11,10,.92))!important;
  border-radius:4px!important;
}
.cinematicInteractionGrid.stableAllTargets .interactionVehicle{
  display:grid!important;grid-template-columns:90px minmax(120px,1fr)!important;gap:12px!important;align-items:center!important;min-width:0!important;
}
.cinematicInteractionGrid.stableAllTargets .interactionVehicle img{
  width:88px!important;height:54px!important;object-fit:contain!important;
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.72))!important;
}
.cinematicInteractionGrid.stableAllTargets .interactionVehicle strong{font-size:15px!important;color:#f1f4f2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.cinematicInteractionGrid.stableAllTargets .interactionVehicle small{font-size:11px!important;color:#8a9690!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.cinematicInteractionGrid.stableAllTargets .interactionNumbers{justify-content:flex-end!important;align-content:center!important;gap:7px!important;max-width:47%!important}
.cinematicInteractionGrid.stableAllTargets .interactionNumbers b,
.cinematicInteractionGrid.stableAllTargets .interactionNumbers span{
  height:30px!important;display:inline-flex!important;align-items:center!important;
  font-size:11px!important;padding:0 10px!important;border-radius:4px!important
}
.cinematicInteractionGrid.stableAllTargets + .cinematicMore,
.cinematicMore{display:none!important}

/* Detailed-report quick icons and panel icons need more presence on the dark glass background. */
.approvedDetailQuick>div{grid-template-columns:34px 1fr!important;padding:10px 14px!important}
.approvedDetailQuick span{
  width:28px!important;height:28px!important;border-radius:50%!important;display:grid!important;place-items:center!important;
  color:#b8e45a!important;background:radial-gradient(circle,rgba(169,229,27,.14),rgba(169,229,27,.03) 68%,transparent 70%)!important;
  border:1px solid rgba(169,229,27,.16)!important;box-shadow:0 0 14px rgba(169,229,27,.05)!important;
}
.approvedDetailQuick svg{width:23px!important;height:23px!important;stroke:currentColor!important;filter:drop-shadow(0 0 4px rgba(184,228,90,.18))!important}
.approvedPanelTitle>span,
.modernDetailHead>span{
  width:30px!important;height:30px!important;border-radius:50%!important;display:grid!important;place-items:center!important;
  color:#e7bf55!important;background:radial-gradient(circle,rgba(231,191,85,.14),rgba(231,191,85,.03) 70%,transparent 72%)!important;
  border:1px solid rgba(231,191,85,.16)!important;box-shadow:0 0 16px rgba(231,191,85,.05)!important;
}
.approvedPanelTitle svg,.modernDetailHead svg{width:24px!important;height:24px!important;stroke:currentColor!important;filter:drop-shadow(0 0 4px rgba(231,191,85,.16))!important}

/* Slightly stronger quick-strip icons for damage and kills in the detailed report. */
.approvedDetailQuick>div:nth-child(3) span,
.approvedDetailQuick>div:nth-child(4) span{color:#d9ef7b!important}

@media(max-width:1200px){
  .cinematicInteractionGrid.stableAllTargets{grid-template-columns:1fr!important;gap:8px!important}
  .cinematicInteractionGrid.stableAllTargets .interactionNumbers{max-width:none!important}
  .approvedAwardsRail{gap:0!important}
}
@media(max-width:850px){
  .approvedAwardsRail{min-height:86px!important;height:86px!important}
  .approvedAward{flex-basis:60px!important}.approvedAward.mastery{flex-basis:76px!important}.approvedAward.tier-legendary{flex-basis:74px!important}.approvedAward.tier-marks{flex-basis:68px!important}
  .cinematicInteractionGrid.stableAllTargets .interactionVehicle{grid-template-columns:76px minmax(110px,1fr)!important}
  .cinematicInteractionGrid.stableAllTargets .interactionVehicle img{width:74px!important;height:48px!important}
}


/* ================================================================
   v0.3.5.12 — VISUAL BALANCE + GRID ALIGN FIX
   ================================================================ */
/* Lift the lower report area out of pure black while preserving the dark WoT mood. */
html,body{background:#070c0e!important}
.cinematicReportShell{
  background:linear-gradient(180deg,#0a1012 0%,#080d0f 42%,#070c0e 100%)!important;
  border-top:1px solid rgba(205,224,214,.055)!important;
}
.cinematicTabs{
  background:linear-gradient(180deg,#0d1416,#0a1012)!important;
  border-bottom-color:rgba(214,230,221,.14)!important;
}
.cinematicTabs button{color:#aab5af!important}
.cinematicTabs button.active{background:linear-gradient(180deg,rgba(49,82,48,.62),rgba(18,29,22,.58))!important;color:#f4f7f5!important}
.cinematicEfficiency,.cinematicTeamsHeader,.cinematicTeam,.approvedReportPanel{
  background:linear-gradient(180deg,rgba(16,24,25,.985),rgba(10,16,18,.985))!important;
  border-color:rgba(211,228,218,.155)!important;
}
.cinematicSectionHeader,.approvedPanelTitle{
  background:linear-gradient(180deg,rgba(23,31,31,.95),rgba(13,20,21,.94))!important;
  border-bottom-color:rgba(214,230,221,.135)!important;
}
.cinematicSectionHeader h3,.approvedPanelTitle h3{color:#eef3f0!important}
.approvedDetailRow{border-bottom-color:rgba(215,231,222,.095)!important}
.approvedDetailRow>div>span{color:#c3cdc8!important}
.approvedDetailRow>strong,.approvedDetailRow>strong .value{color:#f4f6f5!important}

/* Personal result: perfectly deliberate two-column rhythm.
   Odd final target is centered on a full grid row instead of leaving a ragged left tail. */
.cinematicInteractionGrid.stableAllTargets{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px 14px!important;
  padding:12px 16px 16px!important;
  background:linear-gradient(180deg,rgba(12,18,20,.42),rgba(8,13,15,.18))!important;
}
.cinematicInteractionGrid.stableAllTargets .effRowWrap{min-width:0!important}
.cinematicInteractionGrid.stableAllTargets .effRowWrap:last-child:nth-child(odd){
  grid-column:1/-1!important;
  width:calc(50% - 7px)!important;
  justify-self:center!important;
}
.cinematicInteractionGrid.stableAllTargets .interactionRow{
  min-height:72px!important;
  height:72px!important;
  grid-template-columns:minmax(0,1fr) 230px!important;
  padding:7px 12px!important;
  border:1px solid rgba(215,232,222,.13)!important;
  background:linear-gradient(180deg,rgba(18,26,27,.91),rgba(10,16,18,.92))!important;
  box-shadow:0 6px 16px rgba(0,0,0,.10)!important;
}
.cinematicInteractionGrid.stableAllTargets .interactionRow:hover{
  border-color:rgba(169,229,27,.22)!important;
  background:linear-gradient(180deg,rgba(23,33,31,.96),rgba(12,19,19,.96))!important;
}
.cinematicInteractionGrid.stableAllTargets .interactionVehicle{
  grid-template-columns:92px minmax(0,1fr)!important;
  gap:12px!important;
}
.cinematicInteractionGrid.stableAllTargets .interactionVehicle img{width:90px!important;height:56px!important}
.cinematicInteractionGrid.stableAllTargets .interactionVehicle strong{font-size:15px!important;color:#f5f7f6!important}
.cinematicInteractionGrid.stableAllTargets .interactionVehicle small{font-size:11px!important;color:#9aa59f!important}
.cinematicInteractionGrid.stableAllTargets .interactionNumbers{
  width:230px!important;max-width:230px!important;
  justify-content:flex-end!important;display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
}
.cinematicInteractionGrid.stableAllTargets .interactionNumbers b,
.cinematicInteractionGrid.stableAllTargets .interactionNumbers span{
  width:100%!important;min-width:0!important;height:29px!important;
  justify-content:center!important;text-align:center!important;padding:0 8px!important;
}
/* A single pill should use the rightmost column, preserving the same visual alignment. */
.cinematicInteractionGrid.stableAllTargets .interactionNumbers>*:only-child{grid-column:2!important}

/* Remove the orphan square/empty compact sorter in the team header. Column headings still sort. */
.cinematicTeamsHeader.cleanTeamsHeader{justify-content:flex-start!important}
.cinematicTeamsHeader.cleanTeamsHeader .cinematicSortInline,
.cinematicTeamsHeader.cleanTeamsHeader .teamSortBar{display:none!important}

/* Brighter detail quick-icons; these were still visually too muted. */
.approvedDetailQuick{
  background:linear-gradient(180deg,rgba(15,23,24,.98),rgba(10,16,18,.98))!important;
  border-color:rgba(215,232,222,.16)!important;
}
.approvedDetailQuick>div{border-right-color:rgba(215,232,222,.12)!important}
.approvedDetailQuick span{
  width:31px!important;height:31px!important;
  color:#c4f05d!important;
  background:radial-gradient(circle,rgba(177,235,56,.18),rgba(177,235,56,.045) 66%,transparent 72%)!important;
  border-color:rgba(177,235,56,.22)!important;
  box-shadow:0 0 14px rgba(177,235,56,.08)!important;
}
.approvedDetailQuick span>.uiMaskIcon{width:24px!important;height:24px!important;filter:drop-shadow(0 0 4px rgba(196,240,93,.30))!important}
.approvedDetailQuick strong{color:#f7f9f8!important}
.approvedDetailQuick small{color:#9aa59f!important}
.approvedPanelTitle svg{filter:drop-shadow(0 0 5px rgba(171,226,62,.24))!important}
.approvedReportPanel.credits .approvedPanelTitle svg{filter:drop-shadow(0 0 5px rgba(229,190,70,.24))!important}
.approvedReportPanel.xp .approvedPanelTitle svg{filter:drop-shadow(0 0 5px rgba(234,188,74,.26))!important}

/* Medal rail: one final size lift, still tooltip-only and compact. */
.approvedAwardsRail{height:98px!important;min-height:98px!important;gap:1px!important}
.approvedAward{width:66px!important;height:90px!important}
.approvedAwardIcon{width:66px!important;height:72px!important}
.approvedAward.mastery{width:86px!important;height:92px!important}
.approvedAward.mastery .approvedAwardIcon{width:86px!important;height:86px!important}
.approvedAward.tier-marks{width:74px!important;height:90px!important}
.approvedAward.tier-epic{width:70px!important}
.approvedAward.tier-epic .approvedAwardIcon{width:72px!important;height:76px!important}
.approvedAward.tier-legendary{width:82px!important;height:94px!important}
.approvedAward.tier-legendary .approvedAwardIcon{width:82px!important;height:84px!important}
.approvedAward.tier-trailing{width:58px!important}
.approvedAward.tier-trailing .approvedAwardIcon{width:56px!important;height:62px!important}

/* Teams readability: slightly lighter row separators and text. */
.cinematicTeamColumns{color:#99a49e!important;border-color:rgba(215,231,222,.10)!important}
.cinematicTeamMembers .teamMember{border-bottom-color:rgba(215,231,222,.075)!important}
.cinematicTeamMembers .teamPlayer strong{color:#f1f4f2!important}
.cinematicTeamMembers .teamVehicle{color:#d0d7d3!important}

@media(max-width:1200px){
  .cinematicInteractionGrid.stableAllTargets{grid-template-columns:1fr!important}
  .cinematicInteractionGrid.stableAllTargets .effRowWrap:last-child:nth-child(odd){grid-column:auto!important;width:100%!important}
  .cinematicInteractionGrid.stableAllTargets .interactionRow{grid-template-columns:minmax(0,1fr) 210px!important}
  .cinematicInteractionGrid.stableAllTargets .interactionNumbers{width:210px!important;max-width:210px!important}
}
@media(max-width:760px){
  .cinematicInteractionGrid.stableAllTargets .interactionRow{height:auto!important;min-height:78px!important;grid-template-columns:1fr!important}
  .cinematicInteractionGrid.stableAllTargets .interactionNumbers{width:100%!important;max-width:none!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .cinematicInteractionGrid.stableAllTargets .interactionNumbers>*:only-child{grid-column:auto!important}
}


/* ================================================================
   v0.3.5.13 — REPORT UX + TEAM SURVIVAL + NATIONAL MARKS
   ================================================================ */

/* One visual column system for all three report tabs. The report body now aligns
   with the hero's inner KPI edges instead of stretching wider than the content above. */
.cinematicReportShell{
  width:calc(100% - 112px)!important;
  margin:14px auto 0!important;
  border-left:1px solid rgba(215,232,222,.07)!important;
  border-right:1px solid rgba(215,232,222,.07)!important;
}
.cinematicReportContent{width:100%!important;box-sizing:border-box!important}
.cinematicTabs{width:100%!important;box-sizing:border-box!important}
.reportPane{width:100%!important;box-sizing:border-box!important}

/* Personal tab stays the clean two-column interaction grid from v0.3.5.12. */
.cinematicEfficiency{width:100%!important;box-sizing:border-box!important}

/* TEAM TAB — larger typography, denser hierarchy, instant alive/destroyed reading. */
.cinematicTeamsHeader{height:72px!important;padding:0 20px!important}
.cinematicTeamsHeader h3{font-size:20px!important;letter-spacing:.012em!important}
.cinematicTeamsGrid{gap:12px!important;margin-top:12px!important}
.cinematicTeamHead{height:78px!important;padding:11px 16px!important}
.cinematicTeamHead small{font-size:11px!important;letter-spacing:.05em!important}
.cinematicTeamHead strong{font-size:24px!important}
.cinematicTeamTotals b{font-size:23px!important}.cinematicTeamTotals b small{font-size:8px!important}
.cinematicTeamColumns{
  height:36px!important;font-size:10.5px!important;font-weight:650!important;
  grid-template-columns:58px minmax(180px,1.5fr) minmax(165px,1.08fr) 82px 76px 80px!important;
  padding:0 11px!important;color:#aab5af!important
}
.cinematicTeamMembers .teamMember{
  height:54px!important;min-height:54px!important;
  grid-template-columns:58px minmax(180px,1.5fr) minmax(165px,1.08fr) 82px 76px 80px!important;
  gap:7px!important;padding:3px 11px!important;
  border-bottom:1px solid rgba(215,231,222,.09)!important;
  transition:background .16s ease,filter .16s ease!important;
}
.cinematicTeamMembers .teamTank{width:56px!important;height:46px!important}
.cinematicTeamMembers .teamTank img{max-width:56px!important;max-height:43px!important}
.cinematicTeamMembers .teamPlayer strong{font-size:16.5px!important;line-height:1.08!important;font-weight:680!important;letter-spacing:.003em!important}
.cinematicTeamMembers .teamPlayer strong span{font-size:10px!important;color:#93a09a!important}
.cinematicTeamMembers .teamVehicle{
  min-width:0!important;display:flex!important;align-items:center!important;gap:7px!important;
  font-size:15.5px!important;color:#d9dfdc!important;white-space:nowrap!important;overflow:hidden!important
}
.teamVehicleName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cinematicTeamMembers .teamMetric b{font-size:16px!important;font-weight:720!important;color:#f5f7f6!important;font-variant-numeric:tabular-nums!important}
.teamLifeChip{
  height:18px;min-width:34px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:3px;font-family:var(--approved-font);font-size:7.5px;font-weight:800;letter-spacing:.045em;
  flex:0 0 auto;border:1px solid transparent;text-transform:uppercase
}
.teamLifeChip.survived{color:#c8f27a;background:rgba(93,147,47,.16);border-color:rgba(143,205,72,.28)}
.teamLifeChip.destroyed{color:#ff9a92;background:rgba(154,60,54,.16);border-color:rgba(221,92,82,.26)}
.teamLifeChip.lifeUnknown{display:none}
.cinematicTeamMembers .teamMember.survived{
  background:linear-gradient(90deg,rgba(70,112,48,.105),rgba(29,50,35,.035) 52%,rgba(13,19,20,.02))!important;
}
.cinematicTeamMembers .teamMember.destroyed{
  background:linear-gradient(90deg,rgba(118,47,43,.105),rgba(60,28,27,.035) 52%,rgba(13,19,20,.02))!important;
}
.cinematicTeamMembers .teamMember.destroyed .teamTank img{filter:grayscale(.35) brightness(.80) contrast(1.04) drop-shadow(0 5px 5px rgba(0,0,0,.75))!important;opacity:.84!important}
.cinematicTeamMembers .teamMember.destroyed .teamPlayer strong{color:#d7d0ce!important}
.cinematicTeamMembers .teamMember.survived .teamPlayer strong{color:#f4f8f3!important}
.cinematicTeamMembers .teamMember.owner{box-shadow:inset 4px 0 0 var(--approved-green)!important}
.cinematicTeamMembers .teamMember.owner.survived{background:linear-gradient(90deg,rgba(123,181,55,.18),rgba(56,91,42,.06) 55%,rgba(13,19,20,.02))!important}
.cinematicTeamMembers .teamMember:hover{filter:brightness(1.08)!important}

/* DETAIL TAB — restore semantic color. v0.3.5.12's readability rule was too
   strong and turned all values white. These selectors intentionally win. */
.approvedReportPanel.stats{border-top:2px solid rgba(169,229,27,.42)!important}
.approvedReportPanel.credits{border-top:2px solid rgba(229,182,62,.42)!important}
.approvedReportPanel.xp{border-top:2px solid rgba(229,182,62,.38)!important}
.approvedDetailRow>strong .value.positive{color:#aee83c!important;text-shadow:0 0 10px rgba(174,232,60,.08)!important}
.approvedDetailRow>strong .value.negative{color:#ff7169!important;text-shadow:0 0 10px rgba(255,113,105,.07)!important}
.approvedDetailRow>strong .value.accent{color:#c9ef69!important}
.approvedDetailRow>strong .value.gold{color:#efbd4d!important}
.approvedDetailRow>strong .value.neutral{color:#f3f6f4!important}
.approvedReportPanel.credits .approvedDetailRow>strong .value.positive{color:#aee83c!important}
.approvedReportPanel.credits .approvedDetailRow>strong .value.negative{color:#ff6d65!important}
.approvedFinanceTotal{background:linear-gradient(90deg,rgba(108,151,43,.11),rgba(22,35,25,.45))!important;border-color:rgba(151,205,64,.20)!important}
.approvedFinanceTotal .value.positive{color:#b5ee45!important}
.approvedFinanceTotal .value.negative{color:#ff756d!important}
.approvedXpTotal{background:linear-gradient(90deg,rgba(108,88,34,.12),rgba(39,30,18,.42))!important;border-color:rgba(229,182,62,.21)!important}
.approvedXpTotal strong{color:#f2f4f3!important}.approvedXpTotal .premiumXp{color:#efbd4d!important}
.approvedXpFoot .approvedDetailRow>strong .value{color:#e8ecea!important}
.approvedDetailQuick>div:nth-child(3) strong,.approvedDetailQuick>div:nth-child(4) strong{color:#c8ef6b!important}
.approvedDetailQuick>div:nth-child(6) strong,.approvedDetailQuick>div:nth-child(7) strong{color:#d8e4dd!important}

/* NATIONAL MARKS OF EXCELLENCE — redrawn per nation from the supplied reference.
   Count 1/2/3 is a real repeated national motif, not the old generic bars. */
.approvedAward.tier-marks.nationalMark{width:82px!important;height:94px!important;margin:0 1px!important}
.approvedAward.tier-marks.nationalMark .approvedMarkIcon.national{
  width:82px!important;height:72px!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;
  display:grid!important;place-items:center!important;overflow:visible!important
}
.approvedAward.tier-marks.nationalMark .approvedMarkIcon.national:before,
.approvedAward.tier-marks.nationalMark .approvedMarkIcon.national:after{display:none!important}
.nationalMarksAsset{width:82px!important;height:64px!important;object-fit:contain!important;filter:drop-shadow(0 10px 9px rgba(0,0,0,.66)) drop-shadow(0 0 8px rgba(229,184,75,.16))!important}
.approvedAward.tier-marks.nationalMark:hover .nationalMarksAsset{filter:drop-shadow(0 12px 10px rgba(0,0,0,.70)) drop-shadow(0 0 12px rgba(229,184,75,.28)) brightness(1.06)!important}

@media(max-width:1250px){
  .cinematicReportShell{width:calc(100% - 32px)!important}
  .cinematicTeamColumns,.cinematicTeamMembers .teamMember{grid-template-columns:52px minmax(140px,1.4fr) minmax(125px,1fr) 72px 66px 70px!important}
  .cinematicTeamMembers .teamPlayer strong{font-size:14px!important}.cinematicTeamMembers .teamVehicle{font-size:13px!important}.cinematicTeamMembers .teamMetric b{font-size:14px!important}
  .teamLifeChip{display:none!important}
}
@media(max-width:850px){
  .cinematicReportShell{width:100%!important;margin-top:10px!important;border-left:0!important;border-right:0!important}
  .approvedAward.tier-marks.nationalMark{flex-basis:76px!important}
  .cinematicTeamColumns,.cinematicTeamMembers .teamMember{grid-template-columns:48px minmax(120px,1.45fr) minmax(100px,1fr) 64px 58px!important}
  .cinematicTeamColumns button:last-child,.cinematicTeamMembers .xpMetric{display:none!important}
}


/* ================================================================
   v0.3.5.14 — HERO TANK RENDER
   Stronger cinematic tank stage: larger render, layered shadow/glow,
   class-aware placement and a cleaner premium integration into the hero.
   ================================================================ */
.approvedReplayHero.hdHeroRender .approvedHeroVignette{
  background:linear-gradient(90deg,rgba(3,8,10,.97) 0%,rgba(3,8,10,.87) 24%,rgba(4,9,11,.42) 49%,rgba(4,8,9,.12) 70%,rgba(4,8,9,.24) 100%),linear-gradient(180deg,rgba(3,6,7,.05),rgba(3,6,7,.00) 56%,rgba(4,8,10,.80) 100%)!important;
}
.approvedReplayHero.hdHeroRender .approvedHeroGlow{
  background:radial-gradient(circle at 18% 43%,rgba(108,219,42,.16),transparent 24%),radial-gradient(circle at 79% 24%,rgba(255,221,153,.18),transparent 22%),radial-gradient(circle at 84% 50%,rgba(255,235,182,.07),transparent 30%)!important;
}
.cinematic-loss.approvedReplayHero.hdHeroRender .approvedHeroGlow{background:radial-gradient(circle at 18% 43%,rgba(255,79,67,.14),transparent 24%),radial-gradient(circle at 80% 24%,rgba(255,198,136,.16),transparent 22%),radial-gradient(circle at 84% 50%,rgba(255,205,165,.06),transparent 30%)!important}
.cinematic-draw.approvedReplayHero.hdHeroRender .approvedHeroGlow{background:radial-gradient(circle at 18% 43%,rgba(236,179,67,.12),transparent 24%),radial-gradient(circle at 80% 24%,rgba(255,212,135,.16),transparent 22%),radial-gradient(circle at 84% 50%,rgba(255,225,168,.06),transparent 30%)!important}

.approvedTankStage{
  position:absolute!important;z-index:6!important;right:var(--hero-stage-right,3.2%)!important;top:var(--hero-stage-top,70px)!important;
  width:var(--hero-stage-width,min(56%,880px))!important;height:var(--hero-stage-height,418px)!important;
  display:grid!important;place-items:center!important;pointer-events:none!important;isolation:isolate!important;
}
.approvedTankStage:before{
  content:"";position:absolute;z-index:-4;width:var(--hero-stage-halo-width,78%);height:var(--hero-stage-halo-height,64%);right:4%;top:7%;border-radius:50%;
  background:radial-gradient(circle at 55% 48%,rgba(255,227,173,.24),rgba(255,222,160,.10) 36%,rgba(255,219,146,.045) 58%,transparent 75%);
  filter:blur(12px);mix-blend-mode:screen;
}
.approvedTankStage:after{
  content:"";position:absolute;z-index:-2;left:var(--hero-stage-shadow-left,10%);width:var(--hero-stage-shadow-width,82%);bottom:var(--hero-stage-shadow-bottom,34px);height:var(--hero-stage-shadow-height,52px);border-radius:50%;opacity:var(--hero-contact-shadow-opacity,.86);
  background:radial-gradient(ellipse at center,rgba(0,0,0,.88) 0%,rgba(0,0,0,.52) 44%,rgba(0,0,0,.18) 67%,transparent 80%);filter:blur(12px);
}
.approvedTankBackdrop{
  position:absolute;z-index:-3;inset:11% 8% 13% 10%;border-radius:30px;opacity:var(--hero-backdrop-opacity,.92);
  background:linear-gradient(180deg,rgba(18,23,24,.30),rgba(9,13,15,.18)),radial-gradient(circle at 63% 44%,rgba(255,221,150,.12),rgba(255,221,150,.04) 42%,transparent 70%),linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.01) 38%,rgba(0,0,0,.16) 100%);
  border:1px solid rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 22px 34px rgba(0,0,0,.22);backdrop-filter:blur(3px);
}
.approvedTankSweep{
  position:absolute;z-index:-1;right:11%;top:11%;width:38%;height:64%;border-radius:50%;opacity:var(--hero-sweep-opacity,.16);
  background:linear-gradient(125deg,rgba(255,255,255,.00) 0%,rgba(255,245,214,.36) 40%,rgba(255,233,176,.08) 62%,rgba(255,255,255,0) 100%);
  filter:blur(18px);mix-blend-mode:screen;transform:skewX(-18deg) rotate(-8deg);
}
.approvedTankDeck{
  position:absolute;z-index:-1;left:var(--hero-deck-left,14%);right:var(--hero-deck-right,8%);bottom:var(--hero-deck-bottom,18px);height:var(--hero-deck-height,65px);border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,220,136,.12),rgba(255,220,136,.045) 34%,rgba(0,0,0,.22) 62%,transparent 78%);filter:blur(10px);
}
.approvedHeroTankGhost{
  position:absolute!important;z-index:0!important;width:var(--hero-tank-width,96%)!important;height:var(--hero-tank-height,96%)!important;object-fit:contain!important;
  transform:scale(var(--hero-ghost-scale,1.15))!important;opacity:.18!important;filter:blur(18px) saturate(1.12) brightness(1.16)!important;
}
.approvedHeroTankRim{
  position:absolute!important;z-index:1!important;width:var(--hero-tank-width,96%)!important;height:var(--hero-tank-height,96%)!important;object-fit:contain!important;object-position:center!important;
  opacity:var(--hero-rim-opacity,.22)!important;mix-blend-mode:screen!important;transform:translate(-0.9%,-1.1%) scale(calc(var(--hero-tank-scale,1) + .02))!important;
  filter:brightness(1.18) saturate(1.08) contrast(1.04) blur(.3px) drop-shadow(0 0 10px rgba(255,229,180,.12))!important;
}
.approvedTankStage .approvedHeroTank{
  position:relative!important;z-index:2!important;right:auto!important;top:auto!important;width:var(--hero-tank-width,96%)!important;height:var(--hero-tank-height,96%)!important;
  object-fit:contain!important;object-position:center!important;transform:scale(var(--hero-tank-scale,1))!important;
  filter:drop-shadow(0 40px 28px rgba(0,0,0,.76)) drop-shadow(0 10px 16px rgba(0,0,0,.34)) drop-shadow(0 0 2px rgba(255,241,210,.17)) contrast(1.055) saturate(1.05) brightness(1.02)!important;
}
.approvedReplayHero:hover .approvedTankStage .approvedHeroTank{transform:translateY(-3px) scale(calc(var(--hero-tank-scale,1) + .016))!important;transition:transform .55s ease!important}
.approvedReplayHero:hover .approvedTankStage .approvedHeroTankRim{transform:translate(-1.0%,-1.4%) scale(calc(var(--hero-tank-scale,1) + .034))!important;transition:transform .55s ease!important}
.approvedTankStage.role-td .approvedTankBackdrop{inset:9% 5% 12% 7%!important}
.approvedTankStage.role-light .approvedTankBackdrop{inset:13% 10% 15% 13%!important}
.approvedTankStage.long-gun .approvedHeroTank{transform:translateX(-1.2%) scale(var(--hero-tank-scale,1))!important}
.approvedTankStage.long-gun .approvedHeroTankRim{transform:translate(-1.8%,-1.1%) scale(calc(var(--hero-tank-scale,1) + .02))!important}
.approvedTankStage.heavy-silhouette .approvedHeroTank{transform:translateX(1.1%) scale(calc(var(--hero-tank-scale,1) + .012))!important}
.approvedTankStage.heavy-silhouette .approvedHeroTankRim{transform:translate(0.1%,-1.1%) scale(calc(var(--hero-tank-scale,1) + .03))!important}
.approvedTankStage.compactSource{width:var(--hero-stage-width,410px)!important;height:var(--hero-stage-height,308px)!important}
.approvedTankStage.compactSource .approvedTankBackdrop{inset:14% 11% 16% 13%!important;border-radius:24px!important}
.approvedTankStage.compactSource .approvedHeroTankGhost{opacity:.15!important;filter:blur(16px) saturate(1.08) brightness(1.12)!important}
.approvedTankStage.compactSource .approvedHeroTank{filter:drop-shadow(0 30px 22px rgba(0,0,0,.74)) drop-shadow(0 0 2px rgba(255,241,210,.12)) contrast(1.04) saturate(1.04) brightness(1.01)!important}

@media(max-width:1200px){
  .approvedTankStage{--hero-stage-right:1.5%!important;--hero-stage-width:min(54%,820px)!important;--hero-stage-height:390px!important}
  .approvedTankStage.role-td{--hero-stage-right:0.6%!important;--hero-stage-width:min(57%,880px)!important}
  .approvedTankStage.compactSource{--hero-stage-right:2.4%!important;--hero-stage-width:360px!important;--hero-stage-height:280px!important}
}
@media(max-width:850px){
  .approvedTankStage{top:282px!important;right:-2%!important;width:88%!important;height:300px!important}
  .approvedTankStage .approvedTankBackdrop{inset:15% 11% 18% 14%!important}
  .approvedTankStage.compactSource{top:290px!important;right:1%!important;width:360px!important;height:260px!important}
  .approvedHeroTankRim{opacity:.16!important}
}


/* v0.3.5.15 — HERO TANK CLEANUP + NATIONAL MARKS */
.approvedReplayHero.hdHeroRender .approvedHeroCopy{width:640px!important}
.approvedTankStage.fullSource{
  overflow:visible!important;
}
.approvedTankStage.hasHeroAsset .approvedTankBackdrop{
  background:
    radial-gradient(circle at 58% 42%, rgba(255,229,176,.16) 0%, rgba(255,229,176,.04) 28%, rgba(255,229,176,0) 56%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    linear-gradient(180deg, rgba(19,27,31,.76), rgba(8,13,15,.56));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 28px 60px rgba(0,0,0,.28);
}
.approvedTankStage.cleanCutout .approvedHeroTank{
  filter:drop-shadow(0 30px 24px rgba(0,0,0,.76)) drop-shadow(0 0 3px rgba(255,236,196,.16)) contrast(1.05) saturate(1.04) brightness(1.015)!important;
}
.approvedTankStage.cleanCutout .approvedHeroTankRim{
  opacity:calc(var(--hero-rim-opacity,.22) + .04)!important;
}
.approvedTankStage.quality-low .approvedTankBackdrop{
  background:linear-gradient(180deg, rgba(18,25,28,.74), rgba(8,13,15,.54))!important;
}
.approvedTankStage.quality-low .approvedHeroTank{
  opacity:.98!important;
}
.approvedTankStage .approvedTankDeck{
  background:radial-gradient(ellipse at center, rgba(0,0,0,.44) 0%, rgba(0,0,0,.20) 46%, rgba(0,0,0,0) 78%)!important;
}
.approvedAwardsRail{
  gap:2px!important;
}
.approvedAward.tier-marks.nationalMark{width:86px!important;height:96px!important;margin:0 1px!important}
.approvedAward.tier-marks.nationalMark .approvedMarkIcon.national{width:86px!important;height:70px!important}
.nationalMarksAsset{width:86px!important;height:66px!important;object-fit:contain!important;filter:drop-shadow(0 10px 9px rgba(0,0,0,.68)) drop-shadow(0 0 10px rgba(229,184,75,.24)) brightness(1.03)!important}
.approvedAward.tier-marks.nationalMark:hover .nationalMarksAsset{filter:drop-shadow(0 12px 10px rgba(0,0,0,.70)) drop-shadow(0 0 13px rgba(229,184,75,.32)) brightness(1.08)!important}
.approvedAward.marksOnGun.genericMark .approvedMarkIcon{background:linear-gradient(180deg, rgba(55,66,80,.88), rgba(29,38,47,.90)); border:1px solid rgba(255,255,255,.10)}
.approvedReplayHero.lowResHero .approvedAward.tier-marks.nationalMark{width:76px!important;height:86px!important}
.approvedReplayHero.lowResHero .nationalMarksAsset{width:76px!important;height:58px!important}


/* ================================================================
   v0.3.5.16 — REAL CLIENT GUN MARKS ONLY
   ================================================================ */
.approvedAward.marksOnGun.genericMark,.approvedAward.marksOnGun.nationalMark{display:none!important}
.approvedAward.tier-marks.realClientMark{width:92px!important;height:94px!important;margin:0 2px!important;display:grid!important;place-items:center!important}
.realGunMarksRow{width:90px;height:70px;display:flex;align-items:center;justify-content:center;gap:3px;position:relative}
.realGunMarksRow:before{content:"";position:absolute;inset:10px 2px;border-radius:50%;background:radial-gradient(ellipse,rgba(229,184,75,.13),rgba(229,184,75,0) 72%);filter:blur(4px)}
.realGunMarkGlyph{position:relative;z-index:1;max-width:29px!important;max-height:62px!important;width:auto!important;height:auto!important;object-fit:contain!important;filter:drop-shadow(0 8px 7px rgba(0,0,0,.68)) drop-shadow(0 0 7px rgba(229,184,75,.18))!important}
.approvedAward.tier-marks.realClientMark:hover .realGunMarkGlyph{filter:drop-shadow(0 10px 8px rgba(0,0,0,.72)) drop-shadow(0 0 10px rgba(229,184,75,.30)) brightness(1.06)!important}
@media(max-width:850px){.approvedAward.tier-marks.realClientMark{flex-basis:84px!important}.realGunMarksRow{width:82px!important}.realGunMarkGlyph{max-width:26px!important;max-height:56px!important}}


/* ================================================================
   v0.3.5.17 — EXACT REAL CLIENT GUN MARK LEVELS
   One original 440x440 client PNG for each nation + count.
   ================================================================ */
.approvedAward.tier-marks.realClientMark{width:96px!important;height:96px!important;margin:0 1px!important}
.realGunMarksRow{width:94px!important;height:76px!important;display:grid!important;place-items:center!important;position:relative!important;overflow:visible!important}
.realGunMarksRow:before{inset:8px 0!important;background:radial-gradient(ellipse,rgba(229,184,75,.14),rgba(229,184,75,0) 72%)!important}
.realGunMarkGlyph{display:none!important}
.realGunMarkComposite{position:relative!important;z-index:1!important;width:92px!important;height:72px!important;max-width:92px!important;max-height:72px!important;object-fit:contain!important;filter:drop-shadow(0 9px 8px rgba(0,0,0,.68)) drop-shadow(0 0 8px rgba(229,184,75,.20))!important}
.approvedAward.tier-marks.realClientMark:hover .realGunMarkComposite{filter:drop-shadow(0 11px 9px rgba(0,0,0,.72)) drop-shadow(0 0 11px rgba(229,184,75,.31)) brightness(1.06)!important}
@media(max-width:850px){.approvedAward.tier-marks.realClientMark{flex-basis:86px!important}.realGunMarksRow{width:84px!important}.realGunMarkComposite{width:82px!important;height:64px!important;max-width:82px!important;max-height:64px!important}}

/* ================================================================
   v0.3.5.21 — HERO FRAMING POLISH
   tanks.gg camera PNGs get a cleaner, larger transparent hero stage.
   ================================================================ */
.approvedTankStage.tanksggCapture .approvedTankBackdrop{
  opacity:var(--hero-backdrop-opacity,.28)!important;
  inset:10% 6% 12% 8%!important;
  border:0!important;
  background:
    radial-gradient(circle at 58% 45%,rgba(255,225,169,.16),rgba(255,225,169,.035) 38%,transparent 70%),
    radial-gradient(circle at 55% 56%,rgba(17,27,31,.34),rgba(5,10,12,.10) 52%,transparent 76%)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.approvedTankStage.tanksggCapture:before{
  opacity:.72!important;
  filter:blur(18px)!important;
}
.approvedTankStage.tanksggCapture:after{
  left:var(--hero-stage-shadow-left,18%)!important;width:var(--hero-stage-shadow-width,68%)!important;bottom:var(--hero-stage-shadow-bottom,170px)!important;height:var(--hero-stage-shadow-height,62px)!important;opacity:var(--hero-contact-shadow-opacity,.94)!important;filter:blur(12px)!important;
}
.approvedTankStage.tanksggCapture .approvedTankSweep{opacity:.08!important;filter:blur(22px)!important}
.approvedTankStage.tanksggCapture .approvedTankDeck{
  left:var(--hero-deck-left,13%)!important;right:var(--hero-deck-right,8%)!important;bottom:var(--hero-deck-bottom,146px)!important;height:var(--hero-deck-height,78px)!important;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.56),rgba(0,0,0,.22) 50%,transparent 78%)!important;
}
.approvedTankStage.tanksggCapture .approvedHeroTankGhost{
  opacity:.12!important;
  transform:translate(calc(var(--hero-tank-x,0%) + var(--hero-tank-x-adjust,0%)),calc(var(--hero-tank-y,0%) + var(--hero-tank-y-adjust,0%))) scale(var(--hero-ghost-scale,1.12))!important;
  filter:blur(22px) saturate(1.08) brightness(1.10)!important;
}
.approvedTankStage.tanksggCapture .approvedHeroTankRim{
  opacity:var(--hero-rim-opacity,.19)!important;
  transform:translate(calc(var(--hero-tank-x,0%) + var(--hero-tank-x-adjust,0%) - .7%),calc(var(--hero-tank-y,0%) + var(--hero-tank-y-adjust,0%) - .9%)) scale(calc(var(--hero-tank-scale,1.055) + .018))!important;
  filter:brightness(1.15) saturate(1.04) contrast(1.03) blur(.25px) drop-shadow(0 0 9px rgba(255,229,180,.10))!important;
}
.approvedTankStage.tanksggCapture .approvedHeroTank{
  object-position:center!important;
  transform:translate(calc(var(--hero-tank-x,0%) + var(--hero-tank-x-adjust,0%)),calc(var(--hero-tank-y,0%) + var(--hero-tank-y-adjust,0%))) scale(var(--hero-tank-scale,1.055))!important;
  filter:drop-shadow(0 42px 28px rgba(0,0,0,.78)) drop-shadow(0 12px 16px rgba(0,0,0,.36)) drop-shadow(0 0 2px rgba(255,241,210,.14)) contrast(1.045) saturate(1.035) brightness(1.015)!important;
}
.approvedReplayHero:hover .approvedTankStage.tanksggCapture .approvedHeroTank{
  transform:translate(calc(var(--hero-tank-x,0%) + var(--hero-tank-x-adjust,0%)),calc(var(--hero-tank-y,0%) + var(--hero-tank-y-adjust,0%) - 3px)) scale(calc(var(--hero-tank-scale,1.055) + .012))!important;
}
.approvedTankStage.tanksggCapture.long-gun .approvedHeroTank,
.approvedTankStage.tanksggCapture.heavy-silhouette .approvedHeroTank{
  transform:translate(calc(var(--hero-tank-x,0%) + var(--hero-tank-x-adjust,0%)),calc(var(--hero-tank-y,0%) + var(--hero-tank-y-adjust,0%))) scale(var(--hero-tank-scale,1.055))!important;
}
.approvedTankStage.tanksggCapture.long-gun .approvedHeroTankRim,
.approvedTankStage.tanksggCapture.heavy-silhouette .approvedHeroTankRim{
  transform:translate(calc(var(--hero-tank-x,0%) + var(--hero-tank-x-adjust,0%) - .7%),calc(var(--hero-tank-y,0%) + var(--hero-tank-y-adjust,0%) - .9%)) scale(calc(var(--hero-tank-scale,1.055) + .018))!important;
}
.approvedReplayHero:has(.approvedTankStage.tanksggCapture) .approvedHeroGlow{
  background:radial-gradient(circle at 18% 43%,rgba(108,219,42,.15),transparent 24%),radial-gradient(circle at 78% 33%,rgba(255,222,161,.13),transparent 26%)!important;
}
@media(max-width:1200px){
  .approvedTankStage.tanksggCapture{--hero-stage-width:min(58%,880px)!important;--hero-stage-height:410px!important;--hero-stage-right:0%!important}
  .approvedTankStage.tanksggCapture.role-td{--hero-stage-width:min(61%,930px)!important}
}
@media(max-width:850px){
  .approvedTankStage.tanksggCapture{top:270px!important;right:-3%!important;width:92%!important;height:315px!important}
  .approvedTankStage.tanksggCapture .approvedTankBackdrop{inset:15% 10% 18% 13%!important}
}


/* ================================================================
   v0.3.5.34 — HERO BASELINE + CONTACT SHADOW
   Lift tanks.gg hero PNGs onto a visible baseline above the KPI blocks.
   ================================================================ */
.approvedTankStage.tanksggCapture{
  overflow:visible!important;
}
.approvedTankStage.tanksggCapture:after{
  box-shadow:0 22px 40px rgba(0,0,0,.16)!important;
}
.approvedTankStage.tanksggCapture .approvedTankDeck{
  background:radial-gradient(ellipse at center,rgba(255,227,171,.12),rgba(255,227,171,.04) 34%,rgba(0,0,0,.26) 64%,transparent 80%)!important;
  filter:blur(12px)!important;
}
.approvedTankStage.tanksggCapture .approvedHeroTank{
  will-change:transform!important;
}
@media(min-width:1201px){
  .approvedTankStage.tanksggCapture{
    --hero-stage-top:-8px!important;
    --hero-stage-right:-5.2%!important;
    --hero-stage-width:min(84%,1360px)!important;
    --hero-stage-height:610px!important;
  }
  .approvedTankStage.tanksggCapture.role-td{
    --hero-stage-width:min(89%,1440px)!important;
    --hero-stage-height:632px!important;
    --hero-stage-right:-7.1%!important;
    --hero-stage-top:-18px!important;
  }
}
@media(min-width:851px) and (max-width:1200px){
  .approvedTankStage.tanksggCapture{
    --hero-stage-width:min(72%,1080px)!important;
    --hero-stage-height:500px!important;
    --hero-stage-right:-3.3%!important;
    --hero-stage-top:18px!important;
    --hero-stage-shadow-bottom:136px!important;
    --hero-deck-bottom:118px!important;
    --hero-tank-y-adjust:-13%!important;
  }
  .approvedTankStage.tanksggCapture.role-td{
    --hero-stage-width:min(76%,1140px)!important;
    --hero-stage-height:520px!important;
    --hero-stage-right:-4.8%!important;
    --hero-stage-top:10px!important;
  }
}
@media(max-width:850px){
  .approvedTankStage.tanksggCapture{
    top:248px!important;right:-2%!important;width:92%!important;height:320px!important;
    --hero-stage-shadow-bottom:84px!important;
    --hero-deck-bottom:70px!important;
    --hero-tank-y-adjust:-9%!important;
  }
}

/* ================================================================
   v0.3.5.30 — HERO TANK SCALE FIX
   Larger tanks.gg cutouts in the detailed replay header only.
   Replay cards/list thumbnails are intentionally unchanged.
   ================================================================ */
@media(min-width:1201px){
  /* v0.3.5.35: baseline/contact shadow values come from heroTankStageStyle. */
  .approvedTankStage.tanksggCapture:after{bottom:var(--hero-stage-shadow-bottom,170px)!important;height:var(--hero-stage-shadow-height,62px)!important}
  .approvedTankStage.tanksggCapture .approvedTankDeck{bottom:var(--hero-deck-bottom,146px)!important;height:var(--hero-deck-height,78px)!important}
}
@media(min-width:851px) and (max-width:1200px){
  .approvedTankStage.tanksggCapture{--hero-stage-width:min(72%,1080px)!important;--hero-stage-height:500px!important;--hero-stage-right:-3.3%!important;--hero-stage-top:18px!important;--hero-stage-shadow-bottom:136px!important;--hero-deck-bottom:118px!important;--hero-tank-y-adjust:-22%!important}
  .approvedTankStage.tanksggCapture.role-td{--hero-stage-width:min(76%,1140px)!important;--hero-stage-height:520px!important;--hero-stage-right:-4.8%!important;--hero-stage-top:10px!important;--hero-tank-y-adjust:-23%!important}
}


/* ================================================================
   v0.3.5.35 — HERO SINGLE-LAYER LOCK + Y-OFFSET FIX
   Exactly one vehicle PNG in the full-report hero. No hover duplicate,
   no animated/parallax tank movement; the main tank is lifted onto baseline.
   ================================================================ */
.approvedTankStage.tanksggCapture .approvedHeroTankGhost,
.approvedTankStage.tanksggCapture .approvedHeroTankRim{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
}
.approvedTankStage.tanksggCapture .approvedHeroTank{
  transition:none!important;
  animation:none!important;
  transform:translate(calc(var(--hero-tank-x,0%) + var(--hero-tank-x-adjust,0%)),calc(var(--hero-tank-y,0%) + var(--hero-tank-y-adjust,-29%))) scale(var(--hero-tank-scale,2.02))!important;
}
.approvedReplayHero:hover .approvedTankStage.tanksggCapture .approvedHeroTank,
.approvedTankStage.tanksggCapture.long-gun .approvedHeroTank,
.approvedTankStage.tanksggCapture.heavy-silhouette .approvedHeroTank,
.approvedReplayHero:hover .approvedTankStage.tanksggCapture.long-gun .approvedHeroTank,
.approvedReplayHero:hover .approvedTankStage.tanksggCapture.heavy-silhouette .approvedHeroTank{
  transition:none!important;
  animation:none!important;
  transform:translate(calc(var(--hero-tank-x,0%) + var(--hero-tank-x-adjust,0%)),calc(var(--hero-tank-y,0%) + var(--hero-tank-y-adjust,-29%))) scale(var(--hero-tank-scale,2.02))!important;
}
@media(max-width:850px){
  .approvedTankStage.tanksggCapture .approvedHeroTank,
  .approvedReplayHero:hover .approvedTankStage.tanksggCapture .approvedHeroTank{
    transform:translate(calc(var(--hero-tank-x,0%) + var(--hero-tank-x-adjust,0%)),calc(var(--hero-tank-y,0%) + var(--hero-tank-y-adjust,-12%))) scale(var(--hero-tank-scale,1.78))!important;
  }
}

/* ================================================================
   v0.3.5.36 — HERO AUTO-FIT + LIGHT NORMALIZE
   Dense body silhouette drives width/left; image bottom sits on one baseline.
   Long barrels remain visible but no longer control hull size.
   ================================================================ */
.approvedTankStage.tanksggCapture{
  overflow:visible!important;
}
.approvedTankStage.tanksggCapture .approvedHeroTankGhost,
.approvedTankStage.tanksggCapture .approvedHeroTankRim{
  display:none!important;
}
.approvedTankStage.tanksggCapture .approvedHeroTank,
.approvedReplayHero:hover .approvedTankStage.tanksggCapture .approvedHeroTank,
.approvedTankStage.tanksggCapture.long-gun .approvedHeroTank,
.approvedTankStage.tanksggCapture.heavy-silhouette .approvedHeroTank,
.approvedReplayHero:hover .approvedTankStage.tanksggCapture.long-gun .approvedHeroTank,
.approvedReplayHero:hover .approvedTankStage.tanksggCapture.heavy-silhouette .approvedHeroTank{
  position:absolute!important;
  z-index:2!important;
  left:var(--hero-image-left,12%)!important;
  right:auto!important;
  top:auto!important;
  bottom:var(--hero-baseline-bottom,197px)!important;
  width:var(--hero-image-width,82%)!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:none!important;
  transform-origin:center bottom!important;
  transition:none!important;
  animation:none!important;
  opacity:1!important;
  /* Slight lift only: preserve tanks.gg texture/paint, do not wash it out. */
  filter:drop-shadow(0 26px 20px rgba(0,0,0,.58)) drop-shadow(0 8px 9px rgba(0,0,0,.28)) brightness(1.10) contrast(1.045) saturate(1.035)!important;
}
.approvedTankStage.tanksggCapture:after{
  left:var(--hero-contact-left,30%)!important;
  width:var(--hero-contact-width,48%)!important;
  bottom:calc(var(--hero-baseline-bottom,197px) - 29px)!important;
  height:44px!important;
  opacity:.90!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.78) 0%,rgba(0,0,0,.43) 48%,rgba(0,0,0,.15) 68%,transparent 82%)!important;
  filter:blur(9px)!important;
  box-shadow:none!important;
}
.approvedTankStage.tanksggCapture .approvedTankDeck{
  left:calc(var(--hero-contact-left,30%) - 4%)!important;
  right:auto!important;
  width:calc(var(--hero-contact-width,48%) + 8%)!important;
  bottom:calc(var(--hero-baseline-bottom,197px) - 35px)!important;
  height:55px!important;
  opacity:.72!important;
  background:radial-gradient(ellipse at center,rgba(238,217,174,.08),rgba(16,20,19,.14) 46%,rgba(0,0,0,.10) 65%,transparent 80%)!important;
  filter:blur(11px)!important;
}
@media(min-width:851px) and (max-width:1200px){
  .approvedTankStage.tanksggCapture{--hero-baseline-bottom:115px!important}
  .approvedTankStage.tanksggCapture.role-td{--hero-baseline-bottom:127px!important}
  .approvedTankStage.tanksggCapture.role-light{--hero-baseline-bottom:105px!important}
}
@media(max-width:850px){
  .approvedTankStage.tanksggCapture{--hero-baseline-bottom:60px!important}
  .approvedTankStage.tanksggCapture .approvedHeroTank,
  .approvedReplayHero:hover .approvedTankStage.tanksggCapture .approvedHeroTank{
    width:min(var(--hero-image-width,82%),118%)!important;
  }
}


/* ================================================================
   v0.3.5.37 — HERO RELIGHT + SHARPEN + SAFE-ZONE CLAMP
   Full-silhouette clamp protects the left text column. One visible PNG only.
   A subtle SVG unsharp/midtone pass improves perceived detail without fake glow.
   ================================================================ */
.heroTankFxDefs{position:absolute!important;width:0!important;height:0!important;overflow:hidden!important;pointer-events:none!important}
.approvedTankStage.tanksggCapture .approvedHeroTankGhost,
.approvedTankStage.tanksggCapture .approvedHeroTankRim{display:none!important;visibility:hidden!important;opacity:0!important}
.approvedTankStage.tanksggCapture .approvedHeroTank,
.approvedReplayHero:hover .approvedTankStage.tanksggCapture .approvedHeroTank,
.approvedTankStage.tanksggCapture.long-gun .approvedHeroTank,
.approvedTankStage.tanksggCapture.heavy-silhouette .approvedHeroTank,
.approvedReplayHero:hover .approvedTankStage.tanksggCapture.long-gun .approvedHeroTank,
.approvedReplayHero:hover .approvedTankStage.tanksggCapture.heavy-silhouette .approvedHeroTank{
  left:var(--hero-image-left,12%)!important;
  width:var(--hero-image-width,82%)!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
  image-rendering:auto!important;
  filter:url(#heroTankFx37) drop-shadow(-1px -2px 1px rgba(255,240,214,.13)) drop-shadow(0 27px 21px rgba(0,0,0,.57)) drop-shadow(0 8px 9px rgba(0,0,0,.28)) brightness(1.018) contrast(1.02) saturate(1.012)!important;
}
.approvedTankStage.tanksggCapture{overflow:visible!important}
.approvedTankStage.tanksggCapture:after{opacity:.88!important;filter:blur(8px)!important}
.approvedTankStage.tanksggCapture .approvedTankDeck{opacity:.68!important}
@media(max-width:850px){
  .approvedTankStage.tanksggCapture .approvedHeroTank,
  .approvedReplayHero:hover .approvedTankStage.tanksggCapture .approvedHeroTank{
    filter:drop-shadow(0 20px 16px rgba(0,0,0,.52)) brightness(1.08) contrast(1.045) saturate(1.025)!important;
  }
}


/* ================================================================
   v0.3.5.40 — CLASSIC HEADER ROLLBACK
   Smaller hero tank, biased to the right, with subtle outline and a
   quick atmospheric reveal on replay open.
   ================================================================ */
.approvedTankStage.tanksggCapture{
  --hero-stage-right:-8.1%!important;
  --hero-stage-width:min(82%,1320px)!important;
  --hero-stage-height:590px!important;
}
.approvedTankStage.tanksggCapture .approvedHeroTank{
  opacity:0;
  filter:
    drop-shadow(1px 0 0 rgba(229,235,241,.50))
    drop-shadow(-1px 0 0 rgba(229,235,241,.44))
    drop-shadow(0 1px 0 rgba(229,235,241,.46))
    drop-shadow(0 -1px 0 rgba(229,235,241,.38))
    drop-shadow(0 36px 24px rgba(0,0,0,.68))
    drop-shadow(0 12px 15px rgba(0,0,0,.34))
    drop-shadow(0 0 2px rgba(255,244,223,.16))
    contrast(1.055) saturate(1.04) brightness(1.03)!important;
  animation:heroTankEntry38 .52s cubic-bezier(.22,.78,.18,1) .03s both!important;
}
.approvedTankStage.tanksggCapture .approvedTankDeck{
  animation:heroDustDeck38 .55s ease-out both!important;
}
.approvedTankStage.tanksggCapture .approvedTankSweep{
  opacity:.0!important;
  animation:heroDustSweep38 .58s ease-out both!important;
}
.approvedTankStage.tanksggCapture .approvedTankBackdrop{
  animation:heroBackdropIn38 .45s ease-out both!important;
}
.approvedReplayHero:hover .approvedTankStage.tanksggCapture .approvedHeroTank,
.approvedTankStage.tanksggCapture.long-gun .approvedHeroTank,
.approvedTankStage.tanksggCapture.heavy-silhouette .approvedHeroTank,
.approvedReplayHero:hover .approvedTankStage.tanksggCapture.long-gun .approvedHeroTank,
.approvedReplayHero:hover .approvedTankStage.tanksggCapture.heavy-silhouette .approvedHeroTank{
  filter:
    drop-shadow(1px 0 0 rgba(229,235,241,.50))
    drop-shadow(-1px 0 0 rgba(229,235,241,.44))
    drop-shadow(0 1px 0 rgba(229,235,241,.46))
    drop-shadow(0 -1px 0 rgba(229,235,241,.38))
    drop-shadow(0 36px 24px rgba(0,0,0,.68))
    drop-shadow(0 12px 15px rgba(0,0,0,.34))
    drop-shadow(0 0 2px rgba(255,244,223,.16))
    contrast(1.055) saturate(1.04) brightness(1.03)!important;
}
@keyframes heroTankEntry38{
  0%{opacity:0;transform:translate(calc(var(--hero-tank-x,0%) + var(--hero-tank-x-adjust,0%) + 2.0%),calc(var(--hero-tank-y,0%) + var(--hero-tank-y-adjust,-29%) + 10px)) scale(calc(var(--hero-tank-scale,1.72) * .972));filter:blur(2.6px) brightness(1.08) saturate(1.0)}
  42%{opacity:.98;transform:translate(calc(var(--hero-tank-x,0%) + var(--hero-tank-x-adjust,0%) + .7%),calc(var(--hero-tank-y,0%) + var(--hero-tank-y-adjust,-29%) + 2px)) scale(calc(var(--hero-tank-scale,1.72) * 1.004));filter:blur(.45px) brightness(1.04)}
  100%{opacity:1;transform:translate(calc(var(--hero-tank-x,0%) + var(--hero-tank-x-adjust,0%)),calc(var(--hero-tank-y,0%) + var(--hero-tank-y-adjust,-29%))) scale(var(--hero-tank-scale,1.72));filter:blur(0) brightness(1)}
}
@keyframes heroDustDeck38{
  0%{opacity:0;transform:translateY(10px) scale(.86);filter:blur(18px)}
  55%{opacity:.92;transform:translateY(0) scale(1.03);filter:blur(11px)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(10px)}
}
@keyframes heroDustSweep38{
  0%{opacity:0;transform:translateX(-3%) scale(.95);filter:blur(26px)}
  35%{opacity:.12;transform:translateX(0) scale(1.0);filter:blur(18px)}
  100%{opacity:.08;transform:translateX(0) scale(1.0);filter:blur(22px)}
}
@keyframes heroBackdropIn38{
  0%{opacity:0;transform:scale(.985)}
  100%{opacity:var(--hero-backdrop-opacity,.10);transform:scale(1)}
}
@media(min-width:851px) and (max-width:1200px){
  .approvedTankStage.tanksggCapture{
    --hero-stage-width:min(69%,1020px)!important;
    --hero-stage-height:476px!important;
    --hero-stage-right:-5.2%!important;
  }
}
@media(max-width:850px){
  .approvedTankStage.tanksggCapture{
    right:-4.5%!important;width:90%!important;height:300px!important;
  }
}


/* ================================================================
   v0.3.5.42 — CLASSIC HEADER TANK ART
   Restore the approved header from the reference screenshot:
   map background + classic WG tank cutout/card art. tanks.gg hero renders
   and flat silhouette icons are not rendered in the detailed replay header.
   ================================================================ */
.approvedReplayHero.classicIconHero .approvedHeroTank.classicHeaderTankIcon{
  position:absolute!important;
  z-index:4!important;
  width:clamp(300px,28vw,430px)!important;
  height:310px!important;
  right:4.4%!important;
  top:98px!important;
  left:auto!important;
  bottom:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  image-rendering:auto!important;
  opacity:.94!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
  filter:drop-shadow(0 28px 22px rgba(0,0,0,.72)) drop-shadow(0 0 20px rgba(0,0,0,.28)) contrast(1.04) saturate(1.03)!important;
}
.approvedReplayHero.classicIconHero:hover .approvedHeroTank.classicHeaderTankIcon{
  transform:none!important;
}
.approvedReplayHero.classicIconHero .approvedHeroVignette{
  background:linear-gradient(90deg,rgba(3,7,9,.97) 0%,rgba(3,7,9,.85) 29%,rgba(3,7,9,.38) 55%,rgba(3,7,9,.08) 100%),linear-gradient(180deg,rgba(2,5,7,.02),rgba(3,8,10,.66) 100%)!important;
}
@media(max-width:1200px){
  .approvedReplayHero.classicIconHero .approvedHeroTank.classicHeaderTankIcon{
    width:300px!important;height:245px!important;right:4.5%!important;top:132px!important;
  }
}
@media(max-width:850px){
  .approvedReplayHero.classicIconHero .approvedHeroTank.classicHeaderTankIcon{
    width:250px!important;height:200px!important;right:2%!important;top:246px!important;opacity:.90!important;
  }
}


/* ================================================================
   v0.3.5.43 — PREMIUM POLISH PASS
   Reduce header bulk, make the hero tank feel more integrated,
   calm down economy dominance, strengthen tabs/actions, and improve
   readability / hierarchy across personal, team and detailed panels.
   ================================================================ */
@keyframes replayHeroBgFloat {
  0%   { transform:scale(1.02) translate3d(0,0,0); filter:saturate(.92) contrast(1.04) brightness(.98); }
  50%  { transform:scale(1.035) translate3d(-0.45%, -0.2%, 0); filter:saturate(.96) contrast(1.05) brightness(1.00); }
  100% { transform:scale(1.028) translate3d(0.35%, 0.18%, 0); filter:saturate(.94) contrast(1.05) brightness(.99); }
}
@keyframes replayHeroGlowPulse {
  0%,100% { opacity:.72; }
  50%     { opacity:.94; }
}
@keyframes replayHeroBeamSweep {
  0%   { transform:translate3d(-8%,0,0) skewX(-10deg); opacity:.12; }
  50%  { transform:translate3d(1.5%,0,0) skewX(-8deg); opacity:.24; }
  100% { transform:translate3d(8%,0,0) skewX(-6deg); opacity:.14; }
}
@keyframes replayHeroDustDrift {
  0%   { transform:translate3d(0,0,0); opacity:.20; }
  50%  { transform:translate3d(1.2%, -.6%, 0); opacity:.28; }
  100% { transform:translate3d(-0.8%, .4%, 0); opacity:.22; }
}

.approvedReplayHero .approvedHeroBg{
  animation:replayHeroBgFloat 26s ease-in-out infinite alternate!important;
  will-change:transform,filter;
}
.approvedReplayHero .approvedHeroGlow{
  animation:replayHeroGlowPulse 9s ease-in-out infinite!important;
}
.approvedReplayHero .approvedHeroLightBeam{
  position:absolute!important;
  inset:-8% -4%!important;
  z-index:-3!important;
  pointer-events:none!important;
  background:
    linear-gradient(116deg,
      transparent 0%,
      rgba(255,245,210,.03) 30%,
      rgba(255,236,186,.14) 46%,
      rgba(255,225,160,.04) 58%,
      transparent 72%)!important;
  mix-blend-mode:screen!important;
  opacity:.18!important;
  animation:replayHeroBeamSweep 18s ease-in-out infinite!important;
}
.approvedReplayHero .cinematicAtmosphere{
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 14% 28%, rgba(183,236,88,.12) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 26%, rgba(255,224,161,.11) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 40%, rgba(255,224,161,.08) 0 1px, transparent 2px),
    radial-gradient(circle at 26% 56%, rgba(183,236,88,.08) 0 1px, transparent 2px);
  background-size:220px 220px, 260px 260px, 320px 320px, 260px 260px!important;
  animation:replayHeroDustDrift 22s linear infinite!important;
  opacity:.24!important;
}

.approvedAction,
.approvedBackButton,
.cinematicTabs button,
.battleTabs button,
.approvedAward,
.cinematicInteractionGrid.stableAllTargets .interactionRow,
.cinematicTeamMembers .teamMember,
.approvedDetailRow{
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    color .16s ease,
    box-shadow .16s ease,
    filter .16s ease!important;
}
.approvedAction:hover,
.approvedBackButton:hover{
  transform:translateY(-1px)!important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.26),
    0 0 0 1px rgba(232,184,73,.09),
    inset 0 1px 0 rgba(255,255,255,.07)!important;
}
.approvedAction:hover .uiMaskIcon,
.approvedBackButton:hover .uiMaskIcon{
  filter:drop-shadow(0 0 6px rgba(232,184,73,.28))!important;
}

.cinematicTabs,
.battleTabs{
  gap:6px!important;
  padding-left:12px!important;
  background:linear-gradient(180deg,rgba(12,18,20,.98),rgba(9,15,16,.98))!important;
}
.cinematicTabs button,
.battleTabs button{
  position:relative!important;
  min-width:172px!important;
  height:46px!important;
  padding:0 22px!important;
  border:1px solid transparent!important;
  border-bottom:0!important;
  border-radius:5px 5px 0 0!important;
  letter-spacing:.045em!important;
}
.cinematicTabs button:hover:not(.active),
.battleTabs button:hover:not(.active){
  color:#e6ede9!important;
  background:linear-gradient(180deg,rgba(21,29,30,.90),rgba(11,17,18,.96))!important;
  border-color:rgba(215,231,222,.10)!important;
}
.cinematicTabs button.active,
.battleTabs button.active{
  color:#f8fbf8!important;
  background:linear-gradient(180deg,rgba(63,101,51,.72),rgba(20,33,25,.84))!important;
  box-shadow:inset 0 -3px 0 rgba(181,233,77,.95),0 12px 24px rgba(0,0,0,.20)!important;
}
.cinematicTabs button.active:after,
.battleTabs button.active:after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:-1px;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(195,241,101,.95),transparent);
}

.cinematicEfficiency,
.cinematicTeam,
.approvedReportPanel{
  box-shadow:0 16px 38px rgba(0,0,0,.16)!important;
}
.cinematicInteractionGrid.stableAllTargets{
  background:linear-gradient(180deg,rgba(12,18,20,.34),rgba(8,13,15,.12))!important;
}
.cinematicInteractionGrid.stableAllTargets .interactionRow:nth-child(odd){
  background:linear-gradient(180deg,rgba(19,27,28,.94),rgba(10,16,18,.93))!important;
}
.cinematicInteractionGrid.stableAllTargets .interactionRow:nth-child(even){
  background:linear-gradient(180deg,rgba(16,23,24,.92),rgba(9,14,16,.92))!important;
}
.cinematicInteractionGrid.stableAllTargets .interactionRow:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(169,229,27,.25)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.18)!important;
}
.cinematicInteractionGrid .interactionVehicle strong,
.cinematicTeamMembers .teamPlayer strong{
  letter-spacing:.01em!important;
}
.cinematicInteractionGrid .interactionVehicle small,
.cinematicTeamMembers .teamVehicle{
  color:#adb7b2!important;
}
.cinematicTeamColumns{
  background:linear-gradient(180deg,rgba(17,24,26,.96),rgba(10,15,16,.94))!important;
  border-bottom-color:rgba(215,231,222,.13)!important;
}
.cinematicTeamMembers .teamMember:nth-child(odd){
  background:linear-gradient(180deg,rgba(15,22,24,.32),rgba(15,22,24,.16))!important;
}
.cinematicTeamMembers .teamMember:nth-child(even){
  background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,.005))!important;
}
.cinematicTeamMembers .teamMember.owner:nth-child(odd),
.cinematicTeamMembers .teamMember.owner:nth-child(even){
  background:linear-gradient(90deg,rgba(123,181,55,.14),rgba(56,91,42,.04) 55%,rgba(13,19,20,.03))!important;
}
.cinematicTeamMembers .teamMember:hover{
  transform:translateX(2px)!important;
  background:linear-gradient(90deg,rgba(28,38,37,.96),rgba(14,20,22,.95))!important;
  border-bottom-color:rgba(215,231,222,.13)!important;
  filter:none!important;
}
.cinematicTeamMembers .teamMetric b,
.approvedDetailRow>strong,
.approvedDetailRow>strong .value{
  font-variant-numeric:tabular-nums!important;
}
.approvedDetailRow:nth-child(odd){
  background:rgba(255,255,255,.010)!important;
}
.approvedDetailRow:hover{
  background:rgba(255,255,255,.022)!important;
}
.approvedPanelTitle,
.cinematicSectionHeader{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
}

@media (min-width:1201px){
  .approvedReplayHero{
    height:522px!important;
    min-height:522px!important;
  }
  .approvedHeroTop{
    left:62px!important;
    right:34px!important;
    top:23px!important;
  }
  .approvedHeroCopy{
    left:62px!important;
    top:70px!important;
    width:560px!important;
  }
  .approvedTankTitle{
    height:46px!important;
    gap:12px!important;
  }
  .approvedTankTitle>strong{
    font-size:39px!important;
  }
  .approvedSurvival{
    font-size:13px!important;
  }
  .approvedHeroCopy h1{
    margin:16px 0 2px!important;
    font-size:79px!important;
  }
  .approvedHeroCopy>p{
    font-size:14px!important;
  }
  .approvedAwardsRail{
    margin-top:12px!important;
    height:78px!important;
    min-height:78px!important;
    gap:10px!important;
  }
  .approvedAward:hover{
    transform:translateY(-3px) scale(1.02)!important;
    filter:drop-shadow(0 12px 16px rgba(0,0,0,.56)) brightness(1.06)!important;
  }

  .approvedHeroPrimaryStats{
    left:62px!important;
    bottom:100px!important;
    width:56%!important;
    height:82px!important;
    box-shadow:0 18px 34px rgba(0,0,0,.20)!important;
  }
  .approvedHeroMetric{
    position:relative!important;
    overflow:hidden!important;
    padding:0 18px!important;
  }
  .approvedHeroMetric:nth-child(1),
  .approvedHeroMetric:nth-child(2){
    background:linear-gradient(180deg,rgba(167,228,50,.055),rgba(167,228,50,0) 72%)!important;
  }
  .approvedHeroMetric:nth-child(4){
    background:linear-gradient(180deg,rgba(232,184,73,.055),rgba(232,184,73,0) 72%)!important;
  }
  .approvedHeroMetric strong{
    font-size:29px!important;
  }
  .approvedHeroMetric:nth-child(1) strong,
  .approvedHeroMetric:nth-child(2) strong{
    text-shadow:0 0 10px rgba(171,226,62,.12)!important;
  }
  .approvedHeroMetric:nth-child(4) strong{
    text-shadow:0 0 10px rgba(232,184,73,.10)!important;
  }
  .approvedHeroMetric small{
    margin-top:5px!important;
    font-size:10px!important;
  }

  .approvedEconomyCards{
    right:62px!important;
    bottom:100px!important;
    width:38.5%!important;
    height:92px!important;
  }
  .approvedEconomy{
    padding:14px 20px!important;
    box-shadow:0 18px 34px rgba(0,0,0,.16)!important;
  }
  .approvedEconomy.silver{
    background:linear-gradient(120deg,rgba(22,56,34,.68),rgba(10,25,19,.74))!important;
  }
  .approvedEconomy.experience{
    background:linear-gradient(120deg,rgba(82,59,24,.70),rgba(32,25,16,.76))!important;
  }
  .approvedEconomy>span{
    font-size:11px!important;
    letter-spacing:.04em!important;
  }
  .approvedEconomy>strong{
    font-size:26px!important;
  }
  .approvedEconomy>small{
    font-size:10px!important;
  }

  .approvedSubMetrics{
    left:62px!important;
    right:62px!important;
    bottom:18px!important;
    height:64px!important;
  }
  .approvedSubMetrics>div{
    padding:0 14px!important;
  }
  .approvedSubMetrics strong{
    font-size:21px!important;
  }
  .approvedSubMetrics small{
    font-size:10px!important;
  }

  .approvedReplayHero.classicIconHero .approvedHeroTank.classicHeaderTankIcon{
    right:3.8%!important;
    top:88px!important;
    width:clamp(315px,27vw,420px)!important;
    height:300px!important;
    opacity:.965!important;
    filter:
      drop-shadow(0 26px 22px rgba(0,0,0,.70))
      drop-shadow(0 10px 24px rgba(0,0,0,.24))
      drop-shadow(0 0 .5px rgba(255,244,210,.24))
      contrast(1.06) saturate(1.05) brightness(1.03)!important;
    transform:translateY(0) scale(1)!important;
    transition:transform .38s ease,filter .38s ease,opacity .38s ease!important;
  }
  .approvedReplayHero.classicIconHero:hover .approvedHeroTank.classicHeaderTankIcon{
    transform:translateY(-2px) scale(1.012)!important;
    filter:
      drop-shadow(0 30px 28px rgba(0,0,0,.72))
      drop-shadow(0 12px 28px rgba(0,0,0,.25))
      drop-shadow(0 0 1px rgba(255,244,210,.27))
      contrast(1.065) saturate(1.06) brightness(1.04)!important;
  }
}


/* ================================================================
   v0.3.5.44 — Header tank fit + hero awards ordering polish
   Requested tuning: slightly smaller hero tank so the hull/barrel never feel
   clipped; bigger medal rail items with tighter spacing; gun marks larger than
   medals; ribbons/trailing awards always after the medal groups.
   ================================================================ */
@media (min-width:1201px){
  .approvedReplayHero.classicIconHero .approvedHeroTank.classicHeaderTankIcon{
    right:2.4%!important;
    top:78px!important;
    width:clamp(282px,24.6vw,380px)!important;
    height:276px!important;
  }
  .approvedReplayHero.classicIconHero:hover .approvedHeroTank.classicHeaderTankIcon{
    transform:translateY(-1px) scale(1.008)!important;
  }
  .approvedHeroTop{right:18px!important}

  .approvedAwardsRail{
    max-width:760px!important;
    min-height:110px!important;
    height:110px!important;
    gap:0!important;
    margin-top:10px!important;
    padding:4px 4px 3px 0!important;
    align-items:flex-end!important;
  }
  .approvedAwardsRail:before{
    bottom:17px!important;
    height:58px!important;
  }
  .approvedAward{
    width:72px!important;
    height:98px!important;
    margin-left:-2px!important;
    margin-right:-5px!important;
  }
  .approvedAwardIcon{
    width:72px!important;
    height:80px!important;
  }
  .approvedAward.mastery{
    width:92px!important;
    height:100px!important;
    margin-right:-4px!important;
  }
  .approvedAward.mastery .approvedAwardIcon{
    width:92px!important;
    height:92px!important;
  }
  .approvedAward.tier-marks,
  .approvedAward.tier-marks.realClientMark,
  .approvedAward.tier-marks.nationalMark{
    width:104px!important;
    height:104px!important;
    margin:0 -3px 0 -1px!important;
    flex-basis:104px!important;
  }
  .realGunMarksRow{width:100px!important}
  .realGunMarkComposite{
    width:100px!important;
    height:78px!important;
    max-width:100px!important;
    max-height:78px!important;
  }
  .approvedAward.tier-legendary{
    width:86px!important;
    height:102px!important;
  }
  .approvedAward.tier-legendary .approvedAwardIcon{
    width:86px!important;
    height:88px!important;
  }
  .approvedAward.tier-epic{
    width:76px!important;
    height:98px!important;
  }
  .approvedAward.tier-epic .approvedAwardIcon{
    width:78px!important;
    height:82px!important;
  }
  .approvedAward.tier-standard{
    width:72px!important;
    height:96px!important;
  }
  .approvedAward.tier-trailing{
    width:62px!important;
    height:90px!important;
    opacity:.92!important;
  }
  .approvedAward.tier-trailing .approvedAwardIcon{
    width:60px!important;
    height:66px!important;
  }
  .approvedAward:hover{
    transform:translateY(-4px) scale(1.038)!important;
  }
}

@media (max-width:1200px){
  .approvedReplayHero.classicIconHero .approvedHeroTank.classicHeaderTankIcon{
    width:272px!important;
    height:232px!important;
    right:3.5%!important;
    top:138px!important;
  }
}
@media (max-width:850px){
  .approvedReplayHero.classicIconHero .approvedHeroTank.classicHeaderTankIcon{
    width:228px!important;
    height:188px!important;
    right:1.5%!important;
    top:246px!important;
  }
}


/* ================================================================
   v0.3.5.45 — Screenshot markup micro-fixes
   Based on the marked screenshot: remove excess dead space in the hero copy,
   raise/enlarge the medal rail, and make the hero tank a bit smaller so the
   hull / barrel never feel clipped near the right edge.
   ================================================================ */
@media (min-width:1201px){
  .approvedReplayHero{
    height:506px!important;
    min-height:506px!important;
  }
  .approvedHeroTop{
    top:18px!important;
  }
  .approvedHeroCopy{
    top:54px!important;
    width:545px!important;
  }
  .approvedTankTitle>strong{
    font-size:37px!important;
  }
  .approvedHeroCopy h1{
    margin:14px 0 0!important;
    font-size:76px!important;
    line-height:.88!important;
  }
  .approvedHeroCopy>p{
    margin:4px 0 0!important;
    font-size:13px!important;
  }

  /* Raise the full award band and make it denser / larger. */
  .approvedAwardsRail{
    margin-top:0!important;
    min-height:102px!important;
    height:102px!important;
    padding:0 4px 2px 0!important;
    gap:0!important;
  }
  .approvedAwardsRail:before{
    bottom:14px!important;
    height:56px!important;
  }
  .approvedAward{
    width:74px!important;
    height:100px!important;
    margin-left:-3px!important;
    margin-right:-6px!important;
  }
  .approvedAwardIcon{
    width:74px!important;
    height:82px!important;
  }
  .approvedAward.mastery{
    width:96px!important;
    height:102px!important;
    margin-right:-5px!important;
  }
  .approvedAward.mastery .approvedAwardIcon{
    width:96px!important;
    height:96px!important;
  }
  .approvedAward.tier-marks,
  .approvedAward.tier-marks.realClientMark,
  .approvedAward.tier-marks.nationalMark{
    width:112px!important;
    height:108px!important;
    flex-basis:112px!important;
    margin:0 -5px 0 -2px!important;
  }
  .realGunMarksRow{width:108px!important}
  .realGunMarkComposite{
    width:108px!important;
    height:82px!important;
    max-width:108px!important;
    max-height:82px!important;
  }
  .approvedAward.tier-legendary{
    width:88px!important;
    height:104px!important;
  }
  .approvedAward.tier-legendary .approvedAwardIcon{
    width:88px!important;
    height:90px!important;
  }
  .approvedAward.tier-epic{
    width:78px!important;
    height:100px!important;
  }
  .approvedAward.tier-epic .approvedAwardIcon{
    width:80px!important;
    height:84px!important;
  }
  .approvedAward.tier-standard{
    width:74px!important;
    height:98px!important;
  }
  .approvedAward.tier-trailing{
    width:60px!important;
    height:92px!important;
    opacity:.90!important;
  }
  .approvedAward.tier-trailing .approvedAwardIcon{
    width:58px!important;
    height:64px!important;
  }

  /* Lift the main metric bars slightly so the hero feels tighter. */
  .approvedHeroPrimaryStats{
    bottom:92px!important;
    height:80px!important;
  }
  .approvedEconomyCards{
    bottom:92px!important;
    height:88px!important;
  }
  .approvedSubMetrics{
    bottom:14px!important;
    height:60px!important;
  }

  /* Slightly smaller tank / render so it breathes and stops kissing the edge. */
  .approvedReplayHero.classicIconHero .approvedHeroTank.classicHeaderTankIcon{
    right:2.8%!important;
    top:72px!important;
    width:clamp(252px,22.4vw,344px)!important;
    height:252px!important;
    filter:
      drop-shadow(0 24px 22px rgba(0,0,0,.71))
      drop-shadow(0 8px 20px rgba(0,0,0,.22))
      drop-shadow(0 0 .5px rgba(255,244,210,.20))
      contrast(1.055) saturate(1.04) brightness(1.02)!important;
  }
}

@media (max-width:1200px){
  .approvedReplayHero.classicIconHero .approvedHeroTank.classicHeaderTankIcon{
    width:252px!important;
    height:214px!important;
    right:3.6%!important;
    top:132px!important;
  }
}
@media (max-width:850px){
  .approvedReplayHero.classicIconHero .approvedHeroTank.classicHeaderTankIcon{
    width:214px!important;
    height:176px!important;
    right:1.5%!important;
    top:236px!important;
  }
}


/* ================================================================
   v0.3.5.47 — EXACT SHELL EDGE ALIGN (correct reference screenshot)
   The entire replay hero (map background + tank + stats) uses exactly the
   same outer width as the report shell below: Personal / Teams / Detailed.
   ================================================================ */
:root{--replay-report-side-gutter:56px}
@media (min-width:1251px){
  .approvedReplayHero,
  .cinematicReportShell{
    width:calc(100% - (var(--replay-report-side-gutter) * 2))!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }
}
@media (max-width:1250px) and (min-width:851px){
  .approvedReplayHero,
  .cinematicReportShell{
    width:calc(100% - 32px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }
}
@media (max-width:850px){
  .approvedReplayHero,
  .cinematicReportShell{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }
}


/* ================================================================
   v0.3.5.48 — Gun marks spacing tune
   When marks of excellence are present in the hero awards rail, reduce the
   empty gap around them and make the marks slightly larger.
   ================================================================ */
@media (min-width:1201px){
  .approvedAward.tier-marks,
  .approvedAward.tier-marks.realClientMark,
  .approvedAward.tier-marks.nationalMark{
    width:102px!important;
    height:108px!important;
    flex-basis:102px!important;
    margin:0 -6px 0 -14px!important;
  }
  .realGunMarksRow{
    width:112px!important;
    height:84px!important;
    transform:translateX(-3px)!important;
  }
  .realGunMarkComposite{
    width:112px!important;
    height:86px!important;
    max-width:112px!important;
    max-height:86px!important;
  }
}
@media (max-width:1200px) and (min-width:851px){
  .approvedAward.tier-marks,
  .approvedAward.tier-marks.realClientMark,
  .approvedAward.tier-marks.nationalMark{
    width:94px!important;
    height:100px!important;
    flex-basis:94px!important;
    margin:0 -4px 0 -10px!important;
  }
  .realGunMarksRow{
    width:100px!important;
    transform:translateX(-2px)!important;
  }
  .realGunMarkComposite{
    width:100px!important;
    height:76px!important;
    max-width:100px!important;
    max-height:76px!important;
  }
}


/* ================================================================
   v0.3.5.49 — Battle efficiency redesign
   Redesign the "Battle Efficiency" block into a cleaner single-column combat
   list inspired by the reference screenshot while keeping the FermaniHUB visual
   language and filters.
   ================================================================ */
.retroEfficiencyList{
  border:1px solid rgba(215,231,222,.10)!important;
  background:linear-gradient(180deg,rgba(7,12,14,.98),rgba(6,10,12,.985))!important;
  box-shadow:0 16px 34px rgba(0,0,0,.20)!important;
}
.retroEfficiencyList .cinematicSectionHeader{
  height:58px!important;
  padding:0 14px!important;
  border-bottom:1px solid rgba(215,231,222,.08)!important;
  background:linear-gradient(180deg,rgba(22,29,31,.92),rgba(10,15,17,.96))!important;
}
.retroEfficiencyList .cinematicSectionHeader h3{
  font-size:14px!important;
  letter-spacing:.02em!important;
}
.retroEfficiencyList .cinematicFilterPills button{
  height:30px!important;
  padding:0 12px!important;
  font-size:11px!important;
}
.effListColumns{
  height:34px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 360px!important;
  align-items:center!important;
  padding:0 14px!important;
  color:#8f9b95!important;
  font-family:var(--approved-font)!important;
  font-size:10px!important;
  letter-spacing:.065em!important;
  text-transform:uppercase!important;
  border-bottom:1px solid rgba(215,231,222,.08)!important;
  background:linear-gradient(180deg,rgba(16,22,24,.88),rgba(8,13,15,.92))!important;
}
.effListColumns span:last-child{text-align:right!important}

.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  padding:6px 12px 12px!important;
  background:transparent!important;
}
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .effRowWrap{
  width:100%!important;
}
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .effRowWrap:last-child:nth-child(odd){
  grid-column:auto!important;
  width:100%!important;
}
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionRow{
  min-height:56px!important;
  height:56px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 360px!important;
  gap:14px!important;
  align-items:center!important;
  padding:0 12px!important;
  border:0!important;
  border-bottom:1px solid rgba(215,231,222,.08)!important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,0) 42%),
    linear-gradient(180deg,rgba(18,26,28,.92),rgba(9,15,17,.93))!important;
  box-shadow:none!important;
}
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionRow:hover{
  transform:none!important;
  background:
    linear-gradient(90deg,rgba(103,151,42,.08),rgba(255,255,255,0) 34%),
    linear-gradient(180deg,rgba(21,30,31,.96),rgba(10,16,18,.96))!important;
  border-color:rgba(215,231,222,.09)!important;
  box-shadow:none!important;
}
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .effMain{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:72px minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;
}
.retroEfficiencyList .effTankThumb{
  width:72px!important;
  height:44px!important;
  display:grid!important;
  place-items:center!important;
  position:relative!important;
}
.retroEfficiencyList .effTankThumb:before{
  content:"";
  position:absolute;
  inset:3px 0;
  border-radius:2px;
  background:linear-gradient(90deg,rgba(123,101,72,.18),rgba(35,28,21,.04));
}
.retroEfficiencyList .effTankThumb img{
  position:relative;
  z-index:1;
  width:68px!important;
  height:42px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.72)) brightness(.95)!important;
  opacity:.92!important;
}
.retroEfficiencyList .effIdentity{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
.retroEfficiencyList .effPlayerName{
  display:block!important;
  font-family:var(--approved-font)!important;
  font-size:15px!important;
  line-height:1.05!important;
  color:#ecefeb!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.retroEfficiencyList .effVehicleName{
  display:block!important;
  margin-top:4px!important;
  font-family:var(--approved-font)!important;
  font-size:14px!important;
  color:#b6bfbb!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionNumbers{
  width:360px!important;
  max-width:360px!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:6px!important;
  flex-wrap:wrap!important;
}
.retroEfficiencyList .effStatPill{
  min-width:54px!important;
  height:28px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  padding:0 9px!important;
  border:1px solid rgba(215,231,222,.10)!important;
  border-radius:3px!important;
  background:linear-gradient(180deg,rgba(12,18,20,.96),rgba(9,14,16,.95))!important;
  font-family:var(--approved-font)!important;
  white-space:nowrap!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
}
.retroEfficiencyList .effStatPill em{
  font-style:normal!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:.01em!important;
}
.retroEfficiencyList .effStatIcon{
  width:15px!important;
  height:15px!important;
  color:#cdd4d0!important;
  opacity:.92!important;
}
.retroEfficiencyList .damagePill{
  border-color:rgba(215,231,222,.14)!important;
}
.retroEfficiencyList .damagePill em{color:#eef2ef!important}
.retroEfficiencyList .assistPill{
  border-color:rgba(231,185,77,.22)!important;
  background:linear-gradient(180deg,rgba(64,48,19,.58),rgba(23,18,12,.82))!important;
}
.retroEfficiencyList .assistPill em,
.retroEfficiencyList .assistPill .effStatIcon{color:#f0bf56!important}
.retroEfficiencyList .killPill{
  border-color:rgba(151,213,69,.28)!important;
  background:linear-gradient(180deg,rgba(45,74,25,.54),rgba(16,28,14,.82))!important;
}
.retroEfficiencyList .killPill em,
.retroEfficiencyList .killPill .effStatIcon{color:#b8ef5f!important}
.retroEfficiencyList .receivedDamagePill{
  border-color:rgba(233,109,100,.26)!important;
  background:linear-gradient(180deg,rgba(86,31,28,.58),rgba(29,14,14,.84))!important;
}
.retroEfficiencyList .receivedDamagePill em,
.retroEfficiencyList .receivedDamagePill .effStatIcon{color:#ff8d84!important}

@media (max-width:1200px){
  .effListColumns,
  .retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionRow{
    grid-template-columns:minmax(0,1fr) 320px!important;
  }
  .retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionNumbers{
    width:320px!important;
    max-width:320px!important;
  }
}
@media (max-width:850px){
  .effListColumns{display:none!important}
  .retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionRow{
    height:auto!important;
    min-height:72px!important;
    grid-template-columns:1fr!important;
    padding:10px 12px!important;
  }
  .retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionNumbers{
    width:100%!important;
    max-width:none!important;
    justify-content:flex-start!important;
  }
}


/* ================================================================
   v0.3.5.50 — Battle efficiency compact event pills FIX
   Fix legacy stableAllTargets rules that were stretching every event token to
   100% width and turning kill/received events into long horizontal bars.
   ================================================================ */
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionNumbers{
  width:300px!important;
  max-width:300px!important;
  display:flex!important;
  grid-template-columns:none!important;
  grid-auto-flow:unset!important;
  justify-content:flex-end!important;
  align-items:center!important;
  align-content:center!important;
  gap:7px!important;
  flex-wrap:nowrap!important;
}
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionNumbers > .effStatPill,
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionNumbers > span.effStatPill,
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionNumbers > b.effStatPill{
  width:auto!important;
  min-width:52px!important;
  max-width:none!important;
  height:28px!important;
  grid-column:auto!important;
  flex:0 0 auto!important;
  padding:0 9px!important;
  justify-content:center!important;
  text-align:center!important;
}
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionNumbers > .effStatPill:only-child{
  grid-column:auto!important;
  margin-left:auto!important;
}
.retroEfficiencyList .effStatPill.damagePill{min-width:68px!important}
.retroEfficiencyList .effStatPill.assistPill{min-width:60px!important}
.retroEfficiencyList .effStatPill.killPill{min-width:48px!important}
.retroEfficiencyList .effStatPill.receivedDamagePill{min-width:68px!important}
.retroEfficiencyList .effStatPill .effStatIcon{
  flex:0 0 15px!important;
}
.retroEfficiencyList .effStatPill em{
  display:inline-block!important;
  width:auto!important;
  min-width:0!important;
  line-height:1!important;
}

/* Slightly tighter right column: more like a combat-event rail than a stat bar. */
.effListColumns{
  grid-template-columns:minmax(0,1fr) 300px!important;
}
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionRow{
  grid-template-columns:minmax(0,1fr) 300px!important;
}

@media (max-width:1200px){
  .effListColumns,
  .retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionRow{
    grid-template-columns:minmax(0,1fr) 270px!important;
  }
  .retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionNumbers{
    width:270px!important;
    max-width:270px!important;
    gap:5px!important;
  }
  .retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionNumbers > .effStatPill{
    padding:0 7px!important;
  }
}
@media (max-width:850px){
  .retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionNumbers{
    width:100%!important;
    max-width:none!important;
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
  }
}


/* ================================================================
   v0.3.5.51 — Return report tank icons
   Personal Result and Teams sections should use the richer WG cutout icons
   like the hero header, with a subtle highlight so they read cleaner.
   ================================================================ */
.retroEfficiencyList .effMain{
  grid-template-columns:84px minmax(0,1fr)!important;
}
.retroEfficiencyList .effTankThumb{
  width:84px!important;
  height:48px!important;
}
.retroEfficiencyList .effTankThumb:before{
  inset:4px 3px!important;
  background:linear-gradient(90deg,rgba(110,90,62,.14),rgba(35,28,21,.03))!important;
}
.retroEfficiencyList .effTankThumb img{
  width:82px!important;
  height:48px!important;
  object-fit:contain!important;
  filter:
    drop-shadow(0 6px 7px rgba(0,0,0,.76))
    drop-shadow(0 0 8px rgba(189,228,84,.10))
    brightness(1.03) saturate(1.04)!important;
  opacity:.98!important;
}

.teamTank,
.cinematicTeamMembers .teamTank{
  width:58px!important;
  height:44px!important;
}
.teamTank img,
.cinematicTeamMembers .teamTank img{
  max-width:58px!important;
  max-height:42px!important;
  object-fit:contain!important;
  filter:
    drop-shadow(0 6px 6px rgba(0,0,0,.78))
    drop-shadow(0 0 8px rgba(189,228,84,.09))
    brightness(1.03) saturate(1.04)!important;
  opacity:.97!important;
}
.teamMember.destroyed .teamTank img,
.cinematicTeamMembers .teamMember.destroyed .teamTank img{
  filter:
    grayscale(.14)
    brightness(.90)
    contrast(1.03)
    drop-shadow(0 6px 6px rgba(0,0,0,.78))
    drop-shadow(0 0 6px rgba(189,228,84,.05))!important;
  opacity:.90!important;
}


/* ================================================================
   v0.3.5.52 — Team highlighting + personal accordion + hero KPI icons
   ================================================================ */

/* Hero KPI icons: clearer, more semantic colors/icons. */
.approvedHeroMetric.heroMetric-damage>span{
  color:#b6ef54!important;
  background:radial-gradient(circle,rgba(182,239,84,.13),rgba(182,239,84,.025) 68%,transparent 72%)!important;
  border-color:rgba(182,239,84,.18)!important;
}
.approvedHeroMetric.heroMetric-kills>span{
  color:#ff7a72!important;
  background:radial-gradient(circle,rgba(255,122,114,.16),rgba(255,122,114,.03) 68%,transparent 72%)!important;
  border-color:rgba(255,122,114,.18)!important;
}
.approvedHeroMetric.heroMetric-kills>span>.uiMaskIcon{filter:drop-shadow(0 0 4px rgba(255,122,114,.28))!important}
.approvedHeroMetric.heroMetric-assist>span{
  color:#efd66a!important;
  background:radial-gradient(circle,rgba(239,214,106,.15),rgba(239,214,106,.03) 68%,transparent 72%)!important;
  border-color:rgba(239,214,106,.18)!important;
}
.approvedHeroMetric.heroMetric-assist>span>.uiMaskIcon{filter:drop-shadow(0 0 4px rgba(239,214,106,.26))!important}

/* Teams: instant read who lived, who died, and who owns the replay. */
.teamLegend{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
.teamLegend span{
  height:24px!important;
  padding:0 9px!important;
  display:inline-flex!important;
  align-items:center!important;
  border:1px solid rgba(215,231,222,.12)!important;
  border-radius:999px!important;
  font-size:10px!important;
  text-transform:uppercase!important;
  letter-spacing:.04em!important;
  color:#dfe6e2!important;
  background:rgba(255,255,255,.03)!important;
}
.teamLegend .alive{color:#c9f47a!important;border-color:rgba(143,205,72,.30)!important;background:rgba(93,147,47,.16)!important}
.teamLegend .dead{color:#ff9a92!important;border-color:rgba(221,92,82,.28)!important;background:rgba(154,60,54,.16)!important}
.teamLegend .owner{color:#f6d46a!important;border-color:rgba(232,184,73,.28)!important;background:rgba(104,80,24,.20)!important}

.cinematicTeamMembers .teamMember{
  position:relative!important;
  overflow:hidden!important;
  transition:background .18s ease, box-shadow .18s ease, transform .12s ease!important;
}
.cinematicTeamMembers .teamMember.survived{
  background:linear-gradient(90deg,rgba(92,145,47,.14),rgba(29,41,25,.08) 35%,rgba(10,15,17,.02) 72%)!important;
  box-shadow:inset 2px 0 0 rgba(143,205,72,.40)!important;
}
.cinematicTeamMembers .teamMember.destroyed{
  background:linear-gradient(90deg,rgba(131,49,43,.16),rgba(48,20,20,.08) 36%,rgba(10,15,17,.02) 72%)!important;
  box-shadow:inset 2px 0 0 rgba(221,92,82,.36)!important;
}
.cinematicTeamMembers .teamMember.owner{
  box-shadow:inset 4px 0 0 var(--approved-green),0 0 0 1px rgba(167,228,50,.08)!important;
}
.cinematicTeamMembers .teamMember.owner:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(167,228,50,.08),rgba(167,228,50,0) 42%);
}
.cinematicTeamMembers .teamMember.owner.destroyed:after{
  background:linear-gradient(90deg,rgba(232,184,73,.10),rgba(232,184,73,0) 40%);
}
.teamOwnerBadge{
  display:inline-flex!important;
  align-items:center!important;
  margin-left:8px!important;
  padding:1px 7px!important;
  border-radius:999px!important;
  border:1px solid rgba(232,184,73,.30)!important;
  background:rgba(104,80,24,.20)!important;
  color:#f5d66f!important;
  font-size:9px!important;
  font-weight:700!important;
  letter-spacing:.03em!important;
  text-transform:uppercase!important;
  vertical-align:middle!important;
}
.teamLifeChip{
  min-width:86px!important;
  justify-content:center!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.05em!important;
}
.teamLifeChip.survived{color:#d4fb8d!important;background:rgba(93,147,47,.22)!important;border-color:rgba(143,205,72,.34)!important}
.teamLifeChip.destroyed{color:#ffb1ab!important;background:rgba(154,60,54,.22)!important;border-color:rgba(221,92,82,.32)!important}
.cinematicTeamMembers .teamMember.destroyed .teamMetric b,
.cinematicTeamMembers .teamMember.destroyed .teamVehicleName{color:#d7ccca!important}
.cinematicTeamMembers .teamMember.survived .teamMetric b,
.cinematicTeamMembers .teamMember.survived .teamVehicleName{color:#eef4ef!important}
.cinematicTeamMembers .teamMember.owner .teamPlayer strong{color:#fbfff7!important}

/* Personal tab: clearer top summary and expandable details. */
.personalOverviewStrip{
  display:flex!important;
  gap:14px!important;
  align-items:stretch!important;
  margin-bottom:12px!important;
}
.personalOverviewCards{
  flex:1 1 auto!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:10px!important;
}
.personalMiniCard{
  min-height:78px!important;
  padding:12px 14px!important;
  border:1px solid rgba(215,231,222,.10)!important;
  background:linear-gradient(180deg,rgba(13,19,21,.96),rgba(8,13,15,.96))!important;
  display:grid!important;
  grid-template-columns:28px 1fr!important;
  column-gap:10px!important;
  align-items:center!important;
}
.personalMiniCard>span{
  width:28px!important;height:28px!important;display:grid!important;place-items:center!important;
  color:#b9ef57!important;
  background:radial-gradient(circle,rgba(185,239,87,.12),rgba(185,239,87,.02) 68%,transparent 72%)!important;
  border:1px solid rgba(185,239,87,.14)!important;border-radius:50%!important;
}
.personalMiniCard>span .uiMaskIcon{width:18px!important;height:18px!important;color:inherit!important;background:currentColor!important}
.personalMiniCard strong{display:block!important;font-size:24px!important;line-height:1!important;color:#f4f7f5!important}
.personalMiniCard small{display:block!important;margin-top:5px!important;font-size:11px!important;color:#8f9b95!important;text-transform:uppercase!important}
.personalExpandBtn{
  flex:0 0 220px!important;
  min-height:78px!important;
  padding:0 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  border:1px solid rgba(167,228,50,.18)!important;
  background:linear-gradient(180deg,rgba(18,27,18,.95),rgba(10,16,12,.96))!important;
  color:#f0f5ef!important;
  cursor:pointer!important;
  text-transform:uppercase!important;
  letter-spacing:.03em!important;
  font-family:var(--approved-font)!important;
  font-size:13px!important;
}
.personalExpandBtn i{
  width:12px!important;height:12px!important;
  border-right:2px solid currentColor!important;
  border-bottom:2px solid currentColor!important;
  transform:rotate(45deg) translateY(-2px)!important;
  transition:transform .18s ease!important;
}
.personalExpandBtn.collapsed i{transform:rotate(-135deg) translateY(-1px)!important}
.personalExpandable.is-collapsed{display:none!important}
.retroEfficiencyList .cinematicSectionHeader p{
  margin:5px 0 0!important;
  color:#7f8b85!important;
  font-size:11px!important;
}

@media (max-width:1200px){
  .personalOverviewStrip{flex-direction:column!important}
  .personalOverviewCards{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .personalExpandBtn{flex-basis:auto!important;min-height:58px!important}
}
@media (max-width:850px){
  .teamLegend{display:none!important}
  .personalOverviewCards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .personalMiniCard{min-height:68px!important}
}


/* ================================================================
   v0.3.5.53 — Personal report cleanup (no duplicate KPIs, no filter pills)
   ================================================================ */

/* Remove duplicated KPI cards and replace with a readable intro/legend strip. */
.personalOverviewStrip.cleanPersonalStrip{
  display:grid!important;
  grid-template-columns:minmax(260px,1fr) minmax(520px,1.4fr) 200px!important;
  gap:12px!important;
  align-items:stretch!important;
  margin-bottom:10px!important;
}
.personalOverviewCards,.personalMiniCard{display:none!important}
.personalOverviewLead{
  padding:14px 18px!important;
  border:1px solid rgba(215,231,222,.10)!important;
  background:linear-gradient(180deg,rgba(12,18,20,.96),rgba(8,13,15,.96))!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
.personalOverviewLead h4{
  margin:0 0 6px!important;
  font-family:var(--approved-font)!important;
  font-size:18px!important;
  font-weight:700!important;
  color:#eef2ef!important;
  text-transform:uppercase!important;
  letter-spacing:.02em!important;
}
.personalOverviewLead p{
  margin:0!important;
  color:#8e9994!important;
  font-size:12px!important;
  line-height:1.45!important;
}
.personalLegendPills{
  padding:10px 12px!important;
  border:1px solid rgba(215,231,222,.10)!important;
  background:linear-gradient(180deg,rgba(12,18,20,.96),rgba(8,13,15,.96))!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
.personalLegendPills .legendPill{
  height:30px!important;
  padding:0 12px!important;
  display:inline-flex!important;
  align-items:center!important;
  border-radius:4px!important;
  border:1px solid rgba(216,224,222,.11)!important;
  background:rgba(10,15,17,.82)!important;
  color:#dfe3e1!important;
  font-family:var(--approved-font)!important;
  font-size:11px!important;
  white-space:nowrap!important;
}
.personalLegendPills .legendPill.info{color:#eef2ef!important;border-color:rgba(167,228,50,.22)!important;background:rgba(28,40,23,.45)!important}
.personalLegendPills .legendPill.neutral{color:#e7ece9!important}
.personalLegendPills .legendPill.kill{color:#9fdf41!important;border-color:rgba(112,170,60,.18)!important;background:rgba(45,83,29,.32)!important}
.personalLegendPills .legendPill.assist{color:#e7b94d!important;border-color:rgba(231,185,77,.22)!important;background:rgba(95,70,24,.32)!important}
.personalLegendPills .legendPill.received{color:#ff786f!important;border-color:rgba(164,72,64,.25)!important;background:rgba(86,35,31,.36)!important}
.personalExpandBtn{
  min-height:82px!important;
  background:linear-gradient(180deg,rgba(16,28,15,.96),rgba(9,17,11,.96))!important;
}

/* Section header without extra unused buttons. */
.retroEfficiencyList .cinematicSectionHeader{
  justify-content:flex-start!important;
  min-height:74px!important;
  height:auto!important;
  padding:12px 18px!important;
}
.retroEfficiencyList .cinematicSectionHeader>div:first-child{
  display:block!important;
}
.retroEfficiencyList .cinematicSectionHeader h3:after{content:''!important}
.retroEfficiencyList .cinematicSectionHeader p{
  margin:5px 0 0!important;
  color:#82908a!important;
  font-size:12px!important;
  line-height:1.45!important;
}
.retroEfficiencyList .cinematicFilterPills{display:none!important}

@media (max-width:1250px){
  .personalOverviewStrip.cleanPersonalStrip{
    grid-template-columns:1fr!important;
  }
  .personalExpandBtn{min-height:58px!important}
}


/* ================================================================
   v0.3.5.54 — Hero light lift + premium tank frame
   Goal: keep the approved dark premium style, but remove the “too dark” feel.
   Changes:
   - lighter page substrate / more air;
   - brighter readable map in the hero;
   - slightly smaller hero tank with more breathing room;
   - transparent premium frame around the tank render;
   - slightly brighter shells/tabs so the whole page feels less heavy.
   ================================================================ */

html,body{
  background:
    radial-gradient(circle at 18% 12%, rgba(117,165,74,.09) 0%, transparent 24%),
    radial-gradient(circle at 82% 10%, rgba(130,166,205,.06) 0%, transparent 21%),
    linear-gradient(180deg,#091114 0%,#081013 42%,#070e11 100%)!important;
}

.cinematicReplayPage{
  position:relative!important;
  isolation:isolate!important;
}
.cinematicReplayPage:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 50% -6%, rgba(255,255,255,.035), transparent 36%),
    radial-gradient(circle at 20% 26%, rgba(167,228,50,.045), transparent 20%),
    radial-gradient(circle at 84% 18%, rgba(189,210,255,.04), transparent 20%);
}

.cinematicReportShell{
  background:linear-gradient(180deg,rgba(11,17,20,.90),rgba(8,13,15,.94))!important;
  box-shadow:0 20px 56px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.022)!important;
}

.cinematicTabs{
  background:linear-gradient(180deg,rgba(12,19,21,.98),rgba(8,13,15,.96))!important;
}

.approvedReplayHero{
  background:#091014!important;
  box-shadow:0 26px 84px rgba(0,0,0,.28)!important;
}
.approvedHeroBg{
  filter:saturate(.98) contrast(1.03) brightness(1.12)!important;
  transform:scale(1.012)!important;
}
.approvedReplayHero.classicIconHero .approvedHeroVignette{
  background:
    linear-gradient(90deg,
      rgba(4,8,10,.92) 0%,
      rgba(4,8,10,.74) 28%,
      rgba(4,8,10,.28) 56%,
      rgba(4,8,10,.06) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.02) 0%,
      rgba(3,8,10,.58) 100%)!important;
}
.approvedHeroGlow{
  background:
    radial-gradient(circle at 18% 43%, rgba(108,219,42,.17), transparent 24%),
    radial-gradient(circle at 85% 16%, rgba(255,228,164,.18), transparent 26%)!important;
}
.approvedReplayHero .approvedHeroLightBeam{
  opacity:.92!important;
}

/* Slight site-wide light lift for panels inside the report. */
.personalOverviewLead,
.personalLegendPills,
.retroEfficiencyList,
.approvedDetailPanel,
.approvedHeroPrimaryStats,
.approvedSubMetrics{
  background-color:rgba(10,16,18,.92)!important;
}

/* Hero tank: smaller, cleaner and placed into a transparent premium frame. */
.approvedReplayHero.classicIconHero .approvedHeroTank.classicHeaderTankIcon{
  box-sizing:border-box!important;
  right:3.2%!important;
  top:78px!important;
  width:clamp(242px,21.1vw,332px)!important;
  height:238px!important;
  padding:11px 13px 12px!important;
  border-radius:12px!important;
  border:1px solid rgba(221,229,234,.16)!important;
  background:linear-gradient(180deg,rgba(18,28,33,.26),rgba(8,13,15,.14))!important;
  box-shadow:
    0 16px 38px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,255,255,.03)!important;
  backdrop-filter:blur(10px) saturate(1.04)!important;
  opacity:.97!important;
  filter:
    drop-shadow(0 22px 20px rgba(0,0,0,.54))
    drop-shadow(0 7px 16px rgba(0,0,0,.18))
    drop-shadow(0 0 .5px rgba(255,244,210,.22))
    contrast(1.06) saturate(1.05) brightness(1.03)!important;
}
.approvedReplayHero.classicIconHero:hover .approvedHeroTank.classicHeaderTankIcon{
  transform:none!important;
}

/* Slightly calm the right-side stat cards so the lighter map stays premium. */
.approvedEconomy.silver{
  background:linear-gradient(120deg,rgba(36,80,48,.80),rgba(10,30,24,.78))!important;
}
.approvedEconomy.experience{
  background:linear-gradient(120deg,rgba(108,78,29,.84),rgba(48,36,21,.82))!important;
}

@media (max-width:1200px){
  .approvedReplayHero.classicIconHero .approvedHeroTank.classicHeaderTankIcon{
    width:248px!important;
    height:210px!important;
    right:3.7%!important;
    top:128px!important;
    padding:10px 12px!important;
  }
}
@media (max-width:850px){
  .approvedReplayHero.classicIconHero .approvedHeroTank.classicHeaderTankIcon{
    width:212px!important;
    height:174px!important;
    right:1.6%!important;
    top:230px!important;
    padding:8px 10px!important;
    border-radius:10px!important;
  }
}


/* ================================================================
   v0.3.5.55 — Remove personal strip + inline toggle + event tooltips
   ================================================================ */

/* The extra top strip is no longer used. */
.personalOverviewStrip.cleanPersonalStrip{display:none!important}

/* Compact right-side column header with the collapse button moved lower. */
.effListColumns.compactListColumns{
  grid-template-columns:minmax(0,1fr) 420px!important;
}
.effListRightMeta{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:12px!important;
  min-width:0!important;
}
.effListRightMeta>span{
  text-align:right!important;
}
.effListColumns.compactListColumns span:last-child{text-align:initial!important}

.personalExpandBtn.personalExpandBtnInline{
  flex:0 0 auto!important;
  min-height:0!important;
  height:34px!important;
  padding:0 14px!important;
  border-radius:4px!important;
  border:1px solid rgba(216,224,222,.12)!important;
  background:rgba(11,18,16,.86)!important;
  font-size:11px!important;
  letter-spacing:.05em!important;
  color:#dfe5e1!important;
  box-shadow:none!important;
}
.personalExpandBtn.personalExpandBtnInline:hover{
  border-color:rgba(167,228,50,.24)!important;
  background:rgba(20,33,24,.92)!important;
}
.personalExpandBtn.personalExpandBtnInline i{
  width:10px!important;
  height:10px!important;
  transform:rotate(45deg) translateY(-1px)!important;
}
.personalExpandBtn.personalExpandBtnInline.collapsed i{
  transform:rotate(-135deg) translateY(0)!important;
}

/* Small native-tooltip hint affordance. */
.retroEfficiencyList .effStatPill[title]{cursor:help!important}

@media (max-width:1100px){
  .effListColumns.compactListColumns{
    grid-template-columns:1fr!important;
    height:auto!important;
    gap:8px!important;
    padding:10px 14px!important;
  }
  .effListRightMeta{
    justify-content:space-between!important;
  }
}
@media (max-width:700px){
  .effListRightMeta{
    flex-direction:column!important;
    align-items:flex-start!important;
  }
}


/* ================================================================
   v0.3.5.56 — Battle efficiency premium polish
   ================================================================ */
.retroEfficiencyList .cinematicSectionHeader p{
  opacity:.86!important;
}
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets{
  overflow:visible!important;
  padding:4px 12px 12px!important;
}
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionRow{
  min-height:52px!important;
  height:52px!important;
  grid-template-columns:minmax(0,1fr) 376px!important;
  gap:12px!important;
  padding:0 10px!important;
  overflow:visible!important;
  position:relative!important;
  border-bottom:1px solid rgba(215,231,222,.075)!important;
}
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionRow:hover{
  background:
    linear-gradient(90deg,rgba(103,151,42,.10),rgba(255,255,255,0) 34%),
    linear-gradient(180deg,rgba(23,32,34,.98),rgba(11,17,19,.98))!important;
  box-shadow:inset 0 0 0 1px rgba(198,216,208,.06)!important;
}
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionRow.topTarget{
  background:
    linear-gradient(90deg,rgba(180,156,88,.055),rgba(255,255,255,0) 28%),
    linear-gradient(180deg,rgba(18,26,28,.94),rgba(9,15,17,.95))!important;
}
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionRow.topTarget:hover{
  background:
    linear-gradient(90deg,rgba(180,156,88,.11),rgba(255,255,255,0) 30%),
    linear-gradient(180deg,rgba(23,32,34,.98),rgba(11,17,19,.98))!important;
}
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionRow.topTarget:after{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:2px;
  background:linear-gradient(180deg,rgba(199,171,84,.0),rgba(199,171,84,.55),rgba(199,171,84,.0));
  opacity:.55;
}
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .effMain{
  grid-template-columns:76px minmax(0,1fr)!important;
  gap:10px!important;
}
.retroEfficiencyList .effTankThumb{
  width:76px!important;
  height:44px!important;
}
.retroEfficiencyList .effTankThumb:before{
  display:none!important;
}
.retroEfficiencyList .effTankThumb img{
  width:72px!important;
  height:44px!important;
  filter:drop-shadow(0 6px 7px rgba(0,0,0,.68)) brightness(1.02)!important;
  opacity:.98!important;
}
.retroEfficiencyList .effPlayerName{
  font-size:15px!important;
  color:#f4f7f4!important;
}
.retroEfficiencyList .effVehicleName{
  margin-top:2px!important;
  font-size:13px!important;
  color:#b5bfba!important;
}
.retroEfficiencyList .topTargetBadge{
  display:inline-flex!important;
  align-items:center!important;
  width:max-content!important;
  margin-top:4px!important;
  padding:1px 6px!important;
  border:1px solid rgba(198,171,86,.24)!important;
  border-radius:10px!important;
  background:rgba(82,64,20,.28)!important;
  color:#dfc676!important;
  font-size:9px!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  opacity:0!important;
  transition:opacity .16s ease!important;
}
.retroEfficiencyList .interactionRow.topTarget:hover .topTargetBadge{opacity:.95!important}
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionNumbers{
  width:376px!important;
  max-width:376px!important;
  gap:5px!important;
  flex-wrap:nowrap!important;
  overflow:visible!important;
}
.retroEfficiencyList .effStatPill{
  position:relative!important;
  min-width:52px!important;
  height:26px!important;
  gap:5px!important;
  padding:0 8px!important;
  border-radius:4px!important;
  overflow:visible!important;
}
.retroEfficiencyList .effStatPill em{
  font-size:10px!important;
}
.retroEfficiencyList .effStatIcon{
  width:14px!important;
  height:14px!important;
}
.retroEfficiencyList .damagePill{
  border-color:rgba(215,231,222,.18)!important;
  background:linear-gradient(180deg,rgba(19,26,29,.96),rgba(12,18,20,.95))!important;
}
.retroEfficiencyList .damagePill em,.retroEfficiencyList .damagePill .effStatIcon{color:#f1f4f2!important}
.retroEfficiencyList .assistPill{
  border-color:rgba(231,185,77,.24)!important;
}
.retroEfficiencyList .killPill{
  border-color:rgba(151,213,69,.30)!important;
}
.retroEfficiencyList .receivedDamagePill{
  border-color:rgba(233,109,100,.26)!important;
  background:linear-gradient(180deg,rgba(96,36,32,var(--received-alpha,.32)),rgba(29,14,14,.88))!important;
}
.retroEfficiencyList .killPill[data-tip]:after{
  content:"Топ цель";
  display:none;
}

/* custom tooltip */
.retroEfficiencyList .effStatPill[data-tip]::after,
.retroEfficiencyList .effStatPill[data-tip]::before{
  position:absolute;
  left:50%;
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
  z-index:35;
}
.retroEfficiencyList .effStatPill[data-tip]::after{
  content:attr(data-tip);
  bottom:calc(100% + 10px);
  transform:translate(-50%,4px);
  min-width:max-content;
  max-width:220px;
  padding:7px 9px!important;
  border-radius:6px!important;
  border:1px solid rgba(223,231,226,.14)!important;
  background:linear-gradient(180deg,rgba(17,24,26,.98),rgba(8,12,15,.98))!important;
  color:#eef3ef!important;
  font-size:11px!important;
  line-height:1.25!important;
  white-space:normal!important;
  box-shadow:0 10px 20px rgba(0,0,0,.28)!important;
}
.retroEfficiencyList .effStatPill[data-tip]::before{
  content:"";
  bottom:calc(100% + 4px);
  transform:translate(-50%,4px) rotate(45deg);
  width:8px;height:8px;
  background:rgba(11,16,18,.98);
  border-right:1px solid rgba(223,231,226,.14);
  border-bottom:1px solid rgba(223,231,226,.14);
}
.retroEfficiencyList .effStatPill[data-tip]:hover::after,
.retroEfficiencyList .effStatPill[data-tip]:hover::before{
  opacity:1;
  transform:translate(-50%,0);
}

@media (max-width:1200px){
  .retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionRow{
    grid-template-columns:minmax(0,1fr) 336px!important;
  }
  .retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionNumbers{
    width:336px!important;
    max-width:336px!important;
  }
}
@media (max-width:850px){
  .retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionRow{
    height:auto!important;
    min-height:70px!important;
    grid-template-columns:1fr!important;
    padding:9px 10px!important;
  }
  .retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionNumbers{
    width:100%!important;
    max-width:none!important;
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
  }
}


/* ================================================================
   v0.3.5.57 — Collapse / reopen fix
   Keep the Battle Efficiency header and toggle visible at all times.
   Only the target list itself is collapsed.
   ================================================================ */
.personalExpandable.is-collapsed{display:block!important}
.effListBody{display:block!important}
.effListBody.is-collapsed{display:none!important}
.effListBody.is-open{display:block!important}
.personalExpandBtn.personalExpandBtnInline{
  min-width:132px!important;
}


/* ================================================================
   v0.3.5.58 — Efficiency row alignment + larger event numbers
   ================================================================ */
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .effMain{
  height:100%!important;
  align-items:center!important;
}
.retroEfficiencyList .effIdentity{
  height:100%!important;
  justify-content:center!important;
  align-self:center!important;
  transform:translateY(1px)!important;
}
.retroEfficiencyList .effPlayerName{
  line-height:1.05!important;
  margin:0!important;
}
.retroEfficiencyList .effVehicleName{
  line-height:1.05!important;
  margin-top:3px!important;
}
.retroEfficiencyList .effTankThumb{
  align-self:center!important;
}

/* Make combat-event values easier to read at a glance. */
.retroEfficiencyList .effStatPill{
  min-height:30px!important;
  height:30px!important;
  padding:0 10px!important;
}
.retroEfficiencyList .effStatPill em{
  font-size:13px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:.015em!important;
}
.retroEfficiencyList .effStatIcon{
  width:15px!important;
  height:15px!important;
}
.retroEfficiencyList .effStatPill.damagePill{min-width:76px!important}
.retroEfficiencyList .effStatPill.assistPill{min-width:66px!important}
.retroEfficiencyList .effStatPill.killPill{min-width:52px!important}
.retroEfficiencyList .effStatPill.receivedDamagePill{min-width:76px!important}


/* ================================================================
   v0.3.5.59 — Battle efficiency icon visibility + row centering
   ================================================================ */
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionRow{
  min-height:56px!important;
  height:56px!important;
}
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .effMain{
  display:grid!important;
  grid-template-columns:76px minmax(0,1fr)!important;
  align-items:center!important;
}
.retroEfficiencyList .effIdentity{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  height:100%!important;
  min-height:44px!important;
  gap:2px!important;
  transform:none!important;
}
.retroEfficiencyList .effPlayerName{
  display:block!important;
  line-height:1.02!important;
  margin:0!important;
}
.retroEfficiencyList .effVehicleName{
  display:block!important;
  line-height:1.02!important;
  margin:0!important;
}
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionNumbers{
  align-items:center!important;
}
.retroEfficiencyList .effStatPill{
  min-height:32px!important;
  height:32px!important;
  padding:0 11px!important;
  border-width:1px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 0 0 1px rgba(0,0,0,.12)!important;
}
.retroEfficiencyList .effStatIcon{
  width:16px!important;
  height:16px!important;
  opacity:1!important;
  filter:drop-shadow(0 0 3px currentColor)!important;
}
.retroEfficiencyList .effStatPill em{
  font-size:14px!important;
  font-weight:900!important;
}
.retroEfficiencyList .damagePill{
  border-color:rgba(216,228,222,.26)!important;
  background:linear-gradient(180deg,rgba(20,28,31,.98),rgba(11,16,18,.96))!important;
}
.retroEfficiencyList .damagePill .effStatIcon{
  color:#eef3ef!important;
}
.retroEfficiencyList .assistPill{
  border-color:rgba(236,191,84,.34)!important;
  background:linear-gradient(180deg,rgba(69,56,16,.38),rgba(20,18,10,.94))!important;
}
.retroEfficiencyList .assistPill em,.retroEfficiencyList .assistPill .effStatIcon{
  color:#f0c55e!important;
}
.retroEfficiencyList .killPill{
  border-color:rgba(255,118,110,.36)!important;
  background:linear-gradient(180deg,rgba(92,35,32,.42),rgba(29,14,14,.92))!important;
}
.retroEfficiencyList .killPill em,.retroEfficiencyList .killPill .effStatIcon{
  color:#ff7d73!important;
}
.retroEfficiencyList .receivedDamagePill{
  border-color:rgba(233,109,100,.34)!important;
  background:linear-gradient(180deg,rgba(111,41,38,var(--received-alpha,.36)),rgba(33,14,14,.92))!important;
}
.retroEfficiencyList .receivedDamagePill em,.retroEfficiencyList .receivedDamagePill .effStatIcon{
  color:#ff8f86!important;
}
.retroEfficiencyList .effStatPill[data-tip]{
  cursor:help!important;
}
.retroEfficiencyList .effStatPill[data-tip]::after{
  max-width:180px!important;
  font-weight:700!important;
  text-align:center!important;
}
@media (max-width:850px){
  .retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionRow{
    height:auto!important;
    min-height:74px!important;
  }
}


/* ================================================================
   v0.3.5.60 — Battle efficiency final icon clarity polish
   ================================================================ */
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionRow{
  min-height:58px!important;
  height:58px!important;
  align-items:center!important;
}
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .effMain{
  display:grid!important;
  grid-template-columns:76px minmax(0,1fr)!important;
  gap:10px!important;
  align-items:center!important;
}
.retroEfficiencyList .interactionTank{
  display:grid!important;
  align-items:center!important;
  justify-items:center!important;
}
.retroEfficiencyList .effIdentity{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  align-self:center!important;
  min-height:44px!important;
  line-height:1.05!important;
  padding-top:1px!important;
}
.retroEfficiencyList .effPlayerName{
  font-size:13px!important;
  font-weight:900!important;
  line-height:1.02!important;
  margin:0!important;
}
.retroEfficiencyList .effVehicleName{
  font-size:12px!important;
  color:#d9e3de!important;
  line-height:1.02!important;
  margin-top:2px!important;
}
.retroEfficiencyList .cinematicInteractionGrid.stableAllTargets .interactionNumbers{
  gap:6px!important;
  align-items:center!important;
}
.retroEfficiencyList .effStatPill{
  min-height:34px!important;
  height:34px!important;
  padding:0 12px!important;
  border-radius:4px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 0 10px rgba(0,0,0,.14)!important;
}
.retroEfficiencyList .effStatPill .effStatIcon{
  width:18px!important;
  height:18px!important;
  opacity:1!important;
  filter:drop-shadow(0 0 4px currentColor)!important;
}
.retroEfficiencyList .effStatPill em{
  font-size:15px!important;
  font-weight:900!important;
  line-height:1!important;
}
.retroEfficiencyList .effStatPill.damagePill{
  min-width:78px!important;
  border-color:rgba(228,235,230,.20)!important;
  background:linear-gradient(180deg,rgba(22,30,34,.98),rgba(10,14,17,.96))!important;
}
.retroEfficiencyList .effStatPill.damagePill .effStatIcon,
.retroEfficiencyList .effStatPill.damagePill em{
  color:#eff4f1!important;
}
.retroEfficiencyList .effStatPill.assistPill{
  min-width:72px!important;
  border-color:rgba(240,190,78,.38)!important;
  background:linear-gradient(180deg,rgba(91,69,19,.42),rgba(29,21,9,.94))!important;
}
.retroEfficiencyList .effStatPill.assistPill .effStatIcon,
.retroEfficiencyList .effStatPill.assistPill em{
  color:#f2c35b!important;
}
.retroEfficiencyList .effStatPill.killPill{
  min-width:58px!important;
  border-color:rgba(255,116,106,.40)!important;
  background:linear-gradient(180deg,rgba(102,36,32,.46),rgba(34,13,13,.94))!important;
}
.retroEfficiencyList .effStatPill.killPill .effStatIcon,
.retroEfficiencyList .effStatPill.killPill em{
  color:#ff7d74!important;
}
.retroEfficiencyList .effStatPill.receivedDamagePill{
  min-width:78px!important;
  border-color:rgba(239,117,105,.42)!important;
  background:linear-gradient(180deg,rgba(118,40,36,var(--received-alpha,.40)),rgba(34,13,13,.96))!important;
}
.retroEfficiencyList .effStatPill.receivedDamagePill .effStatIcon,
.retroEfficiencyList .effStatPill.receivedDamagePill em{
  color:#ff9289!important;
}
.retroEfficiencyList .effStatPill[data-tip],
.retroEfficiencyList .effStatPill[title]{
  cursor:help!important;
}
.retroEfficiencyList .effStatPill[data-tip]::after{
  max-width:220px!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
}


/* ================================================================
   v0.3.5.61 — Hero final micro-polish + tank card alignment
   Micro-TZ implemented:
   1) Shift the hero tank card a bit left/up so it sits optically centered.
   2) Clean the premium frame so it feels lighter and more deliberate.
   3) Lift map readability a touch without breaking the dark premium mood.
   4) Keep the battle-efficiency section untouched structurally.
   ================================================================ */

.approvedHeroBg{
  filter:saturate(1.00) contrast(1.035) brightness(1.145)!important;
}
.approvedHeroGlow{
  background:
    radial-gradient(circle at 18% 43%, rgba(108,219,42,.18), transparent 24%),
    radial-gradient(circle at 85% 16%, rgba(255,228,164,.20), transparent 26%)!important;
}
.approvedReplayHero.classicIconHero .approvedHeroTank.classicHeaderTankIcon{
  right:4.2%!important;
  top:74px!important;
  width:clamp(236px,20.8vw,324px)!important;
  height:232px!important;
  padding:10px 12px 12px!important;
  object-fit:contain!important;
  object-position:52% 50%!important;
  border-radius:13px!important;
  border:1px solid rgba(228,236,240,.18)!important;
  background:linear-gradient(180deg,rgba(20,30,35,.22),rgba(8,13,15,.10))!important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 0 0 1px rgba(255,255,255,.035)!important;
  backdrop-filter:blur(10px) saturate(1.03)!important;
}
@media (max-width:1200px){
  .approvedReplayHero.classicIconHero .approvedHeroTank.classicHeaderTankIcon{
    right:4.5%!important;
    top:122px!important;
    width:244px!important;
    height:206px!important;
    object-position:52% 50%!important;
  }
}
@media (max-width:850px){
  .approvedReplayHero.classicIconHero .approvedHeroTank.classicHeaderTankIcon{
    right:2.2%!important;
    top:226px!important;
    width:208px!important;
    height:170px!important;
  }
}


/* ================================================================
   v0.3.5.62 — Hero icon-shape outline + battle-efficiency icon visibility
   Micro-TZ:
   1) Remove the rectangular feeling around the hero tank art.
   2) Make the outline feel attached to the tank silhouette itself.
   3) Make battle-efficiency event icons instantly visible and readable.
   4) Keep the premium dark look, but improve glance readability.
   ================================================================ */

.approvedReplayHero.classicIconHero .approvedHeroTank.classicHeaderTankIcon{
  right:4.35%!important;
  top:78px!important;
  width:clamp(238px,20.8vw,320px)!important;
  height:230px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  object-fit:contain!important;
  object-position:52% 50%!important;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.40))
    drop-shadow(0 0 6px rgba(255,255,255,.08))
    drop-shadow(0 10px 22px rgba(0,0,0,.32))
    drop-shadow(0 18px 34px rgba(0,0,0,.18))!important;
}
.approvedReplayHero.classicIconHero:hover .approvedHeroTank.classicHeaderTankIcon{
  transform:none!important;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.46))
    drop-shadow(0 0 7px rgba(255,255,255,.10))
    drop-shadow(0 12px 24px rgba(0,0,0,.34))
    drop-shadow(0 20px 36px rgba(0,0,0,.20))!important;
}

.retroEfficiencyList .effStatPill{
  min-height:36px!important;
  height:36px!important;
  gap:8px!important;
  padding:0 13px!important;
  border-radius:5px!important;
}
.retroEfficiencyList .effStatPill .effStatIcon{
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  opacity:1!important;
  filter:
    drop-shadow(0 0 1px rgba(0,0,0,.65))
    drop-shadow(0 0 4px currentColor)!important;
  transform:translateY(.2px)!important;
}
.retroEfficiencyList .effStatPill em{
  font-size:16px!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
  text-shadow:0 0 1px rgba(0,0,0,.28)!important;
}
.retroEfficiencyList .effStatPill.damagePill{
  min-width:84px!important;
  border-color:rgba(239,244,241,.24)!important;
  background:linear-gradient(180deg,rgba(26,34,38,.99),rgba(10,14,17,.97))!important;
}
.retroEfficiencyList .effStatPill.damagePill .effStatIcon,
.retroEfficiencyList .effStatPill.damagePill em{
  color:#f6faf7!important;
}
.retroEfficiencyList .effStatPill.assistPill{
  min-width:74px!important;
  border-color:rgba(244,197,82,.44)!important;
  background:linear-gradient(180deg,rgba(98,73,18,.50),rgba(33,24,8,.96))!important;
}
.retroEfficiencyList .effStatPill.assistPill .effStatIcon,
.retroEfficiencyList .effStatPill.assistPill em{
  color:#ffcd63!important;
}
.retroEfficiencyList .effStatPill.killPill{
  min-width:60px!important;
  border-color:rgba(255,119,111,.46)!important;
  background:linear-gradient(180deg,rgba(109,39,35,.54),rgba(38,13,13,.96))!important;
}
.retroEfficiencyList .effStatPill.killPill .effStatIcon,
.retroEfficiencyList .effStatPill.killPill em{
  color:#ff7a73!important;
}
.retroEfficiencyList .effStatPill.receivedDamagePill{
  min-width:84px!important;
  border-color:rgba(247,122,112,.46)!important;
  background:linear-gradient(180deg,rgba(124,43,38,var(--received-alpha,.42)),rgba(38,13,13,.97))!important;
}
.retroEfficiencyList .effStatPill.receivedDamagePill .effStatIcon,
.retroEfficiencyList .effStatPill.receivedDamagePill em{
  color:#ff938a!important;
}
@media (max-width:1200px){
  .approvedReplayHero.classicIconHero .approvedHeroTank.classicHeaderTankIcon{
    right:4.7%!important;
    top:120px!important;
    width:240px!important;
    height:206px!important;
  }
}
@media (max-width:850px){
  .approvedReplayHero.classicIconHero .approvedHeroTank.classicHeaderTankIcon{
    right:2.4%!important;
    top:224px!important;
    width:202px!important;
    height:168px!important;
  }
}


/* ================================================================
   v0.3.5.63 — BATTLE EFFICIENCY COLUMN HEADERS POLISH
   Fixed semantic columns: Вы нанесли / Вы помогли / Уничтожили / Получили.
   Rows contain only icon + value in their fixed column.
   ================================================================ */

.efficiencyHeaderV63{
  min-height:72px!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
  padding:12px 16px!important;
}
.efficiencyHeaderV63>div:first-child{min-width:0!important}
.efficiencyHeaderV63 .personalExpandBtnInline{
  flex:0 0 auto!important;
  margin-left:auto!important;
}

.efficiencyColumnLabelsV63{
  height:42px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 392px!important;
  gap:14px!important;
  align-items:center!important;
  padding:0 14px!important;
  border-top:1px solid rgba(215,231,222,.06)!important;
  border-bottom:1px solid rgba(215,231,222,.09)!important;
  background:linear-gradient(180deg,rgba(14,20,22,.95),rgba(8,13,15,.97))!important;
}
.efficiencyColumnLabelsV63 .effTechHeader{
  font-size:10px!important;
  color:#88958f!important;
  letter-spacing:.07em!important;
  text-transform:uppercase!important;
}
.effEventHeaders{
  width:392px!important;
  display:grid!important;
  grid-template-columns:94px 94px 94px 94px!important;
  gap:5px!important;
  align-items:center!important;
}
.effEventHeaders>span{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:28px!important;
  font-family:var(--approved-font)!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.025em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  border-bottom:1px solid transparent!important;
}
.effEventHeaders .damageHead{color:#eaf0ed!important;border-color:rgba(232,240,236,.18)!important}
.effEventHeaders .assistHead{color:#f1c45c!important;border-color:rgba(241,196,92,.25)!important}
.effEventHeaders .killHead{color:#ff7d75!important;border-color:rgba(255,125,117,.28)!important}
.effEventHeaders .receivedHead{color:#ff948c!important;border-color:rgba(255,148,140,.26)!important}

.efficiencyColumnsV63 .cinematicInteractionGrid.stableAllTargets .interactionRow{
  grid-template-columns:minmax(0,1fr) 392px!important;
  gap:14px!important;
  min-height:58px!important;
  height:58px!important;
  padding:0 14px!important;
}
.efficiencyColumnsV63 .interactionNumbers.effEventGrid{
  width:392px!important;
  max-width:392px!important;
  display:grid!important;
  grid-template-columns:94px 94px 94px 94px!important;
  gap:5px!important;
  align-items:center!important;
  justify-content:initial!important;
  overflow:visible!important;
}
.effEventCell{
  width:94px!important;
  min-width:94px!important;
  height:38px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
}
.effEventCell.empty{
  opacity:1!important;
  border:0!important;
  background:transparent!important;
}
.efficiencyColumnsV63 .effStatPill{
  width:88px!important;
  min-width:88px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 9px!important;
  gap:7px!important;
  justify-content:center!important;
  border-radius:5px!important;
}
.efficiencyColumnsV63 .effStatPill .effStatIcon{
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  opacity:1!important;
}
.efficiencyColumnsV63 .effStatPill em{
  font-size:15px!important;
  font-weight:900!important;
  line-height:1!important;
}
.efficiencyColumnsV63 .damagePill{
  border-color:rgba(235,242,238,.26)!important;
  background:linear-gradient(180deg,rgba(25,34,38,.99),rgba(10,15,18,.98))!important;
}
.efficiencyColumnsV63 .assistPill{
  border-color:rgba(241,194,78,.44)!important;
  background:linear-gradient(180deg,rgba(92,69,18,.48),rgba(31,23,8,.97))!important;
}
.efficiencyColumnsV63 .killPill{
  border-color:rgba(255,117,108,.48)!important;
  background:linear-gradient(180deg,rgba(105,36,33,.55),rgba(36,13,13,.97))!important;
}
.efficiencyColumnsV63 .receivedDamagePill{
  border-color:rgba(246,120,110,.46)!important;
  background:linear-gradient(180deg,rgba(122,42,37,var(--received-alpha,.42)),rgba(37,13,13,.98))!important;
}

@media (max-width:1200px){
  .efficiencyColumnLabelsV63,
  .efficiencyColumnsV63 .cinematicInteractionGrid.stableAllTargets .interactionRow{
    grid-template-columns:minmax(0,1fr) 356px!important;
  }
  .effEventHeaders,
  .efficiencyColumnsV63 .interactionNumbers.effEventGrid{
    width:356px!important;
    max-width:356px!important;
    grid-template-columns:86px 86px 86px 86px!important;
    gap:4px!important;
  }
  .effEventCell{width:86px!important;min-width:86px!important}
  .efficiencyColumnsV63 .effStatPill{width:82px!important;min-width:82px!important}
  .effEventHeaders>span{font-size:9px!important}
}
@media (max-width:850px){
  .efficiencyHeaderV63{align-items:flex-start!important;flex-direction:column!important}
  .efficiencyHeaderV63 .personalExpandBtnInline{margin-left:0!important}
  .efficiencyColumnLabelsV63{
    grid-template-columns:1fr!important;
    height:auto!important;
    padding:8px 10px!important;
  }
  .effEventHeaders{
    width:100%!important;
    grid-template-columns:repeat(4,minmax(70px,1fr))!important;
  }
  .efficiencyColumnsV63 .cinematicInteractionGrid.stableAllTargets .interactionRow{
    grid-template-columns:1fr!important;
    height:auto!important;
    min-height:86px!important;
    padding:8px 10px!important;
  }
  .efficiencyColumnsV63 .interactionNumbers.effEventGrid{
    width:100%!important;
    max-width:none!important;
    grid-template-columns:repeat(4,minmax(70px,1fr))!important;
  }
  .effEventCell{width:auto!important;min-width:0!important}
  .efficiencyColumnsV63 .effStatPill{width:100%!important;min-width:0!important}
}


/* ================================================================
   v0.3.5.65 — CLEAN EVENT FRAMES + GLOWING GAME ICONS

   Strict visual contract:
   - event cell itself has NO border/background/padding;
   - only the actual value pill has one clean frame;
   - icon itself has NO inner box/frame/padding;
   - icon mask is forced to currentColor so it remains clearly visible;
   - empty cells are completely transparent;
   - one consistent geometry across damage / assist / kill / received.
   ================================================================ */

/* Kill old generic .interactionNumbers span styling on the V63/V65 grid. */
.efficiencyColumnsV63 .interactionNumbers.effEventGrid > .effEventCell,
.efficiencyColumnsV63 .interactionNumbers.effEventGrid > span.effEventCell{
  width:94px!important;
  min-width:94px!important;
  height:40px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
}
.efficiencyColumnsV63 .interactionNumbers.effEventGrid > .effEventCell.empty{
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:1!important;
}

/* Exactly ONE frame: the pill itself. */
.efficiencyColumnsV63 .effEventCell > .effStatPill{
  width:88px!important;
  min-width:88px!important;
  height:36px!important;
  min-height:36px!important;
  margin:0!important;
  padding:0 10px!important;
  gap:7px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-width:1px!important;
  border-style:solid!important;
  border-radius:5px!important;
  outline:0!important;
  overflow:visible!important;
  box-sizing:border-box!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 3px 8px rgba(0,0,0,.16)!important;
}

/* Critical fix: old generic .interactionNumbers span rule was painting a box
   on the mask icon itself. Strip it completely and force the icon fill. */
.efficiencyColumnsV63 .effEventCell > .effStatPill > .effStatIcon,
.efficiencyColumnsV63 .effEventCell > .effStatPill > span.effStatIcon{
  width:21px!important;
  min-width:21px!important;
  height:21px!important;
  min-height:21px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:currentColor!important;
  opacity:1!important;
  flex:0 0 21px!important;
  -webkit-mask:var(--ui-icon) center/contain no-repeat!important;
  mask:var(--ui-icon) center/contain no-repeat!important;
}
.efficiencyColumnsV63 .effEventCell > .effStatPill > em{
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:15px!important;
  font-weight:900!important;
  line-height:1!important;
  font-style:normal!important;
  letter-spacing:.012em!important;
}

/* DAMAGE — bright neutral hit/target icon. */
.efficiencyColumnsV63 .effEventCell > .damagePill{
  color:#f4faf7!important;
  border-color:rgba(222,236,230,.28)!important;
  background:linear-gradient(180deg,rgba(24,34,38,.98),rgba(10,16,19,.98))!important;
}
.efficiencyColumnsV63 .effEventCell > .damagePill > .effStatIcon{
  color:#f4faf7!important;
  filter:
    drop-shadow(0 0 2px rgba(244,250,247,.82))
    drop-shadow(0 0 7px rgba(208,230,220,.38))!important;
}
.efficiencyColumnsV63 .effEventCell > .damagePill > em{color:#f6faf8!important}

/* ASSIST — unmistakable yellow binoculars. */
.efficiencyColumnsV63 .effEventCell > .assistPill{
  color:#ffd15f!important;
  border-color:rgba(244,194,68,.48)!important;
  background:linear-gradient(180deg,rgba(96,70,14,.54),rgba(34,24,7,.98))!important;
}
.efficiencyColumnsV63 .effEventCell > .assistPill > .effStatIcon{
  color:#ffd15f!important;
  filter:
    drop-shadow(0 0 2px rgba(255,209,95,.90))
    drop-shadow(0 0 8px rgba(244,181,52,.52))!important;
}
.efficiencyColumnsV63 .effEventCell > .assistPill > em{color:#ffd15f!important}

/* KILL — bright red tank icon. */
.efficiencyColumnsV63 .effEventCell > .killPill{
  color:#ff7068!important;
  border-color:rgba(255,102,94,.52)!important;
  background:linear-gradient(180deg,rgba(111,34,31,.62),rgba(39,12,12,.98))!important;
}
.efficiencyColumnsV63 .effEventCell > .killPill > .effStatIcon{
  color:#ff7068!important;
  filter:
    drop-shadow(0 0 2px rgba(255,112,104,.94))
    drop-shadow(0 0 8px rgba(255,72,66,.55))!important;
}
.efficiencyColumnsV63 .effEventCell > .killPill > em{color:#ff817a!important}

/* RECEIVED — deeper red shield/hit icon, visually separate from kill. */
.efficiencyColumnsV63 .effEventCell > .receivedDamagePill{
  color:#ff9289!important;
  border-color:rgba(237,100,91,.50)!important;
  background:linear-gradient(180deg,rgba(119,38,34,var(--received-alpha,.48)),rgba(43,13,13,.98))!important;
}
.efficiencyColumnsV63 .effEventCell > .receivedDamagePill > .effStatIcon{
  color:#ff9289!important;
  filter:
    drop-shadow(0 0 2px rgba(255,146,137,.92))
    drop-shadow(0 0 8px rgba(220,64,58,.48))!important;
}
.efficiencyColumnsV63 .effEventCell > .receivedDamagePill > em{color:#ff968e!important}

/* Hover: brighten only; never add another border/frame. */
.efficiencyColumnsV63 .effEventCell > .effStatPill:hover{
  transform:translateY(-1px)!important;
  filter:brightness(1.10)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.065),
    0 5px 12px rgba(0,0,0,.20)!important;
}

/* Tooltip stays above the single pill and has no impact on cell geometry. */
.efficiencyColumnsV63 .effEventCell > .effStatPill[data-tip]::after{
  z-index:80!important;
}
.efficiencyColumnsV63 .effEventCell > .effStatPill[data-tip]::before{
  z-index:79!important;
}

@media (max-width:1200px){
  .efficiencyColumnsV63 .interactionNumbers.effEventGrid > .effEventCell,
  .efficiencyColumnsV63 .interactionNumbers.effEventGrid > span.effEventCell{
    width:86px!important;
    min-width:86px!important;
  }
  .efficiencyColumnsV63 .effEventCell > .effStatPill{
    width:82px!important;
    min-width:82px!important;
    padding:0 8px!important;
  }
}
@media (max-width:850px){
  .efficiencyColumnsV63 .interactionNumbers.effEventGrid > .effEventCell,
  .efficiencyColumnsV63 .interactionNumbers.effEventGrid > span.effEventCell{
    width:auto!important;
    min-width:0!important;
  }
  .efficiencyColumnsV63 .effEventCell > .effStatPill{
    width:100%!important;
    min-width:0!important;
  }
}


/* ================================================================
   v0.3.5.66 — Tooltip cleanup fix
   - remove native browser tooltip (white box from title attr)
   - force all event pills to use one custom dark tooltip only
   - repair the kill tooltip where an older rule hid the text body and left
     only the little arrow/square visible
   ================================================================ */
.efficiencyColumnsV63 .effEventCell > .effStatPill[data-tip],
.efficiencyColumnsV63 .effEventCell > .killPill[data-tip],
.efficiencyColumnsV63 .effEventCell > .assistPill[data-tip],
.efficiencyColumnsV63 .effEventCell > .damagePill[data-tip],
.efficiencyColumnsV63 .effEventCell > .receivedDamagePill[data-tip]{
  cursor:help!important;
}

/* One tooltip system for every event pill. */
.efficiencyColumnsV63 .effEventCell > .effStatPill[data-tip]::after,
.efficiencyColumnsV63 .effEventCell > .killPill[data-tip]::after,
.efficiencyColumnsV63 .effEventCell > .assistPill[data-tip]::after,
.efficiencyColumnsV63 .effEventCell > .damagePill[data-tip]::after,
.efficiencyColumnsV63 .effEventCell > .receivedDamagePill[data-tip]::after{
  content:attr(data-tip)!important;
  display:block!important;
  position:absolute!important;
  left:50%!important;
  bottom:calc(100% + 10px)!important;
  transform:translate(-50%,4px)!important;
  min-width:max-content!important;
  max-width:230px!important;
  padding:7px 10px!important;
  border-radius:6px!important;
  border:1px solid rgba(229,236,232,.14)!important;
  background:linear-gradient(180deg,rgba(17,24,26,.99),rgba(7,11,13,.99))!important;
  color:#f2f5f3!important;
  font-family:var(--approved-font)!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.25!important;
  text-align:center!important;
  white-space:nowrap!important;
  box-shadow:0 10px 24px rgba(0,0,0,.34)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  z-index:90!important;
  transition:opacity .14s ease,transform .14s ease,visibility .14s ease!important;
}
.efficiencyColumnsV63 .effEventCell > .effStatPill[data-tip]::before,
.efficiencyColumnsV63 .effEventCell > .killPill[data-tip]::before,
.efficiencyColumnsV63 .effEventCell > .assistPill[data-tip]::before,
.efficiencyColumnsV63 .effEventCell > .damagePill[data-tip]::before,
.efficiencyColumnsV63 .effEventCell > .receivedDamagePill[data-tip]::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:50%!important;
  bottom:calc(100% + 5px)!important;
  width:8px!important;
  height:8px!important;
  transform:translate(-50%,4px) rotate(45deg)!important;
  background:rgba(9,14,16,.99)!important;
  border-right:1px solid rgba(229,236,232,.14)!important;
  border-bottom:1px solid rgba(229,236,232,.14)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  z-index:89!important;
  transition:opacity .14s ease,transform .14s ease,visibility .14s ease!important;
}
.efficiencyColumnsV63 .effEventCell > .effStatPill[data-tip]:hover::after,
.efficiencyColumnsV63 .effEventCell > .killPill[data-tip]:hover::after,
.efficiencyColumnsV63 .effEventCell > .assistPill[data-tip]:hover::after,
.efficiencyColumnsV63 .effEventCell > .damagePill[data-tip]:hover::after,
.efficiencyColumnsV63 .effEventCell > .receivedDamagePill[data-tip]:hover::after{
  opacity:1!important;
  visibility:visible!important;
  transform:translate(-50%,0)!important;
}
.efficiencyColumnsV63 .effEventCell > .effStatPill[data-tip]:hover::before,
.efficiencyColumnsV63 .effEventCell > .killPill[data-tip]:hover::before,
.efficiencyColumnsV63 .effEventCell > .assistPill[data-tip]:hover::before,
.efficiencyColumnsV63 .effEventCell > .damagePill[data-tip]:hover::before,
.efficiencyColumnsV63 .effEventCell > .receivedDamagePill[data-tip]:hover::before{
  opacity:1!important;
  visibility:visible!important;
  transform:translate(-50%,0) rotate(45deg)!important;
}


/* ================================================================
   v0.3.5.67 — TOOLTIP HARD FIX + CACHE BUST
   One tooltip only: body-level floating tooltip. All pill pseudo tooltips are
   disabled to eliminate the kill-square artifact and CSS-rule collisions.
   ================================================================ */
.efficiencyColumnsV63 .effEventCell > .effStatPill[data-tip]::before,
.efficiencyColumnsV63 .effEventCell > .effStatPill[data-tip]::after,
.retroEfficiencyList .effStatPill[data-tip]::before,
.retroEfficiencyList .effStatPill[data-tip]::after,
.retroEfficiencyList .killPill[data-tip]::before,
.retroEfficiencyList .killPill[data-tip]::after{
  content:none!important;
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}
.effStatPill[data-tip]{cursor:help!important}

.effFloatingTooltip{
  position:fixed!important;
  z-index:99999!important;
  left:0;
  top:0;
  transform:translate(-50%,-100%) translateY(4px);
  max-width:260px;
  padding:8px 11px;
  border-radius:6px;
  border:1px solid rgba(232,238,235,.16);
  background:linear-gradient(180deg,rgba(16,22,24,.995),rgba(5,8,10,.995));
  color:#f4f7f5;
  font-family:var(--approved-font,Inter,"Segoe UI",Arial,sans-serif);
  font-size:12px;
  line-height:1.25;
  font-weight:800;
  text-align:center;
  white-space:nowrap;
  box-shadow:0 12px 28px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.035);
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
}
.effFloatingTooltip::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-5px;
  width:9px;
  height:9px;
  transform:translateX(-50%) rotate(45deg);
  background:#070b0d;
  border-right:1px solid rgba(232,238,235,.16);
  border-bottom:1px solid rgba(232,238,235,.16);
}
.effFloatingTooltip.show{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-100%) translateY(0);
}

/* ================================================================
   v0.3.5.68 — Player WR header stats
   ================================================================ */
.approvedPlayerMetaRow{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  min-height:27px!important;
  margin-top:2px!important;
}
.approvedPlayerMetaRow .approvedSurvival{
  margin:0!important;
  white-space:nowrap!important;
}
.approvedPlayerStats{
  --wr:#89958f;
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  height:24px!important;
  padding:0 9px!important;
  border-radius:4px!important;
  border:1px solid color-mix(in srgb,var(--wr) 48%,transparent)!important;
  background:linear-gradient(180deg,rgba(10,16,18,.86),rgba(6,11,13,.92))!important;
  box-shadow:0 0 9px color-mix(in srgb,var(--wr) 15%,transparent),inset 0 1px 0 rgba(255,255,255,.035)!important;
  color:var(--wr)!important;
  cursor:default!important;
  z-index:12!important;
}
.approvedPlayerStats>strong{
  font-family:var(--approved-font)!important;
  color:var(--wr)!important;
  font-size:14px!important;
  line-height:1!important;
  font-weight:900!important;
  text-shadow:0 0 7px color-mix(in srgb,var(--wr) 38%,transparent)!important;
  white-space:nowrap!important;
}
.approvedPlayerStats>small{
  color:#abb5b0!important;
  font-size:9px!important;
  font-weight:700!important;
  white-space:nowrap!important;
  text-transform:uppercase!important;
}
.approvedPlayerStats.wrRed{--wr:#ff635c}
.approvedPlayerStats.wrYellow{--wr:#f3c64f}
.approvedPlayerStats.wrGreen{--wr:#8fd248}
.approvedPlayerStats.wrCyan{--wr:#4fd5e7}
.approvedPlayerStats.wrPurple{--wr:#bd75ff}
.approvedPlayerStats.wrUnknown{--wr:#7f8a85;opacity:.86}
.playerStatsHover{
  position:absolute!important;
  left:0!important;
  bottom:calc(100% + 9px)!important;
  width:225px!important;
  padding:10px 11px!important;
  border-radius:7px!important;
  border:1px solid color-mix(in srgb,var(--wr) 28%,rgba(222,232,226,.08))!important;
  background:linear-gradient(180deg,rgba(16,23,26,.985),rgba(7,11,13,.99))!important;
  box-shadow:0 14px 34px rgba(0,0,0,.34),0 0 14px color-mix(in srgb,var(--wr) 9%,transparent)!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translateY(5px)!important;
  transition:opacity .14s ease,transform .14s ease,visibility .14s ease!important;
  pointer-events:none!important;
  color:#e9eeeb!important;
}
.approvedPlayerStats:hover .playerStatsHover{
  opacity:1!important;
  visibility:visible!important;
  transform:translateY(0)!important;
}
.playerStatsHover>b{
  display:block!important;
  margin-bottom:7px!important;
  color:var(--wr)!important;
  font-family:var(--approved-font)!important;
  font-size:10px!important;
  letter-spacing:.07em!important;
}
.playerStatsHover>span{
  display:flex!important;
  justify-content:space-between!important;
  gap:10px!important;
  min-height:23px!important;
  align-items:center!important;
  border-top:1px solid rgba(222,232,226,.065)!important;
}
.playerStatsHover i{
  color:#89958f!important;
  font-style:normal!important;
  font-size:10px!important;
}
.playerStatsHover span strong{
  color:#edf2ef!important;
  font-size:11px!important;
}
.playerStatsHover>small{
  display:block!important;
  padding-top:7px!important;
  color:#6f7b75!important;
  font-size:9px!important;
}
@media(max-width:850px){
  .approvedPlayerMetaRow{flex-wrap:wrap!important;gap:5px 8px!important}
  .approvedPlayerStats{height:22px!important}
}


/* ================================================================
   v0.3.5.70 — HERO PLAYER IDENTITY + WR CLASS TOOLTIP FIX
   ================================================================ */
.approvedHeroCopy{overflow:visible!important}
.approvedTankTitle.approvedIdentityTitle{
  height:auto!important;
  min-height:58px!important;
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
}
.approvedTankTitle.approvedIdentityTitle>.approvedPlayerName,
.approvedTankTitle.approvedIdentityTitle>strong{
  font-size:52px!important;
  line-height:.94!important;
  font-weight:760!important;
  letter-spacing:.006em!important;
  color:#f5f7f5!important;
  text-transform:none!important;
}
.approvedPlayerMetaLine{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  margin-top:8px!important;
  min-height:24px!important;
  color:#a7b0ab!important;
  font-family:var(--approved-font)!important;
  font-size:16px!important;
  letter-spacing:.01em!important;
}
.approvedVehicleName{
  color:#dfe5e2!important;
  font-weight:700!important;
}
.approvedMetaSeparator{
  color:#69746f!important;
  font-weight:700!important;
}
.approvedPlayerMetaLine .approvedSurvival{
  margin:0!important;
  color:#98a39e!important;
  font-size:15px!important;
  white-space:nowrap!important;
}
.approvedPlayerStatsRow{
  margin-top:11px!important;
  min-height:34px!important;
}
.approvedPlayerMetaRow{
  position:relative!important;
  overflow:visible!important;
}
.approvedPlayerStats{
  gap:10px!important;
  min-height:28px!important;
  height:auto!important;
  padding:6px 11px!important;
  border-radius:5px!important;
  border:1px solid color-mix(in srgb,var(--wr) 54%,rgba(255,255,255,.05))!important;
  background:linear-gradient(180deg,rgba(11,17,19,.88),rgba(6,10,12,.95))!important;
  box-shadow:0 0 13px color-mix(in srgb,var(--wr) 13%,transparent),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.approvedPlayerStats>strong{
  font-size:16px!important;
  text-shadow:0 0 10px color-mix(in srgb,var(--wr) 44%,transparent)!important;
}
.approvedPlayerStats>small{
  font-size:10px!important;
  color:#b9c2bd!important;
  letter-spacing:.06em!important;
}
.playerStatsHover{
  left:0!important;
  top:calc(100% + 10px)!important;
  bottom:auto!important;
  width:250px!important;
  padding:11px 12px!important;
  border-radius:8px!important;
  z-index:80!important;
  transform:translateY(-4px)!important;
}
.approvedPlayerStats:hover .playerStatsHover{
  transform:translateY(0)!important;
}
.playerStatsHover>b{
  margin-bottom:8px!important;
  font-size:10px!important;
}
.playerStatsHover>span{
  min-height:24px!important;
}
.playerStatsHover i{
  font-size:10px!important;
  color:#85928c!important;
}
.playerStatsHover span strong{
  font-size:12px!important;
}
.playerStatsHover>small{
  padding-top:8px!important;
  font-size:9px!important;
}
@media(max-width:1280px){
  .approvedTankTitle.approvedIdentityTitle>.approvedPlayerName,
  .approvedTankTitle.approvedIdentityTitle>strong{font-size:46px!important}
  .approvedPlayerMetaLine{font-size:15px!important}
}
@media(max-width:850px){
  .approvedTankTitle.approvedIdentityTitle>.approvedPlayerName,
  .approvedTankTitle.approvedIdentityTitle>strong{font-size:38px!important}
  .approvedPlayerMetaLine{flex-wrap:wrap!important;gap:5px 8px!important}
  .playerStatsHover{width:232px!important}
}


/* ================================================================
   v0.3.5.71 — PLAYER WR CHIP ONLY / NO HOVER POPUP
   ================================================================ */
.approvedPlayerMetaLine{
  overflow:visible!important;
  flex-wrap:wrap!important;
}
.approvedPlayerMetaLine .approvedPlayerStats{
  margin-left:4px!important;
  flex:0 0 auto!important;
}
.approvedPlayerStats{
  cursor:default!important;
}
/* Tooltip/card is intentionally disabled in this version. */
.playerStatsHover{
  display:none!important;
}
/* One less hero row: lift victory/awards back toward the approved baseline. */
.approvedHeroCopy h1{
  margin-top:18px!important;
}
.approvedAwardsRail{
  margin-top:12px!important;
}


/* ================================================================
   v0.3.5.72 — HERO MEDALS LIFT MICROFIX
   ================================================================ */
/* Lift only the visual medal rail. Do not move player identity, WR, victory,
   subtitle, tank art, or KPI/economy rows. */
.approvedAwardsRail{
  margin-top:4px!important;
  transform:translateY(-10px)!important;
}
.approvedAwardsRail.emptyAwards{
  transform:translateY(-10px)!important;
}
@media(max-width:850px){
  .approvedAwardsRail{transform:translateY(-7px)!important}
}


/* ================================================================
   v0.3.5.73 — MEDALS KPI EDGE OVERLAP + TEAMS HEADER CLEANUP
   ================================================================ */
/* Desktop hero: awards sit on the upper edge of the primary KPI strip.
   The medals intentionally overlap the strip by a few pixels and render
   above it, producing a single layered post-battle composition. */
@media (min-width:1201px){
  .approvedAwardsRail{
    margin-top:0!important;
    transform:translateY(6px)!important;
    position:relative!important;
    z-index:15!important;
    overflow:visible!important;
  }
  .approvedAwardsRail.emptyAwards{
    transform:translateY(6px)!important;
  }
  .approvedHeroPrimaryStats{
    z-index:7!important;
  }
  .approvedAward,
  .approvedAwardIcon{
    position:relative!important;
    z-index:16!important;
  }
}
/* On narrower layouts keep a small safe lift without forcing overlap. */
@media (max-width:1200px){
  .approvedAwardsRail,
  .approvedAwardsRail.emptyAwards{
    transform:translateY(-2px)!important;
  }
}

/* Teams tab no longer needs the redundant "Full battle roster" band.
   The two team panels start immediately below the tabs. */
.cinematicTeamsHeader.cleanTeamsHeader{
  display:none!important;
}
.cinematicTeamsGrid.compactTeamsNoHeader{
  margin-top:0!important;
  padding-top:0!important;
}


/* ================================================================
   v0.3.5.74 — MEDALS RAIL CLEAN EDGE + MICRO LIFT
   ================================================================ */
/* Keep the approved horizontal medal layout and sizes. Lift only the visual
   rail a few pixels from v0.3.5.73 and remove the old decorative rail plate
   that could protrude into the KPI strip on some maps / medal counts. */
.approvedAwardsRail{
  background:transparent!important;
  box-shadow:none!important;
  padding-bottom:0!important;
  overflow:visible!important;
}
.approvedAwardsRail:before{
  content:none!important;
  display:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
}
@media (min-width:1201px){
  .approvedAwardsRail,
  .approvedAwardsRail.emptyAwards{
    transform:translateY(-2px)!important; /* 8px higher than v0.3.5.73 */
  }
}
@media (max-width:1200px){
  .approvedAwardsRail,
  .approvedAwardsRail.emptyAwards{
    transform:translateY(-8px)!important; /* 6px higher than v0.3.5.73 */
  }
}
/* Medal shadows remain local to each icon. Reduce the downward spread so the
   KPI top edge stays crisp while retaining depth and a restrained glow. */
.approvedAwardIcon{
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.52))!important;
}
.approvedAward.mastery .approvedAwardIcon{
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.56)) drop-shadow(0 0 8px rgba(232,184,73,.16))!important;
}
.approvedAward.tier-epic .approvedAwardIcon{
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.57)) drop-shadow(0 0 7px rgba(222,177,75,.15))!important;
}
.approvedAward.tier-legendary .approvedAwardIcon{
  filter:drop-shadow(0 6px 5px rgba(0,0,0,.60)) drop-shadow(0 0 11px rgba(245,193,74,.35)) brightness(1.05)!important;
}
.approvedAward.tier-trailing .approvedAwardIcon{
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.48))!important;
}

/* ================================================================
   v0.3.5.75 — REPLAYS DISCOVERY LIGHT LIFT
   Scope: replay catalog page only. Detailed replay page is untouched.
   ================================================================ */
.replaysDiscoveryPage{
  position:relative;
  z-index:0;
  isolation:isolate;
  padding-top:50px!important;
}
.replaysDiscoveryPage::before{
  content:"";
  position:absolute;
  z-index:-2;
  top:-54px;
  bottom:-85px;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:
    radial-gradient(ellipse at 50% 10%,rgba(54,79,73,.24) 0%,rgba(28,44,41,.14) 32%,transparent 62%),
    radial-gradient(circle at 12% 38%,rgba(132,176,73,.055),transparent 31%),
    linear-gradient(180deg,#101a1a 0%,#0c1515 30%,#091111 100%);
}
.replaysDiscoveryPage::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  left:50%;
  top:118px;
  width:min(1320px,96vw);
  height:720px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0%,rgba(181,211,194,.045),transparent 67%);
}
.replaysHeading{margin-bottom:25px}
.replaysDiscoveryPage .eyebrow{color:#aeb9b3!important}
.replaysDiscoveryPage .pageTitle{
  margin:12px 0 13px!important;
  color:#f4f7f5!important;
  text-shadow:0 3px 18px rgba(0,0,0,.22);
}
.replaysPageSub{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin:0!important;
  max-width:none!important;
  color:#8e9b95!important;
  font-size:12px!important;
}
.replaysPageSub strong{color:#dce5e0!important;font-weight:800!important}
.replaysPageSub strong:after{content:"·";margin-left:10px;color:#586761}

.replaysDiscoveryPage .replaysToolbar{
  grid-template-columns:minmax(300px,1.75fr) repeat(3,minmax(135px,.62fr)) minmax(145px,.68fr)!important;
  gap:10px!important;
  margin:0 0 12px!important;
  padding:12px!important;
  border:1px solid rgba(201,220,211,.16)!important;
  border-radius:7px!important;
  background:linear-gradient(180deg,rgba(27,40,38,.92),rgba(17,29,27,.94))!important;
  backdrop-filter:blur(18px) saturate(1.08)!important;
  box-shadow:0 15px 42px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.replaySearchField{position:relative;display:block;min-width:0}
.replaySearchIcon{
  position:absolute;
  z-index:2;
  left:14px;
  top:50%;
  transform:translateY(-52%);
  color:#92a19a;
  font-size:18px;
  line-height:1;
  pointer-events:none;
}
.replaysDiscoveryPage .toolbar input,
.replaysDiscoveryPage .toolbar select{
  min-height:44px!important;
  padding:0 13px!important;
  border:1px solid rgba(194,215,204,.17)!important;
  border-radius:4px!important;
  background:#0d1716!important;
  color:#e6ece9!important;
  font-size:11px!important;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease!important;
  color-scheme:dark;
}
.replaysDiscoveryPage .replaySearchField input{padding-left:39px!important;background:#0b1514!important}
.replaysDiscoveryPage .toolbar input::placeholder{color:#74837d!important}
.replaysDiscoveryPage .toolbar input:hover,
.replaysDiscoveryPage .toolbar select:hover{border-color:rgba(216,232,224,.29)!important;background:#101c1a!important}
.replaysDiscoveryPage .toolbar input:focus,
.replaysDiscoveryPage .toolbar select:focus{
  border-color:rgba(169,229,27,.58)!important;
  box-shadow:0 0 0 2px rgba(169,229,27,.07),0 0 17px rgba(169,229,27,.05)!important;
  background:#101c1a!important;
}

.activeFilterBar{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 0 12px;
  padding:3px 2px;
}
.activeFilterBar[hidden]{display:none!important}
.activeFilterChips{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.activeFilterChip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:29px;
  padding:0 9px 0 10px;
  border:1px solid rgba(169,229,27,.24);
  border-radius:15px;
  background:rgba(27,42,34,.72);
  color:#cdd8d2;
  font:700 9px/1 Inter,"Segoe UI",Arial,sans-serif;
  cursor:pointer;
}
.activeFilterChip i{font-style:normal;color:#a9e51b;font-size:16px;line-height:1}
.activeFilterChip:hover{border-color:rgba(169,229,27,.48);background:rgba(36,54,43,.88);color:#fff}
.clearAllFilters{
  border:0;
  background:none;
  color:#96a39d;
  font:800 9px/1 Inter,"Segoe UI",Arial,sans-serif;
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap;
}
.clearAllFilters:hover{color:#b7e55a}

.replaysDiscoveryPage .discoveryCatalogMeta{
  min-height:34px!important;
  margin:13px 0 11px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  color:#85938d!important;
}
.catalogCount{display:flex;align-items:baseline;gap:6px}
.catalogCount b{font-size:14px!important;color:#eef3f0!important}
.catalogCount span{font-size:11.5px;color:#95a29c}
.catalogPageInfo{font-size:11.5px;color:#77847e}
.catalogPageInfo b{color:#b5c0ba!important}

.replaysDiscoveryPage .discoveryCardGrid{
  column-gap:19px!important;
  row-gap:22px!important;
}
.replaysDiscoveryPage .replayCard{
  min-height:360px!important;
  overflow:hidden!important;
  border:1px solid rgba(210,227,218,.16)!important;
  border-radius:8px!important;
  background:linear-gradient(150deg,rgba(31,44,41,.96),rgba(16,27,25,.98))!important;
  box-shadow:0 12px 30px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.035)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}
.replaysDiscoveryPage .replayCard:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(174,222,92,.34)!important;
  background:linear-gradient(150deg,rgba(36,50,46,.98),rgba(18,30,28,.99))!important;
  box-shadow:0 19px 42px rgba(0,0,0,.22),0 0 22px rgba(169,229,27,.025),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.replaysDiscoveryPage .replayCard .art{
  height:172px!important;
  filter:saturate(1.04) contrast(1.06) brightness(1.07)!important;
  transition:filter .18s ease!important;
}
.replaysDiscoveryPage .replayCard:hover .art{filter:saturate(1.07) contrast(1.07) brightness(1.11)!important}
.replaysDiscoveryPage .replayCard .art:after{
  background:linear-gradient(180deg,rgba(6,11,10,0) 50%,rgba(12,20,18,.64) 100%)!important;
}
.replaysDiscoveryPage .tankSprite{
  width:84%!important;
  height:90%!important;
  filter:brightness(1.04) drop-shadow(0 13px 13px rgba(0,0,0,.62))!important;
}
.replaysDiscoveryPage .cardMapName{
  left:11px!important;
  top:10px!important;
  padding:5px 8px!important;
  border-color:rgba(209,225,217,.17)!important;
  border-radius:3px!important;
  background:rgba(14,22,21,.68)!important;
  backdrop-filter:blur(6px)!important;
  color:#c1cbc6!important;
  font-size:7px!important;
}
.replaysDiscoveryPage .cardBody{padding:15px 16px 14px!important}
.replaysDiscoveryPage .cardTop{margin-bottom:7px!important}
.replaysDiscoveryPage .rank{
  color:#a9e51b!important;
  font-size:10px!important;
  letter-spacing:.035em!important;
}
.replaysDiscoveryPage .region{
  border-color:rgba(213,229,220,.22)!important;
  border-radius:3px!important;
  background:rgba(10,18,16,.36)!important;
  color:#a8b4ae!important;
}
.replaysDiscoveryPage .replayCard h3{
  margin:0!important;
  color:#f1f5f3!important;
  font-size:23px!important;
  line-height:1.06!important;
  letter-spacing:-.018em!important;
  text-shadow:0 1px 10px rgba(0,0,0,.16)!important;
}
.replaysDiscoveryPage .tankMeta{
  margin:7px 0 5px!important;
  color:#87948e!important;
  font-size:8px!important;
}
.replaysDiscoveryPage .mapline{
  margin:2px 0 12px!important;
  color:#98a59f!important;
  font-size:10px!important;
}
.replaysDiscoveryPage .outcome.win{color:#a9e51b!important;font-weight:850!important}
.replaysDiscoveryPage .outcome.loss{color:#ef7770!important;font-weight:850!important}
.replaysDiscoveryPage .outcome.draw{color:#d8b85c!important;font-weight:850!important}
.replaysDiscoveryPage .statsRow{
  grid-template-columns:1.14fr .86fr 1fr!important;
  align-items:end!important;
  padding:11px 0 10px!important;
  border-top-color:rgba(210,227,218,.11)!important;
  border-bottom-color:rgba(210,227,218,.11)!important;
}
.replaysDiscoveryPage .statsRow>div{padding-left:12px;border-left:1px solid rgba(210,227,218,.075)}
.replaysDiscoveryPage .statsRow>div:first-child{padding-left:0;border-left:0}
.replaysDiscoveryPage .statsRow strong{
  color:#dde5e1!important;
  font-size:17px!important;
  line-height:1!important;
}
.replaysDiscoveryPage .statsRow .damageStat strong{
  color:#f5f8f6!important;
  font-size:23px!important;
  letter-spacing:-.02em!important;
}
.replaysDiscoveryPage .statsRow .damageStat span{color:#9fb393!important}
.replaysDiscoveryPage .statsRow span{
  display:block!important;
  margin-top:6px!important;
  color:#74817b!important;
  font-size:7px!important;
  letter-spacing:.055em!important;
}
.replaysDiscoveryPage .cardAwards{
  min-height:34px!important;
  gap:9px!important;
  padding:8px 0!important;
  border-bottom-color:rgba(210,227,218,.09)!important;
}
.replaysDiscoveryPage .cardAwards:empty{display:none!important;min-height:0!important;padding:0!important;border:0!important}
.replaysDiscoveryPage .cardAwards span{
  gap:5px!important;
  color:#b4c0ba!important;
  font-size:7px!important;
}
.replaysDiscoveryPage .cardAwards img{
  width:21px!important;
  height:26px!important;
  filter:brightness(1.06) drop-shadow(0 3px 4px rgba(0,0,0,.35))!important;
}
.replaysDiscoveryPage .cardFoot{
  min-height:31px!important;
  align-items:flex-end!important;
  padding-top:11px!important;
  color:#9aa7a1!important;
  font-size:10px!important;
}
.replaysDiscoveryPage .cardFoot b{
  color:#a9e51b!important;
  font-size:9px!important;
  letter-spacing:.015em!important;
}
.replaysDiscoveryPage .cardFoot b i{
  display:inline-block;
  margin-left:2px;
  font-style:normal;
  transition:transform .15s ease;
}
.replaysDiscoveryPage .replayCard:hover .cardFoot b{color:#c1f24d!important}
.replaysDiscoveryPage .replayCard:hover .cardFoot b i{transform:translateX(3px)}

.replaysDiscoveryPage .catalogPager{
  margin:25px 0 4px!important;
  padding:13px 15px!important;
  border-color:rgba(207,224,215,.14)!important;
  border-radius:6px!important;
  background:rgba(20,31,29,.84)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.replaysDiscoveryPage .pageBtn{
  border-color:rgba(205,223,213,.15)!important;
  background:#15211f!important;
  color:#bcc8c2!important;
}
.replaysDiscoveryPage .pageBtn:hover:not(:disabled){border-color:rgba(169,229,27,.42)!important;background:#1a2925!important}
.replaysDiscoveryPage .pageBtn.active{background:#719f18!important;border-color:#9bd327!important;color:#fff!important;box-shadow:0 0 13px rgba(169,229,27,.08)!important}
.replaysDiscoveryPage .discoveryEmpty{
  grid-column:1/-1;
  border-color:rgba(205,223,213,.13)!important;
  border-radius:7px!important;
  background:rgba(22,34,31,.76)!important;
  color:#9ba8a2!important;
}

@media(max-width:1050px){
  .replaysDiscoveryPage .replaysToolbar{grid-template-columns:1.35fr 1fr 1fr!important}
  .replaysDiscoveryPage .replaySearchField{grid-column:1/-1}
  .replaysDiscoveryPage .discoveryCardGrid{column-gap:18px!important;row-gap:20px!important}
}
@media(max-width:650px){
  .replaysDiscoveryPage{padding-top:38px!important}
  .replaysDiscoveryPage .replaysToolbar{grid-template-columns:1fr!important}
  .replaysDiscoveryPage .replaySearchField{grid-column:auto}
  .replaysPageSub{align-items:flex-start!important;flex-direction:column!important;gap:3px!important}
  .replaysPageSub strong:after{display:none}
  .activeFilterBar{align-items:flex-start;flex-direction:column}
  .replaysDiscoveryPage .discoveryCatalogMeta{align-items:flex-start!important;flex-direction:column!important;gap:3px!important}
  .replaysDiscoveryPage .discoveryCardGrid{row-gap:18px!important}
}


/* ================================================================
   v0.3.5.76 — REPLAYS HERO BANNER + CARD OVERLAY + MEDAL PRIORITY
   Scope: /replays only.
   ================================================================ */
.replaysDiscoveryPage{
  padding-top:28px!important;
}
.replaysHeroBanner{
  position:relative;
  min-height:318px;
  margin:0 0 18px;
  overflow:hidden;
  border:1px solid rgba(210,227,218,.15);
  border-radius:9px;
  background:#13201c;
  box-shadow:0 24px 58px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035);
  isolation:isolate;
}
.replaysHeroBackdrop{
  position:absolute;
  z-index:-3;
  inset:-5px;
  background:url('/assets/replays_hero_banner.jpg') center 51%/cover no-repeat;
  filter:blur(1.7px) saturate(.91) contrast(1.03) brightness(.78);
  transform:scale(1.018);
}
.replaysHeroShade{
  position:absolute;
  z-index:-2;
  inset:0;
  background:
    linear-gradient(90deg,rgba(7,14,12,.91) 0%,rgba(8,16,14,.78) 34%,rgba(8,15,14,.32) 67%,rgba(6,12,11,.20) 100%),
    linear-gradient(180deg,rgba(5,11,10,.12) 0%,rgba(7,14,13,.14) 50%,rgba(10,20,18,.74) 100%),
    radial-gradient(circle at 20% 45%,rgba(169,229,27,.075),transparent 33%);
}
.replaysHeroContent{
  position:relative;
  z-index:2;
  min-height:318px;
  padding:39px 36px 24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.replaysHeroBanner .replaysHeading{max-width:650px}
.replaysHeroBanner .eyebrow{color:#b7c3bd!important;text-shadow:0 2px 9px rgba(0,0,0,.55)}
.replaysHeroBanner .pageTitle{
  margin:15px 0 10px!important;
  color:#f4f7f5!important;
  font-size:64px!important;
  text-shadow:0 7px 28px rgba(0,0,0,.42);
}
.replaysHeroBanner .replaysPageSub{
  margin:0!important;
  color:#aebbb5!important;
  text-shadow:0 2px 9px rgba(0,0,0,.5);
}
.replaysHeroBanner .replaysPageSub strong{color:#eef4f0!important}
.replaysHeroBanner .replaysPageSub strong:after{color:#819089!important}
.replaysHeroBanner .replaysToolbar{
  margin:24px 0 0!important;
  padding:10px!important;
  background:linear-gradient(180deg,rgba(24,37,34,.72),rgba(13,24,22,.78))!important;
  border-color:rgba(218,234,225,.20)!important;
  backdrop-filter:blur(18px) saturate(1.12)!important;
  box-shadow:0 16px 40px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.replaysHeroBanner .toolbar input,
.replaysHeroBanner .toolbar select{
  background:rgba(7,16,14,.79)!important;
  border-color:rgba(220,234,227,.20)!important;
}
.replaysHeroBanner .toolbar input:hover,
.replaysHeroBanner .toolbar select:hover,
.replaysHeroBanner .toolbar input:focus,
.replaysHeroBanner .toolbar select:focus{background:rgba(11,23,20,.90)!important}

/* card image identity overlay */
.replaysDiscoveryPage .replayCard .art{
  height:184px!important;
  isolation:isolate;
}
.replaysDiscoveryPage .replayCard .art:after{
  z-index:3!important;
  background:linear-gradient(180deg,rgba(4,9,8,.08) 0%,rgba(5,11,10,.02) 42%,rgba(5,12,11,.72) 100%)!important;
}
.replaysDiscoveryPage .tankSprite{z-index:2!important}
.cardImageOverlay{
  position:absolute;
  z-index:5;
  left:11px;
  top:11px;
  max-width:72%;
  min-width:118px;
  padding:8px 10px 7px;
  border:1px solid rgba(223,235,229,.16);
  border-radius:5px;
  background:linear-gradient(135deg,rgba(7,13,12,.78),rgba(14,24,21,.54));
  backdrop-filter:blur(9px) saturate(1.06);
  box-shadow:0 9px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.03);
}
.cardImageOverlay strong{
  display:block;
  color:#f5f7f6;
  font-size:17px;
  line-height:1.02;
  font-weight:900;
  letter-spacing:-.018em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cardImageOverlay small{
  display:block;
  margin-top:5px;
  color:#aab8b1;
  font-size:9px;
  line-height:1;
  letter-spacing:.035em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cardRegionTag{
  position:absolute;
  z-index:5;
  right:10px;
  top:10px;
  min-width:24px;
  padding:4px 6px;
  border:1px solid rgba(219,233,225,.18);
  border-radius:4px;
  background:rgba(7,14,12,.60);
  backdrop-filter:blur(7px);
  color:#b1bdb7;
  font-size:9px;
  line-height:1;
  text-align:center;
  text-transform:uppercase;
}
.replaysDiscoveryPage .cardBody{padding-top:13px!important}
.replaysDiscoveryPage .cardTop{
  margin-bottom:6px!important;
  padding-bottom:7px;
  border-bottom:1px solid rgba(210,227,218,.075);
}
.replaysDiscoveryPage .cardTop .outcome{
  font-size:9px!important;
  font-weight:900!important;
}
.replaysDiscoveryPage .tankMeta{
  min-height:17px;
  margin:5px 0 8px!important;
}
.replaysDiscoveryPage .replayCard h3,
.replaysDiscoveryPage .mapline,
.replaysDiscoveryPage .cardMapName,
.replaysDiscoveryPage .cardTop .region{display:none!important}

/* medal row: icon-only, epic/rare first */
.replaysDiscoveryPage .cardAwards{
  min-height:38px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:nowrap!important;
  overflow:hidden!important;
  padding:7px 0 8px!important;
}
.replaysDiscoveryPage .cardAwards .cardAwardIcon{
  position:relative;
  flex:0 0 auto;
  width:29px;
  height:30px;
  display:grid!important;
  place-items:center;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:none!important;
  color:transparent!important;
  font-size:0!important;
}
.replaysDiscoveryPage .cardAwards .cardAwardIcon img{
  width:27px!important;
  height:30px!important;
  max-width:100%!important;
  object-fit:contain!important;
  filter:brightness(1.06) saturate(1.05) drop-shadow(0 4px 4px rgba(0,0,0,.36))!important;
}
.replaysDiscoveryPage .cardAwards .cardAwardIcon.tier-legendary img,
.replaysDiscoveryPage .cardAwards .cardAwardIcon.tier-epic img{
  filter:brightness(1.10) saturate(1.10) drop-shadow(0 4px 5px rgba(0,0,0,.38)) drop-shadow(0 0 5px rgba(224,176,66,.10))!important;
}
.replaysDiscoveryPage .cardAwards .cardAwardIcon.tier-mastery img{filter:brightness(1.08) saturate(1.06) drop-shadow(0 4px 5px rgba(0,0,0,.37))!important}
.replaysDiscoveryPage .cardAwards:empty{display:none!important}

@media(max-width:1050px){
  .replaysHeroContent{padding:32px 28px 22px}
  .replaysHeroBanner .pageTitle{font-size:56px!important}
}
@media(max-width:650px){
  .replaysDiscoveryPage{padding-top:18px!important}
  .replaysHeroBanner{min-height:390px;border-radius:7px}
  .replaysHeroBackdrop{background-position:56% center}
  .replaysHeroContent{min-height:390px;padding:28px 18px 18px}
  .replaysHeroBanner .pageTitle{font-size:46px!important}
  .replaysHeroBanner .replaysPageSub span{display:block;margin-top:4px}
  .cardImageOverlay{max-width:76%}
}


/* ================================================================
   v0.3.5.77 — REPLAYS CONTRAST DEPTH POLISH
   Scope: /replays only.
   ================================================================ */
.replaysDiscoveryPage::before{
  background:
    radial-gradient(ellipse at 50% 8%,rgba(42,58,53,.22) 0%,rgba(16,24,22,.10) 34%,transparent 66%),
    radial-gradient(circle at 14% 34%,rgba(114,146,88,.038),transparent 30%),
    linear-gradient(180deg,#091110 0%,#07100f 36%,#060c0c 100%)!important;
}
.replaysDiscoveryPage::after{
  top:104px!important;
  height:660px!important;
  background:radial-gradient(ellipse at 50% 0%,rgba(184,208,198,.028),transparent 68%)!important;
}

.replaysHeroBanner{
  min-height:332px!important;
  border-color:rgba(214,229,221,.14)!important;
  background:#0f1716!important;
  box-shadow:0 28px 72px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.replaysHeroBanner::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), inset 0 -60px 100px rgba(0,0,0,.16);
  z-index:4;
}
.replaysHeroBackdrop{
  inset:-4px!important;
  background:url('/assets/replays_hero_banner.jpg') center 59%/cover no-repeat!important;
  filter:blur(.45px) saturate(.98) contrast(1.13) brightness(.66)!important;
  transform:scale(1.03)!important;
}
.replaysHeroBackdrop::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 46% 72%,rgba(221,233,229,.16) 0%,rgba(159,180,172,.08) 16%,rgba(53,71,66,.04) 28%,transparent 44%),
    radial-gradient(circle at 80% 14%,rgba(255,255,255,.05),transparent 24%);
  mix-blend-mode:screen;
  opacity:.9;
}
.replaysHeroBackdrop::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(3,7,7,.08),rgba(2,6,6,.16) 35%,rgba(2,6,6,.12) 100%);
}
.replaysHeroShade{
  background:
    linear-gradient(90deg,rgba(5,10,10,.94) 0%,rgba(6,12,11,.88) 24%,rgba(6,12,11,.48) 52%,rgba(5,10,10,.54) 100%),
    linear-gradient(180deg,rgba(4,9,8,.16) 0%,rgba(4,9,8,.12) 28%,rgba(6,12,11,.80) 100%),
    radial-gradient(ellipse at 48% 72%,rgba(203,214,208,.08) 0%,rgba(111,133,126,.06) 18%,transparent 43%),
    radial-gradient(circle at 20% 46%,rgba(169,229,27,.045),transparent 32%)!important;
}
.replaysHeroContent{
  min-height:332px!important;
  padding:40px 36px 24px!important;
}
.replaysHeroBanner .pageTitle{
  text-shadow:0 9px 34px rgba(0,0,0,.52)!important;
  letter-spacing:-.05em!important;
}
.replaysHeroBanner .replaysPageSub{
  color:#b8c4be!important;
}
.replaysHeroBanner .replaysToolbar{
  padding:11px!important;
  background:linear-gradient(180deg,rgba(18,28,26,.82),rgba(10,18,17,.86))!important;
  border-color:rgba(220,233,226,.18)!important;
  box-shadow:0 20px 45px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.replaysHeroBanner .toolbar input,
.replaysHeroBanner .toolbar select{
  background:rgba(8,15,14,.88)!important;
  border-color:rgba(221,233,227,.18)!important;
}
.replaysHeroBanner .toolbar input:hover,
.replaysHeroBanner .toolbar select:hover,
.replaysHeroBanner .toolbar input:focus,
.replaysHeroBanner .toolbar select:focus{
  background:rgba(11,20,18,.96)!important;
}

.replaysDiscoveryPage .replayCard{
  border-color:rgba(216,231,223,.15)!important;
  background:linear-gradient(160deg,rgba(19,29,27,.98),rgba(10,16,15,.99))!important;
  box-shadow:0 18px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.034)!important;
}
.replaysDiscoveryPage .replayCard:hover{
  border-color:rgba(183,224,110,.32)!important;
  background:linear-gradient(160deg,rgba(22,34,31,.99),rgba(11,19,17,.995))!important;
  box-shadow:0 26px 60px rgba(0,0,0,.30), 0 0 24px rgba(169,229,27,.03), inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.replaysDiscoveryPage .replayCard .art{
  height:188px!important;
  filter:saturate(.98) contrast(1.12) brightness(.88)!important;
}
.replaysDiscoveryPage .replayCard .art::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(ellipse at 50% 58%,rgba(255,255,255,.07) 0%,rgba(255,255,255,.015) 18%,transparent 35%),
    linear-gradient(180deg,rgba(5,10,9,.18) 0%,rgba(5,10,9,.06) 44%,rgba(5,10,9,.22) 100%);
}
.replaysDiscoveryPage .replayCard .art:after{
  background:linear-gradient(180deg,rgba(4,8,8,.18) 0%,rgba(5,10,9,.05) 34%,rgba(5,10,9,.80) 100%)!important;
}
.replaysDiscoveryPage .tankSprite{
  width:87%!important;
  height:92%!important;
  bottom:-1%!important;
  filter:brightness(1.14) contrast(1.14) saturate(1.04) drop-shadow(0 16px 18px rgba(0,0,0,.76))!important;
  transition:transform .18s ease, filter .18s ease!important;
}
.replaysDiscoveryPage .replayCard:hover .tankSprite{
  transform:translateX(-50%) translateY(-1px)!important;
  filter:brightness(1.18) contrast(1.16) saturate(1.05) drop-shadow(0 18px 20px rgba(0,0,0,.80))!important;
}
.cardImageOverlay{
  top:12px!important;
  left:12px!important;
  padding:9px 11px 8px!important;
  border-color:rgba(225,237,231,.18)!important;
  background:linear-gradient(145deg,rgba(6,11,11,.86),rgba(17,27,24,.66))!important;
  box-shadow:0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.cardImageOverlay strong{
  color:#fbfcfb!important;
  text-shadow:0 2px 8px rgba(0,0,0,.36)!important;
}
.cardImageOverlay small{
  color:#b8c4be!important;
}
.cardRegionTag{
  background:rgba(6,12,11,.72)!important;
  border-color:rgba(222,234,228,.16)!important;
  color:#bcc7c2!important;
  box-shadow:0 8px 22px rgba(0,0,0,.20)!important;
}
.replaysDiscoveryPage .cardTop{
  border-bottom-color:rgba(216,230,223,.08)!important;
}
.replaysDiscoveryPage .statsRow{
  border-top-color:rgba(216,230,223,.09)!important;
  border-bottom-color:rgba(216,230,223,.10)!important;
}
.replaysDiscoveryPage .statsRow strong{color:#e2eae6!important}
.replaysDiscoveryPage .statsRow .damageStat strong{color:#f8fbf9!important}
.replaysDiscoveryPage .cardAwards{
  border-bottom-color:rgba(216,230,223,.08)!important;
}
.replaysDiscoveryPage .cardFoot{
  color:#a3afa9!important;
}
.replaysDiscoveryPage .catalogPager{
  background:rgba(16,25,23,.88)!important;
  border-color:rgba(216,230,223,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 10px 24px rgba(0,0,0,.12)!important;
}
@media(max-width:650px){
  .replaysHeroBackdrop{background-position:58% center!important}
  .replaysHeroContent{min-height:390px!important}
  .replaysDiscoveryPage .tankSprite{width:84%!important}
}


/* ================================================================
   v0.3.5.78 — REPLAYS BRIGHT STATIC PREMIUM
   Scope: /replays only. Static state is already bright and premium;
   hover is only a subtle enhancement.
   ================================================================ */
body.replaysPageActive{
  background:#0d1213!important;
}
body.replaysPageActive .topbar{
  background:rgba(15,20,21,.96)!important;
  border-bottom:1px solid rgba(222,233,228,.09)!important;
  box-shadow:0 8px 30px rgba(0,0,0,.16),inset 0 -1px 0 rgba(255,255,255,.018)!important;
  backdrop-filter:blur(16px) saturate(1.04)!important;
}
body.replaysPageActive .topbar nav a{color:#c6cfca!important}
body.replaysPageActive .topbar nav a:hover{color:#dff3b3!important}
body.replaysPageActive .topActions [data-global-search]{
  background:rgba(18,25,25,.76)!important;
  border-color:rgba(217,230,224,.14)!important;
}
body.replaysPageActive .liveDot{
  background:rgba(17,24,23,.62)!important;
  border-color:rgba(216,229,223,.14)!important;
  color:#b5c0ba!important;
}

.replaysDiscoveryPage::before{
  background:
    radial-gradient(ellipse at 50% 8%,rgba(111,124,123,.12) 0%,rgba(60,72,72,.065) 32%,transparent 66%),
    radial-gradient(circle at 11% 31%,rgba(146,173,126,.035),transparent 30%),
    linear-gradient(180deg,#151b1c 0%,#111718 34%,#0d1314 100%)!important;
}
.replaysDiscoveryPage::after{
  top:98px!important;
  height:690px!important;
  background:radial-gradient(ellipse at 50% 0%,rgba(222,229,226,.045),transparent 69%)!important;
}

.replaysHeroBanner{
  background:#182020!important;
  border-color:rgba(221,233,227,.20)!important;
  box-shadow:0 26px 64px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.replaysHeroBanner::before{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),inset 0 -52px 88px rgba(0,0,0,.10)!important;
}
.replaysHeroBackdrop{
  background:url('/assets/replays_hero_banner.jpg') center 58%/cover no-repeat!important;
  filter:blur(.15px) saturate(1.02) contrast(1.08) brightness(.86)!important;
  transform:scale(1.024)!important;
}
.replaysHeroBackdrop::before{
  background:
    radial-gradient(ellipse at 47% 72%,rgba(242,246,244,.14) 0%,rgba(204,218,211,.06) 18%,transparent 39%),
    radial-gradient(circle at 77% 16%,rgba(255,255,255,.045),transparent 23%)!important;
  opacity:.82!important;
}
.replaysHeroBackdrop::after{
  background:linear-gradient(180deg,rgba(5,9,9,.025),rgba(5,9,9,.035) 40%,rgba(5,9,9,.07) 100%)!important;
}
.replaysHeroShade{
  background:
    linear-gradient(90deg,rgba(6,11,11,.79) 0%,rgba(7,13,12,.61) 28%,rgba(7,13,12,.18) 58%,rgba(6,11,11,.20) 100%),
    linear-gradient(180deg,rgba(5,10,9,.04) 0%,rgba(5,10,9,.025) 34%,rgba(8,15,14,.52) 100%),
    radial-gradient(circle at 19% 44%,rgba(169,229,27,.035),transparent 30%)!important;
}
.replaysHeroBanner .pageTitle{
  color:#fbfcfb!important;
  text-shadow:0 7px 26px rgba(0,0,0,.42)!important;
}
.replaysHeroBanner .eyebrow{color:#c5cfca!important}
.replaysHeroBanner .replaysPageSub{color:#c4cec9!important}
.replaysHeroBanner .replaysPageSub strong{color:#fff!important}

.replaysHeroBanner .replaysToolbar{
  background:linear-gradient(180deg,rgba(38,47,47,.78),rgba(25,34,34,.84))!important;
  border-color:rgba(229,237,233,.24)!important;
  box-shadow:0 18px 38px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.07)!important;
  backdrop-filter:blur(16px) saturate(1.04)!important;
}
.replaysHeroBanner .toolbar input,
.replaysHeroBanner .toolbar select{
  background:rgba(17,24,24,.92)!important;
  border-color:rgba(228,237,232,.22)!important;
  color:#f0f4f2!important;
}
.replaysHeroBanner .toolbar input::placeholder{color:#96a29d!important}
.replaysHeroBanner .toolbar input:hover,
.replaysHeroBanner .toolbar select:hover,
.replaysHeroBanner .toolbar input:focus,
.replaysHeroBanner .toolbar select:focus{
  background:rgba(22,31,30,.98)!important;
  border-color:rgba(189,224,123,.42)!important;
}

.replaysDiscoveryPage .discoveryCatalogMeta{color:#a5b0ab!important}
.replaysDiscoveryPage .catalogCount b{color:#fff!important}
.replaysDiscoveryPage .catalogCount span,
.replaysDiscoveryPage .catalogPageInfo{color:#9aa6a0!important}

.replaysDiscoveryPage .replayCard{
  border-color:rgba(224,234,229,.20)!important;
  background:linear-gradient(160deg,rgba(31,41,40,.99),rgba(20,29,28,.995))!important;
  box-shadow:0 16px 38px rgba(0,0,0,.19),inset 0 1px 0 rgba(255,255,255,.052)!important;
}
.replaysDiscoveryPage .replayCard:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(187,224,119,.34)!important;
  background:linear-gradient(160deg,rgba(34,45,43,.99),rgba(22,32,30,.995))!important;
  box-shadow:0 22px 48px rgba(0,0,0,.23),0 0 20px rgba(169,229,27,.022),inset 0 1px 0 rgba(255,255,255,.065)!important;
}
.replaysDiscoveryPage .replayCard .art{
  filter:saturate(1.03) contrast(1.08) brightness(1.03)!important;
}
.replaysDiscoveryPage .replayCard:hover .art{
  filter:saturate(1.05) contrast(1.09) brightness(1.06)!important;
}
.replaysDiscoveryPage .replayCard .art::before{
  background:
    radial-gradient(ellipse at 50% 58%,rgba(255,255,255,.085) 0%,rgba(255,255,255,.022) 20%,transparent 37%),
    linear-gradient(180deg,rgba(5,10,9,.06) 0%,rgba(5,10,9,.015) 45%,rgba(5,10,9,.11) 100%)!important;
}
.replaysDiscoveryPage .replayCard .art:after{
  background:linear-gradient(180deg,rgba(4,8,8,.045) 0%,rgba(5,10,9,.012) 39%,rgba(7,14,13,.48) 100%)!important;
}
.replaysDiscoveryPage .tankSprite{
  width:88%!important;
  height:93%!important;
  filter:brightness(1.22) contrast(1.14) saturate(1.06) drop-shadow(0 15px 17px rgba(0,0,0,.63))!important;
}
.replaysDiscoveryPage .replayCard:hover .tankSprite{
  transform:translateX(-50%) translateY(-1px)!important;
  filter:brightness(1.25) contrast(1.15) saturate(1.07) drop-shadow(0 17px 18px rgba(0,0,0,.68))!important;
}

.cardImageOverlay{
  border-color:rgba(235,241,238,.24)!important;
  background:linear-gradient(145deg,rgba(27,35,35,.79),rgba(39,50,47,.65))!important;
  box-shadow:0 10px 24px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.09)!important;
  backdrop-filter:blur(8px) saturate(1.02)!important;
}
.cardImageOverlay strong{color:#fff!important}
.cardImageOverlay small{color:#d0d8d4!important}
.cardRegionTag{
  background:rgba(24,32,31,.75)!important;
  border-color:rgba(232,240,236,.22)!important;
  color:#d1dad5!important;
}

.replaysDiscoveryPage .cardBody{
  background:linear-gradient(180deg,rgba(33,43,41,.97),rgba(22,31,29,.99))!important;
}
.replaysDiscoveryPage .rank{color:#b7ef39!important}
.replaysDiscoveryPage .tankMeta{color:#a7b2ad!important}
.replaysDiscoveryPage .cardTop{
  border-bottom-color:rgba(228,237,232,.12)!important;
}
.replaysDiscoveryPage .statsRow{
  border-top-color:rgba(228,237,232,.13)!important;
  border-bottom-color:rgba(228,237,232,.13)!important;
}
.replaysDiscoveryPage .statsRow>div{border-left-color:rgba(228,237,232,.09)!important}
.replaysDiscoveryPage .statsRow strong{color:#f0f4f2!important}
.replaysDiscoveryPage .statsRow .damageStat strong{color:#fff!important}
.replaysDiscoveryPage .statsRow span{color:#9eaaa4!important}
.replaysDiscoveryPage .statsRow .damageStat span{color:#b9cba8!important}

.replaysDiscoveryPage .cardAwards{
  border-bottom-color:rgba(228,237,232,.11)!important;
}
.replaysDiscoveryPage .cardAwards .cardAwardIcon img{
  filter:brightness(1.16) saturate(1.10) drop-shadow(0 3px 4px rgba(0,0,0,.30))!important;
}
.replaysDiscoveryPage .cardAwards .cardAwardIcon.tier-legendary img,
.replaysDiscoveryPage .cardAwards .cardAwardIcon.tier-epic img{
  filter:brightness(1.20) saturate(1.14) drop-shadow(0 4px 5px rgba(0,0,0,.32)) drop-shadow(0 0 6px rgba(224,176,66,.15))!important;
}
.replaysDiscoveryPage .cardFoot{
  color:#bbc5c0!important;
}
.replaysDiscoveryPage .cardFoot b{color:#b6ec39!important}
.replaysDiscoveryPage .replayCard:hover .cardFoot b{color:#c9f468!important}

.replaysDiscoveryPage .catalogPager{
  background:rgba(28,37,36,.90)!important;
  border-color:rgba(225,235,230,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 10px 24px rgba(0,0,0,.12)!important;
}
.replaysDiscoveryPage .pageBtn{
  background:#232e2c!important;
  border-color:rgba(225,235,230,.16)!important;
  color:#d0d8d4!important;
}
.replaysDiscoveryPage .pageBtn:hover:not(:disabled){background:#293735!important}

@media(max-width:650px){
  body.replaysPageActive .topbar{background:rgba(15,20,21,.98)!important}
  .replaysHeroBackdrop{background-position:58% center!important}
  .replaysDiscoveryPage .tankSprite{width:85%!important}
}

/* ================================================================
   v0.3.5.79 — REPLAYS APPROVED MOCKUP ADAPTATION
   Approved mockup composition, using FermaniHUB's real tank/medal/UI assets.
   Scope: /replays only.
   ================================================================ */
body.replaysPageActive{
  background:#080d0f!important;
}
body.replaysPageActive .noise{opacity:.022!important}
body.replaysPageActive .topbar{
  height:60px!important;
  grid-template-columns:210px 1fr auto!important;
  padding:0 1.6vw!important;
  background:rgba(6,10,12,.985)!important;
  border-bottom:1px solid rgba(185,203,197,.11)!important;
  box-shadow:0 8px 26px rgba(0,0,0,.16)!important;
}
body.replaysPageActive .approvedBrandLogo{filter:brightness(1.14) drop-shadow(0 0 10px rgba(169,229,27,.08))!important}
body.replaysPageActive .approvedBrand{font-size:17px!important}
body.replaysPageActive .approvedNav{height:100%;align-items:center!important;gap:29px!important}
body.replaysPageActive .approvedNav a{
  position:relative;
  height:100%;
  display:flex!important;
  align-items:center;
  color:#aeb8b3!important;
  font-size:10px!important;
}
body.replaysPageActive .approvedNav a:nth-child(2){color:#f6f8f7!important}
body.replaysPageActive .approvedNav a:nth-child(2)::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  border-radius:3px 3px 0 0;
  background:#65db56;
  box-shadow:0 0 12px rgba(101,219,86,.22);
}
body.replaysPageActive .approvedSearchBox{
  height:36px!important;
  border-color:rgba(197,213,207,.18)!important;
  background:#0d1417!important;
}
body.replaysPageActive .approvedSearchBox input{color:#dfe6e2!important}
body.replaysPageActive .approvedLivePill{
  min-height:34px!important;
  background:rgba(20,54,35,.48)!important;
  border-color:rgba(83,189,91,.18)!important;
  color:#9ad99d!important;
}
body.replaysPageActive .approvedSignIn{box-shadow:0 6px 18px rgba(70,120,16,.15)!important}

.replaysDiscoveryPage.approvedReplaysMockup{
  width:min(1210px,calc(100% - 40px))!important;
  max-width:1210px!important;
  padding:18px 0 72px!important;
}
.replaysDiscoveryPage.approvedReplaysMockup::before{
  top:-18px!important;
  bottom:-72px!important;
  background:
    radial-gradient(ellipse at 50% 5%,rgba(53,67,68,.14),transparent 43%),
    linear-gradient(180deg,#0b1113 0%,#080d0f 56%,#070b0d 100%)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup::after{
  display:none!important;
}

/* Approved hero: compact cinematic banner, no controls inside it. */
.approvedReplaysMockup .replaysHeroBanner{
  min-height:228px!important;
  margin:0 0 12px!important;
  border-radius:9px!important;
  border:1px solid rgba(202,217,211,.16)!important;
  background:#11181b!important;
  box-shadow:0 18px 48px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.approvedReplaysMockup .replaysHeroBanner::before{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018),inset 0 -50px 85px rgba(0,0,0,.16)!important;
}
.approvedReplaysMockup .replaysHeroBackdrop{
  inset:-2px!important;
  background:url('/assets/replays_hero_banner.jpg') center 68%/cover no-repeat!important;
  filter:saturate(.82) contrast(1.13) brightness(.76)!important;
  transform:scale(1.012)!important;
}
.approvedReplaysMockup .replaysHeroBackdrop::before{
  background:radial-gradient(ellipse at 47% 70%,rgba(227,235,231,.11),transparent 35%)!important;
  opacity:.72!important;
}
.approvedReplaysMockup .replaysHeroBackdrop::after{display:none!important}
.approvedReplaysMockup .replaysHeroShade{
  background:
    linear-gradient(90deg,rgba(4,8,10,.91) 0%,rgba(5,10,12,.72) 29%,rgba(5,10,12,.24) 58%,rgba(5,10,12,.20) 100%),
    linear-gradient(180deg,rgba(3,7,9,.08) 0%,rgba(3,7,9,.05) 48%,rgba(4,9,11,.58) 100%)!important;
}
.approvedReplaysMockup .replaysHeroContent{
  min-height:228px!important;
  padding:31px 34px 25px!important;
  justify-content:center!important;
}
.approvedReplaysMockup .replaysHeading{margin:0!important;max-width:610px!important}
.approvedReplaysMockup .eyebrow{
  color:#aeb9b4!important;
  font-size:8px!important;
  letter-spacing:.19em!important;
}
.approvedReplaysMockup .eyebrow:before{width:36px!important;background:#64da57!important}
.approvedReplaysMockup .pageTitle{
  margin:13px 0 10px!important;
  font-size:72px!important;
  line-height:.88!important;
  letter-spacing:-.055em!important;
  color:#f8faf9!important;
  text-shadow:0 10px 30px rgba(0,0,0,.42)!important;
}
.approvedReplaysMockup .replaysPageSub{
  gap:8px!important;
  color:#b6c0bc!important;
  font-size:12px!important;
  text-shadow:0 2px 9px rgba(0,0,0,.46)!important;
}
.approvedReplaysMockup .replaysPageSub strong{color:#dfe6e2!important}

/* Separate modern control bar from the approved mockup. */
.approvedReplaysMockup .approvedReplaysControlBar{
  display:grid!important;
  grid-template-columns:minmax(310px,1.45fr) repeat(3,minmax(145px,.78fr)) minmax(145px,.72fr)!important;
  gap:10px!important;
  margin:0 0 12px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField,
.approvedReplaysMockup .approvedReplaysControlBar select{
  min-height:50px!important;
  border-radius:7px!important;
  border:1px solid rgba(211,224,218,.17)!important;
  background:linear-gradient(180deg,#12191c,#0d1417)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.025)!important;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField{
  display:flex!important;
  align-items:center!important;
  padding-left:15px!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchIcon{
  position:static!important;
  transform:none!important;
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  margin-right:10px!important;
  color:#a9b5af!important;
}
.approvedReplaysMockup .approvedReplaysControlBar input{
  min-height:48px!important;
  padding:0 12px 0 0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#eef2f0!important;
  font-size:12px!important;
}
.approvedReplaysMockup .approvedReplaysControlBar select{
  padding:0 14px!important;
  color:#d8dfdc!important;
  font-size:11px!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField:hover,
.approvedReplaysMockup .approvedReplaysControlBar select:hover{
  border-color:rgba(224,235,229,.28)!important;
  background:linear-gradient(180deg,#172023,#10181b)!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField:focus-within,
.approvedReplaysMockup .approvedReplaysControlBar select:focus{
  border-color:rgba(101,219,86,.58)!important;
  box-shadow:0 0 0 2px rgba(101,219,86,.06),0 10px 26px rgba(0,0,0,.18)!important;
}
.approvedReplaysMockup .activeFilterBar{
  margin:2px 0 9px!important;
  padding:0!important;
}
.approvedReplaysMockup .activeFilterChip{
  border-color:rgba(101,219,86,.23)!important;
  background:#121b19!important;
}

.approvedReplaysMockup .discoveryCatalogMeta{
  min-height:22px!important;
  margin:4px 0 9px!important;
}
.approvedReplaysMockup .catalogCount b{font-size:13px!important}
.approvedReplaysMockup .catalogCount span,
.approvedReplaysMockup .catalogPageInfo{font-size:9px!important}

/* Elevated cards adapted from the approved mockup. */
.approvedReplaysMockup .discoveryCardGrid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
}
.approvedReplaysMockup .replayCard.approvedMockupCard{
  min-height:318px!important;
  border-radius:8px!important;
  border:1px solid rgba(202,217,211,.18)!important;
  background:#0b1113!important;
  box-shadow:0 12px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.028)!important;
  overflow:hidden!important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
.approvedReplaysMockup .replayCard.approvedMockupCard:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(109,210,92,.34)!important;
  background:#0b1113!important;
  box-shadow:0 18px 42px rgba(0,0,0,.30),0 0 18px rgba(101,219,86,.025)!important;
}
.approvedReplaysMockup .replayCard .art{
  height:166px!important;
  background-position:center!important;
  filter:saturate(1.02) contrast(1.08) brightness(.99)!important;
}
.approvedReplaysMockup .replayCard:hover .art{
  filter:saturate(1.04) contrast(1.09) brightness(1.02)!important;
}
.approvedReplaysMockup .replayCard .art::before{
  background:linear-gradient(180deg,rgba(3,7,8,.02),rgba(3,7,8,.01) 47%,rgba(3,7,8,.08) 100%)!important;
}
.approvedReplaysMockup .replayCard .art:after{
  background:linear-gradient(180deg,rgba(3,7,8,.02),rgba(3,7,8,0) 48%,rgba(4,9,11,.48) 100%)!important;
}
.approvedReplaysMockup .tankSprite{
  width:86%!important;
  height:92%!important;
  bottom:-2%!important;
  filter:brightness(1.16) contrast(1.13) saturate(1.04) drop-shadow(0 14px 15px rgba(0,0,0,.66))!important;
}
.approvedReplaysMockup .replayCard:hover .tankSprite{
  transform:translateX(-50%) translateY(-1px)!important;
  filter:brightness(1.19) contrast(1.14) saturate(1.05) drop-shadow(0 16px 16px rgba(0,0,0,.69))!important;
}
.approvedReplaysMockup .cardImageOverlay{
  top:9px!important;
  left:9px!important;
  max-width:78%!important;
  min-width:0!important;
  padding:7px 9px!important;
  border-radius:5px!important;
  border:1px solid rgba(225,235,230,.18)!important;
  background:rgba(8,13,15,.76)!important;
  box-shadow:0 7px 18px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035)!important;
  backdrop-filter:blur(8px)!important;
}
.approvedReplaysMockup .cardImageOverlay strong{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  color:#f5f7f6!important;
  font-size:12px!important;
  line-height:1!important;
  letter-spacing:.005em!important;
  text-transform:none!important;
}
.approvedReplaysMockup .cardImageOverlay strong span{color:#85938d;font-size:10px!important}
.approvedReplaysMockup .cardImageOverlay small{display:none!important}
.approvedReplaysMockup .cardRegionTag{
  top:9px!important;
  right:9px!important;
  min-width:47px!important;
  height:29px!important;
  padding:0 8px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  border-radius:6px!important;
  border:1px solid rgba(199,218,211,.16)!important;
  background:rgba(8,13,15,.74)!important;
  color:#d8e2dd!important;
  box-shadow:0 6px 16px rgba(0,0,0,.18)!important;
}
.approvedReplaysMockup .cardRegionTag b{font-size:9px!important;line-height:1!important}
.approvedReplaysMockup .cardRegionIcon{
  width:13px!important;
  height:13px!important;
  color:#7fa7c4!important;
}

.approvedReplaysMockup .cardBody{
  padding:0!important;
  background:#0b1113!important;
}
.approvedReplaysMockup .cardResultBlock{
  min-height:72px!important;
  padding:11px 13px 9px!important;
  display:grid!important;
  align-content:start!important;
  justify-items:start!important;
  border-bottom:1px solid rgba(203,219,212,.10)!important;
  background:linear-gradient(180deg,#0e1518,#0b1113)!important;
}
.approvedReplaysMockup .cardReplayKicker{
  color:#9ea9a4!important;
  font-size:8px!important;
  line-height:1!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
}
.approvedReplaysMockup .cardResultBlock .outcome{
  margin-top:4px!important;
  font-size:17px!important;
  line-height:1.05!important;
  font-weight:850!important;
}
.approvedReplaysMockup .cardResultBlock .outcome.win{color:#63e15a!important}
.approvedReplaysMockup .cardResultBlock .outcome.loss{color:#ff6262!important}
.approvedReplaysMockup .cardResultBlock .outcome.draw{color:#d7b95f!important}
.approvedReplaysMockup .cardNation{
  margin-top:3px!important;
  color:#d4dbd7!important;
  font-size:10px!important;
  line-height:1!important;
}
.approvedReplaysMockup .cardTop,
.approvedReplaysMockup .tankMeta{display:none!important}
.approvedReplaysMockup .statsRow{
  min-height:65px!important;
  grid-template-columns:1fr .82fr 1.05fr!important;
  align-items:center!important;
  margin:0!important;
  padding:8px 12px!important;
  border-top:0!important;
  border-bottom:1px solid rgba(203,219,212,.10)!important;
  background:#091012!important;
}
.approvedReplaysMockup .statsRow>div{
  min-width:0!important;
  padding:0 10px!important;
  border-left:1px solid rgba(203,219,212,.13)!important;
  text-align:center!important;
}
.approvedReplaysMockup .statsRow>div:first-child{padding-left:0!important;border-left:0!important}
.approvedReplaysMockup .statsRow>div:last-child{padding-right:0!important}
.approvedReplaysMockup .statsRow strong,
.approvedReplaysMockup .statsRow .damageStat strong{
  color:#f4f7f5!important;
  font-size:19px!important;
  line-height:1!important;
  letter-spacing:-.015em!important;
}
.approvedReplaysMockup .statsRow span,
.approvedReplaysMockup .statsRow .damageStat span{
  margin-top:5px!important;
  color:#9aa6a1!important;
  font-size:7px!important;
  letter-spacing:.045em!important;
}
.approvedReplaysMockup .cardAwards{
  min-height:45px!important;
  padding:7px 12px!important;
  gap:8px!important;
  border-bottom:1px solid rgba(203,219,212,.10)!important;
  background:#0a1113!important;
}
.approvedReplaysMockup .cardAwards .cardAwardIcon{
  width:27px!important;
  height:29px!important;
}
.approvedReplaysMockup .cardAwards .cardAwardIcon img{
  width:25px!important;
  height:28px!important;
  filter:brightness(1.12) saturate(1.10) drop-shadow(0 3px 4px rgba(0,0,0,.34))!important;
}
.approvedReplaysMockup .cardAwards .cardAwardIcon.tier-legendary img,
.approvedReplaysMockup .cardAwards .cardAwardIcon.tier-epic img{
  filter:brightness(1.18) saturate(1.14) drop-shadow(0 3px 4px rgba(0,0,0,.35)) drop-shadow(0 0 5px rgba(224,176,66,.12))!important;
}
.approvedReplaysMockup .cardFoot{
  min-height:38px!important;
  padding:0 13px!important;
  align-items:center!important;
  color:#e0e5e2!important;
  font-size:10px!important;
  background:#0a1012!important;
}
.approvedReplaysMockup .cardFoot b{
  color:#63e15a!important;
  font-size:9px!important;
  font-weight:750!important;
}
.approvedReplaysMockup .replayCard:hover .cardFoot b{color:#78ed70!important}

.approvedReplaysMockup .catalogPager{
  margin:18px 0 0!important;
  min-height:48px!important;
  padding:8px 12px!important;
  border-radius:7px!important;
  border:1px solid rgba(203,219,212,.13)!important;
  background:#0d1517!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important;
}
.approvedReplaysMockup .pageBtn{
  background:#10191b!important;
  border-color:rgba(203,219,212,.13)!important;
}
.approvedReplaysMockup .pageBtn.active{
  background:#63a914!important;
  border-color:#8bd125!important;
}

@media(max-width:1050px){
  .approvedReplaysMockup .approvedReplaysControlBar{grid-template-columns:1.35fr 1fr 1fr!important}
  .approvedReplaysMockup .approvedReplaysControlBar .replaySearchField{grid-column:1/-1!important}
  .approvedReplaysMockup .discoveryCardGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:650px){
  body.replaysPageActive .topbar{height:58px!important}
  .replaysDiscoveryPage.approvedReplaysMockup{width:calc(100% - 20px)!important;padding-top:10px!important}
  .approvedReplaysMockup .replaysHeroBanner{min-height:205px!important}
  .approvedReplaysMockup .replaysHeroContent{min-height:205px!important;padding:25px 20px!important}
  .approvedReplaysMockup .pageTitle{font-size:50px!important}
  .approvedReplaysMockup .replaysPageSub{display:block!important}
  .approvedReplaysMockup .replaysPageSub span{display:block!important;margin-top:5px!important}
  .approvedReplaysMockup .approvedReplaysControlBar{grid-template-columns:1fr!important}
  .approvedReplaysMockup .approvedReplaysControlBar .replaySearchField{grid-column:auto!important}
  .approvedReplaysMockup .discoveryCardGrid{grid-template-columns:1fr!important}
}

/* ================================================================
   v0.3.5.80 — REPLAYS LAYOUT ALIGN + PREMIUM DEPTH
   Approved mockup alignment/depth pass. Scope: /replays only.
   ================================================================ */
.replaysDiscoveryPage.approvedReplaysMockup{
  width:min(1760px,calc(100% - 40px))!important;
  max-width:1760px!important;
  padding-top:22px!important;
}
.approvedReplaysMockup .replaysHeroBanner,
.approvedReplaysMockup .approvedReplaysControlBar,
.approvedReplaysMockup .discoveryCatalogMeta,
.approvedReplaysMockup .discoveryCardGrid,
.approvedReplaysMockup #pagination{
  width:100%!important;
  max-width:none!important;
}

/* 1. Hero: same master grid, stronger depth and cleaner frame. */
.approvedReplaysMockup .replaysHeroBanner{
  min-height:252px!important;
  margin-bottom:14px!important;
  border-radius:11px!important;
  border:1px solid rgba(210,226,219,.20)!important;
  box-shadow:
    0 24px 60px rgba(0,0,0,.30),
    0 1px 0 rgba(255,255,255,.025),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.45)!important;
}
.approvedReplaysMockup .replaysHeroBanner::before{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    inset 0 -72px 105px rgba(0,0,0,.20),
    inset 0 35px 80px rgba(255,255,255,.018)!important;
}
.approvedReplaysMockup .replaysHeroBackdrop{
  background-position:center 66%!important;
  filter:saturate(.90) contrast(1.17) brightness(.79)!important;
}
.approvedReplaysMockup .replaysHeroShade{
  background:
    linear-gradient(90deg,rgba(4,8,10,.93) 0%,rgba(5,10,12,.76) 30%,rgba(5,10,12,.28) 61%,rgba(5,10,12,.18) 100%),
    linear-gradient(180deg,rgba(3,7,9,.04) 0%,rgba(3,7,9,.04) 50%,rgba(4,9,11,.62) 100%)!important;
}
.approvedReplaysMockup .replaysHeroContent{
  min-height:252px!important;
  padding:35px 42px 31px!important;
}
.approvedReplaysMockup .replaysHeading{max-width:700px!important}
.approvedReplaysMockup .pageTitle{
  font-size:78px!important;
  text-shadow:0 12px 34px rgba(0,0,0,.48)!important;
}

/* 2. One premium control surface instead of floating flat fields. */
.approvedReplaysMockup .approvedReplaysControlBar{
  grid-template-columns:minmax(360px,1.55fr) repeat(3,minmax(150px,.78fr)) minmax(150px,.72fr)!important;
  gap:9px!important;
  margin:0 0 14px!important;
  padding:9px!important;
  border:1px solid rgba(211,226,219,.18)!important;
  border-radius:11px!important;
  background:linear-gradient(180deg,rgba(19,28,31,.96),rgba(11,18,21,.97))!important;
  box-shadow:
    0 18px 45px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -1px 0 rgba(0,0,0,.38)!important;
  backdrop-filter:blur(18px) saturate(1.08)!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField,
.approvedReplaysMockup .approvedReplaysControlBar select{
  min-height:52px!important;
  border-radius:7px!important;
  border:1px solid rgba(216,230,224,.15)!important;
  background:linear-gradient(180deg,#111a1d,#0b1215)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -1px 0 rgba(0,0,0,.36),
    0 5px 15px rgba(0,0,0,.10)!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField{
  background:linear-gradient(180deg,#141e21,#0d1518)!important;
}
.approvedReplaysMockup .approvedReplaysControlBar input{
  min-height:50px!important;
  font-size:12px!important;
}
.approvedReplaysMockup .approvedReplaysControlBar select{
  font-size:11px!important;
  color:#e1e7e4!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchIcon{
  color:#b9c5bf!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField:hover,
.approvedReplaysMockup .approvedReplaysControlBar select:hover{
  border-color:rgba(226,237,232,.29)!important;
  background:linear-gradient(180deg,#182326,#10181b)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 7px 20px rgba(0,0,0,.14)!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField:focus-within,
.approvedReplaysMockup .approvedReplaysControlBar select:focus{
  border-color:rgba(101,219,86,.62)!important;
  box-shadow:
    0 0 0 2px rgba(101,219,86,.065),
    0 10px 26px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.05)!important;
}

/* 3. Cards: elevated modules with clear image/body separation. */
.approvedReplaysMockup .discoveryCardGrid{
  gap:16px!important;
}
.approvedReplaysMockup .replayCard.approvedMockupCard{
  position:relative!important;
  min-height:382px!important;
  border-radius:10px!important;
  border:1px solid rgba(211,226,219,.20)!important;
  background:linear-gradient(180deg,#0f171a 0%,#091014 100%)!important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.28),
    0 2px 8px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 0 0 1px rgba(255,255,255,.012)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.approvedReplaysMockup .replayCard.approvedMockupCard::before{
  content:"";
  position:absolute;
  z-index:10;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.44)!important;
}
.approvedReplaysMockup .replayCard.approvedMockupCard::after{
  content:"";
  position:absolute;
  z-index:11;
  left:10%;
  right:10%;
  top:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(116,226,93,.20),rgba(255,255,255,.09),transparent);
  opacity:.75;
}
.approvedReplaysMockup .replayCard.approvedMockupCard:hover{
  transform:translateY(-4px)!important;
  border-color:rgba(113,221,94,.40)!important;
  box-shadow:
    0 30px 68px rgba(0,0,0,.36),
    0 0 26px rgba(101,219,86,.035),
    inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.approvedReplaysMockup .replayCard .art{
  height:clamp(190px,13vw,235px)!important;
  border-bottom:1px solid rgba(215,229,223,.14)!important;
  box-shadow:inset 0 -16px 34px rgba(0,0,0,.13)!important;
  filter:saturate(1.04) contrast(1.11) brightness(1.03)!important;
}
.approvedReplaysMockup .replayCard:hover .art{
  filter:saturate(1.07) contrast(1.13) brightness(1.07)!important;
}
.approvedReplaysMockup .replayCard .art::before{
  background:
    radial-gradient(ellipse at 50% 56%,rgba(255,255,255,.045),transparent 35%),
    linear-gradient(180deg,rgba(2,6,7,.01),rgba(2,6,7,.015) 52%,rgba(3,7,9,.16) 100%)!important;
}
.approvedReplaysMockup .replayCard .art:after{
  background:linear-gradient(180deg,rgba(3,7,8,.01),rgba(3,7,8,0) 56%,rgba(4,9,11,.42) 100%)!important;
}
.approvedReplaysMockup .tankSprite{
  width:88%!important;
  height:93%!important;
  filter:brightness(1.18) contrast(1.15) saturate(1.05) drop-shadow(0 17px 18px rgba(0,0,0,.72))!important;
  transition:transform .18s ease,filter .18s ease!important;
}
.approvedReplaysMockup .replayCard:hover .tankSprite{
  transform:translateX(-50%) translateY(-2px)!important;
  filter:brightness(1.21) contrast(1.17) saturate(1.06) drop-shadow(0 19px 20px rgba(0,0,0,.76))!important;
}

/* 4. Premium overlay and region pill. */
.approvedReplaysMockup .cardImageOverlay{
  top:11px!important;
  left:11px!important;
  padding:8px 11px!important;
  border-radius:7px!important;
  border:1px solid rgba(228,238,233,.20)!important;
  background:linear-gradient(135deg,rgba(8,14,16,.88),rgba(18,28,29,.68))!important;
  backdrop-filter:blur(12px) saturate(1.12)!important;
  box-shadow:
    0 10px 26px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.28)!important;
}
.approvedReplaysMockup .cardImageOverlay strong{
  font-size:13px!important;
  color:#fbfcfb!important;
  text-shadow:0 2px 8px rgba(0,0,0,.42)!important;
}
.approvedReplaysMockup .cardImageOverlay strong span{
  color:#a5b3ad!important;
  font-size:10px!important;
}
.approvedReplaysMockup .cardRegionTag{
  top:11px!important;
  right:11px!important;
  min-width:50px!important;
  height:31px!important;
  border-radius:7px!important;
  border-color:rgba(219,234,227,.19)!important;
  background:linear-gradient(180deg,rgba(10,17,19,.88),rgba(7,13,15,.80))!important;
  box-shadow:0 9px 23px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.approvedReplaysMockup .cardRegionIcon{color:#87aecd!important}

/* Distinct body layers instead of one flat slab. */
.approvedReplaysMockup .cardBody{
  position:relative!important;
  background:linear-gradient(180deg,#0d1518 0%,#091014 100%)!important;
}
.approvedReplaysMockup .cardResultBlock{
  min-height:76px!important;
  padding:12px 14px 10px!important;
  background:
    linear-gradient(90deg,rgba(99,225,90,.025),transparent 34%),
    linear-gradient(180deg,#10191c,#0c1417)!important;
  border-bottom-color:rgba(208,224,217,.11)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.022)!important;
}
.approvedReplaysMockup .cardResultBlock .outcome{
  font-size:18px!important;
  text-shadow:0 2px 10px rgba(0,0,0,.24)!important;
}
.approvedReplaysMockup .statsRow{
  min-height:72px!important;
  padding:10px 14px!important;
  background:linear-gradient(180deg,#0a1215,#081013)!important;
  border-bottom-color:rgba(208,224,217,.11)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
}
.approvedReplaysMockup .statsRow strong,
.approvedReplaysMockup .statsRow .damageStat strong{
  font-size:20px!important;
}
.approvedReplaysMockup .cardAwards{
  min-height:48px!important;
  padding:8px 14px!important;
  background:#0b1316!important;
  border-bottom-color:rgba(208,224,217,.10)!important;
}
.approvedReplaysMockup .cardFoot{
  min-height:42px!important;
  padding:0 14px!important;
  background:linear-gradient(180deg,#0a1114,#080e11)!important;
  border-top:0!important;
}
.approvedReplaysMockup .cardFoot b{
  position:relative;
  transition:color .16s ease,transform .16s ease,text-shadow .16s ease!important;
}
.approvedReplaysMockup .replayCard:hover .cardFoot b{
  color:#82f179!important;
  transform:translateX(1px)!important;
  text-shadow:0 0 10px rgba(101,219,86,.16)!important;
}
.approvedReplaysMockup .replayCard:hover .cardFoot b i{
  transform:translateX(4px)!important;
}

/* 5. Pagination belongs to the same visual system/grid. */
.approvedReplaysMockup .catalogPager{
  margin-top:20px!important;
  min-height:54px!important;
  padding:9px 13px!important;
  border-radius:9px!important;
  border-color:rgba(210,225,218,.17)!important;
  background:linear-gradient(180deg,#111a1d,#0b1316)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.035)!important;
}

@media(max-width:1400px){
  .replaysDiscoveryPage.approvedReplaysMockup{width:min(1380px,calc(100% - 32px))!important}
  .approvedReplaysMockup .pageTitle{font-size:72px!important}
  .approvedReplaysMockup .discoveryCardGrid{gap:13px!important}
}
@media(max-width:1050px){
  .replaysDiscoveryPage.approvedReplaysMockup{width:calc(100% - 28px)!important}
  .approvedReplaysMockup .approvedReplaysControlBar{grid-template-columns:1.35fr 1fr 1fr!important}
  .approvedReplaysMockup .approvedReplaysControlBar .replaySearchField{grid-column:1/-1!important}
  .approvedReplaysMockup .discoveryCardGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:650px){
  .replaysDiscoveryPage.approvedReplaysMockup{width:calc(100% - 20px)!important}
  .approvedReplaysMockup .replaysHeroBanner{min-height:215px!important}
  .approvedReplaysMockup .replaysHeroContent{min-height:215px!important;padding:26px 20px!important}
  .approvedReplaysMockup .pageTitle{font-size:50px!important}
  .approvedReplaysMockup .approvedReplaysControlBar{grid-template-columns:1fr!important;padding:7px!important}
  .approvedReplaysMockup .approvedReplaysControlBar .replaySearchField{grid-column:auto!important}
  .approvedReplaysMockup .discoveryCardGrid{grid-template-columns:1fr!important}
  .approvedReplaysMockup .replayCard .art{height:195px!important}
}

/* ================================================================
   v0.3.5.81 — REPLAYS CINEMATIC CANVAS WIDTH + HEADER ALIGN FIX
   Scope: /replays only. Match the approved detailed-report 1672px canvas.
   ================================================================ */
body.replaysPageActive .approvedTopbar{
  grid-template-columns:220px 1fr minmax(420px,auto)!important;
  padding-left:max(28px,calc((100vw - 1672px)/2))!important;
  padding-right:max(28px,calc((100vw - 1672px)/2))!important;
}
.replaysDiscoveryPage.approvedReplaysMockup{
  width:min(1672px,calc(100% - 48px))!important;
  max-width:1672px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.approvedReplaysMockup .replaysHeroBanner,
.approvedReplaysMockup .approvedReplaysControlBar,
.approvedReplaysMockup .discoveryCatalogMeta,
.approvedReplaysMockup .discoveryCardGrid,
.approvedReplaysMockup #pagination{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

@media(max-width:1400px){
  body.replaysPageActive .approvedTopbar{
    grid-template-columns:190px 1fr auto!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup{
    width:100%!important;
    max-width:none!important;
  }
}
@media(max-width:1050px){
  .replaysDiscoveryPage.approvedReplaysMockup{
    width:calc(100% - 28px)!important;
  }
}
@media(max-width:650px){
  body.replaysPageActive .approvedTopbar{
    grid-template-columns:180px 1fr auto!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup{
    width:calc(100% - 20px)!important;
  }
}

/* ================================================================
   v0.3.5.83 — REPLAYS HEADER EXACT PARITY FIX
   Scope: /replays top header only. Match /replay/:id exactly.
   ================================================================ */
body.replaysPageActive .approvedTopbar{
  height:76px!important;
  display:grid!important;
  grid-template-columns:220px 1fr minmax(420px,auto)!important;
  gap:26px!important;
  padding-top:0!important;
  padding-bottom:0!important;
  padding-left:max(28px,calc((100vw - 1672px)/2))!important;
  padding-right:max(28px,calc((100vw - 1672px)/2))!important;
  background:linear-gradient(180deg,rgba(8,12,14,.99),rgba(6,10,12,.965))!important;
  border-bottom:1px solid rgba(255,255,255,.085)!important;
  backdrop-filter:blur(22px) saturate(1.15)!important;
  box-shadow:0 12px 40px rgba(0,0,0,.18)!important;
}
body.replaysPageActive .approvedBrand{
  gap:10px!important;
  font-family:var(--approved-font)!important;
  font-size:23px!important;
  letter-spacing:.015em!important;
}
body.replaysPageActive .approvedBrand .brandWord{
  font-size:23px!important;
  letter-spacing:.012em!important;
}
body.replaysPageActive .approvedBrandLogo{
  width:36px!important;
  height:42px!important;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))!important;
}
body.replaysPageActive .approvedNav{
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  gap:34px!important;
}
body.replaysPageActive .approvedNav a{
  position:relative!important;
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  font-family:var(--approved-font)!important;
  font-size:15px!important;
  font-weight:600!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
  color:#c3c8c6!important;
}
body.replaysPageActive .approvedNav a:hover{color:#fff!important}
body.replaysPageActive .approvedNav a:nth-child(2){color:#f6f8f7!important}
body.replaysPageActive .approvedNav a:nth-child(2)::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  border-radius:3px 3px 0 0;
  background:#65db56;
  box-shadow:0 0 12px rgba(101,219,86,.22);
}
body.replaysPageActive .approvedHeaderActions{
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:14px!important;
}
body.replaysPageActive .approvedSearchBox{
  width:285px!important;
  height:38px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:20px!important;
  background:rgba(5,10,12,.78)!important;
}
body.replaysPageActive .approvedSearchBox input{
  font-family:var(--approved-ui)!important;
  font-size:11px!important;
  color:#d8ddda!important;
}
body.replaysPageActive .approvedLivePill{
  height:36px!important;
  padding:0 14px!important;
  border-radius:18px!important;
  font-family:var(--approved-font)!important;
  font-size:11px!important;
}
body.replaysPageActive .approvedSignIn{
  height:40px!important;
  padding:0 20px!important;
  font-family:var(--approved-font)!important;
  font-size:13px!important;
  font-weight:700!important;
  letter-spacing:.04em!important;
}

@media(max-width:1200px){
  body.replaysPageActive .approvedTopbar{
    grid-template-columns:190px 1fr auto!important;
    gap:26px!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }
  body.replaysPageActive .approvedSearchBox{width:230px!important}
  body.replaysPageActive .approvedLivePill{display:none!important}
  body.replaysPageActive .approvedNav{gap:20px!important}
  body.replaysPageActive .approvedNav a{font-size:13px!important}
}
@media(max-width:850px){
  body.replaysPageActive .approvedTopbar{
    grid-template-columns:180px 1fr auto!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
  body.replaysPageActive .approvedSearchBox{display:none!important}
  body.replaysPageActive .approvedNav a:nth-child(n+4){display:none!important}
  body.replaysPageActive .approvedSignIn{padding:0 12px!important}
}

/* ================================================================
   v0.3.5.84 — REPLAYS COMPACT CANVAS + DENSITY
   Scope: /replays content only. Keep exact /replay header parity.
   ================================================================ */

/* 1. Compact central replay-catalog canvas. */
.replaysDiscoveryPage.approvedReplaysMockup{
  width:min(1280px,calc(100% - 40px))!important;
  max-width:1280px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-top:14px!important;
  padding-bottom:44px!important;
}
.approvedReplaysMockup .replaysHeroBanner,
.approvedReplaysMockup .approvedReplaysControlBar,
.approvedReplaysMockup .discoveryCatalogMeta,
.approvedReplaysMockup .discoveryCardGrid,
.approvedReplaysMockup #pagination{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* 2. Hero becomes a compact working banner, not a giant landing page. */
.approvedReplaysMockup .replaysHeroBanner{
  min-height:194px!important;
  margin-bottom:9px!important;
  border-radius:9px!important;
  box-shadow:0 15px 38px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.approvedReplaysMockup .replaysHeroContent{
  min-height:194px!important;
  padding:24px 29px 22px!important;
}
.approvedReplaysMockup .replaysHeading{max-width:600px!important}
.approvedReplaysMockup .eyebrow{
  font-size:7px!important;
  letter-spacing:.18em!important;
}
.approvedReplaysMockup .eyebrow:before{width:31px!important}
.approvedReplaysMockup .pageTitle{
  margin:10px 0 8px!important;
  font-size:62px!important;
  line-height:.90!important;
}
.approvedReplaysMockup .replaysPageSub{
  gap:7px!important;
  font-size:10px!important;
}

/* 3. Dense premium search/filter rail. */
.approvedReplaysMockup .approvedReplaysControlBar{
  grid-template-columns:minmax(285px,1.46fr) repeat(3,minmax(125px,.73fr)) minmax(125px,.68fr)!important;
  gap:7px!important;
  margin:0 0 8px!important;
  padding:7px!important;
  border-radius:9px!important;
  box-shadow:0 12px 30px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField,
.approvedReplaysMockup .approvedReplaysControlBar select{
  min-height:44px!important;
  height:44px!important;
  border-radius:6px!important;
}
.approvedReplaysMockup .approvedReplaysControlBar input{
  min-height:42px!important;
  height:42px!important;
  font-size:11px!important;
}
.approvedReplaysMockup .approvedReplaysControlBar select{
  padding:0 12px!important;
  font-size:10px!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField{padding-left:12px!important}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchIcon{
  width:16px!important;
  height:16px!important;
  flex-basis:16px!important;
  margin-right:8px!important;
}
.approvedReplaysMockup .activeFilterBar{
  min-height:28px!important;
  margin:0 0 6px!important;
}
.approvedReplaysMockup .activeFilterChip{
  min-height:25px!important;
  padding:0 8px!important;
  font-size:8px!important;
}

/* 4. Results metadata is functional, not a large separator. */
.approvedReplaysMockup .discoveryCatalogMeta{
  min-height:18px!important;
  margin:1px 0 7px!important;
}
.approvedReplaysMockup .catalogCount{gap:5px!important}
.approvedReplaysMockup .catalogCount b{font-size:11px!important}
.approvedReplaysMockup .catalogCount span,
.approvedReplaysMockup .catalogPageInfo{font-size:8px!important}

/* 5. Compact 3-column replay database grid. */
.approvedReplaysMockup .discoveryCardGrid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:11px!important;
}
.approvedReplaysMockup .replayCard.approvedMockupCard{
  min-height:292px!important;
  border-radius:8px!important;
  box-shadow:0 13px 30px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.approvedReplaysMockup .replayCard.approvedMockupCard:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 18px 40px rgba(0,0,0,.31),0 0 17px rgba(101,219,86,.028),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.approvedReplaysMockup .replayCard .art{
  height:146px!important;
  min-height:146px!important;
  box-shadow:inset 0 -12px 25px rgba(0,0,0,.11)!important;
}
.approvedReplaysMockup .tankSprite{
  width:85%!important;
  height:91%!important;
  bottom:-2%!important;
  filter:brightness(1.17) contrast(1.14) saturate(1.04) drop-shadow(0 12px 13px rgba(0,0,0,.68))!important;
}
.approvedReplaysMockup .replayCard:hover .tankSprite{
  transform:translateX(-50%) translateY(-1px)!important;
  filter:brightness(1.20) contrast(1.16) saturate(1.05) drop-shadow(0 14px 14px rgba(0,0,0,.72))!important;
}

/* 6. Smaller image badges / overlays. */
.approvedReplaysMockup .cardImageOverlay{
  top:8px!important;
  left:8px!important;
  padding:6px 8px!important;
  border-radius:5px!important;
  backdrop-filter:blur(9px) saturate(1.08)!important;
  box-shadow:0 6px 16px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.approvedReplaysMockup .cardImageOverlay strong{
  font-size:11px!important;
  gap:5px!important;
}
.approvedReplaysMockup .cardImageOverlay strong span{font-size:9px!important}
.approvedReplaysMockup .cardRegionTag{
  top:8px!important;
  right:8px!important;
  min-width:42px!important;
  height:25px!important;
  padding:0 6px!important;
  border-radius:5px!important;
  gap:4px!important;
}
.approvedReplaysMockup .cardRegionTag b{font-size:8px!important}
.approvedReplaysMockup .cardRegionIcon{width:11px!important;height:11px!important}

/* 7. Dense card body. Every row earns its vertical space. */
.approvedReplaysMockup .cardResultBlock{
  min-height:57px!important;
  padding:8px 11px 7px!important;
}
.approvedReplaysMockup .cardReplayKicker{
  margin-bottom:2px!important;
  font-size:7px!important;
}
.approvedReplaysMockup .cardResultBlock .outcome{
  font-size:15px!important;
  line-height:1!important;
}
.approvedReplaysMockup .cardNation{
  margin-top:4px!important;
  font-size:8px!important;
}
.approvedReplaysMockup .statsRow{
  min-height:56px!important;
  padding:8px 11px!important;
}
.approvedReplaysMockup .statsRow>div{padding-left:9px!important}
.approvedReplaysMockup .statsRow strong,
.approvedReplaysMockup .statsRow .damageStat strong{
  font-size:17px!important;
}
.approvedReplaysMockup .statsRow span{
  margin-top:4px!important;
  font-size:6px!important;
}
.approvedReplaysMockup .cardAwards{
  min-height:38px!important;
  padding:5px 11px!important;
  gap:6px!important;
}
.approvedReplaysMockup .cardAwards .cardAwardIcon{
  width:24px!important;
  height:25px!important;
}
.approvedReplaysMockup .cardAwards .cardAwardIcon img{
  width:22px!important;
  height:25px!important;
}
.approvedReplaysMockup .cardFoot{
  min-height:34px!important;
  padding:0 11px!important;
  font-size:8px!important;
}
.approvedReplaysMockup .cardFoot b{font-size:8px!important}

/* 8. Pagination becomes a compact utility strip. */
.approvedReplaysMockup .catalogPager{
  margin-top:12px!important;
  min-height:42px!important;
  padding:6px 9px!important;
  border-radius:7px!important;
}
.approvedReplaysMockup .pageBtn{
  min-width:30px!important;
  height:30px!important;
  padding:0 8px!important;
  font-size:9px!important;
}

/* Keep exact header parity from v0.3.5.83; only catalog body compresses. */
@media(max-width:1320px){
  .replaysDiscoveryPage.approvedReplaysMockup{
    width:calc(100% - 28px)!important;
    max-width:none!important;
  }
}
@media(max-width:1050px){
  .approvedReplaysMockup .approvedReplaysControlBar{
    grid-template-columns:1.35fr 1fr 1fr!important;
  }
  .approvedReplaysMockup .approvedReplaysControlBar .replaySearchField{grid-column:1/-1!important}
  .approvedReplaysMockup .discoveryCardGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .approvedReplaysMockup .replayCard .art{height:160px!important;min-height:160px!important}
}
@media(max-width:650px){
  .replaysDiscoveryPage.approvedReplaysMockup{
    width:calc(100% - 20px)!important;
    padding-top:10px!important;
  }
  .approvedReplaysMockup .replaysHeroBanner{min-height:185px!important}
  .approvedReplaysMockup .replaysHeroContent{min-height:185px!important;padding:23px 18px!important}
  .approvedReplaysMockup .pageTitle{font-size:48px!important}
  .approvedReplaysMockup .approvedReplaysControlBar{grid-template-columns:1fr!important;padding:6px!important}
  .approvedReplaysMockup .approvedReplaysControlBar .replaySearchField{grid-column:auto!important}
  .approvedReplaysMockup .discoveryCardGrid{grid-template-columns:1fr!important}
  .approvedReplaysMockup .replayCard .art{height:178px!important;min-height:178px!important}
}


/* ================================================================
   v0.3.5.86 — REPLAYS BLACK BASE + GRAPHITE CARDS
   Scope: /replays only. Preserve v0.3.5.84 compact geometry/header.
   ================================================================ */

/* 1. Pure black / neutral base. No swamp/green page haze. */
body.replaysPageActive{
  background:#050607!important;
  color:#eef2f0!important;
}
body.replaysPageActive .noise{opacity:.010!important}
.replaysDiscoveryPage::before{
  background:#050607!important;
}
.replaysDiscoveryPage::after{
  display:none!important;
  background:none!important;
}

/* 2. Hero: preserve real image, remove heavy global tint. */
.approvedReplaysMockup .replaysHeroBanner{
  background:#0c0f11!important;
  border-color:rgba(255,255,255,.105)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.approvedReplaysMockup .replaysHeroBanner::before{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018)!important;
}
.approvedReplaysMockup .replaysHeroBackdrop{
  filter:none!important;
  opacity:1!important;
}
.approvedReplaysMockup .replaysHeroBackdrop::before{
  display:none!important;
  background:none!important;
}
.approvedReplaysMockup .replaysHeroBackdrop::after{
  display:none!important;
  background:none!important;
}
.approvedReplaysMockup .replaysHeroShade{
  background:linear-gradient(90deg,rgba(2,3,4,.82) 0%,rgba(2,3,4,.57) 28%,rgba(2,3,4,.13) 58%,rgba(2,3,4,.02) 100%)!important;
}

/* 3. Search/filter rail = clean graphite surface. */
.approvedReplaysMockup .approvedReplaysControlBar{
  background:#0d1318!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField,
.approvedReplaysMockup .approvedReplaysControlBar select{
  background:#090d11!important;
  border-color:rgba(255,255,255,.10)!important;
  color:#e6ece9!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
}
.approvedReplaysMockup .approvedReplaysControlBar input{
  color:#e8eeeb!important;
}
.approvedReplaysMockup .approvedReplaysControlBar input::placeholder{
  color:#87918d!important;
  opacity:1!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchIcon{
  color:#aeb8b3!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField:hover,
.approvedReplaysMockup .approvedReplaysControlBar select:hover{
  background:#0c1216!important;
  border-color:rgba(255,255,255,.16)!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField:focus-within,
.approvedReplaysMockup .approvedReplaysControlBar select:focus{
  border-color:rgba(101,219,86,.42)!important;
  box-shadow:0 0 0 1px rgba(101,219,86,.09),inset 0 1px 0 rgba(255,255,255,.025)!important;
}

/* 4. Graphite cards on black base. */
.approvedReplaysMockup .replayCard.approvedMockupCard{
  background:#0f1418!important;
  border-color:rgba(255,255,255,.105)!important;
  box-shadow:0 13px 30px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.028)!important;
}
.approvedReplaysMockup .replayCard.approvedMockupCard::before{
  background:none!important;
  opacity:0!important;
}
.approvedReplaysMockup .replayCard.approvedMockupCard::after{
  background:none!important;
  opacity:0!important;
}
.approvedReplaysMockup .replayCard.approvedMockupCard:hover{
  background:#11171c!important;
  border-color:rgba(125,224,103,.26)!important;
  box-shadow:0 18px 40px rgba(0,0,0,.42),0 0 0 1px rgba(101,219,86,.025),inset 0 1px 0 rgba(255,255,255,.045)!important;
}

/* 5. Images: native map brightness, no dark veil. */
.approvedReplaysMockup .replayCard .art{
  filter:none!important;
  opacity:1!important;
  background-color:#12171b!important;
  box-shadow:none!important;
}
.approvedReplaysMockup .replayCard .art::before{
  display:none!important;
  content:none!important;
  background:none!important;
  opacity:0!important;
}
.approvedReplaysMockup .replayCard .art::after{
  display:none!important;
  content:none!important;
  background:none!important;
  opacity:0!important;
}
.approvedReplaysMockup .replayCard:hover .art{
  filter:none!important;
  opacity:1!important;
}

/* 6. Tank renders brighter/cleaner, still grounded by contact shadow. */
.approvedReplaysMockup .tankSprite{
  filter:brightness(1.28) contrast(1.12) saturate(1.05) drop-shadow(0 10px 12px rgba(0,0,0,.58))!important;
}
.approvedReplaysMockup .replayCard:hover .tankSprite{
  filter:brightness(1.32) contrast(1.13) saturate(1.06) drop-shadow(0 12px 14px rgba(0,0,0,.62))!important;
}

/* 7. Cleaner image labels; EU badge pushed to the visual right edge. */
.approvedReplaysMockup .cardImageOverlay{
  background:rgba(20,24,27,.90)!important;
  border-color:rgba(255,255,255,.13)!important;
  backdrop-filter:none!important;
  box-shadow:0 6px 16px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.approvedReplaysMockup .cardImageOverlay strong{
  color:#f7faf8!important;
  text-shadow:none!important;
}
.approvedReplaysMockup .cardImageOverlay strong span{
  color:#c7d0cc!important;
}
.approvedReplaysMockup .cardRegionTag{
  right:5px!important;
  background:rgba(12,17,20,.91)!important;
  border-color:rgba(255,255,255,.13)!important;
  color:#e1e8e4!important;
  backdrop-filter:none!important;
  box-shadow:0 5px 14px rgba(0,0,0,.25)!important;
}
.approvedReplaysMockup .cardRegionIcon{
  color:#9fc8e9!important;
  filter:brightness(1.12)!important;
}

/* 8. Body sections: neutral graphite hierarchy, no colored washes. */
.approvedReplaysMockup .cardBody{
  background:#0f1418!important;
}
.approvedReplaysMockup .cardResultBlock{
  background:#11171c!important;
  border-top:1px solid rgba(255,255,255,.075)!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
}
.approvedReplaysMockup .cardReplayKicker{
  color:#8f9a95!important;
}
.approvedReplaysMockup .cardNation{
  color:#b2bcb7!important;
}
.approvedReplaysMockup .statsRow{
  background:#0d1216!important;
  border-color:rgba(255,255,255,.075)!important;
}
.approvedReplaysMockup .statsRow>div{
  border-left-color:rgba(255,255,255,.075)!important;
}
.approvedReplaysMockup .statsRow strong,
.approvedReplaysMockup .statsRow .damageStat strong{
  color:#f3f6f4!important;
}
.approvedReplaysMockup .statsRow span{
  color:#89938f!important;
}
.approvedReplaysMockup .cardAwards{
  background:#0f1418!important;
  border-bottom-color:rgba(255,255,255,.07)!important;
}
.approvedReplaysMockup .cardAwards .cardAwardIcon img{
  filter:brightness(1.10) contrast(1.05) saturate(1.05)!important;
}
.approvedReplaysMockup .cardFoot{
  background:#0c1115!important;
  border-top:1px solid rgba(255,255,255,.055)!important;
  color:#aeb8b3!important;
}
.approvedReplaysMockup .cardFoot b{
  color:#72e968!important;
  font-weight:800!important;
}
.approvedReplaysMockup .replayCard:hover .cardFoot b{
  color:#8af17f!important;
}

/* 9. Pagination = graphite utility strip, not another black hole. */
.approvedReplaysMockup .catalogPager{
  background:#0f1418!important;
  border-color:rgba(255,255,255,.095)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.approvedReplaysMockup .pageBtn{
  background:#0a0f13!important;
  border-color:rgba(255,255,255,.08)!important;
  color:#aeb7b3!important;
}
.approvedReplaysMockup .pageBtn.active{
  background:#5ea900!important;
  border-color:#78ce11!important;
  color:#fff!important;
}


/* ================================================================
   v0.3.5.87 — REPLAYS GAME UI PREMIUM PASS
   Scope: /replays only. Preserve v0.3.5.86 geometry/colors/data logic.
   ================================================================ */

/* Premium control rail: stronger layered surface, no geometry changes. */
.approvedReplaysMockup .approvedReplaysControlBar{
  position:relative!important;
  background:linear-gradient(180deg,#111820 0%,#0b1116 100%)!important;
  border-color:rgba(255,255,255,.13)!important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.65)!important;
}
.approvedReplaysMockup .approvedReplaysControlBar::before{
  content:"";
  position:absolute;
  left:12px;right:12px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  pointer-events:none;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField,
.approvedReplaysMockup .approvedReplaysControlBar select{
  background:linear-gradient(180deg,#0b1015,#080c10)!important;
  border-color:rgba(255,255,255,.11)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.028),0 1px 0 rgba(0,0,0,.55)!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField:hover,
.approvedReplaysMockup .approvedReplaysControlBar select:hover{
  border-color:rgba(255,255,255,.19)!important;
  background:linear-gradient(180deg,#0f161c,#0a0f14)!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField:focus-within,
.approvedReplaysMockup .approvedReplaysControlBar select:focus{
  border-color:rgba(120,224,96,.50)!important;
  box-shadow:0 0 0 1px rgba(120,224,96,.10),0 0 18px rgba(120,224,96,.05),inset 0 1px 0 rgba(255,255,255,.035)!important;
}

/* Hero micro polish: game-client framing without changing dimensions. */
.approvedReplaysMockup .replaysHeroBanner{
  box-shadow:0 16px 38px rgba(0,0,0,.39),inset 0 1px 0 rgba(255,255,255,.055),inset 0 -1px 0 rgba(0,0,0,.72)!important;
}
.approvedReplaysMockup .replaysHeroBanner::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  z-index:5!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),inset 0 16px 28px rgba(255,255,255,.012),inset 0 -22px 38px rgba(0,0,0,.20)!important;
}
.approvedReplaysMockup .replaysHeroShade{
  background:linear-gradient(90deg,rgba(2,3,4,.76) 0%,rgba(2,3,4,.47) 26%,rgba(2,3,4,.10) 56%,rgba(2,3,4,.01) 100%)!important;
}

/* Card shell: subtle game-panel bevel and stronger elevation. */
.approvedReplaysMockup .replayCard.approvedMockupCard{
  position:relative!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,#11171c 0%,#0d1216 100%)!important;
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.78)!important;
  transform:translateZ(0);
  transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease!important;
}
.approvedReplaysMockup .replayCard.approvedMockupCard::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:9!important;
  left:0;top:0;bottom:0;width:2px!important;
  opacity:.85!important;
  background:rgba(255,255,255,.12)!important;
  pointer-events:none!important;
}
.approvedReplaysMockup .replayCard.cardState-win::before{background:linear-gradient(180deg,#8ce56c,#4f9f41)!important}
.approvedReplaysMockup .replayCard.cardState-loss::before{background:linear-gradient(180deg,#ff7770,#a63d39)!important}
.approvedReplaysMockup .replayCard.cardState-draw::before{background:linear-gradient(180deg,#e6c461,#927525)!important}
.approvedReplaysMockup .replayCard.approvedMockupCard::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:10!important;
  top:0;left:-48%;width:32%;height:1px!important;
  opacity:0!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent)!important;
  pointer-events:none!important;
}
.approvedReplaysMockup .replayCard.approvedMockupCard:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(172,215,160,.25)!important;
  box-shadow:0 20px 42px rgba(0,0,0,.48),0 0 0 1px rgba(126,215,106,.025),inset 0 1px 0 rgba(255,255,255,.075)!important;
}
.approvedReplaysMockup .replayCard.approvedMockupCard:hover::after{
  opacity:.52!important;
  animation:replayCardTopSweep .75s ease-out 1!important;
}
@keyframes replayCardTopSweep{from{left:-38%}to{left:108%}}

/* Image/content seam: a physical layer boundary like a game client panel. */
.approvedReplaysMockup .replayCard .art{
  border-bottom:1px solid rgba(255,255,255,.13)!important;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.66)!important;
  transition:filter .17s ease!important;
}
.approvedReplaysMockup .replayCard:hover .art{
  filter:brightness(1.035) contrast(1.015)!important;
}
.approvedReplaysMockup .tankSprite{
  transition:transform .17s ease,filter .17s ease!important;
}
.approvedReplaysMockup .replayCard:hover .tankSprite{
  transform:translateX(-50%) scale(1.012)!important;
  filter:brightness(1.35) contrast(1.14) saturate(1.06) drop-shadow(0 13px 15px rgba(0,0,0,.63))!important;
}

/* Image label: tighter, metallic/glass client-style badge. */
.approvedReplaysMockup .cardImageOverlay{
  border-radius:4px!important;
  background:linear-gradient(180deg,rgba(32,38,42,.94),rgba(15,19,22,.92))!important;
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:0 7px 16px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.07),inset 2px 0 0 rgba(142,220,122,.35)!important;
}
.approvedReplaysMockup .cardRegionTag{
  border-radius:4px!important;
  background:linear-gradient(180deg,rgba(27,34,38,.95),rgba(11,16,19,.94))!important;
  border-color:rgba(255,255,255,.15)!important;
  box-shadow:0 7px 15px rgba(0,0,0,.29),inset 0 1px 0 rgba(255,255,255,.055)!important;
}

/* Result band gets a restrained state cue without a colored background wash. */
.approvedReplaysMockup .cardResultBlock{
  position:relative!important;
  background:linear-gradient(180deg,#12191e,#10161a)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.032),inset 0 -1px 0 rgba(0,0,0,.55)!important;
}
.approvedReplaysMockup .cardResultBlock::after{
  content:"";
  position:absolute;
  left:12px;right:12px;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
}
.approvedReplaysMockup .cardState-win .cardResultBlock{box-shadow:inset 2px 0 0 rgba(109,220,86,.28),inset 0 1px 0 rgba(255,255,255,.032),inset 0 -1px 0 rgba(0,0,0,.55)!important}
.approvedReplaysMockup .cardState-loss .cardResultBlock{box-shadow:inset 2px 0 0 rgba(239,100,94,.28),inset 0 1px 0 rgba(255,255,255,.032),inset 0 -1px 0 rgba(0,0,0,.55)!important}
.approvedReplaysMockup .cardState-draw .cardResultBlock{box-shadow:inset 2px 0 0 rgba(222,190,90,.26),inset 0 1px 0 rgba(255,255,255,.032),inset 0 -1px 0 rgba(0,0,0,.55)!important}

/* KPI hierarchy: damage leads, kills/xp support. */
.approvedReplaysMockup .statsRow{
  background:linear-gradient(180deg,#0d1318,#0a0f13)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),inset 0 -1px 0 rgba(0,0,0,.62)!important;
}
.approvedReplaysMockup .statsRow>div{
  position:relative!important;
  display:grid!important;
  grid-template-columns:14px 1fr!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  column-gap:6px!important;
}
.approvedReplaysMockup .statsRow>div>i{
  grid-column:1!important;
  grid-row:1/3!important;
  display:grid!important;
  place-items:center!important;
  font-style:normal!important;
  opacity:.58!important;
}
.approvedReplaysMockup .statsRow .cardKpiIcon{
  width:12px!important;
  height:12px!important;
  color:#94a19b!important;
}
.approvedReplaysMockup .statsRow .damageStat .cardKpiIcon{
  color:#a7e36e!important;
  opacity:.95!important;
}
.approvedReplaysMockup .statsRow strong{
  grid-column:2!important;
  grid-row:1!important;
  font-size:14px!important;
  color:#dce3df!important;
}
.approvedReplaysMockup .statsRow .damageStat strong{
  font-size:16px!important;
  color:#fff!important;
  text-shadow:0 0 12px rgba(172,226,117,.05)!important;
}
.approvedReplaysMockup .statsRow span:not(.uiMaskIcon){
  grid-column:2!important;
  grid-row:2!important;
}

/* Medal rail: slightly larger, tighter, with individual reward glow. */
.approvedReplaysMockup .cardAwards{
  gap:5px!important;
  align-items:center!important;
  background:linear-gradient(180deg,#10161a,#0e1418)!important;
}
.approvedReplaysMockup .cardAwards .cardAwardIcon{
  display:grid!important;
  place-items:center!important;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.55))!important;
}
.approvedReplaysMockup .cardAwards .cardAwardIcon img{
  width:24px!important;
  height:24px!important;
  filter:brightness(1.15) contrast(1.06) saturate(1.08)!important;
}
.approvedReplaysMockup .cardAwards .cardAwardIcon.tier-legendary img,
.approvedReplaysMockup .cardAwards .cardAwardIcon.tier-epic img{
  filter:brightness(1.18) contrast(1.07) saturate(1.10) drop-shadow(0 0 5px rgba(227,183,77,.20))!important;
}

/* Footer/action: clearer interactive affordance. */
.approvedReplaysMockup .cardFoot{
  background:linear-gradient(180deg,#0c1115,#090d11)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important;
}
.approvedReplaysMockup .cardFoot b{
  text-shadow:0 0 10px rgba(114,233,104,.06)!important;
  transition:color .16s ease,text-shadow .16s ease!important;
}
.approvedReplaysMockup .cardFoot b i{
  display:inline-block!important;
  transition:transform .16s ease!important;
}
.approvedReplaysMockup .replayCard:hover .cardFoot b{
  color:#91f386!important;
  text-shadow:0 0 13px rgba(114,233,104,.14)!important;
}
.approvedReplaysMockup .replayCard:hover .cardFoot b i{transform:translateX(3px)!important}


/* ================================================================
   v0.3.5.88 — REPLAYS FINAL GAME HUD POLISH
   Scope: /replays only. Final premium HUD pass without layout changes.
   ================================================================ */

/* 1. Final control-bar polish: livelier but restrained interaction states. */
.approvedReplaysMockup .approvedReplaysControlBar{
  background:linear-gradient(180deg,#121920 0%,#0c1116 100%)!important;
  border-color:rgba(255,255,255,.14)!important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.68)!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField,
.approvedReplaysMockup .approvedReplaysControlBar select{
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,color .16s ease!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField:hover,
.approvedReplaysMockup .approvedReplaysControlBar select:hover{
  border-color:rgba(255,255,255,.22)!important;
  background:linear-gradient(180deg,#10171d,#0a0f13)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.025),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField:focus-within,
.approvedReplaysMockup .approvedReplaysControlBar select:focus{
  border-color:rgba(127,226,92,.54)!important;
  background:linear-gradient(180deg,#10181c,#0b1014)!important;
  box-shadow:0 0 0 1px rgba(127,226,92,.12),0 0 20px rgba(127,226,92,.07),inset 0 1px 0 rgba(255,255,255,.05)!important;
}

/* 2. Hero banner: preserve structure, add subtle in-game frame depth. */
.approvedReplaysMockup .replaysHeroBanner{
  box-shadow:0 18px 42px rgba(0,0,0,.41),inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.76)!important;
}
.approvedReplaysMockup .replaysHeroBanner::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  z-index:6!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.022),inset 0 18px 34px rgba(255,255,255,.01),inset 0 -26px 44px rgba(0,0,0,.22)!important;
}

/* 3. Card HUD shell: cleaner metallic edge and more game-panel character. */
.approvedReplaysMockup .replayCard.approvedMockupCard{
  border-color:rgba(255,255,255,.125)!important;
  background:linear-gradient(180deg,#12181d 0%,#0d1217 100%)!important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.43),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.84),
    inset 0 0 0 1px rgba(255,255,255,.012)!important;
}
.approvedReplaysMockup .replayCard.approvedMockupCard:hover{
  border-color:rgba(173,219,157,.28)!important;
  box-shadow:0 22px 46px rgba(0,0,0,.50),0 0 0 1px rgba(138,229,115,.028),inset 0 1px 0 rgba(255,255,255,.085)!important;
}
.approvedReplaysMockup .replayCard .art{
  position:relative!important;
  border-bottom:1px solid rgba(255,255,255,.14)!important;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.68)!important;
}
.approvedReplaysMockup .replayCard .art::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  bottom:8px!important;
  width:58%!important;
  height:16px!important;
  transform:translateX(-50%)!important;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.56) 0%,rgba(0,0,0,.24) 48%,rgba(0,0,0,0) 78%)!important;
  filter:blur(7px)!important;
  opacity:.92!important;
  z-index:1!important;
  pointer-events:none!important;
}

/* 4. Tank render normalization: more stable visual weight across cards. */
.approvedReplaysMockup .tankSprite{
  width:79%!important;
  height:84%!important;
  max-width:79%!important;
  max-height:84%!important;
  bottom:-1%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  filter:brightness(1.31) contrast(1.13) saturate(1.05) drop-shadow(0 12px 14px rgba(0,0,0,.60))!important;
  transition:transform .17s ease,filter .17s ease!important;
}
.approvedReplaysMockup .replayCard:hover .tankSprite{
  transform:translateX(-50%) scale(1.012)!important;
  filter:brightness(1.36) contrast(1.15) saturate(1.07) drop-shadow(0 14px 16px rgba(0,0,0,.64))!important;
}

/* 5. Title / map chip: cleaner game-client chip rather than generic web pill. */
.approvedReplaysMockup .cardImageOverlay{
  position:relative!important;
  padding:6px 10px 6px 12px!important;
  border-radius:4px!important;
  background:linear-gradient(180deg,rgba(34,40,44,.95),rgba(14,18,21,.93))!important;
  border-color:rgba(255,255,255,.17)!important;
  box-shadow:0 8px 18px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.35)!important;
}
.approvedReplaysMockup .cardImageOverlay::before{
  content:""!important;
  position:absolute!important;
  left:0!important;top:0!important;bottom:0!important;
  width:2px!important;
  border-radius:4px 0 0 4px!important;
  background:linear-gradient(180deg,rgba(153,231,104,.88),rgba(77,140,54,.82))!important;
  opacity:.85!important;
}
.approvedReplaysMockup .cardImageOverlay strong{
  color:#f4f7f5!important;
  letter-spacing:.01em!important;
  text-shadow:0 1px 0 rgba(0,0,0,.45)!important;
}
.approvedReplaysMockup .cardRegionTag{
  border-radius:4px!important;
  background:linear-gradient(180deg,rgba(27,34,38,.96),rgba(11,15,18,.95))!important;
  border-color:rgba(255,255,255,.16)!important;
}

/* 6. Result band and KPI row: clearer hierarchy like an in-game battle summary strip. */
.approvedReplaysMockup .cardResultBlock{
  background:linear-gradient(180deg,#131a1f,#10161b)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),inset 0 -1px 0 rgba(0,0,0,.58)!important;
}
.approvedReplaysMockup .statsRow{
  padding:11px 0 10px!important;
  background:linear-gradient(180deg,#0f151a,#0b1014)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.028),inset 0 -1px 0 rgba(0,0,0,.64)!important;
}
.approvedReplaysMockup .statsRow>div{
  min-height:39px!important;
  padding:0 10px!important;
  column-gap:7px!important;
}
.approvedReplaysMockup .statsRow>div+div::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:7px!important;
  bottom:7px!important;
  width:1px!important;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.12),transparent)!important;
}
.approvedReplaysMockup .statsRow>div>i{opacity:.72!important}
.approvedReplaysMockup .statsRow .cardKpiIcon{width:12px!important;height:12px!important;color:#a0aca6!important}
.approvedReplaysMockup .statsRow .damageStat .cardKpiIcon{color:#b0ea76!important}
.approvedReplaysMockup .statsRow strong{
  font-size:15px!important;
  color:#e2e8e4!important;
  letter-spacing:-.01em!important;
}
.approvedReplaysMockup .statsRow .damageStat strong{
  font-size:17px!important;
  color:#ffffff!important;
}
.approvedReplaysMockup .statsRow span:not(.uiMaskIcon){
  color:#96a39d!important;
  font-size:7.2px!important;
  letter-spacing:.09em!important;
}

/* 7. Medal rail: tighter, a touch larger and cleaner like reward badges in-game. */
.approvedReplaysMockup .cardAwards{
  gap:4px!important;
  padding:8px 11px 9px!important;
  background:linear-gradient(180deg,#10161a,#0d1216)!important;
}
.approvedReplaysMockup .cardAwards .cardAwardIcon{filter:drop-shadow(0 4px 6px rgba(0,0,0,.58))!important}
.approvedReplaysMockup .cardAwards .cardAwardIcon img{
  width:25px!important;
  height:25px!important;
  filter:brightness(1.17) contrast(1.07) saturate(1.09)!important;
}
.approvedReplaysMockup .cardAwards .cardAwardIcon.tier-legendary img,
.approvedReplaysMockup .cardAwards .cardAwardIcon.tier-epic img{
  filter:brightness(1.2) contrast(1.08) saturate(1.12) drop-shadow(0 0 6px rgba(226,185,86,.22))!important;
}

/* 8. Footer legibility: username clearer, action more premium but still minimal. */
.approvedReplaysMockup .cardFoot{
  background:linear-gradient(180deg,#0d1216,#090d11)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.022)!important;
}
.approvedReplaysMockup .cardFoot span{
  color:#c1cbc6!important;
  letter-spacing:.01em!important;
}
.approvedReplaysMockup .cardFoot b{
  color:#7ced71!important;
  text-shadow:0 0 12px rgba(114,233,104,.08)!important;
}
.approvedReplaysMockup .replayCard:hover .cardFoot b{
  color:#97f58c!important;
  text-shadow:0 0 14px rgba(114,233,104,.16)!important;
}


/* ================================================================
   v0.3.5.89 — REPLAYS CARD HUD REWORK + 4 COL GRID
   Scope: /replays only. Structural card HUD rework + native dark selects.
   ================================================================ */

/* 1. Native select popup: force dark browser controls/options. */
.approvedReplaysMockup .approvedReplaysControlBar select{
  color-scheme:dark!important;
  background-color:#0a0f13!important;
  color:#eef3f0!important;
}
.approvedReplaysMockup .approvedReplaysControlBar select option,
.approvedReplaysMockup .approvedReplaysControlBar select optgroup{
  background:#0b1116!important;
  color:#eef3f0!important;
}
.approvedReplaysMockup .approvedReplaysControlBar select option:checked{
  background:#21311e!important;
  color:#ffffff!important;
}

/* 2. Card shell is shorter/denser; result block below image no longer exists. */
.approvedReplaysMockup .replayCard.approvedMockupCard{
  min-height:0!important;
  border-radius:7px!important;
}
.approvedReplaysMockup .replayCard .art{
  height:132px!important;
  min-height:132px!important;
}
.approvedReplaysMockup .cardBody{
  padding:0!important;
  background:#0d1216!important;
}

/* 3. Image header: thinner game-like title bar and result/nation overlay on the map art. */
.approvedReplaysMockup .cardImageOverlay{
  top:7px!important;
  left:7px!important;
  max-width:calc(100% - 58px)!important;
  padding:5px 8px 5px 10px!important;
  border-radius:3px!important;
  background:linear-gradient(180deg,rgba(27,32,36,.92),rgba(10,14,17,.91))!important;
  border:1px solid rgba(255,255,255,.15)!important;
  box-shadow:0 5px 12px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.065)!important;
}
.approvedReplaysMockup .cardImageOverlay::before{
  width:2px!important;
  background:linear-gradient(180deg,#a9ee75,#548e42)!important;
  opacity:.9!important;
}
.approvedReplaysMockup .cardImageOverlay strong{
  display:block!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:10px!important;
  line-height:1.15!important;
}
.approvedReplaysMockup .cardImageOverlay strong span{font-size:8px!important;color:#93a09a!important}
.approvedReplaysMockup .cardRegionTag{
  top:7px!important;
  right:7px!important;
  min-width:38px!important;
  height:23px!important;
  padding:0 5px!important;
  border-radius:3px!important;
}
.approvedReplaysMockup .cardRegionTag b{font-size:7px!important}
.approvedReplaysMockup .cardRegionIcon{width:10px!important;height:10px!important}

.approvedReplaysMockup .cardBattleStateOverlay{
  position:absolute!important;
  z-index:7!important;
  left:8px!important;
  bottom:8px!important;
  min-width:82px!important;
  padding:5px 8px 5px!important;
  border-radius:4px!important;
  background:linear-gradient(180deg,rgba(12,17,20,.91),rgba(6,9,11,.90))!important;
  border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:0 6px 14px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.05)!important;
  pointer-events:none!important;
}
.approvedReplaysMockup .cardBattleStateOverlay::before{
  content:""!important;
  position:absolute!important;
  left:0!important;top:0!important;bottom:0!important;
  width:2px!important;
  border-radius:4px 0 0 4px!important;
  background:#8ea09a!important;
}
.approvedReplaysMockup .cardBattleStateOverlay strong{
  display:block!important;
  margin:0!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;
  text-shadow:0 1px 5px rgba(0,0,0,.55)!important;
}
.approvedReplaysMockup .cardBattleStateOverlay small{
  display:block!important;
  margin-top:3px!important;
  color:#c2cbc7!important;
  font-size:7px!important;
  line-height:1!important;
  font-weight:700!important;
}
.approvedReplaysMockup .cardBattleState-win strong{color:#77ef69!important}
.approvedReplaysMockup .cardBattleState-win::before{background:#74dd62!important;box-shadow:0 0 8px rgba(116,221,98,.30)!important}
.approvedReplaysMockup .cardBattleState-loss strong{color:#ff746d!important}
.approvedReplaysMockup .cardBattleState-loss::before{background:#ee625c!important;box-shadow:0 0 8px rgba(238,98,92,.28)!important}
.approvedReplaysMockup .cardBattleState-draw strong{color:#e8c765!important}
.approvedReplaysMockup .cardBattleState-draw::before{background:#d9b64d!important;box-shadow:0 0 8px rgba(217,182,77,.24)!important}

/* Keep the image alive. No global darkening overlay. */
.approvedReplaysMockup .replayCard .art,
.approvedReplaysMockup .replayCard:hover .art{
  filter:none!important;
  opacity:1!important;
}
.approvedReplaysMockup .replayCard .art::after{display:none!important;content:none!important}
.approvedReplaysMockup .replayCard .art::before{
  left:50%!important;
  bottom:3px!important;
  width:52%!important;
  height:12px!important;
  opacity:.55!important;
  filter:blur(6px)!important;
}

/* 4. Tank visual stays bright but is sized for the denser cards. */
.approvedReplaysMockup .tankSprite{
  width:78%!important;
  height:84%!important;
  max-width:78%!important;
  max-height:84%!important;
  bottom:-1%!important;
  object-position:center bottom!important;
  filter:brightness(1.32) contrast(1.14) saturate(1.06) drop-shadow(0 10px 12px rgba(0,0,0,.58))!important;
}
.approvedReplaysMockup .replayCard:hover .tankSprite{
  transform:translateX(-50%) scale(1.01)!important;
  filter:brightness(1.36) contrast(1.15) saturate(1.07) drop-shadow(0 12px 14px rgba(0,0,0,.62))!important;
}

/* 5. New compact HUD stat strip: illuminated icons sit close to values. */
.approvedReplaysMockup .statsRow.cardHudStats{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  min-height:58px!important;
  padding:0!important;
  background:linear-gradient(180deg,#10161b 0%,#0a0f13 100%)!important;
  border-top:0!important;
  border-bottom:1px solid rgba(255,255,255,.085)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),inset 0 -1px 0 rgba(0,0,0,.66)!important;
}
.approvedReplaysMockup .statsRow.cardHudStats .cardHudStat{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  min-width:0!important;
  min-height:58px!important;
  padding:7px 7px!important;
  border:0!important;
}
.approvedReplaysMockup .statsRow.cardHudStats .cardHudStat+ .cardHudStat::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:10px!important;
  bottom:10px!important;
  width:1px!important;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.13),transparent)!important;
}
.approvedReplaysMockup .cardHudIcon{
  flex:0 0 26px!important;
  width:26px!important;
  height:26px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  border:1px solid rgba(255,255,255,.13)!important;
  background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.09),rgba(255,255,255,.015) 48%,rgba(0,0,0,.20) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 9px rgba(0,0,0,.35)!important;
}
.approvedReplaysMockup .cardHudIcon .cardKpiIcon{
  width:14px!important;
  height:14px!important;
  opacity:1!important;
}
.approvedReplaysMockup .cardHudIconDamage{
  color:#a9ef6e!important;
  border-color:rgba(169,239,110,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 11px rgba(139,225,92,.10),0 4px 9px rgba(0,0,0,.35)!important;
}
.approvedReplaysMockup .cardHudIconKills{
  color:#ff716a!important;
  border-color:rgba(255,113,106,.23)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 11px rgba(255,91,84,.09),0 4px 9px rgba(0,0,0,.35)!important;
}
.approvedReplaysMockup .cardHudIconXp{
  color:#f0c84f!important;
  border-color:rgba(240,200,79,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 11px rgba(240,200,79,.10),0 4px 9px rgba(0,0,0,.35)!important;
}
.approvedReplaysMockup .cardHudValue{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  gap:2px!important;
}
.approvedReplaysMockup .statsRow.cardHudStats .cardHudValue strong{
  display:block!important;
  font-size:15px!important;
  line-height:1!important;
  color:#f5f8f6!important;
  font-weight:900!important;
  letter-spacing:-.02em!important;
  white-space:nowrap!important;
}
.approvedReplaysMockup .statsRow.cardHudStats .damageStat .cardHudValue strong{font-size:16px!important;color:#fff!important}
.approvedReplaysMockup .statsRow.cardHudStats .cardHudValue small{
  display:block!important;
  margin:0!important;
  color:#8f9b95!important;
  font-size:6px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}

/* 6. Rewards/footer compressed to fit the database-card rhythm. */
.approvedReplaysMockup .cardAwards{
  min-height:36px!important;
  padding:5px 8px!important;
  gap:3px!important;
}
.approvedReplaysMockup .cardAwards .cardAwardIcon{width:22px!important;height:23px!important}
.approvedReplaysMockup .cardAwards .cardAwardIcon img{width:22px!important;height:22px!important}
.approvedReplaysMockup .cardFoot{
  min-height:31px!important;
  padding:0 8px!important;
  font-size:7px!important;
}
.approvedReplaysMockup .cardFoot span{
  max-width:58%!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.approvedReplaysMockup .cardFoot b{font-size:7px!important;white-space:nowrap!important}

/* 7. Wide database view: four cards per row. */
@media(min-width:1440px){
  .approvedReplaysMockup .discoveryCardGrid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .approvedReplaysMockup .replayCard .art{
    height:118px!important;
    min-height:118px!important;
  }
  .approvedReplaysMockup .tankSprite{
    width:80%!important;
    height:86%!important;
    max-width:80%!important;
    max-height:86%!important;
  }
  .approvedReplaysMockup .cardImageOverlay{max-width:calc(100% - 50px)!important;padding:4px 7px 4px 9px!important}
  .approvedReplaysMockup .cardImageOverlay strong{font-size:9px!important}
  .approvedReplaysMockup .cardBattleStateOverlay{left:7px!important;bottom:7px!important;min-width:72px!important;padding:4px 7px!important}
  .approvedReplaysMockup .cardBattleStateOverlay strong{font-size:12px!important}
  .approvedReplaysMockup .cardBattleStateOverlay small{font-size:6px!important}
  .approvedReplaysMockup .statsRow.cardHudStats,
  .approvedReplaysMockup .statsRow.cardHudStats .cardHudStat{min-height:54px!important}
  .approvedReplaysMockup .cardHudIcon{width:23px!important;height:23px!important;flex-basis:23px!important}
  .approvedReplaysMockup .cardHudIcon .cardKpiIcon{width:12px!important;height:12px!important}
  .approvedReplaysMockup .statsRow.cardHudStats .cardHudValue strong{font-size:14px!important}
  .approvedReplaysMockup .statsRow.cardHudStats .damageStat .cardHudValue strong{font-size:15px!important}
  .approvedReplaysMockup .statsRow.cardHudStats .cardHudValue small{font-size:5.5px!important}
}

/* Keep 3 columns at medium desktop, 2/1 at the already approved responsive steps. */
@media(min-width:1051px) and (max-width:1439px){
  .approvedReplaysMockup .discoveryCardGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* v0.3.5.89 hot sanity override: title chip must stay overlayed on the art. */
.approvedReplaysMockup .cardImageOverlay{position:absolute!important}


/* ================================================================
   v0.3.5.90 — REPLAYS PREMIUM CARD ICONOGRAPHY + HEADER POLISH
   Scope: /replays only. Preserve v0.3.5.89 geometry and density.
   ================================================================ */

/* Brand victory language: FermaniHUB gold replaces the old green win cue. */
.approvedReplaysMockup .replayCard.cardState-win::before{
  background:linear-gradient(180deg,#f4cf72,#e8b849 48%,#8d6323)!important;
  box-shadow:0 0 10px rgba(232,184,73,.28)!important;
}
.approvedReplaysMockup .cardBattleState-win strong{
  color:var(--approved-gold)!important;
  text-shadow:0 0 10px rgba(232,184,73,.22),0 1px 4px rgba(0,0,0,.7)!important;
}
.approvedReplaysMockup .cardBattleState-win::before{
  background:linear-gradient(180deg,#f1ca67,#e8b849,#9b6c24)!important;
  box-shadow:0 0 8px rgba(232,184,73,.24)!important;
}

/* Tank + map: larger, cleaner condensed HUD typography. */
.approvedReplaysMockup .cardImageOverlay{
  padding:6px 10px 6px 12px!important;
  border-radius:5px!important;
  background:linear-gradient(180deg,rgba(7,10,12,.66),rgba(4,7,9,.54))!important;
  border:1px solid rgba(235,240,238,.20)!important;
  box-shadow:0 6px 16px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.07)!important;
  -webkit-backdrop-filter:blur(5px) saturate(1.05)!important;
  backdrop-filter:blur(5px) saturate(1.05)!important;
}
.approvedReplaysMockup .cardImageOverlay::before{
  width:2px!important;
  background:linear-gradient(180deg,#f0cb6b,#e8b849 58%,#8f6527)!important;
  opacity:.90!important;
}
.approvedReplaysMockup .cardImageOverlay strong{
  display:flex!important;
  align-items:baseline!important;
  gap:6px!important;
  min-width:0!important;
  font-family:var(--approved-font)!important;
  font-weight:600!important;
  letter-spacing:.018em!important;
  text-transform:none!important;
  text-shadow:0 1px 5px rgba(0,0,0,.72)!important;
}
.approvedReplaysMockup .cardHeaderTank{
  flex:0 1 auto!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#f7f8f7!important;
  font-size:12.5px!important;
  font-weight:700!important;
}
.approvedReplaysMockup .cardHeaderMeta{
  flex:0 1 auto!important;
  min-width:0!important;
  display:inline-flex!important;
  align-items:baseline!important;
  gap:5px!important;
}
.approvedReplaysMockup .cardHeaderBullet{
  flex:0 0 auto!important;
  color:var(--approved-gold)!important;
  font-size:9px!important;
  opacity:.95!important;
}
.approvedReplaysMockup .cardHeaderMap{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#d2dad6!important;
  font-size:11px!important;
  font-weight:560!important;
}

/* Result plate: semi-transparent black HUD glass, not an opaque sticker. */
.approvedReplaysMockup .cardBattleStateOverlay{
  background:linear-gradient(180deg,rgba(5,8,10,.66),rgba(2,5,7,.52))!important;
  border-color:rgba(236,241,239,.18)!important;
  box-shadow:0 6px 16px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.065)!important;
  -webkit-backdrop-filter:blur(5px) saturate(1.04)!important;
  backdrop-filter:blur(5px) saturate(1.04)!important;
}
.approvedReplaysMockup .cardBattleStateOverlay strong{
  font-family:var(--approved-font)!important;
  font-weight:650!important;
  letter-spacing:.018em!important;
}
.approvedReplaysMockup .cardBattleStateOverlay small{
  color:#d5dcd9!important;
  font-family:var(--approved-font)!important;
  font-weight:520!important;
  letter-spacing:.025em!important;
}

/* Premium KPI artwork: new custom SVGs, no generic mask glyph circles. */
.approvedReplaysMockup .statsRow.cardHudStats{
  min-height:57px!important;
  background:linear-gradient(180deg,#11171c 0%,#0a0f13 100%)!important;
}
.approvedReplaysMockup .statsRow.cardHudStats .cardHudStat{
  gap:5px!important;
  min-height:57px!important;
  padding:6px!important;
}
.approvedReplaysMockup .cardHudIcon{
  flex:0 0 31px!important;
  width:31px!important;
  height:31px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
.approvedReplaysMockup .cardPremiumKpiIcon{
  display:block!important;
  width:29px!important;
  height:29px!important;
  object-fit:contain!important;
  overflow:visible!important;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.50))!important;
}
.approvedReplaysMockup .cardHudIconDamage,
.approvedReplaysMockup .cardHudIconKills,
.approvedReplaysMockup .cardHudIconXp{
  color:inherit!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
.approvedReplaysMockup .cardHudValue{gap:2px!important}
.approvedReplaysMockup .statsRow.cardHudStats .cardHudValue strong{
  font-family:var(--approved-font)!important;
  font-size:15px!important;
  font-weight:700!important;
  letter-spacing:.015em!important;
  color:#f5f7f6!important;
}
.approvedReplaysMockup .statsRow.cardHudStats .damageStat .cardHudValue strong{font-size:16px!important}
.approvedReplaysMockup .statsRow.cardHudStats .cardHudValue small{
  color:#9aa59f!important;
  font-family:var(--approved-font)!important;
  font-size:6.2px!important;
  font-weight:560!important;
  letter-spacing:.07em!important;
}

/* Guaranteed dark dropdowns: custom menu replaces the native OS popup. */
.approvedReplaysMockup .rhCustomSelect{
  position:relative!important;
  min-width:0!important;
  height:100%!important;
  z-index:20!important;
}
.approvedReplaysMockup .rhNativeSelect{display:none!important}
.approvedReplaysMockup .rhCustomSelectButton{
  width:100%!important;
  height:100%!important;
  min-height:44px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:0 13px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:4px!important;
  background:linear-gradient(180deg,#10161b,#090e12)!important;
  color:#edf2ef!important;
  font-family:var(--approved-font)!important;
  font-size:10px!important;
  font-weight:560!important;
  text-align:left!important;
  cursor:pointer!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.approvedReplaysMockup .rhCustomSelectButton:hover,
.approvedReplaysMockup .rhCustomSelect.open .rhCustomSelectButton{
  border-color:rgba(232,184,73,.52)!important;
  background:linear-gradient(180deg,#151b20,#0b1014)!important;
  box-shadow:0 0 0 1px rgba(232,184,73,.06),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.approvedReplaysMockup .rhCustomSelectChevron{
  width:7px!important;height:7px!important;
  border-right:1.5px solid #bdc7c2!important;
  border-bottom:1.5px solid #bdc7c2!important;
  transform:rotate(45deg) translateY(-2px)!important;
  transition:transform .14s ease!important;
}
.approvedReplaysMockup .rhCustomSelect.open .rhCustomSelectChevron{transform:rotate(225deg) translate(-1px,-1px)!important}
.approvedReplaysMockup .rhCustomSelectMenu{
  display:none!important;
  position:absolute!important;
  z-index:300!important;
  top:calc(100% + 5px)!important;
  left:0!important;
  right:0!important;
  max-height:286px!important;
  overflow:auto!important;
  padding:5px!important;
  border:1px solid rgba(255,255,255,.17)!important;
  border-radius:5px!important;
  background:#0b1014!important;
  box-shadow:0 18px 42px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.045)!important;
  scrollbar-color:#49544f #0b1014!important;
  scrollbar-width:thin!important;
}
.approvedReplaysMockup .rhCustomSelect.open .rhCustomSelectMenu{display:block!important}
.approvedReplaysMockup .rhCustomSelectOption{
  width:100%!important;
  min-height:31px!important;
  display:flex!important;
  align-items:center!important;
  padding:0 9px!important;
  border:0!important;
  border-radius:3px!important;
  background:transparent!important;
  color:#c8d0cc!important;
  font-family:var(--approved-font)!important;
  font-size:10px!important;
  font-weight:520!important;
  text-align:left!important;
  cursor:pointer!important;
}
.approvedReplaysMockup .rhCustomSelectOption:hover{background:#171e22!important;color:#fff!important}
.approvedReplaysMockup .rhCustomSelectOption.selected{
  background:linear-gradient(90deg,rgba(232,184,73,.20),rgba(232,184,73,.055))!important;
  color:#f2cc73!important;
  box-shadow:inset 2px 0 0 var(--approved-gold)!important;
}

@media(min-width:1440px){
  .approvedReplaysMockup .cardImageOverlay{padding:5px 8px 5px 10px!important}
  .approvedReplaysMockup .cardHeaderTank{font-size:11.5px!important}
  .approvedReplaysMockup .cardHeaderMap{font-size:10px!important}
  .approvedReplaysMockup .cardBattleStateOverlay{padding:4px 7px!important}
  .approvedReplaysMockup .cardBattleStateOverlay strong{font-size:12px!important}
  .approvedReplaysMockup .statsRow.cardHudStats,
  .approvedReplaysMockup .statsRow.cardHudStats .cardHudStat{min-height:54px!important}
  .approvedReplaysMockup .cardHudIcon{width:28px!important;height:28px!important;flex-basis:28px!important}
  .approvedReplaysMockup .cardPremiumKpiIcon{width:27px!important;height:27px!important}
  .approvedReplaysMockup .statsRow.cardHudStats .cardHudValue strong{font-size:14.5px!important}
  .approvedReplaysMockup .statsRow.cardHudStats .damageStat .cardHudValue strong{font-size:15.5px!important}
  .approvedReplaysMockup .statsRow.cardHudStats .cardHudValue small{font-size:5.7px!important}
}

/* ================================================================
   v0.3.5.91 — REPLAYS DATE SORT + NEW TAB + PLAYER STATS FIX
   Functional-only pass. Preserve v0.3.5.90 replay-card visuals.
   ================================================================ */

/* Replay cards are real links now so browser context-menu / Ctrl-click / middle-click work natively. */
.approvedReplaysMockup a.replayCard.approvedMockupCard,
.approvedReplaysMockup a.replayCard.approvedMockupCard:visited{
  display:block!important;
  color:inherit!important;
  text-decoration:none!important;
}
.approvedReplaysMockup a.replayCard.approvedMockupCard:focus-visible{
  outline:1px solid rgba(232,184,73,.62)!important;
  outline-offset:2px!important;
}

/* Upload date sits next to the player name without changing card height. */
.approvedReplaysMockup .cardFoot .cardFootMeta{
  max-width:64%!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
.approvedReplaysMockup .cardFoot .cardPlayerName{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:inherit!important;
}
.approvedReplaysMockup .cardFoot .cardUploadDate{
  flex:0 0 auto!important;
  color:#7f8a85!important;
  font-size:6.5px!important;
  font-style:normal!important;
  letter-spacing:.015em!important;
}
@media(min-width:1440px){
  .approvedReplaysMockup .cardFoot .cardUploadDate{font-size:6px!important}
}
.approvedReplaysMockup .cardFoot .cardFootMeta>.cardPlayerName{
  flex:1 1 auto!important;
  max-width:none!important;
}
.approvedReplaysMockup .cardFoot .cardFootMeta>.cardUploadDate{
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

/* ================================================================
   v0.3.5.92 — REPLAYS FILTER UX + MICRO POLISH
   Scope: /replays only. Preserve v0.3.5.91 card system.
   ================================================================ */

/* Micro-polish: make tank + map easier to scan without changing card geometry. */
.approvedReplaysMockup .cardHeaderTank{
  font-size:13.6px!important;
  line-height:1.08!important;
  letter-spacing:.012em!important;
}
.approvedReplaysMockup .cardHeaderMap{
  font-size:12px!important;
  line-height:1.08!important;
  letter-spacing:.012em!important;
}
.approvedReplaysMockup .cardImageOverlay{
  max-width:calc(100% - 54px)!important;
}

/* Replays hero: shift the artwork/tank slightly to the right, keep text/layout intact. */
.approvedReplaysMockup .replaysHeroBackdrop{
  transform:translateX(3.1%) scale(1.07)!important;
  transform-origin:center center!important;
}

/* Portal layer: dropdowns are detached from the toolbar stacking context and can never hide under cards. */
.rhReplaySelectPortal{
  position:fixed!important;
  inset:0!important;
  z-index:100000!important;
  pointer-events:none!important;
}
#rhReplaySelectPortal .rhCustomSelectMenu{
  display:none;
  position:fixed!important;
  z-index:100001!important;
  flex-direction:column!important;
  min-width:180px!important;
  overflow:hidden!important;
  padding:5px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:6px!important;
  background:linear-gradient(180deg,#0f1519 0%,#080d11 100%)!important;
  color:#edf2ef!important;
  box-shadow:0 22px 54px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.055)!important;
  pointer-events:auto!important;
  color-scheme:dark!important;
}
#rhReplaySelectPortal .rhCustomSelectMenu.rhPortalOpen{display:flex!important}
#rhReplaySelectPortal .rhCustomSelectOptions{
  min-height:0!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
  scrollbar-color:#4e5954 #0a0f13!important;
}
#rhReplaySelectPortal .rhCustomSelectOption{
  width:100%!important;
  min-height:34px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:2px!important;
  padding:5px 9px!important;
  border:0!important;
  border-radius:4px!important;
  background:transparent!important;
  color:#cbd3cf!important;
  font-family:var(--approved-font)!important;
  font-size:10px!important;
  font-weight:560!important;
  text-align:left!important;
  cursor:pointer!important;
}
#rhReplaySelectPortal .rhCustomSelectOption:hover{
  background:linear-gradient(90deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important;
  color:#fff!important;
}
#rhReplaySelectPortal .rhCustomSelectOption.selected{
  background:linear-gradient(90deg,rgba(232,184,73,.22),rgba(232,184,73,.055))!important;
  color:#f4ce77!important;
  box-shadow:inset 2px 0 0 var(--approved-gold)!important;
}
#rhReplaySelectPortal .rhCustomSelectOptionMain{
  display:block!important;
  width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#rhReplaySelectPortal .rhCustomSelectOptionMeta{
  display:block!important;
  width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#7f8b85!important;
  font-size:7px!important;
  font-weight:520!important;
  letter-spacing:.025em!important;
}
#rhReplaySelectPortal .rhCustomSelectOption.selected .rhCustomSelectOptionMeta{color:#bda86e!important}
#rhReplaySelectPortal .rhCustomSelectSearch{
  flex:0 0 auto!important;
  display:block!important;
  position:relative!important;
  margin:0 0 5px!important;
  padding:5px!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
}
#rhReplaySelectPortal .rhCustomSelectSearch::before{
  content:"⌕"!important;
  position:absolute!important;
  left:14px!important;
  top:50%!important;
  transform:translateY(-52%)!important;
  color:#8c9892!important;
  font-size:14px!important;
  pointer-events:none!important;
}
#rhReplaySelectPortal .rhCustomSelectSearch input{
  width:100%!important;
  height:34px!important;
  padding:0 10px 0 31px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:4px!important;
  outline:0!important;
  background:#070c10!important;
  color:#f0f4f2!important;
  font-family:var(--approved-font)!important;
  font-size:10px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
#rhReplaySelectPortal .rhCustomSelectSearch input:focus{
  border-color:rgba(232,184,73,.52)!important;
  box-shadow:0 0 0 1px rgba(232,184,73,.07),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
#rhReplaySelectPortal .rhCustomSelectSearch input::placeholder{color:#6f7b75!important}
#rhReplaySelectPortal .rhCustomSelectHint{
  flex:0 0 auto!important;
  margin-top:5px!important;
  padding:6px 8px 4px!important;
  border-top:1px solid rgba(255,255,255,.065)!important;
  color:#707c76!important;
  font-family:var(--approved-font)!important;
  font-size:7px!important;
  line-height:1.35!important;
}
#rhReplaySelectPortal .rhCustomSelectEmpty{
  padding:18px 10px!important;
  color:#7d8983!important;
  font-family:var(--approved-font)!important;
  font-size:9px!important;
  text-align:center!important;
}

/* Searchable controls get a subtle cue but keep the approved filter rail geometry. */
.approvedReplaysMockup .rhCustomSelect.searchable .rhCustomSelectButton::before{
  content:""!important;
  width:3px!important;
  height:3px!important;
  flex:0 0 auto!important;
  border-radius:50%!important;
  background:var(--approved-gold)!important;
  box-shadow:0 0 6px rgba(232,184,73,.25)!important;
  opacity:.82!important;
}
.approvedReplaysMockup .rhCustomSelect.searchable .rhCustomSelectLabel{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

@media(min-width:1440px){
  .approvedReplaysMockup .cardHeaderTank{font-size:12.6px!important}
  .approvedReplaysMockup .cardHeaderMap{font-size:11.1px!important}
}


/* ================================================================
   v0.3.5.93 — CARD HEADER READABILITY + HERO TANK POSITION POLISH
   Scope: /replays only. Two micro-polish changes, no layout/function changes.
   ================================================================ */

/* Card title/map: larger, bright white, readable in the approved 4-col grid. */
.approvedReplaysMockup .cardImageOverlay strong{
  text-shadow:0 1px 5px rgba(0,0,0,.86),0 0 8px rgba(0,0,0,.30)!important;
}
.approvedReplaysMockup .cardHeaderTank{
  color:#ffffff!important;
  font-size:14.8px!important;
  line-height:1.05!important;
  font-weight:720!important;
  letter-spacing:.008em!important;
}
.approvedReplaysMockup .cardHeaderMap{
  color:#ffffff!important;
  font-size:13.2px!important;
  line-height:1.05!important;
  font-weight:620!important;
  letter-spacing:.008em!important;
  opacity:.96!important;
}
.approvedReplaysMockup .cardHeaderBullet{
  color:var(--approved-gold)!important;
  opacity:1!important;
}

/* Hero art only: further right and slightly higher than v0.3.5.92. */
.approvedReplaysMockup .replaysHeroBackdrop{
  inset:-12px!important;
  background-position:48% 45%!important;
  transform:scale(1.11)!important;
  transform-origin:center center!important;
}

/* Important: do not shrink title/map typography back down in 4-column mode. */
@media(min-width:1440px){
  .approvedReplaysMockup .cardHeaderTank{font-size:14.2px!important;font-weight:720!important;color:#fff!important}
  .approvedReplaysMockup .cardHeaderMap{font-size:12.7px!important;font-weight:620!important;color:#fff!important;opacity:.96!important}
}


/* ================================================================
   v0.3.5.94 — CARD TITLE VISIBILITY HARD FIX
   Scope: /replays only. Hard-fix card title readability in the 4-col grid.
   ================================================================ */

/* Stack tank + map inside the existing dark HUD plate so both labels remain readable
   even in the wide 4-column layout. */
.approvedReplaysMockup .cardImageOverlay{
  min-width:0!important;
  max-width:76%!important;
  padding:7px 11px 7px 12px!important;
}
.approvedReplaysMockup .cardImageOverlay strong{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:2px!important;
  line-height:1.02!important;
  min-width:0!important;
  text-shadow:0 1px 6px rgba(0,0,0,.92),0 0 10px rgba(0,0,0,.34)!important;
}
.approvedReplaysMockup .cardImageOverlay strong span,
.approvedReplaysMockup .cardImageOverlay strong .cardHeaderTank,
.approvedReplaysMockup .cardImageOverlay strong .cardHeaderMap{
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.approvedReplaysMockup .cardHeaderMeta,
.approvedReplaysMockup .cardHeaderBullet{display:none!important}
.approvedReplaysMockup .cardHeaderTank,
.approvedReplaysMockup .cardImageOverlay strong span.cardHeaderTank{
  color:#ffffff!important;
  font-size:15.2px!important;
  line-height:1.02!important;
  font-weight:760!important;
  letter-spacing:.006em!important;
}
.approvedReplaysMockup .cardHeaderMap,
.approvedReplaysMockup .cardImageOverlay strong span.cardHeaderMap{
  margin-top:1px!important;
  color:rgba(255,255,255,.96)!important;
  font-size:12.8px!important;
  line-height:1.02!important;
  font-weight:620!important;
  letter-spacing:.006em!important;
  opacity:1!important;
}
@media(min-width:1440px){
  .approvedReplaysMockup .cardImageOverlay{max-width:78%!important;padding:7px 10px 7px 12px!important}
  .approvedReplaysMockup .cardHeaderTank,
  .approvedReplaysMockup .cardImageOverlay strong span.cardHeaderTank{font-size:14.7px!important}
  .approvedReplaysMockup .cardHeaderMap,
  .approvedReplaysMockup .cardImageOverlay strong span.cardHeaderMap{font-size:12.3px!important}
}


/* ================================================================
   v0.3.5.96 — REPLAYS HERO CUSTOM IMAGE + LIGHT SHADE
   Scope: /replays hero only. Preserve approved cards/filter/layout.
   ================================================================ */

/* Use the user-supplied tank scene directly in the replays header.
   No backdrop translation/overscan: composition is controlled only by background-position. */
.approvedReplaysMockup .replaysHeroBackdrop{
  inset:0!important;
  background-image:url('/assets/replays_hero_banner.jpg')!important;
  background-size:cover!important;
  background-position:50% 53%!important;
  transform:none!important;
  transform-origin:center center!important;
  filter:none!important;
  opacity:1!important;
}

/* Keep the tank/scene bright. Darkening is limited mainly to the text-safe left edge. */
.approvedReplaysMockup .replaysHeroShade{
  background:linear-gradient(90deg,
    rgba(2,3,4,.50) 0%,
    rgba(2,3,4,.31) 25%,
    rgba(2,3,4,.08) 53%,
    rgba(2,3,4,.015) 72%,
    rgba(2,3,4,0) 100%)!important;
}

/* Readability comes from a small text shadow instead of darkening the whole image. */
.approvedReplaysMockup .replaysHeroBanner .eyebrow,
.approvedReplaysMockup .replaysHeroBanner .pageTitle,
.approvedReplaysMockup .replaysHeroBanner .replaysPageSub{
  text-shadow:0 2px 10px rgba(0,0,0,.72),0 1px 2px rgba(0,0,0,.88)!important;
}

@media(max-width:760px){
  .approvedReplaysMockup .replaysHeroBackdrop{
    background-position:58% 53%!important;
  }
  .approvedReplaysMockup .replaysHeroShade{
    background:linear-gradient(90deg,
      rgba(2,3,4,.58) 0%,
      rgba(2,3,4,.38) 40%,
      rgba(2,3,4,.12) 72%,
      rgba(2,3,4,.02) 100%)!important;
  }
}

/* ================================================================
   v0.3.5.97 — REPLAYS HERO IMAGE SCALE-DOWN + RIGHT SAFE FRAMING
   Scope: /replays hero only. Keep approved text, filters, and 4-col grid unchanged.
   ================================================================ */

/* Shrink the custom hero image slightly so the tank is less cropped,
   keep it anchored on the right, and avoid darkening the whole scene. */
.approvedReplaysMockup .replaysHeroBackdrop{
  inset:0!important;
  background-image:url('/assets/replays_hero_banner.jpg')!important;
  background-repeat:no-repeat!important;
  background-size:84% auto!important;
  background-position:100% 42%!important;
  transform:none!important;
  transform-origin:center center!important;
  filter:none!important;
  opacity:1!important;
}

/* Keep only a light readability shade under the left title area. */
.approvedReplaysMockup .replaysHeroShade{
  background:linear-gradient(90deg,
    rgba(2,3,4,.48) 0%,
    rgba(2,3,4,.29) 23%,
    rgba(2,3,4,.09) 47%,
    rgba(2,3,4,.02) 69%,
    rgba(2,3,4,0) 100%)!important;
}

/* Preserve readability via text shadow, not by re-darkening the tank side. */
.approvedReplaysMockup .replaysHeroBanner .eyebrow,
.approvedReplaysMockup .replaysHeroBanner .pageTitle,
.approvedReplaysMockup .replaysHeroBanner .replaysPageSub{
  text-shadow:0 2px 10px rgba(0,0,0,.72),0 1px 2px rgba(0,0,0,.88)!important;
}

@media(max-width:1200px){
  .approvedReplaysMockup .replaysHeroBackdrop{
    background-size:92% auto!important;
    background-position:100% 44%!important;
  }
}

@media(max-width:760px){
  .approvedReplaysMockup .replaysHeroBackdrop{
    background-size:148% auto!important;
    background-position:72% 46%!important;
  }
  .approvedReplaysMockup .replaysHeroShade{
    background:linear-gradient(90deg,
      rgba(2,3,4,.58) 0%,
      rgba(2,3,4,.39) 39%,
      rgba(2,3,4,.14) 71%,
      rgba(2,3,4,.03) 100%)!important;
  }
}


/* ================================================================
   v0.3.5.98 — REPLAYS HERO FIELD BACKGROUND + PNG TANK LAYER
   Scope: /replays hero only. Text, filters, and approved replay grid are untouched.
   ================================================================ */

/* The field is now the independent full hero background. */
.approvedReplaysMockup .replaysHeroBackdrop{
  inset:0!important;
  background-image:url('/assets/replays_hero_field.png')!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center 42%!important;
  transform:none!important;
  filter:none!important;
  opacity:1!important;
  z-index:-3!important;
}
.approvedReplaysMockup .replaysHeroBackdrop::before,
.approvedReplaysMockup .replaysHeroBackdrop::after{
  display:none!important;
  content:none!important;
}

/* Tank is a separate transparent PNG layer, so it is no longer cropped by background-size:cover. */
.approvedReplaysMockup .replaysHeroTankLayer{
  position:absolute!important;
  z-index:-2!important;
  right:8px!important;
  top:0!important;
  width:auto!important;
  height:100%!important;
  max-width:none!important;
  object-fit:contain!important;
  object-position:right center!important;
  pointer-events:none!important;
  user-select:none!important;
  filter:drop-shadow(-8px 10px 10px rgba(0,0,0,.30)) drop-shadow(0 2px 2px rgba(0,0,0,.18))!important;
}

/* Light shade only on the left text-safe area; the tank side stays bright. */
.approvedReplaysMockup .replaysHeroShade{
  z-index:-1!important;
  background:linear-gradient(90deg,
    rgba(2,3,4,.54) 0%,
    rgba(2,3,4,.34) 22%,
    rgba(2,3,4,.12) 44%,
    rgba(2,3,4,.025) 62%,
    rgba(2,3,4,0) 78%)!important;
}

/* Keep text readable without re-darkening the whole banner. */
.approvedReplaysMockup .replaysHeroBanner .eyebrow,
.approvedReplaysMockup .replaysHeroBanner .pageTitle,
.approvedReplaysMockup .replaysHeroBanner .replaysPageSub{
  text-shadow:0 2px 10px rgba(0,0,0,.70),0 1px 2px rgba(0,0,0,.88)!important;
}

@media(max-width:1200px){
  .approvedReplaysMockup .replaysHeroBackdrop{background-position:center 44%!important}
  .approvedReplaysMockup .replaysHeroTankLayer{
    right:-6px!important;
    height:96%!important;
    top:4%!important;
  }
}

@media(max-width:760px){
  .approvedReplaysMockup .replaysHeroBackdrop{background-position:48% 44%!important}
  .approvedReplaysMockup .replaysHeroTankLayer{
    right:-18%!important;
    top:20%!important;
    height:76%!important;
    opacity:.92!important;
  }
  .approvedReplaysMockup .replaysHeroShade{
    background:linear-gradient(90deg,
      rgba(2,3,4,.66) 0%,
      rgba(2,3,4,.48) 42%,
      rgba(2,3,4,.18) 72%,
      rgba(2,3,4,.04) 100%)!important;
  }
}

/* ================================================================
   v0.3.5.99 — REPLAYS HERO GENERATED LIGHT WIDE ART
   Scope: /replays hero art only. Text, filters, cards and grid untouched.
   ================================================================ */

/* Use the approved generated light hero as one coherent wide banner.
   The source was adapted to a 6.4:1 canvas so the tank stays visible in the compact hero. */
.approvedReplaysMockup .replaysHeroBackdrop{
  inset:0!important;
  background-image:url('/assets/replays_hero_generated_light_wide.jpg')!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:right center!important;
  transform:none!important;
  filter:none!important;
  opacity:1!important;
  z-index:-3!important;
}
.approvedReplaysMockup .replaysHeroBackdrop::before,
.approvedReplaysMockup .replaysHeroBackdrop::after{
  display:none!important;
  content:none!important;
}

/* v0.3.5.98 separate tank layer is retired in this build. */
.approvedReplaysMockup .replaysHeroTankLayer{display:none!important}

/* Only a light left-side support for white hero copy; keep the scene bright. */
.approvedReplaysMockup .replaysHeroShade{
  z-index:-1!important;
  background:linear-gradient(90deg,
    rgba(2,3,4,.45) 0%,
    rgba(2,3,4,.25) 22%,
    rgba(2,3,4,.08) 42%,
    rgba(2,3,4,.015) 60%,
    rgba(2,3,4,0) 74%)!important;
}

.approvedReplaysMockup .replaysHeroBanner .eyebrow,
.approvedReplaysMockup .replaysHeroBanner .pageTitle,
.approvedReplaysMockup .replaysHeroBanner .replaysPageSub{
  text-shadow:0 2px 10px rgba(0,0,0,.68),0 1px 2px rgba(0,0,0,.86)!important;
}

@media(max-width:1200px){
  .approvedReplaysMockup .replaysHeroBackdrop{background-position:82% center!important}
}
@media(max-width:760px){
  .approvedReplaysMockup .replaysHeroBackdrop{background-position:76% center!important}
  .approvedReplaysMockup .replaysHeroShade{
    background:linear-gradient(90deg,
      rgba(2,3,4,.58) 0%,
      rgba(2,3,4,.36) 42%,
      rgba(2,3,4,.12) 72%,
      rgba(2,3,4,.02) 100%)!important;
  }
}


/* ================================================================
   v0.3.5.100 — REPLAYS HERO TANK +10% / SOFT LEFT GRADIENT
   Scope: /replays hero only. Everything else remains 1:1 with v0.3.5.99.
   ================================================================ */

/* Micro-polish: visually enlarge the approved hero art by ~10% while keeping
   its right edge locked, so the tank gains presence without changing layout. */
.approvedReplaysMockup .replaysHeroBackdrop{
  inset:0!important;
  background-image:url('/assets/replays_hero_generated_light_wide.jpg')!important;
  background-repeat:no-repeat!important;
  background-size:110% auto!important;
  background-position:right center!important;
  transform:none!important;
  filter:none!important;
  opacity:1!important;
  z-index:-3!important;
}

/* Softer, longer transition on the left: enough contrast for REPLAYS, no hard grey patch. */
.approvedReplaysMockup .replaysHeroShade{
  z-index:-1!important;
  background:linear-gradient(90deg,
    rgba(2,3,4,.42) 0%,
    rgba(2,3,4,.32) 13%,
    rgba(2,3,4,.20) 28%,
    rgba(2,3,4,.10) 43%,
    rgba(2,3,4,.04) 57%,
    rgba(2,3,4,.012) 69%,
    rgba(2,3,4,0) 80%)!important;
}

/* Keep the existing text treatment exactly in the same spirit as v0.3.5.99. */
.approvedReplaysMockup .replaysHeroBanner .eyebrow,
.approvedReplaysMockup .replaysHeroBanner .pageTitle,
.approvedReplaysMockup .replaysHeroBanner .replaysPageSub{
  text-shadow:0 2px 10px rgba(0,0,0,.68),0 1px 2px rgba(0,0,0,.86)!important;
}

@media(max-width:1200px){
  .approvedReplaysMockup .replaysHeroBackdrop{
    background-size:112% auto!important;
    background-position:right center!important;
  }
}

@media(max-width:760px){
  .approvedReplaysMockup .replaysHeroBackdrop{
    background-size:138% auto!important;
    background-position:78% center!important;
  }
  .approvedReplaysMockup .replaysHeroShade{
    background:linear-gradient(90deg,
      rgba(2,3,4,.56) 0%,
      rgba(2,3,4,.42) 30%,
      rgba(2,3,4,.22) 55%,
      rgba(2,3,4,.08) 76%,
      rgba(2,3,4,.02) 100%)!important;
  }
}


/* ========================================================================== */
/* v0.3.5.101 — HOME FULL WIDTH + HUD ICONOGRAPHY REWORK                     */
/* Scope lock: HOME only. /replays and all detail/catalog pages stay intact. */
/* ========================================================================== */
body.homePageActive{
  --home-canvas:1380px;
  background:radial-gradient(circle at 62% 0,rgba(44,70,55,.14),transparent 31%),#070b0d!important;
}
body.homePageActive #app{overflow-x:hidden}
body.homePageActive > footer{display:none!important}
body.homePageActive .assetNotice{width:min(var(--home-canvas),calc(100% - 32px))!important}

/* Wide hero aligned to the approved /replays canvas. */
body.homePageActive .homeHero{
  height:510px!important;
  min-height:510px!important;
  border-bottom:1px solid rgba(210,228,218,.09)!important;
}
body.homePageActive .homeHero .heroBackdrop{
  inset:-24px!important;
  background-image:linear-gradient(90deg,rgba(5,9,8,.98) 0%,rgba(5,9,8,.91) 27%,rgba(5,9,8,.47) 53%,rgba(5,9,8,.24) 72%,rgba(5,9,8,.61) 100%),url('/assets/hero_tank_scene.webp')!important;
  background-position:center 47%!important;
  filter:blur(4px) saturate(.78) brightness(.76)!important;
  transform:scale(1.07)!important;
  opacity:.88!important;
}
body.homePageActive .homeHero .heroTankVisual{
  left:29%!important;
  right:11%!important;
  top:4px!important;
  bottom:-14px!important;
  background-position:center bottom!important;
  filter:saturate(.91) contrast(1.06) brightness(.91) drop-shadow(0 24px 35px rgba(0,0,0,.30))!important;
  opacity:1!important;
}
body.homePageActive .heroInner{
  width:min(var(--home-canvas),calc(100% - 32px))!important;
  max-width:none!important;
  padding:0!important;
}
body.homePageActive .homeHero .heroCopy{
  width:570px!important;
  max-width:570px!important;
  padding:48px 0 0 18px!important;
}
body.homePageActive .homeHero .heroCopy .eyebrow{font-size:9px!important;letter-spacing:.17em!important}
body.homePageActive .homeHero h1{font-size:clamp(58px,4.5vw,76px)!important;max-width:570px!important;margin:14px 0 15px!important}
body.homePageActive .homeHero p{font-size:14px!important;line-height:1.58!important;max-width:520px!important;color:#c2cbc6!important}
body.homePageActive .homeHero .heroButtons{margin-top:22px!important;gap:11px!important}
body.homePageActive .homeHero .button{height:43px!important;padding:0 18px!important;gap:9px!important;font-size:10px!important}
body.homePageActive .buttonHudIcon{width:17px;height:17px}
body.homePageActive .buttonArrow{font-size:15px;color:#cbd5d0;margin-left:2px}

/* Metrics are compact real HUD cards, not placeholder square glyphs. */
body.homePageActive .heroMetrics{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  width:490px!important;
  gap:9px!important;
  margin-top:auto!important;
  margin-bottom:22px!important;
}
body.homePageActive .heroMetrics>div{
  min-width:0!important;
  min-height:57px!important;
  padding:10px 11px!important;
  display:grid!important;
  grid-template-columns:31px 1fr!important;
  gap:9px!important;
  align-items:center!important;
  border:1px solid rgba(216,233,224,.13)!important;
  border-radius:6px!important;
  background:linear-gradient(145deg,rgba(16,26,23,.64),rgba(7,13,13,.52))!important;
  backdrop-filter:blur(16px) saturate(1.15)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 14px 28px rgba(0,0,0,.12)!important;
}
body.homePageActive .heroMetrics>div:before{display:none!important}
body.homePageActive .metricIcon{
  width:31px!important;height:31px!important;display:grid!important;place-items:center!important;
  color:#91c82b!important;border:1px solid rgba(149,199,56,.22)!important;border-radius:5px!important;background:rgba(114,161,31,.055)!important;
}
body.homePageActive .metricIcon svg{width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.5!important}
body.homePageActive .metricText{display:block!important;min-width:0}
body.homePageActive .heroMetrics strong{font-size:18px!important;color:#eef4f1!important}
body.homePageActive .heroMetrics small{display:block!important;margin-top:3px!important;font-size:7px!important;color:#819089!important;text-transform:uppercase!important;letter-spacing:.09em!important}

/* Best battle card: wider, cleaner and aligned to the right canvas edge. */
body.homePageActive .homeHero .topBattle{
  right:18px!important;top:60px!important;width:322px!important;padding:18px!important;
  background:linear-gradient(145deg,rgba(14,23,21,.84),rgba(6,12,12,.78))!important;
  border:1px solid rgba(218,234,225,.16)!important;
  box-shadow:0 26px 70px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body.homePageActive .topBattle .label{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;font-size:9px!important;letter-spacing:.07em!important}
body.homePageActive .topBattleCrown{width:18px;height:18px;color:#e6b942;filter:drop-shadow(0 0 7px rgba(230,185,66,.22))}
body.homePageActive .topBattleMain{grid-template-columns:112px 1fr!important;gap:13px!important;margin-top:13px!important}
body.homePageActive .topTankThumb{height:98px!important;background:#101715!important;position:relative!important;overflow:hidden!important}
body.homePageActive .topTankThumb img{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);object-fit:contain;filter:drop-shadow(0 8px 8px rgba(0,0,0,.72))}
body.homePageActive .topBattleInfo h3{font-size:17px!important}
body.homePageActive .topBattleInfo small{font-size:10px!important}
body.homePageActive .homeHero .topBattle .bigDamage{font-size:31px!important}
body.homePageActive .homeHero .topBattle .mini{gap:12px!important;margin-top:13px!important;padding-top:12px!important}
body.homePageActive .homeHero .topBattle .mini strong{font-size:18px!important}
body.homePageActive .topMastery{min-height:39px!important;display:flex!important;align-items:center!important;gap:8px!important;padding:9px 0!important}
body.homePageActive .topMastery img{width:24px!important;height:24px!important;object-fit:contain!important}
body.homePageActive .topBattleButton{height:35px!important;padding:0 11px!important;border-radius:4px!important}

/* Main HOME dashboard uses the same width as the replays catalog. */
body.homePageActive .homeDashboard{
  width:min(var(--home-canvas),calc(100% - 32px))!important;
  max-width:none!important;
  padding:0!important;
  margin:16px auto 0!important;
  grid-template-columns:.95fr 1.45fr .90fr!important;
  gap:14px!important;
}
body.homePageActive .homePanel{
  min-height:286px!important;
  padding:15px!important;
  border-radius:8px!important;
  background:linear-gradient(145deg,rgba(15,24,22,.72),rgba(7,13,13,.60))!important;
  border:1px solid rgba(210,229,218,.13)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
body.homePageActive .panelTitle{height:33px!important;gap:9px!important;border-bottom:1px solid rgba(210,229,218,.07)!important;margin-bottom:2px!important}
body.homePageActive .panelTitle strong{font-size:10.5px!important;letter-spacing:.025em!important}
body.homePageActive .panelTitle a{font-size:7.5px!important}
body.homePageActive .homeHudIcon{display:inline-block;width:18px;height:18px;background:currentColor;mask:var(--home-icon) center/contain no-repeat;-webkit-mask:var(--home-icon) center/contain no-repeat;flex:0 0 auto}
body.homePageActive .homePanelTitleIcon{width:16px;height:16px;color:#a9e51b;filter:drop-shadow(0 0 8px rgba(169,229,27,.12))}

body.homePageActive .damageRow{min-height:42px!important;height:42px!important;grid-template-columns:20px 52px minmax(0,1fr) 72px 48px!important;gap:7px!important;padding:0 4px!important}
body.homePageActive .damageTankThumb{width:50px!important;height:30px!important;background:none!important;display:grid!important;place-items:center!important;filter:none!important}
body.homePageActive .damageTankThumb img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(0,0,0,.58))}
body.homePageActive .damageRow>strong{font-size:10.5px!important;white-space:normal!important;line-height:1.05!important}
body.homePageActive .damageRow>b{font-size:12px!important;color:#e7eeea!important}
body.homePageActive .damageOpen{font-size:7px!important}
body.homePageActive .panelButton{height:34px!important;margin-top:9px!important;border-radius:4px!important}

body.homePageActive .latestGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;padding-top:8px!important}
body.homePageActive .latestCard{min-height:225px!important;border-radius:6px!important;background:linear-gradient(145deg,#0d1412,#090e0d)!important}
body.homePageActive .latestArt{height:124px!important;filter:saturate(.86) contrast(1.04)!important}
body.homePageActive .latestArt img{position:absolute;z-index:1;inset:8px 4px 1px 18%;width:80%;height:92%;object-fit:contain;filter:drop-shadow(0 11px 8px rgba(0,0,0,.60))}
body.homePageActive .latestBody{padding:10px 11px!important}
body.homePageActive .latestBody>strong{font-size:11px!important}
body.homePageActive .latestBody>small{font-size:7.5px!important;min-height:22px!important}
body.homePageActive .latestStats b{font-size:11.5px!important}
body.homePageActive .latestStats span{font-size:5.5px!important}

body.homePageActive .popularRow{min-height:47px!important;grid-template-columns:20px 54px minmax(0,1fr) auto!important;grid-template-rows:22px 18px!important;column-gap:8px!important;padding:3px 2px!important}
body.homePageActive .popularTankIcon{width:52px!important;height:31px!important;background:none!important;filter:none!important;display:grid!important;place-items:center!important}
body.homePageActive .popularTankIcon img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(0,0,0,.58))}
body.homePageActive .popularRow strong{font-size:10.5px!important}
body.homePageActive .popularRow small{font-size:6.5px!important}
body.homePageActive .popularRow b{font-size:7.5px!important;white-space:nowrap!important}

/* Feature strip — full width, real SVG HUD icons, no emoji. */
body.homePageActive .homeFeatures{
  width:min(var(--home-canvas),calc(100% - 32px))!important;
  max-width:none!important;
  margin:14px auto 0!important;
  padding:0!important;
  border-radius:8px!important;
  overflow:hidden!important;
}
body.homePageActive .homeFeatures>div{
  min-height:116px!important;
  padding:21px 22px!important;
  display:grid!important;
  grid-template-columns:50px 1fr!important;
  gap:15px!important;
  align-items:center!important;
}
body.homePageActive .homeFeatures .featureIcon{margin:0!important;width:50px;height:50px;display:grid;place-items:center;border:1px solid rgba(169,229,27,.14);border-radius:8px;background:linear-gradient(145deg,rgba(169,229,27,.07),rgba(169,229,27,.018));color:#8fc525!important}
body.homePageActive .homeFeatureHudIcon{width:28px;height:28px!important}
body.homePageActive .featureCopy{min-width:0}
body.homePageActive .homeFeatures strong{font-size:11px!important;margin:0 0 6px!important}
body.homePageActive .homeFeatures p{font-size:8.5px!important;line-height:1.55!important}

/* Clean footer without fake partner claims. */
body.homePageActive .homeFooter{
  width:min(var(--home-canvas),calc(100% - 32px));margin:14px auto 0;padding:20px 4px 24px;
  min-height:80px;border-top:1px solid rgba(210,229,218,.10);display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:10px 28px;align-items:center;color:#76837d;
}
body.homePageActive .homeFooterBrand{display:flex;align-items:center;gap:9px;min-width:0}
body.homePageActive .homeFooterMark{width:28px;height:28px;display:grid;place-items:center;color:#8ec326}
body.homePageActive .homeFooterMarkIcon{width:22px;height:22px}
body.homePageActive .homeFooterBrand strong{font-size:16px;color:#e7eeea;letter-spacing:.025em}.homeFooterBrand strong span{color:#b8db4d}
body.homePageActive .homeFooterBrand small{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:#64716b}
body.homePageActive .homeFooterLinks{display:flex!important;gap:22px!important;justify-content:flex-end!important}
body.homePageActive .homeFooterLinks a{font-size:8px!important;color:#89958f!important;text-decoration:none!important}.homeFooterLinks a:hover{color:#a9e51b!important}
body.homePageActive .homeFooterMeta{grid-column:1/-1;display:flex;gap:8px;font-size:9px;color:#58645f;text-transform:uppercase;letter-spacing:.06em}

@media(max-width:1200px){
  body.homePageActive .homeDashboard{grid-template-columns:1fr 1.45fr!important}
  body.homePageActive .popularPanel{grid-column:1/-1!important}
  body.homePageActive .popularList{grid-template-columns:repeat(2,1fr)!important;gap:0 18px!important}
  body.homePageActive .homeHero .topBattle{right:10px!important}
  body.homePageActive .heroTankVisual{left:35%!important;right:4%!important}
}
@media(max-width:900px){
  body.homePageActive .homeHero{height:480px!important;min-height:480px!important}
  body.homePageActive .homeHero .topBattle{display:none!important}
  body.homePageActive .heroTankVisual{left:42%!important;right:-8%!important;opacity:.62!important}
  body.homePageActive .homeDashboard{grid-template-columns:1fr!important}
  body.homePageActive .popularPanel{grid-column:auto!important}
  body.homePageActive .popularList{grid-template-columns:1fr!important}
  body.homePageActive .homeFeatures{grid-template-columns:repeat(2,1fr)!important}
  body.homePageActive .homeFooter{grid-template-columns:1fr!important}.homeFooterLinks{justify-content:flex-start!important;flex-wrap:wrap!important}
}
@media(max-width:650px){
  body.homePageActive .homeHero{height:auto!important;min-height:570px!important}
  body.homePageActive .heroInner,body.homePageActive .homeDashboard,body.homePageActive .homeFeatures,body.homePageActive .homeFooter{width:calc(100% - 24px)!important}
  body.homePageActive .homeHero .heroCopy{width:100%!important;max-width:100%!important;padding:36px 4px 0!important}
  body.homePageActive .homeHero h1{font-size:50px!important}
  body.homePageActive .heroMetrics{width:100%!important;grid-template-columns:repeat(2,1fr)!important;margin-top:76px!important}
  body.homePageActive .heroTankVisual{left:35%!important;right:-30%!important;top:92px!important;bottom:70px!important;opacity:.42!important}
  body.homePageActive .latestGrid{grid-template-columns:1fr!important}
  body.homePageActive .latestArt{height:150px!important}
  body.homePageActive .homeFeatures{grid-template-columns:1fr!important}
  body.homePageActive .homeFeatures>div{min-height:96px!important}
  body.homePageActive .homeFooterBrand small{display:none}
}

/* ================================================================
   v0.3.5.102 — HOME BRAND YELLOW ACCENT POLISH
   Scope: HOME only. Add FermaniHUB yellow/gold accent parity with brand and /replays.
   Keep layout from v0.3.5.101 unchanged.
   ================================================================ */
body.homePageActive{
  --home-yellow:#e0b54a;
  --home-yellow-deep:#b8872d;
  --home-yellow-soft:rgba(224,181,74,.18);
}

/* Bring back the brand yellow that is present in the logo and /replays. */
body.homePageActive .homeHero .heroCopy .eyebrow,
body.homePageActive .panelTitle a,
body.homePageActive .damageOpen,
body.homePageActive .homeMuted a,
body.homePageActive .homeFooterLinks a:hover{
  color:var(--home-yellow)!important;
}

body.homePageActive .buttonSecondary,
body.homePageActive .topBattleButton,
body.homePageActive .panelButton{
  border-color:rgba(224,181,74,.20)!important;
}
body.homePageActive .buttonSecondary:hover,
body.homePageActive .topBattleButton:hover,
body.homePageActive .panelButton:hover{
  border-color:rgba(224,181,74,.42)!important;
  box-shadow:0 0 0 1px rgba(224,181,74,.08), inset 0 1px 0 rgba(255,255,255,.03)!important;
}

body.homePageActive .buttonSecondary .buttonArrow,
body.homePageActive .topBattleButton span,
body.homePageActive .panelButton span{
  color:var(--home-yellow)!important;
}

/* Golden HUD micro-accents for card headers and callouts. */
body.homePageActive .panelTitle{
  border-bottom-color:rgba(224,181,74,.10)!important;
}
body.homePageActive .homePanelTitleIcon,
body.homePageActive .homeFeatureHudIcon,
body.homePageActive .featureIcon,
body.homePageActive .metricIcon,
body.homePageActive .homeFooterMark,
body.homePageActive .topBattleCrown{
  color:var(--home-yellow)!important;
}
body.homePageActive .homeFeatures .featureIcon{
  border-color:rgba(224,181,74,.20)!important;
  background:linear-gradient(145deg,rgba(224,181,74,.10),rgba(224,181,74,.022))!important;
}
body.homePageActive .heroMetrics>div{
  border-color:rgba(224,181,74,.11)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02), 0 0 0 1px rgba(224,181,74,.03)!important;
}
body.homePageActive .heroMetrics small,
body.homePageActive .topBattleInfo small,
body.homePageActive .popularRow b,
body.homePageActive .popularRow small,
body.homePageActive .latestBody>small{
  color:#8f8670!important;
}

/* Add yellow touches to ranking and award areas without replacing the main green CTA logic. */
body.homePageActive .damageRow>b,
body.homePageActive .homeHero .topBattle .bigDamage{
  color:var(--home-yellow)!important;
  text-shadow:0 0 12px rgba(224,181,74,.10)!important;
}
body.homePageActive .topMastery,
body.homePageActive .topMastery img + span,
body.homePageActive .topBattle .label{
  color:#e3c46f!important;
}
body.homePageActive .topMastery{
  border-top-color:rgba(224,181,74,.16)!important;
}

/* Blend yellow with the existing green hero title treatment. */
body.homePageActive .homeHero h1{
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.28));
}
body.homePageActive .homeHero p strong,
body.homePageActive .homeFeatures strong span,
body.homePageActive .homeFooterBrand strong span{
  color:var(--home-yellow)!important;
}

/* Gentle yellow separators help the home page feel more premium, like /replays cards. */
body.homePageActive .homePanel,
body.homePageActive .homeFeatures>div,
body.homePageActive .homeFooter{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02), inset 0 0 0 1px rgba(224,181,74,.025)!important;
}


/* ================================================================
   v0.3.5.103 — HOME CONTENT READABILITY + MEDAL POLISH
   Scope: HOME only. Preserve v0.3.5.102 layout/color hierarchy.
   ================================================================ */

/* Make vehicle silhouettes in HOME lists easier to read on the dark HUD. */
body.homePageActive .damageTankThumb img,
body.homePageActive .popularTankIcon img{
  filter:brightness(1.18) contrast(1.08) saturate(.86) drop-shadow(0 5px 6px rgba(0,0,0,.62))!important;
  opacity:.98!important;
}
body.homePageActive .damageRow:hover .damageTankThumb img,
body.homePageActive .popularRow:hover .popularTankIcon img{
  filter:brightness(1.27) contrast(1.09) saturate(.92) drop-shadow(0 6px 7px rgba(0,0,0,.66))!important;
}

/* Real battle awards on latest-replay HOME cards. No decorative/fake medals. */
body.homePageActive .latestAwards{
  min-height:24px;
  display:flex;
  align-items:center;
  gap:4px;
  margin:0 0 8px;
  padding:5px 0 5px;
  border-top:1px solid rgba(224,181,74,.08);
  border-bottom:1px solid rgba(224,181,74,.08);
  overflow:hidden;
}
body.homePageActive .latestAwards .cardAwardIcon{
  width:21px!important;
  height:21px!important;
  flex:0 0 21px!important;
  display:grid!important;
  place-items:center!important;
}
body.homePageActive .latestAwards .cardAwardIcon img{
  width:20px!important;
  height:20px!important;
  object-fit:contain!important;
  filter:brightness(1.10) saturate(1.06) drop-shadow(0 3px 4px rgba(0,0,0,.62))!important;
}
body.homePageActive .latestAwards .cardAwardIcon.tier-legendary img,
body.homePageActive .latestAwards .cardAwardIcon.tier-epic img{
  filter:brightness(1.14) saturate(1.12) drop-shadow(0 0 5px rgba(224,181,74,.16)) drop-shadow(0 3px 4px rgba(0,0,0,.62))!important;
}
body.homePageActive .latestAwards .cardAwardIcon:nth-child(n+5){display:none!important}
body.homePageActive .latestCard:has(.latestAwards){min-height:247px!important}
body.homePageActive .latestCard:has(.latestAwards) .latestBody>small{margin-bottom:5px!important}
body.homePageActive .latestCard:hover .latestAwards{
  border-color:rgba(224,181,74,.14);
}

/* Small premium cue without changing the approved HOME composition. */
body.homePageActive .latestBody>strong{
  position:relative;
  padding-left:8px;
}
body.homePageActive .latestBody>strong:before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  bottom:2px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,#e0b54a,#a67722);
  opacity:.82;
}

/* Footer readability lift: about 10–15%, not a redesign. */
body.homePageActive .homeFooterBrand small{color:#74817b!important}
body.homePageActive .homeFooterLinks a{color:#9aa69f!important}
body.homePageActive .homeFooterMeta{color:#6a7771!important}
body.homePageActive .homeFooter{
  border-top-color:rgba(224,181,74,.10)!important;
}

@media(max-width:650px){
  body.homePageActive .latestAwards{margin-bottom:7px}
  body.homePageActive .latestCard:has(.latestAwards){min-height:0!important}
}

/* ================================================================
   v0.3.5.104 — HOME CARD ART ALIGNMENT + FOOTER CLEANUP
   Scope: HOME only. Fix inherited transform conflict on tank renders.
   ================================================================ */

/* v0.3.5.103 inherited translateX(-50%) from the old global art rules.
   The new inset-based HOME rules must explicitly cancel that transform. */
body.homePageActive .topTankThumb img{
  left:3px!important;
  right:3px!important;
  top:3px!important;
  bottom:3px!important;
  width:calc(100% - 6px)!important;
  height:calc(100% - 6px)!important;
  transform:none!important;
  object-position:center center!important;
}

body.homePageActive .latestArt img{
  left:8%!important;
  right:8%!important;
  top:7px!important;
  bottom:1px!important;
  width:84%!important;
  height:92%!important;
  transform:none!important;
  object-position:center center!important;
}

/* Clean compact HOME footer: brand only, no duplicate navigation/meta copy. */
body.homePageActive .homeFooter{
  grid-template-columns:1fr!important;
  min-height:64px!important;
  padding:14px 8px!important;
}
body.homePageActive .homeFooterLinks,
body.homePageActive .homeFooterMeta{
  display:none!important;
}

/* ================================================================
   v0.3.5.105 — HOME HERO USER ART + TOP BATTLE PREMIUM CARD
   Scope: HOME only. User-supplied hero image + redesigned best-battle card.
   ================================================================ */

/* Use the supplied wide tank/field artwork as the single HOME hero image. */
body.homePageActive .homeHero .heroBackdrop{
  inset:0!important;
  background-image:url('/assets/home_hero_user_battle.jpg')!important;
  background-size:cover!important;
  background-position:56% 48%!important;
  filter:saturate(.94) contrast(1.04) brightness(.88)!important;
  transform:none!important;
  opacity:1!important;
}
body.homePageActive .homeHero .heroTankVisual{display:none!important}

/* Dark text-safe zone on the left, while keeping the tank/right side bright. */
body.homePageActive .homeHero:before{
  background:
    linear-gradient(90deg,
      rgba(3,7,6,.97) 0%,
      rgba(3,7,6,.90) 23%,
      rgba(3,7,6,.67) 37%,
      rgba(3,7,6,.34) 50%,
      rgba(3,7,6,.12) 64%,
      rgba(3,7,6,.04) 78%,
      rgba(3,7,6,.06) 100%),
    linear-gradient(180deg,rgba(4,8,7,.05) 0%,rgba(4,8,7,.02) 56%,rgba(4,8,7,.42) 100%)!important;
  mix-blend-mode:normal!important;
  z-index:1!important;
}
body.homePageActive .homeHero:after{
  background:linear-gradient(180deg,rgba(7,11,10,0) 58%,rgba(7,11,10,.26) 78%,#070b0a 100%)!important;
}

/* Premium best-battle overlay: no black square thumbnail. */
body.homePageActive .homeHero .topBattle{
  right:18px!important;
  top:42px!important;
  width:348px!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:10px!important;
  background:linear-gradient(155deg,rgba(12,21,19,.94),rgba(6,12,12,.92))!important;
  border:1px solid rgba(224,181,74,.28)!important;
  box-shadow:0 28px 76px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.025),inset 0 1px 0 rgba(255,255,255,.05)!important;
  backdrop-filter:blur(12px) saturate(1.12)!important;
}
body.homePageActive .topBattleVisual{
  position:relative!important;
  height:132px!important;
  overflow:hidden!important;
  background-size:cover!important;
  background-position:center 48%!important;
  border-bottom:1px solid rgba(224,181,74,.18)!important;
  cursor:pointer!important;
}
body.homePageActive .topBattleVisual:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(2,5,4,.18) 0%,rgba(2,5,4,.02) 44%,rgba(2,5,4,.65) 100%),linear-gradient(90deg,rgba(3,7,6,.20),transparent 54%);
  pointer-events:none;
}
body.homePageActive .topBattleVisual:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:2px;
  z-index:4;
  background:linear-gradient(90deg,transparent 0%,rgba(224,181,74,.82) 18%,rgba(224,181,74,.34) 74%,transparent 100%);
  opacity:.76;
}
body.homePageActive .topBattleVisual>img{
  position:absolute!important;
  z-index:2!important;
  right:3%!important;
  bottom:-4%!important;
  width:78%!important;
  height:106%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:none!important;
  filter:brightness(1.18) contrast(1.08) saturate(.98) drop-shadow(0 12px 12px rgba(0,0,0,.58))!important;
}
body.homePageActive .topBattleVisual .label{
  position:absolute!important;
  z-index:5!important;
  top:12px!important;
  left:14px!important;
  right:14px!important;
  margin:0!important;
  color:#f0cf71!important;
  text-shadow:0 2px 8px rgba(0,0,0,.92)!important;
}
body.homePageActive .topBattleVisualLoading{
  background:
    radial-gradient(circle at 76% 34%,rgba(224,181,74,.10),transparent 30%),
    linear-gradient(145deg,#15211e,#0a1110)!important;
}
body.homePageActive .topBattleBody{padding:14px 16px 15px!important}
body.homePageActive .topBattleHeadline{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin-bottom:10px!important;
}
body.homePageActive .topBattleInfo{min-width:0!important;padding-top:1px!important}
body.homePageActive .topBattleInfo h3{
  margin:0 0 4px!important;
  font-size:17px!important;
  line-height:1.06!important;
  color:#f4f7f5!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body.homePageActive .topBattleInfo small{font-size:9px!important;color:#8f9b95!important}
body.homePageActive .topBattleDamage{text-align:right!important;flex:0 0 auto!important}
body.homePageActive .topBattleDamage strong{
  display:block!important;
  color:var(--home-yellow)!important;
  font-size:28px!important;
  line-height:.95!important;
  letter-spacing:.01em!important;
  text-shadow:0 0 14px rgba(224,181,74,.14)!important;
}
body.homePageActive .topBattleDamage span{
  display:block!important;
  margin-top:5px!important;
  color:#9ccf2b!important;
  font-size:6px!important;
  font-weight:900!important;
  letter-spacing:.10em!important;
}
body.homePageActive .homeHero .topBattle .mini{
  display:grid!important;
  grid-template-columns:repeat(2,1fr)!important;
  gap:0!important;
  margin:0!important;
  padding:10px 0!important;
  border-top:1px solid rgba(224,181,74,.12)!important;
  border-bottom:1px solid rgba(224,181,74,.12)!important;
}
body.homePageActive .homeHero .topBattle .mini>div{padding:0 8px!important}
body.homePageActive .homeHero .topBattle .mini>div+div{border-left:1px solid rgba(224,181,74,.10)!important}
body.homePageActive .homeHero .topBattle .mini strong{font-size:18px!important;color:#eef4f1!important}
body.homePageActive .homeHero .topBattle .mini span{font-size:6.5px!important;color:#7f8c86!important}
body.homePageActive .topMastery{
  min-height:36px!important;
  padding:8px 0!important;
  margin:0!important;
  border-top:0!important;
  gap:8px!important;
  color:#dfc36e!important;
}
body.homePageActive .topMastery img{width:24px!important;height:24px!important}
body.homePageActive .topMastery span{font-size:9px!important;font-weight:800!important;color:#d9c47b!important}
body.homePageActive .topBattleButton{
  height:36px!important;
  margin:0!important;
  padding:0 11px!important;
  border-color:rgba(224,181,74,.26)!important;
  background:linear-gradient(180deg,rgba(28,31,24,.76),rgba(12,18,15,.82))!important;
  color:#f0f3f1!important;
}
body.homePageActive .topBattleButton:hover{
  border-color:rgba(224,181,74,.54)!important;
  background:linear-gradient(180deg,rgba(40,38,26,.84),rgba(15,21,17,.92))!important;
}
body.homePageActive .topBattleLoading{margin:8px 0!important;padding:12px 0!important;text-align:center!important}

@media(max-width:1200px){
  body.homePageActive .homeHero .heroBackdrop{background-position:60% 48%!important}
}
@media(max-width:900px){
  body.homePageActive .homeHero .heroBackdrop{background-position:64% 50%!important}
}
@media(max-width:650px){
  body.homePageActive .homeHero .heroBackdrop{background-position:67% 50%!important}
}


/* ================================================================
   v0.3.5.106 — HOME HERO BALANCE + REPLAYS DATA LOGIC CLEANUP
   Scope: HOME logic polish only. Keep /replays visual system unchanged.
   ================================================================ */

body.homePageActive .homeHero .heroBackdrop{
  background-color:#080d0c!important;
  background-size:auto 100%!important;
  background-repeat:no-repeat!important;
  background-position:74% 50%!important;
  filter:saturate(.98) contrast(1.02) brightness(.96)!important;
}
body.homePageActive .homeHero:before{
  background:
    linear-gradient(90deg,
      rgba(3,7,6,.92) 0%,
      rgba(3,7,6,.84) 18%,
      rgba(3,7,6,.58) 33%,
      rgba(3,7,6,.26) 49%,
      rgba(3,7,6,.10) 63%,
      rgba(3,7,6,.04) 79%,
      rgba(3,7,6,.03) 100%),
    linear-gradient(180deg,rgba(4,8,7,.03) 0%,rgba(4,8,7,.01) 56%,rgba(4,8,7,.28) 100%)!important;
}
body.homePageActive .homeHero:after{
  background:linear-gradient(180deg,rgba(7,11,10,0) 62%,rgba(7,11,10,.18) 80%,#070b0a 100%)!important;
}
body.homePageActive .homeHero .topBattle{
  right:26px!important;
  top:32px!important;
  width:356px!important;
  background:linear-gradient(160deg,rgba(16,24,22,.82),rgba(10,16,15,.76))!important;
  border:1px solid rgba(224,181,74,.24)!important;
  box-shadow:0 24px 60px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.03),inset 0 1px 0 rgba(255,255,255,.06)!important;
  backdrop-filter:blur(10px) saturate(1.08)!important;
}
body.homePageActive .topBattleVisual{
  height:138px!important;
  background-size:cover!important;
  background-position:center 44%!important;
  border-bottom:1px solid rgba(224,181,74,.16)!important;
}
body.homePageActive .topBattleVisual:before{
  background:linear-gradient(180deg,rgba(255,255,255,.02) 0%,rgba(255,255,255,0) 24%,rgba(4,8,7,.18) 62%,rgba(4,8,7,.44) 100%),linear-gradient(90deg,rgba(5,9,8,.10),transparent 52%)!important;
}
body.homePageActive .topBattleVisual>img{
  right:0!important;
  left:auto!important;
  bottom:-3%!important;
  width:84%!important;
  height:109%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  filter:brightness(1.12) contrast(1.06) saturate(1.02) drop-shadow(0 12px 12px rgba(0,0,0,.52))!important;
}
body.homePageActive .topBattleVisual .label{color:#f1d17a!important}
body.homePageActive .topBattleBody{
  padding:13px 16px 14px!important;
  background:linear-gradient(180deg,rgba(14,21,19,.14),rgba(8,13,12,.08))!important;
}
body.homePageActive .topBattleInfo small{color:#9aa59f!important}
body.homePageActive .topBattleDamage strong{color:#e1b84c!important}
body.homePageActive .topBattleDamage span{color:#8fcb24!important}
body.homePageActive .homeHero .topBattle .mini{
  border-top:1px solid rgba(224,181,74,.10)!important;
  border-bottom:1px solid rgba(224,181,74,.10)!important;
}
body.homePageActive .topBattleButton{
  background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.008))!important;
  border-color:rgba(224,181,74,.22)!important;
}
body.homePageActive .topBattleButton:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.038),rgba(255,255,255,.015))!important;
  border-color:rgba(224,181,74,.46)!important;
}
body.homePageActive .damageRow{grid-template-columns:20px 56px minmax(0,1fr) 72px 46px!important}
body.homePageActive .damageTankThumb,
body.homePageActive .popularTankIcon{
  background:none!important;
  display:grid!important;
  place-items:center!important;
}
body.homePageActive .damageTankThumb img,
body.homePageActive .popularTankIcon img{
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  filter:drop-shadow(0 6px 6px rgba(0,0,0,.58))!important;
}
body.homePageActive .damageTankThumb img{width:52px!important;height:30px!important}
body.homePageActive .popularTankIcon img{width:52px!important;height:31px!important}
body.homePageActive .popularPanel .panelTitle a{display:none!important}
@media(max-width:1400px){body.homePageActive .homeHero .heroBackdrop{background-position:70% 50%!important}}
@media(max-width:1200px){body.homePageActive .homeHero .heroBackdrop{background-size:auto 102%!important;background-position:66% 50%!important}}
@media(max-width:900px){body.homePageActive .homeHero .heroBackdrop{background-size:cover!important;background-position:60% 48%!important}}


/* ========================================================================== */
/* v0.3.5.107 — HOME APPROVED MOCKUP EXACT REWORK                            */
/* Scope lock: HOME only. Approved user mockup 2026-08-18.                    */
/* ========================================================================== */
body.homePageActive{--home-canvas:1380px;--home-gold:#e1b84c;--home-green:#a8e51a;background:#061015!important}
body.homePageActive .homeApprovedHero{height:430px!important;min-height:430px!important;border-bottom:1px solid rgba(151,181,183,.14)!important;background:#08131a!important}
body.homePageActive .homeApprovedHero .heroBackdrop{inset:0!important;background-image:url('/assets/home_hero_user_battle.jpg')!important;background-size:cover!important;background-position:55% 50%!important;filter:saturate(.72) contrast(1.08) brightness(.60)!important;transform:none!important;opacity:1!important}
body.homePageActive .homeApprovedHero:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(4,12,17,.92) 0%,rgba(4,12,17,.76) 30%,rgba(4,12,17,.34) 53%,rgba(4,12,17,.10) 76%,rgba(4,12,17,.24) 100%),linear-gradient(180deg,rgba(4,11,16,.05),rgba(4,11,16,.08) 58%,rgba(4,11,16,.72) 100%)!important;pointer-events:none}
body.homePageActive .homeApprovedHero:after{background:linear-gradient(180deg,transparent 70%,rgba(5,13,17,.48) 88%,#061015 100%)!important}
body.homePageActive .homeApprovedHero .heroInner{width:min(var(--home-canvas),calc(100% - 38px))!important;display:grid!important;grid-template-columns:minmax(0,1fr) 500px!important;gap:42px!important;align-items:start!important}
body.homePageActive .homeApprovedHero .heroCopy{width:640px!important;max-width:640px!important;padding:45px 0 0 22px!important;z-index:3!important}
body.homePageActive .homeApprovedHero .heroCopy .eyebrow{font-size:8px!important;letter-spacing:.18em!important;color:#e0b94f!important}
body.homePageActive .homeApprovedHero h1{margin:14px 0 12px!important;max-width:650px!important;line-height:.91!important;text-transform:uppercase!important}
body.homePageActive .homeApprovedHero h1 span{display:block!important;color:#f4f6f5!important;font-size:58px!important;letter-spacing:.01em!important;text-shadow:0 7px 30px rgba(0,0,0,.48)!important}
body.homePageActive .homeApprovedHero h1 em{display:block!important;color:var(--home-green)!important;font-size:64px!important;font-style:normal!important;letter-spacing:.01em!important;text-shadow:0 0 26px rgba(168,229,26,.13),0 7px 30px rgba(0,0,0,.45)!important}
body.homePageActive .homeApprovedHero p{font-size:13px!important;line-height:1.55!important;color:#d1d8d5!important;margin:0!important;max-width:500px!important}
body.homePageActive .homeApprovedHero .heroButtons{margin-top:18px!important;display:flex!important;gap:12px!important}
body.homePageActive .homeApprovedHero .button{height:42px!important;border-radius:5px!important;font-size:10px!important;padding:0 18px!important}
body.homePageActive .homeApprovedHero .homeBrowseButton{background:rgba(7,15,18,.60)!important;border-color:rgba(214,227,224,.35)!important;color:#f0f3f2!important}
body.homePageActive .homeApprovedHero .homeBrowseButton:hover{border-color:rgba(224,184,76,.50)!important}
body.homePageActive .heroMetrics{width:520px!important;grid-template-columns:repeat(4,1fr)!important;gap:9px!important;margin-top:16px!important;margin-bottom:0!important}
body.homePageActive .heroMetrics>div{height:54px!important;min-height:54px!important;background:rgba(8,19,22,.72)!important;border-color:rgba(142,169,171,.27)!important;border-radius:6px!important;padding:9px 10px!important;backdrop-filter:blur(7px)!important}
body.homePageActive .metricIcon{color:#f1f4f2!important;border-color:rgba(216,228,225,.18)!important;background:rgba(255,255,255,.02)!important}
body.homePageActive .heroMetrics strong{font-size:18px!important}.homePageActive .heroMetrics small{font-size:6.5px!important;color:#899997!important}

body.homePageActive .approvedTopBattle{position:relative!important;right:auto!important;top:auto!important;width:100%!important;margin:14px 0 0!important;padding:10px!important;border-radius:9px!important;background:rgba(8,18,22,.80)!important;border:1px solid rgba(149,174,176,.30)!important;box-shadow:0 20px 54px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04)!important;backdrop-filter:blur(10px)!important;z-index:4!important;overflow:visible!important}
body.homePageActive .topBattleHeader{height:30px;display:flex;align-items:center;gap:9px;padding:0 7px 7px;border-bottom:1px solid rgba(180,198,197,.16);color:#f0f3f2;text-transform:uppercase;font-size:12.5px;font-weight:900}
body.homePageActive .topBattleHeaderIcon{width:18px;height:18px;color:#f2f4f2}
body.homePageActive .topBattleFeature{position:relative;min-height:285px;margin-top:8px;border:1px solid rgba(165,186,185,.24);border-radius:7px;overflow:hidden;background-size:cover;background-position:center!important;cursor:pointer}
body.homePageActive .topBattleFeature:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 45%,rgba(3,9,12,.35));pointer-events:none}
body.homePageActive .topBattleFeatureCopy{position:relative;z-index:3;width:58%;min-height:285px;padding:14px 12px 12px;display:flex;flex-direction:column;align-items:flex-start}
body.homePageActive .topRegionBadge{display:inline-flex;min-width:32px;height:25px;align-items:center;justify-content:center;padding:0 8px;border:1px solid rgba(224,184,76,.28);background:rgba(8,26,48,.72);color:#e8edf0;font-size:9px;font-weight:900;text-transform:uppercase}
body.homePageActive .topBattleFeature h3{margin:8px 0 2px;font-size:17px;color:#f4f6f5;line-height:1.05}.homePageActive .topBattleFeature small{color:#9ca9a6;font-size:9px}
body.homePageActive .topBattleFeature .topBattleDamage{margin-top:12px!important;text-align:left!important}.homePageActive .topBattleFeature .topBattleDamage strong{font-size:44px!important;line-height:.9!important;color:var(--home-gold)!important}.homePageActive .topBattleFeature .topBattleDamage span{font-size:8px!important;color:#f3f5f3!important;margin-top:6px!important}
body.homePageActive .topBattleCombat{display:flex;align-items:center;gap:18px;margin-top:14px;padding-top:10px;width:100%;border-top:1px solid rgba(177,195,193,.18)}
body.homePageActive .topBattleCombat>div:first-child b{display:block;font-size:24px;color:#f4f6f5}.homePageActive .topBattleCombat>div:first-child span{font-size:9px;color:#8f9b98;text-transform:uppercase}
body.homePageActive .topBattleMastery{display:flex!important;align-items:center!important;gap:8px!important}.homePageActive .topBattleMastery img{width:34px;height:34px;object-fit:contain}.homePageActive .topBattleMastery span{font-size:10.5px;color:#e8d28b;font-weight:800}
body.homePageActive .topBattlePlayer{margin-top:auto;width:100%;height:35px;display:grid;grid-template-columns:25px 1fr auto;align-items:center;gap:7px;border-top:1px solid rgba(177,195,193,.15);padding-top:8px;color:#eef2f0}.homePageActive .topBattlePlayerIcon{width:20px;height:20px;color:#e8ecea}.homePageActive .topBattlePlayer b{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.homePageActive .topBattlePlayer i{font-style:normal;font-size:9px;color:#6e8ecf;border:1px solid rgba(63,105,186,.30);padding:3px 5px;background:rgba(30,67,138,.20)}
body.homePageActive .topBattleFeature .topBattleButton{height:34px!important;width:100%!important;margin-top:7px!important;background:rgba(13,31,24,.70)!important;border-color:rgba(168,229,26,.48)!important;color:#f3f6f3!important;z-index:5!important}.homePageActive .topBattleFeature .topBattleButton span{color:var(--home-green)!important}
body.homePageActive .topBattleTankRender{position:absolute;z-index:2;right:-3%;bottom:2%;width:57%;height:82%;object-fit:contain;object-position:center bottom;filter:brightness(1.08) contrast(1.05) saturate(.85) drop-shadow(0 18px 14px rgba(0,0,0,.55))}

body.homePageActive .homeQuickFilters{width:min(var(--home-canvas),calc(100% - 38px));height:52px;margin:0 auto;display:flex;justify-content:center;align-items:center;gap:12px;border-bottom:1px solid rgba(151,181,183,.12)}
body.homePageActive .homeQuickFilter{height:34px;min-width:104px;padding:0 16px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(144,168,169,.25);border-radius:5px;color:#cfd7d4;text-decoration:none;text-transform:none;font-size:10.5px;font-weight:800;background:rgba(7,16,19,.62)}
body.homePageActive .homeQuickFilter:hover{border-color:rgba(224,184,76,.35);color:#fff}.homePageActive .homeQuickFilter.active{background:linear-gradient(180deg,#aee82a,#8dc416);border-color:#b8ef38;color:#12210c;box-shadow:0 0 18px rgba(168,229,26,.10)}
body.homePageActive .homeQuickIcon{width:16px;height:16px}

body.homePageActive .approvedHomeDashboard{width:min(var(--home-canvas),calc(100% - 38px))!important;margin:12px auto 0!important;grid-template-columns:.90fr 1.25fr .90fr!important;gap:14px!important}
body.homePageActive .approvedHomeDashboard .homePanel{min-height:285px!important;padding:10px 11px 9px!important;border-radius:6px!important;background:linear-gradient(180deg,rgba(8,20,23,.92),rgba(5,15,18,.94))!important;border:1px solid rgba(139,165,166,.28)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;backdrop-filter:none!important}
body.homePageActive .approvedHomeDashboard .panelTitle{height:31px!important;margin:0!important;padding:0 3px 6px!important;border-bottom:1px solid rgba(149,172,172,.20)!important}.homePageActive .approvedHomeDashboard .panelTitle strong{font-size:10px!important;color:#f0f3f2!important}.homePageActive .homePanelTitleIcon{color:#f1f2ef!important}
body.homePageActive .damageRow{height:43px!important;min-height:43px!important;grid-template-columns:25px 58px minmax(0,1fr) 66px 58px!important;gap:6px!important;padding:0 2px!important;border-top:1px solid rgba(140,164,164,.14)!important}.homePageActive .damagePlace{width:20px;height:20px;display:grid;place-items:center;border:1px solid rgba(179,192,190,.20);border-radius:4px;color:#d5dcda!important;font-size:9px;font-weight:900}.homePageActive .damagePlace.rank-1{background:linear-gradient(145deg,#dba83d,#8e6521);color:#17200f!important;border-color:#ebbd54}.homePageActive .damagePlace.rank-2{background:linear-gradient(145deg,#cbd0cf,#697373);color:#14201e!important}.homePageActive .damagePlace.rank-3{background:linear-gradient(145deg,#b87839,#6a4224);color:#17120c!important}.homePageActive .damageTankThumb{width:56px!important;height:34px!important}.homePageActive .damageTankThumb img{width:56px!important;height:34px!important;filter:brightness(1.10) drop-shadow(0 5px 5px rgba(0,0,0,.48))!important}.homePageActive .damageRow>strong{font-size:9px!important;color:#f1f4f2!important}.homePageActive .damageRow>strong small{display:block;margin-top:2px;font-size:5.5px;color:#7f8d89;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.homePageActive .damageRow>b{font-size:11px!important;color:var(--home-gold)!important;text-align:right}.homePageActive .damageRow>b small{display:block;font-size:5px;color:#899591;font-weight:600}.homePageActive .damageOpen{height:25px;display:grid;place-items:center;border:1px solid rgba(139,164,164,.28);border-radius:4px;color:#e7ece9!important;font-size:7px!important;background:rgba(255,255,255,.015)}
body.homePageActive .homePanelFooterLink{height:30px;margin-top:6px;display:flex;align-items:center;justify-content:center;gap:12px;color:#a9df35;text-decoration:none;font-size:9px;font-weight:800;border-top:1px solid rgba(143,166,166,.15)}.homePageActive .homePanelFooterLink span{font-size:13px}

body.homePageActive .latestGrid{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;padding-top:6px!important}.homePageActive .latestCard.latestReplayRow{min-height:67px!important;height:67px!important;display:grid!important;grid-template-columns:122px minmax(0,1fr) 170px 90px!important;align-items:stretch!important;border:1px solid rgba(137,162,162,.22)!important;border-radius:5px!important;background:rgba(6,16,19,.70)!important;overflow:hidden!important;transform:none!important}.homePageActive .latestCard.latestReplayRow:hover{border-color:rgba(168,229,26,.36)!important;box-shadow:none!important}.homePageActive .latestReplayRow .latestArt{height:67px!important;position:relative!important;filter:none!important;background-size:cover!important;background-position:center!important}.homePageActive .latestReplayRow .latestArt:after{background:linear-gradient(90deg,rgba(5,12,14,.03),rgba(5,12,14,.20))!important}.homePageActive .latestReplayRow .latestArt>span{top:5px!important;left:5px!important;font-size:6px!important;padding:2px 4px!important;background:rgba(20,50,83,.75)!important;border-color:rgba(92,136,183,.28)!important}.homePageActive .latestReplayRow .latestArt img{inset:auto!important;right:-2px!important;bottom:-6px!important;width:84%!important;height:92%!important;transform:none!important;object-fit:contain!important;filter:brightness(1.08) drop-shadow(0 8px 7px rgba(0,0,0,.55))!important}.homePageActive .latestReplayRow .latestBody{padding:8px 9px!important;min-width:0!important}.homePageActive .latestReplayRow .latestBody>strong{font-size:10px!important;color:#f2f5f3!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.homePageActive .latestReplayRow .latestBody>small{font-size:6.5px!important;min-height:0!important;margin:3px 0 4px!important;color:#8f9b97!important;white-space:nowrap!important}.homePageActive .latestReplayRow .latestAwards{height:20px!important;margin:0!important;gap:3px!important;border:0!important;padding:0!important}.homePageActive .latestReplayRow .latestAwards .cardAwardIcon{width:18px!important;height:18px!important}.homePageActive .latestReplayRow .latestAwards img{max-width:18px!important;max-height:18px!important}.homePageActive .latestReplayRow .latestStats{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:0!important;align-items:center!important;padding:8px 5px!important;border-left:1px solid rgba(140,163,163,.15)!important}.homePageActive .latestReplayRow .latestStats>div{text-align:center!important}.homePageActive .latestReplayRow .latestStats b{font-size:10px!important;color:#f3f5f4!important}.homePageActive .latestReplayRow .latestStats span{display:block;margin-top:3px;font-size:5px!important;color:#7f8d89!important;text-transform:uppercase}.homePageActive .latestOpen{align-self:center;justify-self:stretch;height:27px;margin:0 7px;display:grid;place-items:center;border:1px solid rgba(168,229,26,.32);border-radius:4px;color:#eaf0eb;font-size:9px;font-weight:800;background:rgba(125,174,29,.04)}

body.homePageActive .popularList{padding-top:3px!important}.homePageActive .popularRow{height:45px!important;min-height:45px!important;display:grid!important;grid-template-columns:18px 66px minmax(0,1fr) auto 38px!important;grid-template-rows:1fr!important;gap:6px!important;padding:0 2px!important;border-top:1px solid rgba(140,164,164,.14)!important}.homePageActive .popularNum{grid-row:auto!important;font-size:7px!important;color:#7f8d89!important}.homePageActive .popularTankIcon{grid-row:auto!important;width:64px!important;height:36px!important}.homePageActive .popularTankIcon img{width:64px!important;height:36px!important;filter:brightness(1.08) drop-shadow(0 6px 5px rgba(0,0,0,.48))!important}.homePageActive .popularRow strong{font-size:9px!important;align-self:center!important;color:#eef2ef!important}.homePageActive .popularRow>b{grid-column:auto!important;grid-row:auto!important;color:#e4eae6!important;font-size:9px!important;white-space:nowrap}.homePageActive .popularRow>b small{font-size:5.5px;color:#899591;font-weight:600}.homePageActive .popularBars{width:34px;height:22px;display:flex;align-items:flex-end;justify-content:center;gap:2px}.homePageActive .popularBars i{display:block;width:4px;background:#92c82b;border-radius:1px}.homePageActive .popularBars i:nth-child(1){height:6px}.homePageActive .popularBars i:nth-child(2){height:10px}.homePageActive .popularBars i:nth-child(3){height:14px}.homePageActive .popularBars i:nth-child(4){height:18px}.homePageActive .popularRow:nth-child(n+4) .popularBars{opacity:.55}

body.homePageActive .approvedHomeFeatures{width:min(var(--home-canvas),calc(100% - 38px))!important;margin:10px auto 20px!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;border:0!important;background:transparent!important;gap:10px!important;box-shadow:none!important;overflow:visible!important}.homePageActive .approvedHomeFeatures>div{min-height:74px!important;padding:12px 14px!important;grid-template-columns:50px 1fr!important;gap:11px!important;border:1px solid rgba(139,164,164,.26)!important;border-radius:6px!important;background:linear-gradient(180deg,rgba(8,20,23,.86),rgba(5,15,18,.90))!important}.homePageActive .approvedHomeFeatures .featureIcon{width:43px!important;height:43px!important;border:0!important;background:transparent!important;color:#b4ed2f!important}.homePageActive .approvedHomeFeatures .homeFeatureHudIcon{width:34px!important;height:34px!important}.homePageActive .approvedHomeFeatures strong{font-size:10px!important;color:#f0f4f1!important;margin:0 0 4px!important}.homePageActive .approvedHomeFeatures p{font-size:7px!important;line-height:1.35!important;color:#91a09b!important;margin:0!important}
body.homePageActive .homeFooter{display:none!important}

@media(max-width:1180px){body.homePageActive .homeApprovedHero .heroInner{grid-template-columns:1fr 410px!important}.homePageActive .approvedHomeDashboard{grid-template-columns:1fr 1fr!important}.homePageActive .popularPanel{grid-column:1/-1!important}.homePageActive .popularList{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0 16px!important}}
@media(max-width:900px){body.homePageActive .homeApprovedHero{height:auto!important;min-height:620px!important}.homePageActive .homeApprovedHero .heroInner{grid-template-columns:1fr!important}.homePageActive .approvedTopBattle{display:none!important}.homePageActive .homeApprovedHero .heroCopy{width:100%!important;max-width:100%!important}.homePageActive .homeQuickFilters{overflow-x:auto!important;justify-content:flex-start!important}.homePageActive .approvedHomeDashboard{grid-template-columns:1fr!important}.homePageActive .popularPanel{grid-column:auto!important}.homePageActive .latestCard.latestReplayRow{grid-template-columns:110px minmax(0,1fr) 150px!important}.homePageActive .latestOpen{display:none!important}.homePageActive .approvedHomeFeatures{grid-template-columns:1fr 1fr!important}}
@media(max-width:620px){body.homePageActive .homeApprovedHero h1 span{font-size:42px!important}.homePageActive .homeApprovedHero h1 em{font-size:48px!important}.homePageActive .heroMetrics{width:100%!important;grid-template-columns:1fr 1fr!important}.homePageActive .homeQuickFilter{min-width:96px!important}.homePageActive .latestCard.latestReplayRow{grid-template-columns:92px minmax(0,1fr)!important;height:88px!important;min-height:88px!important}.homePageActive .latestReplayRow .latestArt{height:88px!important}.homePageActive .latestReplayRow .latestStats{display:none!important}.homePageActive .approvedHomeFeatures{grid-template-columns:1fr!important}}


/* ========================================================================== */
/* v0.3.5.108 — HOME APPROVED MOCKUP LAYOUT HARD FIX                         */
/* HOME only. Hard reset old HOME rules that overrode v0.3.5.107 geometry.   */
/* ========================================================================== */

/* Hero: keep approved structure, move the artwork visually to the right so
   the title has a clean readable zone. Do not add extra heavy darkening. */
body.homePageActive .homeApprovedHero .heroBackdrop{
  background-color:#071117!important;
  background-size:76% auto!important;
  background-repeat:no-repeat!important;
  background-position:100% 50%!important;
  filter:saturate(.80) contrast(1.06) brightness(.72)!important;
}
body.homePageActive .homeApprovedHero:before{
  background:
    linear-gradient(90deg,
      rgba(4,12,17,.94) 0%,
      rgba(4,12,17,.84) 20%,
      rgba(4,12,17,.56) 36%,
      rgba(4,12,17,.23) 51%,
      rgba(4,12,17,.08) 66%,
      rgba(4,12,17,.02) 82%,
      rgba(4,12,17,.02) 100%),
    linear-gradient(180deg,rgba(4,11,16,.02),rgba(4,11,16,.03) 62%,rgba(4,11,16,.56) 100%)!important;
}
body.homePageActive .homeApprovedHero .heroInner{
  grid-template-columns:minmax(0,1fr) 510px!important;
  gap:34px!important;
}
body.homePageActive .approvedTopBattle{
  margin-top:12px!important;
  padding:9px!important;
  background:linear-gradient(155deg,rgba(16,29,31,.78),rgba(7,18,22,.70))!important;
  border-color:rgba(171,194,194,.34)!important;
  box-shadow:0 20px 50px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
body.homePageActive .topBattleFeature{
  min-height:276px!important;
  background-position:center 45%!important;
}
body.homePageActive .topBattleFeatureCopy{
  min-height:276px!important;
  width:57%!important;
}
body.homePageActive .topBattleTankRender{
  right:-1%!important;
  bottom:1%!important;
  width:59%!important;
  height:84%!important;
  filter:brightness(1.16) contrast(1.04) saturate(.94) drop-shadow(0 16px 13px rgba(0,0,0,.48))!important;
}

/* CRITICAL FIX: Grid panels must size to their own content instead of
   stretching to the tallest legacy latest-card min-height. */
body.homePageActive .approvedHomeDashboard{
  align-items:start!important;
  grid-auto-rows:max-content!important;
}
body.homePageActive .approvedHomeDashboard > .homePanel{
  align-self:start!important;
  height:auto!important;
  min-height:315px!important;
  max-height:none!important;
  overflow:hidden!important;
}
body.homePageActive .approvedHomeDashboard > .damagePanel,
body.homePageActive .approvedHomeDashboard > .latestPanel,
body.homePageActive .approvedHomeDashboard > .popularPanel{
  min-height:315px!important;
}

/* CRITICAL specificity reset for old rule:
   body.homePageActive .latestCard:has(.latestAwards){min-height:247px!important}
   Each latest replay must stay one compact horizontal HUD row. */
body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:repeat(3,74px)!important;
  grid-auto-rows:74px!important;
  align-items:start!important;
  align-content:start!important;
  gap:6px!important;
  padding:6px 0 0!important;
  min-height:234px!important;
  height:234px!important;
  overflow:hidden!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid > .latestCard.latestReplayRow,
body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid > .latestCard.latestReplayRow:has(.latestAwards){
  display:grid!important;
  grid-template-columns:118px minmax(0,1fr) 164px 92px!important;
  grid-template-rows:74px!important;
  align-items:stretch!important;
  align-self:start!important;
  min-height:74px!important;
  height:74px!important;
  max-height:74px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestArt{
  min-height:74px!important;
  height:74px!important;
  max-height:74px!important;
  align-self:stretch!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestBody{
  min-height:0!important;
  height:74px!important;
  max-height:74px!important;
  padding:8px 9px 6px!important;
  overflow:hidden!important;
  align-self:stretch!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestBody>small{
  min-height:0!important;
  height:auto!important;
  margin:2px 0 3px!important;
  white-space:nowrap!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestAwards,
body.homePageActive .approvedHomeDashboard .latestPanel .latestCard:has(.latestAwards) .latestAwards{
  min-height:18px!important;
  height:18px!important;
  max-height:18px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestStats{
  min-height:74px!important;
  height:74px!important;
  max-height:74px!important;
  padding:7px 4px!important;
  overflow:hidden!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestOpen{
  align-self:center!important;
  height:28px!important;
  max-height:28px!important;
}

/* Keep left and right lists compact and end near the same baseline as latest. */
body.homePageActive .approvedHomeDashboard .damagePanel .damageList,
body.homePageActive .approvedHomeDashboard .popularPanel .popularList{
  min-height:225px!important;
  height:225px!important;
  max-height:225px!important;
  overflow:hidden!important;
}
body.homePageActive .approvedHomeDashboard .damagePanel .damageRow{
  min-height:45px!important;
  height:45px!important;
  max-height:45px!important;
}
body.homePageActive .approvedHomeDashboard .popularPanel .popularRow{
  min-height:45px!important;
  height:45px!important;
  max-height:45px!important;
}
body.homePageActive .approvedHomeDashboard .homePanelFooterLink{
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  margin-top:5px!important;
}

/* Pull the benefit band back under the dashboard like the approved mockup. */
body.homePageActive .approvedHomeFeatures{
  margin-top:10px!important;
  margin-bottom:18px!important;
}

@media(max-width:1180px){
  body.homePageActive .homeApprovedHero .heroBackdrop{background-size:88% auto!important;background-position:100% 50%!important}
  body.homePageActive .homeApprovedHero .heroInner{grid-template-columns:minmax(0,1fr) 420px!important}
  body.homePageActive .approvedHomeDashboard > .homePanel{min-height:315px!important}
  body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid > .latestCard.latestReplayRow,
  body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid > .latestCard.latestReplayRow:has(.latestAwards){grid-template-columns:108px minmax(0,1fr) 145px!important}
  body.homePageActive .approvedHomeDashboard .latestPanel .latestOpen{display:none!important}
}
@media(max-width:900px){
  body.homePageActive .homeApprovedHero .heroBackdrop{background-size:cover!important;background-position:62% 50%!important}
  body.homePageActive .approvedHomeDashboard > .homePanel{min-height:0!important}
  body.homePageActive .approvedHomeDashboard .damagePanel .damageList,
  body.homePageActive .approvedHomeDashboard .popularPanel .popularList{height:auto!important;max-height:none!important}
  body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid{height:auto!important;max-height:none!important;grid-template-rows:none!important;grid-auto-rows:74px!important}
}
@media(max-width:620px){
  body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid{grid-auto-rows:88px!important}
  body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid > .latestCard.latestReplayRow,
  body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid > .latestCard.latestReplayRow:has(.latestAwards){grid-template-columns:92px minmax(0,1fr)!important;grid-template-rows:88px!important;height:88px!important;min-height:88px!important;max-height:88px!important}
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestArt,
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestBody{height:88px!important;min-height:88px!important;max-height:88px!important}
}


/* ========================================================================== */
/* v0.3.5.109 — HOME APPROVED MOCKUP SCALE + DENSITY PASS                    */
/* HOME only. Scale the approved composition up on wide desktop displays.     */
/* Structure/data/colors remain unchanged. /replays visuals remain untouched. */
/* ========================================================================== */

/* Wide desktop canvas: v108 geometry was correct but visually too small on
   high-width / zoomed-out desktop viewports. */
body.homePageActive{--home-canvas:1740px!important}

/* HERO — same approved composition, larger physical presence. */
body.homePageActive .homeApprovedHero{
  height:500px!important;
  min-height:500px!important;
}
body.homePageActive .homeApprovedHero .heroBackdrop{
  background-size:78% auto!important;
  background-position:100% 50%!important;
  filter:saturate(.82) contrast(1.06) brightness(.74)!important;
}
body.homePageActive .homeApprovedHero .heroInner{
  width:min(var(--home-canvas),calc(100% - 44px))!important;
  grid-template-columns:minmax(0,1fr) 600px!important;
  gap:44px!important;
}
body.homePageActive .homeApprovedHero .heroCopy{
  width:760px!important;
  max-width:760px!important;
  padding:55px 0 0 26px!important;
}
body.homePageActive .homeApprovedHero .heroCopy .eyebrow{
  font-size:9px!important;
  letter-spacing:.19em!important;
}
body.homePageActive .homeApprovedHero h1{
  max-width:790px!important;
  margin:15px 0 15px!important;
}
body.homePageActive .homeApprovedHero h1 span{
  font-size:70px!important;
  line-height:.91!important;
}
body.homePageActive .homeApprovedHero h1 em{
  font-size:78px!important;
  line-height:.92!important;
}
body.homePageActive .homeApprovedHero p{
  max-width:610px!important;
  font-size:15px!important;
  line-height:1.58!important;
}
body.homePageActive .homeApprovedHero .heroButtons{
  margin-top:21px!important;
  gap:14px!important;
}
body.homePageActive .homeApprovedHero .button{
  height:48px!important;
  padding:0 22px!important;
  font-size:11px!important;
}
body.homePageActive .homeApprovedHero .buttonHudIcon{
  width:19px!important;
  height:19px!important;
}

/* KPI strip under copy. */
body.homePageActive .heroMetrics{
  width:640px!important;
  gap:11px!important;
  margin-top:19px!important;
}
body.homePageActive .heroMetrics>div{
  height:64px!important;
  min-height:64px!important;
  padding:10px 12px!important;
  border-radius:7px!important;
}
body.homePageActive .metricIcon{
  width:33px!important;
  height:33px!important;
}
body.homePageActive .metricIcon svg{
  width:20px!important;
  height:20px!important;
}
body.homePageActive .heroMetrics strong{font-size:21px!important}
body.homePageActive .heroMetrics small{font-size:7px!important}

/* BEST BATTLE — larger, still light; no additional dark slab. */
body.homePageActive .approvedTopBattle{
  margin-top:15px!important;
  padding:11px!important;
  border-radius:10px!important;
}
body.homePageActive .topBattleHeader{
  height:36px!important;
  gap:10px!important;
  padding:0 8px 8px!important;
  font-size:12px!important;
}
body.homePageActive .topBattleHeaderIcon{
  width:20px!important;
  height:20px!important;
}
body.homePageActive .topBattleFeature{
  min-height:332px!important;
  margin-top:9px!important;
  border-radius:8px!important;
}
body.homePageActive .topBattleFeatureCopy{
  width:58%!important;
  min-height:332px!important;
  padding:17px 15px 14px!important;
}
body.homePageActive .topRegionBadge{
  min-width:36px!important;
  height:28px!important;
  font-size:8.5px!important;
}
body.homePageActive .topBattleFeature h3{
  margin:10px 0 3px!important;
  font-size:20px!important;
}
body.homePageActive .topBattleFeature small{font-size:10px!important}
body.homePageActive .topBattleFeature .topBattleDamage{margin-top:15px!important}
body.homePageActive .topBattleFeature .topBattleDamage strong{font-size:52px!important}
body.homePageActive .topBattleFeature .topBattleDamage span{font-size:8.5px!important}
body.homePageActive .topBattleCombat{
  gap:22px!important;
  margin-top:16px!important;
  padding-top:12px!important;
}
body.homePageActive .topBattleCombat>div:first-child b{font-size:25px!important}
body.homePageActive .topBattleCombat>div:first-child span{font-size:7.5px!important}
body.homePageActive .topBattleMastery img{width:38px!important;height:38px!important}
body.homePageActive .topBattleMastery span{font-size:10px!important}
body.homePageActive .topBattlePlayer{
  height:40px!important;
  grid-template-columns:28px 1fr auto!important;
  gap:8px!important;
  padding-top:9px!important;
}
body.homePageActive .topBattlePlayerIcon{width:22px!important;height:22px!important}
body.homePageActive .topBattlePlayer b{font-size:10px!important}
body.homePageActive .topBattlePlayer i{font-size:7.5px!important;padding:4px 6px!important}
body.homePageActive .topBattleFeature .topBattleButton{
  height:38px!important;
  margin-top:8px!important;
  font-size:8px!important;
}
body.homePageActive .topBattleTankRender{
  right:-2%!important;
  bottom:1%!important;
  width:61%!important;
  height:87%!important;
  filter:brightness(1.17) contrast(1.05) saturate(.96) drop-shadow(0 18px 14px rgba(0,0,0,.50))!important;
}

/* QUICK FILTER BAR — larger and closer to mockup proportions. */
body.homePageActive .homeQuickFilters{
  width:min(var(--home-canvas),calc(100% - 44px))!important;
  height:64px!important;
  gap:12px!important;
}
body.homePageActive .homeQuickFilter{
  height:40px!important;
  min-width:122px!important;
  padding:0 19px!important;
  gap:9px!important;
  font-size:10px!important;
  border-radius:6px!important;
}
body.homePageActive .homeQuickIcon{width:18px!important;height:18px!important}

/* MAIN DASHBOARD — retain the exact 3-column concept but use the wider canvas. */
body.homePageActive .approvedHomeDashboard{
  width:min(var(--home-canvas),calc(100% - 44px))!important;
  margin:14px auto 0!important;
  grid-template-columns:.92fr 1.36fr .92fr!important;
  gap:18px!important;
}
body.homePageActive .approvedHomeDashboard > .homePanel,
body.homePageActive .approvedHomeDashboard > .damagePanel,
body.homePageActive .approvedHomeDashboard > .latestPanel,
body.homePageActive .approvedHomeDashboard > .popularPanel{
  min-height:372px!important;
  padding:13px 14px 11px!important;
  border-radius:7px!important;
}
body.homePageActive .approvedHomeDashboard .panelTitle{
  height:39px!important;
  padding:0 4px 8px!important;
}
body.homePageActive .approvedHomeDashboard .panelTitle strong{font-size:11.5px!important}
body.homePageActive .homePanelTitleIcon{width:18px!important;height:18px!important}

/* TOP DAMAGE — larger real tank renders and readable rows. */
body.homePageActive .approvedHomeDashboard .damagePanel .damageList{
  min-height:270px!important;
  height:270px!important;
  max-height:270px!important;
}
body.homePageActive .approvedHomeDashboard .damagePanel .damageRow,
body.homePageActive .damageRow{
  min-height:54px!important;
  height:54px!important;
  max-height:54px!important;
  grid-template-columns:29px 74px minmax(0,1fr) 78px 68px!important;
  gap:8px!important;
  padding:0 3px!important;
}
body.homePageActive .damagePlace{
  width:23px!important;
  height:23px!important;
  font-size:9px!important;
}
body.homePageActive .damageTankThumb{
  width:72px!important;
  height:43px!important;
}
body.homePageActive .damageTankThumb img{
  width:72px!important;
  height:43px!important;
  filter:brightness(1.13) contrast(1.02) drop-shadow(0 6px 6px rgba(0,0,0,.48))!important;
}
body.homePageActive .damageRow>strong{
  font-size:10.5px!important;
  line-height:1.05!important;
}
body.homePageActive .damageRow>strong small{font-size:6.5px!important;margin-top:3px!important}
body.homePageActive .damageRow>b{font-size:13px!important}
body.homePageActive .damageRow>b small{font-size:5.5px!important}
body.homePageActive .damageOpen{
  height:29px!important;
  font-size:7.5px!important;
}

/* LATEST — preserve v108 hard-fix, scale rows from 74 to 88px. */
body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid{
  grid-template-rows:repeat(3,88px)!important;
  grid-auto-rows:88px!important;
  gap:7px!important;
  padding:7px 0 0!important;
  min-height:278px!important;
  height:278px!important;
  max-height:278px!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid > .latestCard.latestReplayRow,
body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid > .latestCard.latestReplayRow:has(.latestAwards){
  grid-template-columns:150px minmax(0,1fr) 190px 108px!important;
  grid-template-rows:88px!important;
  min-height:88px!important;
  height:88px!important;
  max-height:88px!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestArt{
  min-height:88px!important;
  height:88px!important;
  max-height:88px!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestArt>span{
  top:6px!important;
  left:6px!important;
  font-size:6.5px!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestArt img{
  width:88%!important;
  height:96%!important;
  right:-2px!important;
  bottom:-7px!important;
  filter:brightness(1.11) contrast(1.02) drop-shadow(0 9px 8px rgba(0,0,0,.56))!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestBody{
  min-height:88px!important;
  height:88px!important;
  max-height:88px!important;
  padding:10px 11px 7px!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestBody>strong{
  font-size:11.5px!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestBody>small{
  font-size:7.5px!important;
  margin:3px 0 5px!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestAwards,
body.homePageActive .approvedHomeDashboard .latestPanel .latestCard:has(.latestAwards) .latestAwards{
  min-height:21px!important;
  height:21px!important;
  max-height:21px!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestAwards .cardAwardIcon{
  width:20px!important;
  height:20px!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestAwards img{
  max-width:20px!important;
  max-height:20px!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestStats{
  min-height:88px!important;
  height:88px!important;
  max-height:88px!important;
  padding:9px 6px!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestStats b{font-size:12px!important}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestStats span{font-size:5.5px!important}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestOpen{
  height:31px!important;
  max-height:31px!important;
  margin:0 8px!important;
  font-size:7.5px!important;
}

/* POPULAR TANKS — tank art primary, green bars secondary. */
body.homePageActive .approvedHomeDashboard .popularPanel .popularList{
  min-height:270px!important;
  height:270px!important;
  max-height:270px!important;
  padding-top:3px!important;
}
body.homePageActive .approvedHomeDashboard .popularPanel .popularRow,
body.homePageActive .popularRow{
  min-height:54px!important;
  height:54px!important;
  max-height:54px!important;
  grid-template-columns:20px 82px minmax(0,1fr) auto 34px!important;
  gap:7px!important;
  padding:0 3px!important;
}
body.homePageActive .popularNum{font-size:8px!important}
body.homePageActive .popularTankIcon{
  width:80px!important;
  height:46px!important;
}
body.homePageActive .popularTankIcon img{
  width:80px!important;
  height:46px!important;
  filter:brightness(1.12) contrast(1.02) drop-shadow(0 6px 6px rgba(0,0,0,.48))!important;
}
body.homePageActive .popularRow strong{font-size:10.5px!important}
body.homePageActive .popularRow>b{font-size:10px!important}
body.homePageActive .popularRow>b small{font-size:6px!important}
body.homePageActive .popularBars{
  width:29px!important;
  height:22px!important;
  gap:2px!important;
}
body.homePageActive .popularBars i{width:3px!important}

/* Footer links inside each HOME panel. */
body.homePageActive .approvedHomeDashboard .homePanelFooterLink{
  height:34px!important;
  min-height:34px!important;
  max-height:34px!important;
  margin-top:6px!important;
  font-size:8.5px!important;
}

/* BENEFITS — same canvas, bigger icons and copy. */
body.homePageActive .approvedHomeFeatures{
  width:min(var(--home-canvas),calc(100% - 44px))!important;
  margin:12px auto 22px!important;
  gap:12px!important;
}
body.homePageActive .approvedHomeFeatures>div{
  min-height:94px!important;
  padding:15px 17px!important;
  grid-template-columns:60px 1fr!important;
  gap:13px!important;
  border-radius:7px!important;
}
body.homePageActive .approvedHomeFeatures .featureIcon{
  width:54px!important;
  height:54px!important;
}
body.homePageActive .approvedHomeFeatures .homeFeatureHudIcon{
  width:40px!important;
  height:40px!important;
}
body.homePageActive .approvedHomeFeatures strong{
  font-size:11.5px!important;
  margin-bottom:5px!important;
}
body.homePageActive .approvedHomeFeatures p{
  font-size:8px!important;
  line-height:1.42!important;
}

/* Preserve responsive breakpoints. The large-scale pass is intentionally
   desktop-first and falls back toward v108 proportions below ~1500 CSS px. */
@media(max-width:1500px){
  body.homePageActive{--home-canvas:1380px!important}
  body.homePageActive .homeApprovedHero{height:450px!important;min-height:450px!important}
  body.homePageActive .homeApprovedHero .heroInner{grid-template-columns:minmax(0,1fr) 510px!important;gap:34px!important}
  body.homePageActive .homeApprovedHero .heroCopy{width:650px!important;max-width:650px!important;padding-top:46px!important}
  body.homePageActive .homeApprovedHero h1 span{font-size:59px!important}
  body.homePageActive .homeApprovedHero h1 em{font-size:66px!important}
  body.homePageActive .homeApprovedHero p{font-size:13.5px!important}
  body.homePageActive .heroMetrics{width:535px!important}
  body.homePageActive .heroMetrics>div{height:56px!important;min-height:56px!important}
  body.homePageActive .topBattleFeature,body.homePageActive .topBattleFeatureCopy{min-height:285px!important}
  body.homePageActive .approvedHomeDashboard{grid-template-columns:.90fr 1.25fr .90fr!important;gap:14px!important}
  body.homePageActive .approvedHomeDashboard > .homePanel{min-height:315px!important}
  body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid{grid-template-rows:repeat(3,74px)!important;grid-auto-rows:74px!important;min-height:234px!important;height:234px!important;max-height:234px!important;gap:6px!important}
  body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid > .latestCard.latestReplayRow,
  body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid > .latestCard.latestReplayRow:has(.latestAwards){grid-template-columns:118px minmax(0,1fr) 164px 92px!important;grid-template-rows:74px!important;min-height:74px!important;height:74px!important;max-height:74px!important}
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestArt,
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestBody,
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestStats{min-height:74px!important;height:74px!important;max-height:74px!important}
  body.homePageActive .approvedHomeDashboard .damagePanel .damageList,
  body.homePageActive .approvedHomeDashboard .popularPanel .popularList{min-height:225px!important;height:225px!important;max-height:225px!important}
  body.homePageActive .approvedHomeDashboard .damagePanel .damageRow,
  body.homePageActive .approvedHomeDashboard .popularPanel .popularRow{min-height:45px!important;height:45px!important;max-height:45px!important}
}


/* ========================================================================== */
/* v0.3.5.110 — HOME APPROVED MOCKUP PROPORTION BALANCE HARD FIX             */
/* Exact reference: user-approved HOME mockup. HOME only.                    */
/* ========================================================================== */

/* The mockup is almost edge-to-edge. Use viewport-relative width so browser
   zoom does not collapse HOME into a small centered island. */
body.homePageActive{--home-canvas:min(2400px,calc(100vw - 48px))!important}

body.homePageActive .homeApprovedHero{
  height:455px!important;
  min-height:455px!important;
}
body.homePageActive .homeApprovedHero .heroBackdrop{
  background-size:cover!important;
  background-position:58% 50%!important;
  filter:saturate(.78) contrast(1.06) brightness(.70)!important;
}
body.homePageActive .homeApprovedHero:before{
  background:linear-gradient(90deg,rgba(3,8,10,.94) 0%,rgba(3,8,10,.85) 24%,rgba(3,8,10,.48) 48%,rgba(3,8,10,.10) 72%,rgba(3,8,10,.04) 100%)!important;
}
body.homePageActive .homeApprovedHero .heroInner{
  width:var(--home-canvas)!important;
  grid-template-columns:minmax(0,1fr) minmax(520px,36%)!important;
  gap:42px!important;
}
body.homePageActive .homeApprovedHero .heroCopy{
  width:min(780px,100%)!important;
  max-width:780px!important;
  padding:38px 0 0 24px!important;
}
body.homePageActive .homeApprovedHero .heroCopy .eyebrow{
  font-size:9px!important;
  letter-spacing:.18em!important;
}
body.homePageActive .homeApprovedHero h1{margin:13px 0 13px!important;max-width:820px!important}
body.homePageActive .homeApprovedHero h1 span{font-size:72px!important;line-height:.92!important}
body.homePageActive .homeApprovedHero h1 em{font-size:78px!important;line-height:.90!important}
body.homePageActive .homeApprovedHero p{font-size:15px!important;line-height:1.52!important;max-width:610px!important}
body.homePageActive .homeApprovedHero .heroButtons{margin-top:18px!important;gap:12px!important}
body.homePageActive .homeApprovedHero .button{height:46px!important;padding:0 20px!important;font-size:11px!important}
body.homePageActive .buttonHudIcon{width:19px!important;height:19px!important}

/* KPI cards match the mockup: true drawn icons, not text/symbol approximations. */
body.homePageActive .heroMetrics{width:650px!important;gap:10px!important;margin-top:15px!important}
body.homePageActive .heroMetrics>div{height:58px!important;min-height:58px!important;padding:8px 12px!important;border-radius:7px!important}
body.homePageActive .metricIcon{width:34px!important;height:34px!important;color:#f1f3f3!important}
body.homePageActive .metricIcon svg{display:none!important}
body.homePageActive .mockMetricGlyph{display:block;width:28px;height:28px;background:currentColor;mask:var(--metric-glyph) center/contain no-repeat;-webkit-mask:var(--metric-glyph) center/contain no-repeat}
body.homePageActive .heroMetrics strong{font-size:21px!important}
body.homePageActive .heroMetrics small{font-size:7px!important}

/* BEST BATTLE: scale and ratio from approved mockup. */
body.homePageActive .approvedTopBattle{margin-top:14px!important;padding:10px!important;border-radius:9px!important}
body.homePageActive .topBattleHeader{height:34px!important;padding:0 7px 7px!important;font-size:12px!important}
body.homePageActive .topBattleHeaderIcon{width:20px!important;height:20px!important;color:#fff!important}
body.homePageActive .topBattleFeature{min-height:320px!important;margin-top:8px!important;border-radius:7px!important}
body.homePageActive .topBattleFeatureCopy{width:56%!important;min-height:320px!important;padding:15px 14px 13px!important}
body.homePageActive .topRegionBadge{height:27px!important;min-width:35px!important;font-size:8px!important}
body.homePageActive .topBattleFeature h3{font-size:20px!important;margin:9px 0 2px!important}
body.homePageActive .topBattleFeature small{font-size:10px!important}
body.homePageActive .topBattleFeature .topBattleDamage{margin-top:13px!important}
body.homePageActive .topBattleFeature .topBattleDamage strong{font-size:50px!important}
body.homePageActive .topBattleFeature .topBattleDamage span{font-size:8px!important}
body.homePageActive .topBattleCombat{margin-top:13px!important;padding-top:11px!important;gap:20px!important}
body.homePageActive .topBattleCombat>div:first-child b{font-size:24px!important}
body.homePageActive .topBattleMastery img{width:36px!important;height:36px!important}
body.homePageActive .topBattlePlayer{height:38px!important;grid-template-columns:27px 1fr auto!important}
body.homePageActive .topBattlePlayerIcon{width:22px!important;height:22px!important}
body.homePageActive .topBattleFeature .topBattleButton{height:37px!important;font-size:8px!important}
body.homePageActive .topBattleTankRender{right:-2%!important;bottom:0!important;width:61%!important;height:86%!important;filter:brightness(1.18) contrast(1.04) saturate(.95) drop-shadow(0 16px 13px rgba(0,0,0,.48))!important}

/* QUICK FILTERS: same relative width/spacing as the supplied mockup. */
body.homePageActive .homeQuickFilters{width:var(--home-canvas)!important;height:58px!important;gap:10px!important;padding-top:0!important}
body.homePageActive .homeQuickFilter{height:38px!important;min-width:124px!important;padding:0 18px!important;gap:9px!important;font-size:10px!important;border-radius:6px!important}
body.homePageActive .homeQuickIcon{width:19px!important;height:19px!important}

/* MAIN 3-COLUMN BLOCK: exact visual ratio from mockup, no horizontal flattening. */
body.homePageActive .approvedHomeDashboard{
  width:var(--home-canvas)!important;
  margin:10px auto 0!important;
  grid-template-columns:.92fr 1.24fr .96fr!important;
  gap:17px!important;
  align-items:start!important;
}
body.homePageActive .approvedHomeDashboard > .homePanel,
body.homePageActive .approvedHomeDashboard > .damagePanel,
body.homePageActive .approvedHomeDashboard > .latestPanel,
body.homePageActive .approvedHomeDashboard > .popularPanel{
  min-height:0!important;
  height:330px!important;
  max-height:330px!important;
  padding:12px 13px 10px!important;
  border-radius:7px!important;
  align-self:start!important;
}
body.homePageActive .approvedHomeDashboard .panelTitle{height:36px!important;padding:0 3px 7px!important}
body.homePageActive .approvedHomeDashboard .panelTitle strong{font-size:11px!important}
body.homePageActive .homePanelTitleIcon{width:19px!important;height:19px!important;color:#f1f3f3!important}
body.homePageActive .damagePanel .homePanelTitleIcon{color:#ff8c38!important}

/* Damage top-5. */
body.homePageActive .approvedHomeDashboard .damagePanel .damageList{height:235px!important;min-height:235px!important;max-height:235px!important}
body.homePageActive .approvedHomeDashboard .damagePanel .damageRow,
body.homePageActive .damageRow{height:47px!important;min-height:47px!important;max-height:47px!important;grid-template-columns:29px 68px minmax(0,1fr) 72px 66px!important;gap:7px!important}
body.homePageActive .damagePlace{width:23px!important;height:23px!important;font-size:9px!important}
body.homePageActive .damageTankThumb{width:66px!important;height:40px!important}
body.homePageActive .damageTankThumb img{width:66px!important;height:40px!important}
body.homePageActive .damageRow>strong{font-size:10.5px!important}
body.homePageActive .damageRow>strong small{font-size:6.2px!important}
body.homePageActive .damageRow>b{font-size:12.5px!important}
body.homePageActive .damageOpen{height:28px!important;font-size:7.3px!important}

/* Latest rows: 3 compact rows, same visual density as mockup. */
body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid{grid-template-rows:repeat(3,76px)!important;grid-auto-rows:76px!important;gap:5px!important;padding:5px 0 0!important;height:238px!important;min-height:238px!important;max-height:238px!important}
body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid > .latestCard.latestReplayRow,
body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid > .latestCard.latestReplayRow:has(.latestAwards){grid-template-columns:130px minmax(0,1fr) 170px 96px!important;grid-template-rows:76px!important;height:76px!important;min-height:76px!important;max-height:76px!important}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestArt,
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestBody,
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestStats{height:76px!important;min-height:76px!important;max-height:76px!important}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestBody{padding:8px 9px 5px!important}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestBody>strong{font-size:10.8px!important}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestBody>small{font-size:7px!important;margin:2px 0 4px!important}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestAwards,
body.homePageActive .approvedHomeDashboard .latestPanel .latestCard:has(.latestAwards) .latestAwards{height:19px!important;min-height:19px!important;max-height:19px!important}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestAwards .cardAwardIcon{width:18px!important;height:18px!important}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestAwards img{max-width:18px!important;max-height:18px!important}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestStats{padding:8px 5px!important}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestStats b{font-size:11.5px!important}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestOpen{height:29px!important;margin:0 7px!important;font-size:7px!important}

/* Popular tanks. */
body.homePageActive .approvedHomeDashboard .popularPanel .popularList{height:235px!important;min-height:235px!important;max-height:235px!important;padding-top:0!important}
body.homePageActive .approvedHomeDashboard .popularPanel .popularRow,
body.homePageActive .popularRow{height:47px!important;min-height:47px!important;max-height:47px!important;grid-template-columns:20px 75px minmax(0,1fr) auto 31px!important;gap:7px!important}
body.homePageActive .popularTankIcon{width:73px!important;height:42px!important}
body.homePageActive .popularTankIcon img{width:73px!important;height:42px!important}
body.homePageActive .popularRow strong{font-size:10.5px!important}
body.homePageActive .popularRow>b{font-size:9.8px!important}
body.homePageActive .popularBars{width:27px!important;height:21px!important}

body.homePageActive .approvedHomeDashboard .homePanelFooterLink{height:31px!important;min-height:31px!important;max-height:31px!important;margin-top:4px!important;font-size:8px!important}

/* Bottom benefit cards: proportions and hand-redrawn SVG icons from mockup. */
body.homePageActive .approvedHomeFeatures{width:var(--home-canvas)!important;margin:10px auto 18px!important;gap:12px!important}
body.homePageActive .approvedHomeFeatures>div{min-height:82px!important;padding:12px 15px!important;grid-template-columns:56px 1fr!important;gap:12px!important;border-radius:7px!important}
body.homePageActive .approvedHomeFeatures .featureIcon{width:52px!important;height:52px!important;border:0!important;background:transparent!important;color:#a8e620!important}
body.homePageActive .approvedHomeFeatures .homeFeatureHudIcon{width:46px!important;height:46px!important}
body.homePageActive .approvedHomeFeatures strong{font-size:11px!important;margin-bottom:4px!important}
body.homePageActive .approvedHomeFeatures p{font-size:8px!important;line-height:1.38!important}

/* Do not let v109's 1500px fallback collapse the approved viewport-relative layout. */
@media(max-width:1500px){
  body.homePageActive{--home-canvas:min(2400px,calc(100vw - 32px))!important}
}
@media(max-width:1050px){
  body.homePageActive{--home-canvas:calc(100vw - 28px)!important}
  body.homePageActive .homeApprovedHero .heroInner{grid-template-columns:minmax(0,1fr) 430px!important;gap:24px!important}
  body.homePageActive .homeApprovedHero h1 span{font-size:60px!important}
  body.homePageActive .homeApprovedHero h1 em{font-size:66px!important}
  body.homePageActive .approvedHomeDashboard{grid-template-columns:1fr!important}
  body.homePageActive .approvedHomeDashboard > .homePanel{height:auto!important;max-height:none!important}
}


/* ========================================================================== */
/* v0.3.5.111 — HOME REPLAYS CANVAS WIDTH PARITY HARD FIX                    */
/* HOME only: lock the approved HOME mockup to the exact /replays canvas.     */
/* ========================================================================== */

/* /replays final working canvas is 1280px. HOME must use the same width. */
body.homePageActive{
  --home-canvas:min(1280px,calc(100% - 40px))!important;
}

/* Hero itself is now a centered 1280px working banner, like /replays. */
body.homePageActive .homeApprovedHero{
  width:var(--home-canvas)!important;
  max-width:1280px!important;
  margin:14px auto 0!important;
  height:430px!important;
  min-height:430px!important;
  border-radius:9px!important;
  overflow:hidden!important;
  border:1px solid rgba(202,217,211,.13)!important;
}
body.homePageActive .homeApprovedHero .heroInner{
  width:100%!important;
  max-width:none!important;
  padding:0 24px!important;
  grid-template-columns:minmax(0,1fr) 410px!important;
  gap:28px!important;
}
body.homePageActive .homeApprovedHero .heroCopy{
  width:min(650px,100%)!important;
  max-width:650px!important;
  padding:38px 0 0!important;
}
body.homePageActive .homeApprovedHero h1{max-width:680px!important}
body.homePageActive .homeApprovedHero h1 span{font-size:58px!important;line-height:.94!important}
body.homePageActive .homeApprovedHero h1 em{font-size:64px!important;line-height:.91!important}
body.homePageActive .homeApprovedHero p{font-size:13px!important;max-width:530px!important}
body.homePageActive .homeApprovedHero .button{height:43px!important;padding:0 18px!important;font-size:10px!important}
body.homePageActive .heroMetrics{width:535px!important;gap:9px!important;margin-top:14px!important}
body.homePageActive .heroMetrics>div{height:55px!important;min-height:55px!important;padding:7px 10px!important}
body.homePageActive .metricIcon{width:31px!important;height:31px!important}
body.homePageActive .mockMetricGlyph{width:26px!important;height:26px!important}
body.homePageActive .heroMetrics strong{font-size:19px!important}

/* Best battle resized to fit the exact replay canvas without squeezing copy. */
body.homePageActive .approvedTopBattle{margin-top:16px!important;padding:9px!important}
body.homePageActive .topBattleHeader{height:31px!important;font-size:10.5px!important}
body.homePageActive .topBattleFeature{min-height:292px!important}
body.homePageActive .topBattleFeatureCopy{width:57%!important;min-height:292px!important;padding:13px 12px 11px!important}
body.homePageActive .topBattleFeature h3{font-size:18px!important}
body.homePageActive .topBattleFeature .topBattleDamage strong{font-size:43px!important}
body.homePageActive .topBattleCombat>div:first-child b{font-size:21px!important}
body.homePageActive .topBattleMastery img{width:32px!important;height:32px!important}
body.homePageActive .topBattleTankRender{right:-3%!important;width:60%!important;height:84%!important}

/* Every HOME band now has the same width as /replays. */
body.homePageActive .homeQuickFilters,
body.homePageActive .approvedHomeDashboard,
body.homePageActive .approvedHomeFeatures{
  width:var(--home-canvas)!important;
  max-width:1280px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

body.homePageActive .homeQuickFilters{height:56px!important;gap:8px!important}
body.homePageActive .homeQuickFilter{height:36px!important;min-width:112px!important;padding:0 15px!important;font-size:9px!important}

/* Preserve mockup proportions inside the 1280px canvas. */
body.homePageActive .approvedHomeDashboard{
  grid-template-columns:.92fr 1.22fr .94fr!important;
  gap:12px!important;
  margin-top:9px!important;
}
body.homePageActive .approvedHomeDashboard > .homePanel,
body.homePageActive .approvedHomeDashboard > .damagePanel,
body.homePageActive .approvedHomeDashboard > .latestPanel,
body.homePageActive .approvedHomeDashboard > .popularPanel{
  height:318px!important;
  max-height:318px!important;
  padding:11px 11px 9px!important;
}
body.homePageActive .approvedHomeDashboard .panelTitle{height:34px!important}
body.homePageActive .approvedHomeDashboard .panelTitle strong{font-size:10px!important}

body.homePageActive .approvedHomeDashboard .damagePanel .damageList,
body.homePageActive .approvedHomeDashboard .popularPanel .popularList{
  height:225px!important;min-height:225px!important;max-height:225px!important;
}
body.homePageActive .approvedHomeDashboard .damagePanel .damageRow,
body.homePageActive .approvedHomeDashboard .popularPanel .popularRow{
  height:45px!important;min-height:45px!important;max-height:45px!important;
}
body.homePageActive .damageRow{grid-template-columns:27px 61px minmax(0,1fr) 65px 60px!important}
body.homePageActive .damageTankThumb,
body.homePageActive .damageTankThumb img{width:59px!important;height:36px!important}
body.homePageActive .damageRow>strong{font-size:9.8px!important}
body.homePageActive .damageRow>b{font-size:11.5px!important}
body.homePageActive .damageOpen{height:27px!important;font-size:6.8px!important}

body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid{
  grid-template-rows:repeat(3,72px)!important;
  grid-auto-rows:72px!important;
  height:226px!important;min-height:226px!important;max-height:226px!important;
  gap:5px!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid > .latestCard.latestReplayRow,
body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid > .latestCard.latestReplayRow:has(.latestAwards){
  grid-template-columns:116px minmax(0,1fr) 148px 88px!important;
  grid-template-rows:72px!important;
  height:72px!important;min-height:72px!important;max-height:72px!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestArt,
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestBody,
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestStats{
  height:72px!important;min-height:72px!important;max-height:72px!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestBody>strong{font-size:10px!important}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestStats b{font-size:10.5px!important}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestOpen{height:27px!important;font-size:6.5px!important}

body.homePageActive .popularRow{grid-template-columns:18px 67px minmax(0,1fr) auto 29px!important}
body.homePageActive .popularTankIcon,
body.homePageActive .popularTankIcon img{width:65px!important;height:39px!important}
body.homePageActive .popularRow strong{font-size:9.8px!important}
body.homePageActive .popularRow>b{font-size:8.8px!important}

body.homePageActive .approvedHomeFeatures{margin-top:10px!important;margin-bottom:18px!important;gap:9px!important}
body.homePageActive .approvedHomeFeatures>div{min-height:76px!important;padding:10px 12px!important;grid-template-columns:48px 1fr!important;gap:10px!important}
body.homePageActive .approvedHomeFeatures .featureIcon{width:46px!important;height:46px!important}
body.homePageActive .approvedHomeFeatures .homeFeatureHudIcon{width:40px!important;height:40px!important}
body.homePageActive .approvedHomeFeatures strong{font-size:10px!important}
body.homePageActive .approvedHomeFeatures p{font-size:7.5px!important}

/* Match the exact responsive canvas rules used by the /replays page. */
@media(max-width:1320px){
  body.homePageActive{--home-canvas:calc(100% - 28px)!important}
  body.homePageActive .homeApprovedHero{max-width:none!important}
  body.homePageActive .homeQuickFilters,
  body.homePageActive .approvedHomeDashboard,
  body.homePageActive .approvedHomeFeatures{max-width:none!important}
}
@media(max-width:1050px){
  body.homePageActive{--home-canvas:calc(100% - 28px)!important}
  body.homePageActive .homeApprovedHero .heroInner{grid-template-columns:minmax(0,1fr) 380px!important;gap:20px!important}
  body.homePageActive .approvedHomeDashboard{grid-template-columns:1fr!important}
  body.homePageActive .approvedHomeDashboard > .homePanel{height:auto!important;max-height:none!important}
}
@media(max-width:650px){
  body.homePageActive{--home-canvas:calc(100% - 20px)!important}
  body.homePageActive .homeApprovedHero{margin-top:10px!important}
}


/* ==========================================================================
   v0.3.5.112 — HOME TOP BATTLE CARD MICRO POLISH
   Only HOME top battle card. Lift top badge, improve vertical rhythm,
   give more air to the premium card, keep overall page width untouched.
   ========================================================================== */
body.homePageActive .approvedTopBattle{padding:10px!important;border-radius:10px!important;background:rgba(8,18,22,.84)!important;border-color:rgba(161,184,185,.34)!important}
body.homePageActive .topBattleHeader{height:32px!important;gap:8px!important;padding:0 8px 8px!important;font-size:11px!important}
body.homePageActive .topBattleHeaderIcon{width:18px!important;height:18px!important}
body.homePageActive .topBattleFeature{min-height:304px!important;margin-top:8px!important;border-radius:8px!important;background-position:center center!important}
body.homePageActive .topBattleFeature:after{background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 42%,rgba(3,9,12,.42))!important}
body.homePageActive .topBattleFeatureCopy{width:57%!important;min-height:304px!important;padding:40px 13px 12px!important}
body.homePageActive .topRegionBadge{position:absolute!important;top:10px!important;left:13px!important;min-width:34px!important;height:25px!important;padding:0 8px!important;border-radius:4px!important;font-size:8px!important;line-height:1!important;z-index:4!important}
body.homePageActive .topBattleFeature h3{margin:0 0 3px!important;font-size:19px!important;line-height:1.02!important}
body.homePageActive .topBattleFeature small{display:block!important;font-size:9px!important;line-height:1.2!important;color:#9da9a5!important}
body.homePageActive .topBattleFeature .topBattleDamage{margin-top:14px!important}
body.homePageActive .topBattleFeature .topBattleDamage strong{font-size:46px!important;line-height:.92!important;letter-spacing:-.04em!important}
body.homePageActive .topBattleFeature .topBattleDamage span{font-size:8px!important;margin-top:5px!important;color:#f4f6f4!important}
body.homePageActive .topBattleCombat{margin-top:13px!important;padding-top:11px!important;gap:18px!important}
body.homePageActive .topBattleCombat>div:first-child b{font-size:22px!important;line-height:1!important}
body.homePageActive .topBattleCombat>div:first-child span{font-size:7px!important}
body.homePageActive .topBattleMastery img{width:34px!important;height:34px!important}
body.homePageActive .topBattleMastery span{font-size:9px!important}
body.homePageActive .topBattlePlayer{height:38px!important;grid-template-columns:26px 1fr auto!important;gap:8px!important;padding-top:8px!important}
body.homePageActive .topBattlePlayerIcon{width:21px!important;height:21px!important}
body.homePageActive .topBattlePlayer b{font-size:9px!important}
body.homePageActive .topBattlePlayer i{font-size:7px!important;padding:3px 6px!important}
body.homePageActive .topBattleFeature .topBattleButton{height:35px!important;margin-top:7px!important;border-radius:4px!important;font-size:8px!important;display:flex!important;align-items:center!important;justify-content:space-between!important}
body.homePageActive .topBattleTankRender{right:-1%!important;bottom:3%!important;width:59%!important;height:81%!important;object-position:right bottom!important;filter:brightness(1.16) contrast(1.04) saturate(.94) drop-shadow(0 15px 12px rgba(0,0,0,.48))!important}


/* =====================================================================
   v0.3.5.113 — HOME TOP BATTLE PREMIUM CARD VISUAL REFINE
   Only the HOME top battle card. Raise region badge, add major medals,
   upgrade premium typography and tighten the card like the approved mockup.
   ===================================================================== */
body.homePageActive .approvedTopBattle{
  padding:10px!important;
  border-radius:11px!important;
  background:linear-gradient(160deg,rgba(18,30,33,.84),rgba(7,18,22,.74))!important;
  border-color:rgba(188,205,205,.36)!important;
  box-shadow:0 22px 58px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05)!important;
}
body.homePageActive .topBattleHeader{
  height:30px!important;
  align-items:center!important;
  gap:7px!important;
  padding:0 3px 7px!important;
}
body.homePageActive .topBattleHeader strong{
  font-size:11px!important;
  color:#f0f4f2!important;
  letter-spacing:.01em!important;
}
body.homePageActive .topBattleHeaderIcon{width:18px!important;height:18px!important;opacity:.98!important}
body.homePageActive .topBattleFeature{
  min-height:294px!important;
  border-radius:9px!important;
  background-position:center 44%!important;
  border:1px solid rgba(186,199,198,.28)!important;
}
body.homePageActive .topBattleFeature:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(4,10,12,.16),transparent 36%,rgba(255,210,90,.035) 64%,transparent 100%);
  pointer-events:none;z-index:1;
}
body.homePageActive .topBattleFeatureCopy{
  width:58%!important;
  min-height:294px!important;
  padding:28px 14px 12px!important;
  gap:0!important;
}
body.homePageActive .topRegionBadge{
  top:8px!important;left:12px!important;
  min-width:32px!important;height:23px!important;
  padding:0 7px!important;
  border-radius:4px!important;
  font-size:8px!important;
  background:rgba(22,39,63,.88)!important;
  border:1px solid rgba(111,145,189,.34)!important;
  box-shadow:0 6px 16px rgba(0,0,0,.25)!important;
}
body.homePageActive .topBattleFeature h3{
  margin:12px 0 2px!important;
  font-size:17px!important;
  line-height:1.03!important;
  color:#f4f7f5!important;
  text-shadow:0 2px 14px rgba(0,0,0,.25)!important;
}
body.homePageActive .topBattleFeature small{
  font-size:8px!important;
  color:#a8b3af!important;
  letter-spacing:.015em!important;
}
body.homePageActive .topBattleFeature .topBattleDamage{
  margin-top:10px!important;
  text-align:left!important;
}
body.homePageActive .topBattleFeature .topBattleDamage strong{
  display:block!important;
  font-family:Inter, "Segoe UI", Arial, sans-serif!important;
  font-weight:800!important;
  font-size:50px!important;
  line-height:.88!important;
  letter-spacing:-.06em!important;
  color:#f0bf44!important;
  text-shadow:0 0 16px rgba(228,184,64,.14),0 2px 16px rgba(0,0,0,.28)!important;
  font-variant-numeric:tabular-nums lining-nums!important;
}
body.homePageActive .topBattleFeature .topBattleDamage span{
  font-size:7px!important;
  color:#f1f4f2!important;
  letter-spacing:.16em!important;
  margin-top:4px!important;
}
body.homePageActive .topBattleCombat{
  margin-top:9px!important;
  padding-top:9px!important;
  gap:14px!important;
  border-top:1px solid rgba(167,184,180,.16)!important;
}
body.homePageActive .topBattleCombat > div:first-child b{
  font-size:19px!important;
  color:#f6f8f7!important;
}
body.homePageActive .topBattleCombat > div:first-child span{
  font-size:6px!important;letter-spacing:.14em!important;
}
body.homePageActive .topBattleMastery{gap:6px!important}
body.homePageActive .topBattleMastery img{width:31px!important;height:31px!important}
body.homePageActive .topBattleMastery span{font-size:8px!important;color:#ead08a!important}
body.homePageActive .topBattleAwardRow{
  display:flex!important;align-items:center!important;gap:5px!important;
  min-height:34px!important;margin-top:8px!important;padding:6px 0 7px!important;
  border-top:1px solid rgba(162,176,171,.12)!important;border-bottom:1px solid rgba(162,176,171,.10)!important;
}
body.homePageActive .topBattleAward{
  width:28px!important;height:28px!important;display:grid!important;place-items:center!important;
  border-radius:50%!important;border:1px solid rgba(226,183,72,.18)!important;
  background:radial-gradient(circle at 50% 32%,rgba(255,215,100,.13),rgba(10,15,15,.22) 70%)!important;
  box-shadow:0 4px 12px rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.01) inset!important;
}
body.homePageActive .topBattleAward img{width:22px!important;height:22px!important;object-fit:contain!important;filter:drop-shadow(0 4px 6px rgba(0,0,0,.34))!important}
body.homePageActive .topBattleAward.tier-legendary,
body.homePageActive .topBattleAward.tier-epic{border-color:rgba(236,196,86,.36)!important;background:radial-gradient(circle at 50% 30%,rgba(255,218,120,.20),rgba(14,18,17,.24) 68%)!important}
body.homePageActive .topBattlePlayer{
  height:34px!important;
  grid-template-columns:20px 1fr auto!important;
  gap:7px!important;
  padding-top:7px!important;
}
body.homePageActive .topBattlePlayerIcon{width:18px!important;height:18px!important}
body.homePageActive .topBattlePlayer b{font-size:8.5px!important;color:#f0f3f2!important}
body.homePageActive .topBattlePlayer i{font-size:6px!important;padding:2px 5px!important}
body.homePageActive .topBattleFeature .topBattleButton{
  height:31px!important;
  margin-top:6px!important;
  border-radius:5px!important;
  font-size:7px!important;
  background:linear-gradient(180deg,rgba(17,37,31,.82),rgba(11,25,21,.72))!important;
  border-color:rgba(168,229,26,.42)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
}
body.homePageActive .topBattleFeature .topBattleButton span{font-size:10px!important}
body.homePageActive .topBattleTankRender{
  right:-2%!important;
  bottom:4%!important;
  width:58%!important;
  height:79%!important;
  object-position:right bottom!important;
  filter:brightness(1.13) contrast(1.04) saturate(.94) drop-shadow(0 16px 14px rgba(0,0,0,.52))!important;
}


/* =====================================================================
   v0.3.5.114 — HOME TOP BATTLE TANK LIFT + PREMIUM TYPE FIX
   Only HOME top battle card. Lift tank render, refine premium damage type,
   compact awards row, raise lower controls and make CTA vivid green.
   ===================================================================== */
body.homePageActive .topBattleFeature .topBattleDamage strong{
  font-family:"Bahnschrift SemiCondensed","Bahnschrift","Arial Narrow",Inter,"Segoe UI",Arial,sans-serif!important;
  font-weight:600!important;
  font-size:47px!important;
  line-height:.90!important;
  letter-spacing:-.035em!important;
  color:#f3c657!important;
  text-shadow:0 0 7px rgba(244,197,79,.20),0 0 20px rgba(230,180,61,.11),0 2px 10px rgba(0,0,0,.34)!important;
  font-variant-numeric:tabular-nums lining-nums!important;
}
body.homePageActive .topBattleFeature .topBattleDamage span{
  color:#e8efeb!important;
  opacity:.88!important;
  letter-spacing:.18em!important;
}
body.homePageActive .topBattleAwardRow{
  min-height:30px!important;
  margin-top:6px!important;
  padding:4px 0 5px!important;
  gap:4px!important;
}
body.homePageActive .topBattleAward{
  width:25px!important;
  height:25px!important;
  border-color:rgba(226,183,72,.20)!important;
  box-shadow:0 3px 9px rgba(0,0,0,.16)!important;
}
body.homePageActive .topBattleAward img{
  width:20px!important;
  height:20px!important;
}
body.homePageActive .topBattlePlayer{
  height:31px!important;
  padding-top:5px!important;
}
body.homePageActive .topBattleFeature .topBattleButton{
  height:34px!important;
  margin-top:5px!important;
  padding:0 12px!important;
  border-radius:6px!important;
  border:1px solid #b9f13a!important;
  background:linear-gradient(180deg,#aeea2b 0%,#8dcc16 52%,#72ab0c 100%)!important;
  color:#102006!important;
  font-size:7.5px!important;
  font-weight:950!important;
  letter-spacing:.035em!important;
  text-shadow:0 1px 0 rgba(255,255,255,.24)!important;
  box-shadow:0 0 14px rgba(167,229,37,.18),inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(36,78,3,.35)!important;
  transition:filter .16s ease,box-shadow .16s ease,transform .16s ease!important;
}
body.homePageActive .topBattleFeature .topBattleButton span{
  color:#173205!important;
  font-size:11px!important;
  font-weight:950!important;
}
body.homePageActive .topBattleFeature .topBattleButton:hover{
  filter:brightness(1.08) saturate(1.05)!important;
  transform:translateY(-1px)!important;
  border-color:#cbff57!important;
  box-shadow:0 0 22px rgba(174,236,40,.27),inset 0 1px 0 rgba(255,255,255,.48),0 5px 14px rgba(0,0,0,.20)!important;
}
body.homePageActive .topBattleTankRender{
  right:-1%!important;
  bottom:14%!important;
  width:56%!important;
  height:74%!important;
  object-position:right bottom!important;
  filter:brightness(1.16) contrast(1.05) saturate(.96) drop-shadow(0 14px 13px rgba(0,0,0,.50))!important;
}


/* =====================================================================
   v0.3.5.115 — HOME TOP BATTLE TANK POSITION + PREMIUM DAMAGE TYPE HARD FIX
   HOME top battle card only. Stronger tank lift, cleaner condensed damage
   typography, lighter medal treatment. Green CTA from v0.3.5.114 unchanged.
   ===================================================================== */
body.homePageActive .topBattleFeature .topBattleDamage strong{
  font-family:"Bahnschrift SemiCondensed","Bahnschrift Condensed","Arial Narrow",Inter,"Segoe UI",Arial,sans-serif!important;
  font-weight:500!important;
  font-size:46px!important;
  line-height:.91!important;
  letter-spacing:-.018em!important;
  color:#f2c454!important;
  font-stretch:condensed!important;
  font-variant-numeric:tabular-nums lining-nums!important;
  font-feature-settings:"tnum" 1,"lnum" 1!important;
  text-shadow:0 0 6px rgba(245,200,83,.24),0 0 16px rgba(224,175,52,.12),0 2px 9px rgba(0,0,0,.34)!important;
}
body.homePageActive .topBattleFeature .topBattleDamage span{
  font-size:6.5px!important;
  letter-spacing:.20em!important;
  opacity:.84!important;
}

/* Main medals: larger real icons, less chrome, no heavy circular badges. */
body.homePageActive .topBattleAwardRow{
  min-height:31px!important;
  margin-top:6px!important;
  padding:4px 0 5px!important;
  gap:6px!important;
  border-top:1px solid rgba(162,176,171,.10)!important;
  border-bottom:1px solid rgba(162,176,171,.08)!important;
}
body.homePageActive .topBattleAward{
  width:28px!important;
  height:28px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body.homePageActive .topBattleAward img{
  width:26px!important;
  height:26px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.42)) drop-shadow(0 0 5px rgba(231,190,75,.10))!important;
}
body.homePageActive .topBattleAward.tier-legendary,
body.homePageActive .topBattleAward.tier-epic{
  border:0!important;
  background:transparent!important;
}
body.homePageActive .topBattleAward.tier-legendary img,
body.homePageActive .topBattleAward.tier-epic img{
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.42)) drop-shadow(0 0 7px rgba(239,196,78,.18))!important;
}

/* Strong lift: actual visible tank sits higher and no longer crowds CTA/player rail. */
body.homePageActive .topBattleTankRender{
  right:0!important;
  bottom:29%!important;
  width:52%!important;
  height:67%!important;
  object-position:right bottom!important;
  filter:brightness(1.15) contrast(1.05) saturate(.96) drop-shadow(0 13px 12px rgba(0,0,0,.48))!important;
}


/* =====================================================================
   v0.3.5.116 — HOME TOP BATTLE PREMIUM FINISH PASS
   Only HOME top battle card. Lift tank almost to the top, place medals
   in the same row with mastery, tighten top area, enlarge nickname and
   keep CTA button as the bottom-most premium green action.
   ===================================================================== */
body.homePageActive .topBattleFeature{overflow:hidden!important}
body.homePageActive .topBattleFeatureCopy{
  width:54%!important;
  min-height:304px!important;
  padding:12px 12px 11px!important;
}
body.homePageActive .topBattleFeature h3{
  margin:10px 0 2px!important;
  font-size:18px!important;
}
body.homePageActive .topBattleFeature small{
  margin-bottom:2px!important;
}
body.homePageActive .topBattleFeature .topBattleDamage{
  margin-top:8px!important;
}
body.homePageActive .topBattleFeature .topBattleDamage strong{
  font-family:Bahnschrift,"Arial Narrow",Arial,sans-serif!important;
  font-weight:700!important;
  font-stretch:condensed!important;
  font-size:48px!important;
  letter-spacing:-.045em!important;
  color:#f4c85a!important;
  background:linear-gradient(180deg,#ffe7a2 0%,#ffd768 32%,#efbb3f 72%,#d79a28 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 0 18px rgba(244,200,90,.14),0 2px 14px rgba(0,0,0,.25)!important;
}
body.homePageActive .topBattleCombat{
  margin-top:9px!important;
  padding-top:8px!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  row-gap:6px!important;
}
body.homePageActive .topBattleKills{display:flex!important;flex-direction:column!important;gap:1px!important;min-width:32px!important}
body.homePageActive .topBattleKills b{font-size:18px!important;line-height:1!important;color:#f6f8f7!important}
body.homePageActive .topBattleKills span{font-size:6px!important;letter-spacing:.14em!important;color:#8fa09d!important}
body.homePageActive .topBattleMastery{gap:5px!important;flex:0 0 auto!important}
body.homePageActive .topBattleMastery img{width:29px!important;height:29px!important}
body.homePageActive .topBattleMastery span{font-size:8px!important;color:#ead08a!important;white-space:nowrap!important}
body.homePageActive .topBattleAwardRow{
  display:inline-flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:4px!important;
  min-height:auto!important;
  margin-top:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
}
body.homePageActive .topBattleAward{
  width:24px!important;height:24px!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  border-radius:0!important;
}
body.homePageActive .topBattleAward img{width:24px!important;height:24px!important;filter:drop-shadow(0 3px 6px rgba(0,0,0,.28))!important}
body.homePageActive .topBattleAward.tier-legendary img,
body.homePageActive .topBattleAward.tier-epic img{width:26px!important;height:26px!important}
body.homePageActive .topBattlePlayer{
  margin-top:auto!important;
  height:36px!important;
  padding-top:7px!important;
  grid-template-columns:18px 1fr auto!important;
  gap:7px!important;
}
body.homePageActive .topBattlePlayerIcon{width:17px!important;height:17px!important}
body.homePageActive .topBattlePlayer b{font-size:10px!important;font-weight:700!important;letter-spacing:.01em!important}
body.homePageActive .topBattleFeature .topBattleButton{
  width:100%!important;
  height:34px!important;
  margin-top:7px!important;
  border-radius:6px!important;
}
body.homePageActive .topBattleTankRender{
  right:-1%!important;
  top:3%!important;
  bottom:auto!important;
  width:56%!important;
  height:76%!important;
  object-position:right top!important;
  filter:brightness(1.12) contrast(1.05) saturate(.95) drop-shadow(0 18px 16px rgba(0,0,0,.54))!important;
}


/* =====================================================================
   v0.3.5.117 — HOME TOP BATTLE CARD ALIGNMENT PREMIUM PASS
   Remove upper EU badge, align footer, bigger bottom region badge, slightly
   narrower upper copy block, larger medals, tighter premium layout.
   ===================================================================== */
body.homePageActive .topRegionBadge{display:none!important}
body.homePageActive .topBattleFeatureCopy{
  width:52%!important;
  min-height:304px!important;
  padding:14px 12px 10px!important;
}
body.homePageActive .topBattleFeature h3{
  margin:18px 0 2px!important;
  font-size:18px!important;
  line-height:1.02!important;
}
body.homePageActive .topBattleFeature small{
  margin-bottom:4px!important;
}
body.homePageActive .topBattleCombat{
  gap:12px!important;
  row-gap:8px!important;
  align-items:center!important;
}
body.homePageActive .topBattleMastery img{width:31px!important;height:31px!important}
body.homePageActive .topBattleMastery span{font-size:8.5px!important}
body.homePageActive .topBattleAwardRow{gap:5px!important}
body.homePageActive .topBattleAward{width:28px!important;height:28px!important}
body.homePageActive .topBattleAward img{width:28px!important;height:28px!important}
body.homePageActive .topBattleAward.tier-legendary img,
body.homePageActive .topBattleAward.tier-epic img{width:30px!important;height:30px!important}
body.homePageActive .topBattleFooter{
  margin-top:auto!important;
  padding-top:8px!important;
  border-top:1px solid rgba(168,183,180,.12)!important;
  display:grid!important;
  grid-template-columns:1fr 146px!important;
  align-items:center!important;
  gap:10px!important;
}
body.homePageActive .topBattlePlayer{
  margin-top:0!important;
  height:34px!important;
  padding-top:0!important;
  border-top:0!important;
  grid-template-columns:16px 1fr auto!important;
  gap:7px!important;
}
body.homePageActive .topBattlePlayerIcon{width:16px!important;height:16px!important}
body.homePageActive .topBattlePlayer b{font-size:10.5px!important;font-weight:800!important}
body.homePageActive .topBattlePlayer i{
  font-size:8px!important;
  min-width:28px!important;
  padding:4px 7px!important;
  border-radius:4px!important;
  border:1px solid rgba(97,136,199,.42)!important;
  background:rgba(33,66,132,.28)!important;
  color:#d9e6ff!important;
  text-align:center!important;
}
body.homePageActive .topBattleFeature .topBattleButton{
  width:146px!important;
  height:32px!important;
  margin-top:0!important;
  justify-self:end!important;
  border-radius:6px!important;
}
body.homePageActive .topBattleTankRender{
  right:0!important;
  top:-4%!important;
  bottom:auto!important;
  width:56%!important;
  height:74%!important;
  object-position:right top!important;
}


/* =====================================================================
   v0.3.5.118 — HOME TOP BATTLE MASTER + MEDALS SINGLE RAIL FINAL DENSE
   Only HOME top battle card. Force Master + key medals into one unbroken
   horizontal rail, keep nickname + EU + CTA aligned on the bottom row,
   reduce card vertical slack and preserve premium composition.
   ===================================================================== */
body.homePageActive .topBattleFeature{
  min-height:282px!important;
}
body.homePageActive .topBattleFeatureCopy{
  width:100%!important;
  min-height:282px!important;
  padding:13px 12px 9px!important;
}
body.homePageActive .topBattleFeature h3,
body.homePageActive .topBattleFeature small,
body.homePageActive .topBattleDamage{
  max-width:49%!important;
}
body.homePageActive .topBattleFeature h3{
  margin:12px 0 2px!important;
}
body.homePageActive .topBattleCombat{
  width:100%!important;
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  margin-top:8px!important;
  padding-top:8px!important;
  flex-wrap:nowrap!important;
}
body.homePageActive .topBattleKills{
  min-width:0!important;
  width:34px!important;
}
body.homePageActive .topBattleAwardsLine{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  flex-wrap:nowrap!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
body.homePageActive .topBattleAwardsLine .topBattleMastery{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
}
body.homePageActive .topBattleAwardsLine .topBattleMastery img{
  width:31px!important;
  height:31px!important;
}
body.homePageActive .topBattleAwardsLine .topBattleMastery span{
  font-size:8.5px!important;
  white-space:nowrap!important;
}
body.homePageActive .topBattleAwardsLine .topBattleAwardRow{
  display:flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  gap:5px!important;
  flex-wrap:nowrap!important;
  white-space:nowrap!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}
body.homePageActive .topBattleAwardsLine .topBattleAward{
  width:29px!important;
  height:29px!important;
  flex:0 0 29px!important;
}
body.homePageActive .topBattleAwardsLine .topBattleAward img{
  width:29px!important;
  height:29px!important;
}
body.homePageActive .topBattleAwardsLine .topBattleAward.tier-legendary img,
body.homePageActive .topBattleAwardsLine .topBattleAward.tier-epic img{
  width:31px!important;
  height:31px!important;
}
body.homePageActive .topBattleFooter{
  margin-top:auto!important;
  padding-top:7px!important;
  grid-template-columns:minmax(0,1fr) 146px!important;
  gap:9px!important;
}
body.homePageActive .topBattlePlayer{
  min-width:0!important;
  grid-template-columns:16px minmax(0,1fr) 32px!important;
}
body.homePageActive .topBattlePlayer b{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:10.5px!important;
}
body.homePageActive .topBattlePlayer i{
  min-width:32px!important;
  height:24px!important;
  display:grid!important;
  place-items:center!important;
  padding:0 7px!important;
  font-size:8px!important;
}
body.homePageActive .topBattleFeature .topBattleButton{
  width:146px!important;
  height:32px!important;
}
body.homePageActive .topBattleTankRender{
  top:-5%!important;
  right:-1%!important;
  width:55%!important;
  height:72%!important;
}


/* =====================================================================
   v0.3.5.119 — HOME TOP BATTLE PREMIUM GLOW + MEDAL HOVER
   Final premium emphasis for the HOME best-battle card only.
   ===================================================================== */
body.homePageActive .approvedTopBattle{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:linear-gradient(145deg,rgba(18,29,30,.91),rgba(7,17,20,.84))!important;
  border:1px solid rgba(226,188,78,.28)!important;
  box-shadow:
    0 22px 58px rgba(0,0,0,.25),
    0 0 22px rgba(218,174,55,.055),
    inset 0 1px 0 rgba(255,238,184,.07)!important;
  animation:topBattlePremiumBreath 5.8s ease-in-out infinite!important;
}
body.homePageActive .approvedTopBattle:before{
  content:""!important;
  position:absolute!important;
  z-index:9!important;
  top:-55%!important;
  bottom:-55%!important;
  left:-38%!important;
  width:26%!important;
  transform:skewX(-18deg)!important;
  background:linear-gradient(90deg,transparent,rgba(255,230,151,.065),rgba(255,245,207,.15),rgba(255,230,151,.055),transparent)!important;
  filter:blur(2px)!important;
  pointer-events:none!important;
  animation:topBattlePremiumSweep 7.2s cubic-bezier(.4,0,.2,1) infinite!important;
}
body.homePageActive .approvedTopBattle:after{
  content:""!important;
  position:absolute!important;
  z-index:8!important;
  inset:1px!important;
  border-radius:9px!important;
  border:1px solid rgba(255,225,132,.055)!important;
  pointer-events:none!important;
}

/* Header is now a slim integrated HUD caption instead of a heavy tab. */
body.homePageActive .topBattleHeader{
  position:relative!important;
  z-index:10!important;
  height:28px!important;
  padding:0 4px 5px!important;
  margin:0!important;
  background:linear-gradient(90deg,rgba(239,191,70,.055),rgba(255,255,255,.018) 42%,transparent 100%)!important;
  border-bottom:0!important;
  color:#f4f6f4!important;
}
body.homePageActive .topBattleHeader:after{
  content:""!important;
  position:absolute!important;
  left:2px!important;
  right:2px!important;
  bottom:0!important;
  height:1px!important;
  background:linear-gradient(90deg,rgba(239,191,70,.66),rgba(239,191,70,.17) 42%,transparent 86%)!important;
  box-shadow:0 0 9px rgba(239,191,70,.18)!important;
}
body.homePageActive .topBattleHeaderIcon{
  color:#f1ce71!important;
  filter:drop-shadow(0 0 7px rgba(239,191,70,.18))!important;
}
body.homePageActive .topBattleHeader strong{
  font-size:10.5px!important;
  letter-spacing:.025em!important;
  text-shadow:0 1px 10px rgba(0,0,0,.28)!important;
}

/* Dense card body: remove lower dead space. */
body.homePageActive .topBattleFeature{
  min-height:252px!important;
  margin-top:6px!important;
  border-radius:8px!important;
}
body.homePageActive .topBattleFeatureCopy{
  min-height:252px!important;
  padding:11px 11px 8px!important;
}
body.homePageActive .topBattleFeature h3{
  margin:7px 0 1px!important;
  font-size:17px!important;
}
body.homePageActive .topBattleFeature small{font-size:7.5px!important}
body.homePageActive .topBattleFeature .topBattleDamage{margin-top:7px!important}
body.homePageActive .topBattleFeature .topBattleDamage strong{
  font-size:44px!important;
  line-height:.88!important;
}
body.homePageActive .topBattleCombat{
  margin-top:7px!important;
  padding-top:7px!important;
  grid-template-columns:31px minmax(0,1fr)!important;
  gap:8px!important;
}
body.homePageActive .topBattleKills{width:31px!important}
body.homePageActive .topBattleKills b{font-size:17px!important}

/* Gold premium rail for mastery + key medals. */
body.homePageActive .topBattleAwardsLine{
  position:relative!important;
  min-height:38px!important;
  height:38px!important;
  padding:4px 8px!important;
  gap:7px!important;
  border:1px solid rgba(235,192,75,.32)!important;
  border-radius:7px!important;
  background:
    radial-gradient(ellipse at 28% 50%,rgba(239,191,70,.16),transparent 48%),
    linear-gradient(90deg,rgba(76,57,15,.31),rgba(28,25,14,.16) 64%,rgba(7,15,16,.18))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,232,159,.08),
    0 0 15px rgba(230,180,48,.075)!important;
  overflow:visible!important;
}
body.homePageActive .topBattleAwardsLine:before{
  content:""!important;
  position:absolute!important;
  left:7px!important;
  right:7px!important;
  top:0!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(255,219,112,.68),transparent)!important;
  box-shadow:0 0 8px rgba(255,211,86,.20)!important;
  pointer-events:none!important;
}
body.homePageActive .topBattleAwardsLine .topBattleMastery{
  width:30px!important;
  height:30px!important;
  display:grid!important;
  place-items:center!important;
  gap:0!important;
  cursor:default!important;
  transition:transform .2s ease,filter .2s ease!important;
}
body.homePageActive .topBattleAwardsLine .topBattleMastery img{
  width:30px!important;
  height:30px!important;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.32)) drop-shadow(0 0 4px rgba(240,192,64,.10))!important;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .22s ease!important;
}
body.homePageActive .topBattleAwardsLine .topBattleMastery span{display:none!important}
body.homePageActive .topBattleAwardsLine .topBattleAward{
  width:30px!important;
  height:30px!important;
  flex:0 0 30px!important;
  cursor:default!important;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .22s ease!important;
}
body.homePageActive .topBattleAwardsLine .topBattleAward img{
  width:30px!important;
  height:30px!important;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .22s ease!important;
}
body.homePageActive .topBattleAwardsLine .topBattleAward.tier-legendary img,
body.homePageActive .topBattleAwardsLine .topBattleAward.tier-epic img{
  width:32px!important;
  height:32px!important;
}
body.homePageActive .topBattleAwardsLine .topBattleMastery:hover img,
body.homePageActive .topBattleAwardsLine .topBattleAward:hover img{
  transform:translateY(-3px) scale(1.12)!important;
  filter:drop-shadow(0 6px 7px rgba(0,0,0,.36)) drop-shadow(0 0 11px rgba(255,205,77,.54)) brightness(1.10)!important;
}
body.homePageActive .topBattleAwardsLine .topBattleMastery:hover,
body.homePageActive .topBattleAwardsLine .topBattleAward:hover{
  transform:translateY(-1px)!important;
}

/* Footer sits tight at the bottom: nick + EU + green CTA on one rail. */
body.homePageActive .topBattleFooter{
  margin-top:auto!important;
  padding-top:6px!important;
  grid-template-columns:minmax(0,1fr) 140px!important;
  gap:8px!important;
}
body.homePageActive .topBattlePlayer{height:31px!important}
body.homePageActive .topBattlePlayer b{font-size:10.5px!important}
body.homePageActive .topBattlePlayer i{
  min-width:31px!important;
  height:23px!important;
  font-size:8px!important;
}
body.homePageActive .topBattleFeature .topBattleButton{
  width:140px!important;
  height:31px!important;
}

/* Slightly smaller tank render, still parked high. */
body.homePageActive .topBattleTankRender{
  top:-4%!important;
  right:0!important;
  width:50%!important;
  height:65%!important;
  object-position:right top!important;
}

@keyframes topBattlePremiumSweep{
  0%,23%{left:-38%;opacity:0}
  31%{opacity:.75}
  55%{left:118%;opacity:.45}
  64%,100%{left:118%;opacity:0}
}
@keyframes topBattlePremiumBreath{
  0%,100%{border-color:rgba(226,188,78,.25);box-shadow:0 22px 58px rgba(0,0,0,.25),0 0 18px rgba(218,174,55,.04),inset 0 1px 0 rgba(255,238,184,.06)}
  50%{border-color:rgba(235,199,96,.39);box-shadow:0 22px 58px rgba(0,0,0,.25),0 0 28px rgba(225,181,56,.09),inset 0 1px 0 rgba(255,238,184,.09)}
}
@media (prefers-reduced-motion:reduce){
  body.homePageActive .approvedTopBattle,
  body.homePageActive .approvedTopBattle:before{animation:none!important}
  body.homePageActive .topBattleAwardsLine img{transition:none!important}
}


/* =====================================================================
   v0.3.5.120 — HOME TOP BATTLE CTA COMPACT PREMIUM PASS
   Only refine the top battle card CTA: narrower green button, remove arrow,
   make its scale closer to the EU chip, keep footer compact and aligned.
   ===================================================================== */
body.homePageActive .topBattleFooter{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  margin-top:10px!important;
  padding-top:8px!important;
}
body.homePageActive .topBattlePlayer{
  flex:1 1 auto!important;
  min-width:0!important;
  margin-top:0!important;
  height:32px!important;
  display:grid!important;
  grid-template-columns:15px 1fr auto!important;
  align-items:center!important;
  gap:7px!important;
  padding-top:0!important;
  border-top:0!important;
}
body.homePageActive .topBattlePlayerIcon{width:15px!important;height:15px!important}
body.homePageActive .topBattlePlayer b{font-size:10px!important}
body.homePageActive .topBattlePlayer i{
  font-size:8px!important;
  padding:4px 9px!important;
  min-width:28px!important;
  border-radius:6px!important;
}
body.homePageActive .topBattleFeature .topBattleButton{
  width:auto!important;
  min-width:122px!important;
  max-width:122px!important;
  height:32px!important;
  padding:0 14px!important;
  margin:0!important;
  border-radius:6px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  font-size:8.5px!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  box-shadow:0 8px 16px rgba(120,170,18,.20)!important;
}
body.homePageActive .topBattleFeature .topBattleButton span{display:none!important}


/* =====================================================================
   v0.3.5.121 — HOME TOP BATTLE APPROVED MOCKUP EXACT REBUILD
   Exact structural rebuild of the HOME best-battle card from the approved
   user reference. Scope: top battle card only.
   ===================================================================== */
body.homePageActive .approvedTopBattle{
  padding:0!important;
  margin-top:10px!important;
  background:transparent!important;
  border:0!important;
  border-radius:14px!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  overflow:visible!important;
  animation:none!important;
}
body.homePageActive .approvedTopBattle:before,
body.homePageActive .approvedTopBattle:after{display:none!important}

body.homePageActive .topBattleV121{
  --v121-gold:#f0bd45;
  --v121-gold-hot:#ffd86a;
  --v121-green:#a9e51b;
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(241,193,76,.58);
  background:linear-gradient(160deg,#111412 0%,#070a09 78%);
  box-shadow:
    0 19px 44px rgba(0,0,0,.38),
    0 0 24px rgba(239,187,63,.09),
    inset 0 0 0 1px rgba(255,230,155,.045);
  isolation:isolate;
  cursor:pointer;
  animation:v121CardBreath 5.8s ease-in-out infinite;
}
body.homePageActive .topBattleV121:before{
  content:"";
  position:absolute;
  z-index:20;
  top:-45%;bottom:-45%;left:-34%;width:22%;
  transform:skewX(-17deg);
  background:linear-gradient(90deg,transparent,rgba(255,229,149,.03),rgba(255,244,207,.15),rgba(255,218,119,.04),transparent);
  pointer-events:none;
  animation:v121CardSweep 7.5s cubic-bezier(.4,0,.2,1) infinite;
}
body.homePageActive .topBattleV121:after{
  content:"";position:absolute;z-index:19;inset:2px;border-radius:12px;
  border:1px solid rgba(255,224,132,.055);pointer-events:none;
}

body.homePageActive .topBattleV121Header{
  height:52px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 135px;
  align-items:stretch;
  background:linear-gradient(180deg,rgba(16,18,17,.97),rgba(8,10,9,.95));
  border-bottom:1px solid rgba(239,188,66,.48);
}
body.homePageActive .topBattleV121Title{
  display:flex;align-items:center;gap:12px;padding:0 13px;
  color:#f6f7f5;font-size:12px;font-weight:900;letter-spacing:.025em;text-transform:uppercase;
}
body.homePageActive .topBattleV121Crown,
body.homePageActive .topBattleV121RankCrown{
  --home-icon:url('/assets/ui/home-crown.svg')!important;
  color:#f6c94f!important;
  filter:drop-shadow(0 0 7px rgba(246,199,74,.24));
}
body.homePageActive .topBattleV121Crown{width:24px!important;height:24px!important}
body.homePageActive .topBattleV121Rank{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:0 10px;
  border-left:1px solid rgba(239,188,66,.52);
  background:
    radial-gradient(circle at 42% 10%,rgba(255,218,102,.24),transparent 46%),
    linear-gradient(155deg,rgba(86,59,12,.84),rgba(27,23,12,.86));
  box-shadow:inset 0 -1px 0 rgba(255,218,101,.28),0 0 18px rgba(240,189,66,.08);
}
body.homePageActive .topBattleV121RankCrown{width:27px!important;height:27px!important}
body.homePageActive .topBattleV121Rank span{display:flex;flex-direction:column;line-height:1.02}
body.homePageActive .topBattleV121Rank b{font-size:15px;color:#ffcf57;letter-spacing:.025em}
body.homePageActive .topBattleV121Rank small{margin-top:3px;font-size:9px;color:#bfa96f;font-weight:900;letter-spacing:.08em}

body.homePageActive .topBattleV121Scene{
  position:relative;height:145px;overflow:hidden;
  background-size:cover;background-position:center 44%;
}
body.homePageActive .topBattleV121Scene:before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(255,255,255,.015),transparent 42%,rgba(4,6,5,.20) 100%),
    radial-gradient(ellipse at 70% 35%,rgba(240,187,60,.10),transparent 40%);
  pointer-events:none;
}
body.homePageActive .topBattleV121Identity{
  position:relative;z-index:4;width:51%;height:100%;padding:22px 0 10px 16px;
  display:flex;flex-direction:column;align-items:flex-start;
}
body.homePageActive .topBattleV121Identity h3{
  margin:0;color:#f6f7f5;font-size:20px;line-height:1;font-weight:850;letter-spacing:-.015em;
  text-shadow:0 2px 13px rgba(0,0,0,.54);
}
body.homePageActive .topBattleV121Identity>small{
  margin-top:4px;color:#aeb6b1;font-size:8.5px;font-weight:650;
}
body.homePageActive .topBattleV121Damage{margin-top:auto;display:flex;flex-direction:column}
body.homePageActive .topBattleV121Damage strong{
  font-family:Bahnschrift,"Arial Narrow","Segoe UI",Arial,sans-serif;
  font-size:52px;line-height:.88;font-weight:650;letter-spacing:-.055em;
  color:#f3c64e;
  background:linear-gradient(180deg,#fff0b0 0%,#ffdb6b 28%,#efb734 74%,#cd8920 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 0 20px rgba(244,194,67,.16),0 3px 18px rgba(0,0,0,.42);
  font-variant-numeric:tabular-nums lining-nums;
}
body.homePageActive .topBattleV121Damage span{
  margin-top:5px;color:#e6e9e7;font-size:9px;font-weight:900;letter-spacing:.14em;
}
body.homePageActive .topBattleV121Tank{
  position:absolute;z-index:3;right:-1.5%;top:-12%;width:66%;height:130%;
  object-fit:contain;object-position:right center;
  filter:brightness(1.09) contrast(1.08) saturate(.91) drop-shadow(0 16px 15px rgba(0,0,0,.55));
  pointer-events:none;
}

body.homePageActive .topBattleV121Stats{
  min-height:58px;display:grid;grid-template-columns:.82fr 1.05fr 1.1fr;
  align-items:center;margin:0 10px;
  background:linear-gradient(180deg,rgba(18,17,12,.94),rgba(8,10,9,.93));
  border:1px solid rgba(224,181,66,.24);border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(255,225,140,.04);
}
body.homePageActive .topBattleV121Stat{
  min-width:0;height:42px;display:flex;align-items:center;gap:8px;padding:0 10px;
  border-right:1px solid rgba(196,174,111,.16);
}
body.homePageActive .topBattleV121Stat:last-child{border-right:0}
body.homePageActive .topBattleV121StatIcon{
  width:30px;height:30px;flex:0 0 30px;
  background:linear-gradient(180deg,#ffe07a,#d89d21)!important;
  -webkit-mask:var(--ui-icon) center/contain no-repeat!important;mask:var(--ui-icon) center/contain no-repeat!important;
  filter:drop-shadow(0 0 6px rgba(238,180,44,.22)) drop-shadow(0 2px 3px rgba(0,0,0,.30))!important;
}
body.homePageActive .topBattleV121Stat>div{display:flex;flex-direction:column;line-height:1}
body.homePageActive .topBattleV121Stat b{font-size:19px;color:#f5f6f4;font-weight:850;font-variant-numeric:tabular-nums}
body.homePageActive .topBattleV121Stat small{margin-top:5px;font-size:9px;color:#b8b7ae;font-weight:900;letter-spacing:.065em}
body.homePageActive .topBattleV121Stat.mastery img{
  width:34px;height:34px;flex:0 0 34px;object-fit:contain;
  filter:drop-shadow(0 0 7px rgba(237,183,48,.18));
}
body.homePageActive .topBattleV121Stat.mastery b{font-size:12.5px;color:#f1d17e;text-transform:uppercase}
body.homePageActive .topBattleV121Stat.mastery small{font-size:6px;color:#8d8e87}

body.homePageActive .topBattleV121Medals{
  position:relative;height:60px;margin:8px 10px 0;padding:6px 12px;
  display:flex;align-items:center;gap:11px;overflow:visible;
  border:1px solid rgba(255,207,83,.58);border-radius:8px;
  background:
    radial-gradient(ellipse at 35% 55%,rgba(235,178,38,.22),transparent 56%),
    linear-gradient(90deg,rgba(71,51,8,.65),rgba(33,27,10,.46) 58%,rgba(16,14,9,.48));
  box-shadow:
    0 0 18px rgba(238,181,42,.14),
    inset 0 1px 0 rgba(255,235,166,.20),
    inset 0 -1px 0 rgba(224,165,31,.19);
}
body.homePageActive .topBattleV121Medals:before{
  content:"";position:absolute;left:8px;right:8px;top:-1px;height:2px;
  background:linear-gradient(90deg,transparent,#ffe385 18%,#ffd35b 55%,transparent);
  box-shadow:0 0 11px rgba(255,207,75,.62);pointer-events:none;
}
body.homePageActive .topBattleV121MasteryMedal,
body.homePageActive .topBattleV121Medals .topBattleAward{
  width:43px!important;height:43px!important;flex:0 0 43px!important;
  display:grid!important;place-items:center!important;
  border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;
  transition:transform .20s cubic-bezier(.2,.8,.2,1),filter .20s ease!important;
}
body.homePageActive .topBattleV121MasteryMedal img,
body.homePageActive .topBattleV121Medals .topBattleAward img{
  width:42px!important;height:42px!important;object-fit:contain!important;
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.35)) drop-shadow(0 0 5px rgba(239,188,48,.10))!important;
  transition:transform .20s cubic-bezier(.2,.8,.2,1),filter .20s ease!important;
}
body.homePageActive .topBattleV121Medals .topBattleAward.tier-legendary img,
body.homePageActive .topBattleV121Medals .topBattleAward.tier-epic img{width:45px!important;height:45px!important}
body.homePageActive .topBattleV121MasteryMedal:hover,
body.homePageActive .topBattleV121Medals .topBattleAward:hover{transform:translateY(-3px) scale(1.08)!important}
body.homePageActive .topBattleV121MasteryMedal:hover img,
body.homePageActive .topBattleV121Medals .topBattleAward:hover img{
  filter:drop-shadow(0 7px 9px rgba(0,0,0,.42)) drop-shadow(0 0 13px rgba(255,210,78,.55)) brightness(1.10)!important;
}
body.homePageActive .topBattleV121Medals .topBattleAwardRow{
  display:flex!important;align-items:center!important;gap:11px!important;margin:0!important;padding:0!important;border:0!important;background:none!important;
}

body.homePageActive .topBattleV121Footer{
  height:54px;display:grid;grid-template-columns:minmax(0,1fr) 162px;align-items:center;gap:12px;padding:0 12px;
}
body.homePageActive .topBattleV121Player{
  display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0;
}
body.homePageActive .topBattleV121PlayerIcon{width:21px!important;height:21px!important;color:#e6eae7!important}
body.homePageActive .topBattleV121Player b{font-size:12px;color:#f3f5f3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.homePageActive .topBattleV121Player i{
  min-width:37px;height:30px;display:grid;place-items:center;padding:0 9px;
  border-radius:7px;border:1px solid rgba(83,121,185,.44);
  background:linear-gradient(180deg,rgba(31,59,110,.43),rgba(15,32,65,.42));
  color:#dce8ff;font-size:10.5px;font-style:normal;font-weight:900;
}
body.homePageActive .topBattleV121Button{
  height:36px;border-radius:7px;border:1px solid rgba(163,229,25,.72);
  background:linear-gradient(180deg,#92d815 0%,#70ac08 100%);color:#071005;
  font:900 9px/1 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.025em;text-transform:uppercase;
  box-shadow:0 0 0 1px rgba(210,255,123,.08) inset,0 7px 19px rgba(109,167,8,.22);
  cursor:pointer;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
body.homePageActive .topBattleV121Button:hover{
  transform:translateY(-1px);filter:brightness(1.07);
  box-shadow:0 0 0 1px rgba(226,255,164,.14) inset,0 9px 24px rgba(123,188,10,.31),0 0 18px rgba(152,222,23,.16);
}

@keyframes v121CardSweep{
  0%,25%{left:-34%;opacity:0}32%{opacity:.72}55%{left:116%;opacity:.40}64%,100%{left:116%;opacity:0}
}
@keyframes v121CardBreath{
  0%,100%{border-color:rgba(241,193,76,.52);box-shadow:0 19px 44px rgba(0,0,0,.38),0 0 20px rgba(239,187,63,.07),inset 0 0 0 1px rgba(255,230,155,.04)}
  50%{border-color:rgba(255,210,98,.73);box-shadow:0 19px 44px rgba(0,0,0,.38),0 0 30px rgba(239,187,63,.14),inset 0 0 0 1px rgba(255,230,155,.07)}
}
@media(prefers-reduced-motion:reduce){
  body.homePageActive .topBattleV121,
  body.homePageActive .topBattleV121:before{animation:none!important}
  body.homePageActive .topBattleV121Medals img{transition:none!important}
}

/* v0.3.5.126 — shared KPI hard bind helpers */
.inlineEconomyIcon{width:20px!important;height:20px!important;margin-right:7px!important;vertical-align:-4px!important;display:inline-block!important}
.inlineSilverIcon{color:#d9dfdc!important}
.inlineXpIcon{color:#e7b94d!important}

/* v0.3.5.126 — /replays cards use the same global KPI masks */
.approvedReplaysMockup .cardPremiumKpiIcon{
  display:block!important;width:29px!important;height:29px!important;
  background:currentColor!important;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.50))!important;
}
.approvedReplaysMockup .cardHudIconDamage{color:#f0c84f!important}
.approvedReplaysMockup .cardHudIconKills{color:#ff7a72!important}
.approvedReplaysMockup .cardHudIconXp{color:#e9bd55!important}


/* =====================================================================
   v0.3.5.128 — REAL PNG KPI ASSET HARD FIX
   Final override: KPI assets are real transparent PNG images. Never mask,
   paint, or replace them with CSS blocks. Keep ordinary non-KPI UI glyphs
   on the legacy mask system.
   ===================================================================== */
html body img.uiAssetIcon.uiMaskIcon[src*="/assets/ui/kpi-"]{
  display:inline-block!important;
  background:transparent!important;
  background-image:none!important;
  -webkit-mask:none!important;
  mask:none!important;
  object-fit:contain!important;
  object-position:center!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  opacity:1!important;
}
body.homePageActive img.uiAssetIcon.topBattleV121StatIcon{
  width:30px!important;height:30px!important;flex:0 0 30px!important;
  background:transparent!important;-webkit-mask:none!important;mask:none!important;
  filter:drop-shadow(0 0 6px rgba(238,180,44,.18)) drop-shadow(0 2px 3px rgba(0,0,0,.30))!important;
}
.approvedReplaysMockup img.cardPremiumKpiIcon.uiAssetIcon{
  display:block!important;width:29px!important;height:29px!important;
  background:transparent!important;-webkit-mask:none!important;mask:none!important;
  object-fit:contain!important;filter:drop-shadow(0 4px 6px rgba(0,0,0,.42))!important;
}
.approvedHeroMetric img.uiAssetIcon,
.approvedSubMetrics img.uiAssetIcon,
.retroEfficiencyList img.uiAssetIcon,
.efficiencyColumnsV63 img.uiAssetIcon,
.approvedEconomy img.uiAssetIcon,
.approvedReportPanel img.uiAssetIcon{
  background:transparent!important;-webkit-mask:none!important;mask:none!important;
  object-fit:contain!important;
}


/* =====================================================================
   v0.3.5.129 — TANK FALLBACK + KPI PNG CONTEXT HARD FIX
   Keep real PNG assets real: no legacy mask/background rules in cards,
   replay hero or battle-efficiency pills. Also normalize damage icon size.
   ===================================================================== */
html body img.uiAssetIcon.uiMaskIcon[src*="/assets/ui/kpi-"]{
  background:transparent!important;background-image:none!important;
  -webkit-mask-image:none!important;mask-image:none!important;
  -webkit-mask:none!important;mask:none!important;
  padding:0!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;object-fit:contain!important;overflow:visible!important;
}
/* /replays: damage artwork had a much larger visual bounding box than kills/xp. */
html body .approvedReplaysMockup .cardHudIcon{width:27px!important;height:27px!important;flex-basis:27px!important}
html body .approvedReplaysMockup .cardHudIconDamage img.cardPremiumKpiIcon.uiAssetIcon{width:21px!important;height:21px!important}
html body .approvedReplaysMockup .cardHudIconKills img.cardPremiumKpiIcon.uiAssetIcon{width:24px!important;height:24px!important}
html body .approvedReplaysMockup .cardHudIconXp img.cardPremiumKpiIcon.uiAssetIcon{width:24px!important;height:24px!important}
/* Replay hero: use balanced real PNG sizes. */
html body .approvedHeroMetric.heroMetric-damage img.uiAssetIcon.metricIcon{width:24px!important;height:24px!important;min-width:24px!important;background:transparent!important}
html body .approvedHeroMetric.heroMetric-kills img.uiAssetIcon.metricIcon{width:25px!important;height:25px!important;min-width:25px!important;background:transparent!important}
html body .approvedHeroMetric.heroMetric-assist img.uiAssetIcon.metricIcon{width:24px!important;height:24px!important;min-width:24px!important;background:transparent!important}
/* Efficiency table: beat old high-specificity mask/background rules. */
html body .efficiencyColumnsV63 .effEventCell > .effStatPill > img.uiAssetIcon.uiMaskIcon.effStatIcon[src*="/assets/ui/kpi-"]{
  width:18px!important;height:18px!important;min-width:18px!important;flex:0 0 18px!important;
  background:transparent!important;background-image:none!important;
  -webkit-mask-image:none!important;mask-image:none!important;-webkit-mask:none!important;mask:none!important;
  padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;object-fit:contain!important;
}
html body .efficiencyColumnsV63 .effEventCell > .damagePill > img.uiAssetIcon.effStatIcon{width:16px!important;height:16px!important;min-width:16px!important;flex-basis:16px!important}
html body .efficiencyColumnsV63 .effEventCell > .assistPill > img.uiAssetIcon.effStatIcon{width:18px!important;height:18px!important;min-width:18px!important}
html body .efficiencyColumnsV63 .effEventCell > .killPill > img.uiAssetIcon.effStatIcon{width:19px!important;height:19px!important;min-width:19px!important}
/* HOME top battle stays compact and real-PNG. */
html body.homePageActive .topBattleV121Stat img.uiAssetIcon.topBattleV121StatIcon{
  background:transparent!important;-webkit-mask:none!important;mask:none!important;object-fit:contain!important;
}


/* =====================================================================
   v0.3.5.130 — CLIENT TANK CACHE REBUILD + LEGACY AWARD RECOVERY
   Never show a generic/fake vehicle when the real client asset is absent.
   ===================================================================== */
img.tankAssetMissing{display:none!important}

/* =====================================================================
   v0.3.5.131 — HOME LOGIC LABEL CONSISTENCY + FINAL UI POLISH
   HOME only. No backend, parser, replay page, tank cache or KPI system
   changes. Final alignment pass on the approved HOME composition.
   ===================================================================== */
body.homePageActive{
  --home-final-gold:#e7b94a;
  --home-final-gold-soft:rgba(231,185,74,.34);
  --home-final-line:rgba(143,166,166,.22);
}

/* Premium daily winner: one gold language and cleaner baselines. */
body.homePageActive .topBattleV121{
  --v121-gold:var(--home-final-gold)!important;
  --v121-gold-hot:#ffd76a!important;
}
body.homePageActive .topBattleV121Header{
  border-bottom-color:rgba(231,185,74,.46)!important;
}
body.homePageActive .topBattleV121Rank{
  border-left-color:rgba(231,185,74,.48)!important;
}
body.homePageActive .topBattleV121Stats{
  min-height:58px!important;
  grid-template-columns:.88fr 1.05fr 1.14fr!important;
  border-color:rgba(231,185,74,.26)!important;
}
body.homePageActive .topBattleV121Stat{
  height:42px!important;
  align-items:center!important;
  gap:8px!important;
  padding:0 10px!important;
}
body.homePageActive .topBattleV121Stat>div{
  min-height:31px!important;
  justify-content:center!important;
}
body.homePageActive .topBattleV121Stat b{
  line-height:1!important;
}
body.homePageActive .topBattleV121Stat small{
  line-height:1!important;
}
body.homePageActive .topBattleV121Stat.mastery{
  justify-content:flex-start!important;
}
body.homePageActive .topBattleV121Medals{
  border-color:rgba(231,185,74,.56)!important;
  align-items:center!important;
}
body.homePageActive .topBattleV121Medals .topBattleAwardRow{
  min-height:43px!important;
  align-items:center!important;
}
body.homePageActive .topBattleV121Footer{
  grid-template-columns:minmax(0,1fr) 162px!important;
  align-items:center!important;
}
body.homePageActive .topBattleV121Player,
body.homePageActive .topBattleV121Button{
  align-self:center!important;
}

/* Dashboard rhythm: titles and bottom links sit on the same baselines. */
body.homePageActive .approvedHomeDashboard{
  align-items:stretch!important;
}
body.homePageActive .approvedHomeDashboard > .homePanel{
  display:flex!important;
  flex-direction:column!important;
}
body.homePageActive .approvedHomeDashboard .panelTitle{
  flex:0 0 34px!important;
  min-height:34px!important;
  align-items:center!important;
}
body.homePageActive .approvedHomeDashboard .panelTitle strong{
  line-height:1.1!important;
}
body.homePageActive .approvedHomeDashboard .damageList,
body.homePageActive .approvedHomeDashboard .latestGrid,
body.homePageActive .approvedHomeDashboard .popularList{
  flex:0 0 auto!important;
}
body.homePageActive .approvedHomeDashboard .homePanelFooterLink{
  margin-top:auto!important;
  flex:0 0 31px!important;
  min-height:31px!important;
  align-self:stretch!important;
}

/* Quick filters: equal internal rhythm without changing their logic. */
body.homePageActive .homeQuickFilter{
  padding-left:15px!important;
  padding-right:15px!important;
  gap:8px!important;
}
body.homePageActive .homeQuickFilter .homeQuickIcon{
  flex:0 0 auto!important;
}

/* Bottom feature cards: equal text baselines and visual height. */
body.homePageActive .approvedHomeFeatures{
  align-items:stretch!important;
}
body.homePageActive .approvedHomeFeatures>div{
  height:76px!important;
  min-height:76px!important;
  align-items:center!important;
}
body.homePageActive .approvedHomeFeatures .featureCopy{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
body.homePageActive .approvedHomeFeatures strong{
  line-height:1.12!important;
  min-height:12px!important;
}
body.homePageActive .approvedHomeFeatures p{
  line-height:1.35!important;
  min-height:20px!important;
}

/* Mouse click must not leave a browser-default white box around HOME nav. */
body.homePageActive .topbar nav a:focus:not(:focus-visible){outline:none!important;box-shadow:none!important}
body.homePageActive .topbar nav a:focus-visible{
  outline:1px solid rgba(169,229,27,.72)!important;
  outline-offset:4px!important;
  border-radius:2px!important;
}


/* =====================================================================
   v0.3.5.132 — BATTLE PAGE CANVAS WIDTH PARITY + DENSITY POLISH
   Layout-only pass. Keep the stable v0.3.5.131 data/parser/assets logic intact.
   Match the battle-detail canvas to the approved HOME / REPLAYS 1280px rhythm.
   ===================================================================== */

/* Desktop: one centered 1280px battle canvas, same visual width as HOME/replays. */
@media (min-width:1251px){
  .cinematicReplayPage{
    width:min(1280px,calc(100% - 40px))!important;
    max-width:1280px!important;
    margin:0 auto!important;
    padding:18px 0 56px!important;
  }
  .cinematicReplayPage > .approvedReplayHero,
  .cinematicReplayPage > .cinematicReportShell{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }

  /* Keep the approved hero proportions, but make the narrower canvas feel denser. */
  .cinematicReplayPage .approvedReplayHero{
    height:500px!important;
    min-height:500px!important;
  }
  .cinematicReplayPage .approvedHeroTop{
    left:48px!important;
    right:28px!important;
    top:17px!important;
  }
  .cinematicReplayPage .approvedHeroCopy{
    left:48px!important;
    top:52px!important;
    width:505px!important;
    max-width:505px!important;
  }
  .cinematicReplayPage .approvedHeroCopy h1{
    font-size:72px!important;
    margin-top:12px!important;
  }
  .cinematicReplayPage .approvedAwardsRail{
    min-height:94px!important;
    height:94px!important;
    gap:8px!important;
  }

  /* Main KPI and economy strips meet cleanly instead of leaving a dead middle zone. */
  .cinematicReplayPage .approvedHeroPrimaryStats{
    left:48px!important;
    width:54%!important;
    height:78px!important;
    bottom:96px!important;
  }
  .cinematicReplayPage .approvedEconomyCards{
    right:48px!important;
    width:38%!important;
    height:86px!important;
    bottom:96px!important;
  }
  .cinematicReplayPage .approvedHeroMetric{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .cinematicReplayPage .approvedHeroMetric strong{font-size:27px!important}
  .cinematicReplayPage .approvedHeroMetric small{font-size:9px!important;margin-top:4px!important}
  .cinematicReplayPage .approvedEconomy{padding:12px 16px!important}

  .cinematicReplayPage .approvedSubMetrics{
    left:48px!important;
    right:48px!important;
    bottom:18px!important;
    height:62px!important;
  }
  .cinematicReplayPage .approvedSubMetrics>div{padding-left:13px!important;padding-right:13px!important}

  /* Report follows the exact same outer edges and starts closer to the hero. */
  .cinematicReplayPage .cinematicReportShell{
    margin-top:10px!important;
  }
  .cinematicReplayPage .cinematicTabs{
    height:54px!important;
  }
  .cinematicReplayPage .cinematicTabs button{
    height:54px!important;
    min-width:180px!important;
    padding:0 22px!important;
    font-size:14px!important;
  }
  .cinematicReplayPage .cinematicReportContent{
    width:100%!important;
  }
  .cinematicReplayPage .cinematicSectionHeader{
    min-height:66px!important;
    padding-top:12px!important;
    padding-bottom:12px!important;
  }
}

/* Tablet: preserve the existing responsive behavior, but keep symmetric gutters. */
@media (max-width:1250px) and (min-width:851px){
  .cinematicReplayPage{
    width:calc(100% - 32px)!important;
    max-width:1280px!important;
    margin:0 auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .cinematicReplayPage > .approvedReplayHero,
  .cinematicReplayPage > .cinematicReportShell{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }
}


/* =====================================================================
   v0.3.5.133 — HOME TOP DAMAGE TODAY CARD UPGRADE
   HOME-only: turn each daily damage leaderboard row into a premium mini-card.
   ===================================================================== */
body.homePageActive .approvedHomeDashboard .damagePanel{
  overflow:visible!important;
}
body.homePageActive .approvedHomeDashboard .damagePanel .damageList{
  display:grid!important;
  grid-template-rows:repeat(5,43px)!important;
  gap:4px!important;
  height:231px!important;
  min-height:231px!important;
  max-height:231px!important;
  padding:0!important;
  overflow:visible!important;
}
body.homePageActive .approvedHomeDashboard .damagePanel .damageRow,
body.homePageActive .damageMiniCard{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  height:43px!important;
  min-height:43px!important;
  max-height:43px!important;
  grid-template-columns:31px 62px minmax(0,1fr) 70px 57px!important;
  gap:7px!important;
  padding:0 7px 0 5px!important;
  border:1px solid rgba(174,190,183,.13)!important;
  border-radius:6px!important;
  background:linear-gradient(105deg,rgba(19,29,26,.92),rgba(8,14,12,.93) 66%,rgba(16,22,18,.90))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018),0 5px 12px rgba(0,0,0,.10)!important;
  cursor:pointer!important;
  transition:transform .20s ease,border-color .20s ease,box-shadow .20s ease,background .20s ease!important;
  border-top-width:1px!important;
}
body.homePageActive .damageMiniCard::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-60%;
  bottom:-60%;
  left:-48%;
  width:30%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(235,199,88,.13),rgba(170,235,49,.075),transparent);
  opacity:0;
  pointer-events:none;
}
body.homePageActive .damageMiniCard:hover{
  z-index:4!important;
  transform:translateY(-2px) scale(1.006)!important;
  border-color:rgba(222,189,84,.36)!important;
  background:linear-gradient(105deg,rgba(27,36,30,.97),rgba(10,17,14,.97) 65%,rgba(21,29,22,.95))!important;
  box-shadow:0 10px 22px rgba(0,0,0,.30),0 0 18px rgba(211,180,70,.075),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body.homePageActive .damageMiniCard:hover::before{
  opacity:1;
  animation:homeDamageShimmer .75s ease-out 1;
}
@keyframes homeDamageShimmer{
  from{left:-48%}
  to{left:125%}
}
body.homePageActive .damageMiniCard.rank-card-1{
  border-color:rgba(232,190,73,.30)!important;
  background:linear-gradient(105deg,rgba(44,34,15,.42),rgba(12,18,15,.95) 45%,rgba(15,22,17,.96))!important;
  box-shadow:inset 3px 0 0 rgba(235,188,61,.58),0 6px 16px rgba(0,0,0,.14)!important;
}
body.homePageActive .damageRankWrap{
  width:31px!important;
  height:39px!important;
  display:grid!important;
  place-items:center!important;
}
body.homePageActive .damageTrophy{
  display:block!important;
  width:29px!important;
  height:29px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.50))!important;
  transition:transform .20s ease,filter .20s ease!important;
}
body.homePageActive .damageTrophy.rank-1{width:31px!important;height:31px!important;filter:drop-shadow(0 0 5px rgba(244,191,58,.28)) drop-shadow(0 4px 6px rgba(0,0,0,.55))!important}
body.homePageActive .damageMiniCard:hover .damageTrophy{
  transform:translateY(-1px) scale(1.07)!important;
}
body.homePageActive .damageRankWrap .damagePlace{
  width:22px!important;
  height:22px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(179,192,190,.22)!important;
  border-radius:5px!important;
  background:rgba(6,12,10,.72)!important;
  color:#b8c2bd!important;
  font-size:8px!important;
  font-weight:900!important;
}
body.homePageActive .damageTankThumb{
  width:60px!important;
  height:38px!important;
  display:grid!important;
  place-items:center!important;
}
body.homePageActive .damageTankThumb img{
  width:60px!important;
  height:38px!important;
  max-width:60px!important;
  max-height:38px!important;
  object-fit:contain!important;
  filter:brightness(1.08) contrast(1.04) drop-shadow(0 5px 6px rgba(0,0,0,.55))!important;
  transition:transform .22s ease,filter .22s ease!important;
}
body.homePageActive .damageMiniCard:hover .damageTankThumb img{
  transform:scale(1.055)!important;
  filter:brightness(1.16) contrast(1.06) drop-shadow(0 7px 8px rgba(0,0,0,.58))!important;
}
body.homePageActive .damageIdentity{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  line-height:1!important;
  white-space:normal!important;
}
body.homePageActive .damageIdentity .damageTankName{
  display:block!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#f2f5f3!important;
  font-size:11.3px!important;
  line-height:1.02!important;
  font-weight:900!important;
  letter-spacing:.005em!important;
}
body.homePageActive .damageIdentity small{
  display:block!important;
  margin-top:4px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#7e8c86!important;
  font-size:6.4px!important;
  line-height:1!important;
  font-weight:650!important;
}
body.homePageActive .damageScore{
  text-align:right!important;
  color:#e6bc42!important;
  font-size:13.5px!important;
  line-height:.92!important;
  font-weight:900!important;
  text-shadow:0 0 9px rgba(224,177,51,.10)!important;
}
body.homePageActive .damageScore small{
  display:block!important;
  margin-top:3px!important;
  color:#7d8984!important;
  font-size:5.3px!important;
  line-height:1!important;
  font-weight:650!important;
}
body.homePageActive .damageOpen{
  width:57px!important;
  height:27px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(155,177,168,.25)!important;
  border-radius:5px!important;
  background:rgba(7,13,11,.56)!important;
  color:#dce4df!important;
  font-size:6.8px!important;
  font-weight:800!important;
  transition:border-color .18s ease,color .18s ease,background .18s ease,box-shadow .18s ease!important;
}
body.homePageActive .damageMiniCard:hover .damageOpen{
  border-color:rgba(169,229,27,.48)!important;
  color:#c9f65a!important;
  background:rgba(81,109,24,.12)!important;
  box-shadow:0 0 12px rgba(169,229,27,.055)!important;
}
@media (prefers-reduced-motion:reduce){
  body.homePageActive .damageMiniCard,
  body.homePageActive .damageTrophy,
  body.homePageActive .damageTankThumb img{transition:none!important}
  body.homePageActive .damageMiniCard:hover::before{animation:none!important}
}

/* =====================================================================
   v0.3.5.134 — HOME TOP DAMAGE SCALE + PODIUM EMPHASIS POLISH
   HOME-only: upscale the TOP DAMAGE block, make cards more readable,
   and visually emphasize the podium while preserving the approved layout.
   ===================================================================== */
body.homePageActive .approvedHomeDashboard .damagePanel .damageList{
  grid-template-rows:56px repeat(4,48px)!important;
  gap:5px!important;
  height:268px!important;
  min-height:268px!important;
  max-height:268px!important;
}
body.homePageActive .approvedHomeDashboard .damagePanel .damageRow,
body.homePageActive .damageMiniCard{
  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;
  grid-template-columns:33px 68px minmax(0,1fr) 76px 61px!important;
  gap:8px!important;
  padding:0 8px 0 6px!important;
  border-radius:7px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 7px 16px rgba(0,0,0,.12)!important;
}
body.homePageActive .damageMiniCard.rank-card-1{
  height:56px!important;
  min-height:56px!important;
  max-height:56px!important;
  border-color:rgba(233,192,78,.42)!important;
  background:linear-gradient(105deg,rgba(52,39,15,.52),rgba(13,19,15,.97) 42%,rgba(17,25,18,.98))!important;
  box-shadow:inset 3px 0 0 rgba(235,188,61,.62),0 10px 24px rgba(0,0,0,.22),0 0 18px rgba(224,179,57,.06)!important;
}
body.homePageActive .damageMiniCard.rank-card-2{
  border-color:rgba(182,195,200,.22)!important;
  box-shadow:inset 2px 0 0 rgba(188,199,206,.24),0 7px 16px rgba(0,0,0,.12)!important;
}
body.homePageActive .damageMiniCard.rank-card-3{
  border-color:rgba(190,141,92,.22)!important;
  box-shadow:inset 2px 0 0 rgba(189,134,76,.24),0 7px 16px rgba(0,0,0,.12)!important;
}
body.homePageActive .damageMiniCard:hover{
  transform:translateY(-2px) scale(1.008)!important;
  border-color:rgba(222,189,84,.44)!important;
  box-shadow:0 14px 28px rgba(0,0,0,.34),0 0 20px rgba(211,180,70,.09),inset 0 1px 0 rgba(255,255,255,.038)!important;
}
body.homePageActive .damageMiniCard.rank-card-1:hover{
  transform:translateY(-2px) scale(1.01)!important;
  box-shadow:0 16px 30px rgba(0,0,0,.36),0 0 24px rgba(226,185,65,.14),inset 3px 0 0 rgba(244,199,71,.78),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
body.homePageActive .damageRankWrap{
  width:33px!important;
  height:44px!important;
}
body.homePageActive .damageMiniCard.rank-card-1 .damageRankWrap{
  height:52px!important;
}
body.homePageActive .damageTrophy{
  width:31px!important;
  height:31px!important;
}
body.homePageActive .damageTrophy.rank-1{
  width:34px!important;
  height:34px!important;
}
body.homePageActive .damageTrophy.rank-2,
body.homePageActive .damageTrophy.rank-3{
  width:32px!important;
  height:32px!important;
}
body.homePageActive .damageMiniCard:hover .damageTrophy{
  transform:translateY(-1px) scale(1.08)!important;
}
body.homePageActive .damageRankWrap .damagePlace{
  width:24px!important;
  height:24px!important;
  border-radius:6px!important;
  font-size:8.5px!important;
}
body.homePageActive .damageTankThumb{
  width:68px!important;
  height:42px!important;
}
body.homePageActive .damageTankThumb img{
  width:68px!important;
  height:42px!important;
  max-width:68px!important;
  max-height:42px!important;
  filter:brightness(1.1) contrast(1.05) drop-shadow(0 6px 7px rgba(0,0,0,.56))!important;
}
body.homePageActive .damageMiniCard.rank-card-1 .damageTankThumb{
  width:72px!important;
  height:46px!important;
}
body.homePageActive .damageMiniCard.rank-card-1 .damageTankThumb img{
  width:72px!important;
  height:46px!important;
  max-width:72px!important;
  max-height:46px!important;
  filter:brightness(1.14) contrast(1.05) drop-shadow(0 8px 10px rgba(0,0,0,.58))!important;
}
body.homePageActive .damageIdentity .damageTankName{
  font-size:13px!important;
  line-height:1.02!important;
  letter-spacing:.003em!important;
}
body.homePageActive .damageMiniCard.rank-card-1 .damageIdentity .damageTankName{
  font-size:14px!important;
}
body.homePageActive .damageIdentity small{
  margin-top:4px!important;
  font-size:7.2px!important;
  font-weight:700!important;
}
body.homePageActive .damageScore{
  font-size:15.5px!important;
  line-height:.9!important;
}
body.homePageActive .damageMiniCard.rank-card-1 .damageScore{
  font-size:17px!important;
}
body.homePageActive .damageScore small{
  margin-top:4px!important;
  font-size:5.9px!important;
  font-weight:700!important;
}
body.homePageActive .damageOpen{
  width:61px!important;
  height:29px!important;
  border-radius:6px!important;
  font-size:7.2px!important;
}
body.homePageActive .damageMiniCard.rank-card-1 .damageOpen{
  height:31px!important;
}

/* =====================================================================
   v0.3.5.136 — HOME TOP DAMAGE NICKNAME LEGIBILITY + BOTTOM SPACING FIX
   HOME-only: improve nickname readability and fully restore the bottom CTA.
   ===================================================================== */
body.homePageActive .approvedHomeDashboard .damagePanel{
  min-height:388px!important;
  padding-bottom:14px!important;
}
body.homePageActive .approvedHomeDashboard .damagePanel .damageList{
  grid-template-rows:56px repeat(4,48px)!important;
  gap:4px!important;
  height:264px!important;
  min-height:264px!important;
  max-height:264px!important;
}
body.homePageActive .damageIdentity small{
  margin-top:4px!important;
  color:#a4b0aa!important;
  font-size:8.1px!important;
  line-height:1.05!important;
  font-weight:760!important;
  letter-spacing:.005em!important;
}
body.homePageActive .damageMiniCard.rank-card-1 .damageIdentity small{
  font-size:8.3px!important;
  color:#b2bcb7!important;
}
body.homePageActive .approvedHomeDashboard .damagePanel .homePanelFooterLink{
  position:relative!important;
  z-index:5!important;
  flex:0 0 34px!important;
  height:34px!important;
  min-height:34px!important;
  max-height:34px!important;
  margin-top:7px!important;
  padding-top:1px!important;
  border-top:1px solid rgba(143,166,166,.14)!important;
  color:#a9df35!important;
  font-size:8.4px!important;
  line-height:1!important;
  overflow:visible!important;
  opacity:1!important;
  visibility:visible!important;
}
body.homePageActive .approvedHomeDashboard .damagePanel .homePanelFooterLink span{
  font-size:13px!important;
}


/* =====================================================================
   v0.3.5.136 — HOME SECTION HEADER ACTIONS + BOTTOM LINK CLEANUP
   HOME-only: move section navigation into panel headers and remove bottom links.
   ===================================================================== */
body.homePageActive .approvedHomeDashboard .homePanelFooterLink{
  display:none!important;
}
body.homePageActive .approvedHomeDashboard .panelTitle{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
}
body.homePageActive .approvedHomeDashboard .panelTitle strong{
  min-width:0!important;
}
body.homePageActive .approvedHomeDashboard .panelTitle .homePanelHeaderAction{
  margin-left:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  flex:0 0 auto!important;
  padding:4px 2px 4px 8px!important;
  border-radius:5px!important;
  color:#a9df35!important;
  text-decoration:none!important;
  text-transform:none!important;
  font-size:7.8px!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:.01em!important;
  opacity:.92!important;
  transition:color .18s ease,opacity .18s ease,text-shadow .18s ease,transform .18s ease!important;
}
body.homePageActive .approvedHomeDashboard .panelTitle .homePanelHeaderAction span{
  display:inline-block!important;
  font-size:11px!important;
  line-height:1!important;
  transition:transform .18s ease!important;
}
body.homePageActive .approvedHomeDashboard .panelTitle .homePanelHeaderAction:hover{
  color:#c9f65a!important;
  opacity:1!important;
  text-shadow:0 0 10px rgba(169,229,27,.20)!important;
  transform:translateY(-1px)!important;
}
body.homePageActive .approvedHomeDashboard .panelTitle .homePanelHeaderAction:hover span{
  transform:translateX(2px)!important;
}
body.homePageActive .approvedHomeDashboard > .homePanel,
body.homePageActive .approvedHomeDashboard > .damagePanel,
body.homePageActive .approvedHomeDashboard > .latestPanel,
body.homePageActive .approvedHomeDashboard > .popularPanel{
  padding-bottom:13px!important;
}
body.homePageActive .approvedHomeDashboard .damagePanel .damageList{
  margin-bottom:0!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid,
body.homePageActive .approvedHomeDashboard .popularPanel .popularList{
  margin-bottom:0!important;
}
@media(max-width:700px){
  body.homePageActive .approvedHomeDashboard .panelTitle .homePanelHeaderAction{font-size:7px!important;padding-left:5px!important}
}


/* =====================================================================
   v0.3.5.137 — HOME DASHBOARD DENSITY + POPULAR TANK CARDS POLISH
   HOME-only final lower-half density pass. No data, routing or backend changes.
   ===================================================================== */

/* One compact desktop baseline for all three dashboard panels. */
@media (min-width:1051px){
  body.homePageActive .approvedHomeDashboard{
    align-items:stretch!important;
    margin-top:8px!important;
  }
  body.homePageActive .approvedHomeDashboard > .homePanel,
  body.homePageActive .approvedHomeDashboard > .damagePanel,
  body.homePageActive .approvedHomeDashboard > .latestPanel,
  body.homePageActive .approvedHomeDashboard > .popularPanel{
    height:326px!important;
    min-height:326px!important;
    max-height:326px!important;
    padding:11px 11px 13px!important;
    overflow:visible!important;
  }
  body.homePageActive .approvedHomeDashboard .panelTitle{
    flex:0 0 34px!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 3px 7px!important;
  }

  /* Left list already has the approved 264px TOP-5 rhythm. */
  body.homePageActive .approvedHomeDashboard .damagePanel .damageList{
    height:264px!important;
    min-height:264px!important;
    max-height:264px!important;
  }

  /* Latest replays now consume the same useful vertical space instead of ending early. */
  body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid{
    grid-template-rows:repeat(3,84px)!important;
    grid-auto-rows:84px!important;
    gap:6px!important;
    padding:0!important;
    height:264px!important;
    min-height:264px!important;
    max-height:264px!important;
  }
  body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid > .latestCard.latestReplayRow,
  body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid > .latestCard.latestReplayRow:has(.latestAwards){
    grid-template-rows:84px!important;
    height:84px!important;
    min-height:84px!important;
    max-height:84px!important;
  }
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestArt,
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestBody,
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestStats{
    height:84px!important;
    min-height:84px!important;
    max-height:84px!important;
  }

  /* Popular mini-card rail uses the same 264px content endpoint. */
  body.homePageActive .approvedHomeDashboard .popularPanel .popularList{
    display:grid!important;
    grid-template-rows:repeat(5,49px)!important;
    align-content:space-between!important;
    gap:0!important;
    height:264px!important;
    min-height:264px!important;
    max-height:264px!important;
    padding:0!important;
    overflow:visible!important;
  }
}

/* POPULAR TANKS — full mini-cards, aligned real tank art, replay count and progress accent. */
body.homePageActive .approvedHomeDashboard .popularPanel{
  overflow:visible!important;
}
body.homePageActive .approvedHomeDashboard .popularPanel .popularRow,
body.homePageActive .popularMiniCard{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:24px 70px minmax(0,1fr) 78px!important;
  grid-template-rows:1fr!important;
  align-items:center!important;
  gap:7px!important;
  height:49px!important;
  min-height:49px!important;
  max-height:49px!important;
  padding:0 8px 2px 5px!important;
  border:1px solid rgba(174,190,183,.13)!important;
  border-radius:7px!important;
  background:linear-gradient(105deg,rgba(19,29,26,.92),rgba(8,14,12,.94) 66%,rgba(16,22,18,.91))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018),0 5px 12px rgba(0,0,0,.11)!important;
  transition:transform .20s ease,border-color .20s ease,box-shadow .20s ease,background .20s ease!important;
}
body.homePageActive .popularMiniCard::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-70%;
  bottom:-70%;
  left:-46%;
  width:28%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(235,199,88,.105),rgba(170,235,49,.065),transparent);
  opacity:0;
  pointer-events:none;
}
body.homePageActive .popularMiniCard:hover{
  z-index:4!important;
  transform:translateY(-2px) scale(1.006)!important;
  border-color:rgba(222,189,84,.34)!important;
  background:linear-gradient(105deg,rgba(27,36,30,.97),rgba(10,17,14,.97) 65%,rgba(21,29,22,.95))!important;
  box-shadow:0 10px 22px rgba(0,0,0,.30),0 0 18px rgba(211,180,70,.07),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body.homePageActive .popularMiniCard:hover::before{
  opacity:1;
  animation:homePopularShimmer .72s ease-out 1;
}
@keyframes homePopularShimmer{from{left:-46%}to{left:126%}}

/* TOP-1 gets only a restrained premium accent, not a second hero card. */
body.homePageActive .popularMiniCard.popular-rank-1{
  border-color:rgba(232,190,73,.31)!important;
  background:linear-gradient(105deg,rgba(48,37,16,.46),rgba(12,18,15,.96) 45%,rgba(15,22,17,.97))!important;
  box-shadow:inset 3px 0 0 rgba(235,188,61,.55),0 7px 17px rgba(0,0,0,.16)!important;
}
body.homePageActive .popularMiniCard.popular-rank-1:hover{
  border-color:rgba(235,195,83,.46)!important;
  box-shadow:0 13px 25px rgba(0,0,0,.32),0 0 20px rgba(226,185,65,.10),inset 3px 0 0 rgba(244,199,71,.72)!important;
}

body.homePageActive .popularMiniCard .popularNum{
  width:21px!important;
  height:21px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(179,192,190,.21)!important;
  border-radius:5px!important;
  background:rgba(6,12,10,.70)!important;
  color:#b9c4bf!important;
  font-size:8.2px!important;
  line-height:1!important;
  font-weight:900!important;
}
body.homePageActive .popularMiniCard.popular-rank-1 .popularNum{
  border-color:rgba(232,190,73,.42)!important;
  background:rgba(95,70,15,.22)!important;
  color:#f0c85c!important;
  box-shadow:0 0 10px rgba(232,190,73,.07)!important;
}

body.homePageActive .popularMiniCard .popularTankIcon{
  width:70px!important;
  height:43px!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  background:none!important;
  filter:none!important;
}
body.homePageActive .popularMiniCard .popularTankIcon img{
  display:block!important;
  width:70px!important;
  height:43px!important;
  max-width:70px!important;
  max-height:43px!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:scale(.98)!important;
  transform-origin:center center!important;
  filter:brightness(1.09) contrast(1.04) drop-shadow(0 6px 7px rgba(0,0,0,.54))!important;
  transition:transform .22s ease,filter .22s ease!important;
}
body.homePageActive .popularMiniCard:hover .popularTankIcon img{
  transform:scale(1.045)!important;
  filter:brightness(1.16) contrast(1.05) drop-shadow(0 8px 8px rgba(0,0,0,.58))!important;
}

body.homePageActive .popularMiniCard .popularIdentity{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  line-height:1!important;
  white-space:normal!important;
}
body.homePageActive .popularMiniCard .popularIdentity>span{
  display:block!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#eef3f0!important;
  font-size:10.8px!important;
  line-height:1.03!important;
  font-weight:900!important;
  letter-spacing:.003em!important;
}
body.homePageActive .popularMiniCard .popularIdentity>small{
  display:block!important;
  margin-top:4px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#7f8d87!important;
  font-size:5.6px!important;
  line-height:1!important;
  font-weight:700!important;
  text-transform:uppercase!important;
  letter-spacing:.055em!important;
}
body.homePageActive .popularMiniCard.popular-rank-1 .popularIdentity>small{
  color:#b99a50!important;
}

body.homePageActive .popularReplayCount{
  min-width:0!important;
  height:31px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:5px!important;
  padding-left:6px!important;
  border-left:1px solid rgba(143,166,166,.12)!important;
}
body.homePageActive .popularReplayIcon{
  width:15px!important;
  height:15px!important;
  flex:0 0 15px!important;
  color:#a9df35!important;
  opacity:.92!important;
}
body.homePageActive .popularReplayCount>span:last-child{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  justify-content:center!important;
}
body.homePageActive .popularReplayCount b{
  color:#dfe8e3!important;
  font-size:10.6px!important;
  line-height:.95!important;
  font-weight:900!important;
}
body.homePageActive .popularReplayCount small{
  margin-top:3px!important;
  color:#77857f!important;
  font-size:5.2px!important;
  line-height:1!important;
  font-weight:700!important;
  text-transform:uppercase!important;
}

body.homePageActive .popularProgress{
  position:absolute!important;
  z-index:3!important;
  left:6px!important;
  right:6px!important;
  bottom:2px!important;
  height:2px!important;
  overflow:hidden!important;
  border-radius:2px!important;
  background:rgba(151,174,165,.055)!important;
  pointer-events:none!important;
}
body.homePageActive .popularProgress i{
  display:block!important;
  width:var(--pop)!important;
  height:100%!important;
  border-radius:inherit!important;
  background:linear-gradient(90deg,rgba(112,159,13,.62),rgba(169,229,27,.88))!important;
  box-shadow:0 0 8px rgba(169,229,27,.10)!important;
}
body.homePageActive .popularMiniCard.popular-rank-1 .popularProgress i{
  background:linear-gradient(90deg,rgba(172,127,28,.70),rgba(232,190,73,.96),rgba(169,229,27,.72))!important;
}

/* Remove the obsolete four-stick indicator completely. */
body.homePageActive .popularBars{display:none!important}

/* Lift the lower feature band to the dashboard and keep the four blocks aligned. */
body.homePageActive .approvedHomeFeatures{
  margin-top:6px!important;
  margin-bottom:18px!important;
}

/* Stacked HOME: keep mini-cards readable without reintroducing fixed desktop panel heights. */
@media (max-width:1050px){
  body.homePageActive .approvedHomeDashboard > .homePanel,
  body.homePageActive .approvedHomeDashboard > .damagePanel,
  body.homePageActive .approvedHomeDashboard > .latestPanel,
  body.homePageActive .approvedHomeDashboard > .popularPanel{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
  body.homePageActive .approvedHomeDashboard .popularPanel .popularList{
    display:grid!important;
    grid-template-rows:repeat(5,49px)!important;
    gap:5px!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:0!important;
  }
}
@media (max-width:520px){
  body.homePageActive .popularMiniCard{
    grid-template-columns:22px 62px minmax(0,1fr) 70px!important;
    gap:5px!important;
    padding-left:4px!important;
    padding-right:6px!important;
  }
  body.homePageActive .popularMiniCard .popularTankIcon,
  body.homePageActive .popularMiniCard .popularTankIcon img{
    width:62px!important;
    max-width:62px!important;
  }
  body.homePageActive .popularMiniCard .popularIdentity>span{font-size:9.8px!important}
  body.homePageActive .popularReplayIcon{width:13px!important;height:13px!important;flex-basis:13px!important}
  body.homePageActive .popularReplayCount b{font-size:9.5px!important}
}
@media (prefers-reduced-motion:reduce){
  body.homePageActive .popularMiniCard,
  body.homePageActive .popularMiniCard .popularTankIcon img{transition:none!important}
  body.homePageActive .popularMiniCard:hover::before{animation:none!important}
}


/* =====================================================================
   v0.3.5.138 — BATTLE REPORT GRID ALIGNMENT
   Battle-detail layout only. Rebuild the report below the approved hero
   on one clean inner grid: symmetric gutters, equal tabs, equal KPI cells,
   and three equal detailed-report columns. No data/routing/parser changes.
   ===================================================================== */

/* Desktop: report content follows the exact same 48px inner guides used by
   the hero KPI/submetric strips. The outer hero/report canvas stays unchanged. */
@media (min-width:1251px){
  .cinematicReplayPage .cinematicReportShell{
    overflow:hidden!important;
  }

  .cinematicReplayPage .cinematicTabs{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:8px!important;
    height:56px!important;
    padding:0 48px!important;
    box-sizing:border-box!important;
  }

  .cinematicReplayPage .cinematicTabs button{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:56px!important;
    margin:0!important;
    padding:0 18px!important;
    flex:none!important;
    justify-self:stretch!important;
    border-radius:5px 5px 0 0!important;
    font-size:13px!important;
  }

  .cinematicReplayPage .battleReportContent.cinematicReportContent{
    width:100%!important;
    padding:10px 48px 24px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }

  .cinematicReplayPage .reportPane{
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  /* Detailed tab: one strict 8-column KPI rail. */
  .cinematicReplayPage .approvedDetailQuick{
    width:100%!important;
    height:62px!important;
    margin:0!important;
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    box-sizing:border-box!important;
  }

  .cinematicReplayPage .approvedDetailQuick>div{
    min-width:0!important;
    min-height:62px!important;
    height:62px!important;
    grid-template-columns:31px minmax(0,1fr)!important;
    column-gap:8px!important;
    padding:9px 10px!important;
    box-sizing:border-box!important;
  }

  .cinematicReplayPage .approvedDetailQuick strong,
  .cinematicReplayPage .approvedDetailQuick small{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  .cinematicReplayPage .approvedDetailQuick strong{
    font-size:16px!important;
  }

  .cinematicReplayPage .approvedDetailQuick small{
    font-size:8px!important;
    letter-spacing:.005em!important;
  }

  /* Three report cards are now genuinely equal instead of 1.08 / 1.08 / 1. */
  .cinematicReplayPage .approvedReportGrid{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:12px!important;
    margin:12px 0 0!important;
    box-sizing:border-box!important;
  }

  .cinematicReplayPage .approvedReportPanel{
    width:auto!important;
    min-width:0!important;
    height:100%!important;
    box-sizing:border-box!important;
  }

  .cinematicReplayPage .approvedPanelTitle{
    width:100%!important;
    min-width:0!important;
    height:58px!important;
    padding:0 14px!important;
    box-sizing:border-box!important;
  }

  .cinematicReplayPage .approvedPanelTitle h3{
    min-width:0!important;
    font-size:18px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  .cinematicReplayPage .approvedPanelTitle>small{
    min-width:0!important;
    font-size:8px!important;
    line-height:1.1!important;
    text-align:right!important;
  }

  .cinematicReplayPage .approvedDetailRow{
    grid-template-columns:minmax(0,1fr) minmax(92px,34%)!important;
    min-width:0!important;
    padding-left:13px!important;
    padding-right:13px!important;
    box-sizing:border-box!important;
  }

  .cinematicReplayPage .approvedDetailRow>div,
  .cinematicReplayPage .approvedDetailRow>strong{
    min-width:0!important;
  }

  .cinematicReplayPage .approvedDetailRow>div>span{
    display:block!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:12px!important;
  }

  .cinematicReplayPage .approvedDetailRow>strong,
  .cinematicReplayPage .approvedDetailRow>strong .value{
    font-size:13px!important;
    white-space:nowrap!important;
  }

  .cinematicReplayPage .approvedFinanceTotal,
  .cinematicReplayPage .approvedXpTotal,
  .cinematicReplayPage .approvedXpFoot{
    box-sizing:border-box!important;
  }

  /* Personal/teams tabs use the same report inner edges too. */
  .cinematicReplayPage .cinematicEfficiency,
  .cinematicReplayPage .cinematicTeamsGrid{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
}

/* Tablet: keep the same idea with slightly smaller symmetric gutters. */
@media (max-width:1250px) and (min-width:851px){
  .cinematicReplayPage .cinematicTabs{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    padding:0 24px!important;
    box-sizing:border-box!important;
  }

  .cinematicReplayPage .cinematicTabs button{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    flex:none!important;
  }

  .cinematicReplayPage .battleReportContent.cinematicReportContent{
    padding-left:24px!important;
    padding-right:24px!important;
    box-sizing:border-box!important;
  }

  .cinematicReplayPage .approvedReportGrid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
  }

  .cinematicReplayPage .approvedDetailQuick{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

/* =====================================================================
   v0.3.5.139 — PLAYER PROFILE FOUNDATION
   New internal FermaniHUB player page keyed by region + account_id.
   Existing HOME, /replays and battle-detail layouts remain unchanged.
   ===================================================================== */

body.playerPageActive{
  background:radial-gradient(circle at 72% 0,rgba(42,66,52,.24) 0,transparent 28%),#070b0a!important;
}

.playerProfileLink{
  cursor:pointer!important;
  transition:color .16s ease,text-shadow .16s ease!important;
}
.playerProfileLink:hover,
.playerProfileLink:focus-visible{
  color:#b9ee43!important;
  text-shadow:0 0 12px rgba(169,229,27,.16)!important;
  outline:none!important;
}
.approvedReplaysMockup .cardFoot .cardPlayerName.playerProfileLink:hover{
  color:#c5f15f!important;
}
body.homePageActive .damagePlayerProfileLink,
body.homePageActive .topBattlePlayerProfileLink{
  display:inline!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.cinematicReplayPage .approvedPlayerName.playerProfileLink{
  display:inline-block!important;
  text-decoration:none!important;
}
.cinematicReplayPage .approvedPlayerName.playerProfileLink:hover{
  color:#bcf04a!important;
}

.playerProfilePage{
  width:min(1280px,calc(100% - 40px))!important;
  max-width:1280px!important;
  margin:0 auto!important;
  padding:18px 0 64px!important;
}

.playerProfileHero{
  --player-hero-map:url('/assets/replays_hero_generated_light_wide.jpg');
  position:relative!important;
  height:330px!important;
  min-height:330px!important;
  overflow:hidden!important;
  border:1px solid rgba(202,217,211,.14)!important;
  border-radius:9px!important;
  background:#09100d!important;
  box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.018)!important;
}
.playerProfileHeroBg{
  position:absolute!important;
  inset:0!important;
  background-image:var(--player-hero-map)!important;
  background-size:cover!important;
  background-position:center 48%!important;
  filter:saturate(.83) contrast(1.04) brightness(.82)!important;
  transform:scale(1.015)!important;
}
.playerProfileHeroShade{
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(90deg,rgba(4,9,8,.97) 0%,rgba(4,9,8,.86) 34%,rgba(5,10,9,.34) 62%,rgba(5,10,9,.14) 78%,rgba(5,10,9,.52) 100%),
    linear-gradient(180deg,rgba(4,8,7,.08),rgba(4,8,7,.08) 62%,rgba(5,10,9,.92) 100%)!important;
}
.playerProfileHeroMain{
  position:absolute!important;
  z-index:5!important;
  left:42px!important;
  top:35px!important;
  width:560px!important;
  max-width:48%!important;
}
.playerProfileEyebrow,
.playerReplayEyebrow{
  color:#9aa7a0!important;
  font-size:8px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
}
.playerProfileEyebrow::before,
.playerReplayEyebrow::before{
  content:""!important;
  display:inline-block!important;
  width:19px!important;
  height:2px!important;
  margin-right:8px!important;
  vertical-align:middle!important;
  background:#a9e51b!important;
  box-shadow:0 0 10px rgba(169,229,27,.18)!important;
}
.playerProfileNameLine{
  display:flex!important;
  align-items:center!important;
  gap:13px!important;
  min-width:0!important;
  margin-top:12px!important;
}
.playerProfileNameLine h1{
  min-width:0!important;
  margin:0!important;
  overflow:hidden!important;
  color:#f4f6f5!important;
  font-size:43px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:-.035em!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.playerRegionBadge{
  flex:0 0 auto!important;
  height:28px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:0 9px!important;
  border:1px solid rgba(176,198,186,.20)!important;
  border-radius:4px!important;
  background:rgba(7,14,11,.72)!important;
  color:#c9d1cd!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
}
.playerRegionIcon{width:14px!important;height:14px!important;color:#a9e51b!important}
.playerProfileMeta{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin-top:13px!important;
}
.playerProfileMeta>span:not(.approvedPlayerStats){
  height:25px!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:0 9px!important;
  border:1px solid rgba(164,184,174,.13)!important;
  border-radius:4px!important;
  background:rgba(8,15,12,.58)!important;
  color:#98a49e!important;
  font-size:7.5px!important;
  font-weight:800!important;
  letter-spacing:.035em!important;
  text-transform:uppercase!important;
}
.playerProfileMeta .approvedPlayerStats{
  position:static!important;
  height:25px!important;
  min-width:58px!important;
  padding:0 8px!important;
  border-radius:4px!important;
}
.playerProfileHeroMain>p{
  width:470px!important;
  max-width:100%!important;
  margin:13px 0 0!important;
  color:#899790!important;
  font-size:9.5px!important;
  line-height:1.45!important;
}
.playerProfileHeroTank{
  position:absolute!important;
  z-index:3!important;
  right:2.5%!important;
  top:14px!important;
  width:51%!important;
  height:222px!important;
  object-fit:contain!important;
  object-position:center center!important;
  filter:brightness(1.08) contrast(1.04) drop-shadow(0 22px 22px rgba(0,0,0,.58))!important;
  pointer-events:none!important;
}
.playerProfileKpis{
  position:absolute!important;
  z-index:7!important;
  left:24px!important;
  right:24px!important;
  bottom:18px!important;
  height:70px!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  overflow:hidden!important;
  border:1px solid rgba(201,219,210,.14)!important;
  border-radius:5px!important;
  background:rgba(7,13,11,.82)!important;
  backdrop-filter:blur(14px)!important;
}
.playerProfileKpis>div{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  align-content:center!important;
  column-gap:9px!important;
  padding:0 14px!important;
  position:relative!important;
}
.playerProfileKpis>div:not(:last-child)::after{
  content:""!important;
  position:absolute!important;
  right:0!important;
  top:18%!important;
  bottom:18%!important;
  width:1px!important;
  background:rgba(205,219,212,.10)!important;
}
.playerProfileKpis>div>span{
  grid-row:1/3!important;
  width:29px!important;
  height:29px!important;
  display:grid!important;
  place-items:center!important;
  color:#b9e650!important;
}
.playerProfileKpis .playerProfileKpiIcon,
.playerProfileKpis .cardPremiumKpiIcon,
.playerProfileKpis img{
  width:26px!important;
  height:26px!important;
  max-width:26px!important;
  max-height:26px!important;
  object-fit:contain!important;
}
.playerProfileKpis strong{
  min-width:0!important;
  align-self:end!important;
  color:#f2f5f3!important;
  font-size:20px!important;
  line-height:1!important;
  font-weight:900!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.playerProfileKpis small{
  align-self:start!important;
  margin-top:4px!important;
  color:#7f8d86!important;
  font-size:6.5px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:.065em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}

.playerProfileOverview{
  display:grid!important;
  grid-template-columns:minmax(0,1.55fr) minmax(340px,.92fr)!important;
  gap:12px!important;
  margin-top:14px!important;
}
.playerProfileBestBlock,
.playerFavoritePanel{
  min-width:0!important;
  padding:12px!important;
  border:1px solid rgba(149,170,159,.14)!important;
  border-radius:7px!important;
  background:linear-gradient(180deg,rgba(12,19,16,.96),rgba(8,13,11,.98))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.012)!important;
}
.playerProfileSectionHead{
  height:38px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  padding:0 2px!important;
}
.playerProfileSectionHead span{
  display:block!important;
  color:#78867f!important;
  font-size:6.5px!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}
.playerProfileSectionHead h2{
  margin:4px 0 0!important;
  color:#edf1ef!important;
  font-size:17px!important;
  line-height:1!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:-.01em!important;
}
.playerBestBattle{
  height:274px!important;
  overflow:hidden!important;
  border:1px solid rgba(183,200,192,.15)!important;
  border-radius:6px!important;
  background:#09100d!important;
  cursor:pointer!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.playerBestBattle:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(218,183,74,.34)!important;
  box-shadow:0 14px 32px rgba(0,0,0,.25),0 0 18px rgba(218,183,74,.05)!important;
}
.playerBestBattleScene{
  position:relative!important;
  height:204px!important;
  overflow:hidden!important;
  background-size:cover!important;
  background-position:center!important;
}
.playerBestBattleScene::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(180deg,transparent 58%,rgba(5,10,8,.74) 100%)!important;
  pointer-events:none!important;
}
.playerBestBattleCopy{
  position:absolute!important;
  z-index:4!important;
  left:22px!important;
  top:21px!important;
  width:45%!important;
}
.playerBestBadge{
  height:23px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:0 8px!important;
  border:1px solid rgba(222,184,67,.29)!important;
  border-radius:4px!important;
  background:rgba(55,41,10,.30)!important;
  color:#e5bd4f!important;
  font-size:6.5px!important;
  font-weight:900!important;
  letter-spacing:.09em!important;
}
.playerBestBadgeIcon{width:13px!important;height:13px!important;color:#e5bd4f!important}
.playerBestBattleCopy h2{
  margin:13px 0 0!important;
  color:#fff!important;
  font-size:24px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:-.025em!important;
  text-transform:uppercase!important;
}
.playerBestBattleCopy p{
  margin:6px 0 0!important;
  color:#9aa59f!important;
  font-size:8px!important;
}
.playerBestBattleCopy .outcome{font-weight:900!important}
.playerBestDamage{
  display:flex!important;
  align-items:flex-end!important;
  gap:8px!important;
  margin-top:15px!important;
}
.playerBestDamage strong{
  color:#b4eb39!important;
  font-size:38px!important;
  line-height:.85!important;
  font-weight:950!important;
  letter-spacing:-.035em!important;
  text-shadow:0 0 18px rgba(169,229,27,.11)!important;
}
.playerBestDamage span{
  color:#89968f!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:.09em!important;
}
.playerBestTank{
  position:absolute!important;
  z-index:3!important;
  right:1%!important;
  bottom:-4%!important;
  width:60%!important;
  height:94%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  filter:brightness(1.09) contrast(1.05) drop-shadow(0 14px 14px rgba(0,0,0,.52))!important;
  transition:transform .20s ease,filter .20s ease!important;
}
.playerBestBattle:hover .playerBestTank{
  transform:scale(1.025)!important;
  filter:brightness(1.14) contrast(1.05) drop-shadow(0 16px 17px rgba(0,0,0,.58))!important;
}
.playerBestBattleStats{
  height:69px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr)) 150px!important;
  align-items:stretch!important;
  border-top:1px solid rgba(184,200,192,.13)!important;
  background:linear-gradient(180deg,#0d1512,#09100e)!important;
}
.playerBestBattleStats>div{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:26px minmax(0,1fr)!important;
  align-items:center!important;
  gap:7px!important;
  padding:0 12px!important;
  border-right:1px solid rgba(184,200,192,.10)!important;
}
.playerBestBattleStats>div>img,
.playerBestBattleStats>div>.cardPremiumKpiIcon{
  width:24px!important;
  height:24px!important;
  max-width:24px!important;
  max-height:24px!important;
  object-fit:contain!important;
}
.playerBestBattleStats>div span{min-width:0!important;display:flex!important;flex-direction:column!important}
.playerBestBattleStats b{color:#e9eeeb!important;font-size:14px!important;line-height:1!important}
.playerBestBattleStats small{margin-top:4px!important;color:#74827b!important;font-size:5.8px!important;text-transform:uppercase!important;letter-spacing:.055em!important}
.playerBestOpen{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#a7df2c!important;
  font-size:7.5px!important;
  font-weight:900!important;
  letter-spacing:.065em!important;
  text-transform:uppercase!important;
}
.playerBestOpen i{margin-left:6px!important;font-style:normal!important;transition:transform .16s ease!important}
.playerBestBattle:hover .playerBestOpen i{transform:translateX(3px)!important}

.playerFavoriteList{
  display:grid!important;
  grid-template-rows:repeat(5,50px)!important;
  gap:5px!important;
}
.playerFavoriteTank{
  --player-tank-pop:20%;
  position:relative!important;
  isolation:isolate!important;
  min-width:0!important;
  height:50px!important;
  display:grid!important;
  grid-template-columns:24px 72px minmax(0,1fr) 70px!important;
  align-items:center!important;
  gap:6px!important;
  overflow:hidden!important;
  padding:0 7px 2px 5px!important;
  border:1px solid rgba(169,187,178,.12)!important;
  border-radius:6px!important;
  background:linear-gradient(105deg,rgba(19,28,24,.90),rgba(8,14,11,.95))!important;
  transition:transform .17s ease,border-color .17s ease,background .17s ease!important;
}
.playerFavoriteTank:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(169,229,27,.25)!important;
  background:linear-gradient(105deg,rgba(24,34,28,.96),rgba(9,16,13,.98))!important;
}
.playerFavoriteTank.leader{
  border-color:rgba(224,184,69,.28)!important;
  background:linear-gradient(105deg,rgba(52,39,14,.42),rgba(10,17,14,.96) 48%)!important;
  box-shadow:inset 3px 0 0 rgba(228,188,70,.54)!important;
}
.playerFavoriteRank{
  width:20px!important;
  height:20px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(176,191,184,.20)!important;
  border-radius:4px!important;
  background:rgba(5,10,8,.68)!important;
  color:#b4c0ba!important;
  font-size:7px!important;
  font-weight:900!important;
}
.playerFavoriteTank.leader .playerFavoriteRank{color:#ebc25a!important;border-color:rgba(232,194,88,.34)!important}
.playerFavoriteArt,
.playerFavoriteArt img{
  width:72px!important;
  height:44px!important;
  max-width:72px!important;
  max-height:44px!important;
}
.playerFavoriteArt{display:grid!important;place-items:center!important;overflow:visible!important}
.playerFavoriteArt img{object-fit:contain!important;filter:brightness(1.08) contrast(1.04) drop-shadow(0 6px 6px rgba(0,0,0,.48))!important}
.playerFavoriteIdentity{min-width:0!important;display:flex!important;flex-direction:column!important}
.playerFavoriteIdentity strong{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#e9efeb!important;font-size:10px!important;line-height:1!important}
.playerFavoriteIdentity small{margin-top:4px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#77857e!important;font-size:5.5px!important;text-transform:uppercase!important;letter-spacing:.04em!important}
.playerFavoriteReplayCount{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:5px!important;
  padding-left:5px!important;
  border-left:1px solid rgba(159,180,169,.10)!important;
}
.playerFavoriteReplayIcon{width:14px!important;height:14px!important;color:#a9df35!important}
.playerFavoriteReplayCount>span{display:flex!important;flex-direction:column!important;align-items:flex-end!important}
.playerFavoriteReplayCount b{color:#dce5e0!important;font-size:9.5px!important;line-height:1!important}
.playerFavoriteReplayCount small{margin-top:3px!important;color:#718079!important;font-size:5px!important;text-transform:uppercase!important}
.playerFavoriteProgress{
  position:absolute!important;
  left:5px!important;
  right:5px!important;
  bottom:2px!important;
  height:2px!important;
  overflow:hidden!important;
  border-radius:2px!important;
  background:rgba(143,166,156,.05)!important;
}
.playerFavoriteProgress i{
  display:block!important;
  width:var(--player-tank-pop)!important;
  height:100%!important;
  background:linear-gradient(90deg,rgba(107,153,20,.68),rgba(169,229,27,.89))!important;
}
.playerFavoriteTank.leader .playerFavoriteProgress i{background:linear-gradient(90deg,rgba(174,128,31,.73),rgba(232,190,73,.96),rgba(169,229,27,.70))!important}

.playerReplaySection{
  margin-top:14px!important;
  padding-top:16px!important;
  border-top:1px solid rgba(157,178,168,.13)!important;
}
.playerReplayHeader{
  min-height:68px!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:18px!important;
  margin-bottom:12px!important;
}
.playerReplayHeader h2{
  margin:6px 0 0!important;
  color:#f0f3f1!important;
  font-size:27px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:-.025em!important;
  text-transform:uppercase!important;
}
.playerReplayHeader p{
  margin:7px 0 0!important;
  color:#79867f!important;
  font-size:8px!important;
}
.playerReplayHeader p b{color:#b7c4bd!important}
.playerReplayControls{
  display:flex!important;
  align-items:flex-end!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
}
.playerControlGroup{
  display:grid!important;
  grid-template-columns:auto auto!important;
  grid-template-rows:12px 32px!important;
  gap:0 4px!important;
}
.playerControlGroup small{
  grid-column:1/-1!important;
  color:#6f7d76!important;
  font-size:5.5px!important;
  font-weight:800!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
}
.playerControlGroup a{
  min-width:72px!important;
  height:32px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 10px!important;
  border:1px solid rgba(156,176,166,.14)!important;
  border-radius:4px!important;
  background:#0b1210!important;
  color:#88958e!important;
  text-decoration:none!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:.05em!important;
  text-transform:uppercase!important;
}
.playerControlGroup a:hover{border-color:rgba(169,229,27,.28)!important;color:#c4d0ca!important}
.playerControlGroup a.active{
  border-color:rgba(169,229,27,.38)!important;
  background:linear-gradient(180deg,rgba(98,141,17,.24),rgba(42,66,12,.18))!important;
  color:#b8eb48!important;
  box-shadow:inset 0 -2px 0 rgba(169,229,27,.52)!important;
}
.playerReplayGrid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
}
.playerReplayGrid>.playerReplayEmpty{grid-column:1/-1!important}
.playerProfilePager>.catalogPager{margin-top:14px!important;margin-bottom:0!important}
.playerProfileEmpty{
  min-height:80px!important;
  display:grid!important;
  place-items:center!important;
  color:#728079!important;
  font-size:8px!important;
  text-align:center!important;
  border:1px dashed rgba(151,170,161,.16)!important;
  border-radius:5px!important;
}

@media(max-width:1100px){
  .playerProfilePage{width:calc(100% - 28px)!important}
  .playerProfileHeroMain{left:28px!important;max-width:56%!important}
  .playerProfileHeroTank{right:-2%!important;width:55%!important}
  .playerProfileKpis{left:18px!important;right:18px!important}
  .playerProfileOverview{grid-template-columns:1fr!important}
  .playerFavoriteList{grid-template-columns:1fr 1fr!important;grid-template-rows:none!important}
  .playerFavoriteTank:last-child{grid-column:1/-1!important}
  .playerReplayGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:820px){
  .playerProfileHero{height:410px!important;min-height:410px!important}
  .playerProfileHeroMain{left:22px!important;top:28px!important;width:calc(100% - 44px)!important;max-width:none!important}
  .playerProfileHeroTank{right:-10%!important;top:106px!important;width:70%!important;height:190px!important;opacity:.52!important}
  .playerProfileKpis{height:auto!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;bottom:14px!important}
  .playerProfileKpis>div{min-height:56px!important}
  .playerProfileKpis>div:last-child{grid-column:1/-1!important}
  .playerReplayHeader{align-items:flex-start!important;flex-direction:column!important}
  .playerReplayControls{justify-content:flex-start!important}
  .playerReplayGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){
  .playerProfilePage{width:calc(100% - 18px)!important;padding-top:10px!important}
  .playerProfileHero{height:470px!important}
  .playerProfileNameLine h1{font-size:31px!important}
  .playerProfileMeta{gap:5px!important}
  .playerProfileHeroTank{top:130px!important;width:92%!important;right:-23%!important;opacity:.42!important}
  .playerProfileKpis{left:9px!important;right:9px!important;grid-template-columns:1fr 1fr!important}
  .playerProfileKpis>div{padding:0 9px!important}
  .playerProfileOverview{gap:9px!important;margin-top:9px!important}
  .playerBestBattleStats{grid-template-columns:repeat(3,1fr)!important;height:96px!important}
  .playerBestBattle{height:301px!important}
  .playerBestOpen{grid-column:1/-1!important;border-top:1px solid rgba(184,200,192,.10)!important;min-height:28px!important}
  .playerFavoriteList{grid-template-columns:1fr!important}
  .playerFavoriteTank:last-child{grid-column:auto!important}
  .playerReplayControls{width:100%!important}
  .playerControlGroup{flex:1 1 auto!important}
  .playerControlGroup a{min-width:64px!important}
  .playerReplayGrid{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){
  .playerProfileLink,.playerBestBattle,.playerBestTank,.playerFavoriteTank{transition:none!important}
}

/* =====================================================================
   v0.3.5.140 — PLAYER HERO + KPI PREMIUM POLISH
   Premium identity-first player hero. Only the player-profile hero and its
   KPI rail are changed; best battle, tank panel and replay archive stay 139.
   ===================================================================== */

.playerProfileHero{
  height:330px!important;
  min-height:330px!important;
  border-color:rgba(198,216,207,.16)!important;
  background:#080e0c!important;
  box-shadow:0 20px 58px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.024)!important;
}
.playerProfileHero::before{
  content:""!important;
  position:absolute!important;
  z-index:6!important;
  left:0!important;
  top:0!important;
  width:180px!important;
  height:1px!important;
  background:linear-gradient(90deg,rgba(169,229,27,.92),rgba(169,229,27,.28),transparent)!important;
  box-shadow:0 0 16px rgba(169,229,27,.12)!important;
  pointer-events:none!important;
}
.playerProfileHeroBg{
  background-position:center 50%!important;
  filter:saturate(.68) contrast(1.05) brightness(.70)!important;
  transform:scale(1.01)!important;
}
.playerProfileHeroShade{
  background:
    radial-gradient(circle at 79% 23%,rgba(169,229,27,.055),transparent 23%),
    linear-gradient(90deg,rgba(3,8,7,.985) 0%,rgba(4,9,8,.93) 35%,rgba(5,10,9,.62) 55%,rgba(5,10,9,.37) 72%,rgba(4,9,8,.70) 100%),
    linear-gradient(180deg,rgba(4,8,7,.10),rgba(4,8,7,.13) 59%,rgba(5,10,9,.96) 100%)!important;
}
.playerProfileHeroMain{
  left:42px!important;
  top:31px!important;
  width:650px!important;
  max-width:58%!important;
}
.playerProfileEyebrow{
  color:#8f9d96!important;
  font-size:7.5px!important;
  letter-spacing:.17em!important;
}
.playerProfileNameLine{
  gap:12px!important;
  margin-top:13px!important;
}
.playerProfileNameLine h1{
  font-size:46px!important;
  font-weight:950!important;
  letter-spacing:-.042em!important;
  text-shadow:0 8px 24px rgba(0,0,0,.32)!important;
}
.playerRegionBadge{
  height:27px!important;
  padding:0 9px!important;
  border-color:rgba(177,198,187,.17)!important;
  background:rgba(6,12,10,.72)!important;
  color:#d3ddd8!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.015)!important;
}
.playerProfileMeta{
  gap:9px!important;
  margin-top:13px!important;
  min-height:28px!important;
}
.playerProfileMeta .approvedPlayerStats{
  position:static!important;
  height:28px!important;
  min-width:86px!important;
  padding:0 10px!important;
  border-radius:4px!important;
  box-shadow:0 0 18px rgba(0,0,0,.12)!important;
}
.playerProfileMeta>span.playerProfileMetaFact{
  height:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#a4b0aa!important;
  font-size:7.5px!important;
  font-weight:850!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
}
.playerProfileMeta>span.playerProfileMetaDot{
  width:3px!important;
  height:3px!important;
  min-width:3px!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:#708078!important;
  opacity:.72!important;
}
.playerProfileHeroMain>p{
  width:520px!important;
  margin:10px 0 0!important;
  color:#798780!important;
  font-size:8px!important;
  line-height:1.45!important;
}
.playerProfileHeroActions{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  margin-top:13px!important;
}
.playerHeroAction{
  height:31px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:0 12px!important;
  border:1px solid rgba(172,192,182,.16)!important;
  border-radius:4px!important;
  background:rgba(8,15,12,.66)!important;
  color:#aab7b0!important;
  font-family:inherit!important;
  font-size:7px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  cursor:pointer!important;
  transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease!important;
}
.playerHeroAction:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(169,229,27,.30)!important;
  background:rgba(18,28,23,.82)!important;
  color:#d5dfda!important;
}
.playerHeroActionPrimary{
  border-color:rgba(169,229,27,.30)!important;
  background:linear-gradient(180deg,rgba(91,132,17,.29),rgba(41,62,12,.22))!important;
  color:#b8eb48!important;
  box-shadow:inset 0 -2px 0 rgba(169,229,27,.35),0 0 16px rgba(169,229,27,.035)!important;
}
.playerHeroActionPrimary:hover{
  border-color:rgba(169,229,27,.45)!important;
  background:linear-gradient(180deg,rgba(102,147,18,.36),rgba(45,69,12,.28))!important;
  color:#c8f267!important;
  box-shadow:inset 0 -2px 0 rgba(169,229,27,.55),0 0 20px rgba(169,229,27,.06)!important;
}
.playerHeroActionIcon,
.playerHeroAction .homeHudIcon,
.playerHeroAction .uiMaskIcon{
  width:14px!important;
  height:14px!important;
  flex:0 0 14px!important;
  color:currentColor!important;
}

/* The tank is atmospheric context now, not the identity of the profile. */
.playerProfileHeroTank{
  z-index:3!important;
  right:4.5%!important;
  top:31px!important;
  width:39%!important;
  height:184px!important;
  object-position:center center!important;
  opacity:.68!important;
  filter:brightness(.76) saturate(.78) contrast(1.03) drop-shadow(0 18px 20px rgba(0,0,0,.55))!important;
  transform:translateX(2%) scale(.94)!important;
}

.playerProfileKpis{
  left:24px!important;
  right:24px!important;
  bottom:17px!important;
  height:76px!important;
  border-color:rgba(197,216,206,.16)!important;
  border-radius:5px!important;
  background:linear-gradient(180deg,rgba(11,19,16,.91),rgba(6,12,10,.91))!important;
  backdrop-filter:blur(16px)!important;
  box-shadow:0 13px 30px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.018)!important;
}
.playerProfileKpis::before{
  content:"FERMANIHUB"!important;
  position:absolute!important;
  z-index:3!important;
  left:12px!important;
  top:7px!important;
  color:rgba(153,174,164,.34)!important;
  font-size:5px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.15em!important;
  pointer-events:none!important;
}
.playerProfileKpis>div{
  grid-template-columns:31px minmax(0,1fr)!important;
  column-gap:9px!important;
  padding:7px 14px 0!important;
}
.playerProfileKpis>div>span{
  width:30px!important;
  height:30px!important;
  color:#a9df35!important;
  opacity:.88!important;
}
.playerProfileKpis .playerProfileKpiIcon,
.playerProfileKpis .cardPremiumKpiIcon,
.playerProfileKpis img{
  width:27px!important;
  height:27px!important;
  max-width:27px!important;
  max-height:27px!important;
}
.playerProfileKpis strong{
  color:#eef3f0!important;
  font-size:21px!important;
  font-weight:950!important;
  letter-spacing:-.025em!important;
}
.playerProfileKpis small{
  margin-top:4px!important;
  color:#77857e!important;
  font-size:6.1px!important;
  letter-spacing:.065em!important;
  line-height:1.15!important;
  white-space:normal!important;
}
.playerProfileKpis>div.best-damage{
  background:linear-gradient(180deg,rgba(106,152,18,.10),rgba(58,84,14,.035))!important;
}
.playerProfileKpis>div.best-damage::before{
  content:""!important;
  position:absolute!important;
  left:14px!important;
  right:14px!important;
  bottom:0!important;
  height:2px!important;
  background:linear-gradient(90deg,rgba(169,229,27,.75),rgba(169,229,27,.10),transparent)!important;
  box-shadow:0 0 10px rgba(169,229,27,.09)!important;
}
.playerProfileKpis>div.best-damage strong{
  color:#b9ed48!important;
  text-shadow:0 0 15px rgba(169,229,27,.09)!important;
}
.playerProfileKpis>div.replay-wins strong{
  color:#dce5e0!important;
}
.playerProfileKpis>div:hover{
  background-color:rgba(255,255,255,.012)!important;
}

@media(max-width:1100px){
  .playerProfileHeroMain{left:30px!important;width:620px!important;max-width:61%!important}
  .playerProfileHeroTank{right:1%!important;width:42%!important;opacity:.60!important}
  .playerProfileKpis{left:18px!important;right:18px!important}
}
@media(max-width:820px){
  .playerProfileHero{height:430px!important;min-height:430px!important}
  .playerProfileHeroMain{left:22px!important;top:25px!important;width:calc(100% - 44px)!important;max-width:none!important}
  .playerProfileHeroMain>p{width:min(520px,100%)!important}
  .playerProfileHeroTank{right:-11%!important;top:120px!important;width:64%!important;height:155px!important;opacity:.28!important;filter:brightness(.60) saturate(.65) contrast(1.02) drop-shadow(0 16px 18px rgba(0,0,0,.48))!important}
  .playerProfileKpis{height:auto!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;bottom:14px!important}
  .playerProfileKpis::before{display:none!important}
  .playerProfileKpis>div{min-height:60px!important;padding-top:0!important}
  .playerProfileKpis>div:last-child{grid-column:1/-1!important}
}
@media(max-width:560px){
  .playerProfileHero{height:500px!important;min-height:500px!important}
  .playerProfileNameLine{align-items:flex-start!important;flex-wrap:wrap!important}
  .playerProfileNameLine h1{font-size:32px!important;width:100%!important;white-space:normal!important;overflow:visible!important}
  .playerProfileMeta{gap:7px!important}
  .playerProfileMeta>span.playerProfileMetaDot{display:none!important}
  .playerProfileMeta>span.playerProfileMetaFact{width:100%!important}
  .playerProfileHeroActions{margin-top:11px!important;flex-wrap:wrap!important}
  .playerHeroAction{height:30px!important;padding:0 10px!important}
  .playerProfileHeroTank{top:176px!important;right:-25%!important;width:88%!important;opacity:.18!important}
  .playerProfileKpis{left:9px!important;right:9px!important;grid-template-columns:1fr 1fr!important}
  .playerProfileKpis>div{padding:0 9px!important;grid-template-columns:27px minmax(0,1fr)!important}
  .playerProfileKpis>div>span{width:26px!important;height:26px!important}
  .playerProfileKpis .playerProfileKpiIcon,.playerProfileKpis .cardPremiumKpiIcon,.playerProfileKpis img{width:23px!important;height:23px!important;max-width:23px!important;max-height:23px!important}
  .playerProfileKpis strong{font-size:18px!important}
  .playerProfileKpis small{font-size:5.8px!important}
}
@media(prefers-reduced-motion:reduce){
  .playerHeroAction{transition:none!important}
}
.playerReplaySection{scroll-margin-top:74px!important}


/* =====================================================================
   v0.3.5.141 — PLAYER HERO PREMIUM REBUILD + RECORD TANK LOGIC
   Approved player-profile mockup pass. The hero is now one premium scene:
   identity + dynamic record tank + record cue + integrated KPI rail.
   ===================================================================== */

.playerProfileHero{
  height:382px!important;
  min-height:382px!important;
  border-color:rgba(193,214,203,.19)!important;
  border-radius:8px!important;
  background:#070d0b!important;
  box-shadow:0 28px 80px rgba(0,0,0,.38),0 0 0 1px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.028)!important;
}
.playerProfileHero::before{
  width:245px!important;
  height:2px!important;
  background:linear-gradient(90deg,#a9e51b 0%,rgba(169,229,27,.50) 46%,transparent 100%)!important;
  box-shadow:0 0 18px rgba(169,229,27,.17)!important;
}
.playerProfileHero::after{
  content:""!important;
  position:absolute!important;
  z-index:2!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 74% 14%,rgba(246,165,67,.10),transparent 21%),
    radial-gradient(circle at 70% 48%,rgba(169,229,27,.045),transparent 27%),
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 18%,transparent 76%,rgba(0,0,0,.18))!important;
}
.playerProfileHeroBg{
  background-position:center 48%!important;
  filter:saturate(.88) contrast(1.07) brightness(.72)!important;
  transform:scale(1.018)!important;
}
.playerProfileHeroShade{
  z-index:1!important;
  background:
    linear-gradient(90deg,rgba(3,8,7,.985) 0%,rgba(3,8,7,.95) 31%,rgba(5,10,9,.62) 51%,rgba(5,10,9,.20) 73%,rgba(4,9,8,.42) 100%),
    linear-gradient(180deg,rgba(3,7,6,.05),rgba(3,7,6,.08) 53%,rgba(4,9,8,.94) 100%)!important;
}
.playerProfileHeroMain{
  z-index:8!important;
  left:48px!important;
  top:38px!important;
  width:690px!important;
  max-width:56%!important;
}
.playerProfileEyebrow{
  color:#9ba9a2!important;
  font-size:8px!important;
  letter-spacing:.18em!important;
}
.playerProfileEyebrow::before{
  width:24px!important;
  background:#b3ef28!important;
  box-shadow:0 0 12px rgba(169,229,27,.24)!important;
}
.playerProfileNameLine{
  gap:14px!important;
  margin-top:14px!important;
}
.playerProfileNameLine h1{
  font-size:53px!important;
  line-height:.98!important;
  font-weight:950!important;
  letter-spacing:-.046em!important;
  text-shadow:0 10px 30px rgba(0,0,0,.45)!important;
}
.playerRegionBadge{
  height:30px!important;
  padding:0 10px!important;
  border-color:rgba(182,203,192,.22)!important;
  background:linear-gradient(180deg,rgba(15,24,20,.86),rgba(7,13,11,.83))!important;
  color:#d9e3de!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 24px rgba(0,0,0,.18)!important;
}
.playerRegionIcon{color:#b5ed32!important}
.playerProfileMeta{
  gap:10px!important;
  margin-top:16px!important;
  min-height:31px!important;
}
.playerProfileMeta .approvedPlayerStats{
  height:31px!important;
  min-width:96px!important;
  padding:0 11px!important;
  border-color:rgba(77,210,239,.30)!important;
  background:linear-gradient(180deg,rgba(9,29,32,.84),rgba(5,18,20,.78))!important;
  box-shadow:inset 0 0 0 1px rgba(60,196,230,.045),0 8px 24px rgba(0,0,0,.16)!important;
}
.playerProfileMeta>span.playerProfileMetaFact{
  color:#aebbb4!important;
  font-size:7.8px!important;
  letter-spacing:.055em!important;
}
.playerProfileMeta>span.playerProfileMetaDot{
  background:#a9e51b!important;
  box-shadow:0 0 8px rgba(169,229,27,.32)!important;
}
.playerProfileHeroMain>p{
  width:540px!important;
  margin-top:11px!important;
  color:#7d8c84!important;
  font-size:8.2px!important;
}
.playerProfileHeroActions{
  gap:8px!important;
  margin-top:16px!important;
}
.playerHeroAction{
  height:36px!important;
  padding:0 14px!important;
  border-radius:4px!important;
  border-color:rgba(176,198,187,.19)!important;
  background:linear-gradient(180deg,rgba(18,27,23,.77),rgba(7,14,11,.74))!important;
  color:#c3cec8!important;
  font-size:7.2px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 8px 20px rgba(0,0,0,.14)!important;
}
.playerHeroActionPrimary{
  border-color:rgba(169,229,27,.48)!important;
  background:linear-gradient(180deg,#79aa11,#527c08)!important;
  color:#f2ffcf!important;
  text-shadow:0 1px 0 rgba(0,0,0,.35)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(48,76,4,.70),0 8px 24px rgba(91,139,10,.16)!important;
}
.playerHeroActionPrimary:hover{
  background:linear-gradient(180deg,#8aba17,#5f8c0a)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 -2px 0 rgba(48,76,4,.70),0 10px 28px rgba(116,171,16,.21)!important;
}

/* The hero vehicle is always the vehicle from the current highest-damage replay. */
.playerProfileHeroTank{
  z-index:4!important;
  right:6.2%!important;
  top:36px!important;
  width:48%!important;
  height:255px!important;
  object-position:center center!important;
  opacity:.93!important;
  filter:brightness(.94) saturate(.92) contrast(1.06) drop-shadow(0 24px 24px rgba(0,0,0,.66))!important;
  transform:translateX(3%) scale(1.02)!important;
}
.playerHeroRecordCue{
  position:absolute!important;
  z-index:9!important;
  top:34px!important;
  right:30px!important;
  width:184px!important;
  min-height:66px!important;
  display:grid!important;
  grid-template-columns:1fr auto!important;
  grid-template-rows:auto auto!important;
  gap:4px 10px!important;
  padding:11px 12px!important;
  border:1px solid rgba(204,221,212,.17)!important;
  border-radius:5px!important;
  background:linear-gradient(180deg,rgba(10,18,15,.87),rgba(5,11,9,.80))!important;
  color:#d8e2dd!important;
  text-align:left!important;
  font-family:inherit!important;
  cursor:pointer!important;
  backdrop-filter:blur(12px)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.025)!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease!important;
}
.playerHeroRecordCue:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(169,229,27,.36)!important;
  background:linear-gradient(180deg,rgba(17,28,23,.91),rgba(7,14,11,.87))!important;
}
.playerHeroRecordCue>span{
  grid-column:1/-1!important;
  color:#a9e51b!important;
  font-size:6px!important;
  font-weight:950!important;
  letter-spacing:.16em!important;
}
.playerHeroRecordCue>strong{
  min-width:0!important;
  overflow:hidden!important;
  color:#e7eeea!important;
  font-size:9px!important;
  font-weight:900!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.playerHeroRecordCue>b{
  color:#c4f05b!important;
  font-size:13px!important;
  font-weight:950!important;
  white-space:nowrap!important;
}
.playerHeroRecordCue>b small{
  color:#839089!important;
  font-size:6px!important;
  font-weight:850!important;
  text-transform:uppercase!important;
}

.playerProfileKpis{
  z-index:10!important;
  left:32px!important;
  right:32px!important;
  bottom:18px!important;
  height:88px!important;
  border-color:rgba(197,216,206,.18)!important;
  border-radius:6px!important;
  background:linear-gradient(180deg,rgba(11,19,16,.94),rgba(5,11,9,.94))!important;
  backdrop-filter:blur(18px)!important;
  box-shadow:0 18px 38px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.playerProfileKpis::before{
  left:13px!important;
  top:8px!important;
  color:rgba(160,180,170,.37)!important;
  font-size:5.2px!important;
}
.playerProfileKpis>div{
  grid-template-columns:38px minmax(0,1fr)!important;
  column-gap:10px!important;
  padding:9px 16px 0!important;
}
.playerProfileKpis>div>span{
  width:37px!important;
  height:37px!important;
  border:1px solid rgba(190,210,200,.10)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.018)!important;
  color:#b7e94b!important;
  opacity:.96!important;
}
.playerProfileKpis .playerProfileKpiIcon,
.playerProfileKpis .cardPremiumKpiIcon,
.playerProfileKpis img{
  width:27px!important;
  height:27px!important;
  max-width:27px!important;
  max-height:27px!important;
}
.playerProfileKpis strong{
  font-size:23px!important;
  letter-spacing:-.03em!important;
}
.playerProfileKpis small{
  margin-top:5px!important;
  color:#7f8e86!important;
  font-size:6.2px!important;
  letter-spacing:.07em!important;
}
.playerProfileKpis>div.best-damage{
  border-left:1px solid rgba(169,229,27,.18)!important;
  border-right:1px solid rgba(169,229,27,.14)!important;
  background:linear-gradient(180deg,rgba(113,162,20,.16),rgba(48,72,10,.055))!important;
  box-shadow:inset 0 0 24px rgba(169,229,27,.018)!important;
}
.playerProfileKpis>div.best-damage::before{
  left:12px!important;
  right:12px!important;
  height:2px!important;
  background:linear-gradient(90deg,#a9e51b,rgba(169,229,27,.28),transparent)!important;
  box-shadow:0 0 12px rgba(169,229,27,.14)!important;
}
.playerProfileKpis>div.best-damage>span{
  border-color:rgba(169,229,27,.18)!important;
  background:rgba(169,229,27,.035)!important;
}
.playerProfileKpis>div.best-damage strong{
  color:#bff052!important;
  text-shadow:0 0 18px rgba(169,229,27,.12)!important;
}

@media(max-width:1100px){
  .playerProfileHeroMain{left:34px!important;width:610px!important;max-width:58%!important}
  .playerProfileNameLine h1{font-size:47px!important}
  .playerProfileHeroTank{right:1%!important;width:51%!important;opacity:.84!important}
  .playerHeroRecordCue{right:18px!important;width:170px!important}
  .playerProfileKpis{left:20px!important;right:20px!important}
}
@media(max-width:820px){
  .playerProfileHero{height:470px!important;min-height:470px!important}
  .playerProfileHeroMain{left:22px!important;top:25px!important;width:calc(100% - 44px)!important;max-width:none!important}
  .playerProfileHeroTank{right:-7%!important;top:133px!important;width:67%!important;height:176px!important;opacity:.30!important;filter:brightness(.65) saturate(.72) contrast(1.03) drop-shadow(0 18px 18px rgba(0,0,0,.55))!important}
  .playerHeroRecordCue{top:148px!important;right:17px!important;width:168px!important;opacity:.90!important}
  .playerProfileKpis{height:auto!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;bottom:14px!important}
  .playerProfileKpis::before{display:none!important}
  .playerProfileKpis>div{min-height:64px!important;padding-top:0!important}
  .playerProfileKpis>div:last-child{grid-column:1/-1!important}
}
@media(max-width:560px){
  .playerProfileHero{height:550px!important;min-height:550px!important}
  .playerProfileNameLine h1{font-size:34px!important}
  .playerProfileMeta{gap:7px!important}
  .playerProfileHeroActions{margin-top:12px!important}
  .playerHeroAction{height:32px!important;padding:0 10px!important}
  .playerProfileHeroTank{top:190px!important;right:-24%!important;width:93%!important;opacity:.16!important}
  .playerHeroRecordCue{top:200px!important;right:10px!important;width:158px!important;min-height:60px!important;padding:9px 10px!important}
  .playerProfileKpis{left:9px!important;right:9px!important}
  .playerProfileKpis>div{padding:0 9px!important;grid-template-columns:31px minmax(0,1fr)!important}
  .playerProfileKpis>div>span{width:30px!important;height:30px!important}
  .playerProfileKpis strong{font-size:19px!important}
}
@media(prefers-reduced-motion:reduce){
  .playerHeroRecordCue{transition:none!important}
}

/* =====================================================================
   v0.3.5.142 — PLAYER HERO VISUAL BALANCE + BEST BATTLE MEDALS FIX
   Visual-only player-profile pass: restores the approved premium hero
   balance, integrates the record cue, fixes player HUD masks and renders
   the real resolved medals/mastery from the best replay.
   ===================================================================== */

/* homeHudIcon was historically scoped to HOME; player profile uses the
   same approved SVG HUD assets and therefore needs the mask binding too. */
.playerProfilePage .homeHudIcon{
  display:inline-block!important;
  width:18px!important;
  height:18px!important;
  flex:0 0 auto!important;
  background:currentColor!important;
  mask:var(--home-icon) center/contain no-repeat!important;
  -webkit-mask:var(--home-icon) center/contain no-repeat!important;
}

/* Hero = one composition, not a banner plus a floating card. */
.playerProfileHero{
  height:378px!important;
  min-height:378px!important;
  border-color:rgba(193,214,203,.17)!important;
  background:#070d0b!important;
  box-shadow:0 24px 70px rgba(0,0,0,.34),0 0 0 1px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.playerProfileHero::after{
  background:
    radial-gradient(circle at 78% 17%,rgba(246,165,67,.145),transparent 23%),
    radial-gradient(circle at 72% 48%,rgba(169,229,27,.032),transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,.015),transparent 20%,transparent 78%,rgba(0,0,0,.16))!important;
}
.playerProfileHeroBg{
  background-position:center 47%!important;
  filter:saturate(.94) contrast(1.06) brightness(.80)!important;
  transform:scale(1.012)!important;
}
.playerProfileHeroShade{
  background:
    linear-gradient(90deg,rgba(3,8,7,.985) 0%,rgba(3,8,7,.94) 29%,rgba(5,10,9,.59) 50%,rgba(5,10,9,.18) 72%,rgba(4,9,8,.26) 100%),
    linear-gradient(180deg,rgba(3,7,6,.04),rgba(3,7,6,.06) 55%,rgba(4,9,8,.86) 100%)!important;
}
.playerProfileHeroMain{
  left:48px!important;
  top:38px!important;
  width:655px!important;
  max-width:53%!important;
}
.playerProfileNameLine h1{
  font-size:52px!important;
}
.playerProfileMeta{
  margin-top:15px!important;
  gap:10px!important;
}
.playerProfileMeta>span.playerProfileMetaFact{
  color:#adb9b3!important;
  font-size:8.2px!important;
  letter-spacing:.05em!important;
}
.playerProfileHeroMain>p{
  width:535px!important;
  margin-top:10px!important;
  color:#84938b!important;
  font-size:8.8px!important;
  line-height:1.48!important;
}
.playerProfileHeroActions{
  margin-top:14px!important;
}
.playerHeroAction{
  height:34px!important;
  padding:0 14px!important;
}

/* Record vehicle remains dynamic, but is framed as the hero subject rather
   than an oversized PNG crossing into the identity column. */
.playerProfileHeroTank{
  z-index:4!important;
  right:7.5%!important;
  top:42px!important;
  width:40.5%!important;
  height:218px!important;
  object-position:center center!important;
  opacity:.89!important;
  filter:brightness(.96) saturate(.95) contrast(1.055) drop-shadow(0 23px 23px rgba(0,0,0,.63))!important;
  transform:none!important;
}

/* The record label now belongs to the tank composition instead of looking
   like a detached tooltip/card in the upper-right corner. */
.playerHeroRecordCue{
  top:235px!important;
  right:49px!important;
  width:auto!important;
  max-width:405px!important;
  min-height:34px!important;
  display:flex!important;
  align-items:center!important;
  grid-template-columns:none!important;
  grid-template-rows:none!important;
  gap:9px!important;
  padding:7px 11px!important;
  border:1px solid rgba(201,219,210,.12)!important;
  border-left:2px solid rgba(169,229,27,.78)!important;
  border-radius:3px!important;
  background:linear-gradient(90deg,rgba(5,12,9,.78),rgba(7,14,11,.58))!important;
  backdrop-filter:blur(9px)!important;
  box-shadow:0 9px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.018)!important;
}
.playerHeroRecordCue:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(169,229,27,.28)!important;
  border-left-color:#a9e51b!important;
  background:linear-gradient(90deg,rgba(9,18,14,.84),rgba(9,17,14,.66))!important;
}
.playerHeroRecordCue>span{
  grid-column:auto!important;
  color:#a9e51b!important;
  font-size:5.8px!important;
  line-height:1!important;
  letter-spacing:.15em!important;
  white-space:nowrap!important;
}
.playerHeroRecordCue>span::after{
  content:"·"!important;
  margin-left:9px!important;
  color:rgba(184,199,191,.34)!important;
}
.playerHeroRecordCue>strong{
  max-width:175px!important;
  color:#e7eeea!important;
  font-size:8px!important;
  line-height:1!important;
}
.playerHeroRecordCue>b{
  color:#c4f05b!important;
  font-size:11px!important;
  line-height:1!important;
}
.playerHeroRecordCue>b small{
  margin-left:3px!important;
  font-size:5.5px!important;
}

/* KPI rail is the lower HUD of the hero. Remove the selected-menu feeling
   from best damage and keep only a controlled premium accent. */
.playerProfileKpis{
  left:18px!important;
  right:18px!important;
  bottom:14px!important;
  height:78px!important;
  border-color:rgba(197,216,206,.135)!important;
  border-radius:5px!important;
  background:linear-gradient(180deg,rgba(9,17,14,.84),rgba(5,11,9,.78))!important;
  backdrop-filter:blur(17px)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.022),0 8px 22px rgba(0,0,0,.12)!important;
}
.playerProfileKpis::before{display:none!important}
.playerProfileKpis>div{
  grid-template-columns:35px minmax(0,1fr)!important;
  column-gap:9px!important;
  padding:0 15px!important;
}
.playerProfileKpis>div>span{
  width:34px!important;
  height:34px!important;
  border:1px solid rgba(190,210,200,.075)!important;
  background:rgba(255,255,255,.014)!important;
  color:#b4e943!important;
}
.playerProfileKpis .playerProfileKpiIcon,
.playerProfileKpis .cardPremiumKpiIcon,
.playerProfileKpis img{
  width:25px!important;
  height:25px!important;
  max-width:25px!important;
  max-height:25px!important;
}
.playerProfileKpis strong{
  font-size:22px!important;
}
.playerProfileKpis small{
  margin-top:4px!important;
  color:#7f8d86!important;
  font-size:6.1px!important;
}
.playerProfileKpis>div.best-damage{
  border-left:0!important;
  border-right:0!important;
  background:linear-gradient(180deg,rgba(169,229,27,.055),rgba(169,229,27,.012))!important;
  box-shadow:none!important;
}
.playerProfileKpis>div.best-damage::before{
  left:26px!important;
  right:26px!important;
  top:auto!important;
  bottom:0!important;
  height:2px!important;
  background:linear-gradient(90deg,transparent,rgba(169,229,27,.90) 24%,rgba(169,229,27,.56) 70%,transparent)!important;
  box-shadow:0 0 10px rgba(169,229,27,.11)!important;
}
.playerProfileKpis>div.best-damage>span{
  border-color:rgba(169,229,27,.12)!important;
  background:rgba(169,229,27,.022)!important;
}

/* BEST BATTLE — real medal rail. cardAwardsHtml already uses only verified
   achievement mappings and the existing mastery icon, so no fake rewards. */
.playerBestBattle{
  height:294px!important;
}
.playerBestBattleScene{
  height:224px!important;
}
.playerBestBattleCopy{
  top:18px!important;
}
.playerBestDamage{
  margin-top:12px!important;
}
.playerBestAwards{
  position:absolute!important;
  z-index:7!important;
  left:20px!important;
  bottom:9px!important;
  width:52%!important;
  min-height:41px!important;
  display:flex!important;
  align-items:flex-end!important;
  gap:4px!important;
  overflow:visible!important;
  pointer-events:none!important;
}
.playerProfilePage .playerBestAwards .cardAwardIcon{
  width:38px!important;
  height:40px!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 38px!important;
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.52))!important;
}
.playerProfilePage .playerBestAwards .cardAwardIcon img{
  width:38px!important;
  height:38px!important;
  max-width:38px!important;
  max-height:38px!important;
  object-fit:contain!important;
}
.playerProfilePage .playerBestAwards .cardAwardIcon.tier-legendary img,
.playerProfilePage .playerBestAwards .cardAwardIcon.tier-epic img{
  filter:brightness(1.09) saturate(1.08) drop-shadow(0 0 7px rgba(230,185,64,.12))!important;
}
.playerProfilePage .playerBestAwards .cardAwardIcon.tier-mastery img{
  filter:brightness(1.08) saturate(1.05) drop-shadow(0 0 7px rgba(230,185,64,.10))!important;
}
.playerBestBattleStats{
  height:69px!important;
}

@media(max-width:1100px){
  .playerProfileHeroMain{left:34px!important;max-width:55%!important}
  .playerProfileHeroTank{right:4%!important;width:43%!important;height:210px!important}
  .playerHeroRecordCue{right:25px!important;max-width:360px!important}
  .playerProfileKpis{left:15px!important;right:15px!important}
}
@media(max-width:820px){
  .playerProfileHero{height:465px!important;min-height:465px!important}
  .playerProfileHeroMain{left:22px!important;top:25px!important;width:calc(100% - 44px)!important;max-width:none!important}
  .playerProfileHeroTank{right:-5%!important;top:134px!important;width:61%!important;height:170px!important;opacity:.28!important;filter:brightness(.68) saturate(.75) contrast(1.03) drop-shadow(0 16px 18px rgba(0,0,0,.50))!important}
  .playerHeroRecordCue{top:226px!important;right:17px!important;max-width:330px!important;opacity:.92!important}
  .playerProfileKpis{height:auto!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;bottom:14px!important}
  .playerProfileKpis>div{min-height:62px!important;padding:0 12px!important}
  .playerProfileKpis>div:last-child{grid-column:1/-1!important}
  .playerBestBattle{height:312px!important}
  .playerBestBattleScene{height:242px!important}
}
@media(max-width:560px){
  .playerProfileHero{height:548px!important;min-height:548px!important}
  .playerProfileNameLine h1{font-size:34px!important}
  .playerProfileHeroTank{top:190px!important;right:-21%!important;width:88%!important;height:165px!important;opacity:.16!important}
  .playerHeroRecordCue{top:275px!important;right:10px!important;left:10px!important;max-width:none!important;justify-content:flex-start!important}
  .playerHeroRecordCue>strong{max-width:130px!important}
  .playerProfileKpis{left:9px!important;right:9px!important;grid-template-columns:1fr 1fr!important}
  .playerProfileKpis>div{padding:0 9px!important;grid-template-columns:30px minmax(0,1fr)!important}
  .playerProfileKpis>div>span{width:29px!important;height:29px!important}
  .playerProfileKpis strong{font-size:19px!important}
  .playerBestAwards{left:14px!important;width:68%!important;gap:2px!important}
  .playerProfilePage .playerBestAwards .cardAwardIcon{width:31px!important;height:33px!important;flex-basis:31px!important}
  .playerProfilePage .playerBestAwards .cardAwardIcon img{width:31px!important;height:31px!important;max-width:31px!important;max-height:31px!important}
}

/* v0.3.5.142 shared-mask size corrections inside player-specific widgets. */
.playerProfilePage .playerHeroAction .homeHudIcon{width:14px!important;height:14px!important;flex-basis:14px!important}
.playerProfilePage .playerBestBadge .homeHudIcon{width:13px!important;height:13px!important;flex-basis:13px!important}
.playerProfilePage .playerFavoriteReplayCount .homeHudIcon{width:14px!important;height:14px!important;flex-basis:14px!important}
.playerProfilePage .playerBestAwards.cardAwards{
  padding:0!important;
  border:0!important;
  background:transparent!important;
}


/* =====================================================================
   v0.3.5.143 — PLAYER HERO APPROVED MOCKUP COMPOSITION PASS
   Tightens the player hero against the saved approved mockup only.
   Lower profile sections intentionally keep their v0.3.5.142 geometry.
   ===================================================================== */
.playerProfileHero{
  height:398px!important;
  min-height:398px!important;
  border-color:rgba(199,218,208,.18)!important;
  box-shadow:0 30px 82px rgba(0,0,0,.38),0 0 0 1px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.028)!important;
}
.playerProfileHeroBg{
  background-position:center 45%!important;
  filter:saturate(1.02) contrast(1.075) brightness(.86)!important;
  transform:scale(1.012)!important;
}
.playerProfileHeroShade{
  background:
    linear-gradient(90deg,rgba(3,8,7,.988) 0%,rgba(3,8,7,.965) 26%,rgba(4,9,8,.78) 42%,rgba(5,10,9,.31) 62%,rgba(5,10,9,.10) 77%,rgba(4,9,8,.24) 100%),
    linear-gradient(180deg,rgba(3,7,6,.02),rgba(3,7,6,.035) 57%,rgba(4,9,8,.90) 100%)!important;
}
.playerProfileHero::after{
  background:
    radial-gradient(circle at 80% 12%,rgba(255,176,73,.23),transparent 25%),
    radial-gradient(ellipse at 73% 49%,rgba(225,151,70,.075),transparent 32%),
    radial-gradient(circle at 69% 51%,rgba(169,229,27,.036),transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,.016),transparent 21%,transparent 79%,rgba(0,0,0,.18))!important;
}
.playerProfileHeroMain{
  left:47px!important;
  top:35px!important;
  width:600px!important;
  max-width:51%!important;
}
.playerProfileNameLine{margin-top:13px!important}
.playerProfileNameLine h1{font-size:53px!important}

/* WG row: WR reads as a status badge, battles as a separate fact like the mockup. */
.playerProfileMeta.playerProfileMetaPrimary{
  min-height:31px!important;
  margin-top:15px!important;
  gap:0!important;
}
.playerProfilePage .playerProfileMetaPrimary .approvedPlayerStats{
  min-width:0!important;
  height:31px!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:1!important;
}
.playerProfilePage .playerProfileMetaPrimary .approvedPlayerStats>strong{
  height:31px!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:0 10px!important;
  border:1px solid var(--wr,#4fd5e7)!important;
  border-radius:4px!important;
  background:linear-gradient(180deg,rgba(7,25,28,.76),rgba(4,15,17,.70))!important;
  color:var(--wr,#4fd5e7)!important;
  font-size:15px!important;
  line-height:1!important;
  box-shadow:inset 0 0 0 1px rgba(72,205,235,.035),0 7px 18px rgba(0,0,0,.14)!important;
}
.playerProfilePage .playerProfileMetaPrimary .approvedPlayerStats>small{
  margin:0!important;
  color:#d5ded9!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.03em!important;
  text-transform:uppercase!important;
}
.playerProfileFacts{
  display:flex!important;
  align-items:center!important;
  gap:23px!important;
  min-height:19px!important;
  margin-top:9px!important;
}
.playerProfileFacts>span{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  color:#aebbb4!important;
  font-size:8.2px!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:.035em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.playerProfileFacts>span+span{
  position:relative!important;
  padding-left:23px!important;
}
.playerProfileFacts>span+span::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:2px!important;
  bottom:2px!important;
  width:1px!important;
  background:rgba(188,205,196,.15)!important;
}
.playerProfileFactIcon{
  width:13px!important;
  height:13px!important;
  flex-basis:13px!important;
  color:#a9e51b!important;
  opacity:.88!important;
}
.playerProfileHeroMain>p{
  width:520px!important;
  margin-top:10px!important;
  color:#819088!important;
  font-size:8.5px!important;
}
.playerProfileHeroActions{margin-top:14px!important;gap:8px!important}
.playerHeroAction{height:35px!important;padding:0 15px!important}

/* Smaller actual PNG = less visible source softness and more breathing room. */
.playerProfileHeroTank{
  z-index:4!important;
  right:8.8%!important;
  top:48px!important;
  width:37.5%!important;
  height:232px!important;
  object-fit:contain!important;
  object-position:center center!important;
  opacity:.98!important;
  image-rendering:auto!important;
  filter:brightness(1.025) saturate(1.00) contrast(1.065) drop-shadow(0 25px 25px rgba(0,0,0,.62))!important;
  transform:none!important;
}

/* Real mastery from the record replay balances the upper-right, as in the mockup. */
.playerHeroMastery{
  position:absolute!important;
  z-index:8!important;
  top:27px!important;
  right:28px!important;
  width:98px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  text-align:center!important;
  pointer-events:none!important;
  filter:drop-shadow(0 9px 16px rgba(0,0,0,.48))!important;
}
.playerHeroMastery>img{
  width:64px!important;
  height:64px!important;
  object-fit:contain!important;
  filter:brightness(1.07) saturate(1.06) drop-shadow(0 0 12px rgba(232,183,59,.13))!important;
}
.playerHeroMastery>div{margin-top:4px!important}
.playerHeroMastery strong{
  display:block!important;
  color:#f1ede0!important;
  font-size:9px!important;
  line-height:1.1!important;
  font-weight:950!important;
}
.playerHeroMastery small{
  display:block!important;
  margin-top:4px!important;
  color:#9caaa2!important;
  font-size:6.2px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:.04em!important;
}

/* Record cue is now a caption attached to the tank, not another card. */
.playerHeroRecordCue{
  top:auto!important;
  right:46px!important;
  bottom:101px!important;
  width:auto!important;
  max-width:365px!important;
  min-height:28px!important;
  gap:8px!important;
  padding:5px 8px 5px 10px!important;
  border:0!important;
  border-left:2px solid rgba(169,229,27,.78)!important;
  border-radius:0!important;
  background:linear-gradient(90deg,rgba(5,12,9,.66),rgba(5,12,9,.30) 68%,transparent)!important;
  backdrop-filter:blur(5px)!important;
  box-shadow:none!important;
}
.playerHeroRecordCue:hover{
  transform:none!important;
  border-left-color:#b8f32f!important;
  background:linear-gradient(90deg,rgba(8,17,13,.74),rgba(7,15,12,.34) 70%,transparent)!important;
}
.playerHeroRecordCue>span{font-size:5.6px!important}
.playerHeroRecordCue>strong{font-size:7.8px!important;max-width:155px!important}
.playerHeroRecordCue>b{font-size:10.5px!important}

/* Three-level KPI typography, matching the approved mockup's information hierarchy. */
.playerProfileKpis{
  left:22px!important;
  right:22px!important;
  bottom:13px!important;
  height:82px!important;
  border-color:rgba(197,216,206,.15)!important;
  border-radius:5px!important;
  background:linear-gradient(180deg,rgba(9,17,14,.88),rgba(5,11,9,.84))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.024),0 9px 24px rgba(0,0,0,.16)!important;
}
.playerProfileKpis>div{
  display:grid!important;
  grid-template-columns:36px minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:10px!important;
  padding:0 15px!important;
}
.playerProfileKpis>div>span{
  grid-row:auto!important;
  width:35px!important;
  height:35px!important;
  border-color:rgba(190,210,200,.09)!important;
  background:rgba(255,255,255,.016)!important;
}
.playerProfileKpiCopy{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
.playerProfileKpis .playerProfileKpiCopy strong{
  color:#f1f5f2!important;
  font-size:21px!important;
  line-height:1!important;
  font-weight:950!important;
  white-space:nowrap!important;
}
.playerProfileKpis .playerProfileKpiCopy small{
  margin-top:5px!important;
  color:#a4b0aa!important;
  font-size:6.0px!important;
  line-height:1!important;
  font-style:normal!important;
  font-weight:900!important;
  letter-spacing:.07em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.playerProfileKpis .playerProfileKpiCopy em{
  margin-top:5px!important;
  overflow:hidden!important;
  color:#6f7e76!important;
  font-size:6.4px!important;
  line-height:1!important;
  font-style:normal!important;
  font-weight:700!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.playerProfileKpis>div.best-damage{
  position:relative!important;
  background:linear-gradient(180deg,rgba(92,135,16,.10),rgba(34,52,8,.024))!important;
  box-shadow:inset 0 0 0 1px rgba(169,229,27,.30),inset 0 -2px 0 rgba(169,229,27,.68),0 0 18px rgba(169,229,27,.025)!important;
}
.playerProfileKpis>div.best-damage::before{display:none!important}
.playerProfileKpis>div.best-damage .playerProfileKpiCopy strong{
  color:#bdf044!important;
  text-shadow:0 0 16px rgba(169,229,27,.10)!important;
}

@media(max-width:1100px){
  .playerProfileHeroMain{left:34px!important;max-width:54%!important}
  .playerProfileHeroTank{right:7%!important;width:39%!important}
  .playerHeroMastery{right:18px!important;transform:scale(.92)!important;transform-origin:top right!important}
  .playerHeroRecordCue{right:28px!important}
  .playerProfileKpis{left:16px!important;right:16px!important}
}
@media(max-width:820px){
  .playerProfileHero{height:492px!important;min-height:492px!important}
  .playerProfileHeroMain{left:22px!important;top:25px!important;width:calc(100% - 44px)!important;max-width:none!important}
  .playerProfileFacts{gap:12px!important;flex-wrap:wrap!important}
  .playerProfileFacts>span+span{padding-left:0!important}
  .playerProfileFacts>span+span::before{display:none!important}
  .playerProfileHeroTank{right:-5%!important;top:150px!important;width:59%!important;height:172px!important;opacity:.30!important;filter:brightness(.72) saturate(.80) contrast(1.03) drop-shadow(0 16px 18px rgba(0,0,0,.50))!important}
  .playerHeroMastery{top:145px!important;right:14px!important;transform:scale(.72)!important}
  .playerHeroRecordCue{right:17px!important;bottom:177px!important;opacity:.90!important}
  .playerProfileKpis{height:auto!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;bottom:14px!important}
  .playerProfileKpis>div{min-height:66px!important;padding:0 12px!important}
  .playerProfileKpis>div:last-child{grid-column:1/-1!important}
}
@media(max-width:560px){
  .playerProfileHero{height:580px!important;min-height:580px!important}
  .playerProfileNameLine h1{font-size:34px!important}
  .playerProfilePage .playerProfileMetaPrimary .approvedPlayerStats>small{font-size:8px!important}
  .playerProfileFacts>span{font-size:7.2px!important}
  .playerProfileHeroTank{top:205px!important;right:-22%!important;width:88%!important;height:166px!important;opacity:.16!important}
  .playerHeroMastery{display:none!important}
  .playerHeroRecordCue{left:10px!important;right:10px!important;bottom:195px!important;max-width:none!important}
  .playerProfileKpis{left:9px!important;right:9px!important;grid-template-columns:1fr 1fr!important}
  .playerProfileKpis>div{padding:0 9px!important;grid-template-columns:30px minmax(0,1fr)!important}
  .playerProfileKpis>div>span{width:29px!important;height:29px!important}
  .playerProfileKpis .playerProfileKpiCopy strong{font-size:18px!important}
  .playerProfileKpis .playerProfileKpiCopy em{font-size:5.7px!important}
}

/* ======================================================================
   v0.3.5.144 — PLAYER PROFILE FINAL APPROVED MOCKUP REBUILD
   Approved structure: HERO + compact best battle + KPI rail + replay archive.
   No separate best-battle / tank-list sections.
   ====================================================================== */
.playerProfilePage.playerProfileFinalMockup{
  padding-top:18px!important;
  padding-bottom:70px!important;
}
.playerProfileFinalMockup .playerProfileHeroFinal{
  position:relative!important;
  height:505px!important;
  min-height:505px!important;
  overflow:hidden!important;
  border:1px solid rgba(73,90,82,.72)!important;
  border-radius:8px!important;
  background:#07100d!important;
  box-shadow:0 24px 72px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.018)!important;
  isolation:isolate!important;
}
.playerProfileFinalMockup .playerProfileHeroFinal::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  background:
    radial-gradient(ellipse at 70% 26%,rgba(235,154,64,.16),transparent 35%),
    linear-gradient(90deg,rgba(3,8,7,.98) 0%,rgba(3,8,7,.92) 27%,rgba(3,8,7,.50) 48%,rgba(3,8,7,.10) 75%,rgba(3,8,7,.28) 100%)!important;
  pointer-events:none!important;
}
.playerProfileFinalMockup .playerProfileHeroFinal::after{
  content:""!important;
  position:absolute!important;
  inset:auto 0 0!important;
  height:124px!important;
  z-index:2!important;
  background:linear-gradient(180deg,transparent,rgba(4,10,8,.62) 31%,rgba(5,11,9,.96) 100%)!important;
  pointer-events:none!important;
}
.playerProfileFinalMockup .playerProfileHeroBg{
  position:absolute!important;
  inset:0!important;
  z-index:-2!important;
  opacity:.94!important;
  background-image:url('/assets/player_profile_hero_bg.jpg')!important;
  background-size:cover!important;
  background-position:center 52%!important;
  filter:saturate(.86) contrast(1.08)!important;
}
.playerProfileFinalMockup .playerProfileHeroShade{
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  background:
    linear-gradient(180deg,rgba(0,0,0,.08),transparent 52%,rgba(0,0,0,.32)),
    radial-gradient(circle at 78% 38%,rgba(235,158,70,.08),transparent 31%)!important;
  pointer-events:none!important;
}
.playerProfileFinalMockup .playerProfileHeroTankStatic{
  position:absolute!important;
  z-index:1!important;
  right:8.2%!important;
  top:94px!important;
  width:48%!important;
  max-width:630px!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  opacity:.98!important;
  pointer-events:none!important;
  filter:brightness(.82) saturate(.78) contrast(1.12) drop-shadow(0 22px 19px rgba(0,0,0,.62)) drop-shadow(0 0 18px rgba(233,156,68,.12))!important;
}
.playerProfileFinalMockup .playerProfileHeroMain{
  position:absolute!important;
  z-index:6!important;
  left:38px!important;
  top:34px!important;
  width:510px!important;
  max-width:47%!important;
}
.playerProfileFinalMockup .playerProfileEyebrow{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin-bottom:13px!important;
  color:#8f9b95!important;
  font-size:7px!important;
  line-height:1!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.18em!important;
}
.playerProfileFinalMockup .playerProfileEyebrow::before{
  content:""!important;
  width:22px!important;
  height:2px!important;
  background:#a9e51b!important;
  box-shadow:0 0 12px rgba(169,229,27,.20)!important;
}
.playerProfileFinalMockup .playerProfileNameLine{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}
.playerProfileFinalMockup .playerProfileNameLine h1{
  margin:0!important;
  color:#f7faf8!important;
  font-size:42px!important;
  line-height:.95!important;
  font-weight:950!important;
  letter-spacing:-.047em!important;
  text-transform:none!important;
  text-shadow:0 3px 18px rgba(0,0,0,.34)!important;
}
.playerProfileFinalMockup .playerRegionBadge{
  min-width:46px!important;
  height:30px!important;
  padding:0 10px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  border:1px solid rgba(150,196,58,.33)!important;
  border-radius:6px!important;
  background:rgba(6,13,10,.72)!important;
  color:#dce7e0!important;
  backdrop-filter:blur(8px)!important;
  font-size:8px!important;
  font-weight:900!important;
}
.playerProfileFinalMockup .playerProfileMetaPrimary{
  margin-top:20px!important;
  min-height:46px!important;
}
.playerProfileFinalMockup .approvedPlayerStats{
  display:inline-flex!important;
  align-items:stretch!important;
  min-height:46px!important;
  border:0!important;
  background:transparent!important;
  overflow:visible!important;
  gap:0!important;
}
.playerProfileFinalMockup .approvedPlayerStats strong{
  min-width:98px!important;
  height:46px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 14px!important;
  border:1px solid rgba(22,190,228,.50)!important;
  border-radius:5px!important;
  background:linear-gradient(180deg,rgba(7,28,31,.76),rgba(5,16,16,.72))!important;
  color:#39ddf5!important;
  font-size:19px!important;
  font-weight:950!important;
  letter-spacing:-.02em!important;
}
.playerProfileFinalMockup .approvedPlayerStats span,
.playerProfileFinalMockup .approvedPlayerStats em,
.playerProfileFinalMockup .approvedPlayerStats small{
  min-width:82px!important;
  min-height:46px!important;
  padding:8px 14px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  border-left:1px solid rgba(64,76,71,.42)!important;
  color:#f1f4f2!important;
  font-size:13px!important;
  font-style:normal!important;
  font-weight:900!important;
}
.playerProfileFinalMockup .playerProfileFacts{
  margin-top:17px!important;
  display:flex!important;
  align-items:center!important;
  gap:19px!important;
  flex-wrap:wrap!important;
}
.playerProfileFinalMockup .playerProfileFacts>span{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  color:#d2d9d5!important;
  font-size:8px!important;
  line-height:1!important;
  text-transform:uppercase!important;
  letter-spacing:.035em!important;
}
.playerProfileFinalMockup .playerProfileFacts>span+span::before{
  content:"•"!important;
  margin-right:9px!important;
  color:#77827d!important;
}
.playerProfileFinalMockup .playerProfileFactIcon{
  width:14px!important;
  height:14px!important;
  color:#aeb8b3!important;
}
.playerProfileFinalMockup .playerProfileHeroMain>p{
  width:470px!important;
  max-width:100%!important;
  margin:14px 0 0!important;
  color:#8f9b95!important;
  font-size:8px!important;
  line-height:1.55!important;
}
.playerProfileFinalMockup .playerProfileHeroActions{
  display:flex!important;
  gap:9px!important;
  margin-top:18px!important;
}
.playerProfileFinalMockup .playerHeroAction{
  min-height:38px!important;
  padding:0 16px!important;
  border:1px solid rgba(72,88,80,.74)!important;
  border-radius:4px!important;
  background:rgba(7,14,11,.74)!important;
  color:#dfe6e2!important;
  font-size:7px!important;
  font-weight:950!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
  backdrop-filter:blur(8px)!important;
}
.playerProfileFinalMockup .playerHeroActionPrimary{
  border-color:rgba(169,229,27,.72)!important;
  background:linear-gradient(180deg,#83b916,#5e8d0d)!important;
  color:#fff!important;
  box-shadow:0 8px 22px rgba(86,137,10,.18)!important;
}
.playerProfileFinalMockup .playerHeroActionIcon{width:14px!important;height:14px!important}
.playerProfileFinalMockup .playerHeroMasteryFinal{
  position:absolute!important;
  z-index:7!important;
  top:29px!important;
  right:28px!important;
  width:118px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  text-align:center!important;
  pointer-events:none!important;
  background:none!important;
  border:0!important;
  padding:0!important;
  box-shadow:none!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal>img{
  width:84px!important;
  height:84px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(234,185,65,.10))!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal strong{
  margin-top:1px!important;
  display:block!important;
  color:#f1eee6!important;
  font-size:11px!important;
  line-height:1!important;
  text-transform:uppercase!important;
  letter-spacing:.02em!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal small{
  display:block!important;
  margin-top:5px!important;
  color:#9c9b91!important;
  font-size:7px!important;
}
.playerProfileFinalMockup .playerHeroBestCard{
  position:absolute!important;
  z-index:8!important;
  right:28px!important;
  bottom:112px!important;
  width:385px!important;
  min-height:116px!important;
  padding:12px 13px 10px!important;
  overflow:hidden!important;
  border:1px solid rgba(108,118,86,.55)!important;
  border-radius:8px!important;
  background:linear-gradient(150deg,rgba(17,20,15,.90),rgba(5,10,8,.90))!important;
  backdrop-filter:blur(13px)!important;
  box-shadow:0 15px 40px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.018)!important;
  color:inherit!important;
  text-align:left!important;
  cursor:pointer!important;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease!important;
}
.playerProfileFinalMockup .playerHeroBestCard:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(169,229,27,.48)!important;
  box-shadow:0 19px 48px rgba(0,0,0,.42),0 0 22px rgba(169,229,27,.04)!important;
}
.playerProfileFinalMockup .playerHeroBestTitle{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  margin-bottom:8px!important;
  color:#b9e627!important;
  font-size:7px!important;
  font-weight:950!important;
  letter-spacing:.05em!important;
}
.playerProfileFinalMockup .playerHeroBestTitleIcon{width:13px!important;height:13px!important;color:#b8e927!important}
.playerProfileFinalMockup .playerHeroBestMain{
  display:grid!important;
  grid-template-columns:62px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:9px!important;
}
.playerProfileFinalMockup .playerHeroBestThumb{
  position:relative!important;
  width:62px!important;
  height:42px!important;
  overflow:hidden!important;
  border:1px solid rgba(90,104,95,.55)!important;
  border-radius:5px!important;
  background-size:cover!important;
  background-position:center!important;
}
.playerProfileFinalMockup .playerHeroBestThumbTank{
  position:absolute!important;
  inset:5% -5% -4% 8%!important;
  width:95%!important;
  height:95%!important;
  object-fit:contain!important;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.48))!important;
}
.playerProfileFinalMockup .playerHeroBestIdentity{min-width:0!important}
.playerProfileFinalMockup .playerHeroBestIdentity>strong{
  display:block!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#eff4f1!important;
  font-size:11px!important;
  line-height:1.05!important;
}
.playerProfileFinalMockup .playerHeroBestIdentity>small{
  display:block!important;
  margin-top:5px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#9aa59f!important;
  font-size:7px!important;
}
.playerProfileFinalMockup .playerHeroBestDamage{
  display:flex!important;
  align-items:baseline!important;
  gap:5px!important;
  white-space:nowrap!important;
}
.playerProfileFinalMockup .playerHeroBestDamage strong{
  color:#a9e51b!important;
  font-size:25px!important;
  line-height:1!important;
  letter-spacing:-.04em!important;
}
.playerProfileFinalMockup .playerHeroBestDamage span{
  color:#89958f!important;
  font-size:6px!important;
  font-weight:800!important;
}
.playerProfileFinalMockup .playerHeroBestFoot{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin-top:8px!important;
  padding-top:8px!important;
  border-top:1px solid rgba(66,78,72,.45)!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics>span{
  display:grid!important;
  grid-template-columns:15px auto!important;
  grid-template-rows:auto auto!important;
  column-gap:5px!important;
  align-items:center!important;
  min-width:52px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics .cardPremiumKpiIcon{
  grid-row:1/3!important;
  width:15px!important;
  height:15px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics b{font-size:9px!important;line-height:1!important;color:#eff3f1!important}
.playerProfileFinalMockup .playerHeroBestMetrics small{margin-top:2px!important;font-size:5px!important;color:#7e8b84!important;text-transform:uppercase!important}
.playerProfileFinalMockup .playerHeroBestAwards{
  min-height:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:3px!important;
  overflow:hidden!important;
}
.playerProfileFinalMockup .playerHeroBestAwards .cardAwardIcon{
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
}
.playerProfileFinalMockup .playerHeroBestAwards .cardAwardIcon img{width:100%!important;height:100%!important;object-fit:contain!important}
.playerProfileFinalMockup .playerProfileKpisFinal{
  position:absolute!important;
  z-index:9!important;
  left:16px!important;
  right:16px!important;
  bottom:13px!important;
  height:86px!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  border:1px solid rgba(55,69,62,.72)!important;
  border-radius:7px!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,rgba(6,13,10,.91),rgba(5,10,8,.96))!important;
  box-shadow:0 14px 40px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.015)!important;
  backdrop-filter:blur(14px)!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div{
  position:relative!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:43px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  padding:0 18px!important;
  border:0!important;
  transition:background .16s ease!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div:not(:last-child)::after{
  content:""!important;
  position:absolute!important;
  top:19px!important;
  right:0!important;
  bottom:19px!important;
  width:1px!important;
  background:rgba(67,79,73,.52)!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div:hover{background:rgba(169,229,27,.018)!important}
.playerProfileFinalMockup .playerProfileKpisFinal>div>span{
  width:38px!important;
  height:38px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(81,95,87,.64)!important;
  border-radius:50%!important;
  background:rgba(11,18,15,.64)!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal .playerProfileKpiIcon,
.playerProfileFinalMockup .playerProfileKpisFinal .cardPremiumKpiIcon,
.playerProfileFinalMockup .playerProfileKpisFinal img{
  width:22px!important;
  height:22px!important;
  max-width:22px!important;
  max-height:22px!important;
  color:#e5eae7!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy strong{
  color:#f0f4f2!important;
  font-size:20px!important;
  line-height:.96!important;
  font-weight:950!important;
  letter-spacing:-.035em!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy small{
  margin-top:5px!important;
  color:#c5cfca!important;
  font-size:6px!important;
  line-height:1!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy em{
  margin-top:5px!important;
  color:#6e7b74!important;
  font-size:5px!important;
  line-height:1!important;
  font-style:normal!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div.best-damage{
  background:linear-gradient(180deg,rgba(99,139,16,.07),rgba(17,28,11,.10))!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div.best-damage::before{
  content:""!important;
  position:absolute!important;
  left:14%!important;
  right:14%!important;
  bottom:0!important;
  height:2px!important;
  background:#a9e51b!important;
  box-shadow:0 -4px 18px rgba(169,229,27,.16)!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div.best-damage>span{
  border-color:rgba(169,229,27,.40)!important;
  color:#a9e51b!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div.best-damage .cardPremiumKpiIcon,
.playerProfileFinalMockup .playerProfileKpisFinal>div.best-damage .playerProfileKpiIcon{color:#b4e929!important}
.playerProfileFinalMockup .playerProfileKpisFinal>div.best-damage strong{color:#b4ea28!important}
.playerProfileFinalMockup .playerProfileKpisFinal>div.replay-wins>span{border-color:rgba(169,229,27,.28)!important;color:#b2e62a!important}

/* Archive begins immediately after the approved hero. */
.playerProfileFinalMockup .playerReplaySectionFinal{
  scroll-margin-top:76px!important;
  margin-top:12px!important;
  padding:17px 0 0!important;
  border-top:1px solid rgba(44,57,51,.84)!important;
}
.playerProfileFinalMockup .playerReplayHeader{
  margin-bottom:13px!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:20px!important;
}
.playerProfileFinalMockup .playerReplayEyebrow{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  color:#7f8c85!important;
  font-size:6px!important;
  font-weight:900!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
}
.playerProfileFinalMockup .playerReplayEyebrow::before{content:""!important;width:18px!important;height:2px!important;background:#a9e51b!important}
.playerProfileFinalMockup .playerReplayHeader h2{
  margin:6px 0 0!important;
  color:#edf2ef!important;
  font-size:26px!important;
  line-height:1!important;
  text-transform:uppercase!important;
  letter-spacing:-.035em!important;
}
.playerProfileFinalMockup .playerReplayHeader h2 small{
  margin-left:8px!important;
  color:#7a8881!important;
  font-size:8px!important;
  font-weight:700!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
.playerProfileFinalMockup .playerReplayControls{display:flex!important;align-items:flex-end!important;gap:12px!important}
.playerProfileFinalMockup .playerControlGroupInline{display:flex!important;align-items:center!important;gap:5px!important}
.playerProfileFinalMockup .playerControlGroupInline>small{
  margin-right:4px!important;
  color:#6f7c75!important;
  font-size:5px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.playerProfileFinalMockup .playerControlGroupInline>a{
  min-width:58px!important;
  height:30px!important;
  padding:0 11px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(52,66,59,.8)!important;
  border-radius:4px!important;
  background:#09100d!important;
  color:#818d87!important;
  text-decoration:none!important;
  font-size:6px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
}
.playerProfileFinalMockup .playerControlGroupInline>a.active{
  color:#b7eb2a!important;
  border-color:rgba(169,229,27,.55)!important;
  background:rgba(80,118,10,.10)!important;
}
.playerProfileFinalMockup .playerReplayGrid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
}

@media(max-width:1100px){
  .playerProfileFinalMockup .playerProfileHeroMain{left:28px!important;max-width:52%!important}
  .playerProfileFinalMockup .playerProfileHeroTankStatic{right:2%!important;width:52%!important}
  .playerProfileFinalMockup .playerHeroMasteryFinal{right:16px!important;transform:scale(.86)!important;transform-origin:top right!important}
  .playerProfileFinalMockup .playerHeroBestCard{right:18px!important;width:350px!important}
  .playerProfileFinalMockup .playerProfileKpisFinal>div{padding:0 12px!important;grid-template-columns:36px minmax(0,1fr)!important;gap:8px!important}
  .playerProfileFinalMockup .playerProfileKpisFinal>div>span{width:33px!important;height:33px!important}
  .playerProfileFinalMockup .playerProfileKpiCopy strong{font-size:17px!important}
  .playerProfileFinalMockup .playerReplayGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:820px){
  .playerProfileFinalMockup .playerProfileHeroFinal{height:650px!important;min-height:650px!important}
  .playerProfileFinalMockup .playerProfileHeroMain{left:22px!important;top:24px!important;width:calc(100% - 44px)!important;max-width:none!important}
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:34px!important}
  .playerProfileFinalMockup .playerProfileHeroTankStatic{top:205px!important;right:-5%!important;width:69%!important;opacity:.46!important}
  .playerProfileFinalMockup .playerHeroMasteryFinal{top:205px!important;right:12px!important;transform:scale(.66)!important}
  .playerProfileFinalMockup .playerHeroBestCard{left:18px!important;right:18px!important;bottom:190px!important;width:auto!important}
  .playerProfileFinalMockup .playerProfileKpisFinal{grid-template-columns:repeat(2,minmax(0,1fr))!important;height:auto!important;bottom:12px!important}
  .playerProfileFinalMockup .playerProfileKpisFinal>div{min-height:60px!important}
  .playerProfileFinalMockup .playerProfileKpisFinal>div:last-child{grid-column:1/-1!important}
  .playerProfileFinalMockup .playerProfileKpisFinal>div:not(:last-child)::after{display:none!important}
  .playerProfileFinalMockup .playerReplayHeader{align-items:flex-start!important;flex-direction:column!important}
  .playerProfileFinalMockup .playerReplayControls{width:100%!important;justify-content:flex-start!important;flex-wrap:wrap!important}
  .playerProfileFinalMockup .playerReplayGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){
  .playerProfilePage.playerProfileFinalMockup{padding-top:10px!important}
  .playerProfileFinalMockup .playerProfileHeroFinal{height:760px!important;min-height:760px!important}
  .playerProfileFinalMockup .playerProfileHeroMain{left:15px!important;top:18px!important;width:calc(100% - 30px)!important}
  .playerProfileFinalMockup .playerProfileNameLine{gap:8px!important;flex-wrap:wrap!important}
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:30px!important}
  .playerProfileFinalMockup .playerProfileFacts{gap:9px!important}
  .playerProfileFinalMockup .playerProfileFacts>span+span::before{display:none!important}
  .playerProfileFinalMockup .playerProfileHeroActions{flex-wrap:wrap!important}
  .playerProfileFinalMockup .playerProfileHeroTankStatic{top:255px!important;right:-20%!important;width:105%!important;opacity:.28!important}
  .playerProfileFinalMockup .playerHeroMasteryFinal{top:254px!important;right:7px!important;transform:scale(.54)!important}
  .playerProfileFinalMockup .playerHeroBestCard{bottom:258px!important;left:10px!important;right:10px!important;padding:10px!important}
  .playerProfileFinalMockup .playerHeroBestMain{grid-template-columns:52px minmax(0,1fr) auto!important;gap:7px!important}
  .playerProfileFinalMockup .playerHeroBestThumb{width:52px!important;height:37px!important}
  .playerProfileFinalMockup .playerHeroBestDamage strong{font-size:20px!important}
  .playerProfileFinalMockup .playerHeroBestAwards{display:none!important}
  .playerProfileFinalMockup .playerProfileKpisFinal{left:8px!important;right:8px!important;grid-template-columns:1fr!important}
  .playerProfileFinalMockup .playerProfileKpisFinal>div{min-height:54px!important;grid-column:auto!important}
  .playerProfileFinalMockup .playerProfileKpiCopy em{display:none!important}
  .playerProfileFinalMockup .playerReplayGrid{grid-template-columns:1fr!important}
  .playerProfileFinalMockup .playerReplayHeader h2 small{display:block!important;margin:5px 0 0!important}
}

/* =====================================================================
   v0.3.5.145 — PLAYER PROFILE CINEMATIC RENDER HERO
   Final approved composition: one authored cinematic render as the hero
   scene. No standalone raw tank PNG in the player profile hero.
   ===================================================================== */
.playerProfileFinalMockup .playerProfileHeroFinal{
  height:505px!important;
  min-height:505px!important;
  background:#050a08!important;
  border-color:rgba(78,91,84,.76)!important;
  box-shadow:0 26px 76px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.022)!important;
}
.playerProfileFinalMockup .playerProfileHeroBg{
  inset:0!important;
  background-image:url('/assets/player_profile_hero_render.webp')!important;
  background-size:cover!important;
  background-position:center center!important;
  opacity:1!important;
  filter:saturate(.92) contrast(1.07) brightness(.91)!important;
  transform:none!important;
}
.playerProfileFinalMockup .playerProfileHeroFinal::before{
  background:
    radial-gradient(ellipse at 78% 34%,rgba(235,166,76,.075),transparent 31%),
    linear-gradient(90deg,rgba(2,7,6,.995) 0%,rgba(3,8,7,.955) 25%,rgba(3,8,7,.80) 36%,rgba(3,8,7,.34) 49%,rgba(3,8,7,.06) 66%,rgba(3,8,7,.06) 84%,rgba(3,8,7,.24) 100%)!important;
}
.playerProfileFinalMockup .playerProfileHeroFinal::after{
  height:132px!important;
  background:linear-gradient(180deg,rgba(4,10,8,0),rgba(4,10,8,.54) 28%,rgba(4,10,8,.97) 100%)!important;
}
.playerProfileFinalMockup .playerProfileHeroShade{
  background:
    linear-gradient(180deg,rgba(0,0,0,.04),transparent 47%,rgba(0,0,0,.18) 70%,rgba(0,0,0,.34)),
    radial-gradient(ellipse at 73% 40%,rgba(239,177,90,.06),transparent 30%),
    linear-gradient(90deg,transparent 62%,rgba(0,0,0,.03) 78%,rgba(0,0,0,.16) 100%)!important;
}
.playerProfileFinalMockup .playerProfileHeroTankStatic{display:none!important}
.playerProfileFinalMockup .playerProfileHeroMain{
  left:42px!important;
  top:35px!important;
  width:500px!important;
  max-width:45%!important;
}
.playerProfileFinalMockup .playerProfileNameLine h1{
  font-size:44px!important;
  text-shadow:0 5px 24px rgba(0,0,0,.48)!important;
}
.playerProfileFinalMockup .playerProfileHeroMain>p{color:#99a49f!important}
.playerProfileFinalMockup .playerHeroMasteryFinal{
  top:28px!important;
  right:31px!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal>img{
  width:88px!important;
  height:88px!important;
  filter:drop-shadow(0 9px 16px rgba(0,0,0,.62)) drop-shadow(0 0 16px rgba(233,185,68,.13))!important;
}
.playerProfileFinalMockup .playerHeroBestCard{
  right:29px!important;
  bottom:111px!important;
  width:390px!important;
  border-color:rgba(113,124,91,.61)!important;
  background:linear-gradient(145deg,rgba(19,21,16,.92),rgba(5,10,8,.93))!important;
  box-shadow:0 17px 46px rgba(0,0,0,.43),inset 0 1px 0 rgba(255,255,255,.022)!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal{
  left:17px!important;
  right:17px!important;
  bottom:13px!important;
  background:linear-gradient(180deg,rgba(6,13,10,.94),rgba(4,9,7,.975))!important;
  border-color:rgba(60,74,67,.77)!important;
  box-shadow:0 16px 43px rgba(0,0,0,.31),inset 0 1px 0 rgba(255,255,255,.016)!important;
}
@media(max-width:1100px){
  .playerProfileFinalMockup .playerProfileHeroMain{left:28px!important;max-width:50%!important}
}
@media(max-width:820px){
  .playerProfileFinalMockup .playerProfileHeroBg{background-position:62% center!important}
  .playerProfileFinalMockup .playerProfileHeroFinal::before{
    background:linear-gradient(180deg,rgba(3,8,7,.95) 0%,rgba(3,8,7,.72) 43%,rgba(3,8,7,.22) 68%,rgba(3,8,7,.55) 100%)!important;
  }
}
@media(max-width:560px){
  .playerProfileFinalMockup .playerProfileHeroBg{background-position:66% center!important;filter:saturate(.86) contrast(1.05) brightness(.78)!important}
}

/* =====================================================================
   v0.3.5.146 — PLAYER HERO FINAL LUXURY POLISH
   Final visual refinement of the approved player-profile composition.
   Data logic is untouched: mastery remains the best REAL mastery present
   in the player's uploaded replays. Only hero rhythm, best-battle card
   and KPI presentation are polished here.
   ===================================================================== */

/* --- HERO: a little taller, calmer, more premium --- */
.playerProfileFinalMockup .playerProfileHeroFinal{
  height:548px!important;
  min-height:548px!important;
  border-color:rgba(91,108,99,.72)!important;
  box-shadow:
    0 30px 82px rgba(0,0,0,.39),
    0 0 0 1px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.026)!important;
}
.playerProfileFinalMockup .playerProfileHeroBg{
  background-position:center 47%!important;
  filter:saturate(.96) contrast(1.075) brightness(.94)!important;
}
.playerProfileFinalMockup .playerProfileHeroFinal::before{
  background:
    radial-gradient(ellipse at 76% 34%,rgba(244,178,89,.105),transparent 30%),
    radial-gradient(ellipse at 69% 47%,rgba(255,206,128,.032),transparent 24%),
    linear-gradient(90deg,
      rgba(2,7,6,.995) 0%,
      rgba(3,8,7,.965) 24%,
      rgba(3,8,7,.84) 34%,
      rgba(3,8,7,.40) 48%,
      rgba(3,8,7,.07) 64%,
      rgba(3,8,7,.045) 82%,
      rgba(3,8,7,.21) 100%)!important;
}
.playerProfileFinalMockup .playerProfileHeroFinal::after{
  height:145px!important;
  background:linear-gradient(180deg,rgba(4,10,8,0),rgba(4,10,8,.40) 24%,rgba(4,10,8,.985) 100%)!important;
}
.playerProfileFinalMockup .playerProfileHeroShade{
  background:
    linear-gradient(180deg,rgba(0,0,0,.015),transparent 45%,rgba(0,0,0,.12) 68%,rgba(0,0,0,.30)),
    radial-gradient(ellipse at 74% 38%,rgba(250,185,98,.072),transparent 29%),
    linear-gradient(90deg,transparent 61%,rgba(0,0,0,.015) 78%,rgba(0,0,0,.13) 100%)!important;
}

/* --- LEFT PROFILE INFORMATION: stronger hierarchy, more air --- */
.playerProfileFinalMockup .playerProfileHeroMain{
  left:45px!important;
  top:39px!important;
  width:548px!important;
  max-width:47%!important;
}
.playerProfileFinalMockup .playerProfileEyebrow{
  margin-bottom:15px!important;
  color:#98a59f!important;
  font-size:7.4px!important;
  letter-spacing:.19em!important;
}
.playerProfileFinalMockup .playerProfileEyebrow::before{
  width:24px!important;
  box-shadow:0 0 15px rgba(169,229,27,.24)!important;
}
.playerProfileFinalMockup .playerProfileNameLine{
  gap:14px!important;
}
.playerProfileFinalMockup .playerProfileNameLine h1{
  font-size:48px!important;
  line-height:.94!important;
  letter-spacing:-.05em!important;
  text-shadow:0 6px 28px rgba(0,0,0,.50)!important;
}
.playerProfileFinalMockup .playerRegionBadge{
  min-width:48px!important;
  height:31px!important;
  padding:0 11px!important;
  border-color:rgba(155,207,53,.39)!important;
  background:rgba(5,13,10,.78)!important;
  font-size:8.4px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.022)!important;
}
.playerProfileFinalMockup .playerProfileMetaPrimary{
  margin-top:22px!important;
  min-height:52px!important;
}
.playerProfileFinalMockup .approvedPlayerStats{
  min-height:52px!important;
}
.playerProfileFinalMockup .approvedPlayerStats strong{
  min-width:106px!important;
  height:52px!important;
  padding:0 16px!important;
  border-color:rgba(37,204,237,.58)!important;
  background:linear-gradient(180deg,rgba(6,31,34,.82),rgba(4,16,17,.78))!important;
  color:#42e2f5!important;
  font-size:21px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 8px 24px rgba(0,0,0,.11)!important;
}
.playerProfileFinalMockup .approvedPlayerStats span,
.playerProfileFinalMockup .approvedPlayerStats em,
.playerProfileFinalMockup .approvedPlayerStats small{
  min-width:92px!important;
  min-height:52px!important;
  padding:8px 16px!important;
  border-left-color:rgba(76,90,83,.48)!important;
  color:#f2f5f3!important;
  font-size:14px!important;
}
.playerProfileFinalMockup .playerProfileFacts{
  margin-top:19px!important;
  gap:20px!important;
}
.playerProfileFinalMockup .playerProfileFacts>span{
  gap:8px!important;
  color:#d9dfdc!important;
  font-size:8.7px!important;
  letter-spacing:.04em!important;
}
.playerProfileFinalMockup .playerProfileFactIcon{
  width:15px!important;
  height:15px!important;
  color:#b6c0bb!important;
}
.playerProfileFinalMockup .playerProfileHeroMain>p{
  width:500px!important;
  margin-top:13px!important;
  color:#9aa69f!important;
  font-size:8.8px!important;
  line-height:1.58!important;
}
.playerProfileFinalMockup .playerProfileHeroActions{
  gap:10px!important;
  margin-top:18px!important;
}
.playerProfileFinalMockup .playerHeroAction{
  min-height:40px!important;
  padding:0 18px!important;
  border-radius:5px!important;
  font-size:7.3px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 9px 22px rgba(0,0,0,.13)!important;
}
.playerProfileFinalMockup .playerHeroActionPrimary{
  background:linear-gradient(180deg,#8bbd18,#608f0c)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 10px 28px rgba(95,145,12,.22)!important;
}

/* --- MASTERY: keep REAL data logic; only premium placement/presentation --- */
.playerProfileFinalMockup .playerHeroMasteryFinal{
  top:31px!important;
  right:34px!important;
  width:128px!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal>img{
  width:94px!important;
  height:94px!important;
  filter:
    drop-shadow(0 11px 18px rgba(0,0,0,.64))
    drop-shadow(0 0 18px rgba(230,186,75,.14))!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal strong{
  margin-top:2px!important;
  font-size:11.7px!important;
  text-shadow:0 2px 10px rgba(0,0,0,.60)!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal small{
  margin-top:5px!important;
  color:#aaa99f!important;
  font-size:7.2px!important;
}

/* --- BEST BATTLE: +~12%, cleaner internal grid, medals get breathing room --- */
.playerProfileFinalMockup .playerHeroBestCard{
  right:31px!important;
  bottom:132px!important;
  width:438px!important;
  min-height:139px!important;
  padding:14px 15px 12px!important;
  border-color:rgba(126,139,96,.64)!important;
  border-radius:9px!important;
  background:
    radial-gradient(circle at 88% 16%,rgba(169,229,27,.026),transparent 27%),
    linear-gradient(145deg,rgba(20,23,17,.94),rgba(5,10,8,.955))!important;
  box-shadow:
    0 20px 54px rgba(0,0,0,.47),
    inset 0 1px 0 rgba(255,255,255,.026)!important;
}
.playerProfileFinalMockup .playerHeroBestTitle{
  gap:8px!important;
  margin-bottom:10px!important;
  font-size:7.8px!important;
  letter-spacing:.065em!important;
}
.playerProfileFinalMockup .playerHeroBestTitleIcon{
  width:14px!important;
  height:14px!important;
}
.playerProfileFinalMockup .playerHeroBestMain{
  grid-template-columns:72px minmax(0,1fr) auto!important;
  gap:11px!important;
}
.playerProfileFinalMockup .playerHeroBestThumb{
  width:72px!important;
  height:48px!important;
  border-color:rgba(105,119,110,.64)!important;
  border-radius:6px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.playerProfileFinalMockup .playerHeroBestThumbTank{
  inset:3% -4% -5% 6%!important;
  width:99%!important;
  height:99%!important;
  filter:brightness(1.04) contrast(1.03) drop-shadow(0 6px 6px rgba(0,0,0,.52))!important;
}
.playerProfileFinalMockup .playerHeroBestIdentity>strong{
  font-size:12.3px!important;
  line-height:1.04!important;
}
.playerProfileFinalMockup .playerHeroBestIdentity>small{
  margin-top:6px!important;
  color:#a5b0aa!important;
  font-size:7.5px!important;
}
.playerProfileFinalMockup .playerHeroBestDamage{
  gap:6px!important;
  padding-left:6px!important;
}
.playerProfileFinalMockup .playerHeroBestDamage strong{
  font-size:29px!important;
  color:#b2ea23!important;
  text-shadow:0 0 20px rgba(169,229,27,.10)!important;
}
.playerProfileFinalMockup .playerHeroBestDamage span{
  font-size:6.3px!important;
}
.playerProfileFinalMockup .playerHeroBestFoot{
  gap:14px!important;
  margin-top:10px!important;
  padding-top:10px!important;
  border-top-color:rgba(75,89,81,.50)!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics{
  gap:15px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics>span{
  grid-template-columns:17px auto!important;
  column-gap:6px!important;
  min-width:59px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics .cardPremiumKpiIcon{
  width:17px!important;
  height:17px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics b{
  font-size:9.8px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics small{
  margin-top:2px!important;
  font-size:5.3px!important;
}
.playerProfileFinalMockup .playerHeroBestAwards{
  gap:4px!important;
  padding-left:4px!important;
}
.playerProfileFinalMockup .playerHeroBestAwards .cardAwardIcon{
  width:27px!important;
  height:27px!important;
  flex:0 0 27px!important;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.40))!important;
}

/* --- KPI HUD: more legible, less 'selected button', still one integrated rail --- */
.playerProfileFinalMockup .playerProfileKpisFinal{
  left:17px!important;
  right:17px!important;
  bottom:14px!important;
  height:101px!important;
  border-color:rgba(70,86,77,.80)!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,rgba(6,13,10,.935),rgba(4,9,7,.985))!important;
  box-shadow:0 18px 48px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.019)!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div{
  grid-template-columns:46px minmax(0,1fr)!important;
  gap:11px!important;
  padding:0 18px!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div:not(:last-child)::after{
  top:22px!important;
  bottom:22px!important;
  background:rgba(78,92,85,.50)!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div>span{
  width:42px!important;
  height:42px!important;
  border-color:rgba(91,108,98,.66)!important;
  background:rgba(10,18,14,.70)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal .playerProfileKpiIcon,
.playerProfileFinalMockup .playerProfileKpisFinal .cardPremiumKpiIcon,
.playerProfileFinalMockup .playerProfileKpisFinal img{
  width:24px!important;
  height:24px!important;
  max-width:24px!important;
  max-height:24px!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy strong{
  font-size:22px!important;
  line-height:.95!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy small{
  margin-top:6px!important;
  color:#cbd4cf!important;
  font-size:6.4px!important;
  letter-spacing:.045em!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy em{
  margin-top:5px!important;
  color:#74817b!important;
  font-size:5.25px!important;
  letter-spacing:.035em!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div.best-damage{
  background:linear-gradient(180deg,rgba(104,148,17,.045),rgba(15,25,10,.025))!important;
  box-shadow:inset 0 0 30px rgba(169,229,27,.012)!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div.best-damage::before{
  left:22px!important;
  right:22px!important;
  top:auto!important;
  bottom:0!important;
  height:2px!important;
  background:linear-gradient(90deg,transparent,rgba(169,229,27,.92) 18%,rgba(169,229,27,.92) 72%,transparent)!important;
  box-shadow:0 0 14px rgba(169,229,27,.16)!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div.best-damage>span{
  border-color:rgba(169,229,27,.25)!important;
  background:rgba(169,229,27,.025)!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div.best-damage .cardPremiumKpiIcon{
  color:#b7ea2e!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div.best-damage strong{
  color:#b9ed34!important;
  text-shadow:0 0 18px rgba(169,229,27,.10)!important;
}

/* Hero -> archive transition: compact, no new content blocks. */
.playerProfileFinalMockup .playerReplaySectionFinal{
  margin-top:13px!important;
}

@media(max-width:1100px){
  .playerProfileFinalMockup .playerProfileHeroFinal{height:540px!important;min-height:540px!important}
  .playerProfileFinalMockup .playerProfileHeroMain{left:30px!important;top:36px!important;width:500px!important;max-width:49%!important}
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:44px!important}
  .playerProfileFinalMockup .playerHeroMasteryFinal{right:18px!important;transform:scale(.88)!important;transform-origin:top right!important}
  .playerProfileFinalMockup .playerHeroBestCard{right:20px!important;bottom:128px!important;width:400px!important}
  .playerProfileFinalMockup .playerProfileKpisFinal>div{padding:0 12px!important;grid-template-columns:38px minmax(0,1fr)!important;gap:8px!important}
  .playerProfileFinalMockup .playerProfileKpisFinal>div>span{width:35px!important;height:35px!important}
  .playerProfileFinalMockup .playerProfileKpiCopy strong{font-size:18px!important}
  .playerProfileFinalMockup .playerProfileKpiCopy small{font-size:5.8px!important}
  .playerProfileFinalMockup .playerProfileKpiCopy em{font-size:4.8px!important}
}
@media(max-width:820px){
  .playerProfileFinalMockup .playerProfileHeroFinal{height:680px!important;min-height:680px!important}
  .playerProfileFinalMockup .playerProfileHeroBg{background-position:63% center!important}
  .playerProfileFinalMockup .playerProfileHeroMain{left:22px!important;top:25px!important;width:calc(100% - 44px)!important;max-width:none!important}
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:35px!important}
  .playerProfileFinalMockup .playerProfileMetaPrimary{margin-top:16px!important}
  .playerProfileFinalMockup .approvedPlayerStats strong{min-width:92px!important;height:46px!important;font-size:18px!important}
  .playerProfileFinalMockup .approvedPlayerStats small{min-height:46px!important;font-size:12px!important}
  .playerProfileFinalMockup .playerHeroMasteryFinal{top:206px!important;right:12px!important;transform:scale(.67)!important}
  .playerProfileFinalMockup .playerHeroBestCard{left:18px!important;right:18px!important;bottom:206px!important;width:auto!important}
  .playerProfileFinalMockup .playerProfileKpisFinal{grid-template-columns:repeat(2,minmax(0,1fr))!important;height:auto!important;bottom:12px!important}
  .playerProfileFinalMockup .playerProfileKpisFinal>div{min-height:66px!important}
  .playerProfileFinalMockup .playerProfileKpisFinal>div:last-child{grid-column:1/-1!important}
  .playerProfileFinalMockup .playerProfileKpisFinal>div:not(:last-child)::after{display:none!important}
}
@media(max-width:560px){
  .playerProfileFinalMockup .playerProfileHeroFinal{height:800px!important;min-height:800px!important}
  .playerProfileFinalMockup .playerProfileHeroMain{left:15px!important;top:19px!important;width:calc(100% - 30px)!important}
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:31px!important}
  .playerProfileFinalMockup .playerProfileFacts>span{font-size:7.5px!important}
  .playerProfileFinalMockup .playerHeroMasteryFinal{top:262px!important;right:7px!important;transform:scale(.55)!important}
  .playerProfileFinalMockup .playerHeroBestCard{bottom:276px!important;left:10px!important;right:10px!important;padding:11px!important}
  .playerProfileFinalMockup .playerHeroBestMain{grid-template-columns:56px minmax(0,1fr) auto!important;gap:8px!important}
  .playerProfileFinalMockup .playerHeroBestThumb{width:56px!important;height:39px!important}
  .playerProfileFinalMockup .playerHeroBestDamage strong{font-size:22px!important}
  .playerProfileFinalMockup .playerHeroBestAwards{display:none!important}
  .playerProfileFinalMockup .playerProfileKpisFinal{left:8px!important;right:8px!important;grid-template-columns:1fr!important}
  .playerProfileFinalMockup .playerProfileKpisFinal>div{min-height:57px!important;grid-column:auto!important}
  .playerProfileFinalMockup .playerProfileKpiCopy em{display:none!important}
}


/* =====================================================================
   v0.3.5.147 — PLAYER HERO COMPACT LUXURY + HORIZONTAL BEST BATTLE CARD
   Desktop-first polish pass to bring player profile hero closer to the
   approved mockup: larger left information zone, lower/compact hero,
   and a wider horizontal best-battle card.
   ===================================================================== */
.playerProfileFinalMockup .playerProfileHeroFinal{
  height:472px!important;
  min-height:472px!important;
}
.playerProfileFinalMockup .playerProfileHeroBg{
  background-position:center 46%!important;
  filter:saturate(.95) contrast(1.05) brightness(.74)!important;
}
.playerProfileFinalMockup .playerProfileHeroShade{
  background:
    linear-gradient(90deg,rgba(3,8,7,.985) 0%,rgba(3,8,7,.955) 28%,rgba(5,10,9,.60) 49%,rgba(5,10,9,.22) 70%,rgba(4,9,8,.40) 100%),
    linear-gradient(180deg,rgba(3,7,6,.03),rgba(3,7,6,.06) 52%,rgba(4,9,8,.92) 100%)!important;
}
.playerProfileFinalMockup .playerProfileHeroMain{
  left:44px!important;
  top:28px!important;
  width:760px!important;
  max-width:44%!important;
}
.playerProfileFinalMockup .playerProfileEyebrow{
  font-size:8.7px!important;
}
.playerProfileFinalMockup .playerProfileNameLine{
  gap:16px!important;
  margin-top:13px!important;
}
.playerProfileFinalMockup .playerProfileNameLine h1{
  font-size:66px!important;
  line-height:.94!important;
  letter-spacing:-.052em!important;
}
.playerProfileFinalMockup .playerRegionBadge{
  height:38px!important;
  padding:0 13px!important;
  font-size:10.5px!important;
  gap:7px!important;
}
.playerProfileFinalMockup .playerProfileMetaPrimary{
  margin-top:22px!important;
  min-height:54px!important;
}
.playerProfileFinalMockup .approvedPlayerStats{
  min-height:54px!important;
}
.playerProfileFinalMockup .approvedPlayerStats strong{
  min-width:118px!important;
  height:54px!important;
  padding:0 16px!important;
  font-size:22px!important;
}
.playerProfileFinalMockup .approvedPlayerStats span,
.playerProfileFinalMockup .approvedPlayerStats em,
.playerProfileFinalMockup .approvedPlayerStats small{
  min-width:96px!important;
  min-height:54px!important;
  padding:10px 16px!important;
  font-size:15px!important;
}
.playerProfileFinalMockup .playerProfileFacts{
  margin-top:19px!important;
  gap:22px!important;
}
.playerProfileFinalMockup .playerProfileFacts>span{
  gap:8px!important;
  font-size:9.8px!important;
  letter-spacing:.05em!important;
}
.playerProfileFinalMockup .playerProfileFacts>span+span::before{
  margin-right:11px!important;
}
.playerProfileFinalMockup .playerProfileFactIcon{
  width:15px!important;
  height:15px!important;
}
.playerProfileFinalMockup .playerProfileHeroMain>p{
  width:560px!important;
  margin-top:14px!important;
  font-size:9px!important;
  line-height:1.6!important;
}
.playerProfileFinalMockup .playerProfileHeroActions{
  gap:12px!important;
  margin-top:20px!important;
}
.playerProfileFinalMockup .playerHeroAction{
  min-height:44px!important;
  padding:0 20px!important;
  font-size:8px!important;
  letter-spacing:.05em!important;
}
.playerProfileFinalMockup .playerHeroActionIcon{
  width:15px!important;
  height:15px!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal{
  top:26px!important;
  right:28px!important;
  width:132px!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal>img{
  width:92px!important;
  height:92px!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal strong{
  font-size:12px!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal small{
  font-size:7.4px!important;
}
.playerProfileFinalMockup .playerHeroBestCard{
  right:30px!important;
  bottom:101px!important;
  width:520px!important;
  min-height:108px!important;
  padding:12px 14px 11px!important;
  border-radius:8px!important;
}
.playerProfileFinalMockup .playerHeroBestTitle{
  margin-bottom:8px!important;
  font-size:7.4px!important;
}
.playerProfileFinalMockup .playerHeroBestMain{
  grid-template-columns:84px minmax(0,1fr) auto!important;
  gap:12px!important;
  align-items:center!important;
}
.playerProfileFinalMockup .playerHeroBestThumb{
  width:84px!important;
  height:54px!important;
}
.playerProfileFinalMockup .playerHeroBestThumbTank{
  inset:2% -4% -5% 6%!important;
}
.playerProfileFinalMockup .playerHeroBestIdentity>strong{
  font-size:13.5px!important;
  line-height:1.02!important;
}
.playerProfileFinalMockup .playerHeroBestIdentity>small{
  margin-top:5px!important;
  font-size:7.7px!important;
}
.playerProfileFinalMockup .playerHeroBestDamage{
  padding-left:2px!important;
  gap:5px!important;
}
.playerProfileFinalMockup .playerHeroBestDamage strong{
  font-size:25px!important;
}
.playerProfileFinalMockup .playerHeroBestDamage span{
  font-size:6px!important;
}
.playerProfileFinalMockup .playerHeroBestFoot{
  margin-top:9px!important;
  padding-top:8px!important;
  gap:12px!important;
  align-items:center!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics{
  gap:14px!important;
  flex-wrap:nowrap!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics>span{
  min-width:64px!important;
  grid-template-columns:16px auto!important;
  column-gap:6px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics .cardPremiumKpiIcon{
  width:16px!important;
  height:16px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics b{
  font-size:9.6px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics small{
  font-size:5.3px!important;
}
.playerProfileFinalMockup .playerHeroBestAwards{
  gap:4px!important;
  padding-left:0!important;
  margin-left:auto!important;
}
.playerProfileFinalMockup .playerHeroBestAwards .cardAwardIcon{
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal{
  left:16px!important;
  right:16px!important;
  bottom:12px!important;
  height:86px!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div{
  grid-template-columns:42px minmax(0,1fr)!important;
  gap:10px!important;
  padding:0 16px!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div>span{
  width:38px!important;
  height:38px!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal .playerProfileKpiIcon,
.playerProfileFinalMockup .playerProfileKpisFinal .cardPremiumKpiIcon,
.playerProfileFinalMockup .playerProfileKpisFinal img{
  width:22px!important;
  height:22px!important;
  max-width:22px!important;
  max-height:22px!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy strong{
  font-size:20px!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy small{
  margin-top:4px!important;
  font-size:6.1px!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy em{
  margin-top:4px!important;
  font-size:5px!important;
}
.playerProfileFinalMockup .playerReplaySectionFinal{
  margin-top:10px!important;
}
@media(max-width:1100px){
  .playerProfileFinalMockup .playerProfileHeroFinal{height:446px!important;min-height:446px!important}
  .playerProfileFinalMockup .playerProfileHeroMain{left:30px!important;top:24px!important;width:640px!important;max-width:46%!important}
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:54px!important}
  .playerProfileFinalMockup .approvedPlayerStats strong{min-width:104px!important;height:50px!important;font-size:20px!important}
  .playerProfileFinalMockup .approvedPlayerStats span,.playerProfileFinalMockup .approvedPlayerStats em,.playerProfileFinalMockup .approvedPlayerStats small{min-height:50px!important;font-size:14px!important}
  .playerProfileFinalMockup .playerProfileFacts>span{font-size:8.8px!important}
  .playerProfileFinalMockup .playerHeroAction{min-height:40px!important;padding:0 17px!important}
  .playerProfileFinalMockup .playerHeroMasteryFinal{transform:scale(.88)!important;transform-origin:top right!important}
  .playerProfileFinalMockup .playerHeroBestCard{right:20px!important;bottom:98px!important;width:458px!important}
  .playerProfileFinalMockup .playerHeroBestMain{grid-template-columns:74px minmax(0,1fr) auto!important}
  .playerProfileFinalMockup .playerHeroBestThumb{width:74px!important;height:48px!important}
  .playerProfileFinalMockup .playerProfileKpisFinal{height:82px!important}
}
@media(max-width:820px){
  .playerProfileFinalMockup .playerProfileHeroFinal{height:660px!important;min-height:660px!important}
  .playerProfileFinalMockup .playerProfileHeroMain{left:22px!important;top:24px!important;width:calc(100% - 44px)!important;max-width:none!important}
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:38px!important}
  .playerProfileFinalMockup .approvedPlayerStats strong{min-width:96px!important;height:46px!important;font-size:18px!important}
  .playerProfileFinalMockup .approvedPlayerStats span,.playerProfileFinalMockup .approvedPlayerStats em,.playerProfileFinalMockup .approvedPlayerStats small{min-height:46px!important;font-size:12px!important}
  .playerProfileFinalMockup .playerHeroMasteryFinal{top:196px!important;right:12px!important;transform:scale(.68)!important}
  .playerProfileFinalMockup .playerHeroBestCard{left:18px!important;right:18px!important;bottom:186px!important;width:auto!important}
  .playerProfileFinalMockup .playerProfileKpisFinal{height:auto!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){
  .playerProfileFinalMockup .playerProfileHeroFinal{height:785px!important;min-height:785px!important}
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:32px!important}
  .playerProfileFinalMockup .playerProfileFacts>span{font-size:7.7px!important}
  .playerProfileFinalMockup .playerHeroBestCard{bottom:266px!important;left:10px!important;right:10px!important;padding:10px!important}
  .playerProfileFinalMockup .playerHeroBestMain{grid-template-columns:60px minmax(0,1fr) auto!important;gap:8px!important}
  .playerProfileFinalMockup .playerHeroBestThumb{width:60px!important;height:40px!important}
  .playerProfileFinalMockup .playerHeroBestDamage strong{font-size:22px!important}
  .playerProfileFinalMockup .playerHeroBestAwards{display:none!important}
  .playerProfileFinalMockup .playerProfileKpisFinal{grid-template-columns:1fr!important}
}


/* =====================================================================
   v0.3.5.148 — PLAYER HERO MOCKUP PARITY PASS
   Stronger left information zone, two-line WG stat tiles, slightly lower
   hero, and an even more horizontal best-battle card.
   ===================================================================== */
.playerProfileFinalMockup .playerProfileHeroFinal{
  height:456px!important;
  min-height:456px!important;
}
.playerProfileFinalMockup .playerProfileHeroBg{
  background-position:center 44%!important;
  filter:saturate(.98) contrast(1.05) brightness(.77)!important;
}
.playerProfileFinalMockup .playerProfileHeroMain{
  left:42px!important;
  top:22px!important;
  width:790px!important;
  max-width:46%!important;
}
.playerProfileFinalMockup .playerProfileNameLine h1{
  font-size:72px!important;
  line-height:.92!important;
  letter-spacing:-.055em!important;
}
.playerProfileFinalMockup .playerRegionBadge{
  height:40px!important;
  padding:0 14px!important;
  font-size:11px!important;
}
.playerProfileFinalMockup .playerProfileMetaPrimary{
  margin-top:24px!important;
  min-height:60px!important;
}
.playerProfileFinalMockup .approvedPlayerStats{
  min-height:60px!important;
  gap:10px!important;
}
.playerProfileFinalMockup .approvedPlayerStats strong,
.playerProfileFinalMockup .approvedPlayerStats small{
  min-height:60px!important;
  padding:8px 16px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  gap:4px!important;
}
.playerProfileFinalMockup .approvedPlayerStats strong{
  min-width:118px!important;
  border-radius:7px!important;
}
.playerProfileFinalMockup .approvedPlayerStats small{
  min-width:106px!important;
  border-left:1px solid rgba(72,82,78,.45)!important;
}
.playerProfileFinalMockup .approvedPlayerStats strong b,
.playerProfileFinalMockup .approvedPlayerStats small b{
  display:block!important;
  color:#f4f8f5!important;
  font-size:17px!important;
  line-height:1!important;
  letter-spacing:-.02em!important;
  font-weight:950!important;
}
.playerProfileFinalMockup .approvedPlayerStats strong b{color:#3fe4fb!important;font-size:23px!important}
.playerProfileFinalMockup .approvedPlayerStats strong span,
.playerProfileFinalMockup .approvedPlayerStats small span{
  display:block!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  color:#98a7a0!important;
  font-size:6.8px!important;
  font-style:normal!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.playerProfileFinalMockup .playerProfileFacts{
  margin-top:20px!important;
  gap:23px!important;
}
.playerProfileFinalMockup .playerProfileFacts>span{
  font-size:10.2px!important;
  gap:8px!important;
}
.playerProfileFinalMockup .playerProfileHeroMain>p{
  width:590px!important;
  margin-top:15px!important;
  font-size:9.2px!important;
}
.playerProfileFinalMockup .playerProfileHeroActions{
  margin-top:21px!important;
  gap:12px!important;
}
.playerProfileFinalMockup .playerHeroAction{
  min-height:46px!important;
  padding:0 22px!important;
  font-size:8.1px!important;
  border-radius:5px!important;
}
.playerProfileFinalMockup .playerHeroActionIcon{width:15px!important;height:15px!important}
.playerProfileFinalMockup .playerHeroMasteryFinal{
  top:24px!important;
  right:26px!important;
  width:124px!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal>img{
  width:88px!important;
  height:88px!important;
}
.playerProfileFinalMockup .playerHeroBestCard{
  right:26px!important;
  bottom:92px!important;
  width:540px!important;
  min-height:98px!important;
  padding:11px 14px 10px!important;
  border-radius:8px!important;
}
.playerProfileFinalMockup .playerHeroBestTitle{
  margin-bottom:7px!important;
  font-size:7.2px!important;
}
.playerProfileFinalMockup .playerHeroBestMain{
  grid-template-columns:74px minmax(0,1fr) auto!important;
  gap:12px!important;
}
.playerProfileFinalMockup .playerHeroBestThumb{
  width:74px!important;
  height:46px!important;
}
.playerProfileFinalMockup .playerHeroBestIdentity>strong{
  font-size:14px!important;
}
.playerProfileFinalMockup .playerHeroBestIdentity>small{
  font-size:7.6px!important;
  margin-top:4px!important;
}
.playerProfileFinalMockup .playerHeroBestDamage strong{
  font-size:22px!important;
}
.playerProfileFinalMockup .playerHeroBestDamage span{
  font-size:5.8px!important;
}
.playerProfileFinalMockup .playerHeroBestFoot{
  margin-top:8px!important;
  padding-top:8px!important;
  gap:12px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics{
  gap:18px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics>span{
  min-width:62px!important;
  grid-template-columns:15px auto!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics .cardPremiumKpiIcon{
  width:15px!important;
  height:15px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics b{
  font-size:9.5px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics small{
  font-size:5.1px!important;
}
.playerProfileFinalMockup .playerHeroBestAwards .cardAwardIcon{
  width:22px!important;
  height:22px!important;
  flex:0 0 22px!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal{
  left:16px!important;
  right:16px!important;
  bottom:10px!important;
  height:80px!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div{
  padding:0 15px!important;
  grid-template-columns:40px minmax(0,1fr)!important;
  gap:9px!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div>span{
  width:36px!important;
  height:36px!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy strong{
  font-size:19px!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy small{
  font-size:5.9px!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy em{
  font-size:4.8px!important;
}
.playerProfileFinalMockup .playerReplaySectionFinal{
  margin-top:8px!important;
}
@media(max-width:1100px){
  .playerProfileFinalMockup .playerProfileHeroFinal{height:438px!important;min-height:438px!important}
  .playerProfileFinalMockup .playerProfileHeroMain{left:28px!important;top:22px!important;max-width:48%!important}
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:58px!important}
  .playerProfileFinalMockup .playerHeroBestCard{width:470px!important;right:18px!important;bottom:90px!important}
}
@media(max-width:820px){
  .playerProfileFinalMockup .playerProfileHeroFinal{height:650px!important;min-height:650px!important}
  .playerProfileFinalMockup .playerProfileHeroMain{left:22px!important;top:24px!important;width:calc(100% - 44px)!important;max-width:none!important}
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:40px!important}
  .playerProfileFinalMockup .approvedPlayerStats strong,.playerProfileFinalMockup .approvedPlayerStats small{min-height:48px!important}
  .playerProfileFinalMockup .approvedPlayerStats strong b{font-size:19px!important}
  .playerProfileFinalMockup .approvedPlayerStats small b{font-size:15px!important}
  .playerProfileFinalMockup .playerHeroBestCard{left:18px!important;right:18px!important;bottom:180px!important;width:auto!important}
}
@media(max-width:560px){
  .playerProfileFinalMockup .playerProfileHeroFinal{height:780px!important;min-height:780px!important}
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:33px!important}
  .playerProfileFinalMockup .approvedPlayerStats strong,.playerProfileFinalMockup .approvedPlayerStats small{min-height:44px!important;padding:7px 12px!important}
  .playerProfileFinalMockup .approvedPlayerStats strong b{font-size:17px!important}
  .playerProfileFinalMockup .approvedPlayerStats small b{font-size:13px!important}
  .playerProfileFinalMockup .approvedPlayerStats strong span,.playerProfileFinalMockup .approvedPlayerStats small span{font-size:6px!important}
  .playerProfileFinalMockup .playerHeroBestCard{bottom:260px!important;left:10px!important;right:10px!important;width:auto!important}
  .playerProfileFinalMockup .playerHeroBestAwards{display:none!important}
}


/* =====================================================================
   v0.3.5.149 — PLAYER PROFILE CANVAS + MOCKUP PARITY
   The approved mockup is a wide dashboard. The previous 1280px hard cap
   was the main remaining geometry mismatch on 1440/1600px+ desktops.
   ===================================================================== */
.playerProfilePage.playerProfileFinalMockup{
  width:min(1500px,calc(100% - 40px))!important;
  max-width:1500px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.playerProfileFinalMockup .playerProfileHeroFinal{
  height:474px!important;
  min-height:474px!important;
}
.playerProfileFinalMockup .playerProfileHeroBg{
  background-position:center 47%!important;
  filter:saturate(1.00) contrast(1.055) brightness(.84)!important;
  transform:scale(1.006)!important;
}
.playerProfileFinalMockup .playerProfileHeroShade{
  background:
    linear-gradient(90deg,rgba(3,8,7,.985) 0%,rgba(3,8,7,.95) 27%,rgba(5,10,9,.54) 45%,rgba(5,10,9,.13) 67%,rgba(4,9,8,.20) 100%),
    linear-gradient(180deg,rgba(3,7,6,.015),rgba(3,7,6,.025) 55%,rgba(4,9,8,.84) 100%)!important;
}
.playerProfileFinalMockup .playerProfileHeroMain{
  left:48px!important;
  top:30px!important;
  width:690px!important;
  max-width:44%!important;
}
.playerProfileFinalMockup .playerProfileNameLine h1{
  font-size:64px!important;
  line-height:.94!important;
}
.playerProfileFinalMockup .playerProfileMetaPrimary{
  margin-top:21px!important;
}
.playerProfileFinalMockup .approvedPlayerStats strong{
  min-width:120px!important;
}
.playerProfileFinalMockup .approvedPlayerStats small{
  min-width:108px!important;
}
.playerProfileFinalMockup .playerProfileFacts{
  margin-top:18px!important;
  gap:22px!important;
}
.playerProfileFinalMockup .playerProfileFacts>span{
  font-size:9.5px!important;
}
.playerProfileFinalMockup .playerProfileHeroMain>p{
  width:570px!important;
  font-size:9px!important;
}
.playerProfileFinalMockup .playerHeroAction{
  min-height:44px!important;
  padding:0 21px!important;
  font-size:8px!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal{
  right:38px!important;
  top:26px!important;
  width:130px!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal>img{
  width:92px!important;
  height:92px!important;
}
.playerProfileFinalMockup .playerHeroBestCard{
  right:36px!important;
  bottom:103px!important;
  width:470px!important;
  min-height:126px!important;
  padding:12px 14px 11px!important;
  background:
    radial-gradient(circle at 88% 14%,rgba(169,229,27,.022),transparent 28%),
    linear-gradient(145deg,rgba(18,22,16,.94),rgba(5,10,8,.955))!important;
}
.playerProfileFinalMockup .playerHeroBestTitle{
  margin-bottom:9px!important;
  font-size:7.5px!important;
}
.playerProfileFinalMockup .playerHeroBestMain{
  grid-template-columns:76px minmax(0,1fr) auto!important;
  gap:11px!important;
}
.playerProfileFinalMockup .playerHeroBestThumb{
  width:76px!important;
  height:49px!important;
}
.playerProfileFinalMockup .playerHeroBestIdentity>strong{
  font-size:13.4px!important;
}
.playerProfileFinalMockup .playerHeroBestIdentity>small{
  font-size:7.4px!important;
}
.playerProfileFinalMockup .playerHeroBestDamage strong{
  font-size:27px!important;
}
.playerProfileFinalMockup .playerHeroBestFoot{
  margin-top:9px!important;
  padding-top:9px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics{
  gap:16px!important;
}
.playerProfileFinalMockup .playerHeroBestAwards .cardAwardIcon{
  width:25px!important;
  height:25px!important;
  flex:0 0 25px!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal{
  left:18px!important;
  right:18px!important;
  bottom:12px!important;
  height:92px!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div{
  grid-template-columns:43px minmax(0,1fr)!important;
  gap:11px!important;
  padding:0 20px!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div>span{
  width:40px!important;
  height:40px!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal .playerProfileKpiIcon,
.playerProfileFinalMockup .playerProfileKpisFinal .cardPremiumKpiIcon,
.playerProfileFinalMockup .playerProfileKpisFinal img{
  width:23px!important;
  height:23px!important;
  max-width:23px!important;
  max-height:23px!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy strong{
  font-size:21px!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy small{
  font-size:6.2px!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy em{
  font-size:5.1px!important;
}
.playerProfileFinalMockup .playerReplaySectionFinal{
  margin-top:12px!important;
}
.playerProfileFinalMockup .playerReplayHeader{
  padding-left:2px!important;
  padding-right:2px!important;
}
@media(max-width:1320px){
  .playerProfilePage.playerProfileFinalMockup{width:calc(100% - 32px)!important}
  .playerProfileFinalMockup .playerProfileHeroMain{left:34px!important;max-width:48%!important}
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:56px!important}
  .playerProfileFinalMockup .playerHeroBestCard{right:22px!important;width:440px!important}
  .playerProfileFinalMockup .playerProfileKpisFinal>div{padding:0 14px!important}
}
@media(max-width:1100px){
  .playerProfilePage.playerProfileFinalMockup{width:calc(100% - 28px)!important}
  .playerProfileFinalMockup .playerProfileHeroFinal{height:460px!important;min-height:460px!important}
  .playerProfileFinalMockup .playerHeroBestCard{width:400px!important;right:18px!important}
}
@media(max-width:820px){
  .playerProfilePage.playerProfileFinalMockup{width:calc(100% - 22px)!important}
  .playerProfileFinalMockup .playerProfileHeroFinal{height:660px!important;min-height:660px!important}
  .playerProfileFinalMockup .playerProfileHeroMain{left:22px!important;width:calc(100% - 44px)!important;max-width:none!important}
  .playerProfileFinalMockup .playerHeroBestCard{left:18px!important;right:18px!important;width:auto!important;bottom:186px!important}
}
@media(max-width:560px){
  .playerProfilePage.playerProfileFinalMockup{width:calc(100% - 14px)!important}
}


/* =====================================================================
   v0.3.5.150 — PLAYER PROFILE CONTENT DENSITY + HERO FILL
   Profile-only pass: enrich the approved hero composition with stronger
   information hierarchy and make 1–3 replay archives feel intentional.
   HOME, /replays and battle page are intentionally untouched.
   ===================================================================== */
.playerProfilePage.playerProfileFinalMockup{
  width:min(1500px,calc(100% - 40px))!important;
  max-width:1500px!important;
}
.playerProfileFinalMockup .playerProfileHeroFinal{
  height:486px!important;
  min-height:486px!important;
  box-shadow:0 30px 82px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.026)!important;
}
.playerProfileFinalMockup .playerProfileHeroBg{
  background-position:center 46%!important;
  filter:saturate(1.04) contrast(1.06) brightness(.88)!important;
  transform:scale(1.008)!important;
}
.playerProfileFinalMockup .playerProfileHeroShade{
  background:
    linear-gradient(90deg,rgba(3,8,7,.99) 0%,rgba(3,8,7,.955) 25%,rgba(5,10,9,.54) 43%,rgba(5,10,9,.10) 66%,rgba(4,9,8,.16) 100%),
    linear-gradient(180deg,rgba(3,7,6,.01),rgba(3,7,6,.02) 54%,rgba(4,9,8,.82) 100%)!important;
}
.playerProfileFinalMockup .playerProfileHeroMain{
  left:52px!important;
  top:31px!important;
  width:720px!important;
  max-width:45%!important;
}
.playerProfileFinalMockup .playerProfileEyebrow{
  font-size:8.7px!important;
  letter-spacing:.19em!important;
}
.playerProfileFinalMockup .playerProfileNameLine{
  margin-top:14px!important;
  gap:16px!important;
}
.playerProfileFinalMockup .playerProfileNameLine h1{
  font-size:68px!important;
  line-height:.93!important;
  letter-spacing:-.052em!important;
}
.playerProfileFinalMockup .playerRegionBadge{
  height:38px!important;
  min-width:58px!important;
  padding:0 13px!important;
  gap:7px!important;
  font-size:10px!important;
}
.playerProfileFinalMockup .playerProfileMetaPrimary{
  margin-top:22px!important;
  min-height:58px!important;
}
.playerProfileFinalMockup .approvedPlayerStats{
  min-height:58px!important;
  gap:10px!important;
}
.playerProfileFinalMockup .approvedPlayerStats strong,
.playerProfileFinalMockup .approvedPlayerStats small{
  min-height:58px!important;
  padding:8px 16px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  gap:5px!important;
}
.playerProfileFinalMockup .approvedPlayerStats strong{
  min-width:122px!important;
  border-radius:7px!important;
  border-color:rgba(48,206,232,.52)!important;
}
.playerProfileFinalMockup .approvedPlayerStats small{
  min-width:108px!important;
  border-left:1px solid rgba(82,96,89,.52)!important;
}
.playerProfileFinalMockup .approvedPlayerStats strong b,
.playerProfileFinalMockup .approvedPlayerStats small b{
  display:block!important;
  color:#f4f8f6!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:-.025em!important;
}
.playerProfileFinalMockup .approvedPlayerStats strong b{
  color:#40e0f3!important;
  font-size:23px!important;
  text-shadow:0 0 16px rgba(50,207,233,.10)!important;
}
.playerProfileFinalMockup .approvedPlayerStats small b{font-size:17px!important}
.playerProfileFinalMockup .approvedPlayerStats strong span,
.playerProfileFinalMockup .approvedPlayerStats small span{
  display:block!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  color:#9aa8a1!important;
  font-size:6.7px!important;
  font-style:normal!important;
  font-weight:850!important;
  letter-spacing:.085em!important;
  text-transform:uppercase!important;
}
.playerProfileFinalMockup .playerProfileFacts{
  margin-top:19px!important;
  gap:24px!important;
}
.playerProfileFinalMockup .playerProfileFacts>span{
  gap:8px!important;
  color:#d7dfdb!important;
  font-size:10px!important;
  letter-spacing:.04em!important;
}
.playerProfileFinalMockup .playerProfileFacts>span+span::before{
  margin-right:10px!important;
  color:#8c9892!important;
}
.playerProfileFinalMockup .playerProfileFactIcon{
  width:15px!important;
  height:15px!important;
  color:#bdc7c2!important;
}
.playerProfileFinalMockup .playerProfileHeroMain>p{
  width:590px!important;
  margin-top:14px!important;
  color:#97a49d!important;
  font-size:9.2px!important;
  line-height:1.6!important;
}
.playerProfileFinalMockup .playerProfileHeroActions{
  margin-top:19px!important;
  gap:12px!important;
}
.playerProfileFinalMockup .playerHeroAction{
  min-height:46px!important;
  padding:0 22px!important;
  gap:8px!important;
  border-radius:5px!important;
  font-size:8px!important;
}
.playerProfileFinalMockup .playerHeroActionIcon{
  width:16px!important;
  height:16px!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal{
  right:37px!important;
  top:25px!important;
  width:134px!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal>img{
  width:96px!important;
  height:96px!important;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.60)) drop-shadow(0 0 20px rgba(233,187,64,.15))!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal strong{font-size:12.2px!important}
.playerProfileFinalMockup .playerHeroMasteryFinal small{font-size:7.4px!important;color:#aaa99f!important}

/* Best battle: wider, richer and still horizontal. */
.playerProfileFinalMockup .playerHeroBestCard{
  right:34px!important;
  bottom:111px!important;
  width:535px!important;
  min-height:134px!important;
  padding:13px 15px 12px!important;
  border-color:rgba(122,138,91,.66)!important;
  border-radius:9px!important;
  background:
    radial-gradient(circle at 88% 14%,rgba(169,229,27,.035),transparent 30%),
    linear-gradient(145deg,rgba(20,24,17,.945),rgba(5,10,8,.965))!important;
  box-shadow:0 22px 58px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.026)!important;
}
.playerProfileFinalMockup .playerHeroBestTitle{
  margin-bottom:9px!important;
  gap:8px!important;
  font-size:7.8px!important;
}
.playerProfileFinalMockup .playerHeroBestTitleIcon{width:14px!important;height:14px!important}
.playerProfileFinalMockup .playerHeroBestMain{
  grid-template-columns:86px minmax(0,1fr) auto!important;
  gap:12px!important;
}
.playerProfileFinalMockup .playerHeroBestThumb{
  width:86px!important;
  height:55px!important;
  border-radius:6px!important;
}
.playerProfileFinalMockup .playerHeroBestIdentity>strong{
  font-size:14px!important;
  line-height:1.02!important;
}
.playerProfileFinalMockup .playerHeroBestIdentity>small{
  margin-top:5px!important;
  font-size:7.8px!important;
}
.playerProfileFinalMockup .playerHeroBestDamage strong{
  font-size:31px!important;
  color:#b7ef2a!important;
  text-shadow:0 0 20px rgba(169,229,27,.12)!important;
}
.playerProfileFinalMockup .playerHeroBestDamage span{font-size:6.4px!important}
.playerProfileFinalMockup .playerHeroBestFoot{
  margin-top:10px!important;
  padding-top:9px!important;
  gap:15px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics{
  gap:17px!important;
  flex-wrap:nowrap!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics>span{
  min-width:66px!important;
  grid-template-columns:17px auto!important;
  column-gap:6px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics .cardPremiumKpiIcon{width:17px!important;height:17px!important}
.playerProfileFinalMockup .playerHeroBestMetrics b{font-size:10px!important}
.playerProfileFinalMockup .playerHeroBestMetrics small{font-size:5.4px!important}
.playerProfileFinalMockup .playerHeroBestAwards{
  gap:5px!important;
  margin-left:auto!important;
  padding-left:4px!important;
}
.playerProfileFinalMockup .playerHeroBestAwards .cardAwardIcon{
  width:27px!important;
  height:27px!important;
  flex:0 0 27px!important;
}

/* KPI rail: larger information hierarchy, still one integrated HUD. */
.playerProfileFinalMockup .playerProfileKpisFinal{
  left:17px!important;
  right:17px!important;
  bottom:12px!important;
  height:100px!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div{
  grid-template-columns:48px minmax(0,1fr)!important;
  gap:12px!important;
  padding:0 21px!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div>span{
  width:44px!important;
  height:44px!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal .playerProfileKpiIcon,
.playerProfileFinalMockup .playerProfileKpisFinal .cardPremiumKpiIcon,
.playerProfileFinalMockup .playerProfileKpisFinal img{
  width:25px!important;
  height:25px!important;
  max-width:25px!important;
  max-height:25px!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy strong{
  font-size:24px!important;
  line-height:.95!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy small{
  margin-top:6px!important;
  color:#d0d8d4!important;
  font-size:6.5px!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy em{
  margin-top:5px!important;
  color:#7b8982!important;
  font-size:5.2px!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div.best-damage::before{
  left:22px!important;
  right:22px!important;
  height:2px!important;
}

/* Archive density: content uses only the number of real cards available. */
.playerProfileFinalMockup .playerReplaySectionFinal{
  margin-top:8px!important;
  padding-top:15px!important;
}
.playerProfileFinalMockup .playerReplayHeader{
  margin-bottom:12px!important;
  align-items:flex-end!important;
}
.playerProfileFinalMockup .playerReplayHeader h2{
  font-size:29px!important;
}
.playerProfileFinalMockup .playerReplayHeader h2 small{
  margin-left:9px!important;
  font-size:8.7px!important;
  color:#8b9891!important;
}
.playerProfileFinalMockup .playerReplayControls{gap:14px!important}
.playerProfileFinalMockup .playerControlGroupInline{gap:6px!important}
.playerProfileFinalMockup .playerControlGroupInline>small{font-size:5.3px!important}
.playerProfileFinalMockup .playerControlGroupInline>a{
  min-width:62px!important;
  height:33px!important;
  padding:0 12px!important;
  font-size:6.3px!important;
}
.playerProfileFinalMockup .playerReplayGrid{
  gap:10px!important;
  align-items:start!important;
}
.playerProfileFinalMockup .playerReplayGrid.count-1{
  width:min(360px,100%)!important;
  grid-template-columns:minmax(0,1fr)!important;
}
.playerProfileFinalMockup .playerReplayGrid.count-2{
  width:min(730px,100%)!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.playerProfileFinalMockup .playerReplayGrid.count-3{
  width:min(1100px,100%)!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.playerProfileFinalMockup .playerReplayGrid.count-many{
  width:100%!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.playerProfileFinalMockup .playerProfilePager.is-single-page{
  display:none!important;
}
.playerProfileFinalMockup .playerProfilePager.has-pages>.catalogPager{
  margin-top:13px!important;
}

@media(max-width:1320px){
  .playerProfileFinalMockup .playerProfileHeroMain{left:36px!important;max-width:48%!important}
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:58px!important}
  .playerProfileFinalMockup .playerHeroBestCard{right:22px!important;width:468px!important}
  .playerProfileFinalMockup .playerProfileKpisFinal>div{padding:0 14px!important;grid-template-columns:41px minmax(0,1fr)!important;gap:9px!important}
  .playerProfileFinalMockup .playerProfileKpisFinal>div>span{width:38px!important;height:38px!important}
  .playerProfileFinalMockup .playerProfileKpiCopy strong{font-size:20px!important}
}
@media(max-width:1100px){
  .playerProfileFinalMockup .playerProfileHeroFinal{height:470px!important;min-height:470px!important}
  .playerProfileFinalMockup .playerHeroBestCard{width:410px!important;right:18px!important;bottom:108px!important}
  .playerProfileFinalMockup .playerReplayGrid.count-3{width:100%!important}
}
@media(max-width:820px){
  .playerProfileFinalMockup .playerProfileHeroFinal{height:675px!important;min-height:675px!important}
  .playerProfileFinalMockup .playerProfileHeroMain{left:22px!important;top:24px!important;width:calc(100% - 44px)!important;max-width:none!important}
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:39px!important}
  .playerProfileFinalMockup .approvedPlayerStats strong,.playerProfileFinalMockup .approvedPlayerStats small{min-height:48px!important}
  .playerProfileFinalMockup .playerHeroBestCard{left:18px!important;right:18px!important;bottom:190px!important;width:auto!important}
  .playerProfileFinalMockup .playerProfileKpisFinal{height:auto!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .playerProfileFinalMockup .playerReplayGrid.count-1{width:min(360px,100%)!important}
  .playerProfileFinalMockup .playerReplayGrid.count-2,.playerProfileFinalMockup .playerReplayGrid.count-3,.playerProfileFinalMockup .playerReplayGrid.count-many{width:100%!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){
  .playerProfileFinalMockup .playerProfileHeroFinal{height:800px!important;min-height:800px!important}
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:32px!important}
  .playerProfileFinalMockup .approvedPlayerStats strong,.playerProfileFinalMockup .approvedPlayerStats small{min-height:44px!important;padding:7px 12px!important}
  .playerProfileFinalMockup .playerProfileFacts>span{font-size:7.8px!important}
  .playerProfileFinalMockup .playerHeroBestCard{bottom:270px!important;left:10px!important;right:10px!important;padding:10px!important}
  .playerProfileFinalMockup .playerHeroBestAwards{display:none!important}
  .playerProfileFinalMockup .playerProfileKpisFinal{grid-template-columns:1fr!important}
  .playerProfileFinalMockup .playerReplayGrid.count-1,.playerProfileFinalMockup .playerReplayGrid.count-2,.playerProfileFinalMockup .playerReplayGrid.count-3,.playerProfileFinalMockup .playerReplayGrid.count-many{width:100%!important;grid-template-columns:1fr!important}
}


/* =====================================================================
   v0.3.5.151 — PLAYER PROFILE CANVAS WIDTH PARITY + MOCKUP SCALE
   Bring the player profile back to the same 1280px canvas as HOME and
   /replays, then re-scale the approved hero composition for that width.
   ===================================================================== */
.playerProfilePage.playerProfileFinalMockup{
  width:min(1280px,calc(100% - 40px))!important;
  max-width:1280px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.playerProfileFinalMockup .playerProfileHeroFinal{
  height:456px!important;
  min-height:456px!important;
  border-radius:8px!important;
  box-shadow:0 26px 72px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.026)!important;
}
.playerProfileFinalMockup .playerProfileHeroBg{
  background-position:center 46%!important;
  filter:saturate(1.05) contrast(1.055) brightness(.94)!important;
  transform:scale(1.006)!important;
}
.playerProfileFinalMockup .playerProfileHeroShade{
  background:
    linear-gradient(90deg,rgba(3,8,7,.992) 0%,rgba(3,8,7,.96) 27%,rgba(5,10,9,.57) 45%,rgba(5,10,9,.07) 68%,rgba(4,9,8,.09) 100%),
    linear-gradient(180deg,rgba(3,7,6,.01),rgba(3,7,6,.018) 55%,rgba(4,9,8,.80) 100%)!important;
}
.playerProfileFinalMockup .playerProfileHeroMain{
  left:38px!important;
  top:27px!important;
  width:570px!important;
  max-width:47%!important;
}
.playerProfileFinalMockup .playerProfileEyebrow{
  font-size:8.2px!important;
}
.playerProfileFinalMockup .playerProfileNameLine{
  margin-top:13px!important;
  gap:14px!important;
}
.playerProfileFinalMockup .playerProfileNameLine h1{
  font-size:60px!important;
  line-height:.94!important;
  letter-spacing:-.052em!important;
}
.playerProfileFinalMockup .playerRegionBadge{
  height:35px!important;
  min-width:54px!important;
  padding:0 11px!important;
  font-size:9.5px!important;
}
.playerProfileFinalMockup .playerProfileMetaPrimary{
  margin-top:20px!important;
  min-height:54px!important;
}
.playerProfileFinalMockup .approvedPlayerStats{
  min-height:54px!important;
  gap:9px!important;
}
.playerProfileFinalMockup .approvedPlayerStats strong,
.playerProfileFinalMockup .approvedPlayerStats small{
  min-height:54px!important;
  padding:8px 14px!important;
}
.playerProfileFinalMockup .approvedPlayerStats strong{
  min-width:112px!important;
}
.playerProfileFinalMockup .approvedPlayerStats small{
  min-width:96px!important;
}
.playerProfileFinalMockup .approvedPlayerStats strong b{
  font-size:22px!important;
}
.playerProfileFinalMockup .approvedPlayerStats small b{
  font-size:16px!important;
}
.playerProfileFinalMockup .approvedPlayerStats strong span,
.playerProfileFinalMockup .approvedPlayerStats small span{
  font-size:6.5px!important;
}
.playerProfileFinalMockup .playerProfileFacts{
  margin-top:18px!important;
  gap:20px!important;
}
.playerProfileFinalMockup .playerProfileFacts>span{
  font-size:9.2px!important;
  gap:7px!important;
}
.playerProfileFinalMockup .playerProfileFactIcon{
  width:14px!important;
  height:14px!important;
}
.playerProfileFinalMockup .playerProfileHeroMain>p{
  width:525px!important;
  margin-top:13px!important;
  font-size:8.7px!important;
}
.playerProfileFinalMockup .playerProfileHeroActions{
  margin-top:17px!important;
  gap:10px!important;
}
.playerProfileFinalMockup .playerHeroAction{
  min-height:42px!important;
  padding:0 19px!important;
  font-size:7.6px!important;
}
.playerProfileFinalMockup .playerHeroActionIcon{
  width:15px!important;
  height:15px!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal{
  top:23px!important;
  right:24px!important;
  width:118px!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal>img{
  width:88px!important;
  height:88px!important;
  filter:drop-shadow(0 11px 17px rgba(0,0,0,.60)) drop-shadow(0 0 22px rgba(233,187,64,.18))!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal strong{
  font-size:11.5px!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal small{
  font-size:7px!important;
}
.playerProfileFinalMockup .playerHeroBestCard{
  right:23px!important;
  bottom:100px!important;
  width:450px!important;
  min-height:124px!important;
  padding:12px 14px 11px!important;
  border-radius:8px!important;
}
.playerProfileFinalMockup .playerHeroBestTitle{
  margin-bottom:8px!important;
  font-size:7.4px!important;
}
.playerProfileFinalMockup .playerHeroBestMain{
  grid-template-columns:76px minmax(0,1fr) auto!important;
  gap:10px!important;
}
.playerProfileFinalMockup .playerHeroBestThumb{
  width:76px!important;
  height:50px!important;
}
.playerProfileFinalMockup .playerHeroBestIdentity>strong{
  font-size:13px!important;
}
.playerProfileFinalMockup .playerHeroBestIdentity>small{
  margin-top:4px!important;
  font-size:7.3px!important;
}
.playerProfileFinalMockup .playerHeroBestDamage strong{
  font-size:28px!important;
}
.playerProfileFinalMockup .playerHeroBestDamage span{
  font-size:6px!important;
}
.playerProfileFinalMockup .playerHeroBestFoot{
  margin-top:9px!important;
  padding-top:8px!important;
  gap:11px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics{
  gap:13px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics>span{
  min-width:59px!important;
  grid-template-columns:16px auto!important;
  column-gap:5px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics .cardPremiumKpiIcon{
  width:16px!important;
  height:16px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics b{
  font-size:9.5px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics small{
  font-size:5.1px!important;
}
.playerProfileFinalMockup .playerHeroBestAwards{
  gap:4px!important;
  padding-left:2px!important;
}
.playerProfileFinalMockup .playerHeroBestAwards .cardAwardIcon{
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal{
  left:14px!important;
  right:14px!important;
  bottom:10px!important;
  height:90px!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div{
  grid-template-columns:42px minmax(0,1fr)!important;
  gap:9px!important;
  padding:0 15px!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div>span{
  width:39px!important;
  height:39px!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal .playerProfileKpiIcon,
.playerProfileFinalMockup .playerProfileKpisFinal .cardPremiumKpiIcon,
.playerProfileFinalMockup .playerProfileKpisFinal img{
  width:23px!important;
  height:23px!important;
  max-width:23px!important;
  max-height:23px!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy strong{
  font-size:21px!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy small{
  margin-top:5px!important;
  font-size:6.1px!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy em{
  margin-top:4px!important;
  font-size:4.9px!important;
}
.playerProfileFinalMockup .playerReplaySectionFinal{
  margin-top:9px!important;
  padding-top:13px!important;
}
.playerProfileFinalMockup .playerReplayHeader h2{
  font-size:27px!important;
}
.playerProfileFinalMockup .playerReplayGrid.count-many{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
}
.playerProfileFinalMockup .playerReplayGrid.count-1{
  width:min(310px,100%)!important;
}
.playerProfileFinalMockup .playerReplayGrid.count-2{
  width:min(630px,100%)!important;
}
.playerProfileFinalMockup .playerReplayGrid.count-3{
  width:min(950px,100%)!important;
}
@media(max-width:1320px){
  .playerProfilePage.playerProfileFinalMockup{width:min(1280px,calc(100% - 32px))!important}
}
@media(max-width:1100px){
  .playerProfileFinalMockup .playerProfileHeroFinal{height:468px!important;min-height:468px!important}
  .playerProfileFinalMockup .playerProfileHeroMain{left:30px!important;max-width:48%!important}
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:52px!important}
  .playerProfileFinalMockup .playerHeroBestCard{right:18px!important;width:405px!important;bottom:100px!important}
  .playerProfileFinalMockup .playerProfileKpisFinal>div{padding:0 11px!important;grid-template-columns:38px minmax(0,1fr)!important;gap:7px!important}
  .playerProfileFinalMockup .playerProfileKpiCopy strong{font-size:18px!important}
}
@media(max-width:820px){
  .playerProfilePage.playerProfileFinalMockup{width:calc(100% - 28px)!important}
  .playerProfileFinalMockup .playerProfileHeroFinal{height:675px!important;min-height:675px!important}
  .playerProfileFinalMockup .playerProfileHeroMain{left:22px!important;top:24px!important;width:calc(100% - 44px)!important;max-width:none!important}
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:39px!important}
  .playerProfileFinalMockup .playerHeroBestCard{left:18px!important;right:18px!important;bottom:190px!important;width:auto!important}
  .playerProfileFinalMockup .playerProfileKpisFinal{height:auto!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .playerProfileFinalMockup .playerReplayGrid.count-2,.playerProfileFinalMockup .playerReplayGrid.count-3,.playerProfileFinalMockup .playerReplayGrid.count-many{width:100%!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){
  .playerProfilePage.playerProfileFinalMockup{width:calc(100% - 18px)!important}
  .playerProfileFinalMockup .playerProfileHeroFinal{height:800px!important;min-height:800px!important}
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:32px!important}
  .playerProfileFinalMockup .playerHeroBestCard{bottom:270px!important;left:10px!important;right:10px!important}
  .playerProfileFinalMockup .playerHeroBestAwards{display:none!important}
  .playerProfileFinalMockup .playerProfileKpisFinal{grid-template-columns:1fr!important}
  .playerProfileFinalMockup .playerReplayGrid.count-1,.playerProfileFinalMockup .playerReplayGrid.count-2,.playerProfileFinalMockup .playerReplayGrid.count-3,.playerProfileFinalMockup .playerReplayGrid.count-many{width:100%!important;grid-template-columns:1fr!important}
}


/* =====================================================================
   v0.3.5.152 — PLAYER PROFILE TYPOGRAPHY SCALE + FONT HIERARCHY POLISH
   Typography-only player-profile pass. Geometry from v0.3.5.151 remains
   intact; only font family/scale/weight/readability and a subtle hero
   light-lift are adjusted.
   ===================================================================== */

/* Gaming typography hierarchy — scoped strictly to player-profile UI. */
.playerProfileFinalMockup .playerProfileEyebrow,
.playerProfileFinalMockup .playerProfileNameLine h1,
.playerProfileFinalMockup .playerRegionBadge,
.playerProfileFinalMockup .approvedPlayerStats,
.playerProfileFinalMockup .playerProfileFacts,
.playerProfileFinalMockup .playerHeroAction,
.playerProfileFinalMockup .playerHeroMasteryFinal,
.playerProfileFinalMockup .playerHeroBestCard,
.playerProfileFinalMockup .playerProfileKpisFinal,
.playerProfileFinalMockup .playerReplayEyebrow,
.playerProfileFinalMockup .playerReplayHeader h2,
.playerProfileFinalMockup .playerReplayControls{
  font-family:"Bahnschrift SemiCondensed","Bahnschrift Condensed","Bahnschrift","Arial Narrow","Segoe UI",Arial,sans-serif!important;
}
.playerProfileFinalMockup .playerProfileHeroMain>p{
  font-family:"Bahnschrift","Segoe UI",Arial,sans-serif!important;
}

/* Hero artwork: tiny readability lift only; no repositioning. */
.playerProfileFinalMockup .playerProfileHeroBg{
  filter:saturate(1.08) contrast(1.065) brightness(1.00)!important;
}

/* Left profile typography. */
.playerProfileFinalMockup .playerProfileEyebrow{
  font-size:9.2px!important;
  font-weight:700!important;
  letter-spacing:.17em!important;
}
.playerProfileFinalMockup .playerProfileNameLine h1{
  font-size:62px!important;
  font-weight:800!important;
  letter-spacing:-.045em!important;
  text-rendering:geometricPrecision!important;
}
.playerProfileFinalMockup .playerRegionBadge{
  font-size:10.5px!important;
  font-weight:800!important;
  letter-spacing:.035em!important;
}
.playerProfileFinalMockup .approvedPlayerStats strong b{
  font-size:25px!important;
  font-weight:850!important;
  letter-spacing:-.025em!important;
}
.playerProfileFinalMockup .approvedPlayerStats small b{
  font-size:20px!important;
  font-weight:800!important;
  letter-spacing:-.015em!important;
}
.playerProfileFinalMockup .approvedPlayerStats strong span,
.playerProfileFinalMockup .approvedPlayerStats small span{
  font-size:8.4px!important;
  font-weight:750!important;
  line-height:1!important;
  letter-spacing:.075em!important;
}
.playerProfileFinalMockup .playerProfileFacts>span{
  font-size:10.8px!important;
  font-weight:750!important;
  letter-spacing:.035em!important;
}
.playerProfileFinalMockup .playerProfileHeroMain>p{
  font-size:10.1px!important;
  line-height:1.5!important;
  font-weight:450!important;
  color:#99a69f!important;
}
.playerProfileFinalMockup .playerHeroAction{
  font-size:9.6px!important;
  font-weight:800!important;
  letter-spacing:.04em!important;
}

/* Real mastery logic remains untouched; visual hierarchy only. */
.playerProfileFinalMockup .playerHeroMasteryFinal>img{
  width:96px!important;
  height:96px!important;
  filter:drop-shadow(0 11px 17px rgba(0,0,0,.62)) drop-shadow(0 0 25px rgba(233,187,64,.22))!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal strong{
  font-size:13.2px!important;
  font-weight:850!important;
  letter-spacing:.025em!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal small{
  font-size:8.3px!important;
  font-weight:600!important;
  letter-spacing:.02em!important;
}

/* Best Battle: same card geometry, substantially clearer typography. */
.playerProfileFinalMockup .playerHeroBestTitle{
  font-size:9.8px!important;
  font-weight:850!important;
  letter-spacing:.07em!important;
}
.playerProfileFinalMockup .playerHeroBestTitleIcon{
  width:15px!important;
  height:15px!important;
}
.playerProfileFinalMockup .playerHeroBestIdentity>strong{
  font-size:15.6px!important;
  font-weight:800!important;
  letter-spacing:-.01em!important;
}
.playerProfileFinalMockup .playerHeroBestIdentity>small{
  font-size:9.1px!important;
  font-weight:550!important;
  line-height:1.15!important;
}
.playerProfileFinalMockup .playerHeroBestDamage strong{
  font-size:32px!important;
  font-weight:850!important;
  letter-spacing:-.035em!important;
}
.playerProfileFinalMockup .playerHeroBestDamage span{
  font-size:7.6px!important;
  font-weight:700!important;
  letter-spacing:.06em!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics b{
  font-size:12.5px!important;
  font-weight:800!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics small{
  font-size:7.1px!important;
  font-weight:650!important;
  letter-spacing:.04em!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics .cardPremiumKpiIcon{
  width:18px!important;
  height:18px!important;
}
.playerProfileFinalMockup .playerHeroBestAwards .cardAwardIcon{
  width:27px!important;
  height:27px!important;
  flex:0 0 27px!important;
}

/* KPI rail: no height/layout changes, only visual fill through type scale. */
.playerProfileFinalMockup .playerProfileKpiCopy strong{
  font-size:25px!important;
  font-weight:850!important;
  letter-spacing:-.03em!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy small{
  font-size:8.5px!important;
  font-weight:750!important;
  line-height:1.05!important;
  letter-spacing:.045em!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy em{
  font-size:6.8px!important;
  font-weight:550!important;
  line-height:1.05!important;
  letter-spacing:.025em!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div>span{
  color:#d6dfda!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div.best-damage>span,
.playerProfileFinalMockup .playerProfileKpisFinal>div.replay-wins>span{
  color:#b8ed2d!important;
}

/* Archive toolbar/title — cards themselves deliberately remain untouched. */
.playerProfileFinalMockup .playerReplayEyebrow{
  font-size:7.5px!important;
  font-weight:750!important;
  letter-spacing:.145em!important;
}
.playerProfileFinalMockup .playerReplayHeader h2{
  font-size:31px!important;
  font-weight:800!important;
  letter-spacing:-.025em!important;
}
.playerProfileFinalMockup .playerReplayHeader h2 small{
  font-family:"Bahnschrift","Segoe UI",Arial,sans-serif!important;
  font-size:10.5px!important;
  font-weight:600!important;
}
.playerProfileFinalMockup .playerControlGroupInline>small{
  font-size:7px!important;
  font-weight:750!important;
  letter-spacing:.075em!important;
}
.playerProfileFinalMockup .playerControlGroupInline>a{
  font-size:8.5px!important;
  font-weight:800!important;
  letter-spacing:.035em!important;
}

@media(max-width:1100px){
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:54px!important}
  .playerProfileFinalMockup .approvedPlayerStats strong b{font-size:22px!important}
  .playerProfileFinalMockup .approvedPlayerStats small b{font-size:18px!important}
  .playerProfileFinalMockup .playerProfileFacts>span{font-size:9.7px!important}
  .playerProfileFinalMockup .playerHeroBestIdentity>strong{font-size:14.3px!important}
  .playerProfileFinalMockup .playerHeroBestDamage strong{font-size:29px!important}
  .playerProfileFinalMockup .playerProfileKpiCopy strong{font-size:22px!important}
  .playerProfileFinalMockup .playerProfileKpiCopy small{font-size:7.7px!important}
  .playerProfileFinalMockup .playerProfileKpiCopy em{font-size:6.1px!important}
}
@media(max-width:820px){
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:41px!important}
  .playerProfileFinalMockup .playerProfileFacts>span{font-size:9px!important}
  .playerProfileFinalMockup .playerProfileHeroMain>p{font-size:9.3px!important}
  .playerProfileFinalMockup .playerHeroAction{font-size:8.7px!important}
  .playerProfileFinalMockup .playerHeroBestTitle{font-size:8.8px!important}
  .playerProfileFinalMockup .playerHeroBestIdentity>strong{font-size:14px!important}
  .playerProfileFinalMockup .playerHeroBestIdentity>small{font-size:8.5px!important}
  .playerProfileFinalMockup .playerProfileKpiCopy strong{font-size:21px!important}
  .playerProfileFinalMockup .playerReplayHeader h2{font-size:28px!important}
}
@media(max-width:560px){
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:34px!important}
  .playerProfileFinalMockup .approvedPlayerStats strong b{font-size:19px!important}
  .playerProfileFinalMockup .approvedPlayerStats small b{font-size:15px!important}
  .playerProfileFinalMockup .approvedPlayerStats strong span,
  .playerProfileFinalMockup .approvedPlayerStats small span{font-size:7px!important}
  .playerProfileFinalMockup .playerProfileFacts>span{font-size:8.2px!important}
  .playerProfileFinalMockup .playerHeroBestAwards{display:none!important}
  .playerProfileFinalMockup .playerProfileKpiCopy strong{font-size:20px!important}
  .playerProfileFinalMockup .playerProfileKpiCopy small{font-size:7.4px!important}
  .playerProfileFinalMockup .playerReplayHeader h2{font-size:25px!important}
}


/* =====================================================================
   v0.3.5.153 — PLAYER PROFILE MOCKUP TYPOGRAPHY + HUD PARITY
   No layout rebuild. Bring type width, HUD clarity and best-battle surface
   closer to the final approved player-profile mockup.
   ===================================================================== */

/* Major profile display text in the mockup is broad, not condensed. */
.playerProfileFinalMockup .playerProfileNameLine h1,
.playerProfileFinalMockup .playerRegionBadge,
.playerProfileFinalMockup .approvedPlayerStats,
.playerProfileFinalMockup .playerProfileFacts,
.playerProfileFinalMockup .playerHeroAction,
.playerProfileFinalMockup .playerHeroMasteryFinal,
.playerProfileFinalMockup .playerHeroBestCard,
.playerProfileFinalMockup .playerProfileKpisFinal,
.playerProfileFinalMockup .playerReplayHeader h2,
.playerProfileFinalMockup .playerReplayControls{
  font-family:"Bahnschrift","Segoe UI",Arial,sans-serif!important;
  font-stretch:normal!important;
}
.playerProfileFinalMockup .playerProfileEyebrow,
.playerProfileFinalMockup .playerReplayEyebrow,
.playerProfileFinalMockup .playerProfileKpiCopy small,
.playerProfileFinalMockup .playerProfileKpiCopy em,
.playerProfileFinalMockup .playerControlGroupInline>small{
  font-family:"Bahnschrift SemiCondensed","Bahnschrift Condensed","Bahnschrift","Arial Narrow",sans-serif!important;
}

/* Hero art: subtle lift only, geometry stays from v0.3.5.151. */
.playerProfileFinalMockup .playerProfileHeroBg{
  filter:saturate(1.10) contrast(1.065) brightness(1.055)!important;
  transform:scale(1.016)!important;
}

/* Player identity — wider font + calmer weight = mockup-like hierarchy. */
.playerProfileFinalMockup .playerProfileNameLine h1{
  font-size:60px!important;
  font-weight:750!important;
  letter-spacing:-.034em!important;
  line-height:.96!important;
}
.playerProfileFinalMockup .playerRegionBadge{
  font-size:10.8px!important;
  font-weight:700!important;
}
.playerProfileFinalMockup .approvedPlayerStats strong b{
  font-family:"Bahnschrift","Segoe UI",Arial,sans-serif!important;
  font-size:25px!important;
  font-weight:750!important;
  letter-spacing:-.02em!important;
}
.playerProfileFinalMockup .approvedPlayerStats small b{
  font-family:"Bahnschrift","Segoe UI",Arial,sans-serif!important;
  font-size:20px!important;
  font-weight:700!important;
}
.playerProfileFinalMockup .approvedPlayerStats strong span,
.playerProfileFinalMockup .approvedPlayerStats small span{
  font-size:8.7px!important;
  font-weight:650!important;
  letter-spacing:.055em!important;
}
.playerProfileFinalMockup .playerProfileFacts>span{
  font-size:11.2px!important;
  font-weight:650!important;
  letter-spacing:.02em!important;
}
.playerProfileFinalMockup .playerProfileHeroMain>p{
  font-size:10.4px!important;
  color:#a1ada7!important;
  line-height:1.52!important;
}
.playerProfileFinalMockup .playerHeroAction{
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.02em!important;
}

/* Real mastery logic remains untouched; only legibility/presence. */
.playerProfileFinalMockup .playerHeroMasteryFinal>img{
  width:100px!important;
  height:100px!important;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.64)) drop-shadow(0 0 28px rgba(233,187,64,.25))!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal strong{
  font-size:13.8px!important;
  font-weight:750!important;
  letter-spacing:.01em!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal small{
  font-size:8.6px!important;
  color:#aaa99f!important;
}

/* Best Battle — same rectangle, typography/surface matched to mockup. */
.playerProfileFinalMockup .playerHeroBestCard{
  bottom:108px!important;
  min-height:128px!important;
  background:
    radial-gradient(circle at 88% 15%,rgba(169,229,27,.025),transparent 29%),
    linear-gradient(145deg,rgba(19,22,17,.95),rgba(6,11,9,.955))!important;
}
.playerProfileFinalMockup .playerHeroBestTitle{
  font-family:"Bahnschrift","Segoe UI",Arial,sans-serif!important;
  font-size:10px!important;
  font-weight:750!important;
  letter-spacing:.035em!important;
}
.playerProfileFinalMockup .playerHeroBestIdentity>strong{
  font-size:16px!important;
  font-weight:700!important;
  letter-spacing:-.01em!important;
}
.playerProfileFinalMockup .playerHeroBestIdentity>small{
  font-size:9.5px!important;
  font-weight:500!important;
  color:#aeb8b3!important;
}
.playerProfileFinalMockup .playerHeroBestDamage strong{
  font-size:33px!important;
  font-weight:750!important;
  letter-spacing:-.025em!important;
}
.playerProfileFinalMockup .playerHeroBestDamage span{
  font-size:7.8px!important;
  font-weight:650!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics b{
  font-family:"Bahnschrift","Segoe UI",Arial,sans-serif!important;
  font-size:12.8px!important;
  font-weight:700!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics small{
  font-size:7.4px!important;
  font-weight:600!important;
}
.playerProfileFinalMockup .playerHeroBestAwards{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  min-height:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
}
.playerProfileFinalMockup .playerHeroBestAwards .cardAwardIcon{
  width:28px!important;
  height:28px!important;
  flex:0 0 28px!important;
}

/* KPI rail: broader face, same geometry. */
.playerProfileFinalMockup .playerProfileKpiCopy strong{
  font-family:"Bahnschrift","Segoe UI",Arial,sans-serif!important;
  font-size:26px!important;
  font-weight:750!important;
  letter-spacing:-.025em!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy small{
  font-size:8.9px!important;
  font-weight:700!important;
  letter-spacing:.025em!important;
  color:#d2d9d5!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy em{
  font-size:7.1px!important;
  font-weight:550!important;
  color:#7d8983!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div>span{
  width:41px!important;
  height:41px!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal .playerProfileKpiIcon,
.playerProfileFinalMockup .playerProfileKpisFinal .cardPremiumKpiIcon,
.playerProfileFinalMockup .playerProfileKpisFinal img{
  width:24px!important;
  height:24px!important;
  max-width:24px!important;
  max-height:24px!important;
}

/* Archive title/toolbar and profile-only card typography. */
.playerProfileFinalMockup .playerReplayHeader h2{
  font-size:30px!important;
  font-weight:750!important;
  letter-spacing:-.018em!important;
}
.playerProfileFinalMockup .playerReplayHeader h2 small{
  font-family:"Bahnschrift","Segoe UI",Arial,sans-serif!important;
  font-size:11px!important;
  font-weight:500!important;
}
.playerProfileFinalMockup .playerControlGroupInline>a{
  font-family:"Bahnschrift","Segoe UI",Arial,sans-serif!important;
  font-size:9.2px!important;
  font-weight:700!important;
}
.playerProfileFinalMockup .playerReplayGrid .cardHeaderTank,
.playerProfileFinalMockup .playerReplayGrid .cardHeaderMap,
.playerProfileFinalMockup .playerReplayGrid .cardBattleStateOverlay,
.playerProfileFinalMockup .playerReplayGrid .cardHudValue,
.playerProfileFinalMockup .playerReplayGrid .cardFoot{
  font-family:"Bahnschrift","Segoe UI",Arial,sans-serif!important;
}
.playerProfileFinalMockup .playerReplayGrid .cardHeaderTank{
  font-size:14.4px!important;
  font-weight:700!important;
  letter-spacing:-.01em!important;
}
.playerProfileFinalMockup .playerReplayGrid .cardHeaderMap{
  font-size:12.2px!important;
  font-weight:550!important;
}
.playerProfileFinalMockup .playerReplayGrid .cardBattleStateOverlay strong{
  font-size:10.5px!important;
  font-weight:750!important;
}
.playerProfileFinalMockup .playerReplayGrid .cardBattleStateOverlay small{
  font-size:7px!important;
}
.playerProfileFinalMockup .playerReplayGrid .statsRow.cardHudStats .cardHudValue strong{
  font-size:16.5px!important;
  font-weight:750!important;
}
.playerProfileFinalMockup .playerReplayGrid .statsRow.cardHudStats .cardHudValue small{
  font-size:6.5px!important;
  font-weight:600!important;
}
.playerProfileFinalMockup .playerReplayGrid .cardFoot{
  font-size:7.5px!important;
}

@media(max-width:1100px){
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:53px!important}
  .playerProfileFinalMockup .playerProfileFacts>span{font-size:10px!important}
  .playerProfileFinalMockup .playerHeroBestDamage strong{font-size:30px!important}
  .playerProfileFinalMockup .playerProfileKpiCopy strong{font-size:23px!important}
  .playerProfileFinalMockup .playerProfileKpiCopy small{font-size:8px!important}
  .playerProfileFinalMockup .playerProfileKpiCopy em{font-size:6.5px!important}
}
@media(max-width:820px){
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:40px!important}
  .playerProfileFinalMockup .playerHeroBestCard{bottom:196px!important}
  .playerProfileFinalMockup .playerHeroBestDamage strong{font-size:28px!important}
  .playerProfileFinalMockup .playerProfileKpiCopy strong{font-size:21px!important}
}
@media(max-width:560px){
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:33px!important}
  .playerProfileFinalMockup .playerHeroBestCard{bottom:276px!important}
  .playerProfileFinalMockup .playerHeroBestAwards{display:none!important}
  .playerProfileFinalMockup .playerProfileKpiCopy strong{font-size:20px!important}
}


/* =====================================================================
   v0.3.5.154 — PLAYER PROFILE FINAL MOCKUP SCALE + READABILITY
   + REPLAYS CONTROLS CLEANUP
   No structural rebuild: increase the internal UI scale/readability to the
   approved mockup and remove player archive filters/sorting entirely.
   ===================================================================== */

/* Player identity: one final scale step toward the approved mockup. */
.playerProfileFinalMockup .playerProfileNameLine h1{
  font-family:"Bahnschrift","Segoe UI",Arial,sans-serif!important;
  font-size:65px!important;
  font-weight:780!important;
  line-height:.94!important;
  letter-spacing:-.028em!important;
}
.playerProfileFinalMockup .playerRegionBadge{
  min-height:36px!important;
  padding:0 13px!important;
  font-size:11.4px!important;
  font-weight:750!important;
}
.playerProfileFinalMockup .playerRegionIcon{width:15px!important;height:15px!important}

/* WG tiles: the labels must remain readable at 2K, not micro-caption sized. */
.playerProfileFinalMockup .approvedPlayerStats strong b{
  font-size:27px!important;
  font-weight:800!important;
}
.playerProfileFinalMockup .approvedPlayerStats small b{
  font-size:21px!important;
  font-weight:760!important;
}
.playerProfileFinalMockup .approvedPlayerStats strong span,
.playerProfileFinalMockup .approvedPlayerStats small span{
  font-family:"Bahnschrift SemiCondensed","Bahnschrift","Segoe UI",Arial,sans-serif!important;
  font-size:9.6px!important;
  font-weight:720!important;
  letter-spacing:.045em!important;
}

/* FermaniHUB facts and helper copy: increase legibility without changing hierarchy. */
.playerProfileFinalMockup .playerProfileFacts>span{
  font-size:12.1px!important;
  font-weight:700!important;
  letter-spacing:.018em!important;
}
.playerProfileFinalMockup .playerProfileFactIcon{
  width:16px!important;
  height:16px!important;
}
.playerProfileFinalMockup .playerProfileHeroMain>p{
  font-size:11.1px!important;
  line-height:1.5!important;
  color:#aab5af!important;
}
.playerProfileFinalMockup .playerHeroAction{
  min-height:45px!important;
  padding:0 20px!important;
  font-size:10.8px!important;
  font-weight:760!important;
}
.playerProfileFinalMockup .playerHeroActionIcon{
  width:16px!important;
  height:16px!important;
}

/* Cinematic art: only a local light lift, no repositioning/reframing. */
.playerProfileFinalMockup .playerProfileHeroBg{
  filter:saturate(1.12) contrast(1.075) brightness(1.085)!important;
}

/* Real mastery badge: data logic untouched, text receives readable scale. */
.playerProfileFinalMockup .playerHeroMasteryFinal>img{
  width:104px!important;
  height:104px!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal strong{
  font-size:14.8px!important;
  font-weight:800!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal small{
  font-size:9.5px!important;
  font-weight:600!important;
  color:#b5b3aa!important;
}

/* Best Battle: outer geometry stays; only content gets the final mockup scale. */
.playerProfileFinalMockup .playerHeroBestTitle{
  font-size:10.8px!important;
  font-weight:800!important;
}
.playerProfileFinalMockup .playerHeroBestTitleIcon{
  width:15px!important;
  height:15px!important;
}
.playerProfileFinalMockup .playerHeroBestThumb{
  width:80px!important;
  height:52px!important;
}
.playerProfileFinalMockup .playerHeroBestIdentity>strong{
  font-size:17.2px!important;
  font-weight:760!important;
}
.playerProfileFinalMockup .playerHeroBestIdentity>small{
  margin-top:5px!important;
  font-size:10.3px!important;
  font-weight:550!important;
}
.playerProfileFinalMockup .playerHeroBestDamage strong{
  font-size:35px!important;
  font-weight:800!important;
}
.playerProfileFinalMockup .playerHeroBestDamage span{
  font-size:8.4px!important;
  font-weight:700!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics .cardPremiumKpiIcon{
  width:18px!important;
  height:18px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics b{
  font-size:13.8px!important;
  font-weight:760!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics small{
  font-size:7.9px!important;
  font-weight:650!important;
}
.playerProfileFinalMockup .playerHeroBestAwards{
  gap:5px!important;
}
.playerProfileFinalMockup .playerHeroBestAwards .cardAwardIcon{
  width:29px!important;
  height:29px!important;
  flex:0 0 29px!important;
}

/* KPI rail: fill the existing cells rather than increasing rail height. */
.playerProfileFinalMockup .playerProfileKpisFinal>div>span{
  width:44px!important;
  height:44px!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal .playerProfileKpiIcon,
.playerProfileFinalMockup .playerProfileKpisFinal .cardPremiumKpiIcon,
.playerProfileFinalMockup .playerProfileKpisFinal img{
  width:26px!important;
  height:26px!important;
  max-width:26px!important;
  max-height:26px!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy strong{
  font-size:28px!important;
  font-weight:800!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy small{
  font-size:9.7px!important;
  font-weight:760!important;
  line-height:1.06!important;
}
.playerProfileFinalMockup .playerProfileKpiCopy em{
  font-size:7.7px!important;
  font-weight:580!important;
}

/* Archive: clean profile stream, fixed newest-first. No catalogue controls here. */
.playerProfileFinalMockup .playerReplayHeaderClean{
  display:block!important;
}
.playerProfileFinalMockup .playerReplayControls{
  display:none!important;
}
.playerProfileFinalMockup .playerReplayEyebrow{
  font-size:8.8px!important;
  letter-spacing:.14em!important;
}
.playerProfileFinalMockup .playerReplayHeader h2{
  font-size:32px!important;
  font-weight:800!important;
  letter-spacing:-.015em!important;
}
.playerProfileFinalMockup .playerReplayHeader h2 small{
  margin-left:10px!important;
  font-size:12px!important;
  font-weight:550!important;
  color:#98a49e!important;
}

/* Profile-only replay cards: final readability lift, no card geometry changes. */
.playerProfileFinalMockup .playerReplayGrid .cardHeaderTank{
  font-size:15.4px!important;
  font-weight:760!important;
}
.playerProfileFinalMockup .playerReplayGrid .cardHeaderMap{
  font-size:12.9px!important;
  font-weight:580!important;
}
.playerProfileFinalMockup .playerReplayGrid .cardBattleStateOverlay strong{
  font-size:11.2px!important;
  font-weight:800!important;
}
.playerProfileFinalMockup .playerReplayGrid .cardBattleStateOverlay small{
  font-size:7.5px!important;
}
.playerProfileFinalMockup .playerReplayGrid .statsRow.cardHudStats .cardHudValue strong{
  font-size:17.4px!important;
  font-weight:800!important;
}
.playerProfileFinalMockup .playerReplayGrid .statsRow.cardHudStats .cardHudValue small{
  font-size:6.9px!important;
  font-weight:650!important;
}
.playerProfileFinalMockup .playerReplayGrid .cardFoot{
  font-size:7.9px!important;
}

@media(max-width:1100px){
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:56px!important}
  .playerProfileFinalMockup .playerProfileFacts>span{font-size:10.6px!important}
  .playerProfileFinalMockup .playerProfileHeroMain>p{font-size:10px!important}
  .playerProfileFinalMockup .playerHeroBestDamage strong{font-size:31px!important}
  .playerProfileFinalMockup .playerProfileKpiCopy strong{font-size:24px!important}
  .playerProfileFinalMockup .playerProfileKpiCopy small{font-size:8.5px!important}
  .playerProfileFinalMockup .playerProfileKpiCopy em{font-size:6.7px!important}
}
@media(max-width:820px){
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:41px!important}
  .playerProfileFinalMockup .playerProfileFacts>span{font-size:9.4px!important}
  .playerProfileFinalMockup .playerHeroBestDamage strong{font-size:28px!important}
  .playerProfileFinalMockup .playerProfileKpiCopy strong{font-size:22px!important}
  .playerProfileFinalMockup .playerReplayHeader h2{font-size:27px!important}
}
@media(max-width:560px){
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:34px!important}
  .playerProfileFinalMockup .playerHeroBestAwards{display:none!important}
  .playerProfileFinalMockup .playerProfileKpiCopy strong{font-size:20px!important}
  .playerProfileFinalMockup .playerReplayHeader h2{font-size:24px!important}
}


/* ================================================================
   v0.3.5.155 — PLAYER PROFILE CINEMATIC LIGHTING + GLASS DEPTH POLISH
   Scope: player profile page only. Geometry and typography stay intact.
   ================================================================ */
.playerProfilePage.playerProfileFinalMockup{
  position:relative!important;
}

.playerProfileHero{
  box-shadow:0 28px 76px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.02) inset,0 0 34px rgba(229,182,62,.04)!important;
}
.playerProfileHero::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 84% 35%,rgba(255,220,149,.24) 0%,rgba(255,204,120,.16) 10%,rgba(255,186,71,.07) 24%,transparent 44%),
    radial-gradient(ellipse at 81% 62%,rgba(255,196,98,.10) 0%,rgba(255,196,98,.05) 24%,transparent 55%),
    linear-gradient(110deg,transparent 48%,rgba(255,226,180,.05) 56%,transparent 66%);
  mix-blend-mode:screen!important;
}
.playerProfileHero::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  background:
    radial-gradient(ellipse at 18% 44%,rgba(0,0,0,.26) 0%,rgba(0,0,0,.13) 36%,transparent 70%),
    linear-gradient(90deg,rgba(3,7,6,.36) 0%,rgba(3,7,6,.16) 32%,transparent 57%),
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 14%,rgba(2,6,5,.02) 58%,rgba(2,6,5,.18) 100%);
}
.playerProfileHeroBg{
  filter:saturate(.94) contrast(1.08) brightness(.89) sepia(.08)!important;
  transform:scale(1.018)!important;
}
.playerProfileHeroShade{
  background:
    linear-gradient(90deg,rgba(4,9,8,.96) 0%,rgba(4,9,8,.83) 33%,rgba(5,10,9,.27) 61%,rgba(5,10,9,.12) 76%,rgba(5,10,9,.43) 100%),
    linear-gradient(180deg,rgba(4,8,7,.02),rgba(4,8,7,.02) 63%,rgba(5,10,9,.86) 100%),
    radial-gradient(circle at 84% 35%,rgba(255,201,108,.22) 0%,rgba(255,201,108,.05) 19%,transparent 43%)!important;
}
.playerProfileHeroMain,
.playerHeroMastery,
.playerHeroBestCard,
.playerProfileKpis{
  isolation:isolate!important;
}
.playerProfileHeroMain::before{
  content:""!important;
  position:absolute!important;
  left:-18px!important;
  right:22%!important;
  top:-14px!important;
  bottom:-16px!important;
  z-index:-1!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,rgba(5,10,8,.42),rgba(5,10,8,.20) 58%,transparent 100%)!important;
  filter:blur(14px)!important;
}

.playerHeroMastery{
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.52)) drop-shadow(0 0 16px rgba(232,183,59,.13))!important;
}
.playerHeroMastery::before{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  left:15px!important;
  right:15px!important;
  top:6px!important;
  height:56px!important;
  border-radius:50%!important;
  pointer-events:none!important;
  background:radial-gradient(circle,rgba(255,210,112,.20) 0%,rgba(255,210,112,.08) 34%,transparent 68%)!important;
  filter:blur(8px)!important;
}
.playerHeroMastery>img{
  filter:brightness(1.12) saturate(1.10) drop-shadow(0 0 16px rgba(232,183,59,.22))!important;
}
.playerHeroMastery strong{
  text-shadow:0 1px 6px rgba(0,0,0,.40)!important;
}
.playerHeroMastery small{
  color:#aeb9b3!important;
}

.playerHeroBestCard{
  border-color:rgba(126,142,103,.72)!important;
  background:linear-gradient(180deg,rgba(17,23,18,.80),rgba(7,12,10,.86))!important;
  backdrop-filter:blur(16px) saturate(1.05)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.39), inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(255,255,255,.03)!important;
}
.playerHeroBestCard::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 19%,transparent 100%),
    radial-gradient(circle at 11% 0%,rgba(169,229,27,.12),transparent 32%);
}
.playerHeroBestCard::after{
  content:""!important;
  position:absolute!important;
  left:10px!important;
  right:10px!important;
  bottom:-12px!important;
  height:16px!important;
  border-radius:50%!important;
  pointer-events:none!important;
  background:radial-gradient(ellipse,rgba(0,0,0,.30) 0%,transparent 72%)!important;
  filter:blur(8px)!important;
}
.playerProfileFinalMockup .playerHeroBestCard:hover{
  box-shadow:0 22px 52px rgba(0,0,0,.46),0 0 24px rgba(169,229,27,.05),inset 0 1px 0 rgba(255,255,255,.10)!important;
}
.playerProfileFinalMockup .playerHeroBestTitle{
  color:#c6f141!important;
  text-shadow:0 0 10px rgba(169,229,27,.16)!important;
}
.playerProfileFinalMockup .playerHeroBestThumb{
  border-color:rgba(114,126,116,.64)!important;
  box-shadow:0 6px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.playerProfileFinalMockup .playerHeroBestThumb::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 32%,rgba(0,0,0,.08) 100%)!important;
}
.playerProfileFinalMockup .playerHeroBestThumbTank{
  filter:brightness(1.07) contrast(1.06) drop-shadow(0 6px 7px rgba(0,0,0,.52))!important;
}
.playerProfileFinalMockup .playerHeroBestIdentity>strong{
  text-shadow:0 1px 4px rgba(0,0,0,.46)!important;
}
.playerProfileFinalMockup .playerHeroBestDamage strong{
  color:#b7ec35!important;
  text-shadow:0 0 18px rgba(169,229,27,.14)!important;
}
.playerProfileFinalMockup .playerHeroBestDamage span{
  color:#9eaaa4!important;
}
.playerProfileFinalMockup .playerHeroBestFoot{
  border-top:1px solid rgba(96,110,101,.42)!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics .cardPremiumKpiIcon{
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.42))!important;
}
.playerProfileFinalMockup .playerHeroBestAwards .cardAwardIcon{
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.34))!important;
}

.playerProfileKpis{
  border-color:rgba(201,219,210,.18)!important;
  background:linear-gradient(180deg,rgba(10,18,15,.76),rgba(6,12,10,.86))!important;
  backdrop-filter:blur(16px) saturate(1.04)!important;
  box-shadow:0 14px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -18px 26px rgba(0,0,0,.16)!important;
}
.playerProfileKpis::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 26%)!important;
}
.playerProfileKpis>div:not(:last-child)::after{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(205,219,212,.14),rgba(255,255,255,.02))!important;
}
.playerProfileKpis>div>span{
  color:#c0ef49!important;
  filter:drop-shadow(0 0 8px rgba(169,229,27,.08))!important;
}
.playerProfileKpis strong{
  text-shadow:0 1px 4px rgba(0,0,0,.36)!important;
}
.playerProfileKpis .best-damage strong,
.playerProfileKpis .replay-wins strong{
  color:#c1ef42!important;
  text-shadow:0 0 16px rgba(169,229,27,.10),0 1px 4px rgba(0,0,0,.38)!important;
}
.playerProfileKpis small,
.playerProfileKpis em{
  color:#87938d!important;
}

.playerReplayEyebrow::before,
.playerProfileEyebrow::before{
  box-shadow:0 0 12px rgba(169,229,27,.24)!important;
}
.playerReplaySectionHead,
.playerArchiveSectionHead,
.playerProfileArchiveHeader,
.playerProfileArchive{
  position:relative!important;
}
.playerProfilePager{
  box-shadow:0 8px 20px rgba(0,0,0,.12)!important;
}


/* =====================================================================
   v0.3.5.156 — PLAYER PROFILE MOCKUP FX PARITY PASS
   Tight visual parity pass against the approved mockup:
   cinematic lighting, warmer sunset glow, softer glass, more premium depth,
   subtler left masking, richer mastery badge, and cleaner archive surface.
   ===================================================================== */
.playerProfilePage.playerProfileFinalMockup{
  background:
    radial-gradient(circle at 86% 4%,rgba(236,168,76,.06),transparent 24%),
    linear-gradient(180deg,rgba(5,10,9,.00),rgba(5,10,9,.08) 48%,rgba(4,9,8,.18) 100%)!important;
}
.playerProfileFinalMockup .playerProfileHero{
  border-color:rgba(205,221,213,.20)!important;
  box-shadow:
    0 34px 92px rgba(0,0,0,.46),
    0 0 0 1px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -20px 42px rgba(0,0,0,.20)!important;
}
.playerProfileFinalMockup .playerProfileHero::before{
  width:318px!important;
  height:2px!important;
  background:linear-gradient(90deg,rgba(178,241,49,.96) 0%,rgba(178,241,49,.44) 46%,transparent 100%)!important;
  box-shadow:0 0 20px rgba(169,229,27,.26)!important;
}
.playerProfileFinalMockup .playerProfileHero::after{
  background:
    radial-gradient(circle at 83% 20%,rgba(240,176,84,.18),transparent 19%),
    radial-gradient(circle at 76% 30%,rgba(255,212,135,.07),transparent 18%),
    radial-gradient(circle at 69% 55%,rgba(169,229,27,.06),transparent 22%),
    linear-gradient(180deg,rgba(255,255,255,.026),transparent 18%,transparent 72%,rgba(0,0,0,.22))!important;
}
.playerProfileFinalMockup .playerProfileHeroBg{
  background-position:center 45%!important;
  filter:saturate(.94) contrast(1.10) brightness(.78)!important;
  transform:scale(1.022)!important;
}
.playerProfileFinalMockup .playerProfileHeroShade{
  background:
    linear-gradient(90deg,rgba(3,8,7,.955) 0%,rgba(4,9,8,.90) 25%,rgba(6,11,10,.58) 47%,rgba(6,11,10,.18) 72%,rgba(6,10,9,.40) 100%),
    linear-gradient(180deg,rgba(3,7,6,.03),rgba(3,7,6,.05) 50%,rgba(4,9,8,.90) 100%)!important;
}
.playerProfileFinalMockup .playerProfileHeroMain{
  top:40px!important;
  left:44px!important;
}
.playerProfileFinalMockup .playerProfileNameLine{
  gap:15px!important;
  margin-top:14px!important;
}
.playerProfileFinalMockup .playerProfileNameLine h1{
  text-shadow:0 14px 36px rgba(0,0,0,.46),0 1px 0 rgba(255,255,255,.02)!important;
}
.playerProfileFinalMockup .playerRegionBadge{
  border-color:rgba(186,208,196,.26)!important;
  background:linear-gradient(180deg,rgba(16,27,22,.84),rgba(8,14,12,.82))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 10px 22px rgba(0,0,0,.20)!important;
}
.playerProfileFinalMockup .playerProfileMetaPrimary{
  margin-top:18px!important;
}
.playerProfileFinalMockup .playerProfileMetaPrimary .approvedPlayerStats,
.playerProfileFinalMockup .playerProfileMetaPrimary [data-player-stats]{
  border-color:rgba(88,214,255,.56)!important;
  background:linear-gradient(180deg,rgba(8,22,24,.70),rgba(5,13,16,.64))!important;
  box-shadow:0 0 0 1px rgba(49,176,216,.10),0 0 18px rgba(54,196,255,.08),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.playerProfileFinalMockup .playerProfileMeta>span.playerProfileMetaFact{
  color:#aeb9b4!important;
}
.playerProfileFinalMockup .playerProfileFacts{
  gap:18px!important;
}
.playerProfileFinalMockup .playerProfileFacts span{
  color:#cfd8d3!important;
}
.playerProfileFinalMockup .playerProfileFacts .playerProfileFactIcon{
  opacity:.90!important;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.35))!important;
}
.playerProfileFinalMockup .playerProfileHeroMain>p{
  color:#87958d!important;
}
.playerProfileFinalMockup .playerProfileHeroActions{
  margin-top:15px!important;
  gap:9px!important;
}
.playerProfileFinalMockup .playerHeroAction{
  border-color:rgba(191,210,200,.18)!important;
  background:linear-gradient(180deg,rgba(10,18,15,.78),rgba(7,12,10,.76))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 8px 20px rgba(0,0,0,.12)!important;
}
.playerProfileFinalMockup .playerHeroActionPrimary{
  border-color:rgba(183,233,57,.34)!important;
  background:linear-gradient(180deg,rgba(132,180,30,.34),rgba(58,84,14,.28))!important;
  color:#c5f156!important;
  box-shadow:inset 0 -2px 0 rgba(169,229,27,.46),0 0 18px rgba(169,229,27,.07),0 10px 26px rgba(0,0,0,.14)!important;
}
.playerProfileFinalMockup .playerHeroActionPrimary:hover{
  box-shadow:inset 0 -2px 0 rgba(169,229,27,.58),0 0 22px rgba(169,229,27,.11),0 12px 28px rgba(0,0,0,.16)!important;
}
.playerProfileFinalMockup .playerHeroMastery{
  top:24px!important;
  right:26px!important;
  gap:10px!important;
}
.playerProfileFinalMockup .playerHeroMastery img{
  width:102px!important;
  height:102px!important;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.26)) drop-shadow(0 0 22px rgba(255,194,96,.10))!important;
}
.playerProfileFinalMockup .playerHeroMastery strong{
  color:#e9dcc9!important;
  text-shadow:0 1px 0 rgba(255,255,255,.05),0 3px 10px rgba(0,0,0,.28)!important;
}
.playerProfileFinalMockup .playerHeroMastery small{
  color:#a5aaa7!important;
  text-shadow:0 2px 10px rgba(0,0,0,.22)!important;
}
.playerProfileFinalMockup .playerHeroBestCard{
  top:160px!important;
  right:20px!important;
  width:394px!important;
  min-height:120px!important;
  border-radius:8px!important;
  border-color:rgba(134,149,116,.76)!important;
  background:linear-gradient(180deg,rgba(16,22,18,.74),rgba(7,12,10,.88))!important;
  box-shadow:
    0 20px 48px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(255,255,255,.02)!important;
  backdrop-filter:blur(18px) saturate(1.05)!important;
}
.playerProfileFinalMockup .playerHeroBestCard::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 22%,transparent 100%),
    radial-gradient(circle at 10% 0%,rgba(169,229,27,.14),transparent 34%),
    radial-gradient(circle at 100% 0%,rgba(240,176,84,.06),transparent 24%)!important;
}
.playerProfileFinalMockup .playerHeroBestCard::after{
  bottom:-13px!important;
  background:radial-gradient(ellipse,rgba(0,0,0,.36) 0%,transparent 74%)!important;
}
.playerProfileFinalMockup .playerHeroBestHead{
  padding-bottom:10px!important;
}
.playerProfileFinalMockup .playerHeroBestTitle{
  text-shadow:0 0 12px rgba(169,229,27,.18)!important;
}
.playerProfileFinalMockup .playerHeroBestThumb{
  border-radius:4px!important;
}
.playerProfileFinalMockup .playerHeroBestIdentity>strong{
  color:#f1f3f2!important;
}
.playerProfileFinalMockup .playerHeroBestDamage strong{
  font-size:26px!important;
  letter-spacing:-.03em!important;
}
.playerProfileFinalMockup .playerHeroBestFoot{
  border-top:1px solid rgba(104,118,109,.46)!important;
  margin-top:8px!important;
  padding-top:10px!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics .playerHeroBestMetric strong{
  color:#eef3f0!important;
}
.playerProfileFinalMockup .playerHeroBestMetrics .cardPremiumKpiIcon,
.playerProfileFinalMockup .playerHeroBestMetrics .playerHeroBestMetric img{
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.42))!important;
}
.playerProfileFinalMockup .playerHeroBestAwards{
  gap:7px!important;
}
.playerProfileFinalMockup .playerHeroBestAwards .cardAwardIcon{
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.34))!important;
}
.playerProfileFinalMockup .playerProfileKpis{
  background:linear-gradient(180deg,rgba(10,18,15,.78),rgba(6,12,10,.90))!important;
  border-color:rgba(203,219,211,.18)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.04),inset 0 -18px 26px rgba(0,0,0,.16)!important;
}
.playerProfileFinalMockup .playerProfileKpis::before{
  color:rgba(153,174,164,.28)!important;
}
.playerProfileFinalMockup .playerProfileKpis>div:not(:last-child)::after{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(205,219,212,.16),rgba(255,255,255,.02))!important;
}
.playerProfileFinalMockup .playerProfileKpis>div.best-damage{
  background:linear-gradient(180deg,rgba(108,155,18,.11),rgba(57,83,14,.04))!important;
}
.playerProfileFinalMockup .playerProfileKpis>div.best-damage::before{
  left:16px!important;
  right:16px!important;
  box-shadow:0 0 12px rgba(169,229,27,.12)!important;
}
.playerProfileFinalMockup .playerProfileKpis>div:hover{
  background-color:rgba(255,255,255,.014)!important;
}
.playerProfileFinalMockup .playerReplaySection{
  position:relative!important;
  padding-top:8px!important;
}
.playerProfileFinalMockup .playerReplaySection::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  height:180px!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(14,21,19,.16),rgba(14,21,19,0))!important;
}
.playerProfileFinalMockup .playerReplayHeader{
  position:relative!important;
  z-index:1!important;
}
.playerProfileFinalMockup .playerReplayHeader h2{
  text-shadow:0 6px 16px rgba(0,0,0,.22)!important;
}
.playerProfileFinalMockup .playerReplayGrid{
  position:relative!important;
  z-index:1!important;
}
.playerProfileFinalMockup .playerProfilePager{
  position:relative!important;
  z-index:1!important;
}

/* =====================================================================
   v0.3.5.157 — PLAYER PROFILE CINEMATIC DEPTH + ARCHIVE GLASS PARITY
   Screenshot-driven polish against the approved player-profile mockup.
   Scope is visual only: 1280px canvas, hero/KPI/archive structure, data
   logic, real mastery selection and newest-first archive stay unchanged.
   ===================================================================== */

/* Hero artwork: v156 was crushing the authored render too hard. Restore
   midtone detail on the tank and terrain, then add the warm sunset pocket
   visible in the approved mockup without touching the scene geometry. */
.playerProfileFinalMockup .playerProfileHeroBg{
  filter:saturate(1.08) contrast(1.055) brightness(.97) sepia(.045)!important;
  transform:scale(1.018)!important;
}
.playerProfileFinalMockup .playerProfileHeroShade{
  background:
    linear-gradient(90deg,rgba(3,8,7,.84) 0%,rgba(4,9,8,.73) 26%,rgba(6,11,10,.39) 47%,rgba(6,11,10,.09) 70%,rgba(5,10,9,.25) 100%),
    linear-gradient(180deg,rgba(2,6,5,.01),rgba(2,6,5,.02) 55%,rgba(4,9,8,.78) 100%)!important;
}
.playerProfileFinalMockup .playerProfileHero::after{
  background:
    radial-gradient(circle at 88% 33%,rgba(255,220,151,.29) 0%,rgba(255,199,104,.17) 13%,rgba(239,158,66,.07) 29%,transparent 48%),
    radial-gradient(ellipse at 74% 48%,rgba(236,169,84,.10) 0%,rgba(236,169,84,.035) 30%,transparent 57%),
    radial-gradient(ellipse at 58% 81%,rgba(168,224,45,.035),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 17%,transparent 70%,rgba(0,0,0,.20))!important;
}
.playerProfileFinalMockup .playerProfileHero::before{
  width:338px!important;
  background:linear-gradient(90deg,rgba(184,244,50,.98) 0%,rgba(178,238,47,.48) 44%,transparent 100%)!important;
  box-shadow:0 0 24px rgba(169,229,27,.24)!important;
}
.playerProfileFinalMockup .playerProfileHero{
  border-color:rgba(206,222,214,.22)!important;
  box-shadow:
    0 30px 82px rgba(0,0,0,.40),
    0 0 0 1px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -24px 48px rgba(0,0,0,.18),
    0 0 38px rgba(231,177,71,.035)!important;
}

/* Approved mockup breathing room. This changes spacing only, not the
   1280px canvas or section composition. */
.playerProfileFinalMockup .playerProfileHeroMain{
  left:56px!important;
  top:46px!important;
}
.playerProfileFinalMockup .playerProfileEyebrow{
  color:#aeb9b3!important;
  text-shadow:0 2px 9px rgba(0,0,0,.38)!important;
}
.playerProfileFinalMockup .playerProfileNameLine{
  margin-top:15px!important;
}
.playerProfileFinalMockup .playerProfileNameLine h1{
  color:#f7f9f8!important;
  text-shadow:0 15px 38px rgba(0,0,0,.50),0 1px 0 rgba(255,255,255,.035)!important;
}
.playerProfileFinalMockup .playerProfileMetaPrimary{
  margin-top:20px!important;
}
.playerProfileFinalMockup .approvedPlayerStats strong,
.playerProfileFinalMockup .approvedPlayerStats small{
  background:linear-gradient(180deg,rgba(7,22,24,.78),rgba(4,14,16,.72))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 22px rgba(0,0,0,.12)!important;
}
.playerProfileFinalMockup .playerProfileFacts{
  margin-top:20px!important;
}
.playerProfileFinalMockup .playerProfileHeroMain>p{
  color:#a2aea8!important;
}
.playerProfileFinalMockup .playerProfileHeroActions{
  margin-top:19px!important;
}
.playerProfileFinalMockup .playerHeroAction{
  border-color:rgba(196,215,205,.21)!important;
  background:linear-gradient(180deg,rgba(12,20,17,.82),rgba(6,12,10,.80))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 10px 24px rgba(0,0,0,.16)!important;
}
.playerProfileFinalMockup .playerHeroActionPrimary{
  border-color:rgba(186,235,57,.48)!important;
  background:linear-gradient(180deg,rgba(137,188,28,.78),rgba(77,112,11,.82))!important;
  color:#f2ffd0!important;
  text-shadow:0 1px 1px rgba(0,0,0,.42)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(55,83,8,.64),0 0 20px rgba(169,229,27,.08),0 10px 26px rgba(0,0,0,.16)!important;
}

/* Mastery: stronger gold volume and a softer halo, still the real best
   mastery returned by the existing player-profile logic. */
.playerProfileFinalMockup .playerHeroMasteryFinal{
  filter:drop-shadow(0 12px 23px rgba(0,0,0,.48))!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal::before{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  left:4px!important;
  right:4px!important;
  top:2px!important;
  height:88px!important;
  border-radius:50%!important;
  pointer-events:none!important;
  background:radial-gradient(circle,rgba(255,207,101,.20) 0%,rgba(255,188,63,.07) 39%,transparent 70%)!important;
  filter:blur(9px)!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal>img{
  filter:brightness(1.10) saturate(1.08) drop-shadow(0 9px 16px rgba(0,0,0,.48)) drop-shadow(0 0 17px rgba(241,184,65,.16))!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal strong{
  color:#f0e7da!important;
}

/* Best battle glass: clearer edge separation from the hero art, but less
   opaque than a normal card so it reads as premium HUD glass. */
.playerProfileFinalMockup .playerHeroBestCard{
  border-color:rgba(149,162,132,.72)!important;
  background:
    linear-gradient(180deg,rgba(18,25,20,.76),rgba(7,12,10,.86))!important;
  backdrop-filter:blur(20px) saturate(1.08)!important;
  box-shadow:
    0 22px 52px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.018) inset,
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(255,255,255,.025)!important;
}
.playerProfileFinalMockup .playerHeroBestCard::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,0) 24%),
    radial-gradient(circle at 9% 0%,rgba(169,229,27,.15),transparent 34%),
    radial-gradient(circle at 94% 2%,rgba(245,185,79,.07),transparent 27%)!important;
}
.playerProfileFinalMockup .playerHeroBestTitle{
  color:#c7f241!important;
  text-shadow:0 0 13px rgba(169,229,27,.19)!important;
}
.playerProfileFinalMockup .playerHeroBestDamage strong{
  color:#bceb34!important;
  text-shadow:0 0 20px rgba(169,229,27,.16),0 2px 8px rgba(0,0,0,.38)!important;
}
.playerProfileFinalMockup .playerHeroBestFoot{
  border-top-color:rgba(125,139,130,.46)!important;
}
.playerProfileFinalMockup .playerHeroBestAwards .cardAwardIcon{
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.38)) drop-shadow(0 0 4px rgba(235,185,63,.05))!important;
}

/* KPI rail: deeper glass, brighter icon rings and a precise lime accent
   on best damage instead of a selected-tab look. */
.playerProfileFinalMockup .playerProfileKpisFinal{
  border-color:rgba(199,218,208,.20)!important;
  background:
    linear-gradient(180deg,rgba(10,19,16,.80),rgba(5,11,9,.91))!important;
  backdrop-filter:blur(20px) saturate(1.06)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.055),inset 0 -22px 30px rgba(0,0,0,.15)!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div>span{
  border-color:rgba(183,213,126,.20)!important;
  background:radial-gradient(circle at 50% 35%,rgba(169,229,27,.055),rgba(255,255,255,.012) 68%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 14px rgba(169,229,27,.025)!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div:not(:last-child)::after{
  opacity:.92!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div.best-damage{
  background:linear-gradient(180deg,rgba(111,159,21,.10),rgba(55,82,12,.03))!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div.best-damage::before{
  height:2px!important;
  background:linear-gradient(90deg,transparent,rgba(182,239,49,.92) 26%,rgba(169,229,27,.60) 70%,transparent)!important;
  box-shadow:0 0 14px rgba(169,229,27,.14)!important;
}

/* Archive gets the mockup's large glass surface. Padding is deliberately
   modest so card widths and the newest-first stream stay intact. */
.playerProfileFinalMockup .playerReplaySectionFinal{
  margin-top:18px!important;
  padding:19px 18px 22px!important;
  border-top:0!important;
  border-radius:8px!important;
  background:
    linear-gradient(180deg,rgba(10,17,15,.52),rgba(6,12,10,.36))!important;
  outline:1px solid rgba(187,207,197,.13)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.022)!important;
  overflow:hidden!important;
}
.playerProfileFinalMockup .playerReplaySection::before{
  height:190px!important;
  background:
    radial-gradient(ellipse at 16% 0%,rgba(169,229,27,.027),transparent 38%),
    linear-gradient(180deg,rgba(17,25,22,.16),rgba(10,17,15,0))!important;
}
.playerProfileFinalMockup .playerReplayHeader{
  margin-bottom:14px!important;
}
.playerProfileFinalMockup .playerReplayEyebrow{
  color:#8f9b95!important;
}
.playerProfileFinalMockup .playerReplayHeader h2{
  color:#f2f5f3!important;
  text-shadow:0 7px 18px rgba(0,0,0,.24)!important;
}
.playerProfileFinalMockup .playerReplayGrid .replayCard{
  border-color:rgba(91,107,99,.54)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.018)!important;
}
.playerProfileFinalMockup .playerReplayGrid .replayCard:hover{
  border-color:rgba(169,229,27,.34)!important;
  box-shadow:0 18px 36px rgba(0,0,0,.28),0 0 20px rgba(169,229,27,.035)!important;
}

@media(max-width:1100px){
  .playerProfileFinalMockup .playerProfileHeroMain{left:38px!important;top:38px!important}
  .playerProfileFinalMockup .playerReplaySectionFinal{padding-left:14px!important;padding-right:14px!important}
}
@media(max-width:820px){
  .playerProfileFinalMockup .playerProfileHeroMain{left:22px!important;top:25px!important}
  .playerProfileFinalMockup .playerReplaySectionFinal{margin-top:12px!important;padding:14px 12px 18px!important}
}
@media(max-width:560px){
  .playerProfileFinalMockup .playerProfileHeroMain{left:15px!important;top:18px!important}
  .playerProfileFinalMockup .playerReplaySectionFinal{padding:12px 9px 15px!important}
}


/* =====================================================================
   v0.3.5.158 — PLAYER HERO BEST BATTLE CARD INLINE MEDALS PASS
   Point fix only for the player-profile hero best-battle card.
   Match the approved mockup closer: compact typography, metrics and medals
   on the same rail, maximum 5 medals, and a slightly higher card position.
   ===================================================================== */
.playerProfileFinalMockup .playerHeroBestCardCompact{
  top:146px!important;
  right:20px!important;
  width:418px!important;
  min-height:0!important;
  padding:11px 14px 12px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitle{
  gap:6px!important;
  font-size:8.2px!important;
  letter-spacing:.18em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitleIcon{
  width:13px!important;
  height:13px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMain{
  grid-template-columns:72px minmax(0,1fr) auto!important;
  gap:11px!important;
  align-items:center!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestThumb{
  width:72px!important;
  height:46px!important;
  border-radius:4px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestThumbTank{
  filter:brightness(1.07) contrast(1.07) drop-shadow(0 6px 7px rgba(0,0,0,.52))!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>strong{
  font-size:14.4px!important;
  line-height:1.05!important;
  letter-spacing:-.01em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>small{
  margin-top:3px!important;
  font-size:8.5px!important;
  line-height:1.16!important;
  color:#acb8b2!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage{
  min-width:92px!important;
  text-align:right!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage strong{
  font-size:27px!important;
  line-height:.95!important;
  letter-spacing:-.035em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage span{
  margin-top:2px!important;
  font-size:6.2px!important;
  letter-spacing:.16em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestFootInline{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-top:9px!important;
  padding-top:9px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetrics{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex:1 1 auto!important;
  min-width:0!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  min-width:0!important;
  flex:0 1 auto!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric .cardPremiumKpiIcon{
  width:15px!important;
  height:15px!important;
  flex:0 0 15px!important;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.42))!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  min-width:0!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy strong{
  font-size:10.6px!important;
  line-height:1!important;
  color:#eef3f0!important;
  letter-spacing:-.01em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy small{
  margin-top:2px!important;
  font-size:5.5px!important;
  line-height:1!important;
  color:#8f9b95!important;
  letter-spacing:.11em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  flex:0 0 auto!important;
  min-width:0!important;
  max-width:140px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact.playerHeroBestCardAwards5 .playerHeroBestAwards{
  max-width:146px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon{
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  min-height:22px!important;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.36)) drop-shadow(0 0 4px rgba(235,185,63,.05))!important;
}
@media (max-width: 1360px){
  .playerProfileFinalMockup .playerHeroBestCardCompact{
    top:142px!important;
    width:404px!important;
    padding:10px 12px 11px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMain{
    grid-template-columns:64px minmax(0,1fr) auto!important;
    gap:9px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestThumb{
    width:64px!important;
    height:42px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>strong{
    font-size:13.6px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage strong{
    font-size:25px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetrics{
    gap:8px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy strong{
    font-size:10px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon{
    width:21px!important;
    height:21px!important;
    min-width:21px!important;
    min-height:21px!important;
  }
}
@media (max-width: 1100px){
  .playerProfileFinalMockup .playerHeroBestCardCompact{
    left:18px!important;
    right:18px!important;
    width:auto!important;
    top:auto!important;
    bottom:196px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestFootInline{
    flex-wrap:wrap!important;
    row-gap:8px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards{
    max-width:none!important;
  }
}


/* =====================================================================
   v0.3.5.159 — PLAYER HERO BEST BATTLE CARD MOCKUP MATCH PASS
   Fine-tune only the player-profile best-battle card to match the approved
   mockup closer: wider card, tighter thumb/text proportions, one clean
   bottom rail, and five medals staying on a single line.
   ===================================================================== */
.playerProfileFinalMockup .playerHeroBestCardCompact{
  top:150px!important;
  right:20px!important;
  width:468px!important;
  min-height:116px!important;
  padding:11px 15px 11px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitle{
  margin-bottom:9px!important;
  gap:6px!important;
  font-size:8.1px!important;
  letter-spacing:.10em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMain{
  grid-template-columns:58px minmax(0,1fr) auto!important;
  gap:10px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestThumb{
  width:58px!important;
  height:38px!important;
  border-radius:4px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestThumbTank{
  inset:4% -4% -4% 6%!important;
  width:97%!important;
  height:97%!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>strong{
  font-size:14px!important;
  line-height:1.04!important;
  letter-spacing:-.02em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>small{
  margin-top:4px!important;
  font-size:7.9px!important;
  line-height:1.12!important;
  color:#a8b4ae!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage{
  min-width:104px!important;
  gap:6px!important;
  justify-self:end!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage strong{
  font-size:27px!important;
  line-height:.94!important;
  letter-spacing:-.04em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage span{
  font-size:6.6px!important;
  letter-spacing:.10em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestFootInline{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-top:10px!important;
  padding-top:10px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetrics{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  flex:1 1 auto!important;
  min-width:0!important;
  white-space:nowrap!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric{
  display:grid!important;
  grid-template-columns:14px auto!important;
  grid-template-rows:auto auto!important;
  column-gap:5px!important;
  align-items:center!important;
  min-width:61px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric .cardPremiumKpiIcon{
  grid-row:1/3!important;
  width:14px!important;
  height:14px!important;
  flex:0 0 14px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy{
  display:contents!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy strong{
  font-size:10.4px!important;
  line-height:1!important;
  color:#eff3f1!important;
  letter-spacing:-.01em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy small{
  margin-top:2px!important;
  font-size:5.4px!important;
  line-height:1!important;
  color:#89958f!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:4px!important;
  flex:0 0 auto!important;
  min-width:0!important;
  max-width:none!important;
  flex-wrap:nowrap!important;
  white-space:nowrap!important;
  overflow:visible!important;
  margin-left:auto!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon{
  width:21px!important;
  height:21px!important;
  min-width:21px!important;
  min-height:21px!important;
  flex:0 0 21px!important;
}
@media (max-width:1360px){
  .playerProfileFinalMockup .playerHeroBestCardCompact{
    width:448px!important;
    top:148px!important;
    padding:10px 14px 10px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMain{
    grid-template-columns:54px minmax(0,1fr) auto!important;
    gap:9px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestThumb{
    width:54px!important;
    height:36px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>strong{
    font-size:13.4px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage strong{
    font-size:25px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetrics{
    gap:10px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric{
    min-width:57px!important;
  }
}
@media (max-width:1100px){
  .playerProfileFinalMockup .playerHeroBestCardCompact{
    left:18px!important;
    right:18px!important;
    width:auto!important;
    top:auto!important;
    bottom:196px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestFootInline{
    flex-wrap:wrap!important;
    row-gap:8px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards{
    margin-left:0!important;
  }
}


/* =====================================================================
   v0.3.5.160 — PLAYER HERO BEST BATTLE CARD COMPRESSION + CORE SCALE
   Point pass for the player-profile best-battle card: tighten the top and
   bottom bands, but enlarge the central content so the card reads closer
   to the approved mockup.
   ===================================================================== */
.playerProfileFinalMockup .playerHeroBestCardCompact{
  top:152px!important;
  width:468px!important;
  min-height:106px!important;
  padding:8px 15px 8px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitle{
  margin-bottom:6px!important;
  font-size:7.9px!important;
  letter-spacing:.09em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitleIcon{
  width:12px!important;
  height:12px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMain{
  grid-template-columns:64px minmax(0,1fr) auto!important;
  gap:11px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestThumb{
  width:64px!important;
  height:42px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>strong{
  font-size:15.2px!important;
  line-height:1.02!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>small{
  margin-top:3px!important;
  font-size:8.2px!important;
  line-height:1.10!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage{
  min-width:110px!important;
  gap:5px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage strong{
  font-size:30px!important;
  line-height:.92!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage span{
  font-size:6.4px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestFootInline{
  gap:12px!important;
  margin-top:7px!important;
  padding-top:7px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetrics{
  gap:13px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric{
  grid-template-columns:15px auto!important;
  column-gap:5px!important;
  min-width:63px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric .cardPremiumKpiIcon{
  width:15px!important;
  height:15px!important;
  flex:0 0 15px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy strong{
  font-size:11px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy small{
  margin-top:1px!important;
  font-size:5.5px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards{
  gap:4px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon{
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  min-height:22px!important;
  flex:0 0 22px!important;
}
@media (max-width:1360px){
  .playerProfileFinalMockup .playerHeroBestCardCompact{
    width:448px!important;
    top:150px!important;
    min-height:102px!important;
    padding:7px 14px 7px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMain{
    grid-template-columns:60px minmax(0,1fr) auto!important;
    gap:10px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestThumb{
    width:60px!important;
    height:39px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>strong{
    font-size:14.4px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage strong{
    font-size:28px!important;
  }
}
@media (max-width:1100px){
  .playerProfileFinalMockup .playerHeroBestCardCompact{
    top:auto!important;
    bottom:196px!important;
  }
}


/* =====================================================================
   v0.3.5.161 — PLAYER HERO BEST BATTLE HARD HEIGHT + BLOCK RAIL SCALE
   Point-only card pass from screenshot markup: remove the inherited
   top+bottom stretch, lock a compact height, enlarge all readable content,
   and divide the lower rail into clear metric/award blocks.
   ===================================================================== */
.playerProfileFinalMockup .playerHeroBestCardCompact{
  top:auto!important;
  bottom:152px!important;
  right:20px!important;
  width:468px!important;
  height:116px!important;
  min-height:116px!important;
  max-height:116px!important;
  padding:7px 14px 7px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitle{
  margin:0 0 4px!important;
  gap:7px!important;
  min-height:13px!important;
  font-size:8.5px!important;
  line-height:1!important;
  letter-spacing:.09em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitleIcon{
  width:13px!important;
  height:13px!important;
  flex:0 0 13px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMain{
  grid-template-columns:68px minmax(0,1fr) auto!important;
  gap:11px!important;
  min-height:44px!important;
  align-items:center!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestThumb{
  width:68px!important;
  height:44px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestThumbTank{
  inset:3% -4% -4% 5%!important;
  width:99%!important;
  height:99%!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>strong{
  font-size:16px!important;
  line-height:1!important;
  letter-spacing:-.02em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>small{
  margin-top:4px!important;
  font-size:8.6px!important;
  line-height:1.05!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage{
  min-width:116px!important;
  gap:6px!important;
  justify-self:end!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage strong{
  font-size:31px!important;
  line-height:.90!important;
  letter-spacing:-.045em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage span{
  font-size:6.8px!important;
  letter-spacing:.10em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestFootInline{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:0!important;
  margin-top:5px!important;
  padding-top:5px!important;
  min-height:33px!important;
  border-top:1px solid rgba(113,129,119,.48)!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetrics{
  display:flex!important;
  align-items:stretch!important;
  gap:0!important;
  flex:1 1 auto!important;
  min-width:0!important;
  height:28px!important;
  white-space:nowrap!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric{
  display:grid!important;
  grid-template-columns:18px auto!important;
  grid-template-rows:auto auto!important;
  column-gap:6px!important;
  align-items:center!important;
  min-width:72px!important;
  height:28px!important;
  padding:0 10px!important;
  border-right:1px solid rgba(111,126,117,.32)!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric:first-child{
  padding-left:0!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric .cardPremiumKpiIcon{
  grid-row:1/3!important;
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy{
  display:contents!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy strong{
  font-size:12px!important;
  line-height:1!important;
  color:#f1f4f2!important;
  letter-spacing:-.015em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy small{
  margin-top:2px!important;
  font-size:5.8px!important;
  line-height:1!important;
  color:#8d9993!important;
  letter-spacing:.08em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  flex:0 0 auto!important;
  height:28px!important;
  min-width:0!important;
  max-width:none!important;
  margin-left:10px!important;
  padding-left:11px!important;
  border-left:1px solid rgba(111,126,117,.38)!important;
  flex-wrap:nowrap!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon{
  width:25px!important;
  height:25px!important;
  min-width:25px!important;
  min-height:25px!important;
  flex:0 0 25px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
@media (max-width:1360px){
  .playerProfileFinalMockup .playerHeroBestCardCompact{
    top:auto!important;
    bottom:148px!important;
    width:448px!important;
    height:112px!important;
    min-height:112px!important;
    max-height:112px!important;
    padding:6px 13px 6px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMain{
    grid-template-columns:64px minmax(0,1fr) auto!important;
    gap:10px!important;
    min-height:42px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestThumb{
    width:64px!important;
    height:42px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>strong{
    font-size:15px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage strong{
    font-size:29px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric{
    min-width:68px!important;
    padding:0 8px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric:first-child{
    padding-left:0!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards{
    gap:5px!important;
    margin-left:8px!important;
    padding-left:9px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    min-height:24px!important;
    flex-basis:24px!important;
  }
}
@media (max-width:1100px){
  .playerProfileFinalMockup .playerHeroBestCardCompact{
    left:18px!important;
    right:18px!important;
    width:auto!important;
    top:auto!important;
    bottom:196px!important;
    height:auto!important;
    min-height:112px!important;
    max-height:none!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestFootInline{
    flex-wrap:wrap!important;
    height:auto!important;
    row-gap:7px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards{
    margin-left:0!important;
  }
}


/* =====================================================================
   v0.3.5.162 — PLAYER HERO BEST BATTLE LOWER COMPACT PASS
   Make the player hero best-battle card smaller and more compact overall,
   move it lower to align closer to the left CTA row, and spend the saved
   space on larger middle values / icons while keeping clear block dividers.
   ===================================================================== */
.playerProfileFinalMockup .playerHeroBestCardCompact{
  top:auto!important;
  bottom:136px!important;
  right:20px!important;
  width:442px!important;
  height:104px!important;
  min-height:104px!important;
  max-height:104px!important;
  padding:6px 13px 6px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitle{
  margin:0 0 3px!important;
  gap:6px!important;
  min-height:12px!important;
  font-size:8.1px!important;
  line-height:1!important;
  letter-spacing:.08em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitleIcon{
  width:12px!important;
  height:12px!important;
  flex:0 0 12px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMain{
  grid-template-columns:70px minmax(0,1fr) auto!important;
  gap:10px!important;
  min-height:42px!important;
  align-items:center!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestThumb{
  width:70px!important;
  height:46px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestThumbTank{
  inset:2% -4% -4% 5%!important;
  width:100%!important;
  height:100%!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>strong{
  font-size:17px!important;
  line-height:1!important;
  letter-spacing:-.025em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>small{
  margin-top:4px!important;
  font-size:8.9px!important;
  line-height:1.03!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage{
  min-width:118px!important;
  gap:6px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage strong{
  font-size:33px!important;
  line-height:.88!important;
  letter-spacing:-.05em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage span{
  font-size:6.7px!important;
  letter-spacing:.09em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestFootInline{
  gap:0!important;
  margin-top:4px!important;
  padding-top:4px!important;
  min-height:28px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetrics{
  height:24px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric{
  grid-template-columns:17px auto!important;
  column-gap:6px!important;
  min-width:68px!important;
  height:24px!important;
  padding:0 9px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric .cardPremiumKpiIcon{
  width:17px!important;
  height:17px!important;
  flex:0 0 17px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy strong{
  font-size:12.8px!important;
  line-height:1!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy small{
  margin-top:2px!important;
  font-size:5.7px!important;
  line-height:1!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards{
  gap:5px!important;
  height:24px!important;
  margin-left:8px!important;
  padding-left:9px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon{
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  min-height:24px!important;
  flex:0 0 24px!important;
}
@media (max-width:1360px){
  .playerProfileFinalMockup .playerHeroBestCardCompact{
    bottom:132px!important;
    width:424px!important;
    height:100px!important;
    min-height:100px!important;
    max-height:100px!important;
    padding:6px 12px 6px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMain{
    grid-template-columns:64px minmax(0,1fr) auto!important;
    gap:9px!important;
    min-height:40px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestThumb{
    width:64px!important;
    height:42px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>strong{
    font-size:15.8px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>small{
    font-size:8.4px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage strong{
    font-size:31px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric{
    min-width:64px!important;
    padding:0 8px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy strong{
    font-size:12.2px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon{
    width:23px!important;
    height:23px!important;
    min-width:23px!important;
    min-height:23px!important;
    flex-basis:23px!important;
  }
}
@media (max-width:1100px){
  .playerProfileFinalMockup .playerHeroBestCardCompact{
    left:18px!important;
    right:18px!important;
    width:auto!important;
    top:auto!important;
    bottom:196px!important;
    height:auto!important;
    min-height:104px!important;
    max-height:none!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestFootInline{
    flex-wrap:wrap!important;
    min-height:0!important;
    row-gap:7px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards{
    margin-left:0!important;
  }
}


/* =====================================================================
   v0.3.5.163 — PLAYER HERO BEST BATTLE MOCKUP LAYOUT PARITY PASS
   Final micro-pass toward the approved mockup: keep the compact card, but
   rebalance the internal placement of title, thumb, identity, damage and
   bottom HUD rail so the whole card reads closer to the target layout.
   ===================================================================== */
.playerProfileFinalMockup .playerHeroBestCardCompact{
  bottom:136px!important;
  right:18px!important;
  width:452px!important;
  height:102px!important;
  min-height:102px!important;
  max-height:102px!important;
  padding:6px 13px 6px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitle{
  margin:0 0 4px!important;
  gap:6px!important;
  min-height:11px!important;
  font-size:8.0px!important;
  letter-spacing:.08em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitleIcon{
  width:12px!important;
  height:12px!important;
  flex:0 0 12px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMain{
  grid-template-columns:66px minmax(0,1fr) auto!important;
  gap:10px!important;
  min-height:40px!important;
  align-items:center!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestThumb{
  width:66px!important;
  height:42px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>strong{
  font-size:16.2px!important;
  line-height:1.01!important;
  letter-spacing:-.02em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>small{
  margin-top:3px!important;
  font-size:8.5px!important;
  line-height:1.04!important;
  color:#a1aca7!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage{
  min-width:114px!important;
  gap:5px!important;
  justify-self:end!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage strong{
  font-size:32px!important;
  line-height:.89!important;
  letter-spacing:-.048em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage span{
  font-size:6.5px!important;
  letter-spacing:.09em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestFootInline{
  margin-top:5px!important;
  padding-top:5px!important;
  min-height:27px!important;
  border-top:1px solid rgba(110,124,115,.46)!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetrics{
  height:23px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric{
  grid-template-columns:16px auto!important;
  column-gap:5px!important;
  min-width:70px!important;
  height:23px!important;
  padding:0 10px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric:first-child{
  padding-left:1px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric .cardPremiumKpiIcon{
  width:16px!important;
  height:16px!important;
  flex:0 0 16px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy strong{
  font-size:12.2px!important;
  line-height:1!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy small{
  margin-top:1px!important;
  font-size:5.5px!important;
  line-height:1!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards{
  gap:5px!important;
  height:23px!important;
  margin-left:9px!important;
  padding-left:10px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon{
  width:23px!important;
  height:23px!important;
  min-width:23px!important;
  min-height:23px!important;
  flex:0 0 23px!important;
}
@media (max-width:1360px){
  .playerProfileFinalMockup .playerHeroBestCardCompact{
    bottom:132px!important;
    width:434px!important;
    height:98px!important;
    min-height:98px!important;
    max-height:98px!important;
    padding:5px 12px 5px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMain{
    grid-template-columns:62px minmax(0,1fr) auto!important;
    gap:9px!important;
    min-height:38px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestThumb{
    width:62px!important;
    height:40px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>strong{
    font-size:15.4px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>small{
    font-size:8.1px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage strong{
    font-size:30px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric{
    min-width:66px!important;
    padding:0 8px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy strong{
    font-size:11.8px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon{
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
    min-height:22px!important;
    flex-basis:22px!important;
  }
}


/* =====================================================================
   v0.3.5.164 — PLAYER HERO BEST BATTLE EXTERNAL LABEL PARITY PASS
   Move the "Лучший бой" badge above the card, make the card slightly larger,
   darken it closer to the mockup, and rebalance the inner composition with
   subtle floor dividers and a cleaner top/bottom hierarchy.
   ===================================================================== */
.playerProfileFinalMockup .playerHeroBestCardCompact{
  bottom:136px!important;
  right:18px!important;
  width:470px!important;
  height:110px!important;
  min-height:110px!important;
  max-height:110px!important;
  padding:12px 14px 8px!important;
  overflow:visible!important;
  border-color:rgba(98,110,103,.72)!important;
  background:linear-gradient(180deg,rgba(9,11,11,.96),rgba(7,9,9,.95))!important;
  backdrop-filter:blur(18px) saturate(1.02)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(255,255,255,.02)!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 17%,transparent 100%),
    radial-gradient(circle at 12% 0%,rgba(169,229,27,.08),transparent 28%)!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitle{
  position:absolute!important;
  left:14px!important;
  top:-14px!important;
  z-index:2!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  min-height:26px!important;
  margin:0!important;
  padding:0 11px!important;
  border:1px solid rgba(110,124,115,.62)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(12,17,16,.98),rgba(9,13,12,.98))!important;
  box-shadow:0 8px 18px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06)!important;
  font-size:9.1px!important;
  line-height:1!important;
  letter-spacing:.08em!important;
  color:#c8f243!important;
  text-shadow:0 0 10px rgba(169,229,27,.15)!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitleIcon{
  width:14px!important;
  height:14px!important;
  flex:0 0 14px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMain{
  grid-template-columns:70px minmax(0,1fr) auto!important;
  gap:11px!important;
  min-height:48px!important;
  align-items:center!important;
  margin-top:0!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestThumb{
  width:70px!important;
  height:44px!important;
  border-radius:4px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestThumbTank{
  inset:2% -4% -4% 5%!important;
  width:100%!important;
  height:100%!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>strong{
  font-size:17px!important;
  line-height:1.01!important;
  letter-spacing:-.025em!important;
  color:#f1f4f2!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>small{
  margin-top:4px!important;
  font-size:8.6px!important;
  line-height:1.05!important;
  color:#a0aba5!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage{
  min-width:122px!important;
  gap:6px!important;
  justify-self:end!important;
  align-items:baseline!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage strong{
  font-size:34px!important;
  line-height:.88!important;
  letter-spacing:-.05em!important;
  color:#b9eb34!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage span{
  font-size:6.7px!important;
  letter-spacing:.10em!important;
  color:#8e9893!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestFootInline{
  gap:0!important;
  margin-top:8px!important;
  padding-top:7px!important;
  min-height:29px!important;
  border-top:1px solid rgba(96,107,103,.44)!important;
  box-shadow:0 -1px 0 rgba(255,255,255,.018) inset!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetrics{
  height:25px!important;
  align-items:stretch!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric{
  grid-template-columns:17px auto!important;
  column-gap:6px!important;
  min-width:73px!important;
  height:25px!important;
  padding:0 10px!important;
  border-right:1px solid rgba(96,107,103,.26)!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric:first-child{
  padding-left:1px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric .cardPremiumKpiIcon{
  width:17px!important;
  height:17px!important;
  flex:0 0 17px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy strong{
  font-size:12.7px!important;
  line-height:1!important;
  color:#f1f4f2!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy small{
  margin-top:2px!important;
  font-size:5.6px!important;
  line-height:1!important;
  color:#8f9994!important;
  letter-spacing:.08em!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards{
  gap:5px!important;
  height:25px!important;
  margin-left:9px!important;
  padding-left:10px!important;
  border-left:1px solid rgba(96,107,103,.30)!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon{
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  min-height:24px!important;
  flex:0 0 24px!important;
}
@media (max-width:1360px){
  .playerProfileFinalMockup .playerHeroBestCardCompact{
    bottom:132px!important;
    width:450px!important;
    height:106px!important;
    min-height:106px!important;
    max-height:106px!important;
    padding:11px 13px 7px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitle{
    top:-13px!important;
    min-height:24px!important;
    padding:0 10px!important;
    font-size:8.7px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMain{
    grid-template-columns:66px minmax(0,1fr) auto!important;
    gap:10px!important;
    min-height:46px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestThumb{
    width:66px!important;
    height:42px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>strong{
    font-size:16.2px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestIdentity>small{
    font-size:8.3px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage strong{
    font-size:32px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric{
    min-width:69px!important;
    padding:0 9px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy strong{
    font-size:12.2px!important;
  }
}
@media (max-width:1100px){
  .playerProfileFinalMockup .playerHeroBestCardCompact{
    left:18px!important;
    right:18px!important;
    width:auto!important;
    top:auto!important;
    bottom:196px!important;
    height:auto!important;
    min-height:110px!important;
    max-height:none!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestFootInline{
    flex-wrap:wrap!important;
    min-height:0!important;
    row-gap:7px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards{
    margin-left:0!important;
  }
}


/* =====================================================================
   v0.3.5.165 — PLAYER HERO BEST BATTLE KPI VALUE + ICON GLOW PASS
   Tight follow-up tweak: enlarge frags / assist / XP values and icons inside
   the best-battle card, and give the KPI icons a premium glow treatment.
   ===================================================================== */
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetrics{
  height:27px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric{
  grid-template-columns:19px auto!important;
  column-gap:7px!important;
  min-width:77px!important;
  height:27px!important;
  padding:0 11px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric .cardPremiumKpiIcon{
  width:19px!important;
  height:19px!important;
  flex:0 0 19px!important;
  filter:drop-shadow(0 0 8px rgba(170,230,39,.12)) drop-shadow(0 2px 6px rgba(255,255,255,.06)) drop-shadow(0 4px 10px rgba(0,0,0,.40))!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy strong{
  font-size:13.8px!important;
  line-height:1!important;
  color:#f7faf8!important;
  text-shadow:0 0 10px rgba(255,255,255,.08)!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy small{
  margin-top:2px!important;
  font-size:5.8px!important;
  line-height:1!important;
  letter-spacing:.085em!important;
  color:#97a29d!important;
}
@media (max-width:1360px){
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetrics{
    height:26px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric{
    grid-template-columns:18px auto!important;
    column-gap:6px!important;
    min-width:73px!important;
    height:26px!important;
    padding:0 10px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric .cardPremiumKpiIcon{
    width:18px!important;
    height:18px!important;
    flex-basis:18px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy strong{
    font-size:13.2px!important;
  }
}

/* =====================================================================
   v0.3.5.166 — PLAYER HERO BEST BATTLE TOP-1 PREMIUM FX PASS
   Premium emphasis only for the player-profile hero best-battle card:
   subtle glass transparency, animated sheen, green/gold aura, stronger
   damage focus, larger animated medals, and a clear #1 status marker.
   ===================================================================== */
@keyframes playerBestTopSheen{
  0%,18%{background-position:-185% 0,0 0,0 0}
  42%,100%{background-position:185% 0,0 0,0 0}
}
@keyframes playerBestTopAura{
  0%,100%{
    box-shadow:0 18px 46px rgba(0,0,0,.46),0 0 0 rgba(169,229,27,0),0 0 0 rgba(231,182,66,0),inset 0 1px 0 rgba(255,255,255,.065),inset 0 -1px 0 rgba(255,255,255,.018)!important;
  }
  50%{
    box-shadow:0 20px 52px rgba(0,0,0,.50),0 0 24px rgba(169,229,27,.075),0 0 34px rgba(231,182,66,.035),inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(255,255,255,.022)!important;
  }
}
@keyframes playerBestDamageBreath{
  0%,100%{filter:brightness(1);text-shadow:0 0 14px rgba(169,229,27,.16),0 2px 8px rgba(0,0,0,.35)}
  50%{filter:brightness(1.08);text-shadow:0 0 22px rgba(169,229,27,.28),0 0 7px rgba(234,192,74,.08),0 2px 8px rgba(0,0,0,.35)}
}
@keyframes playerBestMedalPulse{
  0%,68%,100%{transform:translateY(0) scale(1);filter:brightness(1.03) saturate(1.03) drop-shadow(0 4px 7px rgba(0,0,0,.38)) drop-shadow(0 0 0 rgba(236,188,70,0))}
  76%{transform:translateY(-1px) scale(1.075);filter:brightness(1.18) saturate(1.10) drop-shadow(0 5px 9px rgba(0,0,0,.44)) drop-shadow(0 0 10px rgba(236,188,70,.24))}
  84%{transform:translateY(0) scale(1.02);filter:brightness(1.08) saturate(1.05) drop-shadow(0 4px 8px rgba(0,0,0,.40)) drop-shadow(0 0 5px rgba(169,229,27,.10))}
}

.playerProfileFinalMockup .playerHeroBestCardCompact{
  border-color:rgba(131,145,117,.68)!important;
  background:
    linear-gradient(112deg,transparent 0%,transparent 38%,rgba(255,255,255,.055) 48%,rgba(190,235,58,.035) 52%,rgba(236,188,70,.025) 55%,transparent 65%,transparent 100%),
    radial-gradient(circle at 84% 6%,rgba(230,181,63,.050),transparent 30%),
    linear-gradient(180deg,rgba(10,13,12,.885),rgba(5,8,7,.915))!important;
  background-size:240% 100%,100% 100%,100% 100%!important;
  background-position:-185% 0,0 0,0 0!important;
  backdrop-filter:blur(21px) saturate(1.10)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.065),inset 0 -1px 0 rgba(255,255,255,.018)!important;
  animation:playerBestTopSheen 9s cubic-bezier(.4,0,.2,1) infinite,playerBestTopAura 5.8s ease-in-out infinite!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 18%,transparent 100%),
    radial-gradient(circle at 10% 0%,rgba(169,229,27,.10),transparent 30%),
    linear-gradient(90deg,rgba(169,229,27,.17),rgba(231,182,66,.08) 54%,transparent 94%) top/100% 1px no-repeat!important;
  opacity:.95!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact:hover{
  transform:translateY(-2px) scale(1.006)!important;
  border-color:rgba(178,216,88,.82)!important;
  box-shadow:0 24px 58px rgba(0,0,0,.54),0 0 31px rgba(169,229,27,.115),0 0 40px rgba(230,181,63,.050),inset 0 1px 0 rgba(255,255,255,.10)!important;
}

/* Floating "best battle" label becomes the explicit TOP-1 marker. */
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitle{
  border-color:rgba(146,165,115,.72)!important;
  background:linear-gradient(180deg,rgba(13,18,16,.94),rgba(7,11,10,.94))!important;
  backdrop-filter:blur(12px) saturate(1.08)!important;
  box-shadow:0 8px 18px rgba(0,0,0,.34),0 0 12px rgba(169,229,27,.055),inset 0 1px 0 rgba(255,255,255,.07)!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitle::after{
  content:"#1"!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:16px!important;
  min-width:23px!important;
  margin-left:2px!important;
  padding:0 6px!important;
  border:1px solid rgba(231,182,66,.42)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(105,76,20,.38),rgba(54,39,10,.34))!important;
  color:#f1c95d!important;
  font-size:7.4px!important;
  font-weight:950!important;
  letter-spacing:.07em!important;
  text-shadow:0 0 8px rgba(236,188,70,.20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 10px rgba(236,188,70,.055)!important;
}

/* Damage remains the strongest single number in the card. */
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage strong{
  color:#c0f037!important;
  animation:playerBestDamageBreath 4.8s ease-in-out infinite!important;
}

/* KPI rail: brighter icon halo and stronger value presence. */
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric .cardPremiumKpiIcon{
  filter:drop-shadow(0 0 9px rgba(169,229,27,.18)) drop-shadow(0 0 3px rgba(255,255,255,.10)) drop-shadow(0 4px 9px rgba(0,0,0,.42))!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy strong{
  color:#fbfdfc!important;
  text-shadow:0 0 11px rgba(255,255,255,.10),0 2px 5px rgba(0,0,0,.35)!important;
}

/* Larger medals with a restrained sequential highlight. */
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards{
  gap:6px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  flex:0 0 28px!important;
  transform-origin:center!important;
  animation:playerBestMedalPulse 7.8s ease-in-out infinite!important;
  transition:transform .18s ease,filter .18s ease!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon:nth-child(2){animation-delay:.18s!important}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon:nth-child(3){animation-delay:.36s!important}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon:nth-child(4){animation-delay:.54s!important}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon:nth-child(5){animation-delay:.72s!important}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon:hover{
  transform:translateY(-2px) scale(1.16)!important;
  filter:brightness(1.22) saturate(1.12) drop-shadow(0 7px 11px rgba(0,0,0,.46)) drop-shadow(0 0 13px rgba(236,188,70,.30))!important;
  z-index:4!important;
}

@media (max-width:1360px){
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon{
    width:26px!important;
    height:26px!important;
    min-width:26px!important;
    min-height:26px!important;
    flex-basis:26px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .playerProfileFinalMockup .playerHeroBestCardCompact,
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage strong,
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon{
    animation:none!important;
  }
}


/* =====================================================================
   v0.3.5.167 — TOP CARD FX FINISH
   Final premium-FX polish for the player-profile best-battle card.
   Focus: stronger TOP-1 feeling without changing the established geometry.
   ===================================================================== */
@keyframes playerBestTopSheen167{
  0%,20%{background-position:-210% 0,0 0,0 0,0 0}
  42%,100%{background-position:210% 0,0 0,0 0,0 0}
}
@keyframes playerBestTopAura167{
  0%,100%{
    box-shadow:0 20px 52px rgba(0,0,0,.48),0 0 0 rgba(169,229,27,0),0 0 0 rgba(231,182,66,0),inset 0 1px 0 rgba(255,255,255,.075),inset 0 -1px 0 rgba(255,255,255,.020)!important;
  }
  50%{
    box-shadow:0 24px 62px rgba(0,0,0,.54),0 0 34px rgba(169,229,27,.13),0 0 46px rgba(231,182,66,.07),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(255,255,255,.025)!important;
  }
}
@keyframes playerBestDamageBreath167{
  0%,100%{filter:brightness(1);text-shadow:0 0 16px rgba(169,229,27,.18),0 2px 8px rgba(0,0,0,.35)}
  50%{filter:brightness(1.11);text-shadow:0 0 26px rgba(169,229,27,.34),0 0 10px rgba(236,188,70,.12),0 2px 8px rgba(0,0,0,.35)}
}
@keyframes playerBestMedalPulse167{
  0%,66%,100%{transform:translateY(0) scale(1);filter:brightness(1.04) saturate(1.04) drop-shadow(0 4px 7px rgba(0,0,0,.38)) drop-shadow(0 0 0 rgba(236,188,70,0))}
  74%{transform:translateY(-1px) scale(1.095);filter:brightness(1.22) saturate(1.12) drop-shadow(0 6px 10px rgba(0,0,0,.44)) drop-shadow(0 0 14px rgba(236,188,70,.30))}
  84%{transform:translateY(0) scale(1.03);filter:brightness(1.10) saturate(1.06) drop-shadow(0 4px 8px rgba(0,0,0,.40)) drop-shadow(0 0 6px rgba(169,229,27,.12))}
}
.playerProfileFinalMockup .playerHeroBestCardCompact{
  border-color:rgba(152,171,118,.78)!important;
  background:
    linear-gradient(112deg,transparent 0%,transparent 36%,rgba(255,255,255,.070) 47%,rgba(190,235,58,.050) 52%,rgba(236,188,70,.035) 56%,transparent 66%,transparent 100%),
    radial-gradient(circle at 84% 7%,rgba(230,181,63,.075),transparent 31%),
    linear-gradient(180deg,rgba(13,17,16,.83),rgba(6,9,8,.87))!important;
  background-size:240% 100%,100% 100%,100% 100%!important;
  background-position:-210% 0,0 0,0 0!important;
  backdrop-filter:blur(23px) saturate(1.14)!important;
  box-shadow:0 20px 52px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.075),inset 0 -1px 0 rgba(255,255,255,.020)!important;
  animation:playerBestTopSheen167 10s cubic-bezier(.4,0,.2,1) infinite,playerBestTopAura167 6.2s ease-in-out infinite!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 18%,transparent 100%),
    radial-gradient(circle at 10% 0%,rgba(169,229,27,.11),transparent 31%),
    linear-gradient(90deg,rgba(169,229,27,.20),rgba(231,182,66,.12) 55%,transparent 94%) top/100% 1px no-repeat!important;
  opacity:1!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact:hover{
  transform:translateY(-2px) scale(1.007)!important;
  border-color:rgba(189,224,93,.88)!important;
  box-shadow:0 26px 66px rgba(0,0,0,.56),0 0 38px rgba(169,229,27,.15),0 0 52px rgba(230,181,63,.08),inset 0 1px 0 rgba(255,255,255,.11)!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitle{
  border-color:rgba(160,181,121,.78)!important;
  box-shadow:0 10px 22px rgba(0,0,0,.36),0 0 16px rgba(169,229,27,.07),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitle::after{
  min-width:26px!important;
  height:17px!important;
  padding:0 7px!important;
  border-color:rgba(231,182,66,.52)!important;
  background:linear-gradient(180deg,rgba(123,90,22,.45),rgba(59,43,11,.38))!important;
  color:#ffd46a!important;
  font-size:7.8px!important;
  text-shadow:0 0 10px rgba(236,188,70,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 14px rgba(236,188,70,.08)!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage strong{
  animation:playerBestDamageBreath167 4.4s ease-in-out infinite!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric{
  min-width:79px!important;
  padding:0 12px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric .cardPremiumKpiIcon{
  width:20px!important;
  height:20px!important;
  flex:0 0 20px!important;
  filter:drop-shadow(0 0 12px rgba(169,229,27,.22)) drop-shadow(0 0 4px rgba(255,255,255,.12)) drop-shadow(0 4px 9px rgba(0,0,0,.42))!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy strong{
  font-size:14.4px!important;
  text-shadow:0 0 12px rgba(255,255,255,.12),0 2px 5px rgba(0,0,0,.35)!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards{
  gap:7px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon{
  width:31px!important;
  height:31px!important;
  min-width:31px!important;
  min-height:31px!important;
  flex:0 0 31px!important;
  animation:playerBestMedalPulse167 7.2s ease-in-out infinite!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon:nth-child(2){animation-delay:.18s!important}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon:nth-child(3){animation-delay:.36s!important}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon:nth-child(4){animation-delay:.54s!important}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon:nth-child(5){animation-delay:.72s!important}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon:hover{
  transform:translateY(-2px) scale(1.18)!important;
  filter:brightness(1.26) saturate(1.14) drop-shadow(0 7px 12px rgba(0,0,0,.48)) drop-shadow(0 0 16px rgba(236,188,70,.34))!important;
}
@media (max-width:1360px){
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric{
    min-width:74px!important;
    padding:0 10px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetric .cardPremiumKpiIcon{
    width:19px!important;
    height:19px!important;
    flex-basis:19px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestMetricCopy strong{
    font-size:13.6px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards{
    gap:6px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon{
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    min-height:28px!important;
    flex-basis:28px!important;
  }
}
@media (prefers-reduced-motion:reduce){
  .playerProfileFinalMockup .playerHeroBestCardCompact,
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestDamage strong,
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestAwards .cardAwardIcon{
    animation:none!important;
  }
}


/* =====================================================================
   v0.3.5.168 — TOP LABEL TROPHY + SOFTER GLASS PASS
   Replace the noisy #1 chip with a cleaner trophy-led "ЛУЧШИЙ БОЙ" label
   and make the best-battle card slightly more transparent / glassy.
   ===================================================================== */
.playerProfileFinalMockup .playerHeroBestCardCompact{
  background:
    linear-gradient(112deg,transparent 0%,transparent 36%,rgba(255,255,255,.060) 47%,rgba(190,235,58,.042) 52%,rgba(236,188,70,.030) 56%,transparent 66%,transparent 100%),
    radial-gradient(circle at 84% 7%,rgba(230,181,63,.060),transparent 31%),
    linear-gradient(180deg,rgba(13,17,16,.76),rgba(6,9,8,.81))!important;
  backdrop-filter:blur(24px) saturate(1.16)!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.050),rgba(255,255,255,0) 18%,transparent 100%),
    radial-gradient(circle at 10% 0%,rgba(169,229,27,.10),transparent 31%),
    linear-gradient(90deg,rgba(169,229,27,.17),rgba(231,182,66,.10) 55%,transparent 94%) top/100% 1px no-repeat!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitle{
  gap:7px!important;
  min-height:27px!important;
  padding:0 12px 0 10px!important;
  border-color:rgba(171,191,126,.78)!important;
  background:linear-gradient(180deg,rgba(12,18,16,.82),rgba(7,11,10,.80))!important;
  box-shadow:0 10px 22px rgba(0,0,0,.34),0 0 16px rgba(169,229,27,.06),inset 0 1px 0 rgba(255,255,255,.09)!important;
  color:#d2f35a!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitle::before{
  content:""!important;
  width:18px!important;
  height:1px!important;
  margin-right:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(169,229,27,.92),rgba(169,229,27,.18))!important;
  box-shadow:0 0 10px rgba(169,229,27,.18)!important;
  flex:0 0 18px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitle::after{
  content:none!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitleIcon{
  width:15px!important;
  height:15px!important;
  flex:0 0 15px!important;
  filter:drop-shadow(0 0 9px rgba(236,188,70,.22)) drop-shadow(0 2px 6px rgba(0,0,0,.34))!important;
  color:#f2c757!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitle span{
  font-weight:900!important;
  letter-spacing:.10em!important;
}
@media (max-width:1360px){
  .playerProfileFinalMockup .playerHeroBestCardCompact{
    background:
      linear-gradient(112deg,transparent 0%,transparent 36%,rgba(255,255,255,.055) 47%,rgba(190,235,58,.038) 52%,rgba(236,188,70,.028) 56%,transparent 66%,transparent 100%),
      radial-gradient(circle at 84% 7%,rgba(230,181,63,.055),transparent 31%),
      linear-gradient(180deg,rgba(13,17,16,.79),rgba(6,9,8,.84))!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitle{
    min-height:25px!important;
    padding:0 11px 0 9px!important;
  }
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitle::before{
    width:15px!important;
    flex-basis:15px!important;
  }
}


/* =====================================================================
   v0.3.5.169 — PLAYER BEST BATTLE HOME GOLD TROPHY LABEL
   Reuse the exact HOME top-battle gold trophy icon and remove the extra
   decorative line from the floating "ЛУЧШИЙ БОЙ" label.
   ===================================================================== */
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitle::before{
  content:none!important;
  display:none!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitle{
  gap:7px!important;
  padding-left:10px!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitleIcon{
  --home-icon:url('/assets/ui/home-crown.svg')!important;
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  color:#f6c94f!important;
  filter:drop-shadow(0 0 7px rgba(246,199,74,.24)) drop-shadow(0 2px 6px rgba(0,0,0,.34))!important;
}
.playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitle span{
  color:#c9ef4a!important;
  font-weight:900!important;
  letter-spacing:.09em!important;
}
@media (max-width:1360px){
  .playerProfileFinalMockup .playerHeroBestCardCompact .playerHeroBestTitleIcon{
    width:17px!important;
    height:17px!important;
    flex-basis:17px!important;
  }
}


/* =====================================================================
   v0.3.5.170 — REPLAYS PROFILE-PARITY FOREST HERO + OVERLAY SEARCH
   Rebuild only the /replays top section around the approved player-profile
   proportions: 1280px canvas, 456px cinematic hero, bright battle-forest
   artwork, and a glass search/filter bar over the lower hero edge.
   Replay cards and catalog behavior stay unchanged.
   ===================================================================== */
@keyframes replaysHeroSearchSheen170{
  0%,22%{background-position:-210% 0,0 0}
  44%,100%{background-position:210% 0,0 0}
}
@keyframes replaysHeroGlow170{
  0%,100%{opacity:.62;transform:translate3d(0,0,0) scale(1)}
  50%{opacity:.86;transform:translate3d(-8px,2px,0) scale(1.02)}
}
.replaysDiscoveryPage.approvedReplaysMockup{
  width:min(1280px,calc(100% - 40px))!important;
  max-width:1280px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-top:14px!important;
  padding-bottom:44px!important;
}
.approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity{
  position:relative!important;
  min-height:456px!important;
  height:456px!important;
  margin:0 0 24px!important;
  overflow:visible!important;
  border-radius:8px!important;
  border:1px solid rgba(205,221,213,.20)!important;
  background:#0b110f!important;
  box-shadow:0 30px 82px rgba(0,0,0,.40),0 0 0 1px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.055),inset 0 -24px 48px rgba(0,0,0,.18)!important;
}
.approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity::before{
  content:""!important;
  position:absolute!important;
  z-index:6!important;
  left:32px!important;
  top:24px!important;
  width:260px!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(184,244,50,.98),rgba(178,238,47,.42) 45%,transparent 100%)!important;
  box-shadow:0 0 22px rgba(169,229,27,.22)!important;
  pointer-events:none!important;
}
.approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity::after{
  content:""!important;
  position:absolute!important;
  z-index:4!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(255,255,255,.020),transparent 17%,transparent 72%,rgba(0,0,0,.20))!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroBackdrop{
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  background:url('/assets/replays_hero_forest_battle_v174.webp') center 52%/cover no-repeat!important;
  filter:saturate(1.02) contrast(1.055) brightness(.96)!important;
  transform:scale(1.006)!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroBackdrop::before,
.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroBackdrop::after{
  display:none!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroShade{
  position:absolute!important;
  z-index:2!important;
  inset:0!important;
  border-radius:inherit!important;
  background:
    linear-gradient(90deg,rgba(3,8,7,.96) 0%,rgba(3,8,7,.90) 25%,rgba(4,9,8,.62) 42%,rgba(5,10,9,.20) 63%,rgba(4,9,8,.08) 83%,rgba(4,9,8,.20) 100%),
    linear-gradient(180deg,rgba(3,7,6,.02),rgba(3,7,6,.01) 54%,rgba(4,9,8,.73) 100%)!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroFx{
  position:absolute!important;
  z-index:3!important;
  inset:0!important;
  overflow:hidden!important;
  border-radius:inherit!important;
  pointer-events:none!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroFx::before{
  content:""!important;
  position:absolute!important;
  width:540px!important;
  height:300px!important;
  right:-70px!important;
  top:22px!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse,rgba(255,224,155,.15) 0%,rgba(233,185,94,.06) 37%,transparent 72%)!important;
  filter:blur(16px)!important;
  animation:replaysHeroGlow170 8s ease-in-out infinite!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroFx::after{
  content:""!important;
  position:absolute!important;
  left:44%!important;
  right:3%!important;
  bottom:66px!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(169,229,27,.13),rgba(238,191,88,.08),transparent)!important;
  box-shadow:0 0 12px rgba(169,229,27,.05)!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroContent{
  position:relative!important;
  z-index:5!important;
  min-height:456px!important;
  height:456px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  padding:58px 48px 118px!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .replaysHeading{
  width:480px!important;
  max-width:42%!important;
  margin:0!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .eyebrow{
  color:#aeb9b3!important;
  font-size:8.2px!important;
  letter-spacing:.19em!important;
  text-shadow:0 2px 8px rgba(0,0,0,.35)!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .eyebrow:before{
  width:32px!important;
  height:2px!important;
  margin-right:10px!important;
  background:#a9e51b!important;
  box-shadow:0 0 10px rgba(169,229,27,.20)!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .pageTitle{
  margin:18px 0 18px!important;
  font-size:66px!important;
  line-height:.90!important;
  letter-spacing:-.05em!important;
  color:#f8faf9!important;
  text-shadow:0 14px 38px rgba(0,0,0,.50),0 1px 0 rgba(255,255,255,.03)!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .replaysPageSub{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:5px!important;
  margin:0!important;
  color:#b4bfba!important;
  font-size:12px!important;
  line-height:1.45!important;
  text-shadow:0 2px 9px rgba(0,0,0,.40)!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .replaysPageSub strong{
  order:-1!important;
  display:inline-flex!important;
  align-items:center!important;
  min-height:26px!important;
  margin-bottom:6px!important;
  padding:0 10px!important;
  border:1px solid rgba(176,213,84,.18)!important;
  border-radius:999px!important;
  background:rgba(7,13,10,.42)!important;
  color:#d7e8d0!important;
  font-size:9px!important;
  font-weight:750!important;
  letter-spacing:.035em!important;
  backdrop-filter:blur(8px)!important;
}
/* Search/filter rail sits over the lower part of the hero like the player HUD. */
.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroSearchBar{
  position:absolute!important;
  z-index:8!important;
  left:26px!important;
  right:26px!important;
  bottom:18px!important;
  width:auto!important;
  display:grid!important;
  grid-template-columns:minmax(300px,1.45fr) repeat(3,minmax(145px,.78fr)) minmax(150px,.75fr)!important;
  gap:9px!important;
  margin:0!important;
  padding:10px!important;
  border:1px solid rgba(177,198,154,.26)!important;
  border-radius:9px!important;
  background:
    linear-gradient(112deg,transparent 0%,transparent 38%,rgba(255,255,255,.045) 48%,rgba(169,229,27,.025) 53%,transparent 64%,transparent 100%),
    linear-gradient(180deg,rgba(11,18,15,.76),rgba(5,10,8,.84))!important;
  background-size:240% 100%,100% 100%!important;
  background-position:-210% 0,0 0!important;
  backdrop-filter:blur(22px) saturate(1.10)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.32),0 0 24px rgba(169,229,27,.035),inset 0 1px 0 rgba(255,255,255,.075)!important;
  animation:replaysHeroSearchSheen170 10s cubic-bezier(.4,0,.2,1) infinite!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroSearchBar::before{
  content:""!important;
  position:absolute!important;
  left:12px!important;
  right:12px!important;
  top:0!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(169,229,27,.55) 24%,rgba(231,182,66,.22) 67%,transparent)!important;
  pointer-events:none!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .approvedReplaysControlBar .replaySearchField,
.approvedReplaysMockup .replaysHeroProfileParity .approvedReplaysControlBar select{
  min-height:48px!important;
  border-radius:7px!important;
  border:1px solid rgba(211,224,218,.15)!important;
  background:linear-gradient(180deg,rgba(18,27,23,.82),rgba(8,15,12,.86))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 18px rgba(0,0,0,.12)!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .approvedReplaysControlBar .replaySearchField:hover,
.approvedReplaysMockup .replaysHeroProfileParity .approvedReplaysControlBar select:hover{
  border-color:rgba(195,220,178,.27)!important;
  background:linear-gradient(180deg,rgba(23,34,29,.90),rgba(10,18,15,.91))!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .approvedReplaysControlBar .replaySearchField:focus-within,
.approvedReplaysMockup .replaysHeroProfileParity .approvedReplaysControlBar select:focus{
  border-color:rgba(169,229,27,.48)!important;
  box-shadow:0 0 0 2px rgba(169,229,27,.045),0 0 18px rgba(169,229,27,.05),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
/* Everything below the hero remains the approved replay catalogue. */
.approvedReplaysMockup .activeFilterBar{
  margin:0 0 9px!important;
}
.approvedReplaysMockup .discoveryCatalogMeta{
  margin-top:0!important;
}
@media(max-width:1100px){
  .approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity{
    height:468px!important;
    min-height:468px!important;
  }
  .approvedReplaysMockup .replaysHeroProfileParity .replaysHeroContent{
    height:468px!important;
    min-height:468px!important;
    padding:50px 34px 180px!important;
  }
  .approvedReplaysMockup .replaysHeroProfileParity .replaysHeading{max-width:48%!important}
  .approvedReplaysMockup .replaysHeroProfileParity .replaysHeroSearchBar{
    grid-template-columns:1.35fr 1fr 1fr!important;
  }
  .approvedReplaysMockup .replaysHeroProfileParity .replaysHeroSearchBar .replaySearchField{grid-column:1/-1!important}
}
@media(max-width:820px){
  .replaysDiscoveryPage.approvedReplaysMockup{width:calc(100% - 28px)!important}
  .approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity{
    height:620px!important;
    min-height:620px!important;
  }
  .approvedReplaysMockup .replaysHeroProfileParity .replaysHeroBackdrop{
    background-position:64% 48%!important;
  }
  .approvedReplaysMockup .replaysHeroProfileParity .replaysHeroShade{
    background:linear-gradient(180deg,rgba(3,8,7,.86) 0%,rgba(3,8,7,.62) 46%,rgba(4,9,8,.72) 72%,rgba(4,9,8,.90) 100%)!important;
  }
  .approvedReplaysMockup .replaysHeroProfileParity .replaysHeroContent{
    height:620px!important;
    min-height:620px!important;
    padding:34px 24px 292px!important;
  }
  .approvedReplaysMockup .replaysHeroProfileParity .replaysHeading{
    width:100%!important;
    max-width:none!important;
  }
  .approvedReplaysMockup .replaysHeroProfileParity .pageTitle{font-size:52px!important}
  .approvedReplaysMockup .replaysHeroProfileParity .replaysHeroSearchBar{
    left:16px!important;
    right:16px!important;
    bottom:16px!important;
    grid-template-columns:1fr!important;
    padding:8px!important;
  }
  .approvedReplaysMockup .replaysHeroProfileParity .replaysHeroSearchBar .replaySearchField{grid-column:auto!important}
}
@media(max-width:650px){
  .replaysDiscoveryPage.approvedReplaysMockup{width:calc(100% - 20px)!important}
  .approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity{
    height:646px!important;
    min-height:646px!important;
  }
  .approvedReplaysMockup .replaysHeroProfileParity .replaysHeroContent{
    height:646px!important;
    min-height:646px!important;
    padding:30px 20px 305px!important;
  }
  .approvedReplaysMockup .replaysHeroProfileParity .pageTitle{font-size:46px!important}
}
@media(prefers-reduced-motion:reduce){
  .approvedReplaysMockup .replaysHeroProfileParity .replaysHeroFx::before,
  .approvedReplaysMockup .replaysHeroProfileParity .replaysHeroSearchBar{
    animation:none!important;
  }
}


/* =====================================================================
   v0.3.5.171 — REPLAYS HERO APPROVED DARK FOREST POLISH
   Lock the approved /replays hero look, keep it aligned to the main site
   width, and slightly increase search bar font size/readability.
   ===================================================================== */
.replaysDiscoveryPage.approvedReplaysMockup{
  width:min(1280px,calc(100vw - 40px))!important;
  max-width:min(1280px,calc(100vw - 40px))!important;
  margin:0 auto!important;
  box-sizing:border-box!important;
}
.approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroContent,
.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroSearchBar{
  box-sizing:border-box!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .approvedReplaysControlBar .replaySearchField input,
.approvedReplaysMockup .replaysHeroProfileParity .approvedReplaysControlBar select{
  font-size:14px!important;
  line-height:1.2!important;
  font-weight:650!important;
  letter-spacing:.01em!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .approvedReplaysControlBar .replaySearchField input::placeholder{
  font-size:14px!important;
  font-weight:550!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .approvedReplaysControlBar select{
  padding-top:0!important;
  padding-bottom:0!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .approvedReplaysControlBar .replaySearchField svg,
.approvedReplaysMockup .replaysHeroProfileParity .approvedReplaysControlBar .replaySearchField .searchIcon,
.approvedReplaysMockup .replaysHeroProfileParity .approvedReplaysControlBar .replaySearchField .toolbarIcon{
  transform:scale(1.06)!important;
}
@media(max-width:820px){
  .replaysDiscoveryPage.approvedReplaysMockup{
    width:calc(100vw - 28px)!important;
    max-width:calc(100vw - 28px)!important;
  }
}
@media(max-width:650px){
  .replaysDiscoveryPage.approvedReplaysMockup{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
  }
  .approvedReplaysMockup .replaysHeroProfileParity .approvedReplaysControlBar .replaySearchField input,
  .approvedReplaysMockup .replaysHeroProfileParity .approvedReplaysControlBar select,
  .approvedReplaysMockup .replaysHeroProfileParity .approvedReplaysControlBar .replaySearchField input::placeholder{
    font-size:13px!important;
  }
}


/* =====================================================================
   v0.3.5.172 — REPLAYS HERO TANK RIGHT NUDGE
   Approved /replays hero remains the same; only nudge the tank composition
   slightly to the right on desktop to better match the intended framing.
   ===================================================================== */
.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroBackdrop{
  background-position:56% 52%!important;
}
@media(max-width:820px){
  .approvedReplaysMockup .replaysHeroProfileParity .replaysHeroBackdrop{
    background-position:66% 48%!important;
  }
}


/* =====================================================================
   v0.3.5.173 — REPLAYS HERO THINNER + TANK FURTHER RIGHT
   Make the /replays hero shorter so the replay cards start higher, and push
   the tank composition roughly 15% further to the right on desktop.
   ===================================================================== */
.approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity{
  min-height:420px!important;
  height:420px!important;
  margin:0 0 18px!important;
}
.approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity::before{
  top:18px!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroBackdrop{
  background-position:66% 51%!important;
  transform:scale(1.01)!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroContent{
  min-height:420px!important;
  height:420px!important;
  padding:44px 48px 102px!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .pageTitle{
  margin:14px 0 14px!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroSearchBar{
  bottom:14px!important;
}
.approvedReplaysMockup .activeFilterBar{
  margin:0 0 7px!important;
}
@media(max-width:1100px){
  .approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity{
    min-height:444px!important;
    height:444px!important;
  }
  .approvedReplaysMockup .replaysHeroProfileParity .replaysHeroBackdrop{
    background-position:68% 49%!important;
  }
  .approvedReplaysMockup .replaysHeroProfileParity .replaysHeroContent{
    min-height:444px!important;
    height:444px!important;
    padding:44px 34px 166px!important;
  }
}
@media(max-width:820px){
  .approvedReplaysMockup .replaysHeroProfileParity .replaysHeroBackdrop{
    background-position:67% 48%!important;
  }
}


/* =====================================================================
   v0.3.5.174 — REPLAYS HERO NEW RIGHT-SIDE TANK RENDER
   Swap only the /replays hero artwork to the newly approved forest/mountain
   render with the full tank visible on the right. Keep the compact 173 hero
   geometry, overlay search bar, and replay catalogue unchanged.
   ===================================================================== */
.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroBackdrop{
  background:url('/assets/replays_hero_forest_battle_v174.webp') center 51%/cover no-repeat!important;
  filter:saturate(1.035) contrast(1.05) brightness(.98)!important;
  transform:scale(1.006)!important;
}


/* =====================================================================
   v0.3.5.175 — REPLAYS HERO LEFT SHADE LIGHTEN
   Keep the approved /replays hero render and layout; only make the left-side
   dark overlay lighter so more of the forest render is visible.
   ===================================================================== */
.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroShade{
  background:
    linear-gradient(90deg,rgba(3,8,7,.82) 0%,rgba(3,8,7,.72) 23%,rgba(4,9,8,.46) 40%,rgba(5,10,9,.14) 60%,rgba(4,9,8,.07) 82%,rgba(4,9,8,.18) 100%),
    linear-gradient(180deg,rgba(3,7,6,.015),rgba(3,7,6,.008) 54%,rgba(4,9,8,.66) 100%)!important;
}


/* =====================================================================
   v0.3.5.176 — REPLAYS HERO LIFT UP + LESS TOP GAP
   Raise the /replays hero composition on the page: reduce the gap above the
   hero, trim the hero from the bottom a bit more, and pull the replay grid up.
   ===================================================================== */
.replaysDiscoveryPage.approvedReplaysMockup{
  padding-top:12px!important;
}
.approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity{
  min-height:404px!important;
  height:404px!important;
  margin:0 0 12px!important;
}
.approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity::before{
  top:14px!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroContent{
  min-height:404px!important;
  height:404px!important;
  padding:42px 48px 96px!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .pageTitle{
  margin:10px 0 12px!important;
}
.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroSearchBar{
  bottom:10px!important;
}
.approvedReplaysMockup .activeFilterBar{
  margin:0 0 4px!important;
}
@media(max-width:1100px){
  .replaysDiscoveryPage.approvedReplaysMockup{
    padding-top:10px!important;
  }
  .approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity{
    min-height:426px!important;
    height:426px!important;
    margin:0 0 12px!important;
  }
  .approvedReplaysMockup .replaysHeroProfileParity .replaysHeroContent{
    min-height:426px!important;
    height:426px!important;
    padding:42px 34px 152px!important;
  }
}


/* =====================================================================
   v0.3.5.177 — REPLAYS HERO PREMIUM FX FINISH
   Final premium cinematic pass for the /replays hero.
   Goals: subtle light rays, atmospheric dust, glassier search rail,
   refined title contrast, and gentle cinematic motion without altering layout.
   ===================================================================== */
@keyframes replaysHeroSweep177{
  0%,14%{transform:translateX(-120%) skewX(-14deg);opacity:0}
  24%{opacity:.13}
  38%{transform:translateX(138%) skewX(-14deg);opacity:0}
  100%{transform:translateX(138%) skewX(-14deg);opacity:0}
}
@keyframes replaysHeroRays177{
  0%,100%{opacity:.40;transform:translateX(0) translateY(0) scale(1)}
  50%{opacity:.58;transform:translateX(-1.2%) translateY(-1%) scale(1.02)}
}
@keyframes replaysHeroDust177{
  0%,100%{opacity:.30;transform:translate3d(0,0,0) scale(1)}
  50%{opacity:.47;transform:translate3d(-1.2%, -1.4%, 0) scale(1.03)}
}
@keyframes replaysControlBarAura177{
  0%,100%{box-shadow:0 18px 34px rgba(0,0,0,.34),0 0 0 rgba(118,236,92,0),inset 0 1px 0 rgba(255,255,255,.045),inset 0 -1px 0 rgba(0,0,0,.30)}
  50%{box-shadow:0 20px 42px rgba(0,0,0,.38),0 0 20px rgba(112,221,89,.10),inset 0 1px 0 rgba(255,255,255,.055),inset 0 -1px 0 rgba(0,0,0,.30)}
}
.approvedReplaysMockup .replaysHeroBanner{
  overflow:hidden!important;
}
.approvedReplaysMockup .replaysHeroBanner::after{
  content:""!important;
  position:absolute!important;
  inset:-10% auto -10% -24%!important;
  width:34%!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(246,255,247,.08) 48%,rgba(203,255,182,.10) 55%,rgba(255,231,175,.08) 61%,rgba(255,255,255,0) 100%)!important;
  mix-blend-mode:screen!important;
  filter:blur(7px)!important;
  animation:replaysHeroSweep177 9.8s ease-in-out infinite!important;
  z-index:1!important;
}
.approvedReplaysMockup .replaysHeroBackdrop::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 83% 36%,rgba(242,231,190,.20),transparent 14%),
    linear-gradient(158deg,rgba(255,240,194,.18) 0%,rgba(255,240,194,.08) 13%,rgba(255,240,194,0) 24%),
    linear-gradient(146deg,rgba(255,244,212,.14) 10%,rgba(255,244,212,.06) 20%,rgba(255,244,212,0) 34%),
    linear-gradient(134deg,rgba(255,232,168,.10) 16%,rgba(255,232,168,0) 31%)!important;
  mix-blend-mode:screen!important;
  filter:blur(3px)!important;
  opacity:.50!important;
  animation:replaysHeroRays177 8.2s ease-in-out infinite!important;
}
.approvedReplaysMockup .replaysHeroBackdrop::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(ellipse at 78% 74%,rgba(196,173,121,.16) 0%,rgba(196,173,121,.08) 15%,rgba(196,173,121,0) 32%),
    radial-gradient(ellipse at 70% 77%,rgba(214,194,144,.12) 0%,rgba(214,194,144,.05) 11%,rgba(214,194,144,0) 26%),
    radial-gradient(ellipse at 79% 55%,rgba(237,230,199,.10) 0%,rgba(237,230,199,.03) 17%,rgba(237,230,199,0) 29%)!important;
  mix-blend-mode:screen!important;
  filter:blur(12px)!important;
  opacity:.38!important;
  animation:replaysHeroDust177 7.6s ease-in-out infinite!important;
}
.approvedReplaysMockup .replaysHeroShade{
  background:
    linear-gradient(90deg,rgba(3,7,8,.78) 0%,rgba(4,8,9,.62) 26%,rgba(5,9,10,.34) 46%,rgba(5,10,10,.14) 63%,rgba(5,10,10,.10) 100%),
    linear-gradient(180deg,rgba(3,7,8,.02) 0%,rgba(3,7,8,.02) 48%,rgba(4,9,9,.58) 100%)!important;
}
.approvedReplaysMockup .pageTitle{
  filter:contrast(1.03) brightness(1.03)!important;
  text-shadow:0 12px 34px rgba(0,0,0,.52),0 0 18px rgba(255,255,255,.03)!important;
}
.approvedReplaysMockup .replaysPageSub{
  text-shadow:0 4px 16px rgba(0,0,0,.22)!important;
}
.approvedReplaysMockup .approvedReplaysControlBar{
  position:relative!important;
  background:linear-gradient(180deg,rgba(13,20,24,.78),rgba(8,13,17,.84))!important;
  backdrop-filter:blur(22px) saturate(1.12)!important;
  box-shadow:0 18px 34px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.045),inset 0 -1px 0 rgba(0,0,0,.30)!important;
  animation:replaysControlBarAura177 6.8s ease-in-out infinite!important;
}
.approvedReplaysMockup .approvedReplaysControlBar::before{
  content:""!important;
  position:absolute!important;
  left:10px!important;
  right:10px!important;
  top:0!important;
  height:1px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(115,222,84,0) 0%,rgba(115,222,84,.42) 18%,rgba(239,206,114,.34) 55%,rgba(115,222,84,.26) 82%,rgba(115,222,84,0) 100%)!important;
  box-shadow:0 0 16px rgba(115,222,84,.10),0 0 18px rgba(239,206,114,.06)!important;
  pointer-events:none!important;
}
.approvedReplaysMockup .approvedReplaysControlBar::after{
  content:""!important;
  position:absolute!important;
  left:32px!important;
  right:32px!important;
  bottom:-14px!important;
  height:26px!important;
  border-radius:999px!important;
  background:radial-gradient(ellipse at center,rgba(93,188,74,.12) 0%,rgba(93,188,74,.05) 36%,rgba(93,188,74,0) 72%)!important;
  filter:blur(10px)!important;
  pointer-events:none!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField,
.approvedReplaysMockup .approvedReplaysControlBar select{
  background:linear-gradient(180deg,rgba(9,14,18,.84),rgba(7,11,15,.88))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),inset 0 -1px 0 rgba(0,0,0,.36),0 8px 18px rgba(0,0,0,.12)!important;
  transition:border-color .22s ease,box-shadow .22s ease,background-color .22s ease,transform .22s ease!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField:hover,
.approvedReplaysMockup .approvedReplaysControlBar select:hover{
  border-color:rgba(118,230,95,.22)!important;
  box-shadow:0 0 0 1px rgba(118,230,95,.06),0 10px 22px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.03)!important;
  transform:translateY(-1px)!important;
}
.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField:focus-within,
.approvedReplaysMockup .approvedReplaysControlBar select:focus{
  border-color:rgba(118,230,95,.40)!important;
  box-shadow:0 0 0 1px rgba(118,230,95,.10),0 0 20px rgba(118,230,95,.08),0 12px 22px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.03)!important;
}
@media (prefers-reduced-motion:reduce){
  .approvedReplaysMockup .replaysHeroBanner::after,
  .approvedReplaysMockup .replaysHeroBackdrop::before,
  .approvedReplaysMockup .replaysHeroBackdrop::after,
  .approvedReplaysMockup .approvedReplaysControlBar{
    animation:none!important;
  }
}

/* =====================================================================
   v0.3.5.178 — EARNED GUN MARK RELIABLE VISIBILITY
   If exact client PNG extraction is temporarily unavailable, never lose a
   battle-earned mark silently: show an honest text-level fallback (I/II/III)
   until the real client asset cache is rebuilt on startup.
   ===================================================================== */
.approvedAward.tier-marks.realClientMark .gunMarkTextFallback{
  position:relative!important;
  z-index:2!important;
  width:78px!important;
  height:52px!important;
  display:none;
  align-items:center!important;
  justify-content:center!important;
  flex-direction:column!important;
  border:1px solid rgba(229,184,75,.34)!important;
  border-radius:7px!important;
  background:linear-gradient(180deg,rgba(54,45,25,.86),rgba(18,18,15,.92))!important;
  box-shadow:0 8px 18px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06),0 0 14px rgba(229,184,75,.08)!important;
  color:#f0c85b!important;
}
.approvedAward.tier-marks.realClientMark .gunMarkTextFallback b{
  font-size:22px!important;
  line-height:1!important;
  letter-spacing:.10em!important;
  text-shadow:0 0 10px rgba(229,184,75,.18)!important;
}
.approvedAward.tier-marks.realClientMark .gunMarkTextFallback small{
  margin-top:4px!important;
  font-size:6px!important;
  line-height:1!important;
  letter-spacing:.14em!important;
  color:#bcae83!important;
}


/* =====================================================================
   v0.3.5.180 — BATTLE PAGE GLOBAL VISUAL PARITY PASS
   Visual-only parity pass for the finished battle-detail page.
   Goal: bring hero color, glass depth, borders and panel light closer to the
   approved HOME / PLAYER / REPLAYS ensemble without touching data or geometry.
   ===================================================================== */

/* 1) Battle hero: less cold blue/green, more neutral-black + restrained warm light. */
.cinematicReplayPage .approvedReplayHero{
  background:#080d0c!important;
  box-shadow:0 24px 70px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.cinematicReplayPage .approvedHeroBg{
  filter:saturate(.91) contrast(1.045) brightness(.98) sepia(.035)!important;
}
.cinematicReplayPage .approvedReplayHero.classicIconHero .approvedHeroVignette{
  background:
    linear-gradient(90deg,
      rgba(3,7,7,.91) 0%,
      rgba(3,8,7,.76) 27%,
      rgba(5,10,8,.34) 53%,
      rgba(6,11,9,.09) 73%,
      rgba(6,10,9,.13) 100%),
    linear-gradient(180deg,
      rgba(255,244,214,.015) 0%,
      rgba(4,8,7,.08) 58%,
      rgba(4,8,7,.66) 100%)!important;
}
.cinematicReplayPage .approvedHeroGlow{
  background:
    radial-gradient(circle at 18% 43%,rgba(169,229,27,.095),transparent 24%),
    radial-gradient(circle at 83% 19%,rgba(239,194,96,.145),transparent 27%),
    radial-gradient(circle at 77% 52%,rgba(255,225,166,.045),transparent 31%)!important;
  opacity:.92!important;
}
.cinematicReplayPage .approvedReplayHero.cinematic-loss .approvedHeroGlow{
  background:
    radial-gradient(circle at 18% 43%,rgba(228,90,81,.075),transparent 24%),
    radial-gradient(circle at 83% 19%,rgba(235,178,100,.12),transparent 27%),
    radial-gradient(circle at 77% 52%,rgba(255,220,168,.035),transparent 31%)!important;
}
.cinematicReplayPage .approvedHeroLightBeam{
  opacity:.12!important;
  background:linear-gradient(116deg,transparent 0%,rgba(255,244,210,.018) 30%,rgba(244,203,112,.105) 47%,rgba(255,229,172,.025) 58%,transparent 72%)!important;
}
.cinematicReplayPage .cinematicAtmosphere{opacity:.17!important}

/* Victory / defeat remains semantic, but the bloom is brought down to the same premium level as HOME. */
.cinematicReplayPage .approvedHeroCopy h1{
  color:#a9e51b!important;
  text-shadow:0 0 20px rgba(169,229,27,.25),0 5px 30px rgba(41,85,18,.22)!important;
}
.cinematicReplayPage .approvedReplayHero.cinematic-loss .approvedHeroCopy h1{
  color:#ef6a60!important;
  text-shadow:0 0 20px rgba(239,106,96,.21),0 5px 30px rgba(92,28,24,.20)!important;
}
.cinematicReplayPage .approvedReplayHero.cinematic-draw .approvedHeroCopy h1{
  color:#e2b84b!important;
  text-shadow:0 0 18px rgba(226,184,75,.20),0 5px 28px rgba(77,58,19,.18)!important;
}

/* 2) Hero actions: same dark glass family as profile/replays controls. */
.cinematicReplayPage .approvedAction,
.cinematicReplayPage .approvedBackButton{
  border-color:rgba(202,216,208,.15)!important;
  background:linear-gradient(180deg,rgba(15,22,20,.76),rgba(7,12,11,.80))!important;
  backdrop-filter:blur(18px) saturate(1.08)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.cinematicReplayPage .approvedAction:hover,
.cinematicReplayPage .approvedBackButton:hover{
  border-color:rgba(169,229,27,.30)!important;
  background:linear-gradient(180deg,rgba(22,31,26,.86),rgba(9,16,13,.86))!important;
  box-shadow:0 12px 30px rgba(0,0,0,.27),0 0 16px rgba(169,229,27,.045),inset 0 1px 0 rgba(255,255,255,.055)!important;
}

/* 3) KPI / economy / secondary rail = one glass system instead of three unrelated surfaces. */
.cinematicReplayPage .approvedHeroPrimaryStats,
.cinematicReplayPage .approvedSubMetrics{
  border-color:rgba(190,207,198,.14)!important;
  background:linear-gradient(180deg,rgba(10,17,15,.82),rgba(6,11,10,.86))!important;
  backdrop-filter:blur(20px) saturate(1.08)!important;
  box-shadow:0 18px 38px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.cinematicReplayPage .approvedHeroMetric,
.cinematicReplayPage .approvedSubMetrics>div{
  border-right-color:rgba(224,234,228,.075)!important;
}
.cinematicReplayPage .approvedHeroMetric>span,
.cinematicReplayPage .approvedSubMetrics>div>span{
  color:#cfd7d2!important;
  filter:drop-shadow(0 0 7px rgba(169,229,27,.07))!important;
}
.cinematicReplayPage .approvedEconomy{
  border-color:rgba(214,224,218,.13)!important;
  backdrop-filter:blur(20px) saturate(1.05)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.cinematicReplayPage .approvedEconomy.silver{
  background:linear-gradient(120deg,rgba(30,67,43,.68),rgba(7,24,17,.76))!important;
}
.cinematicReplayPage .approvedEconomy.experience{
  background:linear-gradient(120deg,rgba(91,64,24,.72),rgba(36,27,17,.78))!important;
  border-left-color:rgba(232,184,73,.18)!important;
}

/* 4) Tabs + report body: align graphite/glass depth with finished pages. */
.cinematicReplayPage .cinematicReportShell{
  border:1px solid rgba(190,207,198,.115)!important;
  background:linear-gradient(180deg,rgba(9,15,14,.94),rgba(6,11,10,.97))!important;
  box-shadow:0 24px 58px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.026)!important;
}
.cinematicReplayPage .cinematicTabs{
  border-color:rgba(190,207,198,.10)!important;
  background:linear-gradient(180deg,rgba(12,19,17,.96),rgba(7,13,12,.97))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.cinematicReplayPage .cinematicTabs button{
  color:#aeb8b3!important;
  background:linear-gradient(180deg,rgba(12,19,17,.36),rgba(7,13,12,.18))!important;
  border-color:rgba(190,207,198,.07)!important;
}
.cinematicReplayPage .cinematicTabs button.active{
  color:#f0f5f2!important;
  background:linear-gradient(180deg,rgba(48,79,33,.68),rgba(18,34,20,.72))!important;
  border-bottom-color:#a9e51b!important;
  box-shadow:inset 0 -2px 0 #a9e51b,inset 0 1px 0 rgba(255,255,255,.045),0 0 20px rgba(169,229,27,.035)!important;
}
.cinematicReplayPage .cinematicReportContent,
.cinematicReplayPage .personalOverviewLead,
.cinematicReplayPage .retroEfficiencyList,
.cinematicReplayPage .approvedDetailPanel,
.cinematicReplayPage .cinematicSectionHeader{
  border-color:rgba(190,207,198,.095)!important;
  background-color:rgba(8,14,13,.90)!important;
}

/* 5) Rows and stat cells: tiny premium separation, no geometry change. */
.cinematicReplayPage .cinematicInteractionGrid .interactionRow,
.cinematicReplayPage .cinematicTeamMembers .teamMember,
.cinematicReplayPage .approvedDetailRow{
  border-color:rgba(205,218,211,.075)!important;
  background:linear-gradient(90deg,rgba(11,18,16,.72),rgba(8,14,13,.62))!important;
}
.cinematicReplayPage .cinematicInteractionGrid .interactionRow:hover,
.cinematicReplayPage .cinematicTeamMembers .teamMember:hover{
  background:linear-gradient(90deg,rgba(17,26,22,.82),rgba(9,16,14,.70))!important;
  border-color:rgba(169,229,27,.115)!important;
}

@media (prefers-reduced-motion:reduce){
  .cinematicReplayPage .approvedHeroBg,
  .cinematicReplayPage .approvedHeroGlow,
  .cinematicReplayPage .approvedHeroLightBeam,
  .cinematicReplayPage .cinematicAtmosphere{animation:none!important}
}


/* =====================================================================
   v0.3.5.181 — BATTLE HERO FINAL ATMOSPHERE POLISH
   Final visual micro-pass for the battle detail hero.
   Scope: hero color temperature, tank integration, glass economy cards,
   and top action buttons only. Geometry and data logic stay unchanged.
   ===================================================================== */

/* 1) Final hero color grade: less cyan, a touch warmer/olive on the right. */
.cinematicReplayPage .approvedHeroBg{
  filter:saturate(.87) contrast(1.045) brightness(.985) sepia(.055) hue-rotate(-2deg)!important;
}
.cinematicReplayPage .approvedReplayHero.classicIconHero .approvedHeroVignette{
  background:
    linear-gradient(90deg,
      rgba(3,7,7,.91) 0%,
      rgba(3,8,7,.76) 27%,
      rgba(5,10,8,.34) 52%,
      rgba(7,12,9,.08) 72%,
      rgba(10,12,8,.10) 100%),
    radial-gradient(circle at 84% 32%,rgba(222,175,85,.055),transparent 30%),
    linear-gradient(180deg,
      rgba(255,242,207,.018) 0%,
      rgba(4,8,7,.07) 57%,
      rgba(4,8,7,.64) 100%)!important;
}
.cinematicReplayPage .approvedHeroGlow{
  background:
    radial-gradient(circle at 18% 43%,rgba(169,229,27,.085),transparent 24%),
    radial-gradient(circle at 84% 18%,rgba(239,194,96,.16),transparent 27%),
    radial-gradient(circle at 77% 52%,rgba(255,226,166,.055),transparent 31%)!important;
}

/* 2) Tank integration: stronger contact shadow + soft warm rim, no geometry change. */
.cinematicReplayPage .approvedReplayHero.classicIconHero .approvedHeroTank.classicHeaderTankIcon{
  filter:
    drop-shadow(0 28px 24px rgba(0,0,0,.56))
    drop-shadow(0 10px 10px rgba(0,0,0,.34))
    drop-shadow(-2px -1px 2px rgba(255,235,190,.11))
    drop-shadow(2px 0 8px rgba(222,173,82,.055))
    brightness(1.015)
    contrast(1.025)
    saturate(.97)!important;
}
.cinematicReplayPage .approvedReplayHero.classicIconHero:hover .approvedHeroTank.classicHeaderTankIcon{
  filter:
    drop-shadow(0 30px 26px rgba(0,0,0,.58))
    drop-shadow(0 10px 10px rgba(0,0,0,.34))
    drop-shadow(-2px -1px 2px rgba(255,235,190,.13))
    drop-shadow(2px 0 10px rgba(222,173,82,.07))
    brightness(1.025)
    contrast(1.025)
    saturate(.98)!important;
}

/* 3) Economy cards: semantic colors stay, but surfaces become lighter glass. */
.cinematicReplayPage .approvedEconomy{
  border-color:rgba(214,224,218,.14)!important;
  backdrop-filter:blur(22px) saturate(1.08)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.055),inset 0 -1px 0 rgba(0,0,0,.20)!important;
}
.cinematicReplayPage .approvedEconomy.silver{
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 28%),
    linear-gradient(120deg,rgba(32,78,49,.54),rgba(7,24,17,.63))!important;
}
.cinematicReplayPage .approvedEconomy.experience{
  background:
    linear-gradient(180deg,rgba(255,255,255,.03),transparent 28%),
    linear-gradient(120deg,rgba(99,69,25,.57),rgba(39,29,17,.65))!important;
  border-left-color:rgba(232,184,73,.20)!important;
}
.cinematicReplayPage .approvedEconomy.silver strong{
  text-shadow:0 0 10px rgba(150,216,166,.08)!important;
}
.cinematicReplayPage .approvedEconomy.experience strong{
  text-shadow:0 0 12px rgba(232,184,73,.10)!important;
}

/* 4) Top actions: a touch more glass depth and controlled premium hover glow. */
.cinematicReplayPage .approvedAction,
.cinematicReplayPage .approvedBackButton{
  border-color:rgba(202,216,208,.17)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 24%),
    linear-gradient(180deg,rgba(16,23,21,.71),rgba(7,12,11,.76))!important;
  backdrop-filter:blur(20px) saturate(1.10)!important;
  box-shadow:0 11px 28px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.cinematicReplayPage .approvedAction:hover,
.cinematicReplayPage .approvedBackButton:hover{
  border-color:rgba(169,229,27,.34)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 24%),
    linear-gradient(180deg,rgba(24,34,28,.80),rgba(9,16,13,.82))!important;
  box-shadow:0 13px 32px rgba(0,0,0,.29),0 0 18px rgba(169,229,27,.055),inset 0 1px 0 rgba(255,255,255,.07)!important;
  transform:translateY(-1px)!important;
}

@media (prefers-reduced-motion:reduce){
  .cinematicReplayPage .approvedAction,
  .cinematicReplayPage .approvedBackButton{transform:none!important}
}


/* =====================================================================
   v0.3.5.182 — BATTLE TEAMS LIFE STATES + BATTLE DURATION
   Make alive/destroyed team rows immediately readable and surface battle
   duration in the Detailed Report without changing report data logic.
   ===================================================================== */
/* Teams tab: row-level life state is stronger than the neutral global row fill. */
.cinematicReplayPage .cinematicTeamMembers .teamMember.survived{
  background:linear-gradient(90deg,rgba(83,139,43,.24) 0%,rgba(43,72,34,.15) 44%,rgba(12,20,17,.68) 100%)!important;
  border-color:rgba(132,194,72,.16)!important;
  box-shadow:inset 3px 0 0 rgba(143,205,72,.68),inset 0 1px 0 rgba(176,226,117,.025)!important;
}
.cinematicReplayPage .cinematicTeamMembers .teamMember.destroyed{
  background:linear-gradient(90deg,rgba(126,45,41,.25) 0%,rgba(73,30,29,.14) 44%,rgba(18,15,15,.68) 100%)!important;
  border-color:rgba(213,82,74,.14)!important;
  box-shadow:inset 3px 0 0 rgba(221,92,82,.62),inset 0 1px 0 rgba(255,132,124,.018)!important;
}
.cinematicReplayPage .cinematicTeamMembers .teamMember.owner.survived{
  background:linear-gradient(90deg,rgba(111,174,48,.31) 0%,rgba(54,89,36,.18) 48%,rgba(12,20,17,.68) 100%)!important;
  box-shadow:inset 4px 0 0 #a9e51b,0 0 0 1px rgba(169,229,27,.055),inset 0 1px 0 rgba(202,246,121,.03)!important;
}
.cinematicReplayPage .cinematicTeamMembers .teamMember.owner.destroyed{
  background:linear-gradient(90deg,rgba(137,55,43,.27) 0%,rgba(82,39,28,.15) 48%,rgba(18,15,15,.68) 100%)!important;
  box-shadow:inset 4px 0 0 rgba(232,184,73,.82),0 0 0 1px rgba(232,184,73,.05)!important;
}
.cinematicReplayPage .cinematicTeamMembers .teamMember.survived:hover{
  background:linear-gradient(90deg,rgba(94,154,50,.30),rgba(47,79,37,.19) 45%,rgba(14,23,19,.72))!important;
  border-color:rgba(143,205,72,.24)!important;
}
.cinematicReplayPage .cinematicTeamMembers .teamMember.destroyed:hover{
  background:linear-gradient(90deg,rgba(143,51,45,.30),rgba(82,34,32,.18) 45%,rgba(22,17,17,.72))!important;
  border-color:rgba(221,92,82,.22)!important;
}
.cinematicReplayPage .teamLifeChip.survived{
  color:#d9ff96!important;
  background:rgba(80,137,39,.30)!important;
  border-color:rgba(151,216,77,.44)!important;
  box-shadow:0 0 10px rgba(143,205,72,.045)!important;
}
.cinematicReplayPage .teamLifeChip.destroyed{
  color:#ffaaa3!important;
  background:rgba(135,48,43,.29)!important;
  border-color:rgba(224,91,81,.40)!important;
  box-shadow:0 0 10px rgba(221,92,82,.035)!important;
}
/* Detailed report: battle duration should read as a first-class factual value. */
.cinematicReplayPage .approvedDetailRow .battleDurationValue{
  color:#dbe5df!important;
  font-variant-numeric:tabular-nums!important;
  letter-spacing:.035em!important;
}


/* ================================================================
   v0.3.5.183 — BATTLE HERO MEDALS HIERARCHY + OVERLAP POLISH
   ================================================================ */
/* Battle hero only: create a premium stacked awards rail with clear hierarchy.
   Order stays: mastery / marks / key medals first, smaller ribbon-like medals last. */
.approvedReplayHero .approvedAwardsRail{
  position:relative!important;
  isolation:isolate!important;
  gap:0!important;
  overflow:visible!important;
  min-height:102px!important;
  height:102px!important;
  padding-right:12px!important;
}
.approvedReplayHero .approvedAwardsRail.emptyAwards{
  min-height:52px!important;
  height:52px!important;
}
.approvedReplayHero .approvedAwardsRail::after{
  content:""!important;
  position:absolute!important;
  left:-8px!important;
  top:30px!important;
  width:min(560px, calc(100% - 24px))!important;
  height:52px!important;
  border-radius:999px!important;
  background:
    radial-gradient(circle at 12% 50%, rgba(255,220,126,.25) 0%, rgba(255,220,126,.14) 20%, rgba(255,220,126,0) 45%),
    linear-gradient(90deg, rgba(137,108,38,.34) 0%, rgba(86,66,24,.18) 28%, rgba(35,30,18,.08) 58%, rgba(0,0,0,0) 100%)!important;
  filter:blur(11px)!important;
  opacity:.9!important;
  pointer-events:none!important;
  z-index:0!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward{
  position:relative!important;
  z-index:2!important;
  margin-left:-7px!important;
  margin-right:0!important;
  transition:transform .18s ease, filter .18s ease, opacity .18s ease!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward:first-child{margin-left:0!important;}
.approvedReplayHero .approvedAwardsRail > .approvedAward.mastery,
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks,
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark,
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-legendary{
  margin-left:-3px!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.awardMinor,
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-standard{
  margin-left:-8px!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.awardMicro,
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-trailing{
  margin-left:-10px!important;
  opacity:.92!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.awardMajor .approvedAwardIcon{
  filter:drop-shadow(0 7px 7px rgba(0,0,0,.56)) drop-shadow(0 0 8px rgba(232,184,73,.10))!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.mastery .approvedAwardIcon,
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks .approvedAwardIcon,
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-legendary .approvedAwardIcon{
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.62)) drop-shadow(0 0 12px rgba(239,194,84,.26)) brightness(1.05)!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.awardMinor .approvedAwardIcon,
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-standard .approvedAwardIcon{
  transform:scale(.96)!important;
  filter:drop-shadow(0 6px 6px rgba(0,0,0,.54)) drop-shadow(0 0 7px rgba(201,165,82,.11))!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.awardMicro .approvedAwardIcon,
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-trailing .approvedAwardIcon{
  transform:scale(.90)!important;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.50)) drop-shadow(0 0 5px rgba(188,151,68,.08))!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward:hover{
  transform:translateY(-5px) scale(1.10)!important;
  z-index:50!important;
  opacity:1!important;
  filter:brightness(1.09)!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward:hover .approvedAwardIcon{
  filter:drop-shadow(0 11px 10px rgba(0,0,0,.68)) drop-shadow(0 0 14px rgba(247,201,91,.34)) brightness(1.08)!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.heroAwardOrder-1{z-index:24!important;}
.approvedReplayHero .approvedAwardsRail > .approvedAward.heroAwardOrder-2{z-index:23!important;}
.approvedReplayHero .approvedAwardsRail > .approvedAward.heroAwardOrder-3{z-index:22!important;}
.approvedReplayHero .approvedAwardsRail > .approvedAward.heroAwardOrder-4{z-index:21!important;}
.approvedReplayHero .approvedAwardsRail > .approvedAward.heroAwardOrder-5{z-index:20!important;}
.approvedReplayHero .approvedAwardsRail > .approvedAward.heroAwardOrder-6{z-index:19!important;}
.approvedReplayHero .approvedAwardsRail > .approvedAward.heroAwardOrder-7{z-index:18!important;}
.approvedReplayHero .approvedAwardsRail > .approvedAward.heroAwardOrder-8{z-index:17!important;}
.approvedReplayHero .approvedAwardsRail > .approvedAward.heroAwardOrder-9{z-index:16!important;}
.approvedReplayHero .approvedAwardsRail > .approvedAward.heroAwardOrder-10{z-index:15!important;}
.approvedReplayHero .approvedAwardsRail > .approvedAward.heroAwardOrder-11{z-index:14!important;}
@media (max-width:1200px){
  .approvedReplayHero .approvedAwardsRail{
    min-height:94px!important;
    height:94px!important;
  }
  .approvedReplayHero .approvedAwardsRail::after{
    top:32px!important;
    width:min(500px, calc(100% - 20px))!important;
    height:46px!important;
  }
  .approvedReplayHero .approvedAwardsRail > .approvedAward{
    margin-left:-6px!important;
  }
  .approvedReplayHero .approvedAwardsRail > .approvedAward.awardMicro,
  .approvedReplayHero .approvedAwardsRail > .approvedAward.tier-trailing{
    margin-left:-8px!important;
  }
}


/* ================================================================
   v0.3.5.184 — BATTLE HERO GUN MARK + MEDAL SPACING FIX
   Gun marks in battle hero should sit tightly inside the medals rail,
   without creating a large visual hole before/after major awards.
   ================================================================ */
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark{
  width:76px!important;
  min-width:76px!important;
  max-width:76px!important;
  height:88px!important;
  flex:0 0 76px!important;
  margin-left:-12px!important;
  margin-right:-6px!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-1{
  width:64px!important;min-width:64px!important;max-width:64px!important;flex-basis:64px!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-2{
  width:72px!important;min-width:72px!important;max-width:72px!important;flex-basis:72px!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-3{
  width:80px!important;min-width:80px!important;max-width:80px!important;flex-basis:80px!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark .realGunMarksRow{
  width:74px!important;
  height:60px!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-1 .realGunMarksRow{width:60px!important;}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-2 .realGunMarksRow{width:68px!important;}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-3 .realGunMarksRow{width:76px!important;}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark .realGunMarkComposite{
  width:72px!important;
  height:56px!important;
  max-width:72px!important;
  max-height:56px!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-1 .realGunMarkComposite{width:58px!important;max-width:58px!important;}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-2 .realGunMarkComposite{width:66px!important;max-width:66px!important;}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-3 .realGunMarkComposite{width:74px!important;max-width:74px!important;}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark + .approvedAward{
  margin-left:-13px!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.mastery + .approvedAward.tier-marks.realClientMark{
  margin-left:-7px!important;
}
@media (max-width:1200px){
  .approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark{width:70px!important;min-width:70px!important;max-width:70px!important;flex-basis:70px!important;}
  .approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-1{width:58px!important;min-width:58px!important;max-width:58px!important;flex-basis:58px!important;}
  .approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-2{width:66px!important;min-width:66px!important;max-width:66px!important;flex-basis:66px!important;}
  .approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-3{width:74px!important;min-width:74px!important;max-width:74px!important;flex-basis:74px!important;}
  .approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark .realGunMarksRow{height:56px!important;}
  .approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark + .approvedAward{margin-left:-11px!important;}
}

/* ================================================================
   v0.3.5.185 — BATTLE HERO GUN MARK SCALE + HARMONY FIX
   Restore the earned gun mark as a headline award while keeping the
   surrounding medals visually close. The real client PNG is allowed to
   overhang a compact flex slot, so the mark grows without reopening the
   large gap that v0.3.5.184 removed.
   ================================================================ */
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark{
  width:88px!important;
  min-width:88px!important;
  max-width:88px!important;
  height:104px!important;
  flex:0 0 88px!important;
  margin-left:-10px!important;
  margin-right:-10px!important;
  overflow:visible!important;
  place-items:center!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-1{
  width:78px!important;min-width:78px!important;max-width:78px!important;flex-basis:78px!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-2{
  width:84px!important;min-width:84px!important;max-width:84px!important;flex-basis:84px!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-3{
  width:92px!important;min-width:92px!important;max-width:92px!important;flex-basis:92px!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark .realGunMarksRow{
  width:104px!important;
  height:84px!important;
  overflow:visible!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-1 .realGunMarksRow{width:90px!important;}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-2 .realGunMarksRow{width:100px!important;}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-3 .realGunMarksRow{width:110px!important;}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark .realGunMarkComposite{
  width:104px!important;
  height:84px!important;
  max-width:104px!important;
  max-height:84px!important;
  filter:drop-shadow(0 10px 9px rgba(0,0,0,.68)) drop-shadow(0 0 11px rgba(229,184,75,.25)) brightness(1.04)!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-1 .realGunMarkComposite{
  width:88px!important;height:76px!important;max-width:88px!important;max-height:76px!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-2 .realGunMarkComposite{
  width:98px!important;height:80px!important;max-width:98px!important;max-height:80px!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-3 .realGunMarkComposite{
  width:108px!important;height:86px!important;max-width:108px!important;max-height:86px!important;
}
/* Pull the first medal back toward the enlarged mark. The PNG itself can
   overhang the compact mark slot, so this reads as one continuous award rail. */
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark + .approvedAward{
  margin-left:-18px!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.mastery + .approvedAward.tier-marks.realClientMark{
  margin-left:-8px!important;
}
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark:hover .realGunMarkComposite{
  filter:drop-shadow(0 12px 10px rgba(0,0,0,.72)) drop-shadow(0 0 15px rgba(239,194,84,.36)) brightness(1.08)!important;
}
@media (max-width:1200px){
  .approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark{
    width:82px!important;min-width:82px!important;max-width:82px!important;flex-basis:82px!important;height:98px!important;
    margin-left:-8px!important;margin-right:-8px!important;
  }
  .approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-1{width:72px!important;min-width:72px!important;max-width:72px!important;flex-basis:72px!important;}
  .approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-2{width:78px!important;min-width:78px!important;max-width:78px!important;flex-basis:78px!important;}
  .approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-3{width:86px!important;min-width:86px!important;max-width:86px!important;flex-basis:86px!important;}
  .approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark .realGunMarksRow{width:96px!important;height:78px!important;}
  .approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-1 .realGunMarksRow{width:84px!important;}
  .approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-2 .realGunMarksRow{width:92px!important;}
  .approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-3 .realGunMarksRow{width:102px!important;}
  .approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark .realGunMarkComposite{width:96px!important;height:78px!important;max-width:96px!important;max-height:78px!important;}
  .approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-1 .realGunMarkComposite{width:82px!important;height:70px!important;max-width:82px!important;max-height:70px!important;}
  .approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-2 .realGunMarkComposite{width:90px!important;height:74px!important;max-width:90px!important;max-height:74px!important;}
  .approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark.level-3 .realGunMarkComposite{width:100px!important;height:80px!important;max-width:100px!important;max-height:80px!important;}
  .approvedReplayHero .approvedAwardsRail > .approvedAward.tier-marks.realClientMark + .approvedAward{margin-left:-15px!important;}
}


/* ================================================================
   v0.3.5.186 — BATTLE HERO AWARD ORDER MICRO RAIL FIX
   Keep compact ribbon/service badges at the tail of the battle hero rail,
   after the earned gun mark and full-size medals.
   ================================================================ */
.approvedReplayHero .approvedAwardsRail > .approvedAward.awardMicro,
.approvedReplayHero .approvedAwardsRail > .approvedAward.tier-trailing{
  opacity:.90!important;
}


/* =====================================================================
   v0.3.5.187 — REPLAYS HERO DENSITY POLISH
   /replays-only density pass: shorten the cinematic hero by ~10%, pull the
   catalogue upward, and improve the smallest card text without changing the
   approved 4-column card geometry or replay logic.
   ===================================================================== */
.replaysDiscoveryPage.approvedReplaysMockup{
  padding-top:10px!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity{
  min-height:366px!important;
  height:366px!important;
  margin-bottom:8px!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity::before{
  top:12px!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroContent{
  min-height:366px!important;
  height:366px!important;
  padding:34px 48px 88px!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .pageTitle{
  margin:9px 0 10px!important;
  font-size:64px!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroSearchBar{
  bottom:8px!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .activeFilterBar{
  margin-bottom:2px!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .discoveryCatalogMeta{
  margin-top:0!important;
  margin-bottom:6px!important;
}

/* Card micro-legibility: keep the exact approved card size, only lift the
   quiet utility copy that was getting too thin on 2K / 4-column layouts. */
.replaysDiscoveryPage.approvedReplaysMockup .statsRow.cardHudStats .cardHudValue small{
  color:#a8b2ad!important;
  font-size:6.3px!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .cardFoot{
  font-size:7.6px!important;
  color:#96a19b!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .cardFoot .cardPlayerName{
  color:#aeb8b3!important;
  font-weight:600!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .cardFoot .cardUploadDate{
  color:#8f9a94!important;
  font-size:6.5px!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .cardFoot b{
  font-size:7.6px!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .catalogCount span,
.replaysDiscoveryPage.approvedReplaysMockup .catalogPageInfo{
  color:#929e98!important;
  font-size:8.2px!important;
}

@media(min-width:1440px){
  .replaysDiscoveryPage.approvedReplaysMockup .statsRow.cardHudStats .cardHudValue small{
    font-size:6.1px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .cardFoot{
    font-size:7.4px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .cardFoot .cardUploadDate{
    font-size:6.3px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .cardFoot b{
    font-size:7.4px!important;
  }
}
@media(max-width:1100px){
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity{
    min-height:400px!important;
    height:400px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroContent{
    min-height:400px!important;
    height:400px!important;
    padding:36px 34px 148px!important;
  }
}
@media(max-width:820px){
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity{
    min-height:430px!important;
    height:430px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroContent{
    min-height:430px!important;
    height:430px!important;
  }
}


/* ================================================================
   v0.3.5.188 — REPLAYS CARD FOOTER READABILITY POLISH
   Only for /replays: lift the utility footer copy on 2K / 27" screens
   without changing the approved 4-card geometry.
   ================================================================ */
.replaysDiscoveryPage.approvedReplaysMockup .cardFoot{
  min-height:36px!important;
  padding:3px 8px 2px!important;
  font-size:9px!important;
  line-height:1.22!important;
  color:#9eaaa4!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .cardFoot .cardFootMeta{
  max-width:66%!important;
  gap:5px!important;
  align-items:center!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .cardFoot .cardPlayerName{
  color:#c1cbc6!important;
  font-weight:650!important;
  font-size:9.1px!important;
  letter-spacing:.01em!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .cardFoot .cardUploadDate{
  color:#a0aba5!important;
  font-size:7.9px!important;
  letter-spacing:.02em!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .cardFoot b{
  font-size:8.4px!important;
  font-weight:800!important;
  letter-spacing:.02em!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .cardFoot b i{
  font-size:8.4px!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replayCard:hover .cardFoot .cardPlayerName{
  color:#d2ddd7!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replayCard:hover .cardFoot .cardUploadDate{
  color:#b1bcb6!important;
}
@media(min-width:1440px){
  .replaysDiscoveryPage.approvedReplaysMockup .cardFoot{
    min-height:37px!important;
    font-size:8.9px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .cardFoot .cardPlayerName{
    font-size:9px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .cardFoot .cardUploadDate{
    font-size:7.8px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .cardFoot b,
  .replaysDiscoveryPage.approvedReplaysMockup .cardFoot b i{
    font-size:8.3px!important;
  }
}


/* ================================================================
   v0.3.5.189 — REPLAYS CARD AWARDS PREMIUM GLOW PASS
   Subtle shared amber light under the medal rail on /replays only.
   No solid plate, no geometry change, no per-medal bloom increase.
   ================================================================ */
.replaysDiscoveryPage.approvedReplaysMockup .cardAwards{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .cardAwards:not(:empty)::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  pointer-events:none!important;
  left:2px!important;
  top:50%!important;
  width:76%!important;
  height:30px!important;
  transform:translateY(-50%)!important;
  border-radius:999px!important;
  background:radial-gradient(ellipse at 38% 50%,
    rgba(232,184,73,.105) 0%,
    rgba(216,166,54,.060) 34%,
    rgba(174,126,33,.026) 55%,
    rgba(174,126,33,0) 78%)!important;
  filter:blur(6px)!important;
  opacity:.76!important;
  transition:opacity .18s ease, filter .18s ease!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .cardAwards > .cardAwardIcon{
  position:relative!important;
  z-index:1!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replayCard:hover .cardAwards:not(:empty)::before{
  opacity:.90!important;
  filter:blur(6.5px)!important;
}

/* ================================================================
   v0.3.5.190 — UPLOAD PREMIUM VISUAL PARITY
   Bring the upload page into the approved FermaniHUB cinematic/game UI
   system without changing upload/parser behavior.
   ================================================================ */
.uploadPremiumPage{
  width:min(1280px,calc(100% - 40px))!important;
  max-width:1280px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:18px 0 72px!important;
}
.uploadPremiumPage .uploadCinematicPanel{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border:1px solid rgba(205,221,213,.18)!important;
  border-radius:8px!important;
  padding:34px 34px 20px!important;
  background:#0a100e!important;
  box-shadow:0 30px 82px rgba(0,0,0,.40),0 0 0 1px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.uploadPremiumPage .uploadCinematicPanel::before{
  content:""!important;
  position:absolute!important;
  z-index:-2!important;
  inset:0!important;
  background-image:url('/assets/replays_hero_forest_battle_v174.webp')!important;
  background-size:cover!important;
  background-position:center 57%!important;
  filter:saturate(.82) contrast(1.04) brightness(.66)!important;
  transform:scale(1.015)!important;
}
.uploadPremiumPage .uploadCinematicPanel::after{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,rgba(3,8,7,.96) 0%,rgba(3,8,7,.90) 33%,rgba(4,9,8,.73) 58%,rgba(4,9,8,.66) 100%),
    linear-gradient(180deg,rgba(3,8,7,.24) 0%,rgba(3,8,7,.54) 62%,rgba(3,8,7,.91) 100%)!important;
}
.uploadPremiumPage .uploadIntro{
  position:relative!important;
  max-width:790px!important;
  padding:4px 0 0!important;
}
.uploadPremiumPage .uploadIntro::after{
  content:""!important;
  display:block!important;
  width:220px!important;
  height:1px!important;
  margin-top:20px!important;
  background:linear-gradient(90deg,rgba(169,229,27,.72),rgba(229,182,62,.22),transparent)!important;
}
.uploadPremiumPage .eyebrow{
  color:#a7b1ac!important;
  font-size:9px!important;
  letter-spacing:.19em!important;
}
.uploadPremiumPage .pageTitle{
  margin:12px 0 12px!important;
  font-size:54px!important;
  line-height:.92!important;
  letter-spacing:-.045em!important;
  color:#f5f7f6!important;
  text-shadow:0 5px 24px rgba(0,0,0,.46)!important;
}
.uploadPremiumPage .pageSub{
  max-width:730px!important;
  margin:0!important;
  color:#aab5af!important;
  font-size:13px!important;
  line-height:1.58!important;
}
.uploadPremiumPage .pageSub b{color:#d8e0dc!important;font-weight:750!important}
.uploadPremiumPage .uploadGrid{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.52fr) minmax(300px,.72fr)!important;
  gap:14px!important;
  margin-top:24px!important;
  align-items:stretch!important;
}
.uploadPremiumPage .dropzone,
.uploadPremiumPage .uploadSide{
  border-radius:7px!important;
  border:1px solid rgba(205,221,213,.14)!important;
  background:linear-gradient(145deg,rgba(10,17,15,.90),rgba(6,12,10,.78))!important;
  backdrop-filter:blur(16px) saturate(1.10)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.028)!important;
}
.uploadPremiumPage .dropzone{
  position:relative!important;
  min-height:326px!important;
  padding:30px!important;
  border-style:dashed!important;
  border-color:rgba(178,206,166,.26)!important;
  background:
    radial-gradient(ellipse at 50% 46%,rgba(169,229,27,.080) 0%,rgba(169,229,27,.026) 34%,transparent 65%),
    linear-gradient(145deg,rgba(10,17,15,.91),rgba(6,12,10,.82))!important;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,transform .18s ease!important;
}
.uploadPremiumPage .dropzone::before{
  content:""!important;
  position:absolute!important;
  inset:10px!important;
  border:1px solid rgba(255,255,255,.018)!important;
  border-radius:5px!important;
  pointer-events:none!important;
}
.uploadPremiumPage .dropzone:hover{
  border-color:rgba(169,229,27,.42)!important;
  box-shadow:0 22px 58px rgba(0,0,0,.30),0 0 34px rgba(169,229,27,.040),inset 0 1px 0 rgba(255,255,255,.038)!important;
}
.uploadPremiumPage .dropzone.drag{
  transform:translateY(-1px)!important;
  border-color:rgba(169,229,27,.78)!important;
  background:
    radial-gradient(ellipse at 50% 46%,rgba(169,229,27,.155) 0%,rgba(169,229,27,.040) 38%,transparent 68%),
    linear-gradient(145deg,rgba(12,22,17,.96),rgba(6,13,10,.88))!important;
  box-shadow:0 24px 64px rgba(0,0,0,.34),0 0 42px rgba(169,229,27,.095),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.uploadPremiumPage .dropIcon{
  position:relative!important;
  width:72px!important;
  height:72px!important;
  margin-bottom:1px!important;
  border:1px solid rgba(169,229,27,.38)!important;
  background:radial-gradient(circle,rgba(169,229,27,.11),rgba(169,229,27,.018) 70%)!important;
  color:#a9e51b!important;
  box-shadow:0 0 26px rgba(169,229,27,.055),inset 0 0 18px rgba(169,229,27,.035)!important;
}
.uploadPremiumPage .dropIcon::after{
  content:""!important;
  position:absolute!important;
  inset:-7px!important;
  border-radius:50%!important;
  border:1px solid rgba(169,229,27,.08)!important;
}
.uploadPremiumPage .dropIcon span{
  transform:translateY(-1px)!important;
  font-size:31px!important;
  line-height:1!important;
}
.uploadPremiumPage .dropzone h2{
  margin:16px 0 6px!important;
  font-size:22px!important;
  color:#eef3f0!important;
  letter-spacing:-.015em!important;
}
.uploadPremiumPage .dropzone p{
  margin:0 0 18px!important;
  color:#8f9b95!important;
  font-size:11px!important;
}
.uploadPremiumPage .uploadChooseButton{
  min-width:132px!important;
  padding:10px 15px!important;
  font-size:9px!important;
  color:#eef3f0!important;
  border-color:rgba(205,221,213,.20)!important;
  background:linear-gradient(180deg,rgba(25,34,31,.88),rgba(10,16,14,.92))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
}
.uploadPremiumPage .uploadChooseButton:hover{
  color:#fff!important;
  border-color:rgba(169,229,27,.42)!important;
  box-shadow:0 0 22px rgba(169,229,27,.035),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.uploadPremiumPage .uploadSide{
  min-height:326px!important;
  padding:22px 22px 18px!important;
}
.uploadPremiumPage .uploadSideHead{
  padding-bottom:13px!important;
  border-bottom:1px solid rgba(205,221,213,.08)!important;
}
.uploadPremiumPage .uploadSideHead>span{
  display:block!important;
  color:#8fa078!important;
  font-size:7px!important;
  font-weight:800!important;
  letter-spacing:.18em!important;
  margin-bottom:5px!important;
}
.uploadPremiumPage .uploadSide h3{
  margin:0!important;
  color:#eef3f0!important;
  font-size:13px!important;
  letter-spacing:.035em!important;
}
.uploadPremiumPage .pipeline{
  gap:0!important;
  margin-top:8px!important;
}
.uploadPremiumPage .pipeline>div{
  position:relative!important;
  grid-template-columns:40px 1fr!important;
  gap:10px!important;
  min-height:58px!important;
  padding:9px 0 8px!important;
  border-bottom:1px solid rgba(205,221,213,.055)!important;
}
.uploadPremiumPage .pipeline>div:last-child{border-bottom:0!important}
.uploadPremiumPage .pipeline b{
  width:28px!important;
  height:28px!important;
  display:grid!important;
  place-items:center!important;
  color:#b7ed3d!important;
  font-size:9px!important;
  border:1px solid rgba(169,229,27,.19)!important;
  border-radius:50%!important;
  background:rgba(169,229,27,.035)!important;
  box-shadow:0 0 16px rgba(169,229,27,.025)!important;
}
.uploadPremiumPage .pipeline strong{
  color:#dce3df!important;
  font-size:10px!important;
  letter-spacing:.045em!important;
}
.uploadPremiumPage .pipeline p{
  margin:3px 0 0!important;
  color:#85918b!important;
  font-size:8.2px!important;
  line-height:1.42!important;
}
.uploadPremiumPage .uploadTrustStrip{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:1px!important;
  margin-top:14px!important;
  border:1px solid rgba(205,221,213,.09)!important;
  border-radius:6px!important;
  overflow:hidden!important;
  background:rgba(205,221,213,.055)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.16)!important;
}
.uploadPremiumPage .uploadTrustStrip>span{
  position:relative!important;
  min-height:55px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  padding:9px 13px 9px 25px!important;
  background:linear-gradient(180deg,rgba(9,15,13,.86),rgba(6,12,10,.82))!important;
}
.uploadPremiumPage .uploadTrustStrip>span::before{
  content:""!important;
  position:absolute!important;
  left:12px!important;
  top:50%!important;
  width:5px!important;
  height:5px!important;
  transform:translateY(-50%)!important;
  border-radius:50%!important;
  background:#a9e51b!important;
  box-shadow:0 0 10px rgba(169,229,27,.42)!important;
}
.uploadPremiumPage .uploadTrustStrip b{
  color:#cfd8d3!important;
  font-size:8px!important;
  letter-spacing:.055em!important;
}
.uploadPremiumPage .uploadTrustStrip small{
  margin-top:3px!important;
  color:#75817b!important;
  font-size:7.5px!important;
}
.uploadPremiumPage .uploadStatus{
  margin-top:12px!important;
  padding:14px 16px!important;
  border:1px solid rgba(205,221,213,.13)!important;
  border-radius:6px!important;
  background:linear-gradient(145deg,rgba(13,21,18,.93),rgba(7,13,11,.94))!important;
  backdrop-filter:blur(14px)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.uploadPremiumPage .progress{
  height:3px!important;
  margin-bottom:11px!important;
  border-radius:999px!important;
  overflow:hidden!important;
  background:rgba(205,221,213,.09)!important;
}
.uploadPremiumPage .progress div{
  background:linear-gradient(90deg,#71a812,#a9e51b,#d7ec76)!important;
  box-shadow:0 0 14px rgba(169,229,27,.24)!important;
}
.uploadPremiumPage .statusRow{
  color:#a8b3ad!important;
  font-size:10px!important;
}
@media(max-width:1000px){
  .uploadPremiumPage{width:calc(100% - 32px)!important}
  .uploadPremiumPage .uploadGrid{grid-template-columns:1fr!important}
  .uploadPremiumPage .uploadTrustStrip{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .uploadPremiumPage .dropzone,.uploadPremiumPage .uploadSide{min-height:auto!important}
}
@media(max-width:650px){
  .uploadPremiumPage{width:calc(100% - 24px)!important;padding-top:12px!important}
  .uploadPremiumPage .uploadCinematicPanel{padding:24px 16px 16px!important}
  .uploadPremiumPage .pageTitle{font-size:43px!important}
  .uploadPremiumPage .pageSub{font-size:12px!important}
  .uploadPremiumPage .dropzone{min-height:290px!important;padding:24px 16px!important}
  .uploadPremiumPage .uploadTrustStrip{grid-template-columns:1fr!important}
}


/* ================================================================
   v0.3.5.191 — UPLOAD DUPLICATE REPLAY LINK FIX
   Duplicate uploads keep the warning but expose the existing replay directly.
   ================================================================ */
.uploadPremiumPage .uploadDuplicateAction{
  display:flex!important;
  justify-content:flex-end!important;
  padding-top:12px!important;
  margin-top:12px!important;
  border-top:1px solid rgba(255,255,255,.07)!important;
}
.uploadPremiumPage .uploadDuplicateAction[hidden]{display:none!important;}
.uploadPremiumPage .uploadDuplicateLink{
  min-width:150px!important;
  padding:10px 15px!important;
  font-size:9px!important;
  text-decoration:none!important;
}
.uploadPremiumPage .uploadDuplicateLink i{font-style:normal!important;margin-left:5px!important;}


/* ================================================================
   v0.3.5.192 — UPLOAD DUPLICATE INLINE LINK POLISH
   Duplicate state stays compact: warning + direct replay link on one line.
   ================================================================ */
.uploadPremiumPage .uploadStatusMessage{
  min-width:0!important;
  display:inline-flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:10px!important;
}
.uploadPremiumPage .uploadDuplicateLink{
  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important;
  color:#a9e51b!important;
  font-size:10px!important;
  font-weight:800!important;
  line-height:1.2!important;
  letter-spacing:.025em!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  border-bottom:1px solid rgba(169,229,27,.32)!important;
  padding-bottom:1px!important;
  transition:color .16s ease,border-color .16s ease,text-shadow .16s ease!important;
}
.uploadPremiumPage .uploadDuplicateLink[hidden]{display:none!important;}
.uploadPremiumPage .uploadDuplicateLink i{
  font-style:normal!important;
  transition:transform .16s ease!important;
}
.uploadPremiumPage .uploadDuplicateLink:hover{
  color:#c8f462!important;
  border-bottom-color:rgba(200,244,98,.70)!important;
  text-shadow:0 0 10px rgba(169,229,27,.16)!important;
}
.uploadPremiumPage .uploadDuplicateLink:hover i{transform:translateX(3px)!important;}
/* Remove the old second-row duplicate CTA geometry from v191. */
.uploadPremiumPage .uploadDuplicateAction{display:none!important;}
@media(max-width:650px){
  .uploadPremiumPage .uploadStatusMessage{gap:7px!important;}
  .uploadPremiumPage .uploadDuplicateLink{font-size:9.5px!important;}
}


/* ================================================================
   v0.3.5.193 — UPLOAD BACKGROUND + SIDE READABILITY POLISH
   Open the cinematic background, remove the redundant bottom explainer strip,
   and make the right-side explanatory copy comfortable on 2K displays.
   ================================================================ */
.uploadPremiumPage .uploadCinematicPanel::before{
  filter:saturate(.90) contrast(1.06) brightness(.82)!important;
}
.uploadPremiumPage .uploadCinematicPanel::after{
  background:
    linear-gradient(90deg,rgba(3,8,7,.89) 0%,rgba(3,8,7,.80) 31%,rgba(4,9,8,.58) 58%,rgba(4,9,8,.48) 100%),
    linear-gradient(180deg,rgba(3,8,7,.16) 0%,rgba(3,8,7,.38) 62%,rgba(3,8,7,.72) 100%)!important;
}
.uploadPremiumPage .pipeline p{
  color:#a1aca6!important;
  font-size:9.5px!important;
  line-height:1.48!important;
}
.uploadPremiumPage .pipeline strong{
  font-size:10.4px!important;
}
.uploadPremiumPage .uploadTrustStrip{
  display:none!important;
}
@media(max-width:650px){
  .uploadPremiumPage .pipeline p{font-size:9.2px!important;}
}


/* ================================================================
   v0.3.5.194 — BATTLE LOWER REPORT PREMIUM POLISH
   Lower battle report only: clearer hierarchy, richer glass depth and
   semantic gradient outcome text. Hero geometry/data logic stay untouched.
   ================================================================ */

/* PERSONAL RESULT — make the section header and column labels easier to scan
   without changing the established interaction-grid geometry. */
.cinematicReplayPage .cinematicEfficiency{
  border-color:rgba(205,221,213,.135)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 12%),
    linear-gradient(180deg,rgba(14,22,20,.965),rgba(7,13,12,.975))!important;
  box-shadow:0 20px 46px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.032)!important;
}
.cinematicReplayPage .efficiencyHeaderV63{
  background:linear-gradient(180deg,rgba(20,29,26,.94),rgba(11,18,16,.94))!important;
  border-bottom-color:rgba(205,221,213,.115)!important;
}
.cinematicReplayPage .efficiencyHeaderV63 h3{
  color:#f2f6f3!important;
  text-shadow:0 2px 12px rgba(0,0,0,.30)!important;
}
.cinematicReplayPage .efficiencyHeaderV63 p{
  color:#9aa69f!important;
}
.cinematicReplayPage .efficiencyColumnLabelsV63{
  background:linear-gradient(180deg,rgba(17,25,23,.98),rgba(10,16,15,.98))!important;
  border-bottom:1px solid rgba(205,221,213,.105)!important;
  color:#aeb9b3!important;
}
.cinematicReplayPage .efficiencyColumnLabelsV63 .effTechHeader,
.cinematicReplayPage .efficiencyColumnLabelsV63 .effEventHeaders>span{
  color:#aeb9b3!important;
  font-size:10px!important;
  font-weight:720!important;
  letter-spacing:.035em!important;
}
.cinematicReplayPage .efficiencyColumnLabelsV63 .damageHead{color:#cfd7d2!important;}
.cinematicReplayPage .efficiencyColumnLabelsV63 .assistHead{color:#e4bb51!important;}
.cinematicReplayPage .efficiencyColumnLabelsV63 .killHead,
.cinematicReplayPage .efficiencyColumnLabelsV63 .receivedHead{color:#e87b73!important;}
.cinematicReplayPage .efficiencyColumnsV63 .cinematicInteractionGrid.stableAllTargets .interactionRow{
  border-color:rgba(205,221,213,.115)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018),0 6px 16px rgba(0,0,0,.10)!important;
}

/* TEAMS — outcome is the semantic headline. Use a restrained metallic gradient
   rather than a flat neon color; totals get a stronger information hierarchy. */
.cinematicReplayPage .cinematicTeam{
  border-color:rgba(205,221,213,.13)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.015),transparent 12%),
    linear-gradient(180deg,rgba(14,21,20,.975),rgba(8,13,13,.98))!important;
  box-shadow:0 20px 46px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.026)!important;
}
.cinematicReplayPage .cinematicTeamHead{
  background:linear-gradient(180deg,rgba(23,31,29,.92),rgba(12,18,17,.94))!important;
  border-bottom:1px solid rgba(205,221,213,.085)!important;
}
.cinematicReplayPage .cinematicTeamHead strong{
  display:inline-block!important;
  color:transparent!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:none!important;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.32))!important;
}
.cinematicReplayPage .teamWin .cinematicTeamHead strong{
  background-image:linear-gradient(180deg,#d9ff93 0%,#a9e51b 48%,#75ad13 100%)!important;
}
.cinematicReplayPage .teamLoss .cinematicTeamHead strong{
  background-image:linear-gradient(180deg,#ffaaa4 0%,#ef6a60 48%,#b83d37 100%)!important;
}
.cinematicReplayPage .teamDraw .cinematicTeamHead strong{
  background-image:linear-gradient(180deg,#ffe6a0 0%,#e5b63e 50%,#a87c19 100%)!important;
}
.cinematicReplayPage .cinematicTeamTotals{
  gap:22px!important;
}
.cinematicReplayPage .cinematicTeamTotals b{
  color:#f6f8f7!important;
  font-size:25px!important;
  line-height:.92!important;
  font-weight:760!important;
  text-shadow:0 2px 12px rgba(0,0,0,.32)!important;
}
.cinematicReplayPage .cinematicTeamTotals b small{
  margin-top:6px!important;
  color:#8f9b95!important;
  font-size:9px!important;
  font-weight:650!important;
  letter-spacing:.045em!important;
}
.cinematicReplayPage .cinematicTeamColumns{
  color:#a3aea8!important;
  background:linear-gradient(180deg,rgba(18,26,24,.98),rgba(10,16,15,.98))!important;
  border-top-color:rgba(205,221,213,.075)!important;
  border-bottom-color:rgba(205,221,213,.105)!important;
}

/* DETAILED REPORT — same structure, but give the three panels clearer premium
   surfaces, slightly stronger titles and deliberate total states. */
.cinematicReplayPage .approvedReportPanel{
  position:relative!important;
  overflow:hidden!important;
  border-color:rgba(205,221,213,.135)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.015),transparent 11%),
    linear-gradient(180deg,rgba(14,22,20,.975),rgba(8,13,13,.985))!important;
  box-shadow:0 20px 46px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.028)!important;
}
.cinematicReplayPage .approvedReportPanel::after{
  content:""!important;
  position:absolute!important;
  inset:0 0 auto!important;
  height:86px!important;
  pointer-events:none!important;
  opacity:.36!important;
}
.cinematicReplayPage .approvedReportPanel.stats::after{
  background:radial-gradient(ellipse at 12% 0%,rgba(169,229,27,.14),transparent 58%)!important;
}
.cinematicReplayPage .approvedReportPanel.credits::after,
.cinematicReplayPage .approvedReportPanel.xp::after{
  background:radial-gradient(ellipse at 12% 0%,rgba(229,182,62,.13),transparent 58%)!important;
}
.cinematicReplayPage .approvedPanelTitle{
  position:relative!important;
  z-index:1!important;
  background:linear-gradient(180deg,rgba(23,31,29,.96),rgba(13,20,18,.94))!important;
  border-bottom-color:rgba(205,221,213,.105)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.cinematicReplayPage .approvedPanelTitle h3{
  color:#f3f6f4!important;
  font-size:20.5px!important;
  font-weight:720!important;
  letter-spacing:.005em!important;
}
.cinematicReplayPage .approvedPanelTitle>small{
  color:#9ba7a1!important;
  font-size:8.5px!important;
}
.cinematicReplayPage .approvedDetailRow{
  min-height:36px!important;
  border-bottom-color:rgba(205,221,213,.085)!important;
}
.cinematicReplayPage .approvedDetailRow:nth-child(odd){
  background:rgba(255,255,255,.012)!important;
}
.cinematicReplayPage .approvedDetailRow:hover{
  background:linear-gradient(90deg,rgba(255,255,255,.027),rgba(255,255,255,.010))!important;
}
.cinematicReplayPage .approvedDetailRow>div>span{
  color:#c9d2cd!important;
}
.cinematicReplayPage .approvedFinanceTotal,
.cinematicReplayPage .approvedXpTotal{
  min-height:56px!important;
  margin:8px 10px 10px!important;
  border-radius:5px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.026),0 9px 22px rgba(0,0,0,.14)!important;
}
.cinematicReplayPage .approvedFinanceTotal{
  background:linear-gradient(90deg,rgba(88,132,43,.17),rgba(25,39,27,.50))!important;
  border-color:rgba(151,205,64,.23)!important;
}
.cinematicReplayPage .approvedXpTotal{
  background:linear-gradient(90deg,rgba(126,95,31,.18),rgba(43,32,19,.49))!important;
  border-color:rgba(229,182,62,.24)!important;
}
.cinematicReplayPage .approvedFinanceTotal span,
.cinematicReplayPage .approvedXpTotal span{
  color:#d2dad5!important;
  font-weight:720!important;
  letter-spacing:.025em!important;
}
.cinematicReplayPage .approvedFinanceTotal strong{
  font-size:26px!important;
}
.cinematicReplayPage .approvedXpTotal strong{
  font-size:21px!important;
}

@media(max-width:1250px){
  .cinematicReplayPage .cinematicTeamTotals b{font-size:22px!important;}
  .cinematicReplayPage .efficiencyColumnLabelsV63 .effTechHeader,
  .cinematicReplayPage .efficiencyColumnLabelsV63 .effEventHeaders>span{font-size:9px!important;}
}


/* ================================================================
   v0.3.5.195 — BATTLE TEAMS HEADER ORDER RESTORE
   Restore the approved stacked team label/outcome layout from before v194
   while preserving all v194 lower-report premium polish and gradients.
   ================================================================ */
.cinematicReplayPage .cinematicTeamHead > div:first-child > small{
  display:block!important;
}
.cinematicReplayPage .cinematicTeamHead > div:first-child > strong{
  display:block!important;
  margin-top:4px!important;
}


/* ================================================================
   v0.3.5.196 — GLOBAL UI CONSISTENCY PASS
   Final beta-facing interaction polish. No page geometry or data logic changes.
   ================================================================ */

/* Header navigation: one shared active-state language on HOME, /replays,
   player profiles, battle pages and the focused map/player search presets. */
.approvedTopbar .approvedNav a{
  position:relative!important;
  transition:color .16s ease,text-shadow .16s ease,opacity .16s ease!important;
}
.approvedTopbar .approvedNav a::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  right:50%!important;
  bottom:-25px!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#89c91c,#b7ef38)!important;
  box-shadow:0 0 12px rgba(169,229,27,.24)!important;
  opacity:0!important;
  transition:left .16s ease,right .16s ease,opacity .16s ease!important;
  pointer-events:none!important;
}
.approvedTopbar .approvedNav a.active,
.approvedTopbar .approvedNav a[aria-current="page"]{
  color:#f3f6f4!important;
  text-shadow:0 0 16px rgba(169,229,27,.12)!important;
}
.approvedTopbar .approvedNav a.active::after,
.approvedTopbar .approvedNav a[aria-current="page"]::after{
  left:0!important;
  right:0!important;
  opacity:1!important;
}
.approvedTopbar .approvedNav a:hover{color:#fff!important;}

/* Header search: same restrained lime focus as the page-level controls. */
.approvedTopbar .approvedSearchBox{
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease!important;
}
.approvedTopbar .approvedSearchBox:hover{
  border-color:rgba(205,221,213,.23)!important;
  background:rgba(7,13,15,.86)!important;
}
.approvedTopbar .approvedSearchBox:focus-within{
  border-color:rgba(169,229,27,.48)!important;
  box-shadow:0 0 0 1px rgba(169,229,27,.08),0 0 20px rgba(169,229,27,.055)!important;
  background:rgba(7,14,15,.92)!important;
}
.approvedTopbar .approvedSearchBox input::placeholder{color:#77837d!important;}
.approvedTopbar .approvedSearchBox:focus-within input::placeholder{color:#909b95!important;}
.approvedTopbar .approvedSearchBox:focus-within button{color:#d9e0dc!important;}

/* Shared interaction cadence: controls from different pages should feel like
   one component family without changing their approved dimensions. */
.button,
.approvedSignIn,
.approvedAction,
.approvedBackButton,
.homeQuickFilter,
.playerHeroAction,
.cinematicTabs button,
.recordsTabs button,
.uploadPremiumPage .uploadChooseButton,
.uploadPremiumPage .uploadDuplicateLink,
.approvedReplaysMockup .rhCustomSelectButton,
.approvedReplaysMockup .activeFilterChip,
.pagerButtons button{
  transition:border-color .16s ease,background-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease,filter .16s ease,transform .16s ease!important;
}

/* One keyboard-focus treatment site-wide. It is intentionally softer than
   mouse hover and does not modify layout. */
.approvedTopbar .approvedNav a:focus-visible,
.approvedSignIn:focus-visible,
.button:focus-visible,
.approvedAction:focus-visible,
.approvedBackButton:focus-visible,
.homeQuickFilter:focus-visible,
.playerHeroAction:focus-visible,
.cinematicTabs button:focus-visible,
.recordsTabs button:focus-visible,
.uploadPremiumPage .uploadChooseButton:focus-visible,
.uploadPremiumPage .uploadDuplicateLink:focus-visible,
.approvedReplaysMockup .rhCustomSelectButton:focus-visible,
.approvedReplaysMockup .activeFilterChip:focus-visible,
.pagerButtons button:focus-visible,
.playerProfileLink:focus-visible,
.replayCard:focus-visible,
.recordRow:focus-visible{
  outline:1px solid rgba(169,229,27,.72)!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 3px rgba(169,229,27,.075)!important;
}

/* Inputs/selects use the same focus depth regardless of page. */
.toolbar input:focus,
.toolbar select:focus,
.approvedReplaysMockup .approvedReplaysControlBar input:focus,
.approvedReplaysMockup .approvedReplaysControlBar select:focus,
#rhReplaySelectPortal .rhCustomSelectSearch input:focus{
  border-color:rgba(169,229,27,.50)!important;
  box-shadow:0 0 0 1px rgba(169,229,27,.08),0 0 16px rgba(169,229,27,.045)!important;
}

/* Selected tabs/buttons: consistent restrained premium edge. */
.cinematicTabs button.active,
.recordsTabs button.active,
.homeQuickFilter.active{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 18px rgba(169,229,27,.055)!important;
}

/* Disabled actions should look intentionally unavailable, not broken. */
.button:disabled,
button:disabled,
[aria-disabled="true"]{
  opacity:.46!important;
  filter:saturate(.72)!important;
  cursor:not-allowed!important;
}

/* Quiet copy gets one shared readability floor on premium pages. These are
   deliberately narrow selectors so approved hero typography is untouched. */
.replaysDiscoveryPage .catalogPageInfo,
.replaysDiscoveryPage .catalogCount,
.uploadPremiumPage .pipeline p,
.cinematicReplayPage .cinematicTeamColumns,
.cinematicReplayPage .approvedPanelTitle>small{
  text-rendering:optimizeLegibility!important;
  -webkit-font-smoothing:antialiased!important;
}

@media(max-width:1200px){
  .approvedTopbar .approvedNav a::after{bottom:-26px!important;}
}
@media(max-width:850px){
  .approvedTopbar .approvedNav a::after{bottom:-25px!important;}
}


/* ================================================================
   v0.3.5.198 — HOME LATEST REPLAYS READABILITY POLISH
   Improve map name and combat-stat readability in the middle HOME column.
   ================================================================ */
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestBody>small{
  font-size:8.6px!important;
  line-height:1.34!important;
  color:#9aa7a0!important;
  margin:3px 0 5px!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestStats{
  padding:8px 7px!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestStats b{
  font-size:13.4px!important;
  line-height:1.05!important;
  color:#eef3f0!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestStats span{
  font-size:6.3px!important;
  color:#88948e!important;
  letter-spacing:.06em!important;
}
@media(max-width:1500px){
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestBody>small{
    font-size:8.1px!important;
  }
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestStats b{
    font-size:12.7px!important;
  }
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestStats span{
    font-size:5.9px!important;
  }
}


/* ================================================================
   v0.3.5.199 — HOME MICRO LABEL LEGIBILITY BOOST
   Further enlarge the small labels in HOME dashboard middle/right columns.
   ================================================================ */
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestStats span{
  font-size:7px!important;
  color:#96a29c!important;
  letter-spacing:.065em!important;
}
body.homePageActive .approvedHomeDashboard .popularPanel .popularRow small,
body.homePageActive .popularRow small{
  font-size:7.6px!important;
  line-height:1.18!important;
  color:#8f9c96!important;
}
@media(max-width:1500px){
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestStats span{
    font-size:6.6px!important;
  }
  body.homePageActive .approvedHomeDashboard .popularPanel .popularRow small,
  body.homePageActive .popularRow small{
    font-size:7.1px!important;
  }
}

/* ================================================================
   v0.3.5.202 — VIDEO PLATFORM FOUNDATION + ADMIN LINKING
   ================================================================ */
.cardVideoBadge{
  position:absolute!important;z-index:6!important;right:7px!important;bottom:7px!important;
  display:inline-flex!important;align-items:center!important;gap:5px!important;height:22px!important;
  padding:0 8px!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:4px!important;
  background:linear-gradient(180deg,rgba(255,58,58,.96),rgba(196,21,21,.96))!important;
  color:#fff!important;font-size:7px!important;font-weight:900!important;letter-spacing:.05em!important;text-transform:uppercase!important;
  box-shadow:0 10px 20px rgba(0,0,0,.34),0 0 16px rgba(255,47,47,.20)!important;
}
.cardVideoBadge i{font-style:normal!important;color:#ffffff!important;font-size:8px!important}
.approvedVideoAction{border-color:rgba(233,86,72,.30)!important;background:linear-gradient(180deg,rgba(74,26,22,.80),rgba(18,19,18,.84))!important}
.approvedVideoAction:hover{border-color:rgba(255,106,92,.55)!important;box-shadow:0 0 18px rgba(214,58,48,.10)!important}
.approvedPlayGlyph{font-style:normal;color:#ff6d61;font-size:15px;line-height:1}

.videoHubShell,.videoAdminShell{width:min(1280px,calc(100% - 44px));margin:18px auto 70px}
.videoHubHero{position:relative;height:300px;overflow:hidden;border:1px solid rgba(207,225,215,.14);border-radius:7px;background:url('/assets/replays_hero_forest_battle_v174.webp') center 48%/cover no-repeat;box-shadow:0 24px 70px rgba(0,0,0,.24)}
.videoHubHeroShade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,9,9,.96) 0%,rgba(4,9,9,.78) 40%,rgba(4,9,9,.22) 72%,rgba(4,9,9,.34) 100%),linear-gradient(180deg,rgba(0,0,0,.08),rgba(3,8,8,.48))}
.videoHubHeroCopy{position:absolute;z-index:2;left:36px;top:44px;width:min(620px,58%)}
.videoHubHeroCopy .eyebrow,.videoAdminHead .eyebrow,.videoDetailInfo .eyebrow{font-size:9px;color:#b6c1bb;letter-spacing:.18em}
.videoHubHeroCopy h1{margin:13px 0 10px;font-family:var(--approved-font);font-size:48px;line-height:.92;letter-spacing:-.035em;color:#f3f6f4}
.videoHubHeroCopy p{margin:0;color:#aeb8b3;font-size:12px;line-height:1.55;max-width:520px}
.videoHubToolbar{min-height:68px;margin-top:12px;padding:10px 12px;display:grid;grid-template-columns:auto minmax(260px,420px) auto;align-items:center;gap:14px;border:1px solid rgba(207,225,215,.12);background:linear-gradient(145deg,rgba(14,23,21,.78),rgba(7,13,12,.82));border-radius:7px}
.videoHubToolbar>div strong{display:block;font-family:var(--approved-font);font-size:15px}.videoHubToolbar>div span{display:block;margin-top:2px;font-size:9px;color:#7f8b85}
.videoHubToolbar label{height:38px;display:flex;align-items:center;gap:8px;border:1px solid rgba(207,225,215,.13);background:#07100e;padding:0 14px;border-radius:5px}
.videoHubToolbar label .uiMaskIcon{width:15px;height:15px;color:#7f8b85}.videoHubToolbar input{width:100%;border:0;outline:0;background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));color:#e5ece8;font-size:10px}
.videoAdminShortcut{justify-self:end;color:#a9e51b;text-decoration:none;font-size:9px;font-weight:900;text-transform:uppercase}
.videoHubGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:14px}
.videoHubCard{display:block;overflow:hidden;text-decoration:none;color:#eef3f0;border:1px solid rgba(207,225,215,.12);border-radius:7px;background:linear-gradient(145deg,#101816,#080e0d);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.videoHubCard:hover{transform:translateY(-3px);border-color:rgba(169,229,27,.30);box-shadow:0 22px 50px rgba(0,0,0,.28)}
.videoHubThumb{position:relative;aspect-ratio:16/9;background:#050909;overflow:hidden}.videoHubThumb img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) contrast(1.03) brightness(.92);transition:transform .25s ease,filter .25s ease}.videoHubCard:hover .videoHubThumb img{transform:scale(1.025);filter:saturate(1.02) contrast(1.04) brightness(.99)}
.videoHubThumb:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(4,9,8,.72) 100%);pointer-events:none}.videoPlayButton{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:38px;display:grid;place-items:center;border-radius:9px;background:rgba(209,40,32,.90);color:#fff;font-size:16px;box-shadow:0 8px 24px rgba(0,0,0,.38)}
.videoFeaturedBadge{position:absolute;z-index:3;left:9px;top:9px;padding:5px 8px;border:1px solid rgba(232,184,73,.36);border-radius:4px;background:rgba(31,25,12,.88);color:#f0c85c;font-size:9px;letter-spacing:.05em}
.videoHubCardBody{padding:12px}.videoHubCardBody>strong{display:block;min-height:38px;font-size:15px;line-height:1.28}.videoHubCardBody>small{display:block;margin-top:5px;color:#8d9993;font-size:9px}.videoHubMeta{margin-top:11px;padding-top:9px;border-top:1px solid rgba(207,225,215,.08);display:flex;align-items:center;justify-content:space-between}.videoHubMeta span{color:#e87369;font-size:9px;font-weight:800}.videoHubMeta b{font-size:9px;color:#a4afa9}.videoHubEmpty{grid-column:1/-1;padding:46px 20px;border:1px solid rgba(207,225,215,.10);border-radius:7px;color:#7f8b85;text-align:center;background:rgba(7,13,12,.55)}

.videoDetailTop{display:grid;grid-template-columns:minmax(0,1.78fr) minmax(290px,.72fr);gap:12px}.videoPlayerFrame{aspect-ratio:16/9;overflow:hidden;border:1px solid rgba(207,225,215,.13);border-radius:7px;background:#000;box-shadow:0 24px 70px rgba(0,0,0,.30)}.videoPlayerFrame iframe{width:100%;height:100%;border:0;display:block}.videoLinkedRail{min-height:100%;border:1px solid rgba(207,225,215,.12);border-radius:7px;background:linear-gradient(145deg,rgba(14,23,21,.92),rgba(6,12,11,.94));overflow:hidden}.videoLinkedTitle{height:47px;padding:0 13px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(207,225,215,.09)}.videoLinkedTitle span{font-size:10.5px;font-weight:900;letter-spacing:.07em}.videoLinkedTitle b{color:#a9e51b;font-size:11px}.videoLinkedList{display:grid}.videoReplayCompact{min-height:68px;padding:10px 11px;display:grid;grid-template-columns:minmax(0,1fr) auto 12px;align-items:center;gap:9px;color:#e8eeea;text-decoration:none;border-bottom:1px solid rgba(207,225,215,.07);transition:background .15s}.videoReplayCompact:hover{background:rgba(169,229,27,.035)}.videoReplayCompact>div:first-child strong{display:block;font-size:10px}.videoReplayCompact>div:first-child span{display:block;margin-top:3px;color:#84908a;font-size:7.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.videoReplayKpis{display:flex;gap:10px}.videoReplayKpis b{font-size:12.5px;text-align:right}.videoReplayKpis small{display:block;font-size:5px;color:#737f79;margin-top:2px}.videoReplayCompact>i{font-style:normal;color:#a9e51b}.videoLinkedEmpty{padding:25px 13px;color:#76827c;font-size:9px}
.videoDetailInfo{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 18px;border:1px solid rgba(207,225,215,.11);border-radius:7px;background:linear-gradient(145deg,rgba(14,23,21,.78),rgba(7,13,12,.82))}.videoDetailInfo h1{margin:7px 0 3px;font-size:25px;line-height:1.16}.videoDetailInfo p{margin:0;color:#89958f;font-size:10px}.videoYoutubeExternal{height:40px;padding:0 15px;display:inline-flex;align-items:center;border:1px solid rgba(231,88,75,.34);border-radius:5px;color:#f1e9e7;text-decoration:none;font-size:10.5px;font-weight:900;background:rgba(75,23,20,.24);white-space:nowrap}.videoYoutubeExternal:hover{border-color:rgba(255,105,90,.56)}
.videoReplaySection{margin-top:14px}.videoSectionHead{display:flex;align-items:end;justify-content:space-between;margin-bottom:9px}.videoSectionHead strong{font-size:12px}.videoSectionHead span{font-size:9px;color:#7e8a84}.videoReplayGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.videoReplayCard{padding:13px;border:1px solid rgba(207,225,215,.11);border-radius:6px;background:linear-gradient(145deg,#0e1513,#080e0d);color:#e8eeea;text-decoration:none}.videoReplayCard:hover{border-color:rgba(169,229,27,.25)}.videoReplayCardTop{display:flex;justify-content:space-between;gap:8px}.videoReplayCardTop strong{font-size:12px}.videoReplayCardTop span{font-size:9px;color:#8b9791}.videoReplayCard p{margin:4px 0 11px;color:#84908a;font-size:8px}.videoReplayCard>div:last-child{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;border-top:1px solid rgba(207,225,215,.08);padding-top:9px}.videoReplayCard>div:last-child b{font-size:12px}.videoReplayCard>div:last-child small{display:block;margin-top:2px;font-size:5.5px;color:#77837d}

.videoAdminHead{min-height:145px;padding:24px 27px;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;border:1px solid rgba(207,225,215,.12);border-radius:7px;background:linear-gradient(110deg,rgba(6,12,11,.96),rgba(14,25,21,.88)),url('/assets/replays_hero_forest_battle_v174.webp') center/cover no-repeat}.videoAdminHead h1{margin:10px 0 6px;font-size:34px}.videoAdminHead p{margin:0;max-width:670px;color:#929e98;font-size:11.5px;line-height:1.55}.videoAdminHead>a{color:#a9e51b;text-decoration:none;font-size:9px}.videoAdminGrid{display:grid;grid-template-columns:minmax(340px,.74fr) minmax(0,1.26fr);gap:12px;margin-top:12px}.videoAdminForm,.videoAdminPicker,.videoAdminLibrary{border:1px solid rgba(207,225,215,.11);border-radius:7px;background:linear-gradient(145deg,rgba(14,23,21,.88),rgba(7,13,12,.90))}.videoAdminForm{padding:15px;display:grid;gap:12px}.videoAdminForm label{display:grid;gap:5px;color:#97a39d;font-size:9px;font-weight:850;letter-spacing:.07em}.videoAdminForm label>small{font-weight:500;color:#68746e;letter-spacing:0}.videoAdminForm input,.videoAdminForm select,.videoAdminPicker input{height:39px;border:1px solid rgba(207,225,215,.13);background:#07100e;color:#e7eeea;padding:0 10px;outline:0;border-radius:4px;font-size:10px}.videoAdminForm input:focus,.videoAdminForm select:focus,.videoAdminPicker input:focus{border-color:rgba(169,229,27,.42)}.videoAdminFormRow{display:grid;grid-template-columns:1fr 1fr;gap:10px}.videoAdminCheck{display:flex!important;align-items:center!important;gap:8px!important;padding-top:13px}.videoAdminCheck input{width:15px!important;height:15px!important;accent-color:#a9e51b}.videoAdminCheck span{font-size:9px;color:#b3beb8}.videoAdminToken{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}.videoAdminToken button,.videoAdminPickerHead button{height:39px;border:1px solid rgba(169,229,27,.30);background:#101a12;color:#bfe957;padding:0 12px;font-size:9px;font-weight:850;border-radius:4px;cursor:pointer}.videoAdminSubmit{height:44px;border:1px solid #8ec51c;background:linear-gradient(#7daf17,#507708);color:#fff;font-size:10.5px;font-weight:900;letter-spacing:.05em;border-radius:4px;cursor:pointer}.videoAdminMessage{min-height:20px;color:#9fce45;font-size:8px}.videoAdminMessage.error{color:#ef7068}.videoAdminPicker{overflow:hidden}.videoAdminPickerHead{min-height:68px;padding:11px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(207,225,215,.08)}.videoAdminPickerHead>div strong{display:block;font-size:10px}.videoAdminPickerHead>div span{display:block;margin-top:2px;font-size:9px;color:#78847e}.videoAdminPickerHead label{display:grid;grid-template-columns:220px auto;gap:6px}.videoAdminReplayChoices{padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:7px;max-height:390px;overflow:auto}.videoAdminReplayChoice{min-height:52px;padding:8px;display:grid;grid-template-columns:18px 1fr;align-items:center;gap:7px;border:1px solid rgba(207,225,215,.08);border-radius:4px;background:#08110f;cursor:pointer}.videoAdminReplayChoice:hover{border-color:rgba(169,229,27,.22)}.videoAdminReplayChoice input{width:14px;height:14px;accent-color:#a9e51b}.videoAdminReplayChoice strong{display:block;font-size:9px}.videoAdminReplayChoice small{display:block;margin-top:3px;color:#77837d;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.videoAdminLibrary{margin-top:12px;padding:12px}.videoAdminExisting{min-height:82px;display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px;border-top:1px solid rgba(207,225,215,.07)}.videoAdminExisting>img{width:130px;aspect-ratio:16/9;object-fit:cover;border-radius:4px}.videoAdminExisting>div>strong{display:block;font-size:10px}.videoAdminExisting>div>small{display:block;margin-top:3px;color:#7e8a84;font-size:7px}.videoAdminReplayChips{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}.videoAdminReplayChips button{border:1px solid rgba(207,225,215,.10);background:#09110f;color:#9ca8a2;padding:4px 6px;font-size:7px;border-radius:3px;cursor:pointer}.videoAdminExistingActions{display:flex;gap:7px!important;align-items:center}.videoAdminExistingActions a,.videoAdminExistingActions button{border:1px solid rgba(207,225,215,.11);background:#0a1210;color:#a9e51b;padding:7px 9px;font-size:9px;text-decoration:none;border-radius:3px;cursor:pointer}.videoAdminExistingActions button{color:#ef7169;border-color:rgba(239,113,105,.18)}

@media(max-width:980px){.videoHubGrid{grid-template-columns:repeat(2,1fr)}.videoDetailTop{grid-template-columns:1fr}.videoAdminGrid{grid-template-columns:1fr}.videoAdminReplayChoices{grid-template-columns:1fr}.videoHubToolbar{grid-template-columns:1fr}.videoAdminShortcut{justify-self:start}.videoReplayGrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.videoHubShell,.videoAdminShell{width:calc(100% - 24px)}.videoHubHero{height:245px}.videoHubHeroCopy{left:20px;top:32px;width:calc(100% - 40px)}.videoHubHeroCopy h1{font-size:35px}.videoHubGrid{grid-template-columns:1fr}.videoReplayGrid{grid-template-columns:1fr}.videoDetailInfo{align-items:flex-start;flex-direction:column}.videoAdminExisting{grid-template-columns:90px 1fr}.videoAdminExisting>img{width:90px}.videoAdminExistingActions{grid-column:2}.videoAdminPickerHead{align-items:flex-start;flex-direction:column}.videoAdminPickerHead label{grid-template-columns:1fr auto;width:100%}.videoAdminFormRow{grid-template-columns:1fr}.videoAdminHead{flex-direction:column}.videoAdminToken{grid-template-columns:1fr}}

/* ========================================================================== */
/* v0.3.5.204 — VIDEO HUB APPROVED MOCKUP IMPLEMENTATION                     */
/* Approved reference: FERMANIHUB_VIDEO_HUB_FINAL_APPROVED_MOCKUP.png         */
/* Scope: /videos only. Existing video detail/admin/backend remain intact.    */
/* ========================================================================== */
body.videosPageActive{background:radial-gradient(circle at 56% -8%,rgba(71,92,64,.12),transparent 34%),#050908!important}
.videoHubPageApproved{
  width:min(1580px,calc(100% - 42px));
  margin:12px auto 58px;
}
.videoHubHeroApproved{
  position:relative;
  min-height:392px;
  overflow:hidden;
  border:1px solid rgba(214,230,220,.12);
  border-radius:7px;
  background-image:url('/assets/video_hub_hero_approved_bg.webp');
  background-size:cover;
  background-position:center 49%;
  box-shadow:0 24px 76px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.015);
  isolation:isolate;
}
.videoHubHeroApproved:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg,rgba(3,7,8,.92) 0%,rgba(4,9,9,.70) 21%,rgba(4,9,9,.22) 47%,rgba(4,8,8,.08) 69%,rgba(4,8,8,.24) 100%),
    linear-gradient(180deg,rgba(255,205,91,.05),rgba(2,7,7,.18) 60%,rgba(2,7,7,.58) 100%);
}
.videoHubHeroApproved:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,205,91,.03),transparent 28%,rgba(0,0,0,.12));
  mix-blend-mode:screen;
}
.videoHubHeroShadeApproved{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 42% 62% at 41% 56%,rgba(255,196,82,.24),rgba(255,196,82,.08) 40%,transparent 68%)}
.videoHubHeroGlowApproved{position:absolute;z-index:1;left:25%;top:39%;width:310px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,205,96,.24),rgba(255,205,96,.08) 36%,transparent 72%);filter:blur(18px);pointer-events:none}
.videoHubHeroCopyApproved{
  position:relative;
  z-index:3;
  width:min(640px,48%);
  padding:60px 0 0 34px;
}
.videoHubHeroCopyApproved .eyebrow{font-size:8px!important;color:#a9e51b!important;letter-spacing:.18em!important;font-weight:900!important}
.videoHubHeroCopyApproved .eyebrow:before{width:28px!important;height:2px!important;background:#a9e51b!important}
.videoHubHeroCopyApproved h1{
  margin:15px 0 14px;
  font-family:var(--approved-font);
  font-size:50px;
  line-height:.92;
  letter-spacing:-.035em;
  color:#f5f7f6;
  text-transform:uppercase;
  text-shadow:0 6px 28px rgba(0,0,0,.42);
}
.videoHubHeroCopyApproved h1 em{font-style:normal;color:#a9e51b;text-shadow:0 0 20px rgba(169,229,27,.18)}
.videoHubHeroCopyApproved p{max-width:500px;margin:0;color:#d0d7d3;font-size:12.5px;line-height:1.6;text-shadow:0 2px 8px rgba(0,0,0,.44)}
.videoHubCount{display:grid;grid-template-columns:42px auto;grid-template-rows:auto auto;width:max-content;column-gap:11px;align-items:center;margin-top:27px;padding:8px 14px 8px 9px;border:1px solid rgba(169,229,27,.34);border-radius:7px;background:rgba(5,12,10,.56);backdrop-filter:blur(8px)}
.videoCountPlay{grid-row:1/3;width:37px;height:37px;display:grid;place-items:center;border:1px solid rgba(169,229,27,.68);border-radius:50%;color:#a9e51b;font-size:12px;padding-left:2px;box-shadow:0 0 18px rgba(169,229,27,.05)}
.videoHubCount strong{font-family:var(--approved-font);font-size:19px;line-height:1;color:#f4f7f5}
.videoHubCount small{margin-top:3px;color:#919e97;font-size:7.5px;text-transform:uppercase;letter-spacing:.05em}
.videoHeroSideApproved{
  position:absolute;
  z-index:4;
  top:28px;
  right:28px;
  width:330px;
  display:grid;
  gap:12px;
}
.videoFeaturedCardApproved{
  display:block;
  overflow:hidden;
  text-decoration:none;
  color:#eef4f0;
  border:1px solid rgba(169,229,27,.48);
  border-radius:7px;
  background:linear-gradient(145deg,rgba(11,18,16,.96),rgba(6,11,10,.96));
  box-shadow:0 18px 45px rgba(0,0,0,.26),0 0 22px rgba(169,229,27,.035);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.videoFeaturedCardApproved:hover{transform:translateY(-2px);border-color:rgba(169,229,27,.72);box-shadow:0 22px 54px rgba(0,0,0,.34),0 0 30px rgba(169,229,27,.07)}
.videoFeaturedLabel{height:31px;padding:0 14px;display:flex;align-items:center;gap:7px;color:#a9e51b;font-size:9px;font-weight:950;letter-spacing:.04em;border-bottom:1px solid rgba(169,229,27,.12)}
.videoFeaturedLabel span{color:#e3bd4c}
.videoFeaturedThumb{position:relative;aspect-ratio:16/8.6;overflow:hidden;background:#050908}
.videoFeaturedThumb img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.09) contrast(1.06) brightness(1.02);transition:transform .25s ease}
.videoFeaturedCardApproved:hover .videoFeaturedThumb img{transform:scale(1.025)}
.videoFeaturedThumb:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(4,9,8,.04) 55%,rgba(4,9,8,.58) 100%);pointer-events:none}
.videoFeaturedCopy{padding:9px 11px 11px}
.videoFeaturedCopy strong{display:block;font-family:var(--approved-font);font-size:12.5px;line-height:1.18;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.videoFeaturedCopy span{display:block;margin-top:5px;color:#9aa69f;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.videoFeaturedEmpty{min-height:190px;padding:18px;border:1px solid rgba(169,229,27,.30);border-radius:7px;background:rgba(7,13,12,.86);display:flex;flex-direction:column;justify-content:center;gap:8px}
.videoFeaturedEmpty strong{color:#a9e51b;font-size:10px}.videoFeaturedEmpty span{color:#84918a;font-size:8.5px;line-height:1.5}
.videoPromoteCard{
  min-height:72px;
  width:100%;
  display:grid;
  grid-template-columns:42px 1fr 16px;
  align-items:center;
  gap:12px;
  padding:9px 12px;
  border:1px solid rgba(217,187,69,.22);
  border-radius:7px;
  color:#edf2ef;
  text-align:left;
  background:linear-gradient(145deg,rgba(12,20,18,.90),rgba(6,11,10,.92));
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:border-color .18s ease,transform .18s ease,background .18s ease;
}
.videoPromoteCard:hover{transform:translateY(-1px);border-color:rgba(169,229,27,.37);background:linear-gradient(145deg,rgba(15,25,21,.96),rgba(7,13,11,.96))}
.videoPromoteIcon{width:38px;height:38px;display:grid;place-items:center;color:#a9e51b;font-size:25px;font-style:normal;font-weight:950;transform:rotate(-24deg)}
.videoPromoteCard span{min-width:0}.videoPromoteCard strong{display:block;color:#a9e51b;font-family:var(--approved-font);font-size:9.2px;letter-spacing:.02em}.videoPromoteCard small{display:block;margin-top:4px;color:#99a59f;font-size:7.3px;line-height:1.35}.videoPromoteCard>b{color:#a9e51b;font-size:16px}
.videoHubToolbarApproved{
  min-height:58px;
  margin-top:10px;
  padding:8px 10px;
  display:grid;
  grid-template-columns:minmax(300px,1.15fr) auto 180px;
  align-items:center;
  gap:11px;
  border:1px solid rgba(213,229,219,.12);
  border-radius:7px;
  background:linear-gradient(145deg,rgba(11,18,17,.93),rgba(6,12,11,.94));
}
.videoHubSearchApproved{height:40px;display:flex;align-items:center;gap:9px;padding:0 14px;border:1px solid rgba(213,229,219,.14);border-radius:5px;background:#07100e;transition:border-color .16s ease,box-shadow .16s ease}
.videoHubSearchApproved:focus-within{border-color:rgba(169,229,27,.45);box-shadow:0 0 0 2px rgba(169,229,27,.04)}
.videoHubSearchApproved .uiMaskIcon{width:16px;height:16px;color:#8b9791}.videoHubSearchApproved input{width:100%;border:0;outline:0;background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));color:#ecf1ee;font-size:10px}.videoHubSearchApproved input::placeholder{color:#77847e}
.videoHubModes{height:40px;display:flex;gap:7px}.videoHubModes button{min-width:96px;height:40px;padding:0 15px;border:1px solid rgba(207,225,215,.09);border-radius:5px;background:#0c1312;color:#bec8c2;font-family:var(--approved-font);font-size:10.5px;font-weight:700;cursor:pointer;transition:all .16s ease}.videoHubModes button:hover{border-color:rgba(169,229,27,.25);color:#e9efeb}.videoHubModes button.active{color:#fff;border-color:rgba(169,229,27,.50);background:linear-gradient(#86bd19,#577f0d);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 18px rgba(169,229,27,.05)}
.videoHubSort{height:40px;padding:0 12px;border:1px solid rgba(207,225,215,.14);border-radius:5px;background:#08100f;color:#dbe2de;font-size:10.5px;outline:0;cursor:pointer}.videoHubSort:focus{border-color:rgba(169,229,27,.42)}
.videoHubGridApproved{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-top:11px}
.videoHubCardApproved{
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(209,227,216,.13);
  border-radius:7px;
  background:linear-gradient(150deg,#0f1715,#080e0d);
  box-shadow:0 15px 42px rgba(0,0,0,.16);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.videoHubCardApproved:hover{transform:translateY(-3px);border-color:rgba(169,229,27,.30);box-shadow:0 22px 54px rgba(0,0,0,.27),0 0 22px rgba(169,229,27,.025)}
.videoHubThumbApproved{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#050908;text-decoration:none}
.videoHubThumbApproved>img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(1.05) contrast(1.045) brightness(.98);transition:transform .25s ease,filter .25s ease}.videoHubCardApproved:hover .videoHubThumbApproved>img{transform:scale(1.025);filter:saturate(1.12) contrast(1.05) brightness(1.03)}
.videoHubThumbApproved:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(3,8,8,.03),transparent 53%,rgba(3,8,8,.54) 100%);pointer-events:none}
.videoYoutubeBadge{position:absolute;z-index:4;left:8px;top:8px;height:21px;padding:0 7px 0 5px;display:inline-flex;align-items:center;gap:5px;border-radius:4px;border:1px solid rgba(255,255,255,.09);background:rgba(9,13,13,.82);color:#f3f4f4;backdrop-filter:blur(7px);box-shadow:0 4px 13px rgba(0,0,0,.25)}
.videoYoutubeBadge b{font-size:9px;line-height:1;letter-spacing:.035em}.videoYoutubeBadgeIcon{position:relative;width:17px;height:11px;border-radius:3px;background:#ff2028;box-shadow:0 0 8px rgba(255,32,40,.18)}.videoYoutubeBadgeIcon:after{content:"";position:absolute;left:7px;top:3px;border-left:5px solid #fff;border-top:2.5px solid transparent;border-bottom:2.5px solid transparent}
.videoYoutubePlay{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:53px;height:37px;border-radius:9px;background:#ff1724;display:grid;place-items:center;box-shadow:0 9px 24px rgba(0,0,0,.38),0 0 16px rgba(255,23,36,.18);transition:transform .18s ease,filter .18s ease}.videoYoutubePlay i{display:block;margin-left:3px;width:0;height:0;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}.videoHubThumbApproved:hover .videoYoutubePlay,.videoFeaturedCardApproved:hover .videoYoutubePlay{transform:translate(-50%,-50%) scale(1.07);filter:brightness(1.08)}.videoYoutubePlay.compact{width:48px;height:33px;border-radius:8px}.videoYoutubePlay.compact i{border-left-width:11px;border-top-width:7px;border-bottom-width:7px}
.videoDurationBadge{position:absolute;z-index:4;right:7px;bottom:7px;padding:3px 5px;border-radius:3px;background:rgba(2,5,5,.86);color:#fff;font-size:9px;font-weight:850;box-shadow:0 3px 10px rgba(0,0,0,.30)}
.videoHubCardBodyApproved{padding:10px 10px 9px}.videoHubCardBodyApproved>strong{display:-webkit-box;min-height:30px;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-family:var(--approved-font);font-size:10.8px;line-height:1.28;color:#f0f4f1;text-transform:uppercase}.videoReplayMetaLine{min-width:0;margin-top:6px;display:flex;align-items:center;gap:4px;color:#8e9b94;font-size:7.7px;white-space:nowrap;overflow:hidden}.videoReplayMetaLine b{color:#a9e51b;font-weight:800}.videoReplayMetaLine span{overflow:hidden;text-overflow:ellipsis}.videoReplayMetaLine span:nth-of-type(1),.videoReplayMetaLine span:nth-of-type(3){flex:0 0 auto;color:#66726c}.videoReplayMetaLine span:nth-of-type(2){max-width:30%}.videoReplayMetaLine span:nth-of-type(4){max-width:31%}
.videoCardBottomRow{margin-top:8px;padding-top:8px;border-top:1px solid rgba(207,225,215,.07);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}.videoCardBottomRow>small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7f8c85;font-size:6.8px}.videoCardActions{display:flex;gap:6px}.videoWatchAction,.videoReplayAction{height:27px;padding:0 10px;display:inline-flex;align-items:center;gap:5px;border-radius:4px;text-decoration:none;font-size:8.5px;font-weight:850;white-space:nowrap;transition:filter .15s,border-color .15s,color .15s}.videoWatchAction{color:#fff;border:1px solid #8fc61c;background:linear-gradient(#7faf16,#507909)}.videoWatchAction:hover{filter:brightness(1.11)}.videoWatchAction i{width:0;height:0;border-left:5px solid #fff;border-top:3px solid transparent;border-bottom:3px solid transparent}.videoReplayAction{color:#dfe6e2;border:1px solid rgba(213,181,65,.32);background:rgba(62,48,13,.08)}.videoReplayAction:hover{border-color:rgba(213,181,65,.52);color:#f4e4a9}
.videoPagination{margin:17px auto 0;display:flex;justify-content:center;gap:4px}.videoPagination button,.videoPageGap{min-width:35px;height:34px;padding:0 10px;display:grid;place-items:center;border:1px solid rgba(207,225,215,.11);border-radius:4px;background:#09100f;color:#b2bdb7;font-size:9px}.videoPagination button{cursor:pointer}.videoPagination button:hover:not(:disabled){border-color:rgba(169,229,27,.30);color:#f0f4f1}.videoPagination button.active{color:#fff;background:linear-gradient(#82b719,#557e0d);border-color:#91c920}.videoPagination button:disabled{opacity:.35;cursor:default}.videoPageGap{border-color:transparent;background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));color:#65716b}
.videoHubPageApproved .videoHubEmpty{min-height:180px;display:flex;flex-direction:column;justify-content:center;gap:8px}.videoHubPageApproved .videoHubEmpty strong{font-family:var(--approved-font);font-size:15px;color:#dce3df}.videoHubPageApproved .videoHubEmpty span{font-size:10.5px;color:#78857f}
@media(max-width:1500px){
  .videoHubPageApproved{width:min(1380px,calc(100% - 34px))}
  .videoHubHeroApproved{min-height:370px}
  .videoHubHeroCopyApproved{padding-top:54px;width:min(590px,47%)}
  .videoHubHeroCopyApproved h1{font-size:46px}
  .videoHeroSideApproved{width:305px;right:22px;top:23px}
  .videoHubGridApproved{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1100px){
  .videoHubHeroApproved{min-height:390px}
  .videoHubHeroCopyApproved{width:58%;padding-left:24px}
  .videoHubHeroCopyApproved h1{font-size:40px}
  .videoHeroSideApproved{width:290px;right:18px}
  .videoHubToolbarApproved{grid-template-columns:1fr;gap:8px}.videoHubModes{justify-content:flex-start}.videoHubSort{width:180px}
  .videoHubGridApproved{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .videoHubPageApproved{width:calc(100% - 22px);margin-top:8px}
  .videoHubHeroApproved{min-height:540px;background-position:60% 50%}
  .videoHubHeroApproved:before{background:linear-gradient(180deg,rgba(3,8,8,.86),rgba(3,8,8,.60) 45%,rgba(3,8,8,.88) 100%)}
  .videoHubHeroCopyApproved{width:calc(100% - 30px);padding:28px 0 0 18px}
  .videoHubHeroCopyApproved h1{font-size:35px}.videoHubHeroCopyApproved p{font-size:11px}
  .videoHeroSideApproved{left:18px;right:18px;top:auto;bottom:18px;width:auto}.videoPromoteCard{display:none}
  .videoHubModes{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.videoHubModes button{min-width:0;padding:0 8px}
  .videoHubSort{width:100%}
  .videoHubGridApproved{grid-template-columns:1fr}
  .videoCardBottomRow{grid-template-columns:1fr}.videoCardActions{justify-content:flex-end}
}

/* =====================================================================
   v0.3.5.206 — VIDEO HUB APPROVED MOCKUP PARITY PASS
   Frontend-only refinement of /videos. The approved hero render is shown
   clean: no darkening/tint overlays are allowed over the source artwork.
   ===================================================================== */
body.videosPageActive{
  background:radial-gradient(circle at 50% -12%,rgba(73,94,66,.10),transparent 30%),#050908!important;
}
.videoHubPageApproved{
  width:min(1280px,calc(100vw - 40px))!important;
  max-width:1280px!important;
  margin:14px auto 58px!important;
}
.videoHubHeroApproved{
  min-height:360px!important;
  height:360px!important;
  background-image:url('/assets/video_hub_hero_approved_bg.webp')!important;
  background-repeat:no-repeat!important;
  /* v0.3.5.208 composition tune: enlarge the source art slightly and shift the crop
     so the tank sits lower and closer to the visual center instead of being buried
     under the NEW VIDEO rail. */
  background-size:125% auto!important;
  background-position:96% 28%!important;
  border-color:rgba(214,230,220,.16)!important;
  box-shadow:0 26px 76px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
/* User-approved render must remain untouched and undimmed. */
.videoHubHeroApproved:before,
.videoHubHeroApproved:after{content:none!important;display:none!important;background:none!important}
.videoHubHeroShadeApproved,
.videoHubHeroGlowApproved{display:none!important;background:none!important;filter:none!important}
.videoHubHeroCopyApproved{
  width:520px!important;
  max-width:47%!important;
  padding:58px 0 0 30px!important;
}
.videoHubHeroCopyApproved .eyebrow{font-size:8.3px!important;letter-spacing:.17em!important}
.videoHubHeroCopyApproved h1{
  margin:14px 0 13px!important;
  font-size:44px!important;
  line-height:.94!important;
  letter-spacing:-.035em!important;
  text-shadow:0 3px 4px rgba(0,0,0,.78),0 10px 28px rgba(0,0,0,.34)!important;
}
.videoHubHeroCopyApproved h1 em{text-shadow:0 2px 4px rgba(0,0,0,.78),0 0 19px rgba(169,229,27,.15)!important}
.videoHubHeroCopyApproved p{
  max-width:455px!important;
  color:#f0f3f1!important;
  font-size:12px!important;
  line-height:1.55!important;
  text-shadow:0 2px 4px rgba(0,0,0,.88),0 5px 14px rgba(0,0,0,.45)!important;
}
.videoHubCount{
  margin-top:22px!important;
  padding:7px 12px 7px 8px!important;
  column-gap:10px!important;
  border-color:rgba(169,229,27,.46)!important;
  background:rgba(5,12,10,.36)!important;
  backdrop-filter:blur(5px)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.20)!important;
}
.videoCountPlay{width:36px!important;height:36px!important}
.videoHubCount strong{font-size:19px!important;text-shadow:0 2px 6px rgba(0,0,0,.65)!important}
.videoHubCount small{font-size:7.4px!important;color:#c0c8c4!important;text-shadow:0 2px 5px rgba(0,0,0,.65)!important}
.videoHeroSideApproved{
  top:18px!important;
  right:16px!important;
  width:258px!important;
  gap:8px!important;
}
.videoFeaturedCardApproved{
  border-color:rgba(169,229,27,.60)!important;
  background:linear-gradient(145deg,rgba(10,17,15,.95),rgba(5,10,9,.96))!important;
  box-shadow:0 18px 42px rgba(0,0,0,.30),0 0 20px rgba(169,229,27,.035)!important;
}
.videoFeaturedLabel{height:28px!important;padding:0 10px!important;font-size:8.2px!important}
.videoFeaturedThumb{aspect-ratio:16/8.45!important}
.videoFeaturedCopy{padding:8px 10px 9px!important}
.videoFeaturedCopy strong{font-size:11.6px!important}
.videoFeaturedCopy span{margin-top:4px!important;font-size:7.7px!important}
.videoFeaturedEmpty{min-height:192px!important}
.videoPromoteCard{
  min-height:66px!important;
  grid-template-columns:38px 1fr 14px!important;
  gap:9px!important;
  padding:8px 10px!important;
  border-color:rgba(217,187,69,.25)!important;
  background:linear-gradient(145deg,rgba(11,19,17,.91),rgba(5,11,9,.93))!important;
}
.videoPromoteIcon{width:34px!important;height:34px!important;transform:none!important;font-size:0!important;color:#a9e51b!important}
.videoPromoteIcon .uiMaskIcon{width:31px!important;height:31px!important;color:#a9e51b!important;filter:drop-shadow(0 0 9px rgba(169,229,27,.10))}
.videoPromoteCard strong{font-size:8.8px!important}
.videoPromoteCard small{margin-top:3px!important;font-size:7px!important;line-height:1.32!important}
.videoPromoteCard>b{font-size:15px!important}
.videoHubToolbarApproved{
  min-height:56px!important;
  margin-top:10px!important;
  padding:7px 9px!important;
  grid-template-columns:minmax(350px,420px) auto 1fr!important;
  gap:10px!important;
  border-color:rgba(213,229,219,.14)!important;
}
.videoHubSearchApproved{height:40px!important;background:rgba(5,13,11,.92)!important}
.videoHubSearchApproved input{font-size:10.4px!important}
.videoHubModes{height:40px!important;gap:6px!important}
.videoHubModes button{min-width:90px!important;height:40px!important;padding:0 13px!important;font-size:9.2px!important}
.videoHubSort{justify-self:end!important;width:170px!important;height:40px!important;font-size:9.2px!important}
.videoHubGridApproved{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;margin-top:10px!important}
.videoHubCardApproved{
  border-color:rgba(209,227,216,.15)!important;
  background:linear-gradient(150deg,#101816,#080e0d)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.18)!important;
}
.videoHubThumbApproved>img{filter:saturate(1.08) contrast(1.04) brightness(1.01)!important}
.videoHubCardApproved:hover .videoHubThumbApproved>img{filter:saturate(1.14) contrast(1.05) brightness(1.04)!important}
.videoYoutubeBadge{left:7px!important;top:7px!important;height:21px!important}
.videoYoutubePlay{width:54px!important;height:38px!important;border-radius:9px!important;background:#ff1724!important;box-shadow:0 9px 24px rgba(0,0,0,.40),0 0 18px rgba(255,23,36,.22)!important}
.videoDurationBadge{right:7px!important;bottom:7px!important;font-size:7.2px!important}
.videoHubCardBodyApproved{padding:10px 10px 9px!important}
.videoHubCardBodyApproved>strong{min-height:32px!important;font-size:11.4px!important;line-height:1.30!important}
.videoReplayMetaLine{margin-top:6px!important;font-size:7.8px!important}
.videoCardBottomRow{margin-top:8px!important;padding-top:8px!important;gap:7px!important}
.videoCardBottomRow>small{font-size:6.9px!important}
.videoCardActions{gap:5px!important}
.videoWatchAction,.videoReplayAction{height:27px!important;padding:0 8px!important;font-size:7px!important}
.videoPagination{margin-top:16px!important}

@media(max-width:1500px){
  .videoHubPageApproved{width:min(1280px,calc(100vw - 34px))!important}
  .videoHubHeroApproved{height:350px!important;min-height:350px!important;background-size:126% auto!important;background-position:95% 28%!important}
  .videoHubHeroCopyApproved{padding-top:54px!important;width:500px!important;max-width:47%!important}
  .videoHubHeroCopyApproved h1{font-size:42px!important}
  .videoHeroSideApproved{width:250px!important;right:14px!important;top:16px!important}
  .videoHubGridApproved{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:1180px){
  .videoHubHeroApproved{height:380px!important;min-height:380px!important;background-size:142% auto!important;background-position:92% 30%!important}
  .videoHubHeroCopyApproved{width:54%!important;max-width:54%!important;padding-left:24px!important}
  .videoHubHeroCopyApproved h1{font-size:39px!important}
  .videoHeroSideApproved{width:242px!important;right:12px!important}
  .videoHubToolbarApproved{grid-template-columns:1fr auto!important}
  .videoHubSort{grid-column:1/-1;justify-self:end!important;width:170px!important}
  .videoHubGridApproved{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:900px){
  .videoHubHeroApproved{height:470px!important;min-height:470px!important;background-size:cover!important;background-position:58% 49%!important}
  .videoHubHeroCopyApproved{width:calc(100% - 310px)!important;max-width:none!important;padding:34px 0 0 20px!important}
  .videoHubHeroCopyApproved h1{font-size:34px!important}
  .videoHubHeroCopyApproved p{font-size:10.8px!important}
  .videoHeroSideApproved{width:260px!important;right:14px!important;top:18px!important}
  .videoHubToolbarApproved{grid-template-columns:1fr!important;gap:7px!important}
  .videoHubModes{justify-content:flex-start!important}
  .videoHubSort{grid-column:auto;justify-self:start!important;width:180px!important}
  .videoHubGridApproved{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:680px){
  .videoHubPageApproved{width:calc(100vw - 22px)!important;margin-top:8px!important}
  .videoHubHeroApproved{height:540px!important;min-height:540px!important;background-position:60% 49%!important}
  .videoHubHeroCopyApproved{width:calc(100% - 30px)!important;max-width:none!important;padding:27px 0 0 18px!important}
  .videoHubHeroCopyApproved h1{font-size:34px!important}
  .videoHubHeroCopyApproved p{max-width:94%!important;font-size:10.8px!important}
  .videoHeroSideApproved{left:18px!important;right:18px!important;top:auto!important;bottom:18px!important;width:auto!important}
  .videoPromoteCard{display:none!important}
  .videoHubModes{width:100%!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important}
  .videoHubModes button{min-width:0!important;padding:0 7px!important}
  .videoHubSort{width:100%!important}
  .videoHubGridApproved{grid-template-columns:1fr!important}
  .videoCardBottomRow{grid-template-columns:1fr!important}.videoCardActions{justify-content:flex-end!important}
}
/* =====================================================================
   v0.3.5.209 — VIDEO HUB HERO LOWER DROP TUNE
   Keep the exact user-approved render, but drop the tank much lower on desktop
   by showing more upper sky and less lower grass in the hero crop.
   ===================================================================== */
/* v0.3.5.206 compact featured-card hard clamp: long YouTube titles must never expand the hero rail. */
.videoHeroSideApproved>#videoFeaturedSlot{min-width:0!important;width:100%!important;max-width:100%!important}
.videoFeaturedCardApproved{min-width:0!important;width:100%!important;max-width:100%!important}
.videoFeaturedCopy{min-width:0!important;overflow:hidden!important}


/* =====================================================================
   v0.3.5.210 — VIDEO HUB REAL CONTENT UI + YOUTUBE METADATA PASS
   Hero stays frozen from v0.3.5.209. Focus: live-content card readability,
   featured-card modernization, and a second YouTube chip row below titles.
   ===================================================================== */
.videoFeaturedCardApproved{backdrop-filter:blur(12px)!important}
.videoFeaturedLabel{height:30px!important;padding:0 10px!important;border-bottom-color:rgba(169,229,27,.16)!important;background:linear-gradient(180deg,rgba(169,229,27,.05),rgba(169,229,27,0))!important}
.videoFeaturedThumb{aspect-ratio:16/8.7!important}
.videoFeaturedThumb:after{background:linear-gradient(180deg,rgba(2,5,5,.04),rgba(2,6,6,.08) 48%,rgba(2,6,6,.68) 100%)!important}
.videoFeaturedCopy{padding:10px 11px 11px!important}
.videoFeaturedCopy strong{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;white-space:normal!important;font-size:12.6px!important;line-height:1.17!important;min-height:30px!important}
.videoFeaturedMetaRow{display:flex;align-items:center;gap:6px;margin-top:7px;min-width:0}
.videoFeaturedMetaRow small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#a6b1ab;font-size:7.4px}
.videoFeaturedReplayLine{min-width:0;margin-top:6px;display:flex;align-items:center;gap:4px;color:#8f9b95;font-size:7.6px;white-space:nowrap;overflow:hidden}
.videoFeaturedReplayLine b{color:#a9e51b;font-weight:850;flex:0 0 auto}
.videoFeaturedReplayLine span{overflow:hidden;text-overflow:ellipsis}
.videoFeaturedReplayLine span:nth-of-type(1),.videoFeaturedReplayLine span:nth-of-type(3){flex:0 0 auto;color:#66726c}
.videoFeaturedReplayLine span:nth-of-type(2),.videoFeaturedReplayLine span:nth-of-type(4){max-width:31%}
.videoFeaturedCta{margin-top:8px;padding-top:8px;border-top:1px solid rgba(207,225,215,.08);display:flex;align-items:center;justify-content:space-between;color:#eef4f0;font-size:7.9px;font-weight:850;text-transform:uppercase;letter-spacing:.03em}
.videoFeaturedCta i{font-style:normal;color:#a9e51b;font-size:15px;line-height:1}
.videoYoutubeChip{height:19px;display:inline-flex;align-items:center;gap:5px;padding:0 7px 0 5px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(8,12,12,.70);color:#eef3f1;box-shadow:0 3px 10px rgba(0,0,0,.18)}
.videoYoutubeChip b{font-size:6.8px;line-height:1;letter-spacing:.045em}
.videoYoutubeChip .videoYoutubeBadgeIcon{width:15px;height:10px;flex:0 0 auto}
.videoHubCardBodyApproved{padding:11px 11px 10px!important}
.videoHubCardBodyApproved>strong{min-height:34px!important;font-size:12px!important;line-height:1.29!important}
.videoCardSourceRow{display:flex;align-items:center;gap:6px;min-width:0;margin-top:6px}
.videoCardSourceRow small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#98a49e;font-size:7.3px}
.videoReplayMetaLine{margin-top:7px!important;font-size:8px!important}
.videoCardBottomRow{margin-top:9px!important;padding-top:9px!important;gap:8px!important}
.videoCardBottomRow>small{font-size:7.1px!important;color:#8c9892!important}
.videoWatchAction,.videoReplayAction{height:28px!important;padding:0 9px!important;font-size:7.4px!important}
.videoWatchAction i{border-left-width:6px!important;border-top-width:3.5px!important;border-bottom-width:3.5px!important}


/* =====================================================================
   v0.3.5.212 — VIDEO HUB FEATURED CARD APPROVED REDESIGN
   Apply the approved NEW VIDEO card language from the design render.
   Remove the CTA row, make the card more compact, and move the regular
   card YouTube chip below the title without attaching it to views/date.
   ===================================================================== */
.videoHeroSideApproved{width:248px!important;right:14px!important;top:18px!important;gap:8px!important}
.videoFeaturedCardApproved{border-color:rgba(185,220,63,.62)!important;border-radius:9px!important;background:linear-gradient(180deg,rgba(7,10,10,.96),rgba(3,6,7,.96))!important;box-shadow:0 20px 52px rgba(0,0,0,.34),0 0 20px rgba(185,220,63,.05)!important}
.videoFeaturedLabel{height:30px!important;padding:0 12px!important;font-size:8.2px!important;letter-spacing:.055em!important}
.videoFeaturedThumb{aspect-ratio:16/7.75!important;border-top:1px solid rgba(255,255,255,.05)!important;border-bottom:1px solid rgba(255,255,255,.06)!important}
.videoFeaturedThumb .videoYoutubeBadge{top:8px!important;left:8px!important;transform:none!important}
.videoFeaturedThumb .videoYoutubePlay.compact{transform:translate(-50%,-50%) scale(.84)!important}
.videoFeaturedThumb .videoDurationBadge{bottom:8px!important;right:8px!important}
.videoFeaturedCopy{padding:9px 10px 10px!important}
.videoFeaturedCopy strong{min-height:auto!important;font-size:11.9px!important;line-height:1.17!important;-webkit-line-clamp:2!important}
.videoFeaturedStatsRow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:7px;color:#aeb7b2}
.videoFeaturedStatsRow>span{display:inline-flex;align-items:center;gap:5px;min-width:0}
.videoFeaturedStatsRow .uiMaskIcon{width:13px;height:13px;opacity:.92;color:#b9dc3f;flex:0 0 auto}
.videoFeaturedStatsRow small{font-size:8.5px;color:#a5afaa;line-height:1;white-space:nowrap}
.videoFeaturedDivider{height:1px;margin:8px 0 7px;background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.06),rgba(255,255,255,0))}
.videoFeaturedMetaRow,.videoFeaturedCta{display:none!important}
.videoFeaturedReplayLine{margin-top:0!important;font-size:7.4px!important;gap:4px!important;color:#8d9893!important}
.videoFeaturedReplayLine b{color:#b9dc3f!important;font-size:7.9px!important}
.videoFeaturedReplayLine span:nth-of-type(2),.videoFeaturedReplayLine span:nth-of-type(4){max-width:29%!important}
.videoFeaturedEmpty{min-height:176px!important}
.videoPromoteCard{min-height:64px!important;padding:8px 11px!important}
.videoPromoteCard>span strong{font-size:9px!important}
.videoPromoteCard>span small{font-size:7.1px!important;line-height:1.38!important}
.videoHubCardBodyApproved>strong{min-height:34px!important}
.videoCardSourceRow{margin-top:5px!important}
.videoCardSourceRow small{display:none!important}
.videoCardStatsRow{display:flex;align-items:center;gap:5px;margin-top:5px;color:#98a39d;min-height:14px}
.videoCardStatsRow small{font-size:8.5px;line-height:1;white-space:nowrap;color:#98a39d}
.videoCardStatsRow span{font-size:8.5px;line-height:1;color:#62706a}
.videoCardBottomRow{margin-top:8px!important;padding-top:8px!important}

/* =====================================================================
   v0.3.5.213 — VIDEO HUB FEATURED CARD FIT + SPACING FIX
   Keep the approved v0.3.5.212 featured-card concept. Fix only internal
   fit: inset the thumbnail from the card edges, lower YouTube branding,
   compact the media/text stack, and keep the promo block clearly visible.
   ===================================================================== */
.videoFeaturedCardApproved{
  overflow:hidden!important;
}
.videoFeaturedLabel{
  height:28px!important;
  padding:0 11px!important;
  font-size:7.9px!important;
}
.videoFeaturedThumb{
  width:auto!important;
  margin:0 7px!important;
  aspect-ratio:16/7.10!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:6px!important;
  background:#050808!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 6px 16px rgba(0,0,0,.16)!important;
}
.videoFeaturedThumb img{
  border-radius:5px!important;
}
.videoFeaturedThumb:after{
  border-radius:5px!important;
}
.videoFeaturedThumb .videoYoutubeBadge{
  top:14px!important;
  left:7px!important;
  height:18px!important;
  padding:0 6px 0 4px!important;
  gap:4px!important;
  border-radius:4px!important;
}
.videoFeaturedThumb .videoYoutubeBadgeIcon{
  width:14px!important;
  height:9px!important;
}
.videoFeaturedThumb .videoYoutubeBadge b{
  font-size:6.2px!important;
}
.videoFeaturedThumb .videoYoutubePlay.compact{
  transform:translate(-50%,-50%) scale(.76)!important;
}
.videoFeaturedThumb .videoDurationBadge{
  right:6px!important;
  bottom:6px!important;
  padding:2px 4px!important;
  font-size:6.5px!important;
}
.videoFeaturedCopy{
  padding:7px 10px 9px!important;
}
.videoFeaturedCopy strong{
  font-size:10.9px!important;
  line-height:1.16!important;
  min-height:25px!important;
}
.videoFeaturedStatsRow{
  gap:10px!important;
  margin-top:5px!important;
}
.videoFeaturedStatsRow .uiMaskIcon{
  width:11px!important;
  height:11px!important;
}
.videoFeaturedStatsRow small{
  font-size:6.7px!important;
}
.videoFeaturedDivider{
  margin:6px 0 5px!important;
}
.videoFeaturedReplayLine{
  font-size:6.9px!important;
  line-height:1.15!important;
}
.videoFeaturedReplayLine b{
  font-size:7.3px!important;
}
.videoPromoteCard{
  min-height:62px!important;
}
@media(max-width:1500px){
  .videoHeroSideApproved{width:246px!important}
}
@media(max-width:1180px){
  .videoHeroSideApproved{width:238px!important}
}

/* =====================================================================
   v0.3.5.214 — VIDEO HUB FEATURED INNER MEDIA COMPRESSION FIX
   Keep the v0.3.5.213 outer card geometry. Compress only the inner YouTube
   media block so the preview no longer dominates / crowds the featured card.
   ===================================================================== */
.videoFeaturedThumb{
  margin:0 11px!important;
  aspect-ratio:16/5.95!important;
  border-radius:5px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 5px 13px rgba(0,0,0,.14)!important;
}
.videoFeaturedThumb img{
  border-radius:4px!important;
  object-fit:cover!important;
}
.videoFeaturedThumb:after{
  border-radius:4px!important;
  background:linear-gradient(180deg,rgba(2,5,5,.02),rgba(2,6,6,.04) 55%,rgba(2,6,6,.48) 100%)!important;
}
.videoFeaturedThumb .videoYoutubeBadge{
  top:18px!important;
  left:8px!important;
  height:16px!important;
  padding:0 5px 0 4px!important;
  gap:3px!important;
}
.videoFeaturedThumb .videoYoutubeBadgeIcon{
  width:12px!important;
  height:8px!important;
}
.videoFeaturedThumb .videoYoutubeBadge b{
  font-size:5.7px!important;
}
.videoFeaturedThumb .videoYoutubePlay.compact{
  transform:translate(-50%,-50%) scale(.66)!important;
}
.videoFeaturedThumb .videoDurationBadge{
  right:5px!important;
  bottom:5px!important;
  padding:2px 4px!important;
  font-size:5.9px!important;
}
.videoFeaturedCopy{
  padding:6px 10px 8px!important;
}
.videoFeaturedCopy strong{
  font-size:10.5px!important;
  line-height:1.15!important;
  min-height:24px!important;
}
.videoFeaturedStatsRow{
  margin-top:4px!important;
}
.videoFeaturedDivider{
  margin:5px 0 4px!important;
}
.videoFeaturedReplayLine{
  font-size:6.7px!important;
}

/* =====================================================================
   v0.3.5.215 — VIDEO HUB FEATURED FULL THUMBNAIL VISIBILITY FIX
   Do not crop the YouTube thumbnail. Preserve its full 16:9 frame and make
   the media block compact by reducing the whole block width, not its height.
   ===================================================================== */
.videoFeaturedThumb{
  width:calc(100% - 30px)!important;
  margin:0 auto!important;
  aspect-ratio:16/9!important;
  overflow:hidden!important;
  background:#030606!important;
  border-radius:5px!important;
}
.videoFeaturedThumb img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
  border-radius:4px!important;
}
.videoFeaturedCardApproved:hover .videoFeaturedThumb img{
  transform:none!important;
}
.videoFeaturedThumb:after{
  background:linear-gradient(180deg,rgba(2,5,5,.015),rgba(2,6,6,.02) 68%,rgba(2,6,6,.22) 100%)!important;
}
.videoFeaturedThumb .videoYoutubeBadge{
  top:13px!important;
  left:8px!important;
  height:16px!important;
}
.videoFeaturedThumb .videoYoutubePlay.compact{
  transform:translate(-50%,-50%) scale(.66)!important;
}
.videoFeaturedThumb .videoDurationBadge{
  right:6px!important;
  bottom:6px!important;
  font-size:5.9px!important;
}
.videoFeaturedCopy{
  padding:6px 10px 8px!important;
}


/* =====================================================================
   v0.3.5.216 — VIDEO HUB FEATURED THUMB FIT + META SIZE PASS
   Keep full thumbnail visibility, remove the featured YouTube badge, fit the
   thumbnail tighter into the card without black voids, and enlarge meta text.
   ===================================================================== */
.videoFeaturedThumb{
  width:calc(100% - 12px)!important;
  margin:0 auto!important;
  aspect-ratio:16/9!important;
  background:transparent!important;
  border-radius:6px!important;
  border:1px solid rgba(255,255,255,.06)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 6px 16px rgba(0,0,0,.14)!important;
}
.videoFeaturedThumb img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:transparent!important;
  border-radius:5px!important;
}
.videoFeaturedCardApproved:hover .videoFeaturedThumb img{transform:none!important}
.videoFeaturedThumb:after{
  background:linear-gradient(180deg,rgba(2,5,5,.01),rgba(2,6,6,.02) 72%,rgba(2,6,6,.18) 100%)!important;
  border-radius:5px!important;
}
.videoFeaturedThumb .videoYoutubeBadge{display:none!important}
.videoFeaturedThumb .videoYoutubePlay.compact{
  transform:translate(-50%,-50%) scale(.72)!important;
}
.videoFeaturedThumb .videoDurationBadge{
  right:7px!important;
  bottom:7px!important;
  font-size:6.5px!important;
  padding:2px 5px!important;
}
.videoFeaturedCopy{
  padding:7px 10px 9px!important;
}
.videoFeaturedCopy strong{
  font-size:11.2px!important;
  line-height:1.15!important;
  min-height:26px!important;
}
.videoFeaturedStatsRow{
  gap:11px!important;
  margin-top:5px!important;
}
.videoFeaturedStatsRow .uiMaskIcon{
  width:12px!important;
  height:12px!important;
}
.videoFeaturedStatsRow small{
  font-size:7.7px!important;
  line-height:1!important;
}
.videoFeaturedDivider{
  margin:6px 0 5px!important;
}
.videoFeaturedReplayLine{
  font-size:7.6px!important;
  line-height:1.16!important;
}
.videoFeaturedReplayLine b{
  font-size:8.1px!important;
}
.videoFeaturedReplayLine span:nth-of-type(2),.videoFeaturedReplayLine span:nth-of-type(4){max-width:30%!important}


/* =====================================================================
   v0.3.5.217 — VIDEO HUB FEATURED TRUE 16:9 THUMBNAIL FIX
   Use a real 16:9 YouTube thumbnail source for the featured card with a
   fallback chain, so the preview fills the media slot without black bars.
   ===================================================================== */
.videoFeaturedThumb{
  width:calc(100% - 10px)!important;
  margin:0 auto!important;
  aspect-ratio:16/9!important;
  background:#040707!important;
}
.videoFeaturedThumb img{
  object-fit:cover!important;
  object-position:center center!important;
}
.videoFeaturedCardApproved:hover .videoFeaturedThumb img{transform:none!important}


/* =====================================================================
   v0.3.5.218 — VIDEO HUB VIDEO CARD LOGO CLEANUP + READABILITY PASS
   Remove redundant YouTube branding from regular video cards and improve
   the readability of views/date/map/player metadata on 2K screens.
   ===================================================================== */
.videoHubThumbApproved .videoYoutubeBadge{display:none!important}
.videoCardSourceRow{display:none!important}
.videoHubCardBodyApproved{padding:11px 11px 10px!important}
.videoHubCardBodyApproved>strong{font-size:11.2px!important;line-height:1.29!important;min-height:31px!important}
.videoCardStatsRow{margin-top:6px!important;gap:6px!important;min-height:16px!important}
.videoCardStatsRow small{font-size:7.9px!important;line-height:1.08!important;color:#a6b0ab!important}
.videoCardStatsRow span{font-size:7.9px!important;line-height:1.08!important;color:#70807a!important}
.videoReplayMetaLine{margin-top:7px!important;font-size:8.6px!important;line-height:1.16!important;color:#a2ada7!important}
.videoReplayMetaLine b{font-size:8.8px!important;color:#a9e51b!important}
.videoReplayMetaLine span:nth-of-type(2){max-width:32%!important}
.videoReplayMetaLine span:nth-of-type(4){max-width:33%!important}
.videoCardBottomRow{margin-top:9px!important;padding-top:9px!important}
.videoCardBottomRow>small{font-size:7.3px!important}


/* =====================================================================
   v0.3.5.219 — VIDEO CARD FOOTER CLEANUP + VIEW REFRESH
   Remove the redundant channel/footer text from regular cards and keep
   actions aligned cleanly on the right.
   ===================================================================== */
.videoCardBottomRowActionsOnly{
  grid-template-columns:1fr!important;
}
.videoCardBottomRowActionsOnly .videoCardActions{
  justify-self:end!important;
}


/* =====================================================================
   v0.3.5.220 — VIDEO HUB META CONTRAST + FILTER TYPE POLISH
   Final readability polish for regular video cards and top video filters.
   Geometry stays unchanged from v0.3.5.219.
   ===================================================================== */
.videoCardStatsRow small{
  color:#b2bcb7!important;
}
.videoCardStatsRow span{
  color:#798983!important;
}
.videoReplayMetaLine{
  color:#aeb9b3!important;
}
.videoReplayMetaLine span:nth-of-type(1),
.videoReplayMetaLine span:nth-of-type(3){
  color:#718079!important;
}
.videoHubModes button{
  font-size:10.2px!important;
  font-weight:750!important;
  letter-spacing:.01em!important;
}

/* =====================================================================
   v0.3.5.221 — VIDEO DETAIL PAGE APPROVED LAYOUT PASS
   Player-first layout, one linked replay, related videos from FermaniHUB,
   YouTube comments read bridge, and one comment CTA to the source video.
   ===================================================================== */
.videoDetailPageApproved{
  width:min(1280px,calc(100% - 44px));
  margin:14px auto 64px;
}
.videoDetailLayoutApproved{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:12px;
  align-items:start;
}
.videoDetailMainApproved{min-width:0;display:grid;gap:10px}
.videoDetailSideApproved{min-width:0;display:grid;gap:10px}
.videoPlayerFrameApproved{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid rgba(209,226,217,.16);
  border-radius:8px;
  background:#000;
  box-shadow:0 24px 72px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.02);
}
.videoPlayerFrameApproved iframe{width:100%;height:100%;border:0;display:block}
.videoDetailInfoApproved{
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  gap:14px;
  padding:14px 15px;
  border:1px solid rgba(209,226,217,.12);
  border-radius:7px;
  background:linear-gradient(145deg,rgba(14,23,21,.88),rgba(6,12,11,.92));
  box-shadow:0 16px 44px rgba(0,0,0,.18);
}
.videoDetailInfoCopy{min-width:0}
.videoDetailInfoCopy .eyebrow{color:#a9e51b;font-size:7.5px;letter-spacing:.16em;font-weight:850}
.videoDetailInfoCopy h1{
  margin:8px 0 7px;
  font-family:var(--approved-font);
  color:#f1f5f2;
  font-size:20px;
  line-height:1.18;
  letter-spacing:-.012em;
}
.videoDetailChannelLine{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#929e98;font-size:8px}
.videoDetailChannelLine strong{color:#dce4df;font-size:8.4px}
.videoDetailChannelLine span{position:relative;padding-left:9px}
.videoDetailChannelLine span:before{content:"";position:absolute;left:0;top:50%;width:2px;height:2px;border-radius:50%;background:#5e6b65;transform:translateY(-50%)}
.videoDetailActionsApproved{display:grid;gap:6px;align-content:start}
.videoDetailAction{
  min-height:33px;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#dce4df;
  border:1px solid rgba(209,226,217,.13);
  border-radius:4px;
  background:linear-gradient(180deg,rgba(18,29,26,.94),rgba(8,15,13,.96));
  font-size:8.5px;
  font-weight:900;
  letter-spacing:.025em;
  transition:border-color .16s ease,transform .16s ease,background .16s ease;
}
.videoDetailAction:hover{transform:translateY(-1px);border-color:rgba(169,229,27,.34)}
.videoDetailActionYoutube{border-color:rgba(233,86,72,.22);color:#eee9e7}
.videoDetailCommentAction{
  color:#fff;
  border-color:rgba(169,229,27,.68);
  background:linear-gradient(180deg,#76a916,#4f7609);
  box-shadow:0 6px 18px rgba(103,151,12,.10);
}
.videoDetailCommentAction:hover{border-color:#baf139;background:linear-gradient(180deg,#83b91b,#587f0c)}
.videoDetailReplayPanel,.videoDetailRelatedPanel,.videoYoutubeCommentsPanel{
  border:1px solid rgba(209,226,217,.12);
  border-radius:7px;
  background:linear-gradient(145deg,rgba(13,22,20,.92),rgba(6,12,11,.94));
  overflow:hidden;
  box-shadow:0 16px 44px rgba(0,0,0,.16);
}
.videoDetailSideHead{
  height:42px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  border-bottom:1px solid rgba(209,226,217,.08);
}
.videoDetailSideHead i,.videoYoutubeCommentsHead>div>i{display:block;width:20px;height:2px;background:#a9e51b;box-shadow:0 0 9px rgba(169,229,27,.16)}
.videoDetailSideHead strong{font-size:9px;letter-spacing:.055em;color:#e5ece8}
.videoDetailReplayHero{min-height:79px;padding:10px 11px;display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:center;border-bottom:1px solid rgba(209,226,217,.07)}
.videoDetailReplayHero img{width:92px;height:54px;object-fit:contain;display:block;filter:drop-shadow(0 6px 8px rgba(0,0,0,.55))}
.videoDetailReplayHero>div strong{display:block;color:#f1f5f2;font-size:11px}
.videoDetailReplayHero>div span{display:block;margin-top:4px;color:#9aa69f;font-size:8px}
.videoDetailPlayerLine{padding:9px 11px;display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:center;border-bottom:1px solid rgba(209,226,217,.07)}
.videoDetailPlayerLine>.uiMaskIcon{width:22px;height:22px;color:#89968f}
.videoDetailPlayerLine strong{display:block;color:#dfe7e2;font-size:8.5px}.videoDetailPlayerLine small{display:block;margin-top:2px;color:#728078;font-size:6.4px}
.videoDetailReplayKpis{display:grid;grid-template-columns:repeat(3,1fr);padding:10px 11px;border-bottom:1px solid rgba(209,226,217,.07)}
.videoDetailReplayKpis b{font-size:15px;color:#eef3f0;border-right:1px solid rgba(209,226,217,.10)}.videoDetailReplayKpis b:last-child{border-right:0}.videoDetailReplayKpis small{display:block;margin-bottom:3px;color:#7e8a84;font-size:5.7px;font-weight:700;letter-spacing:.04em}
.videoDetailReplayOpen{height:35px;margin:9px 11px 11px;display:flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;color:#dce4df;border:1px solid rgba(209,226,217,.12);border-radius:4px;background:#0a1311;font-size:7.3px;font-weight:900}
.videoDetailReplayOpen span{color:#a9e51b;font-size:12px}.videoDetailReplayOpen:hover{border-color:rgba(169,229,27,.34)}
.videoDetailSideEmpty{padding:22px 12px;color:#7f8b85;font-size:9px;line-height:1.5}
.videoDetailRelatedList{padding:4px 9px 8px;display:grid}
.videoDetailRelatedItem{padding:8px 0;display:grid;grid-template-columns:112px minmax(0,1fr);gap:9px;color:#e8eeea;text-decoration:none;border-bottom:1px solid rgba(209,226,217,.07)}
.videoDetailRelatedItem:last-child{border-bottom:0}
.videoDetailRelatedThumb{position:relative;width:112px;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:#050908}
.videoDetailRelatedThumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease}
.videoDetailRelatedItem:hover .videoDetailRelatedThumb img{transform:scale(1.025)}
.videoDetailRelatedThumb span{position:absolute;right:4px;bottom:4px;padding:2px 4px;border-radius:3px;background:rgba(0,0,0,.80);color:#fff;font-size:5.8px}
.videoDetailRelatedItem>div:last-child{min-width:0}
.videoDetailRelatedItem strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:8.3px;line-height:1.26;color:#e7ede9}
.videoDetailRelatedItem small,.videoDetailRelatedItem em{display:block;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;color:#89958f;font-size:6.5px}
.videoDetailRelatedItem em{margin-top:3px;color:#6f7c75}
.videoYoutubeCommentsPanel{margin-top:0}
.videoYoutubeCommentsHead{min-height:54px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(209,226,217,.08)}
.videoYoutubeCommentsHead>div:first-child{display:flex;align-items:center;gap:8px;min-width:0}.videoYoutubeCommentsHead strong{font-size:9px;letter-spacing:.04em}.videoYoutubeCommentsHead span{color:#75827b;font-size:6.4px;white-space:nowrap}
.videoCommentSort{display:flex;gap:4px;flex:0 0 auto}
.videoCommentSort button{height:27px;padding:0 9px;border:1px solid rgba(209,226,217,.10);border-radius:4px;background:#08110f;color:#8f9b95;font-size:6.6px;font-weight:850;cursor:pointer}
.videoCommentSort button.active{border-color:rgba(169,229,27,.44);background:rgba(105,151,13,.16);color:#b9e74f}
.videoYoutubeCommentsList{display:grid}
.videoYoutubeCommentRow{min-height:88px;padding:12px;display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;border-bottom:1px solid rgba(209,226,217,.07)}
.videoYoutubeCommentRow:last-child{border-bottom:0}
.videoYoutubeCommentAvatar{width:36px;height:36px;border-radius:50%;overflow:hidden;background:#111b18;display:grid;place-items:center;color:#a9e51b;font-size:9px;font-weight:900;border:1px solid rgba(209,226,217,.10)}
.videoYoutubeCommentAvatar img{width:100%;height:100%;display:block;object-fit:cover}
.videoYoutubeCommentBody{min-width:0}.videoYoutubeCommentTop{display:flex;align-items:center;gap:7px}.videoYoutubeCommentTop strong{font-size:9px;color:#e2e9e5}.videoYoutubeCommentTop small{font-size:6.3px;color:#748078}.videoYoutubeCommentBody p{margin:5px 0 6px;color:#aeb8b2;font-size:7.5px;line-height:1.48}.videoYoutubeCommentMeta{display:flex;gap:12px;color:#77847d;font-size:6.5px}
.videoYoutubeCommentsLoading,.videoYoutubeCommentsEmpty{padding:30px 14px;text-align:center;color:#7e8b84;font-size:7.5px}.videoYoutubeCommentsEmpty strong{display:block;color:#aab6b0;font-size:8px}.videoYoutubeCommentsEmpty span{display:block;margin-top:6px;line-height:1.5}
@media(max-width:1100px){.videoDetailLayoutApproved{grid-template-columns:minmax(0,1fr) 290px}.videoDetailReplayHero{grid-template-columns:76px 1fr}.videoDetailReplayHero img{width:76px}.videoDetailRelatedItem{grid-template-columns:96px 1fr}.videoDetailRelatedThumb{width:96px}}
@media(max-width:900px){.videoDetailLayoutApproved{grid-template-columns:1fr}.videoDetailSideApproved{grid-template-columns:1fr 1fr}.videoDetailInfoApproved{grid-template-columns:1fr 205px}}
@media(max-width:650px){.videoDetailPageApproved{width:calc(100% - 22px);margin-top:9px}.videoDetailSideApproved{grid-template-columns:1fr}.videoDetailInfoApproved{grid-template-columns:1fr}.videoDetailActionsApproved{grid-template-columns:1fr}.videoYoutubeCommentsHead{align-items:flex-start;flex-direction:column;padding:10px 12px}.videoYoutubeCommentsHead>div:first-child{flex-wrap:wrap}.videoYoutubeCommentsHead span{white-space:normal}.videoCommentSort{width:100%}.videoCommentSort button{flex:1}.videoDetailInfoCopy h1{font-size:17px}}


/* =====================================================================
   v0.3.5.222 — VIDEO DETAIL RELATED REPLAY WIDE CARD + SIDEBAR READABILITY PASS
   Replace the tall linked-replay dossier with a compact horizontal player-card
   style. Use the freed vertical space to scale up the related-video rail.
   ===================================================================== */
.videoDetailLayoutApproved{
  grid-template-columns:minmax(0,1fr) 350px!important;
  gap:12px!important;
}
.videoDetailSideApproved{gap:9px!important}
.videoDetailReplayWidePanel{overflow:visible!important;background:transparent!important;border:0!important;box-shadow:none!important}
.videoDetailReplayWideHead{
  height:27px!important;
  padding:0 3px!important;
  border:0!important;
}
.videoDetailReplayWideHead strong{font-size:7.3px!important;color:#aab5af!important}
.videoDetailReplayWideCard{
  position:relative;
  display:block;
  padding:9px 10px 7px;
  color:#eef3f0;
  text-decoration:none;
  border:1px solid rgba(143,198,28,.62);
  border-radius:8px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(16,19,17,.97),rgba(8,11,10,.97));
  box-shadow:0 15px 38px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.045),0 0 18px rgba(169,229,27,.035);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.videoDetailReplayWideCard:hover{
  transform:translateY(-1px);
  border-color:rgba(169,229,27,.86);
  box-shadow:0 18px 44px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.055),0 0 24px rgba(169,229,27,.06);
}
.videoDetailReplayWideMain{
  min-height:51px;
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
}
.videoDetailReplayWideThumb{
  position:relative;
  width:72px;
  height:46px;
  overflow:hidden;
  border-radius:4px;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(206,221,213,.08);
}
.videoDetailReplayWideTank{
  position:absolute!important;
  left:2px!important;
  right:2px!important;
  bottom:1px!important;
  width:68px!important;
  height:43px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.72))!important;
}
.videoDetailReplayWideIdentity{min-width:0}
.videoDetailReplayWideIdentity>strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f1f5f2;
  font-family:var(--approved-font);
  font-size:13.5px;
  line-height:1.03;
}
.videoDetailReplayWideIdentity>small{
  display:block;
  margin-top:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#8e9b94;
  font-size:8.5px;
}
.videoDetailReplayWideIdentity>small b{font-weight:900;color:#b4c0ba}
.videoDetailReplayWideIdentity>small b.win{color:#a9e51b}
.videoDetailReplayWideIdentity>small b.loss{color:#d16e62}
.videoDetailReplayWideIdentity>em{
  display:block;
  margin-top:3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#a5b0aa;
  font-size:7.1px;
  font-style:normal;
}
.videoDetailReplayWideDamage{
  min-width:94px;
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:5px;
}
.videoDetailReplayWideDamage strong{
  color:#b9f02a;
  font-family:var(--approved-font);
  font-size:26px;
  line-height:.9;
  letter-spacing:-.04em;
  text-shadow:0 0 14px rgba(169,229,27,.10);
}
.videoDetailReplayWideDamage span{color:#79857f;font-size:5.5px;font-weight:900;letter-spacing:.07em}
.videoDetailReplayWideFoot{
  min-height:31px;
  margin-top:6px;
  padding-top:6px;
  display:flex;
  align-items:center;
  border-top:1px solid rgba(123,137,129,.28);
}
.videoDetailReplayWideMetrics{display:flex;align-items:center;min-width:0}
.videoDetailReplayWideMetrics>span{
  min-width:63px;
  height:25px;
  padding:0 7px;
  display:grid;
  grid-template-columns:15px auto;
  align-items:center;
  gap:5px;
  border-right:1px solid rgba(112,126,118,.22);
}
.videoDetailReplayWideMetrics>span:first-child{padding-left:1px}
.videoDetailReplayWideMetrics .cardPremiumKpiIcon{width:15px!important;height:15px!important;flex:0 0 15px!important}
.videoDetailReplayWideMetrics>span>span{display:flex;flex-direction:column;min-width:0}
.videoDetailReplayWideMetrics b{font-size:11.5px;line-height:1;color:#e9eeeb}
.videoDetailReplayWideMetrics small{margin-top:2px;color:#738079;font-size:4.8px;line-height:1;letter-spacing:.05em}
.videoDetailReplayWideAwards{
  height:25px;
  margin-left:7px;
  padding-left:8px;
  display:flex!important;
  align-items:center!important;
  gap:2px!important;
  overflow:hidden!important;
  border-left:1px solid rgba(112,126,118,.22);
}
.videoDetailReplayWideAwards .cardAwardIcon{
  width:23px!important;
  height:23px!important;
  min-width:23px!important;
  min-height:23px!important;
  flex:0 0 23px!important;
}
.videoDetailReplayWideAwards .cardAwardIcon img{width:22px!important;height:22px!important;max-width:22px!important;max-height:22px!important}
.videoDetailReplayWideArrow{margin-left:auto;padding-left:6px;color:#a9e51b;font-size:16px;font-style:normal;line-height:1}
.videoDetailRelatedPanel{border-color:rgba(209,226,217,.13)!important}
.videoDetailRelatedList{padding:4px 10px 8px!important}
.videoDetailRelatedItem{
  min-height:86px!important;
  padding:9px 0!important;
  grid-template-columns:132px minmax(0,1fr)!important;
  gap:10px!important;
}
.videoDetailRelatedThumb{width:132px!important;border-radius:5px!important}
.videoDetailRelatedThumb span{right:5px!important;bottom:5px!important;padding:2px 5px!important;font-size:6.5px!important}
.videoDetailRelatedItem strong{font-size:9.3px!important;line-height:1.27!important}
.videoDetailRelatedItem small{margin-top:6px!important;font-size:7.2px!important;color:#a2ada7!important}
.videoDetailRelatedItem em{margin-top:4px!important;font-size:7px!important;color:#7e8b84!important}
@media(max-width:1100px){
  .videoDetailLayoutApproved{grid-template-columns:minmax(0,1fr) 315px!important}
  .videoDetailReplayWideMain{grid-template-columns:64px minmax(0,1fr) auto!important;gap:8px!important}
  .videoDetailReplayWideThumb{width:64px!important;height:42px!important}
  .videoDetailReplayWideTank{width:60px!important;height:39px!important}
  .videoDetailReplayWideDamage{min-width:82px!important}.videoDetailReplayWideDamage strong{font-size:23px!important}
  .videoDetailReplayWideMetrics>span{min-width:57px!important;padding:0 5px!important}
  .videoDetailReplayWideAwards .cardAwardIcon:nth-child(n+4){display:none!important}
  .videoDetailRelatedItem{grid-template-columns:114px minmax(0,1fr)!important}.videoDetailRelatedThumb{width:114px!important}
}
@media(max-width:900px){
  .videoDetailLayoutApproved{grid-template-columns:1fr!important}
  .videoDetailSideApproved{grid-template-columns:1fr 1fr!important}
}
@media(max-width:650px){
  .videoDetailSideApproved{grid-template-columns:1fr!important}
  .videoDetailReplayWideCard{padding:8px!important}
  .videoDetailReplayWideAwards{display:none!important}
  .videoDetailRelatedItem{grid-template-columns:118px minmax(0,1fr)!important}.videoDetailRelatedThumb{width:118px!important}
}


/* =====================================================================
   v0.3.5.223 — VIDEO DETAIL SIDEBAR EXPANSION + ACTION BUTTON POLISH + INLINE META PASS
   Show up to 10 related videos, make the sidebar useful down the page,
   move video metadata/actions into clean horizontal rows, and visually
   separate YouTube actions from FermaniHUB replay actions.
   ===================================================================== */
.videoDetailInfoInlineApproved{
  grid-template-columns:1fr!important;
  gap:10px!important;
  padding:14px 16px 13px!important;
}
.videoDetailInfoCopy h1{
  margin:8px 0 8px!important;
  font-size:21px!important;
  line-height:1.16!important;
}
.videoDetailMetaInline{
  gap:9px!important;
  font-size:8.8px!important;
  line-height:1.2!important;
}
.videoDetailMetaInline strong{font-size:9.2px!important;color:#edf2ef!important}
.videoDetailMetaInline span{padding-left:10px!important;color:#a8b3ad!important}
.videoDetailMetaInline span:before{width:3px!important;height:3px!important;background:#6f7d76!important}
.videoDetailActionsInline{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:7px!important;
}
.videoDetailAction{
  min-height:35px!important;
  padding:0 13px!important;
  gap:7px!important;
  border-radius:5px!important;
  font-size:7.8px!important;
  letter-spacing:.02em!important;
  white-space:nowrap!important;
}
.videoDetailActionYoutube{
  color:#fff!important;
  border-color:rgba(255,69,58,.74)!important;
  background:linear-gradient(180deg,#ff392f,#c91e19)!important;
  box-shadow:0 7px 18px rgba(215,34,28,.12)!important;
}
.videoDetailActionYoutube:hover{
  border-color:#ff7d72!important;
  background:linear-gradient(180deg,#ff4a40,#d7251f)!important;
}
.videoDetailYoutubeGlyph{
  width:18px;height:13px;border-radius:4px;display:grid;place-items:center;
  background:#fff;color:#e5231d;font-size:9px;font-style:normal;line-height:1;
}
.videoDetailActionReplay{
  color:#f5ffe5!important;
  border-color:rgba(169,229,27,.66)!important;
  background:linear-gradient(180deg,#78a915,#517809)!important;
  box-shadow:0 7px 18px rgba(103,151,12,.10)!important;
}
.videoDetailActionReplay:hover{
  border-color:#b9ef3a!important;
  background:linear-gradient(180deg,#86ba1b,#5c840d)!important;
}
.videoDetailCommentAction{
  color:#fff!important;
  border-color:rgba(255,86,74,.42)!important;
  background:linear-gradient(180deg,rgba(125,29,25,.96),rgba(77,18,16,.98))!important;
  box-shadow:none!important;
}
.videoDetailCommentAction:hover{
  border-color:rgba(255,116,105,.72)!important;
  background:linear-gradient(180deg,rgba(150,35,30,.98),rgba(91,21,19,.99))!important;
}
.videoDetailYoutubeCommentGlyph{
  width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:#ff332b;font-size:5px;font-style:normal;line-height:1;
}
.videoDetailRelatedPanel{
  overflow:hidden!important;
}
.videoDetailRelatedList{
  padding:4px 10px 9px!important;
  display:grid!important;
}
.videoDetailRelatedItem{
  min-height:91px!important;
  padding:10px 0!important;
  grid-template-columns:138px minmax(0,1fr)!important;
  gap:11px!important;
}
.videoDetailRelatedThumb{width:138px!important;border-radius:5px!important}
.videoDetailRelatedThumb span{font-size:6.8px!important;padding:2px 5px!important}
.videoDetailRelatedItem strong{
  font-size:9.7px!important;
  line-height:1.29!important;
}
.videoDetailRelatedItem small{
  margin-top:6px!important;
  font-size:7.4px!important;
  color:#adb7b2!important;
}
.videoDetailRelatedItem em{
  margin-top:4px!important;
  font-size:7.2px!important;
  color:#85918b!important;
}
@media(max-width:1100px){
  .videoDetailRelatedItem{grid-template-columns:118px minmax(0,1fr)!important;gap:9px!important}
  .videoDetailRelatedThumb{width:118px!important}
  .videoDetailActionsInline{gap:6px!important}
  .videoDetailAction{padding:0 10px!important;font-size:7.2px!important}
}
@media(max-width:900px){
  .videoDetailActionsInline{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:650px){
  .videoDetailActionsInline{grid-template-columns:1fr!important}
  .videoDetailMetaInline{font-size:8px!important}
}


/* =====================================================================
   v0.3.5.224 — VIDEO DETAIL RELATED LIMIT + ACTION TYPE/COMMENT ICON FIX
   Show up to ten OTHER videos, replace the ambiguous comment dot with a
   proper speech-bubble glyph, and improve action-button text readability.
   ===================================================================== */
.videoDetailAction{
  min-height:38px!important;
  padding:0 15px!important;
  gap:8px!important;
  font-size:8.9px!important;
  font-weight:900!important;
  letter-spacing:.025em!important;
}
.videoDetailYoutubeGlyph{
  width:20px!important;
  height:14px!important;
  font-size:7.4px!important;
}
.videoDetailYoutubeCommentGlyph{
  position:relative!important;
  width:18px!important;
  height:15px!important;
  flex:0 0 auto!important;
  display:block!important;
  border:1.7px solid #fff!important;
  border-radius:5px!important;
  background:transparent!important;
  color:transparent!important;
  font-size:0!important;
  box-sizing:border-box!important;
}
.videoDetailYoutubeCommentGlyph:before{
  content:""!important;
  position:absolute!important;
  left:3px!important;
  right:3px!important;
  top:4px!important;
  height:1.5px!important;
  border-radius:2px!important;
  background:#fff!important;
  box-shadow:0 3px 0 #fff!important;
  opacity:.94!important;
}
.videoDetailYoutubeCommentGlyph:after{
  content:""!important;
  position:absolute!important;
  left:3px!important;
  bottom:-4px!important;
  width:6px!important;
  height:6px!important;
  border-left:1.7px solid #fff!important;
  border-bottom:1.7px solid #fff!important;
  transform:skewY(-32deg) rotate(-6deg)!important;
  background:transparent!important;
}
@media(max-width:1100px){
  .videoDetailAction{min-height:37px!important;padding:0 12px!important;font-size:8.2px!important}
}


/* =====================================================================
   v0.3.5.225 — VIDEO DETAIL AMBIENT BACKGROUND PASS
   Add a subtle cinematic background layer to the video detail page so the
   page no longer sits on a flat black void. Keep the effect low-contrast,
   blurred, and premium so the player and cards remain primary.
   ===================================================================== */
.videoDetailPageApproved{
  position:relative!important;
  isolation:isolate!important;
  z-index:0!important;
}
.videoDetailPageApproved::before{
  content:"";
  position:fixed;
  inset:56px 0 0 0;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(780px 420px at 16% 22%,rgba(255,184,71,.10),rgba(255,184,71,0) 62%),
    radial-gradient(620px 320px at 76% 18%,rgba(169,229,27,.06),rgba(169,229,27,0) 64%),
    linear-gradient(180deg,rgba(3,8,8,.14),rgba(2,6,6,.48) 38%,rgba(2,5,5,.86) 100%),
    url('video_hub_hero_approved_bg.webp') center 20% / cover no-repeat;
  opacity:.22;
  filter:blur(14px) saturate(.72) brightness(.50);
  transform:scale(1.045);
}
.videoDetailPageApproved::after{
  content:"";
  position:fixed;
  inset:56px 0 0 0;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(1,4,4,.08),rgba(1,4,4,.34) 28%,rgba(1,4,4,.64) 60%,rgba(1,4,4,.90) 100%),
    radial-gradient(520px 180px at 50% 76%,rgba(255,188,88,.03),rgba(255,188,88,0) 72%);
}
.videoDetailLayoutApproved,
.videoDetailMainApproved,
.videoDetailSideApproved{position:relative;z-index:1}
.videoPlayerFrame{
  box-shadow:0 24px 72px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.02)!important;
}
.videoDetailInfoInlineApproved,
.videoDetailReplayWidePanel,
.videoDetailRelatedPanel,
.videoCommentsPanel{
  background:linear-gradient(145deg,rgba(10,18,17,.86),rgba(5,10,10,.90))!important;
  box-shadow:0 12px 34px rgba(0,0,0,.18)!important;
}
.videoDetailRelatedPanel,
.videoDetailReplayWidePanel,
.videoCommentsPanel{
  backdrop-filter:blur(4px);
}


/* =====================================================================
   v0.3.5.226 — YOUTUBE COMMENTS LIVE BRIDGE
   Real YouTube comment threads with live sorting, pagination and lazy replies.
   ===================================================================== */
.videoYoutubeCommentsHead{min-height:52px!important}
.videoYoutubeCommentsHead strong{font-size:8.6px!important}
.videoYoutubeCommentsHead span{font-size:6.8px!important;color:#87948d!important}
.videoCommentSort button{height:29px!important;padding:0 11px!important;font-size:7.2px!important}
.videoYoutubeCommentsList{background:linear-gradient(180deg,rgba(5,10,9,.18),rgba(5,10,9,.02))}
.videoYoutubeCommentRow{
  min-height:98px!important;
  padding:14px 14px!important;
  grid-template-columns:40px minmax(0,1fr)!important;
  gap:11px!important;
  transition:background .16s ease;
}
.videoYoutubeCommentRow:hover{background:rgba(169,229,27,.014)}
.videoYoutubeCommentAvatar{width:40px!important;height:40px!important}
.videoYoutubeCommentTop{gap:8px!important}
.videoYoutubeCommentTop strong,.videoYoutubeCommentTop a{
  color:#e8eeea!important;
  font-size:8.8px!important;
  font-weight:850!important;
  text-decoration:none!important;
}
.videoYoutubeCommentTop a:hover{color:#b9e74f!important}
.videoYoutubeCommentTop small{font-size:6.8px!important;color:#7c8982!important}
.videoYoutubeCommentBody p{margin:6px 0 8px!important;color:#bbc4bf!important;font-size:8.2px!important;line-height:1.52!important}
.videoYoutubeCommentMeta{display:flex!important;align-items:center!important;gap:6px!important;color:#819087!important;font-size:7px!important}
.videoCommentLikeGlyph{color:#9aa69f;font-size:10.5px;line-height:1}
.videoYoutubeCommentMeta button{
  margin-left:8px;
  padding:0;
  border:0;
  background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));
  color:#a9e51b;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
}
.videoYoutubeCommentMeta button:hover{color:#c8f468}
.videoYoutubeCommentMeta button:disabled{opacity:.55;cursor:wait}
.videoYoutubeCommentMeta button i{font-style:normal;font-size:9px;margin-left:2px}
.videoYoutubeReplies{
  margin-top:10px;
  padding:2px 0 0 13px;
  border-left:1px solid rgba(169,229,27,.18);
}
.videoYoutubeReplyRow{
  padding:9px 0;
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:9px;
  border-top:1px solid rgba(209,226,217,.055);
}
.videoYoutubeReplyRow:first-child{border-top:0}
.videoYoutubeReplyAvatar{width:30px;height:30px;border-radius:50%;overflow:hidden;background:#111b18;display:grid;place-items:center;color:#a9e51b;font-size:6px;font-weight:900;border:1px solid rgba(209,226,217,.09)}
.videoYoutubeReplyAvatar img{width:100%;height:100%;object-fit:cover;display:block}
.videoYoutubeReplyBody p{margin:4px 0 6px;color:#aeb9b3;font-size:7.7px;line-height:1.48}
.videoYoutubeRepliesEmpty{padding:10px 4px;color:#7f8c85;font-size:7px}
.videoCommentsMoreWrap{padding:12px 14px 14px;display:flex;justify-content:center;border-top:1px solid rgba(209,226,217,.055)}
.videoCommentsMore{
  min-width:230px;
  height:34px;
  padding:0 16px;
  border:1px solid rgba(169,229,27,.28);
  border-radius:4px;
  background:rgba(91,132,12,.11);
  color:#b9e74f;
  font-size:7.5px;
  font-weight:900;
  letter-spacing:.02em;
  cursor:pointer;
}
.videoCommentsMore:hover{border-color:rgba(169,229,27,.52);background:rgba(91,132,12,.17)}
.videoYoutubeCommentsLoading{padding:32px 14px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important}
.videoYoutubeCommentsLoading i{width:13px;height:13px;border:2px solid rgba(169,229,27,.20);border-top-color:#a9e51b;border-radius:50%;animation:videoCommentSpin .7s linear infinite}
.videoYoutubeCommentsLoading span{color:#87948d;font-size:7.4px}
@keyframes videoCommentSpin{to{transform:rotate(360deg)}}
@media(max-width:650px){
  .videoYoutubeCommentRow{grid-template-columns:34px minmax(0,1fr)!important;padding:12px!important}
  .videoYoutubeCommentAvatar{width:34px!important;height:34px!important}
  .videoYoutubeCommentBody p{font-size:8px!important}
  .videoCommentsMore{width:100%;min-width:0}
}

/* =====================================================================
   v0.3.5.227 — YOUTUBE COMMENTS READABILITY + YOUTUBE STYLE UX PASS
   YouTube-inspired reading rhythm in FermaniHUB's graphite visual system.
   ===================================================================== */
.videoYoutubeCommentsPanel{
  overflow:hidden!important;
  border-color:rgba(209,226,217,.13)!important;
  background:linear-gradient(180deg,rgba(9,16,15,.94),rgba(5,10,10,.96))!important;
  box-shadow:0 18px 48px rgba(0,0,0,.22)!important;
}
.videoYoutubeCommentsHead{
  min-height:58px!important;
  padding:0 16px!important;
  background:rgba(13,22,20,.72)!important;
  border-bottom:1px solid rgba(209,226,217,.085)!important;
}
.videoYoutubeCommentsTitle{display:flex!important;align-items:center!important;min-width:0!important}
.videoYoutubeCommentsTitle>i{width:19px!important;margin-right:9px!important}
.videoYoutubeCommentsHead strong{font-size:9.8px!important;letter-spacing:.025em!important}
.videoYoutubeCommentsHead span{
  margin-left:10px!important;
  padding-left:10px!important;
  position:relative!important;
  color:#9aa69f!important;
  font-size:8.3px!important;
  font-weight:650!important;
}
.videoYoutubeCommentsHead span:before{
  content:"";position:absolute;left:0;top:50%;width:3px;height:3px;border-radius:50%;
  background:#647169;transform:translateY(-50%);
}
.videoCommentSort{gap:5px!important}
.videoCommentSort button{
  height:32px!important;padding:0 13px!important;border-radius:5px!important;
  font-size:8.4px!important;font-weight:850!important;
}
.videoYoutubeCommentsList{background:transparent!important}
.videoYoutubeCommentRow{
  min-height:112px!important;
  padding:17px 16px 16px!important;
  grid-template-columns:44px minmax(0,1fr)!important;
  gap:13px!important;
  border-bottom:1px solid rgba(209,226,217,.065)!important;
  background:transparent!important;
}
.videoYoutubeCommentRow:last-of-type{border-bottom:0!important}
.videoYoutubeCommentRow:hover{background:rgba(255,255,255,.012)!important}
.videoYoutubeCommentAvatar{
  width:44px!important;height:44px!important;
  border:1px solid rgba(209,226,217,.09)!important;
  box-shadow:0 5px 15px rgba(0,0,0,.16)!important;
}
.videoYoutubeCommentTop{gap:9px!important;min-height:18px!important;align-items:center!important}
.videoYoutubeCommentTop strong,.videoYoutubeCommentTop a{
  color:#f0f4f1!important;
  font-size:10.5px!important;
  font-weight:850!important;
  line-height:1.2!important;
}
.videoYoutubeCommentTop small{
  color:#7f8c85!important;
  font-size:8.4px!important;
  line-height:1.2!important;
}
.videoYoutubeCommentBody p{
  max-width:920px!important;
  margin:7px 0 10px!important;
  color:#d0d7d3!important;
  font-size:10.8px!important;
  line-height:1.58!important;
  letter-spacing:.002em!important;
}
.videoYoutubeCommentMeta{
  min-height:23px!important;
  gap:7px!important;
  color:#96a29b!important;
  font-size:8.5px!important;
}
.videoCommentLikeGlyph{
  width:14px!important;height:14px!important;display:inline-block!important;flex:0 0 14px!important;
  background:#8c9992!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 21H3V9h4v12Zm2 0V9.7l4.4-6.2c.5-.7 1.6-.6 2 .1.2.4.2.8.1 1.2L14.7 9H20c1.2 0 2.1 1.1 1.9 2.3l-1.5 8c-.2 1-1 1.7-2 1.7H9Z'/%3E%3C/svg%3E") center/contain no-repeat!important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 21H3V9h4v12Zm2 0V9.7l4.4-6.2c.5-.7 1.6-.6 2 .1.2.4.2.8.1 1.2L14.7 9H20c1.2 0 2.1 1.1 1.9 2.3l-1.5 8c-.2 1-1 1.7-2 1.7H9Z'/%3E%3C/svg%3E") center/contain no-repeat!important;
}
.videoYoutubeCommentMeta button{
  margin-left:12px!important;
  min-height:26px!important;
  padding:0 10px!important;
  border-radius:13px!important;
  color:#b8e84c!important;
  background:rgba(169,229,27,.055)!important;
  font-size:8.5px!important;
  font-weight:850!important;
}
.videoYoutubeCommentMeta button:hover{background:rgba(169,229,27,.10)!important;color:#d1f67c!important}
.videoYoutubeReplies{
  margin-top:11px!important;
  margin-left:3px!important;
  padding:2px 0 1px 17px!important;
  border-left:2px solid rgba(169,229,27,.18)!important;
}
.videoYoutubeReplyRow{
  padding:11px 0!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  gap:10px!important;
  border-top:1px solid rgba(209,226,217,.05)!important;
}
.videoYoutubeReplyAvatar{width:34px!important;height:34px!important}
.videoYoutubeReplyBody p{
  max-width:860px!important;
  margin:5px 0 8px!important;
  color:#c1cbc5!important;
  font-size:9.8px!important;
  line-height:1.54!important;
}
.videoCommentsMoreWrap{
  padding:16px!important;
  border-top:1px solid rgba(209,226,217,.065)!important;
  background:rgba(10,17,16,.44)!important;
}
.videoCommentsMore{
  min-width:270px!important;
  height:38px!important;
  padding:0 18px!important;
  border-radius:19px!important;
  font-size:8.7px!important;
  letter-spacing:.015em!important;
}
.videoYoutubeCommentsEmpty{padding:46px 18px!important}
.videoYoutubeCommentsEmpty strong{font-size:10px!important}
.videoYoutubeCommentsEmpty span{font-size:9px!important;line-height:1.5!important}
.videoYoutubeCommentsLoading{padding:42px 16px!important}
.videoYoutubeCommentsLoading span{font-size:8.8px!important}
@media(max-width:650px){
  .videoYoutubeCommentsHead{padding:9px 12px!important;align-items:flex-start!important;gap:8px!important}
  .videoYoutubeCommentsTitle{align-items:flex-start!important;flex-wrap:wrap!important}
  .videoYoutubeCommentsHead span{margin-left:28px!important;margin-top:-3px!important;padding-left:0!important;width:100%!important}
  .videoYoutubeCommentsHead span:before{display:none!important}
  .videoYoutubeCommentRow{grid-template-columns:38px minmax(0,1fr)!important;padding:14px 12px!important;gap:10px!important}
  .videoYoutubeCommentAvatar{width:38px!important;height:38px!important}
  .videoYoutubeCommentTop strong,.videoYoutubeCommentTop a{font-size:10px!important}
  .videoYoutubeCommentBody p{font-size:10.2px!important}
  .videoYoutubeReplies{padding-left:12px!important}
}

/* =====================================================================
   v0.3.5.229 — YOUTUBE COMMENTS FULL WIDTH + COMPACT DENSITY PASS
   Move YouTube comments below the entire player/sidebar row, use the full
   FermaniHUB content width, and tighten vertical rhythm while increasing
   actual text readability.
   ===================================================================== */
.videoYoutubeCommentsFullWidth{
  position:relative;
  z-index:1;
  width:100%;
  margin-top:12px!important;
  background:linear-gradient(180deg,rgba(10,17,16,.95),rgba(5,10,10,.97))!important;
  border-color:rgba(209,226,217,.14)!important;
  box-shadow:0 20px 52px rgba(0,0,0,.22)!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeCommentsHead{
  min-height:56px!important;
  padding:0 18px!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeCommentsHead strong{
  font-size:10.2px!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeCommentsHead span{
  font-size:8.6px!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeCommentsList{
  width:100%;
}
.videoYoutubeCommentsFullWidth .videoYoutubeCommentRow{
  min-height:0!important;
  padding:11px 18px 10px!important;
  grid-template-columns:44px minmax(0,1fr)!important;
  gap:13px!important;
  align-items:start!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeCommentTop{
  min-height:0!important;
  gap:9px!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeCommentTop strong,
.videoYoutubeCommentsFullWidth .videoYoutubeCommentTop a{
  font-size:11.5px!important;
  line-height:1.25!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeCommentTop small{
  font-size:8.9px!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeCommentBody p{
  max-width:1120px!important;
  margin:5px 0 6px!important;
  color:#d6ddd9!important;
  font-size:12.2px!important;
  line-height:1.47!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeCommentMeta{
  min-height:18px!important;
  gap:6px!important;
  font-size:8.8px!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeCommentMeta button{
  margin-left:8px!important;
  min-height:22px!important;
  padding:0 8px!important;
  font-size:8.7px!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeReplies{
  margin-top:7px!important;
  padding:1px 0 0 16px!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeReplyRow{
  padding:8px 0!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  gap:10px!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeReplyBody p{
  max-width:1060px!important;
  margin:4px 0 5px!important;
  font-size:10.9px!important;
  line-height:1.46!important;
}
.videoYoutubeCommentsFullWidth .videoCommentsMoreWrap{
  padding:12px 16px!important;
}
.videoYoutubeCommentsFullWidth .videoCommentsMore{
  height:36px!important;
  min-width:280px!important;
  font-size:8.9px!important;
}
@media(max-width:900px){
  .videoYoutubeCommentsFullWidth{margin-top:10px!important}
}
@media(max-width:650px){
  .videoYoutubeCommentsFullWidth .videoYoutubeCommentsHead{padding:9px 12px!important}
  .videoYoutubeCommentsFullWidth .videoYoutubeCommentRow{
    grid-template-columns:38px minmax(0,1fr)!important;
    padding:11px 12px 10px!important;
    gap:10px!important;
  }
  .videoYoutubeCommentsFullWidth .videoYoutubeCommentTop strong,
  .videoYoutubeCommentsFullWidth .videoYoutubeCommentTop a{font-size:10.6px!important}
  .videoYoutubeCommentsFullWidth .videoYoutubeCommentTop small{font-size:8.2px!important}
  .videoYoutubeCommentsFullWidth .videoYoutubeCommentBody p{font-size:10.8px!important;line-height:1.48!important}
  .videoYoutubeCommentsFullWidth .videoCommentsMore{width:100%!important;min-width:0!important}
}


/* =====================================================================
   v0.3.5.230 — YOUTUBE COMMENTS CARD SURFACE + MESSAGE SIZE PASS
   Give each comment a subtle graphite card surface and improve message
   readability without making the page feel heavy.
   ===================================================================== */
.videoYoutubeCommentsFullWidth .videoYoutubeCommentsList{
  padding:12px 12px 2px!important;
  background:transparent!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeCommentRow{
  min-height:0!important;
  margin:0 0 10px!important;
  padding:14px 15px 13px!important;
  border:1px solid rgba(209,226,217,.075)!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,rgba(13,22,21,.78),rgba(8,14,13,.84))!important;
  box-shadow:0 10px 24px rgba(0,0,0,.14)!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeCommentRow:hover{
  background:linear-gradient(180deg,rgba(15,25,24,.84),rgba(9,16,15,.90))!important;
  border-color:rgba(209,226,217,.11)!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeCommentRow:last-of-type{margin-bottom:0!important}
.videoYoutubeCommentsFullWidth .videoYoutubeCommentAvatar{
  width:46px!important;height:46px!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeCommentTop{min-height:20px!important;gap:10px!important}
.videoYoutubeCommentsFullWidth .videoYoutubeCommentTop strong,
.videoYoutubeCommentsFullWidth .videoYoutubeCommentTop a{
  font-size:11.2px!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeCommentTop small{
  font-size:8.7px!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeCommentBody p{
  max-width:980px!important;
  margin:8px 0 9px!important;
  color:#d8dedb!important;
  font-size:12.2px!important;
  line-height:1.56!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeCommentMeta{
  min-height:22px!important;
  gap:8px!important;
  font-size:8.8px!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeCommentMeta button{
  min-height:28px!important;
  padding:0 11px!important;
  font-size:8.8px!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeReplies{
  margin-top:10px!important;
  margin-left:2px!important;
  padding:3px 0 0 15px!important;
  border-left:2px solid rgba(169,229,27,.16)!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeReplyRow{
  margin-top:8px!important;
  padding:10px 12px 10px 0!important;
  border:0!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.018)!important;
}
.videoYoutubeCommentsFullWidth .videoYoutubeReplyAvatar{width:32px!important;height:32px!important}
.videoYoutubeCommentsFullWidth .videoYoutubeReplyBody p{
  font-size:10.4px!important;
  line-height:1.5!important;
  margin:4px 0 6px!important;
}
.videoYoutubeCommentsFullWidth .videoCommentsMoreWrap{
  padding:16px 12px 14px!important;
  background:transparent!important;
  border-top:0!important;
}
@media(max-width:650px){
  .videoYoutubeCommentsFullWidth .videoYoutubeCommentsList{padding:10px 10px 2px!important}
  .videoYoutubeCommentsFullWidth .videoYoutubeCommentRow{
    padding:13px 12px 12px!important;
    border-radius:10px!important;
  }
  .videoYoutubeCommentsFullWidth .videoYoutubeCommentAvatar{width:40px!important;height:40px!important}
  .videoYoutubeCommentsFullWidth .videoYoutubeCommentTop strong,
  .videoYoutubeCommentsFullWidth .videoYoutubeCommentTop a{font-size:10.8px!important}
  .videoYoutubeCommentsFullWidth .videoYoutubeCommentBody p{font-size:11.2px!important;line-height:1.52!important}
}

/* =====================================================================
   v0.3.5.233 — WARGAMING ID AUTH + FERMANIHUB USER ACCOUNTS FOUNDATION
   ===================================================================== */
.approvedAuthSlot{display:flex;align-items:center;gap:6px;min-width:0}
.approvedAccountButton{display:flex!important;align-items:center!important;gap:7px!important;max-width:190px!important;padding:0 11px!important;color:#eef4ef!important;border-color:rgba(169,229,27,.24)!important;background:linear-gradient(180deg,rgba(39,55,31,.34),rgba(12,19,16,.62))!important}
.approvedAccountButton>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.approvedAccountWG{display:inline-grid;place-items:center;width:22px;height:16px;border-radius:3px;background:rgba(169,229,27,.14);color:#b9e74f;font-size:9px;font-weight:950;letter-spacing:.03em;border:1px solid rgba(169,229,27,.18)}
.approvedAuthLogout{height:30px;padding:0 9px;border:1px solid rgba(209,226,217,.10);border-radius:4px;background:rgba(13,20,18,.64);color:#89968f;font-size:7.3px;font-weight:800;line-height:1;letter-spacing:.025em;cursor:pointer;transition:.15s ease}
.approvedAuthLogout:hover{color:#eef3ef;border-color:rgba(209,226,217,.22);background:rgba(22,31,28,.82)}
@media(max-width:850px){.approvedAuthLogout{display:none}.approvedAccountButton{max-width:135px!important}.approvedAccountWG{display:none}}


/* =====================================================================
   v0.3.5.237 — LIVE HEART LIKE UI + REALTIME PULSE PASS
   Modern heart-like controls with live pulse sync across cards and pages.
   ===================================================================== */
.rhLikeControl{
  --rh-like-fg:#c0ccc5;--rh-like-border:rgba(196,212,204,.16);--rh-like-bg:linear-gradient(180deg,rgba(13,20,19,.86),rgba(6,11,10,.92));
  appearance:none;position:relative;isolation:isolate;overflow:visible;border:1px solid var(--rh-like-border);background:var(--rh-like-bg);color:var(--rh-like-fg);
  min-height:30px;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:inherit;font-size:8.2px;font-weight:900;line-height:1;white-space:nowrap;cursor:pointer;text-decoration:none;
  box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.rhLikeGlow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(169,229,27,.14),transparent 68%);opacity:0;transition:opacity .18s ease}
.rhLikeControl:hover{border-color:rgba(169,229,27,.42);color:#eef6da;background:linear-gradient(180deg,rgba(20,29,26,.92),rgba(10,16,14,.98));box-shadow:0 10px 24px rgba(0,0,0,.22),0 0 0 1px rgba(169,229,27,.04) inset}
.rhLikeControl:hover .rhLikeGlow{opacity:1}
.rhLikeControl.is-liked{--rh-like-fg:#f2ffcb;--rh-like-border:rgba(169,229,27,.70);--rh-like-bg:linear-gradient(180deg,rgba(82,118,15,.78),rgba(48,76,8,.92));box-shadow:0 12px 28px rgba(0,0,0,.22),0 0 20px rgba(169,229,27,.14), inset 0 1px 0 rgba(255,255,255,.08)}
.rhLikeControl.is-busy{opacity:.62;pointer-events:none}
.rhLikeControl.like-pop{animation:rhLikePop .34s cubic-bezier(.2,.9,.22,1)}
.rhLikeControl.like-live-pop{animation:rhLikeLiveHeartbeat .48s cubic-bezier(.18,.84,.22,1)}
@keyframes rhLikePop{0%{transform:scale(1)}38%{transform:scale(1.18)}70%{transform:scale(.96)}100%{transform:scale(1)}}
@keyframes rhLikeLiveHeartbeat{0%{transform:scale(1)}26%{transform:scale(1.08)}42%{transform:scale(.98)}58%{transform:scale(1.06)}100%{transform:scale(1)}}
.rhLikeBurst{position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:999px;border:1px solid rgba(169,229,27,.55);transform:translate(-50%,-50%) scale(.55);opacity:0;pointer-events:none}
.rhLikeBurst.is-show{animation:rhLikeBurstRing .52s ease}
@keyframes rhLikeBurstRing{0%{transform:translate(-50%,-50%) scale(.55);opacity:.75}85%{transform:translate(-50%,-50%) scale(2.2);opacity:0}100%{opacity:0}}
.rhLikeDelta{position:absolute;left:50%;top:-8px;transform:translateX(-50%) translateY(0);min-width:18px;padding:0 4px;height:15px;border-radius:999px;background:rgba(10,15,13,.88);border:1px solid rgba(169,229,27,.34);display:grid;place-items:center;color:#dfff8e;font-size:9px;font-weight:900;opacity:0;pointer-events:none;box-shadow:0 8px 14px rgba(0,0,0,.24)}
.rhLikeDelta.is-positive{color:#efffc4}
.rhLikeDelta.is-live{background:rgba(16,23,20,.96)}
.rhLikeDelta.is-show{animation:rhLikeDeltaFloat .9s cubic-bezier(.2,.76,.2,1)}
@keyframes rhLikeDeltaFloat{0%{opacity:0;transform:translateX(-50%) translateY(2px) scale(.85)}12%{opacity:1;transform:translateX(-50%) translateY(-2px) scale(1)}68%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-16px) scale(.98)}}
.rhLikeGlyph{width:14px;height:14px;display:block;flex:0 0 14px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35 10.55 20C5.4 15.24 2 12.09 2 8.25 2 5.1 4.42 2.75 7.5 2.75c1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.35 5.5 5.5 0 3.84-3.4 6.99-8.55 11.76L12 21.35Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35 10.55 20C5.4 15.24 2 12.09 2 8.25 2 5.1 4.42 2.75 7.5 2.75c1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.35 5.5 5.5 0 3.84-3.4 6.99-8.55 11.76L12 21.35Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.rhLikeControl b{font-size:inherit;color:inherit!important;line-height:1}
.rhLike-card{min-height:25px;padding:0 8px 0 9px;border-radius:999px;font-size:7.55px;background:linear-gradient(180deg,rgba(5,10,9,.74),rgba(6,10,9,.88))}
.cardFootActions{display:inline-flex!important;align-items:center!important;gap:9px!important;color:inherit!important}
.cardFootActions .rhLikeControl{position:relative;z-index:5}
.approvedReplaysMockup .cardFoot .cardFootActions{color:inherit!important}
.approvedReplaysMockup .cardFoot .rhLikeControl{color:#aeb9b3!important}
.approvedReplaysMockup .cardFoot .rhLikeControl.is-liked{color:#f4ffd2!important}
.approvedReplaysMockup .cardFoot .rhLikeControl b{color:inherit!important;text-shadow:none!important}

.rhLike-video-card{min-height:28px;padding:0 10px;border-radius:999px;font-size:7.45px}
.videoCardBottomRowActionsOnly{display:flex!important;grid-template-columns:none!important;align-items:center!important;justify-content:space-between!important;gap:8px!important}
.videoCardBottomRowActionsOnly .videoCardActions{justify-self:auto!important;margin-left:auto}

.videoFeaturedCardApproved{position:relative!important}
.rhLike-featured{position:absolute;right:9px;top:8px;z-index:8;min-height:25px;padding:0 8px 0 9px;border-radius:999px;font-size:8.5px;background:rgba(3,7,7,.84);backdrop-filter:blur(9px)}

.rhLike-detail{min-height:37px!important;padding:0 14px!important;font-size:8px!important;gap:8px!important;border-radius:999px!important}
.rhLike-detail span{font-size:inherit;font-weight:900;letter-spacing:.02em}
.videoDetailActionsInline>.rhLike-detail{color:#eef8d2!important;border-color:rgba(169,229,27,.42)!important;background:linear-gradient(180deg,rgba(33,46,16,.82),rgba(16,26,11,.94))!important}
.videoDetailActionsInline>.rhLike-detail.is-liked{color:#fbffef!important;border-color:#a9e51b!important;background:linear-gradient(180deg,#7dac18,#56870d)!important}

.approvedLikeAction{padding:0!important;overflow:visible;background:transparent!important;border:0!important}
.approvedLikeAction .rhLike-detail{height:100%!important;min-height:100%!important}

.rhLikeLoginPrompt{position:fixed;left:50%;bottom:28px;z-index:250;transform:translateX(-50%);width:min(520px,calc(100% - 28px));
  padding:14px 15px 14px 17px;border:1px solid rgba(169,229,27,.32);border-radius:8px;background:linear-gradient(145deg,rgba(14,23,21,.98),rgba(5,10,9,.99));
  box-shadow:0 22px 70px rgba(0,0,0,.58),0 0 24px rgba(169,229,27,.05);display:flex;align-items:center;justify-content:space-between;gap:16px;backdrop-filter:blur(18px)}
.rhLikeLoginPrompt>div:first-child{display:grid;gap:4px}.rhLikeLoginPrompt strong{font-size:11.5px;letter-spacing:.04em;color:#f2f6f3}.rhLikeLoginPrompt span{font-size:9px;color:#8f9c95}
.rhLikeLoginActions{display:flex;gap:7px}.rhLikeLoginActions button{height:31px;padding:0 12px;border-radius:4px;border:1px solid rgba(209,226,217,.15);background:#0b1210;color:#b8c3bd;font-size:7.5px;font-weight:900;cursor:pointer}
.rhLikeLoginActions button:first-child{border-color:rgba(169,229,27,.6);background:linear-gradient(#79aa17,#50790a);color:#fff}.rhLikeLoginActions button:hover{filter:brightness(1.08)}
@media(max-width:650px){
  .rhLikeLoginPrompt{align-items:stretch;flex-direction:column}.rhLikeLoginActions button{flex:1}
  .rhLike-detail span{display:none}.approvedLikeAction .rhLike-detail{width:42px!important;padding:0!important}.rhLike-featured{top:6px;right:6px}
}

/* =====================================================================
   v0.3.5.235 — ANON LIKE GAMING TOOLTIP PASS
   Replace dry native/system auth hints on likes with FermaniHUB-styled gaming
   popups for anonymous users.
   ===================================================================== */
.rhLikeHoverPrompt{
  position:fixed;z-index:260;pointer-events:none;max-width:min(280px,calc(100vw - 20px));
  padding:10px 12px 9px;border-radius:10px;border:1px solid rgba(169,229,27,.44);
  background:linear-gradient(180deg,rgba(12,20,18,.98),rgba(7,12,11,.98));
  box-shadow:0 18px 38px rgba(0,0,0,.34),0 0 18px rgba(169,229,27,.08),inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:blur(5px)
}
.rhLikeHoverPrompt::after{
  content:"";position:absolute;left:50%;width:12px;height:12px;margin-left:-6px;transform:rotate(45deg);
  background:linear-gradient(180deg,rgba(12,20,18,.98),rgba(7,12,11,.98));border-right:1px solid rgba(169,229,27,.44);border-bottom:1px solid rgba(169,229,27,.44)
}
.rhLikeHoverPrompt[data-place="top"]::after{bottom:-7px}
.rhLikeHoverPrompt[data-place="bottom"]::after{top:-7px;transform:rotate(225deg)}
.rhLikeHoverPrompt strong{display:block;font-size:10.5px;line-height:1.15;letter-spacing:.085em;color:#dcf49d;margin:0 0 4px;text-shadow:0 0 12px rgba(169,229,27,.14)}
.rhLikeHoverPrompt span{display:block;font-size:9px;line-height:1.35;color:#b8c4be}
.rhLikeLoginPrompt{
  position:fixed;left:50%;bottom:28px;z-index:250;transform:translateX(-50%);width:min(460px,calc(100% - 28px));
  display:grid;gap:12px;padding:14px 14px 13px;border-radius:14px;
  border:1px solid rgba(169,229,27,.38);
  background:linear-gradient(180deg,rgba(14,21,19,.98),rgba(8,13,12,.98));
  box-shadow:0 20px 50px rgba(0,0,0,.35),0 0 18px rgba(169,229,27,.07),inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(6px)
}
.rhLikeLoginLead{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start}
.rhLikeLoginLead>i{width:26px;height:26px;border-radius:8px;border:1px solid rgba(169,229,27,.4);background:linear-gradient(180deg,rgba(140,196,26,.24),rgba(84,119,13,.18));box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);position:relative}
.rhLikeLoginLead>i::before,.rhLikeLoginLead>i::after{content:"";position:absolute;background:currentColor;color:#dbf28b;border-radius:2px}
.rhLikeLoginLead>i::before{width:12px;height:4px;left:6px;top:11px;transform:rotate(-45deg)}
.rhLikeLoginLead>i::after{width:4px;height:12px;left:11px;top:6px;transform:rotate(-45deg)}
.rhLikeLoginLead strong{display:block;font-size:11.5px;letter-spacing:.08em;color:#eff6ea;margin:0 0 5px}
.rhLikeLoginLead span{display:block;font-size:8.2px;line-height:1.38;color:#9dac9f}
.rhLikeLoginActions{display:flex;gap:8px}
.rhLikeLoginActions button{height:34px;padding:0 14px;border-radius:8px;border:1px solid rgba(209,226,217,.12);background:#0c1311;color:#c7d1cc;font-size:8.3px;font-weight:900;letter-spacing:.055em;cursor:pointer;transition:filter .15s ease,transform .15s ease,border-color .15s ease}
.rhLikeLoginActions button:first-child{border-color:rgba(169,229,27,.62);background:linear-gradient(180deg,#79aa17,#50790a);color:#fff;box-shadow:0 6px 18px rgba(112,168,14,.22)}
.rhLikeLoginActions button:hover{filter:brightness(1.08);transform:translateY(-1px)}
@media(max-width:560px){
  .rhLikeLoginPrompt{padding:12px 12px 11px;width:min(100% - 18px,420px)}
  .rhLikeLoginActions{flex-direction:column}
  .rhLikeLoginActions button{width:100%}
}

/* =====================================================================
   v0.3.5.236 — LIKE LOGIN INVITE COPY + BRAND COLOR FIX
   Softer conversion-oriented login copy and logo-color FERMANIHUB wordmark.
   ===================================================================== */
.rhBrandWord{white-space:nowrap;color:#f2f5f3!important;font-weight:inherit!important}
.rhBrandWord>span{color:var(--approved-gold,#e9b84b)!important}
.rhLikeLoginLead strong .rhBrandWord{letter-spacing:.02em!important}
.rhLikeLoginLead>i::before,.rhLikeLoginLead>i::after{background:#d8ef98!important}
.rhLikeLoginActions button:first-child{min-width:190px!important}
@media(max-width:560px){.rhLikeLoginActions button:first-child{min-width:0!important}}

/* =====================================================================
   v0.3.5.239 — LIKE UI READABILITY SCALE PASS
   Readability-only visual pass. Likes/auth/realtime mechanics stay unchanged.
   ===================================================================== */

/* Solid FermaniHUB heart: ~30% larger, permanently red, no outline. */
.rhLikeGlyph{
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  background:#ff4655!important;
  color:#ff4655!important;
  filter:none!important;
}

/* General like counter readability + centered vertical rhythm. */
.rhLikeControl{
  min-height:32px;
  gap:8px;
  font-size:9.2px;
  line-height:1;
}
.rhLikeControl b{
  font-size:inherit!important;
  line-height:1!important;
  font-weight:950!important;
  font-variant-numeric:tabular-nums;
}
.rhLike-card{
  min-height:29px;
  padding:0 9px 0 10px;
  font-size:8.45px;
  gap:7px;
}
.rhLike-video-card{
  min-height:31px;
  padding:0 14px;
  font-size:8.55px;
  gap:7px;
}
.rhLike-featured{
  min-height:29px;
  padding:0 9px 0 10px;
  font-size:8.3px;
  gap:7px;
}
.rhLike-detail{
  min-height:40px!important;
  padding:0 15px!important;
  font-size:9.6px!important;
  gap:9px!important;
}
.rhLike-detail span{
  font-size:inherit!important;
  font-weight:950!important;
  letter-spacing:.025em!important;
  line-height:1!important;
}

/* Live +1 / delta chip: ~20–25% larger, still compact. */
.rhLikeDelta{
  top:-10px;
  min-width:22px;
  height:18px;
  padding:0 6px;
  font-size:8.7px;
  line-height:1;
  font-weight:950;
  border-radius:999px;
}

/* Anonymous hover tooltip — stronger hierarchy and easier reading. */
.rhLikeHoverPrompt{
  max-width:min(310px,calc(100vw - 20px));
  padding:12px 14px 11px;
  border-radius:11px;
}
.rhLikeHoverPrompt strong{
  font-size:10.8px;
  line-height:1.18;
  letter-spacing:.075em;
  margin:0 0 6px;
}
.rhLikeHoverPrompt span{
  font-size:9.6px;
  line-height:1.42;
}

/* Login invite popup — scale text/buttons without changing popup mechanics. */
.rhLikeLoginPrompt{
  gap:12px;
  padding:17px 17px 16px;
}
.rhLikeLoginLead{
  grid-template-columns:30px minmax(0,1fr);
  gap:12px;
}
.rhLikeLoginLead>i{
  width:30px;
  height:30px;
}
.rhLikeLoginLead>i::before{width:14px;height:4px;left:7px;top:13px}
.rhLikeLoginLead>i::after{width:4px;height:14px;left:13px;top:7px}
.rhLikeLoginLead strong{
  font-size:12px;
  line-height:1.15;
  letter-spacing:.07em;
  margin:0 0 7px;
  white-space:nowrap;
}
.rhLikeLoginLead>div>span:not(.rhBrandWord){
  font-size:11.5px;
  line-height:1.45;
}

/* Keep the complete FERMANIHUB wordmark on one line and inline with "ВОЙДИ В". */
.rhBrandWord{
  display:inline!important;
  white-space:nowrap!important;
}
.rhBrandWord>span{
  display:inline!important;
  white-space:nowrap!important;
}

.rhLikeLoginActions{
  gap:9px;
}
.rhLikeLoginActions button{
  height:38px;
  padding:0 16px;
  font-size:9.7px;
  line-height:1;
  letter-spacing:.05em;
}
.rhLikeLoginActions button:first-child{
  min-width:214px!important;
}

@media(max-width:650px){
  .approvedLikeAction .rhLike-detail{width:50px!important;padding:0 6px!important}
}
@media(max-width:560px){
  .rhLikeLoginPrompt{padding:15px 14px 14px}
  .rhLikeLoginLead{grid-template-columns:28px minmax(0,1fr);gap:10px}
  .rhLikeLoginLead>i{width:28px;height:28px}
  .rhLikeLoginLead strong{font-size:11.4px}
  .rhLikeLoginLead>div>span:not(.rhBrandWord){font-size:9.6px}
  .rhLikeLoginActions button{height:39px;font-size:9.6px}
  .rhLikeLoginActions button:first-child{min-width:0!important}
}
/* Wordmark must inherit the enlarged title size despite the generic popup span rule. */
.rhLikeLoginLead strong .rhBrandWord,
.rhLikeLoginLead strong .rhBrandWord>span{
  font-size:inherit!important;
  line-height:inherit!important;
}


/* =====================================================================
   v0.3.5.240 — VIDEO META READABILITY + LIKE LABEL TUNE PASS
   Increase visibility of views/date metadata and replace the detail like
   label with concise English copy. Keep all existing page logic intact.
   ===================================================================== */

/* Views / upload-date readability on video hub cards. */
.videoCardStatsRow{
  gap:7px!important;
  min-height:18px!important;
}
.videoCardStatsRow small{
  font-size:9.2px!important;
  line-height:1.12!important;
  color:#c2cbc6!important;
  font-weight:700!important;
}
.videoCardStatsRow span{
  font-size:8.8px!important;
  line-height:1.1!important;
  color:#7f8c86!important;
}

/* Featured/new video meta: views + date must read clearly on desktop. */
.videoFeaturedStatsRow{
  gap:13px!important;
  margin-top:6px!important;
}
.videoFeaturedStatsRow .uiMaskIcon{
  width:12px!important;
  height:12px!important;
}
.videoFeaturedStatsRow small{
  font-size:8.4px!important;
  line-height:1.12!important;
  color:#bec8c3!important;
  font-weight:700!important;
}
.videoFeaturedReplayLine{
  font-size:8px!important;
  line-height:1.18!important;
  color:#a6b1ab!important;
}
.videoFeaturedReplayLine b{
  font-size:8.5px!important;
}

/* Video detail main meta line: channel / views / date / replay info. */
.videoDetailMetaInline{
  gap:10px!important;
  font-size:10px!important;
  line-height:1.28!important;
}
.videoDetailMetaInline strong{
  font-size:10.5px!important;
  color:#f2f6f3!important;
}
.videoDetailMetaInline span{
  padding-left:11px!important;
  color:#c0cac4!important;
  font-weight:650!important;
}
.videoDetailMetaInline span:before{
  width:3px!important;
  height:3px!important;
  background:#7d8b84!important;
}

/* Related video list meta: make views/date easier to see. */
.videoDetailRelatedItem small{
  margin-top:6px!important;
  font-size:7.9px!important;
  color:#bac4be!important;
}
.videoDetailRelatedItem em{
  margin-top:5px!important;
  font-size:8.2px!important;
  color:#9ba7a1!important;
  font-style:normal!important;
}

/* Linked replay micro meta in sidebar stays readable next to the big damage. */
.videoDetailReplayWideIdentity>small{
  font-size:7.9px!important;
  color:#aab5af!important;
}
.videoDetailReplayWideIdentity>em{
  font-size:7.7px!important;
  color:#b8c2bc!important;
}

/* Detail like button: concise English label and tighter geometry. */
.rhLike-detail{
  min-height:38px!important;
  padding:0 13px!important;
  gap:8px!important;
  font-size:9.1px!important;
}
.rhLike-detail span{
  letter-spacing:.07em!important;
}
.videoDetailActionsInline>.rhLike-detail{
  min-width:96px!important;
  justify-content:center!important;
}

@media(max-width:1100px){
  .videoDetailMetaInline{
    font-size:9.5px!important;
  }
  .videoDetailMetaInline strong{
    font-size:10px!important;
  }
}
@media(max-width:650px){
  .videoDetailMetaInline{
    font-size:8.9px!important;
    line-height:1.26!important;
  }
  .videoDetailMetaInline strong{
    font-size:9.4px!important;
  }
  .videoCardStatsRow small{
    font-size:8.7px!important;
  }
  .videoFeaturedStatsRow small{
    font-size:8px!important;
  }
}


/* =====================================================================
   v0.3.5.241 — VIDEO VIEWS/DATE STRONG READABILITY BOOST
   Follow-up pass: make views and publish date clearly visible on the
   video detail page and in related-video rows.
   ===================================================================== */

/* Main video detail meta row under the title. */
.videoDetailMetaInline{
  gap:12px!important;
  font-size:11.6px!important;
  line-height:1.32!important;
}
.videoDetailMetaInline strong{
  font-size:11.9px!important;
  color:#f3f7f4!important;
  font-weight:850!important;
}
.videoDetailMetaInline span{
  padding-left:12px!important;
  color:#d3ddd7!important;
  font-weight:800!important;
}
.videoDetailMetaInline span:before{
  width:4px!important;
  height:4px!important;
  background:#8c9a93!important;
}

/* Regular video cards / hub lists. */
.videoCardStatsRow{
  gap:8px!important;
  min-height:20px!important;
}
.videoCardStatsRow small{
  font-size:10.1px!important;
  line-height:1.14!important;
  color:#ced7d2!important;
  font-weight:800!important;
}
.videoCardStatsRow span{
  font-size:9.6px!important;
  color:#8f9c96!important;
}

/* Featured/new video card stats. */
.videoFeaturedStatsRow{
  gap:15px!important;
  margin-top:7px!important;
}
.videoFeaturedStatsRow .uiMaskIcon{
  width:13px!important;
  height:13px!important;
}
.videoFeaturedStatsRow small{
  font-size:9.2px!important;
  line-height:1.14!important;
  color:#d0d8d3!important;
  font-weight:800!important;
}

/* Related videos sidebar: views/date line especially important. */
.videoDetailRelatedItem small{
  margin-top:6px!important;
  font-size:8.2px!important;
  color:#c1cbc5!important;
}
.videoDetailRelatedItem em{
  margin-top:5px!important;
  font-size:9px!important;
  line-height:1.22!important;
  color:#b3beb8!important;
  font-style:normal!important;
  font-weight:750!important;
}

@media(max-width:1100px){
  .videoDetailMetaInline{
    font-size:10.7px!important;
  }
  .videoDetailMetaInline strong{
    font-size:11px!important;
  }
}
@media(max-width:650px){
  .videoDetailMetaInline{
    font-size:9.8px!important;
    line-height:1.28!important;
  }
  .videoDetailMetaInline strong{
    font-size:10.1px!important;
  }
  .videoCardStatsRow small{
    font-size:9.3px!important;
  }
  .videoFeaturedStatsRow small{
    font-size:8.6px!important;
  }
  .videoDetailRelatedItem em{
    font-size:8.4px!important;
  }
}


/* =====================================================================
   v0.3.5.242 — VIEW COUNT PRIORITY READABILITY PASS
   Views are a key battle-quality signal. Make them clearly visible, with
   the strongest boost in the right-side related-video cards.
   ===================================================================== */

/* Global view-count emphasis without changing video data or layout logic. */
.videoViewsValue{
  font-variant-numeric:tabular-nums!important;
  font-weight:950!important;
  color:#edf4f0!important;
  text-shadow:0 1px 10px rgba(0,0,0,.28)!important;
}

/* Main video: larger than before, but still secondary to the title. */
.videoDetailMetaInline .videoViewsValue{
  font-size:12.8px!important;
  line-height:1!important;
  color:#f3f7f4!important;
  font-weight:950!important;
}
.videoDetailMetaInline .videoDateValue{
  font-size:11.3px!important;
  color:#c8d1cc!important;
  font-weight:750!important;
}

/* RIGHT SIDEBAR: strongest increase. Views must be instantly readable. */
.videoDetailRelatedMeta{
  display:flex!important;
  align-items:baseline!important;
  gap:5px!important;
  margin-top:6px!important;
  overflow:visible!important;
  white-space:nowrap!important;
  text-overflow:clip!important;
  font-style:normal!important;
  line-height:1.08!important;
}
.videoDetailRelatedMeta .videoViewsValue{
  font-size:13.4px!important;
  line-height:1!important;
  color:#f4f8f5!important;
  font-weight:950!important;
}
.videoDetailRelatedMeta>span:not(.videoDateValue){
  font-size:9.5px!important;
  color:#77847e!important;
}
.videoDetailRelatedMeta .videoDateValue{
  font-size:10.2px!important;
  line-height:1!important;
  color:#aeb9b3!important;
  font-weight:750!important;
}

/* Regular Video Hub cards: make the view signal stronger than the date. */
.videoCardStatsRow .videoViewsValue{
  font-size:11.2px!important;
  color:#eef4f1!important;
  font-weight:950!important;
}
.videoCardStatsRow .videoDateValue{
  font-size:9.8px!important;
  color:#b5c0ba!important;
  font-weight:750!important;
}

/* Featured/new video card. */
.videoFeaturedStatsRow .videoViewsValue{
  font-size:10.4px!important;
  color:#eef4f1!important;
  font-weight:950!important;
}
.videoFeaturedStatsRow .videoDateValue{
  font-size:9px!important;
  color:#b7c1bc!important;
  font-weight:750!important;
}

@media(max-width:1100px){
  .videoDetailMetaInline .videoViewsValue{font-size:12px!important}
  .videoDetailRelatedMeta .videoViewsValue{font-size:12.6px!important}
  .videoDetailRelatedMeta .videoDateValue{font-size:9.8px!important}
}
@media(max-width:650px){
  .videoDetailMetaInline .videoViewsValue{font-size:11px!important}
  .videoDetailMetaInline .videoDateValue{font-size:9.8px!important}
  .videoDetailRelatedMeta .videoViewsValue{font-size:11.8px!important}
  .videoDetailRelatedMeta .videoDateValue{font-size:9.3px!important}
}


/* =====================================================================
   v0.3.5.243 — VIDEO META COLOR SEPARATION + PLAYER PROFILE LINK PASS
   Separate the visual hierarchy between the main video meta and the right
   sidebar cards, slightly reduce the oversized right-card counters, and
   route player nicknames to their FermaniHUB profile pages.
   ===================================================================== */

/* Premium number styling: modern, clean, not playful. */
.videoViewsValue{
  font-family:var(--approved-font), Bahnschrift, "Segoe UI", Arial, sans-serif!important;
  letter-spacing:.01em!important;
  font-variant-numeric:tabular-nums!important;
}

/* MAIN VIDEO META: warm premium pearl instead of stark white. */
.videoDetailMetaInline .videoViewsValue{
  font-size:12.2px!important;
  color:#efe4c8!important;
  font-weight:950!important;
  text-shadow:0 1px 10px rgba(0,0,0,.24), 0 0 10px rgba(233,184,75,.06)!important;
}
.videoDetailMetaInline .videoDateValue{
  font-size:10.8px!important;
  color:#aab4ae!important;
  font-weight:700!important;
}
.videoDetailMetaInline strong{
  color:#d7e0dc!important;
}
.videoDetailMetaInline span:not(.videoViewsValue):not(.videoDateValue):not(.videoDetailPlayerSlot){
  color:#bac4be!important;
}

/* RIGHT SIDEBAR: still important, but slightly smaller and cooler-toned. */
.videoDetailRelatedMeta{
  gap:4px!important;
}
.videoDetailRelatedMeta .videoViewsValue{
  font-size:12.1px!important;
  color:#e3ebe4!important;
  font-weight:950!important;
  text-shadow:0 1px 10px rgba(0,0,0,.26)!important;
}
.videoDetailRelatedMeta>span:not(.videoDateValue){
  font-size:8.8px!important;
  color:#6f7c76!important;
}
.videoDetailRelatedMeta .videoDateValue{
  font-size:9.5px!important;
  color:#9ca8a2!important;
  font-weight:700!important;
}
.videoDetailRelatedItem small{
  color:#97a39d!important;
}

/* Video hub / featured cards: same family, softer shades than the main detail row. */
.videoCardStatsRow .videoViewsValue{
  color:#dfe6df!important;
  font-size:10.8px!important;
}
.videoCardStatsRow .videoDateValue{
  color:#aab4ae!important;
  font-size:9.6px!important;
}
.videoFeaturedStatsRow .videoViewsValue{
  color:#e7dcc0!important;
  font-size:10.1px!important;
}
.videoFeaturedStatsRow .videoDateValue{
  color:#aeb7b1!important;
  font-size:8.9px!important;
}

/* Player nickname links to FermaniHUB profile. */
.videoReplayPlayerLink,
.videoDetailPlayerLink,
.videoDetailReplayPlayerLink{
  color:#d4dfd9!important;
  text-decoration:none!important;
  transition:color .15s ease, text-shadow .15s ease!important;
}
.videoReplayPlayerLink:hover,
.videoDetailPlayerLink:hover,
.videoDetailReplayPlayerLink:hover{
  color:#edf6f0!important;
  text-shadow:0 0 12px rgba(169,229,27,.12)!important;
}
.videoDetailPlayerSlot{display:inline-flex!important;align-items:center!important}
.videoReplayMetaLine .videoReplayPlayerLink,
.videoFeaturedReplayLine .videoReplayPlayerLink{
  color:#b9c5bf!important;
}
.videoReplayMetaLine .videoReplayPlayerLink:hover,
.videoFeaturedReplayLine .videoReplayPlayerLink:hover{
  color:#e9f2ed!important;
}
.videoDetailReplayWideIdentity .videoDetailReplayPlayerLink{
  color:#c5cfca!important;
}
.videoDetailReplayWideIdentity .videoDetailReplayPlayerLink:hover{
  color:#edf3ef!important;
}

@media(max-width:1100px){
  .videoDetailMetaInline .videoViewsValue{font-size:11.6px!important}
  .videoDetailRelatedMeta .videoViewsValue{font-size:11.6px!important}
  .videoDetailRelatedMeta .videoDateValue{font-size:9.2px!important}
}
@media(max-width:650px){
  .videoDetailMetaInline .videoViewsValue{font-size:10.8px!important}
  .videoDetailMetaInline .videoDateValue{font-size:9.8px!important}
  .videoDetailRelatedMeta .videoViewsValue{font-size:10.9px!important}
  .videoDetailRelatedMeta .videoDateValue{font-size:8.9px!important}
}


/* =====================================================================
   v0.3.5.244 — BATTLE REPORT WIDE TEAMS + UPWARD LIFT PASS
   Expand only the lower replay report (Personal / Teams / Detailed) so both
   team cards and all metrics fit cleanly. The approved hero stays unchanged.
   ===================================================================== */

/* Lift the lower report into the unused dark gap under the hero. */
@media (min-width:1251px){
  .cinematicReplayPage > .cinematicReportShell{
    position:relative!important;
    z-index:7!important;
    margin-top:-2px!important;
  }
}

/* Large desktop: lower report may be wider than the 1280px hero.
   1520px gives the two team tables enough room without shrinking typography. */
@media (min-width:1450px){
  .cinematicReplayPage > .cinematicReportShell{
    width:min(1520px,calc(100vw - 40px))!important;
    max-width:none!important;
    margin-left:50%!important;
    margin-right:0!important;
    transform:translateX(-50%)!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  .cinematicReplayPage .cinematicTabs{
    width:100%!important;
    padding-left:28px!important;
    padding-right:28px!important;
    box-sizing:border-box!important;
  }

  .cinematicReplayPage .battleReportContent.cinematicReportContent{
    width:100%!important;
    padding-left:28px!important;
    padding-right:28px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }

  /* Preserve the approved large team typography, but remove the old oversized
     hard minimums that caused the enemy card to run outside its column. */
  .cinematicReplayPage .cinematicTeamColumns,
  .cinematicReplayPage .cinematicTeamMembers .teamMember{
    grid-template-columns:58px minmax(170px,1.5fr) minmax(150px,1.08fr) 82px 76px 80px!important;
  }
}

/* Standard desktop: keep the 1280px page canvas, but guarantee that the second
   team remains fully visible by using a responsive six-column team grid. */
@media (min-width:1251px) and (max-width:1449px){
  .cinematicReplayPage .cinematicTeamColumns,
  .cinematicReplayPage .cinematicTeamMembers .teamMember{
    grid-template-columns:52px minmax(125px,1.42fr) minmax(105px,1fr) 68px 60px 64px!important;
    gap:6px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
  .cinematicReplayPage .cinematicTeamMembers .teamTank{
    width:50px!important;
  }
  .cinematicReplayPage .cinematicTeamMembers .teamTank img{
    max-width:50px!important;
  }
  .cinematicReplayPage .cinematicTeamMembers .teamPlayer strong{
    font-size:14.5px!important;
  }
  .cinematicReplayPage .cinematicTeamMembers .teamVehicle{
    font-size:13.5px!important;
  }
  .cinematicReplayPage .cinematicTeamMembers .teamMetric b{
    font-size:14.5px!important;
  }
}

/* Do not allow either team card to push the sibling off-screen. */
.cinematicReplayPage .cinematicTeamsGrid,
.cinematicReplayPage .cinematicTeam{
  min-width:0!important;
}
.cinematicReplayPage .cinematicTeam{
  overflow:hidden!important;
}


/* =====================================================================
   v0.3.5.245 — BATTLE REPORT HERO WIDTH CORRECTION
   Correct v0.3.5.244: the lower Personal / Teams / Detailed report must never
   extend beyond the approved replay hero. Keep the upward lift, but align the
   report's left and right edges exactly to the hero canvas.
   ===================================================================== */

@media (min-width:1251px){
  /* Exact outer-width parity with the hero. */
  .cinematicReplayPage > .cinematicReportShell{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    transform:none!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    margin-top:-2px!important;
  }

  .cinematicReplayPage .cinematicTabs,
  .cinematicReplayPage .battleReportContent.cinematicReportContent{
    width:100%!important;
    box-sizing:border-box!important;
  }

  /* Keep the extra usable room inside the hero width instead of outside it. */
  .cinematicReplayPage .cinematicTabs{
    padding-left:18px!important;
    padding-right:18px!important;
  }
  .cinematicReplayPage .battleReportContent.cinematicReportContent{
    padding-left:18px!important;
    padding-right:18px!important;
  }

  /* Compact six-column team table: both teams remain fully visible inside
     the 1280px hero-width report without clipping the enemy side. */
  .cinematicReplayPage .cinematicTeamColumns,
  .cinematicReplayPage .cinematicTeamMembers .teamMember{
    grid-template-columns:48px minmax(112px,1.42fr) minmax(96px,1fr) 62px 54px 58px!important;
    column-gap:5px!important;
    padding-left:7px!important;
    padding-right:7px!important;
    box-sizing:border-box!important;
  }
  .cinematicReplayPage .cinematicTeamMembers .teamTank{
    width:46px!important;
  }
  .cinematicReplayPage .cinematicTeamMembers .teamTank img{
    max-width:46px!important;
  }
  .cinematicReplayPage .cinematicTeamMembers .teamPlayer,
  .cinematicReplayPage .cinematicTeamMembers .teamVehicle,
  .cinematicReplayPage .cinematicTeamMembers .teamMetric{
    min-width:0!important;
  }
  .cinematicReplayPage .cinematicTeamMembers .teamPlayer strong{
    font-size:13.8px!important;
  }
  .cinematicReplayPage .cinematicTeamMembers .teamVehicle{
    font-size:12.8px!important;
  }
  .cinematicReplayPage .cinematicTeamMembers .teamMetric b{
    font-size:13.8px!important;
  }
}


/* =====================================================================
   v0.3.5.246 — BATTLE TABS UX REWORK (TEAMS TAB FIRST PASS)
   Saved approved mockup: only the Teams tab is reworked in this version.
   ===================================================================== */
.battleTeamsPaneV246{padding:10px 10px 12px!important}
.battleTeamsGridV246{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.teamCardV246{
  min-width:0;
  border:1px solid rgba(186,202,194,.14);
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(8,13,11,.96),rgba(6,11,10,.95));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.teamCardV246.ally{border-color:rgba(152,235,42,.18)}
.teamCardV246.enemy{border-color:rgba(220,74,68,.18)}
.teamCardV246.draw{border-color:rgba(229,182,62,.18)}
.teamHeadV246{
  height:60px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(209,226,217,.12);
  background:linear-gradient(180deg,rgba(12,19,16,.95),rgba(8,13,11,.92));
}
.teamHeadTitleV246{display:flex;align-items:center;gap:11px;min-width:0}
.teamHeadTitleV246 h3{margin:0;font-size:24px;line-height:1;font-weight:950;letter-spacing:.02em;text-transform:uppercase}
.teamCardV246.ally .teamHeadTitleV246 h3{color:#a9e51b}
.teamCardV246.enemy .teamHeadTitleV246 h3{color:#ff5a55}
.teamCardV246.draw .teamHeadTitleV246 h3{color:#e5b63e}
.teamSideSealV246{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-size:15px;font-weight:900;border:1px solid rgba(255,255,255,.18);color:#f4f7f5;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  box-shadow:0 0 0 1px rgba(0,0,0,.22) inset;
}
.teamSideSealV246.ally{border-color:rgba(169,229,27,.35);color:#d5f47a}
.teamSideSealV246.enemy{border-color:rgba(228,90,85,.35);color:#ff8b85}
.teamHeadSummaryV246{display:flex;align-items:center;gap:16px;color:#e9eeeb;white-space:nowrap}
.teamHeadStatV246{display:flex;align-items:center;gap:6px;color:#dce4df}
.teamHeadStatV246>b{font-size:15px;line-height:1;font-weight:900}
.teamHeadStatV246>small{display:none}
.teamHeadResultV246{font-size:16px;line-height:1;font-weight:900}
.teamCardV246.ally .teamHeadResultV246{color:#a9e51b}
.teamCardV246.enemy .teamHeadResultV246{color:#ff605a}
.teamCardV246.draw .teamHeadResultV246{color:#e5b63e}
.teamColumnsV246,
.teamRowV246{
  display:grid;
  grid-template-columns:minmax(186px,1.28fr) minmax(168px,1fr) 84px 78px 84px 78px;
  align-items:center;
}
.teamColumnsV246{
  min-height:40px;
  padding:0 12px;
  column-gap:12px;
  border-bottom:1px solid rgba(209,226,217,.08);
  background:rgba(255,255,255,.015);
}
.teamColumnsV246>span{display:flex;align-items:center;gap:7px;color:#c6d0cb;font-size:12px;font-weight:800;min-width:0}
.teamColumnsV246>span:nth-child(n+3){justify-content:flex-end}
.teamColumnsV246 i{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teamColIconV246{width:17px!important;height:17px!important;opacity:.92;flex:0 0 17px!important}
.teamBodyV246{display:flex;flex-direction:column}
.teamRowV246{
  min-height:56px;
  padding:0 12px;
  column-gap:12px;
  border-top:1px solid rgba(255,255,255,.04);
  position:relative;
}
.teamRowV246:first-child{border-top:0}
.teamRowV246.stateAlive{background:linear-gradient(90deg,rgba(104,160,11,.18),rgba(37,56,18,.11) 52%,rgba(0,0,0,0) 100%)}
.teamRowV246.stateDestroyed{background:linear-gradient(90deg,rgba(128,28,24,.24),rgba(66,17,15,.13) 52%,rgba(0,0,0,0) 100%)}
.teamCardV246.enemy .teamRowV246.stateAlive{background:linear-gradient(90deg,rgba(40,64,32,.16),rgba(28,35,33,.08) 52%,rgba(0,0,0,0) 100%)}
.teamCardV246.enemy .teamRowV246.stateDestroyed{background:linear-gradient(90deg,rgba(128,26,22,.26),rgba(63,16,14,.16) 54%,rgba(0,0,0,0) 100%)}
.teamRowV246.top-1{box-shadow:inset 0 0 0 1px rgba(255,211,74,.34)}
.teamRowV246.top-2{box-shadow:inset 0 0 0 1px rgba(212,219,230,.24)}
.teamRowV246.top-3{box-shadow:inset 0 0 0 1px rgba(220,142,77,.24)}
.teamRowV246.owner{box-shadow:inset 0 0 0 1px rgba(169,229,27,.55), 0 0 0 1px rgba(169,229,27,.18)}
.teamPlayerCellV246{min-width:0;display:flex;align-items:center;gap:8px;position:relative}
.teamPlayerCellV246 strong{min-width:0;display:block;color:#edf2ef;font-size:15px;line-height:1.15;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.teamPlayerCellV246 strong span{color:#afbab4;font-size:12.5px;font-weight:700}
.teamOwnerBadgeV246{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 8px;border-radius:5px;background:#b0ea20;color:#112109;font-size:11.5px;font-style:normal;font-weight:900;letter-spacing:.03em;white-space:nowrap}
.teamTopBadge{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:0 0 26px;border:1px solid rgba(0,0,0,.35);box-shadow:0 4px 14px rgba(0,0,0,.22)}
.teamTopBadge b{font-size:15px;line-height:1;font-weight:950;color:#111}
.teamTopBadge.rank-1{background:radial-gradient(circle at 35% 30%,#fff4bf 0,#ffdb5d 40%,#d49312 100%)}
.teamTopBadge.rank-2{background:radial-gradient(circle at 35% 30%,#ffffff 0,#dfe5ec 42%,#8d98a5 100%)}
.teamTopBadge.rank-3{background:radial-gradient(circle at 35% 30%,#ffe2c2 0,#efaa61 42%,#96561f 100%)}
.teamTankCellV246{display:flex;align-items:center;gap:8px;min-width:0}
.teamTankThumbV246{width:60px;height:34px;display:flex;align-items:center;justify-content:center;flex:0 0 60px}
.teamTankShotV246{width:58px!important;height:32px!important;filter:drop-shadow(0 6px 6px rgba(0,0,0,.5)) saturate(.98)}
.teamTankNameV246{min-width:0;display:block;color:#e5ebe7;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.teamValueCellV246{text-align:right;color:#f1f4f2;font-size:16px;font-weight:850;letter-spacing:.01em}
.teamValueCellV246.assist{color:#dbe7e0}
.teamValueCellV246.xp{color:#e7edf8}
.battleTeamsFootV246{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:4px 2px 0}
.battleTeamsStampV246{display:flex;align-items:center;gap:7px;color:#aab5af;font-size:12px}
.battleTeamsCompareV246{height:46px;padding:0 24px;border-radius:8px;border:1px solid rgba(148,219,31,.45);background:rgba(11,19,14,.96);color:#a9e51b;font-size:15px;font-weight:900;letter-spacing:.03em;cursor:pointer}
.battleTeamsCompareV246:hover{filter:brightness(1.06);border-color:rgba(169,229,27,.66)}
@media(max-width:1260px){
  .teamColumnsV246,.teamRowV246{grid-template-columns:minmax(170px,1.24fr) minmax(150px,1fr) 76px 70px 76px 72px}
  .teamHeadTitleV246 h3{font-size:20px}
}
@media(max-width:1080px){
  .battleTeamsGridV246{grid-template-columns:1fr}
}
@media(max-width:760px){
  .teamColumnsV246,.teamRowV246{grid-template-columns:minmax(154px,1.18fr) minmax(132px,1fr) 66px 58px 66px 60px;padding:0 10px;column-gap:7px}
  .teamPlayerCellV246 strong,.teamTankNameV246,.teamValueCellV246{font-size:12px}
  .teamColumnsV246>span{font-size:10px}
  .teamOwnerBadgeV246{font-size:10.5px;height:20px}
  .teamHeadSummaryV246{gap:10px}
}

/* =====================================================================
   v0.3.5.247 — TEAMS TAB EXACT MOCKUP MATCH
   SOURCE OF TRUTH: design_refs/v0.3.5.247_TEAMS_TAB_SOURCE_OF_TRUTH.png
   Only the Teams tab is restyled here. No visual interpretation.
   ===================================================================== */

/* Centered 3-tab rail exactly like the approved render. */
.cinematicReplayPage .cinematicTabs{
  width:min(770px,52%)!important;
  height:46px!important;
  margin:0 auto 16px!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  align-items:stretch!important;
  border:1px solid rgba(164,183,176,.18)!important;
  border-radius:7px!important;
  overflow:hidden!important;
  background:#071015!important;
  box-shadow:none!important;
}
.cinematicReplayPage .cinematicTabs button{
  min-width:0!important;
  width:100%!important;
  height:46px!important;
  padding:0 12px!important;
  border:0!important;
  border-right:1px solid rgba(164,183,176,.16)!important;
  border-radius:0!important;
  background:linear-gradient(180deg,#0c151a,#091116)!important;
  color:#aeb6b3!important;
  font-family:var(--approved-font)!important;
  font-size:15px!important;
  font-weight:650!important;
  letter-spacing:.015em!important;
  text-transform:uppercase!important;
  box-shadow:none!important;
}
.cinematicReplayPage .cinematicTabs button:last-child{border-right:0!important}
.cinematicReplayPage .cinematicTabs button.active{
  color:#f5f7f6!important;
  background:linear-gradient(180deg,#17351e 0%,#0b1c12 100%)!important;
}
.cinematicReplayPage .cinematicTabs button.active:after{
  content:""!important;
  position:absolute!important;
  left:0!important;right:0!important;bottom:0!important;
  height:2px!important;
  background:#9fe71e!important;
  box-shadow:0 0 9px rgba(159,231,30,.74)!important;
}

/* Exact teams canvas. */
.cinematicReplayPage .battleReportContent.cinematicReportContent{
  padding-left:12px!important;
  padding-right:12px!important;
  overflow:visible!important;
}
.battleTeamsPaneV247{padding:0!important;font-family:var(--approved-font)!important}
.battleTeamsGridV247{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:14px!important;
  align-items:stretch!important;
}
.teamCardV247{
  min-width:0!important;
  overflow:hidden!important;
  border-radius:7px!important;
  border:1px solid #29404a!important;
  background:#07131a!important;
  box-shadow:0 14px 30px rgba(0,0,0,.16)!important;
}
.teamCardV247.ally{border-color:#284440!important}
.teamCardV247.enemy{border-color:#33414a!important}

/* Header: 59px, dark blue-black with restrained team accents. */
.teamHeadV247{
  height:59px!important;
  padding:0 16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  border-bottom:1px solid rgba(170,190,184,.17)!important;
  background:linear-gradient(180deg,#0a1820,#08151c)!important;
}
.teamTitleV247{display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important}
.teamTitleSealV247{width:31px!important;height:31px!important;flex:0 0 31px!important;opacity:.96!important}
.teamTitleV247 h3{
  margin:0!important;
  font-family:var(--approved-font)!important;
  font-size:25px!important;
  line-height:1!important;
  font-weight:760!important;
  letter-spacing:.01em!important;
  text-transform:uppercase!important;
}
.teamCardV247.ally .teamTitleV247 h3{color:#a8ec1e!important;text-shadow:0 0 10px rgba(157,231,30,.13)!important}
.teamCardV247.enemy .teamTitleV247 h3{color:#ff4e4b!important;text-shadow:0 0 10px rgba(255,68,64,.10)!important}
.teamSummaryV247{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:22px!important;white-space:nowrap!important}
.teamSummaryMetricV247{display:inline-flex!important;align-items:center!important;gap:6px!important;color:#e2e8e5!important}
.teamSummaryMetricV247 img{width:20px!important;height:20px!important;opacity:.92!important}
.teamSummaryMetricV247.damage img{width:21px!important;height:21px!important}
.teamSummaryMetricV247 b{font-family:var(--approved-font)!important;font-size:15px!important;font-weight:650!important;line-height:1!important;color:#e4e9e7!important}
.teamResultV247{font-family:var(--approved-font)!important;font-size:16px!important;font-weight:720!important;line-height:1!important}
.teamCardV247.ally .teamResultV247{color:#a8e91e!important}
.teamCardV247.enemy .teamResultV247{color:#ff514e!important}
.teamCardV247.draw .teamResultV247{color:#e6b843!important}

/* Column header: 50px with the exact visual hierarchy from the mockup. */
.teamColumnsV247,
.teamRowV247{
  display:grid!important;
  grid-template-columns:minmax(0,1.44fr) minmax(0,1.30fr) .58fr .62fr .70fr .58fr!important;
  column-gap:8px!important;
  align-items:center!important;
  box-sizing:border-box!important;
}
.teamColumnsV247{
  height:50px!important;
  padding:0 14px!important;
  border-bottom:1px solid rgba(176,195,188,.12)!important;
  background:#07141b!important;
}
.teamColumnsV247>span{min-width:0!important;display:flex!important;align-items:center!important;gap:7px!important;color:#d0d7d4!important}
.teamColumnsV247>span:nth-child(n+3){justify-content:flex-end!important}
.teamColumnsV247 b{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-family:var(--approved-font)!important;
  font-size:12px!important;
  font-weight:620!important;
  line-height:1!important;
  color:#cbd2cf!important;
}
.teamColumnIconV247{width:18px!important;height:18px!important;flex:0 0 18px!important;color:#e7ece9!important;opacity:.95!important}

/* Rows: top three are taller, all remaining rows use the compact 44px rhythm. */
.teamBodyV247{min-height:0!important;background:#07131a!important}
.teamRowV247{
  min-height:44px!important;
  height:44px!important;
  padding:0 14px!important;
  border-top:1px solid rgba(166,185,179,.105)!important;
  background:#07131a!important;
  position:relative!important;
}
.teamRowV247:first-child{border-top:0!important}
.teamRowV247.rank-1,.teamRowV247.rank-2,.teamRowV247.rank-3{height:56px!important;min-height:56px!important}

/* Alive / destroyed visual states: color only, no text chips. */
.teamCardV247.ally .teamRowV247.stateAlive{
  background:linear-gradient(90deg,#09251b 0%,#08251b 58%,#071b17 100%)!important;
}
.teamCardV247.ally .teamRowV247.stateDestroyed{
  background:linear-gradient(90deg,#2b1115 0%,#1f1114 58%,#101217 100%)!important;
}
.teamCardV247.enemy .teamRowV247.stateAlive{
  background:linear-gradient(90deg,#0b211b 0%,#091b18 58%,#091519 100%)!important;
}
.teamCardV247.enemy .teamRowV247.stateDestroyed{
  background:linear-gradient(90deg,#271116 0%,#1e1115 56%,#111217 100%)!important;
}
.teamRowV247.stateUnknown{background:#07131a!important}

/* Top-3 bands from the approved render. */
.teamCardV247.ally .teamRowV247.rank-1{background:linear-gradient(90deg,#193f0d 0%,#123316 45%,#0b2918 100%)!important}
.teamCardV247.ally .teamRowV247.rank-2{background:linear-gradient(90deg,#173817 0%,#10301a 50%,#0a2619 100%)!important}
.teamCardV247.ally .teamRowV247.rank-3{background:linear-gradient(90deg,#143418 0%,#0f2d1a 52%,#092319 100%)!important}
.teamCardV247.enemy .teamRowV247.rank-1{background:linear-gradient(90deg,#440b10 0%,#3a0f15 50%,#271117 100%)!important}
.teamCardV247.enemy .teamRowV247.rank-2{background:linear-gradient(90deg,#391015 0%,#301116 50%,#241218 100%)!important}
.teamCardV247.enemy .teamRowV247.rank-3{background:linear-gradient(90deg,#341116 0%,#2d1217 50%,#211318 100%)!important}
.teamRowV247.rank-1{box-shadow:inset 0 0 0 1px rgba(255,204,54,.12)!important}
.teamRowV247.rank-2{box-shadow:inset 0 0 0 1px rgba(210,219,226,.07)!important}
.teamRowV247.rank-3{box-shadow:inset 0 0 0 1px rgba(219,132,65,.08)!important}
.teamRowV247.owner{
  border-top-color:#85d718!important;
  box-shadow:inset 3px 0 0 #9fe71e,inset 0 0 0 1px rgba(159,231,30,.86),0 0 12px rgba(143,219,24,.08)!important;
}

/* Player / tank cells. */
.teamPlayerV247{min-width:0!important;display:flex!important;align-items:center!important;gap:9px!important}
.teamPlayerTextV247{min-width:0!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:4px!important}
.teamPlayerTextV247 strong{
  min-width:0!important;max-width:100%!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  font-family:var(--approved-font)!important;font-size:14px!important;font-weight:650!important;line-height:1!important;color:#eef2f0!important;
}
.teamPlayerTextV247 strong span{margin-left:2px!important;color:#b6c1bc!important;font-size:12px!important;font-weight:560!important}
.teamPlayerTextV247 em{
  height:19px!important;padding:0 7px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border-radius:2px!important;background:#a8ed1c!important;color:#0c2105!important;
  font-family:var(--approved-font)!important;font-size:9px!important;font-style:normal!important;font-weight:850!important;line-height:1!important;letter-spacing:.015em!important;
}
.teamTopTrophyV247{width:30px!important;height:30px!important;flex:0 0 30px!important;object-fit:contain!important;filter:drop-shadow(0 3px 5px rgba(0,0,0,.34))!important}
.teamVehicleV247{min-width:0!important;display:flex!important;align-items:center!important;gap:8px!important}
.teamTankThumbV247{width:64px!important;height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 64px!important}
.teamTankImgV247{width:62px!important;height:38px!important;max-width:62px!important;max-height:38px!important;object-fit:contain!important;filter:drop-shadow(0 5px 5px rgba(0,0,0,.62)) saturate(.98)!important}
.teamVehicleV247>strong{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-family:var(--approved-font)!important;font-size:14px!important;font-weight:560!important;line-height:1!important;color:#e4e9e7!important}
.teamNumV247{display:block!important;text-align:right!important;font-family:var(--approved-font)!important;font-size:14px!important;font-weight:620!important;line-height:1!important;color:#edf1ef!important;font-variant-numeric:tabular-nums!important}

/* Footer exactly under the two cards. */
.battleTeamsFooterV247{
  min-height:58px!important;
  margin-top:12px!important;
  padding:0 20px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:48px!important;
  background:transparent!important;
}
.battleTeamsFooterV247>span{display:inline-flex!important;align-items:center!important;gap:8px!important;color:#aab3af!important;font-family:var(--approved-font)!important;font-size:13px!important;font-weight:520!important;white-space:nowrap!important}
.battleTeamsFooterV247>span img{width:25px!important;height:25px!important;opacity:.92!important}
.battleTeamsFooterV247>button{
  height:54px!important;min-width:280px!important;padding:0 23px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;
  border:1px solid #5f8f13!important;border-radius:6px!important;
  background:#07140e!important;color:#a8ed1c!important;
  font-family:var(--approved-font)!important;font-size:15px!important;font-weight:760!important;letter-spacing:.01em!important;
  box-shadow:inset 0 0 0 1px rgba(159,231,30,.035),0 0 11px rgba(159,231,30,.035)!important;
  cursor:pointer!important;
}
.battleTeamsFooterV247>button img{width:26px!important;height:23px!important;flex:0 0 26px!important}
.battleTeamsFooterV247>button:hover{background:#091910!important;border-color:#75a91a!important;filter:none!important}

/* Keep the enemy panel stretched to the same bottom edge as the allies panel. */
.battleTeamsGridV247>.teamCardV247{height:100%!important}

@media(max-width:1320px){
  .cinematicReplayPage .cinematicTabs{width:min(700px,58%)!important}
  .teamHeadV247{padding:0 13px!important}
  .teamTitleV247 h3{font-size:22px!important}
  .teamSummaryV247{gap:15px!important}
  .teamColumnsV247,.teamRowV247{grid-template-columns:minmax(0,1.38fr) minmax(0,1.22fr) .56fr .59fr .67fr .57fr!important;column-gap:6px!important;padding-left:11px!important;padding-right:11px!important}
  .teamColumnsV247 b{font-size:11px!important}.teamColumnIconV247{width:16px!important;height:16px!important;flex-basis:16px!important}
  .teamPlayerTextV247 strong,.teamVehicleV247>strong,.teamNumV247{font-size:12.5px!important}
  .teamPlayerTextV247 strong span{font-size:10.5px!important}
  .teamTankThumbV247{width:55px!important;flex-basis:55px!important}.teamTankImgV247{width:54px!important;max-width:54px!important}
  .teamTopTrophyV247{width:27px!important;height:27px!important;flex-basis:27px!important}
}
@media(max-width:1050px){
  .battleTeamsGridV247{grid-template-columns:1fr!important}
  .cinematicReplayPage .cinematicTabs{width:min(720px,92%)!important}
  .battleTeamsFooterV247{flex-wrap:wrap!important;gap:16px!important}
}

/* v0.3.5.247 exact typography weight correction against source render. */
.cinematicReplayPage .cinematicTabs button{font-weight:540!important}
.teamTitleV247 h3{font-weight:680!important}
.teamSummaryMetricV247 b{font-weight:540!important}
.teamResultV247{font-weight:600!important}
.teamColumnsV247 b{font-weight:500!important}
.teamPlayerTextV247 strong{font-weight:540!important}
.teamPlayerTextV247 strong span{font-weight:450!important}
.teamPlayerTextV247 em{font-weight:760!important}
.teamVehicleV247>strong{font-weight:450!important}
.teamNumV247{font-weight:540!important}
.battleTeamsFooterV247>span{font-weight:430!important}
.battleTeamsFooterV247>button{font-weight:650!important}


/* =====================================================================
   v0.3.5.248 — TEAMS TAB COLUMN WIDTH + FOOTER CLEANUP PASS
   Match the approved mockup more closely: slightly widen the tank-name
   column toward kills/frags and remove the bottom compare button.
   ===================================================================== */
.teamColumnsV247,
.teamRowV247{
  grid-template-columns:minmax(0,1.42fr) minmax(0,1.40fr) .57fr .56fr .68fr .56fr!important;
}
.teamVehicleV247>strong{
  padding-right:4px!important;
}
.battleTeamsFooterV247{
  min-height:46px!important;
  margin-top:10px!important;
  padding:0 4px!important;
  justify-content:center!important;
  gap:0!important;
}
.battleTeamsFooterV247>span{
  font-size:12.5px!important;
  opacity:.96!important;
}
.battleTeamsFooterV247>span img{
  width:24px!important;
  height:24px!important;
}
.battleTeamsFooterV247>button{display:none!important}
@media(max-width:1320px){
  .teamColumnsV247,.teamRowV247{grid-template-columns:minmax(0,1.35fr) minmax(0,1.33fr) .55fr .54fr .64fr .54fr!important}
}
@media(max-width:760px){
  .teamColumnsV247,.teamRowV247{grid-template-columns:minmax(0,1.28fr) minmax(0,1.28fr) .52fr .5fr .58fr .5fr!important}
}


/* =====================================================================
   v0.3.5.249 — TEAMS TAB FINAL VISUAL POLISH PASS
   Fine polish against the approved Teams mockup: nickname breathing room,
   row rhythm, optical icon alignment, and restrained green/red glow FX.
   ===================================================================== */

/* Slightly more room for player names while preserving the widened tank column. */
.teamColumnsV247,
.teamRowV247{
  grid-template-columns:minmax(0,1.48fr) minmax(0,1.38fr) .56fr .53fr .65fr .55fr!important;
  column-gap:7px!important;
}

/* Header/column icon optical alignment. */
.teamColumnsV247{
  height:48px!important;
  padding-left:13px!important;
  padding-right:13px!important;
}
.teamColumnsV247>span{
  gap:7px!important;
  line-height:1!important;
}
.teamColumnsV247 b{
  font-size:11.5px!important;
  line-height:1!important;
  letter-spacing:.005em!important;
  color:#d5ddda!important;
}
.teamColumnIconV247{
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  opacity:.98!important;
  transform:translateY(-.25px)!important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.28))!important;
}

/* Row rhythm: slightly more air, without making the table tall/heavy. */
.teamRowV247{
  height:45px!important;
  min-height:45px!important;
  padding-left:13px!important;
  padding-right:13px!important;
}
.teamRowV247.rank-1,
.teamRowV247.rank-2,
.teamRowV247.rank-3{
  height:55px!important;
  min-height:55px!important;
}

/* Typography balance: closer to the approved mockup. */
.teamPlayerTextV247 strong{
  font-size:13.5px!important;
  font-weight:570!important;
  letter-spacing:.002em!important;
}
.teamPlayerTextV247 strong span{
  font-size:11px!important;
  font-weight:450!important;
  color:#b5c0bb!important;
}
.teamVehicleV247>strong{
  font-size:13.5px!important;
  font-weight:520!important;
  padding-right:6px!important;
}
.teamNumV247{
  font-size:13.5px!important;
  font-weight:590!important;
}
.teamPlayerTextV247 em{
  height:18px!important;
  padding:0 7px!important;
  font-size:8.7px!important;
  font-weight:780!important;
}

/* Tank thumbnail placement / scale. */
.teamTankThumbV247{
  width:62px!important;
  height:38px!important;
  flex:0 0 62px!important;
}
.teamTankImgV247{
  width:60px!important;
  height:37px!important;
  max-width:60px!important;
  max-height:37px!important;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.60)) saturate(1.02) contrast(1.015)!important;
}

/* Trophy badges: slightly tighter and optically aligned with the nickname. */
.teamTopTrophyV247{
  width:29px!important;
  height:29px!important;
  flex:0 0 29px!important;
  transform:translateY(-.25px)!important;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.38))!important;
}

/* Team panels: subtle edge light, matching the render without over-brightening. */
.teamCardV247.ally{
  box-shadow:0 15px 32px rgba(0,0,0,.18),-7px 0 22px rgba(107,188,25,.035),inset 0 0 0 1px rgba(169,229,27,.018)!important;
}
.teamCardV247.enemy{
  box-shadow:0 15px 32px rgba(0,0,0,.18),7px 0 22px rgba(210,54,50,.032),inset 0 0 0 1px rgba(228,90,85,.015)!important;
}

/* Owner row: stronger left rail + soft internal lime bloom like the mockup. */
.teamRowV247.owner{
  border-top-color:rgba(143,220,23,.72)!important;
  box-shadow:
    inset 3px 0 0 #a3ef1f,
    inset 0 0 0 1px rgba(158,234,29,.80),
    inset 20px 0 24px rgba(113,191,20,.09),
    0 0 13px rgba(137,216,24,.07)!important;
}

/* Top-3 bands: keep the same palette but add the subtle rendered edge glow. */
.teamCardV247.ally .teamRowV247.rank-1{box-shadow:inset 0 0 0 1px rgba(198,246,46,.22),inset 13px 0 22px rgba(144,214,27,.035)!important}
.teamCardV247.ally .teamRowV247.rank-2{box-shadow:inset 0 0 0 1px rgba(207,220,226,.13)!important}
.teamCardV247.ally .teamRowV247.rank-3{box-shadow:inset 0 0 0 1px rgba(218,139,65,.14)!important}
.teamCardV247.enemy .teamRowV247.rank-1{box-shadow:inset 0 0 0 1px rgba(255,81,73,.30),inset 13px 0 22px rgba(232,48,43,.045)!important}
.teamCardV247.enemy .teamRowV247.rank-2{box-shadow:inset 0 0 0 1px rgba(255,84,77,.18)!important}
.teamCardV247.enemy .teamRowV247.rank-3{box-shadow:inset 0 0 0 1px rgba(255,93,80,.14)!important}

/* Header FX / typography refinement. */
.teamTitleV247 h3{
  font-size:24px!important;
  font-weight:740!important;
  letter-spacing:.008em!important;
}
.teamTitleSealV247{
  width:30px!important;
  height:30px!important;
  flex:0 0 30px!important;
}
.teamCardV247.ally .teamTitleV247 h3{
  text-shadow:0 0 11px rgba(158,231,30,.15)!important;
}
.teamCardV247.enemy .teamTitleV247 h3{
  text-shadow:0 0 11px rgba(255,72,66,.12)!important;
}
.teamResultV247{
  font-size:15.5px!important;
  font-weight:680!important;
}
.teamSummaryMetricV247 b{
  font-size:14.5px!important;
  font-weight:610!important;
}

/* Active Teams tab: controlled lime edge/glow from the approved render. */
.cinematicReplayPage .cinematicTabs button.active{
  background:linear-gradient(180deg,rgba(31,63,30,.80),rgba(12,28,16,.84))!important;
  box-shadow:inset 0 -1px 0 rgba(167,235,37,.22),0 7px 18px rgba(110,188,22,.055)!important;
}
.cinematicReplayPage .cinematicTabs button.active:after{
  height:2px!important;
  background:#9ee51b!important;
  box-shadow:0 0 12px rgba(157,229,27,.56)!important;
}

/* Footer after compare-button removal: timestamp stays low-key. */
.battleTeamsFooterV247{
  min-height:42px!important;
  margin-top:8px!important;
}
.battleTeamsFooterV247>span{
  font-size:12px!important;
  color:#a0aba5!important;
}
.battleTeamsFooterV247>span img{
  width:23px!important;
  height:23px!important;
  opacity:.88!important;
}

@media(max-width:1320px){
  .teamColumnsV247,.teamRowV247{
    grid-template-columns:minmax(0,1.42fr) minmax(0,1.31fr) .54fr .51fr .62fr .53fr!important;
    column-gap:6px!important;
  }
  .teamPlayerTextV247 strong,.teamVehicleV247>strong,.teamNumV247{font-size:12.5px!important}
  .teamTankThumbV247{width:56px!important;flex-basis:56px!important}
  .teamTankImgV247{width:55px!important;max-width:55px!important}
}
@media(max-width:760px){
  .teamColumnsV247,.teamRowV247{
    grid-template-columns:minmax(0,1.33fr) minmax(0,1.25fr) .51fr .48fr .57fr .49fr!important;
  }
}


/* =====================================================================
   v0.3.5.250 — TOP-3 SURVIVAL STATE PRIORITY FIX
   Row life-state owns the background color. Damage rank only adds the
   trophy / rank accent and must never recolor a destroyed tank as alive.
   ===================================================================== */

/* TOP-3 + ALIVE: keep the normal green alive state. */
.teamCardV247.ally .teamRowV247.stateAlive.rank-1,
.teamCardV247.ally .teamRowV247.stateAlive.rank-2,
.teamCardV247.ally .teamRowV247.stateAlive.rank-3{
  background:linear-gradient(90deg,#09251b 0%,#08251b 58%,#071b17 100%)!important;
}
.teamCardV247.enemy .teamRowV247.stateAlive.rank-1,
.teamCardV247.enemy .teamRowV247.stateAlive.rank-2,
.teamCardV247.enemy .teamRowV247.stateAlive.rank-3{
  background:linear-gradient(90deg,#0b211b 0%,#091b18 58%,#091519 100%)!important;
}

/* TOP-3 + DESTROYED: always remain red, regardless of damage rank. */
.teamCardV247.ally .teamRowV247.stateDestroyed.rank-1,
.teamCardV247.ally .teamRowV247.stateDestroyed.rank-2,
.teamCardV247.ally .teamRowV247.stateDestroyed.rank-3{
  background:linear-gradient(90deg,#2b1115 0%,#1f1114 58%,#101217 100%)!important;
}
.teamCardV247.enemy .teamRowV247.stateDestroyed.rank-1,
.teamCardV247.enemy .teamRowV247.stateDestroyed.rank-2,
.teamCardV247.enemy .teamRowV247.stateDestroyed.rank-3{
  background:linear-gradient(90deg,#271116 0%,#1e1115 56%,#111217 100%)!important;
}

/* Owner highlight is independent from life-state too: keep FermaniHUB rail/badge,
   while the row background above still says alive/destroyed correctly. */
.teamRowV247.owner.rank-1,
.teamRowV247.owner.rank-2,
.teamRowV247.owner.rank-3{
  border-top-color:rgba(143,220,23,.72)!important;
  box-shadow:
    inset 3px 0 0 #a3ef1f,
    inset 0 0 0 1px rgba(158,234,29,.80),
    inset 20px 0 24px rgba(113,191,20,.09),
    0 0 13px rgba(137,216,24,.07)!important;
}


/* =====================================================================
   v0.3.5.251 — TEAMS TAB ICON BRIGHTNESS + FX FINAL POLISH
   Visual-only pass scoped to the approved Teams tab. No row-state
   background changes: survival state remains the sole owner of row color.
   ===================================================================== */

/* Tank renders: lift local contrast/readability without changing geometry. */
.battleTeamsPaneV247 .teamTankThumbV247{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
}
.battleTeamsPaneV247 .teamTankThumbV247:before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:49px!important;
  height:20px!important;
  transform:translate(-50%,-49%)!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse at center,rgba(237,247,241,.15) 0%,rgba(180,217,195,.07) 42%,rgba(255,255,255,0) 75%)!important;
  filter:blur(4px)!important;
  opacity:.72!important;
  pointer-events:none!important;
  z-index:0!important;
}
.battleTeamsPaneV247 .teamTankImgV247{
  position:relative!important;
  z-index:1!important;
  filter:
    brightness(1.14)
    contrast(1.09)
    saturate(1.12)
    drop-shadow(0 1px 1px rgba(255,255,255,.10))
    drop-shadow(0 5px 5px rgba(0,0,0,.56))
    drop-shadow(0 0 5px rgba(211,235,221,.10))!important;
}
.battleTeamsPaneV247 .teamRowV247.rank-1 .teamTankThumbV247:before,
.battleTeamsPaneV247 .teamRowV247.rank-2 .teamTankThumbV247:before,
.battleTeamsPaneV247 .teamRowV247.rank-3 .teamTankThumbV247:before{
  opacity:.94!important;
  width:53px!important;
  height:22px!important;
}
.battleTeamsPaneV247 .teamRowV247.rank-1 .teamTankImgV247,
.battleTeamsPaneV247 .teamRowV247.rank-2 .teamTankImgV247,
.battleTeamsPaneV247 .teamRowV247.rank-3 .teamTankImgV247{
  filter:
    brightness(1.19)
    contrast(1.115)
    saturate(1.16)
    drop-shadow(0 1px 1px rgba(255,255,255,.14))
    drop-shadow(0 5px 6px rgba(0,0,0,.54))
    drop-shadow(0 0 7px rgba(222,241,229,.14))!important;
}

/* Column HUD icons: cleaner white, crisper mask edge and optical centering. */
.battleTeamsPaneV247 .teamColumnIconV247{
  color:#f4f7f5!important;
  opacity:1!important;
  transform:translateY(-.45px)!important;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.20))
    drop-shadow(0 1px 1px rgba(0,0,0,.34))!important;
}
.battleTeamsPaneV247 .teamColumnsV247>span:nth-child(2) .teamColumnIconV247,
.battleTeamsPaneV247 .teamColumnsV247>span:nth-child(5) .teamColumnIconV247{
  transform:translateY(-.35px) scale(1.02)!important;
}
.battleTeamsPaneV247 .teamColumnsV247>span:nth-child(3) .teamColumnIconV247,
.battleTeamsPaneV247 .teamColumnsV247>span:nth-child(4) .teamColumnIconV247,
.battleTeamsPaneV247 .teamColumnsV247>span:nth-child(6) .teamColumnIconV247{
  transform:translateY(-.30px)!important;
}
.battleTeamsPaneV247 .teamColumnsV247 b{
  color:#dce3e0!important;
  text-shadow:0 1px 1px rgba(0,0,0,.34)!important;
}

/* Team headers: slightly brighter game seals, summary icons and counters. */
.battleTeamsPaneV247 .teamTitleSealV247{
  opacity:1!important;
  filter:
    brightness(1.10)
    contrast(1.08)
    drop-shadow(0 1px 1px rgba(255,255,255,.08))
    drop-shadow(0 2px 4px rgba(0,0,0,.34))!important;
}
.battleTeamsPaneV247 .teamSummaryMetricV247 img{
  opacity:1!important;
  filter:
    brightness(1.12)
    contrast(1.10)
    drop-shadow(0 0 2px rgba(255,255,255,.16))
    drop-shadow(0 1px 2px rgba(0,0,0,.32))!important;
}
.battleTeamsPaneV247 .teamSummaryMetricV247 b{
  color:#f1f5f3!important;
  text-shadow:0 1px 1px rgba(0,0,0,.42),0 0 3px rgba(255,255,255,.04)!important;
}
.battleTeamsPaneV247 .teamResultV247{
  text-shadow:0 1px 1px rgba(0,0,0,.42)!important;
}
.battleTeamsPaneV247 .teamCardV247.ally .teamResultV247{
  text-shadow:0 0 7px rgba(162,232,29,.16),0 1px 1px rgba(0,0,0,.40)!important;
}
.battleTeamsPaneV247 .teamCardV247.enemy .teamResultV247{
  text-shadow:0 0 7px rgba(255,77,72,.13),0 1px 1px rgba(0,0,0,.40)!important;
}

/* White table numbers: a little cleaner/brighter, same size and columns. */
.battleTeamsPaneV247 .teamNumV247{
  color:#f6f8f7!important;
  font-weight:620!important;
  text-shadow:0 1px 1px rgba(0,0,0,.48),0 0 3px rgba(255,255,255,.035)!important;
}
.battleTeamsPaneV247 .teamRowV247.rank-1 .teamNumV247,
.battleTeamsPaneV247 .teamRowV247.rank-2 .teamNumV247,
.battleTeamsPaneV247 .teamRowV247.rank-3 .teamNumV247{
  color:#fbfcfb!important;
  font-weight:640!important;
}

/* TOP-3: strengthen trophies/rank accents only; never repaint row backgrounds. */
.battleTeamsPaneV247 .teamTopTrophyV247{
  filter:brightness(1.08) contrast(1.07) saturate(1.07) drop-shadow(0 3px 6px rgba(0,0,0,.40))!important;
}
.battleTeamsPaneV247 .teamTopTrophyV247.rank-1{
  filter:brightness(1.13) contrast(1.08) saturate(1.10) drop-shadow(0 0 5px rgba(255,210,50,.25)) drop-shadow(0 3px 6px rgba(0,0,0,.40))!important;
}
.battleTeamsPaneV247 .teamTopTrophyV247.rank-2{
  filter:brightness(1.12) contrast(1.07) saturate(1.04) drop-shadow(0 0 4px rgba(220,231,239,.19)) drop-shadow(0 3px 6px rgba(0,0,0,.40))!important;
}
.battleTeamsPaneV247 .teamTopTrophyV247.rank-3{
  filter:brightness(1.12) contrast(1.08) saturate(1.10) drop-shadow(0 0 4px rgba(232,145,71,.18)) drop-shadow(0 3px 6px rgba(0,0,0,.40))!important;
}
.battleTeamsPaneV247 .teamRowV247.rank-1:after,
.battleTeamsPaneV247 .teamRowV247.rank-2:after,
.battleTeamsPaneV247 .teamRowV247.rank-3:after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  border-radius:1px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.022),inset 0 -1px 0 rgba(255,255,255,.016)!important;
}
.battleTeamsPaneV247 .teamRowV247.rank-1:after{box-shadow:inset 0 1px 0 rgba(255,220,88,.075),inset 0 -1px 0 rgba(255,220,88,.045)!important}
.battleTeamsPaneV247 .teamRowV247.rank-2:after{box-shadow:inset 0 1px 0 rgba(225,234,241,.050),inset 0 -1px 0 rgba(225,234,241,.028)!important}
.battleTeamsPaneV247 .teamRowV247.rank-3:after{box-shadow:inset 0 1px 0 rgba(235,151,78,.050),inset 0 -1px 0 rgba(235,151,78,.028)!important}

/* Panel edge light: small final lift, still restrained. */
.battleTeamsPaneV247 .teamCardV247.ally{
  box-shadow:0 15px 32px rgba(0,0,0,.18),-7px 0 24px rgba(107,188,25,.050),inset 0 0 0 1px rgba(169,229,27,.026)!important;
}
.battleTeamsPaneV247 .teamCardV247.enemy{
  box-shadow:0 15px 32px rgba(0,0,0,.18),7px 0 24px rgba(210,54,50,.046),inset 0 0 0 1px rgba(228,90,85,.023)!important;
}

/* Only the active TEAMS tab gets the stronger approved lime gradient/glow. */
.cinematicReplayPage .cinematicTabs button[data-report-tab="teams"].active{
  color:#fbfdfc!important;
  background:linear-gradient(180deg,rgba(39,79,30,.96) 0%,rgba(24,57,20,.96) 48%,rgba(10,27,14,.98) 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(202,245,104,.10),
    inset 0 -1px 0 rgba(167,235,37,.30),
    0 0 18px rgba(116,197,23,.11),
    0 8px 20px rgba(79,146,17,.065)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.42),0 0 6px rgba(227,255,182,.08)!important;
}
.cinematicReplayPage .cinematicTabs button[data-report-tab="teams"].active:after{
  height:2px!important;
  background:linear-gradient(90deg,#7fc910 0%,#b1f126 50%,#7fc910 100%)!important;
  box-shadow:0 0 6px rgba(171,239,35,.78),0 0 15px rgba(142,221,24,.42)!important;
}


/* =====================================================================
   v0.3.5.252 — TEAMS TAB SOURCE-OF-TRUTH VISUAL PARITY PASS
   Stronger visual parity against the approved Teams mockup. Visual-only:
   no layout, row-state, ranking, backend or report-logic changes.
   ===================================================================== */

/* Tank renders: the mockup reads brighter, cleaner and more separated from
   the row. Use a neutral local light bloom so survival-state color stays pure. */
.battleTeamsPaneV247 .teamTankThumbV247:before{
  width:58px!important;
  height:24px!important;
  transform:translate(-50%,-50%)!important;
  background:radial-gradient(ellipse at center,
    rgba(248,252,249,.28) 0%,
    rgba(220,236,226,.16) 34%,
    rgba(180,211,193,.07) 56%,
    rgba(255,255,255,0) 78%)!important;
  filter:blur(4.5px)!important;
  opacity:.94!important;
}
.battleTeamsPaneV247 .teamTankImgV247{
  filter:
    brightness(1.27)
    contrast(1.15)
    saturate(1.20)
    drop-shadow(-1px -1px 1px rgba(255,255,255,.18))
    drop-shadow(0 2px 2px rgba(219,239,226,.11))
    drop-shadow(0 6px 6px rgba(0,0,0,.54))
    drop-shadow(0 0 7px rgba(221,240,228,.16))!important;
}
.battleTeamsPaneV247 .teamRowV247.rank-1 .teamTankThumbV247:before,
.battleTeamsPaneV247 .teamRowV247.rank-2 .teamTankThumbV247:before,
.battleTeamsPaneV247 .teamRowV247.rank-3 .teamTankThumbV247:before{
  width:62px!important;
  height:27px!important;
  opacity:1!important;
  filter:blur(4.8px)!important;
}
.battleTeamsPaneV247 .teamRowV247.rank-1 .teamTankImgV247,
.battleTeamsPaneV247 .teamRowV247.rank-2 .teamTankImgV247,
.battleTeamsPaneV247 .teamRowV247.rank-3 .teamTankImgV247{
  filter:
    brightness(1.34)
    contrast(1.18)
    saturate(1.25)
    drop-shadow(-1px -1px 1px rgba(255,255,255,.23))
    drop-shadow(0 2px 2px rgba(231,245,236,.14))
    drop-shadow(0 6px 7px rgba(0,0,0,.52))
    drop-shadow(0 0 9px rgba(225,244,232,.22))!important;
}

/* Column HUD: punch up the monochrome iconography to the crisp white seen in
   the source-of-truth render without changing icon size or column geometry. */
.battleTeamsPaneV247 .teamColumnIconV247{
  color:#ffffff!important;
  opacity:1!important;
  filter:
    brightness(1.12)
    contrast(1.16)
    drop-shadow(0 0 2px rgba(255,255,255,.30))
    drop-shadow(0 1px 1px rgba(0,0,0,.42))!important;
}
.battleTeamsPaneV247 .teamColumnsV247 b{
  color:#e8eeeb!important;
  text-shadow:0 1px 1px rgba(0,0,0,.46),0 0 2px rgba(255,255,255,.04)!important;
}

/* Header readout: brighter seals, counters and result labels. */
.battleTeamsPaneV247 .teamTitleSealV247{
  filter:
    brightness(1.20)
    contrast(1.15)
    saturate(1.05)
    drop-shadow(0 0 3px rgba(255,255,255,.12))
    drop-shadow(0 3px 5px rgba(0,0,0,.38))!important;
}
.battleTeamsPaneV247 .teamSummaryMetricV247 img{
  filter:
    brightness(1.22)
    contrast(1.16)
    saturate(1.04)
    drop-shadow(0 0 3px rgba(255,255,255,.22))
    drop-shadow(0 2px 2px rgba(0,0,0,.38))!important;
}
.battleTeamsPaneV247 .teamSummaryMetricV247 b{
  color:#fbfdfc!important;
  text-shadow:0 1px 1px rgba(0,0,0,.50),0 0 4px rgba(255,255,255,.055)!important;
}
.battleTeamsPaneV247 .teamCardV247.ally .teamTitleV247 h3{
  color:#b4f326!important;
  text-shadow:0 0 7px rgba(169,239,31,.28),0 0 16px rgba(125,202,22,.12)!important;
}
.battleTeamsPaneV247 .teamCardV247.enemy .teamTitleV247 h3{
  color:#ff5552!important;
  text-shadow:0 0 7px rgba(255,75,70,.23),0 0 16px rgba(211,42,39,.10)!important;
}
.battleTeamsPaneV247 .teamCardV247.ally .teamResultV247{
  color:#b0ef22!important;
  text-shadow:0 0 8px rgba(165,235,30,.28),0 1px 1px rgba(0,0,0,.46)!important;
}
.battleTeamsPaneV247 .teamCardV247.enemy .teamResultV247{
  color:#ff5753!important;
  text-shadow:0 0 8px rgba(255,74,70,.23),0 1px 1px rgba(0,0,0,.46)!important;
}

/* Table values: source render is cleaner and whiter than .251. */
.battleTeamsPaneV247 .teamNumV247{
  color:#ffffff!important;
  font-weight:640!important;
  text-shadow:
    0 1px 1px rgba(0,0,0,.58),
    0 0 3px rgba(255,255,255,.055)!important;
}
.battleTeamsPaneV247 .teamPlayerTextV247 strong{
  color:#f7faf8!important;
  text-shadow:0 1px 1px rgba(0,0,0,.40)!important;
}
.battleTeamsPaneV247 .teamVehicleV247>strong{
  color:#f0f4f2!important;
  text-shadow:0 1px 1px rgba(0,0,0,.38)!important;
}

/* TOP-3 trophies: stronger metallic read and rank-specific glow, still only a
   rank accent. The row background remains owned by stateAlive/stateDestroyed. */
.battleTeamsPaneV247 .teamTopTrophyV247.rank-1{
  filter:
    brightness(1.27)
    contrast(1.14)
    saturate(1.20)
    drop-shadow(0 0 4px rgba(255,218,67,.54))
    drop-shadow(0 0 10px rgba(241,183,26,.22))
    drop-shadow(0 4px 6px rgba(0,0,0,.44))!important;
}
.battleTeamsPaneV247 .teamTopTrophyV247.rank-2{
  filter:
    brightness(1.24)
    contrast(1.14)
    saturate(1.08)
    drop-shadow(0 0 4px rgba(227,239,247,.42))
    drop-shadow(0 0 9px rgba(182,205,220,.16))
    drop-shadow(0 4px 6px rgba(0,0,0,.44))!important;
}
.battleTeamsPaneV247 .teamTopTrophyV247.rank-3{
  filter:
    brightness(1.25)
    contrast(1.14)
    saturate(1.18)
    drop-shadow(0 0 4px rgba(247,158,75,.42))
    drop-shadow(0 0 9px rgba(211,107,40,.16))
    drop-shadow(0 4px 6px rgba(0,0,0,.44))!important;
}

/* Row surface polish. This only adjusts borders/edge light via outline/shadow;
   it intentionally does not assign any row background. */
.battleTeamsPaneV247 .teamRowV247{
  border-top-color:rgba(198,214,207,.135)!important;
  outline:1px solid rgba(255,255,255,.008)!important;
  outline-offset:-1px!important;
}
.battleTeamsPaneV247 .teamRowV247.rank-1:after{
  box-shadow:
    inset 0 1px 0 rgba(255,225,105,.13),
    inset 0 -1px 0 rgba(255,219,79,.075),
    inset 0 0 18px rgba(255,216,74,.018)!important;
}
.battleTeamsPaneV247 .teamRowV247.rank-2:after{
  box-shadow:
    inset 0 1px 0 rgba(234,242,247,.095),
    inset 0 -1px 0 rgba(220,232,240,.050),
    inset 0 0 16px rgba(221,233,240,.012)!important;
}
.battleTeamsPaneV247 .teamRowV247.rank-3:after{
  box-shadow:
    inset 0 1px 0 rgba(244,166,92,.095),
    inset 0 -1px 0 rgba(225,135,67,.050),
    inset 0 0 16px rgba(225,132,61,.012)!important;
}

/* Owner row in the approved mockup has a much more legible lime edge, while
   the row fill still comes from its survival state. */
.battleTeamsPaneV247 .teamRowV247.owner.rank-1,
.battleTeamsPaneV247 .teamRowV247.owner.rank-2,
.battleTeamsPaneV247 .teamRowV247.owner.rank-3{
  border-top-color:rgba(168,239,34,.92)!important;
  box-shadow:
    inset 4px 0 0 #b4fa24,
    inset 0 0 0 1px rgba(172,241,37,.94),
    inset 24px 0 30px rgba(129,215,19,.13),
    0 0 10px rgba(148,230,27,.15),
    0 0 22px rgba(112,194,20,.06)!important;
}

/* Panel edge light / header glass depth. */
.battleTeamsPaneV247 .teamHeadV247{
  box-shadow:inset 0 -1px 0 rgba(206,223,217,.055),inset 0 1px 0 rgba(255,255,255,.018)!important;
}
.battleTeamsPaneV247 .teamColumnsV247{
  box-shadow:inset 0 -1px 0 rgba(210,226,220,.035)!important;
}
.battleTeamsPaneV247 .teamCardV247.ally{
  box-shadow:
    0 16px 34px rgba(0,0,0,.21),
    -8px 0 28px rgba(111,194,23,.075),
    inset 0 0 0 1px rgba(171,231,31,.045)!important;
}
.battleTeamsPaneV247 .teamCardV247.enemy{
  box-shadow:
    0 16px 34px rgba(0,0,0,.21),
    8px 0 28px rgba(221,57,52,.066),
    inset 0 0 0 1px rgba(236,95,88,.040)!important;
}

/* Active TEAMS tab: stronger lime glass gradient + perimeter glow to match the
   approved selected-state treatment. */
.cinematicReplayPage .cinematicTabs button[data-report-tab="teams"].active{
  color:#ffffff!important;
  background:linear-gradient(180deg,
    rgba(54,102,31,.99) 0%,
    rgba(34,78,22,.99) 47%,
    rgba(12,34,15,.99) 100%)!important;
  border-color:rgba(131,205,30,.72)!important;
  box-shadow:
    inset 0 1px 0 rgba(224,255,139,.18),
    inset 0 -1px 0 rgba(185,249,40,.50),
    inset 0 0 16px rgba(133,217,24,.09),
    0 0 8px rgba(154,231,32,.22),
    0 0 22px rgba(113,195,21,.15),
    0 9px 22px rgba(64,125,15,.09)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.52),0 0 7px rgba(231,255,194,.14)!important;
}
.cinematicReplayPage .cinematicTabs button[data-report-tab="teams"].active:after{
  height:2px!important;
  background:linear-gradient(90deg,#79c40e 0%,#baff2e 48%,#8fdb16 100%)!important;
  box-shadow:0 0 5px rgba(190,255,53,.96),0 0 13px rgba(159,235,35,.70),0 0 24px rgba(124,208,23,.32)!important;
}

/* =====================================================================
   v0.3.5.253 — TEAMS TAB POSITION + WIDTH REBALANCE
   Tighten the vertical hand-off from the tabs into the Teams table and let
   the Teams canvas use the full approved hero width. Geometry-only pass:
   no row styling, status/rank logic, backend, or non-Teams report changes.
   ===================================================================== */

/* The user-marked gap sits between the tab rail and the Teams cards.
   Reduce only that gap while Teams is the active report pane. */
.cinematicReplayPage .cinematicTabs:has(button[data-report-tab="teams"].active){
  margin-bottom:6px!important;
}

/* Desktop: reclaim the 12px report-content inset on each side so both team
   cards align much closer to the hero edges and gain a little breathing room.
   Keep the approved inter-card gap and all internal column proportions. */
@media (min-width:1051px){
  .cinematicReplayPage .battleTeamsPaneV247{
    width:calc(100% + 24px)!important;
    margin-left:-12px!important;
    margin-right:-12px!important;
    box-sizing:border-box!important;
  }
}

/* =====================================================================
   v0.3.5.254 — TEAMS DESTROYED ROW WARM RED TONE PASS
   Replace the burgundy / wine cast of destroyed rows with a cleaner,
   warmer red-black treatment. Life-state logic remains untouched.
   ===================================================================== */

/* Destroyed rows: warmer red, less purple/burgundy. Keep the fill dark
   enough for white HUD text and tank renders to stay readable. */
.battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateDestroyed{
  background:linear-gradient(90deg,#381011 0%,#2b0d0e 56%,#190a0b 100%)!important;
}
.battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateDestroyed{
  background:linear-gradient(90deg,#401011 0%,#300d0e 56%,#1b090a 100%)!important;
}

/* TOP-3 destroyed leaders stay RED as required by .250; ranking only keeps
   its trophy / edge accent. Slightly stronger red at the leading edge gives
   the mockup-like emphasis without drifting back toward burgundy. */
.battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateDestroyed.rank-1,
.battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateDestroyed.rank-2,
.battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateDestroyed.rank-3{
  background:linear-gradient(90deg,#491112 0%,#341011 56%,#1d0a0b 100%)!important;
}
.battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateDestroyed.rank-1,
.battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateDestroyed.rank-2,
.battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateDestroyed.rank-3{
  background:linear-gradient(90deg,#521112 0%,#3a0f10 56%,#200a0b 100%)!important;
}

/* =====================================================================
   v0.3.5.255 — DETAILED REPORT WOT MOCKUP EXACT PARITY PASS
   SOURCE OF TRUTH: user-provided detailed report mockup (23.08.2026).
   Scope: Detailed Report pane only. Teams / Personal / hero stay untouched.
   ===================================================================== */

/* The supplied source has the tab rail left-aligned and half-width only while
   the detailed report is open. Preserve the centered .254 Teams rail. */
.cinematicReplayPage .cinematicTabs:has(button[data-report-tab="details"].active){
  width:52%!important;
  max-width:660px!important;
  margin:0 0 8px 12px!important;
  border-radius:5px!important;
  border-color:rgba(151,162,166,.17)!important;
  background:#171c1f!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.cinematicReplayPage .cinematicTabs:has(button[data-report-tab="details"].active) button{
  height:42px!important;
  font-family:"Bahnschrift SemiCondensed","Bahnschrift Condensed","Arial Narrow","Segoe UI",Arial,sans-serif!important;
  font-size:15px!important;
  font-weight:430!important;
  letter-spacing:.005em!important;
  color:#aeb3b5!important;
  background:linear-gradient(180deg,#202528 0%,#181d20 100%)!important;
  border-right:1px solid rgba(143,153,158,.13)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.65)!important;
}
.cinematicReplayPage .cinematicTabs button[data-report-tab="details"].active{
  color:#d8dcdd!important;
  background:linear-gradient(180deg,#252b2b 0%,#1f2525 56%,#1a211d 100%)!important;
  border-color:rgba(113,150,23,.46)!important;
  box-shadow:
    inset 0 1px 0 rgba(188,224,68,.13),
    inset 0 -1px 0 rgba(135,191,23,.48),
    0 0 12px rgba(112,170,17,.08)!important;
}
.cinematicReplayPage .cinematicTabs button[data-report-tab="details"].active:after{
  left:0!important;right:0!important;bottom:-1px!important;height:1px!important;
  background:#78aa18!important;
  box-shadow:0 0 7px rgba(125,185,20,.62)!important;
}

/* Exact report canvas: the mockup uses only a slim outer gutter. */
.cinematicReplayPage .reportPane[data-report-pane="details"]{
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  font-family:"Bahnschrift SemiCondensed","Bahnschrift Condensed","Arial Narrow","Segoe UI",Arial,sans-serif!important;
  color:#bfc4c6!important;
}
.cinematicReplayPage .reportPane[data-report-pane="details"].active{
  display:block!important;
}
.cinematicReplayPage .reportPane[data-report-pane="details"] .wotDetailV255{
  width:100%!important;
  margin:0!important;
  padding:0 2px 0!important;
  box-sizing:border-box!important;
  font-variant-numeric:tabular-nums lining-nums!important;
}

/* 3-column / 2-row geometry taken directly from the source image:
   stats | credits | experience, then time | bonuses spanning two columns. */
.wotDetailGridV255{
  width:100%!important;
  display:grid!important;
  grid-template-columns:.965fr .975fr 1.06fr!important;
  grid-template-areas:
    "stats credits xp"
    "time tokens tokens"!important;
  grid-template-rows:414px 118px!important;
  gap:14px 8px!important;
  align-items:stretch!important;
  box-sizing:border-box!important;
}
.wotStatsPanelV255{grid-area:stats!important}
.wotCreditsPanelV255{grid-area:credits!important}
.wotXpPanelV255{grid-area:xp!important}
.wotTimePanelV255{grid-area:time!important}
.wotTokensPanelV255{grid-area:tokens!important}

.wotDetailPanelV255{
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  border:1px solid #343a3d!important;
  border-radius:6px!important;
  background:
    radial-gradient(circle at 20% 0,rgba(255,255,255,.025),transparent 40%),
    linear-gradient(132deg,#1d2225 0%,#181d20 52%,#151a1d 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.028),
    inset 0 0 24px rgba(255,255,255,.008),
    0 8px 20px rgba(0,0,0,.16)!important;
}
.wotDetailPanelV255:after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.012)!important;
}

/* Panel headings */
.wotDetailPanelTitleV255{
  height:48px!important;
  min-height:48px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:0 16px!important;
  box-sizing:border-box!important;
  color:#cbd0d2!important;
}
.wotDetailPanelTitleV255 h3{
  margin:0!important;
  font-family:"Bahnschrift SemiCondensed","Bahnschrift Condensed","Arial Narrow","Segoe UI",Arial,sans-serif!important;
  font-size:18px!important;
  line-height:1!important;
  font-weight:430!important;
  letter-spacing:.005em!important;
  color:#c7ccce!important;
  text-transform:uppercase!important;
  text-shadow:0 1px 1px rgba(0,0,0,.70)!important;
}
.wotDetailTitleSvgV255{
  width:27px!important;
  height:27px!important;
  flex:0 0 27px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.1!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  filter:drop-shadow(0 0 4px currentColor)!important;
}
.wotDetailPanelTitleV255.stats .wotDetailTitleSvgV255{color:#8fd31b!important}
.wotDetailPanelTitleV255.time .wotDetailTitleSvgV255,
.wotDetailPanelTitleV255.bonus .wotDetailTitleSvgV255{color:#e4ae35!important}
.wotDetailTitleAssetV255{
  width:29px!important;
  height:29px!important;
  flex:0 0 29px!important;
  object-fit:contain!important;
  filter:brightness(1.08) contrast(1.07) drop-shadow(0 2px 2px rgba(0,0,0,.44))!important;
}
.wotDetailCreditsAssetV255{filter:grayscale(.12) brightness(1.10) contrast(1.06) drop-shadow(0 2px 2px rgba(0,0,0,.44))!important}
.wotDetailXpAssetV255{filter:sepia(.72) saturate(3.1) hue-rotate(350deg) brightness(1.02) drop-shadow(0 0 4px rgba(224,171,49,.22))!important}

/* Shared rows: restrained, thin WoT-style hierarchy. */
.wotDetailRowsV255{
  min-height:0!important;
  padding:0 20px!important;
  box-sizing:border-box!important;
  color:#b8bec0!important;
}
.wotDetailLineV255{
  min-height:19px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:14px!important;
  color:#b8bec0!important;
  font-size:13.5px!important;
  font-weight:390!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.wotDetailLineV255>span:first-child{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  color:#b7bdc0!important;
}
.wotDetailLineV255>strong{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:5px!important;
  color:#e4e7e8!important;
  font-weight:460!important;
  text-align:right!important;
}
.wotDetailLineV255.sub>span:first-child{
  padding-left:18px!important;
  color:#aeb5b8!important;
}
.wotDetailLineV255.major{margin-top:1px!important}
.wotDetailLineV255.section{
  min-height:23px!important;
  font-weight:560!important;
}
.wotDetailLineV255.section>span:first-child{
  color:#d2d5d6!important;
  font-weight:540!important;
}
.wotDetailLineV255.negativeSection>strong .wotDetailNumV255{color:#e85a53!important}

.wotDetailNumV255{
  color:#e6e9ea!important;
  font-size:14px!important;
  font-weight:470!important;
  line-height:1!important;
  letter-spacing:.004em!important;
}
.wotDetailNumV255.positive{color:#8fc824!important;font-weight:560!important}
.wotDetailNumV255.negative{color:#ed5b53!important;font-weight:540!important}
.wotDetailNumV255.gold{color:#e5b13e!important;font-weight:550!important}
.wotDetailNumV255.total{color:#f0f1f1!important;font-size:21px!important;font-weight:500!important}
.wotDetailValueWrapV255{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:5px!important;
  white-space:nowrap!important;
}
.wotInlineAssetV255{
  width:13px!important;
  height:13px!important;
  flex:0 0 13px!important;
  object-fit:contain!important;
  opacity:.92!important;
}
.wotInlineCoinV255{filter:grayscale(.08) brightness(1.12) contrast(1.08) drop-shadow(0 1px 1px rgba(0,0,0,.45))!important}
.wotInlineXpV255{filter:sepia(.72) saturate(3.0) hue-rotate(350deg) brightness(1.00) drop-shadow(0 0 2px rgba(225,174,53,.20))!important}
.wotDetailMultiplierV255{
  min-width:34px!important;
  margin-right:10px!important;
  color:#d69f2d!important;
  font-size:14px!important;
  font-weight:590!important;
  text-align:right!important;
}
.wotDetailDividerV255{
  height:1px!important;
  margin:6px 0 5px!important;
  background:rgba(159,168,171,.17)!important;
  box-shadow:0 1px 0 rgba(0,0,0,.22)!important;
}

/* Statistics card footer */
.wotStatsPanelV255 .statsRows{
  flex:1 1 auto!important;
  padding-top:0!important;
  padding-bottom:4px!important;
}
.wotDetailMoreV255{
  height:36px!important;
  min-height:36px!important;
  margin:0 18px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  border:0!important;
  border-top:1px solid rgba(158,166,169,.18)!important;
  background:transparent!important;
  color:#969ea1!important;
  font-family:inherit!important;
  font-size:12px!important;
  font-weight:420!important;
  cursor:pointer!important;
}
.wotDetailMoreV255 i{
  width:9px!important;height:9px!important;
  border-right:1.5px solid #969ea1!important;
  border-bottom:1.5px solid #969ea1!important;
  transform:rotate(45deg) translateY(-2px)!important;
}
.wotDetailMoreV255:hover{color:#c6cbcd!important}

/* Credits / XP content has its own denser rhythm. */
.wotCreditsPanelV255 .financeRows,
.wotXpPanelV255 .xpRows{
  flex:1 1 auto!important;
  padding-top:0!important;
  padding-bottom:4px!important;
}
.wotCreditsPanelV255 .wotDetailLineV255,
.wotXpPanelV255 .wotDetailLineV255{min-height:20px!important}

.wotCreditsTotalV255{
  height:48px!important;
  min-height:48px!important;
  margin:0 13px!important;
  padding:0 7px 0 8px!important;
  border-top:1px solid rgba(163,171,174,.20)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
}
.wotCreditsTotalV255>span{
  color:#d7dadb!important;
  font-size:15px!important;
  font-weight:470!important;
}
.wotCreditsTotalV255>strong .wotDetailNumV255{
  color:#eef0f1!important;
  font-size:22px!important;
  font-weight:460!important;
}
.wotCreditsTotalV255 .wotInlineCoinV255{width:15px!important;height:15px!important;flex-basis:15px!important}

.wotXpTotalV255{
  min-height:72px!important;
  margin-top:auto!important;
  padding:9px 18px 8px!important;
  background:linear-gradient(90deg,rgba(113,82,13,.54),rgba(64,49,18,.29) 70%,rgba(33,31,24,.12))!important;
  border-top:1px solid rgba(197,151,38,.34)!important;
  box-shadow:inset 0 1px 8px rgba(222,173,40,.055)!important;
}
.wotXpTotalV255>div{
  min-height:26px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
}
.wotXpTotalV255>div:first-child>span{
  color:#e4bd4d!important;
  font-size:16px!important;
  font-weight:520!important;
}
.wotXpTotalV255>div:first-child .wotDetailNumV255{
  color:#ece8df!important;
  font-size:22px!important;
  font-weight:470!important;
}
.wotXpTotalV255 small{
  color:#9ea4a5!important;
  font-size:12px!important;
  font-weight:380!important;
}
.wotXpTotalV255>div:last-child .wotDetailNumV255{
  color:#dfb63f!important;
  font-size:19px!important;
}
.wotXpTotalV255 .wotInlineXpV255{width:17px!important;height:17px!important;flex-basis:17px!important}

/* Time */
.wotTimePanelV255 .wotDetailPanelTitleV255{height:45px!important;min-height:45px!important}
.wotTimePanelV255 .timeRows{padding-top:1px!important}
.wotTimePanelV255 .wotDetailLineV255{min-height:20px!important}

/* Bonuses and tokens — broad horizontal card under credits/experience. */
.wotTokensPanelV255 .wotDetailPanelTitleV255{height:45px!important;min-height:45px!important}
.wotTokensGridV255{
  flex:1 1 auto!important;
  margin:0 12px 8px!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:stretch!important;
  border:1px solid rgba(146,155,158,.16)!important;
  border-radius:5px!important;
  background:linear-gradient(180deg,rgba(31,36,38,.45),rgba(20,25,28,.34))!important;
  overflow:hidden!important;
}
.wotTokensGridV255>div{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:10px!important;
  padding:0 20px!important;
  position:relative!important;
}
.wotTokensGridV255>div+div:before{
  content:""!important;
  position:absolute!important;
  left:0!important;top:13px!important;bottom:13px!important;
  width:1px!important;
  background:rgba(160,168,171,.20)!important;
}
.wotTokensGridV255 span:first-child{
  min-width:0!important;
  color:#aeb4b6!important;
  font-size:12.5px!important;
  font-weight:390!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.wotTokensGridV255 strong{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  font-weight:430!important;
}
.wotTokenValueV255{
  color:#e3e5e6!important;
  font-size:20px!important;
  font-weight:460!important;
}
.wotTokenValueV255.positive{color:#8cc71c!important;font-size:22px!important}
.wotTicketIconV255{
  width:22px!important;height:13px!important;display:inline-block!important;position:relative!important;
  transform:rotate(-9deg)!important;
  border:1px solid rgba(213,174,74,.60)!important;
  border-radius:1px!important;
  background:linear-gradient(135deg,#767655 0%,#a59e68 45%,#6e7154 100%)!important;
  box-shadow:0 1px 2px rgba(0,0,0,.40)!important;
}
.wotTicketIconV255:after{
  content:""!important;position:absolute!important;left:5px!important;right:5px!important;top:3px!important;bottom:3px!important;
  border:1px solid rgba(202,65,48,.55)!important;border-radius:50%!important;
}

/* Bottom database stamp + centered compare button. */
.wotDetailMetaV255{
  height:50px!important;
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:0 2px!important;
}
.wotDatabaseStampV255{
  color:#777f82!important;
  font-size:12px!important;
  font-weight:390!important;
  white-space:nowrap!important;
}
.wotDatabaseStampV255 i{
  width:16px!important;height:16px!important;margin-left:5px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid #747c7f!important;border-radius:50%!important;
  color:#8a9294!important;font-size:10px!important;font-style:normal!important;font-weight:600!important;
}
.wotCompareTeamsV255{
  position:absolute!important;
  left:50%!important;top:50%!important;
  transform:translate(-50%,-50%)!important;
  height:38px!important;
  min-width:198px!important;
  padding:0 18px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  border:1px solid #3a4043!important;
  border-radius:5px!important;
  background:linear-gradient(180deg,#303538 0%,#272c2f 100%)!important;
  color:#afb5b7!important;
  font-family:inherit!important;
  font-size:13px!important;
  font-weight:430!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 5px 12px rgba(0,0,0,.16)!important;
  cursor:pointer!important;
}
.wotCompareTeamsV255:hover{filter:brightness(1.08)!important;color:#d5d8d9!important}
.wotCompareIconV255{color:#9aa1a4!important;font-size:18px!important;line-height:1!important}

/* The source screenshot is intentionally flatter/greyer than the Teams tab.
   Remove legacy detailed-report card visuals only inside the new V255 subtree. */
.wotDetailV255 .uiAssetIcon{display:inline-block!important}

/* Responsive fallback: preserve exact desktop composition first; collapse only
   when the screen can no longer support the three source columns. */
@media (max-width:1050px){
  .cinematicReplayPage .cinematicTabs:has(button[data-report-tab="details"].active){
    width:calc(100% - 24px)!important;max-width:none!important;margin:0 12px 8px!important;
  }
  .wotDetailGridV255{
    grid-template-columns:1fr 1fr!important;
    grid-template-areas:"stats credits" "xp xp" "time tokens"!important;
    grid-template-rows:auto auto 126px!important;
  }
  .wotStatsPanelV255,.wotCreditsPanelV255{min-height:414px!important}
  .wotXpPanelV255{min-height:414px!important}
}
@media (max-width:720px){
  .wotDetailGridV255{
    display:flex!important;flex-direction:column!important;gap:10px!important;
  }
  .wotDetailPanelV255{min-height:auto!important}
  .wotStatsPanelV255,.wotCreditsPanelV255,.wotXpPanelV255{min-height:414px!important}
  .wotTimePanelV255,.wotTokensPanelV255{min-height:120px!important}
  .wotTokensGridV255{grid-template-columns:1fr 1fr!important}
  .wotTokensGridV255>div:nth-child(3):before{display:none!important}
  .wotDetailMetaV255{height:88px!important;align-items:flex-start!important;padding-top:8px!important}
  .wotCompareTeamsV255{top:auto!important;bottom:5px!important}
}


/* ==========================================================================
   v0.3.5.256 — DETAILED REPORT NET CREDITS SIGN COLOR FIX
   Net credits: negative = red, zero/positive = white.
   Scoped to the Detailed Report total only.
   ========================================================================== */
.wotCreditsTotalV255>strong .wotDetailNumV255.total.totalNegative{
  color:#ed5b53!important;
  text-shadow:0 0 7px rgba(237,91,83,.12)!important;
}

.cinematicReplayPage .approvedEconomy.silver.negativeCredits>strong{
  color:#ed5b53!important;
  text-shadow:0 0 10px rgba(237,91,83,.14)!important;
}

/* ==========================================================================
   v0.3.5.257 — BATTLE TABS UNIFIED DETAILED-REPORT STYLE
   One immutable visual rail for Personal / Teams / Detailed Report.
   Source of truth: the approved v0.3.5.255 Detailed Report tab rail.
   IMPORTANT: this block changes the tab switcher only. Teams table styling,
   row-state colors, TOP-3 accents, tank renders and all Teams FX stay intact.
   ========================================================================== */

/* Keep the rail geometry / surface identical in every report state. */
.cinematicReplayPage .cinematicTabs:has(button[data-report-tab].active){
  width:52%!important;
  max-width:660px!important;
  margin:0 0 8px 12px!important;
  border-radius:5px!important;
  border-color:rgba(151,162,166,.17)!important;
  background:#171c1f!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}

/* Neutral tabs use the exact Detailed Report typography and graphite glass. */
.cinematicReplayPage .cinematicTabs:has(button[data-report-tab].active) button{
  height:42px!important;
  font-family:"Bahnschrift SemiCondensed","Bahnschrift Condensed","Arial Narrow","Segoe UI",Arial,sans-serif!important;
  font-size:15px!important;
  font-weight:430!important;
  letter-spacing:.005em!important;
  color:#aeb3b5!important;
  background:linear-gradient(180deg,#202528 0%,#181d20 100%)!important;
  border-right:1px solid rgba(143,153,158,.13)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.65)!important;
  box-shadow:none!important;
}

/* Whichever report is active receives the same restrained Detailed Report
   selected state. This intentionally replaces the former bright Teams-tab
   lime fill, but does not touch anything inside the Teams pane itself. */
.cinematicReplayPage .cinematicTabs button[data-report-tab].active{
  color:#d8dcdd!important;
  background:linear-gradient(180deg,#252b2b 0%,#1f2525 56%,#1a211d 100%)!important;
  border-color:rgba(113,150,23,.46)!important;
  box-shadow:
    inset 0 1px 0 rgba(188,224,68,.13),
    inset 0 -1px 0 rgba(135,191,23,.48),
    0 0 12px rgba(112,170,17,.08)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.65)!important;
}
.cinematicReplayPage .cinematicTabs button[data-report-tab].active:after{
  left:0!important;
  right:0!important;
  bottom:-1px!important;
  height:1px!important;
  background:#78aa18!important;
  box-shadow:0 0 7px rgba(125,185,20,.62)!important;
}

/* The same rail remains stable on narrower layouts too. */
@media (max-width:1050px){
  .cinematicReplayPage .cinematicTabs:has(button[data-report-tab].active){
    width:calc(100% - 24px)!important;
    max-width:none!important;
    margin:0 12px 8px!important;
  }
}

/* ==========================================================================
   v0.3.5.258 — TEAMS TAB DETAILED REPORT GRAPHITE BACKGROUND PARITY
   Copy the exact graphite base surface from the approved Detailed Report
   panels into the Teams cards. Team-state colors / glow / geometry stay intact.
   ========================================================================== */

/* One continuous Detailed Report graphite surface under the Teams header,
   column rail and any uncovered body area. The red/green state rows keep their
   own backgrounds and therefore remain visually and logically unchanged. */
.battleTeamsPaneV247 .teamCardV247{
  background:
    radial-gradient(circle at 20% 0,rgba(255,255,255,.025),transparent 40%),
    linear-gradient(132deg,#1d2225 0%,#181d20 52%,#151a1d 100%)!important;
}
.battleTeamsPaneV247 .teamHeadV247,
.battleTeamsPaneV247 .teamColumnsV247,
.battleTeamsPaneV247 .teamBodyV247{
  background:transparent!important;
}
.battleTeamsPaneV247 .teamRowV247.stateUnknown{
  background:transparent!important;
}


/* ==========================================================================
   v0.3.5.259 — TEAMS TABLE REAL KPI ICONS + CLICK SORTING
   Reuse the approved in-project KPI PNG assets in the Teams table header and
   make the four KPI columns independently sortable inside each team card.
   Row state / TOP-3 identity travel with the row and are never recalculated.
   ========================================================================== */

/* The first two descriptive headers keep their labels. KPI columns are icon-
   only: damage / destroyed tank / assist / XP. */
.battleTeamsPaneV247 .teamColumnsV247 .teamMetricHeadV259{
  min-width:0!important;
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  color:inherit!important;
}
.battleTeamsPaneV247 .teamMetricSortV259{
  position:relative!important;
  width:34px!important;
  height:32px!important;
  padding:0!important;
  border:1px solid transparent!important;
  border-radius:4px!important;
  background:transparent!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
  outline:0!important;
  transition:background .14s ease,border-color .14s ease,box-shadow .14s ease,filter .14s ease!important;
}
.battleTeamsPaneV247 .teamMetricSortV259 img{
  width:23px!important;
  height:23px!important;
  object-fit:contain!important;
  opacity:.97!important;
  filter:
    brightness(1.17)
    contrast(1.13)
    drop-shadow(0 0 2px rgba(255,255,255,.20))
    drop-shadow(0 1px 1px rgba(0,0,0,.46))!important;
  pointer-events:none!important;
}
.battleTeamsPaneV247 .teamMetricSortV259 i{
  position:absolute!important;
  right:1px!important;
  bottom:-1px!important;
  min-width:9px!important;
  height:11px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#b4f326!important;
  font:700 11px/1 "Segoe UI Symbol","Arial Unicode MS",sans-serif!important;
  font-style:normal!important;
  opacity:0!important;
  text-shadow:0 0 5px rgba(169,239,31,.54),0 1px 1px rgba(0,0,0,.72)!important;
  pointer-events:none!important;
}
.battleTeamsPaneV247 .teamMetricSortV259:hover{
  border-color:rgba(193,204,200,.24)!important;
  background:rgba(255,255,255,.035)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.battleTeamsPaneV247 .teamMetricSortV259:hover img{
  filter:
    brightness(1.28)
    contrast(1.16)
    drop-shadow(0 0 3px rgba(255,255,255,.30))
    drop-shadow(0 1px 1px rgba(0,0,0,.46))!important;
}
.battleTeamsPaneV247 .teamMetricSortV259.active{
  border-color:rgba(132,190,25,.34)!important;
  background:linear-gradient(180deg,rgba(93,135,22,.075),rgba(61,95,15,.025))!important;
  box-shadow:
    inset 0 -1px 0 rgba(142,205,25,.24),
    0 0 9px rgba(121,183,20,.065)!important;
}
.battleTeamsPaneV247 .teamMetricSortV259.active img{
  filter:
    brightness(1.31)
    contrast(1.16)
    saturate(1.05)
    drop-shadow(0 0 3px rgba(255,255,255,.32))
    drop-shadow(0 0 6px rgba(156,225,29,.10))
    drop-shadow(0 1px 1px rgba(0,0,0,.46))!important;
}
.battleTeamsPaneV247 .teamMetricSortV259.active i{opacity:1!important}
.battleTeamsPaneV247 .teamMetricSortV259:focus-visible{
  border-color:rgba(174,231,48,.64)!important;
  box-shadow:0 0 0 2px rgba(149,218,29,.13),0 0 9px rgba(121,183,20,.08)!important;
}

/* Keep KPI icon buttons optically centered in the existing numeric columns;
   table geometry and row grid remain exactly the .258 layout. */
@media(max-width:1320px){
  .battleTeamsPaneV247 .teamMetricSortV259{width:31px!important;height:30px!important}
  .battleTeamsPaneV247 .teamMetricSortV259 img{width:21px!important;height:21px!important}
}

/* ==========================================================================
   v0.3.5.260 — PERSONAL RESULT BATTLE EFFECTIVENESS TAB
   Approved Personal Result source-of-truth: show only meaningful interaction
   with enemy vehicles (damage / destroyed / assist) using project KPI assets.
   Teams and Detailed Report are intentionally untouched.
   ========================================================================== */
.cinematicReplayPage .reportPane[data-report-pane="personal"]{
  padding:0!important;
}
.cinematicReplayPage .personalBattleEffectV260{
  position:relative!important;
  margin:0!important;
  padding:20px 20px 16px!important;
  border:1px solid rgba(139,153,158,.20)!important;
  border-radius:6px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 18% 0,rgba(255,255,255,.025),transparent 39%),
    linear-gradient(132deg,#1d2225 0%,#181d20 52%,#151a1d 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 12px 30px rgba(0,0,0,.13)!important;
  color:#eef2ef!important;
  font-family:"Bahnschrift SemiCondensed","Bahnschrift Condensed","Arial Narrow","Segoe UI",Arial,sans-serif!important;
}
.cinematicReplayPage .personalBattleHeaderV260{
  height:43px!important;
  display:flex!important;
  align-items:center!important;
  gap:13px!important;
  padding:0 4px 9px!important;
}
.cinematicReplayPage .personalBattleTargetV260{
  width:38px!important;
  height:38px!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 38px!important;
}
.cinematicReplayPage .personalBattleTargetV260 img{
  width:34px!important;
  height:34px!important;
  object-fit:contain!important;
  filter:brightness(1.17) saturate(1.28) drop-shadow(0 0 7px rgba(163,230,27,.34))!important;
}
.cinematicReplayPage .personalBattleHeaderV260 h3{
  margin:0!important;
  color:#eef1ef!important;
  font-size:23px!important;
  line-height:1!important;
  font-weight:650!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
  text-shadow:0 2px 2px rgba(0,0,0,.54)!important;
}
.cinematicReplayPage .personalSummaryGridV260{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
  margin:9px 0 12px!important;
}
.cinematicReplayPage .personalSummaryCardV260{
  min-height:72px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:22px!important;
  padding:11px 24px!important;
  border:1px solid rgba(141,153,158,.23)!important;
  border-radius:5px!important;
  background:
    radial-gradient(circle at 50% 0,rgba(255,255,255,.025),transparent 52%),
    linear-gradient(180deg,#202528 0%,#191e21 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.cinematicReplayPage .personalSummaryCardV260>img{
  width:44px!important;
  height:44px!important;
  object-fit:contain!important;
  flex:0 0 44px!important;
  opacity:1!important;
  filter:brightness(1.15) contrast(1.10) drop-shadow(0 4px 4px rgba(0,0,0,.48))!important;
}
.cinematicReplayPage .personalSummaryCardV260.kills>img{
  filter:brightness(1.14) contrast(1.09) saturate(1.09) drop-shadow(0 0 7px rgba(235,88,77,.16)) drop-shadow(0 4px 4px rgba(0,0,0,.48))!important;
}
.cinematicReplayPage .personalSummaryCardV260.assist>img{
  filter:brightness(1.16) contrast(1.10) saturate(1.10) drop-shadow(0 0 7px rgba(149,222,30,.14)) drop-shadow(0 4px 4px rgba(0,0,0,.48))!important;
}
.cinematicReplayPage .personalSummaryCardV260 div{
  min-width:125px!important;
}
.cinematicReplayPage .personalSummaryCardV260 span{
  display:block!important;
  color:#a9afb0!important;
  font-size:12px!important;
  font-weight:500!important;
  letter-spacing:.035em!important;
  text-transform:uppercase!important;
}
.cinematicReplayPage .personalSummaryCardV260 strong{
  display:block!important;
  margin-top:3px!important;
  color:#f6f7f6!important;
  font-size:29px!important;
  line-height:1!important;
  font-weight:650!important;
  letter-spacing:.02em!important;
  font-variant-numeric:tabular-nums!important;
  text-shadow:0 2px 2px rgba(0,0,0,.55)!important;
}
.cinematicReplayPage .personalBattleTableV260{
  overflow:hidden!important;
  border:1px solid rgba(136,149,154,.20)!important;
  border-radius:5px!important;
  background:rgba(14,18,20,.34)!important;
}
.cinematicReplayPage .personalBattleColumnsV260,
.cinematicReplayPage .personalBattleRowV260{
  display:grid!important;
  grid-template-columns:minmax(220px,1.22fr) minmax(235px,1fr) 140px 118px 140px!important;
  align-items:center!important;
}
.cinematicReplayPage .personalBattleColumnsV260{
  height:47px!important;
  color:#aeb4b5!important;
  background:linear-gradient(180deg,rgba(20,25,28,.98),rgba(17,22,25,.98))!important;
  border-bottom:1px solid rgba(132,145,150,.20)!important;
}
.cinematicReplayPage .personalBattleColumnsV260>span{
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  padding:0 17px!important;
  border-right:1px solid rgba(117,128,133,.16)!important;
  font-size:13px!important;
  font-weight:430!important;
  letter-spacing:.015em!important;
}
.cinematicReplayPage .personalBattleColumnsV260>span:last-child{border-right:0!important}
.cinematicReplayPage .personalBattleColumnsV260>span.metric{
  justify-content:center!important;
  padding:0!important;
}
.cinematicReplayPage .personalBattleColumnsV260>span.metric img{
  width:28px!important;
  height:28px!important;
  object-fit:contain!important;
  opacity:.98!important;
  filter:brightness(1.18) contrast(1.12) drop-shadow(0 1px 1px rgba(0,0,0,.62))!important;
}
.cinematicReplayPage .personalBattleBodyV260{
  background:rgba(18,23,25,.30)!important;
}
.cinematicReplayPage .personalBattleRowV260{
  min-height:52px!important;
  color:#e9ecea!important;
  border-bottom:1px solid rgba(111,123,128,.17)!important;
  background:linear-gradient(90deg,rgba(255,255,255,.008),rgba(255,255,255,.002))!important;
  transition:background .13s ease,box-shadow .13s ease!important;
}
.cinematicReplayPage .personalBattleRowV260:last-child{border-bottom:0!important}
.cinematicReplayPage .personalBattleRowV260:hover{
  background:linear-gradient(90deg,rgba(128,168,72,.075),rgba(57,70,63,.035))!important;
  box-shadow:inset 2px 0 0 rgba(155,222,36,.40)!important;
}
.cinematicReplayPage .personalEnemyV260,
.cinematicReplayPage .personalVehicleV260,
.cinematicReplayPage .personalMetricValueV260{
  height:100%!important;
  min-height:52px!important;
  border-right:1px solid rgba(111,123,128,.15)!important;
}
.cinematicReplayPage .personalEnemyV260{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
  padding:0 17px!important;
}
.cinematicReplayPage .personalEnemyV260 strong{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#eef1ef!important;
  font-size:15px!important;
  font-weight:520!important;
}
.cinematicReplayPage .personalEnemyV260 span{
  flex:0 0 auto!important;
  color:#8f9995!important;
  font-size:11px!important;
  font-weight:450!important;
}
.cinematicReplayPage .personalVehicleV260{
  display:grid!important;
  grid-template-columns:104px minmax(0,1fr)!important;
  align-items:center!important;
  gap:5px!important;
  min-width:0!important;
  padding:0 11px 0 4px!important;
}
.cinematicReplayPage .personalTankThumbV260{
  width:104px!important;
  height:48px!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
}
.cinematicReplayPage .personalTankThumbV260 img{
  max-width:104px!important;
  max-height:46px!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
  filter:brightness(1.12) contrast(1.12) saturate(1.06) drop-shadow(0 5px 4px rgba(0,0,0,.58))!important;
}
.cinematicReplayPage .personalVehicleV260 strong{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#ecefed!important;
  font-size:15px!important;
  font-weight:520!important;
}
.cinematicReplayPage .personalMetricValueV260{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#f3f5f4!important;
  font-size:17px!important;
  font-weight:600!important;
  font-variant-numeric:tabular-nums!important;
  letter-spacing:.02em!important;
  text-align:center!important;
}
.cinematicReplayPage .personalMetricValueV260.kills{
  color:#f06258!important;
  text-shadow:0 0 7px rgba(240,98,88,.10)!important;
}
.cinematicReplayPage .personalMetricValueV260.assist{
  border-right:0!important;
  color:#9ee11f!important;
  text-shadow:0 0 7px rgba(158,225,31,.08)!important;
}
.cinematicReplayPage .personalBattleNoteV260{
  min-height:38px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  color:#777f80!important;
  font-size:12px!important;
  letter-spacing:.01em!important;
}
.cinematicReplayPage .personalBattleNoteV260>span{
  width:18px!important;
  height:18px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #687173!important;
  border-radius:50%!important;
  color:#959d9e!important;
  font:600 11px/1 Arial,sans-serif!important;
}
.cinematicReplayPage .personalBattleEmptyV260{
  min-height:110px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:24px!important;
  color:#7f8987!important;
  font-size:13px!important;
  text-align:center!important;
}
@media(max-width:1120px){
  .cinematicReplayPage .personalBattleColumnsV260,
  .cinematicReplayPage .personalBattleRowV260{
    grid-template-columns:minmax(190px,1.15fr) minmax(210px,1fr) 112px 92px 112px!important;
  }
  .cinematicReplayPage .personalVehicleV260{grid-template-columns:88px minmax(0,1fr)!important}
  .cinematicReplayPage .personalTankThumbV260{width:88px!important}
  .cinematicReplayPage .personalTankThumbV260 img{max-width:88px!important}
}
@media(max-width:820px){
  .cinematicReplayPage .personalBattleEffectV260{padding:14px 12px 12px!important;overflow-x:auto!important}
  .cinematicReplayPage .personalSummaryGridV260{min-width:760px!important;gap:10px!important}
  .cinematicReplayPage .personalBattleTableV260{min-width:760px!important}
  .cinematicReplayPage .personalBattleHeaderV260{min-width:760px!important}
  .cinematicReplayPage .personalBattleNoteV260{min-width:760px!important}
}
/* v0.3.5.260 target glyph correction: render the existing accuracy.svg as a
   CSS mask so the approved lime accent is deterministic. */
.cinematicReplayPage .personalBattleTargetV260 .personalBattleTargetIconV260{
  width:34px!important;
  height:34px!important;
  display:block!important;
  color:#9bdd19!important;
  background:#9bdd19!important;
  filter:drop-shadow(0 0 7px rgba(163,230,27,.34))!important;
}
.cinematicReplayPage .personalBattleTargetV260>img{display:none!important}


/* ==========================================================================
   v0.3.5.261 — TEAMS HEADER KILLS COUNTER REMOVE + RESULT EMPHASIS
   Remove the redundant crossed-swords team kill counter from both team headers.
   Keep total team damage/star and make Победа / Поражение easier to read.
   ========================================================================== */
.battleTeamsPaneV247 .teamSummaryV247{
  gap:24px!important;
}
.battleTeamsPaneV247 .teamResultV247{
  font-size:19px!important;
  font-weight:760!important;
  letter-spacing:.005em!important;
  line-height:1!important;
}
.battleTeamsPaneV247 .teamCardV247.ally .teamResultV247{
  color:#b5f126!important;
  text-shadow:0 0 9px rgba(166,235,30,.24),0 1px 1px rgba(0,0,0,.46)!important;
}
.battleTeamsPaneV247 .teamCardV247.enemy .teamResultV247{
  color:#ff5a56!important;
  text-shadow:0 0 9px rgba(255,76,71,.20),0 1px 1px rgba(0,0,0,.46)!important;
}
.battleTeamsPaneV247 .teamCardV247.draw .teamResultV247{
  color:#e8bd48!important;
}

/* ==========================================================================
   v0.3.5.262 — PERSONAL RESULT BATTLE EFFECTIVENESS PREMIUM EXPANSION
   Approved premium redesign of the Personal Result tab with 6 summary KPI
   cards, expanded enemy interaction matrix, and a lower critical-modules strip.
   Real project KPI icons are preserved for damage / destroyed / assist.
   Module detail cards stay honest: when the replay does not expose a module
   breakdown, the UI shows placeholders and explanatory tooltips instead of
   invented values.
   ========================================================================== */
.cinematicReplayPage .personalBattleEffectV262{
  position:relative!important;
  margin:0!important;
  padding:18px 18px 14px!important;
  border:1px solid rgba(134,147,152,.20)!important;
  border-radius:7px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 28% 0,rgba(255,255,255,.035),transparent 46%),
    linear-gradient(132deg,#1d2225 0%,#191e21 52%,#151a1d 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 14px 34px rgba(0,0,0,.13)!important;
  color:#eef2ef!important;
  font-family:"Bahnschrift SemiCondensed","Bahnschrift Condensed","Arial Narrow","Segoe UI",Arial,sans-serif!important;
}
.cinematicReplayPage .personalBattleHeaderV262{
  min-height:44px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;padding:2px 2px 10px!important;
}
.cinematicReplayPage .personalBattleHeaderMainV262{display:flex!important;align-items:center!important;gap:13px!important;min-width:0!important}
.cinematicReplayPage .personalBattleTargetV262{width:38px!important;height:38px!important;display:grid!important;place-items:center!important;flex:0 0 38px!important}
.cinematicReplayPage .personalBattleTargetV262 .personalBattleTargetIconV262{width:34px!important;height:34px!important;display:block!important;color:#9bdd19!important;background:#9bdd19!important;filter:drop-shadow(0 0 8px rgba(163,230,27,.35))!important}
.cinematicReplayPage .personalBattleHeaderMainV262 h3{margin:0!important;color:#f2f5f1!important;font-size:22px!important;line-height:1!important;font-weight:650!important;letter-spacing:.045em!important;text-transform:uppercase!important;text-shadow:0 2px 2px rgba(0,0,0,.54)!important}
.cinematicReplayPage .personalBattleLegendV262{display:flex!important;align-items:center!important;gap:7px!important;color:#8f9698!important;font-size:12px!important;letter-spacing:.01em!important;white-space:nowrap!important}
.cinematicReplayPage .personalBattleLegendV262 span,.cinematicReplayPage .personalBattleNoteV262>span{width:18px!important;height:18px!important;display:grid!important;place-items:center!important;border:1px solid #687173!important;border-radius:50%!important;color:#959d9e!important;font:600 11px/1 Arial,sans-serif!important;flex:0 0 18px!important}
.cinematicReplayPage .personalSummaryGridV262{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:14px!important;margin:2px 0 16px!important}
.cinematicReplayPage .personalSummaryCardV262{min-height:148px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:10px!important;padding:14px 12px 10px!important;border:1px solid rgba(141,153,158,.22)!important;border-radius:6px!important;background:radial-gradient(circle at 50% 0,rgba(255,255,255,.028),transparent 54%),linear-gradient(180deg,#202528 0%,#191e21 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;text-align:center!important}
.cinematicReplayPage .personalSummaryCopyV262{min-width:0!important}
.cinematicReplayPage .personalSummaryCopyV262 span{display:block!important;color:#b3b7b8!important;font-size:12px!important;font-weight:500!important;letter-spacing:.04em!important;text-transform:uppercase!important}
.cinematicReplayPage .personalSummaryCopyV262 strong{display:block!important;margin-top:6px!important;color:#f6f7f6!important;font-size:28px!important;line-height:1!important;font-weight:650!important;letter-spacing:.02em!important;font-variant-numeric:tabular-nums!important;text-shadow:0 2px 2px rgba(0,0,0,.55)!important}
.cinematicReplayPage .personalSummaryCardV262.tone-red{box-shadow:inset 0 -2px 0 rgba(248,90,86,.78), inset 0 1px 0 rgba(255,255,255,.03)!important}
.cinematicReplayPage .personalSummaryCardV262.tone-green{box-shadow:inset 0 -2px 0 rgba(151,223,33,.78), inset 0 1px 0 rgba(255,255,255,.03)!important;background:radial-gradient(circle at 50% 0,rgba(100,160,40,.10),transparent 58%),linear-gradient(180deg,#202528 0%,#191e21 100%)!important}
.cinematicReplayPage .personalSummaryCardV262.tone-cyan{box-shadow:inset 0 -2px 0 rgba(84,208,224,.78), inset 0 1px 0 rgba(255,255,255,.03)!important}
.cinematicReplayPage .personalSummaryCardV262.tone-orange{box-shadow:inset 0 -2px 0 rgba(236,170,78,.78), inset 0 1px 0 rgba(255,255,255,.03)!important}
.cinematicReplayPage .personalSummaryCardV262.tone-blue{box-shadow:inset 0 -2px 0 rgba(113,160,255,.78), inset 0 1px 0 rgba(255,255,255,.03)!important}
.cinematicReplayPage .personalSummaryCardV262.tone-red strong{color:#ff827a!important}
.cinematicReplayPage .personalSummaryCardV262.tone-green strong{color:#b7eb49!important}
.cinematicReplayPage .personalSummaryCardV262.tone-cyan strong{color:#a2edf5!important}
.cinematicReplayPage .personalSummaryCardV262.tone-orange strong{color:#ffbe66!important}
.cinematicReplayPage .personalSummaryCardV262.tone-blue strong{color:#9cc0ff!important}
.cinematicReplayPage .personalGlyphImgV262{width:50px!important;height:50px!important;object-fit:contain!important;display:block!important;filter:brightness(1.12) contrast(1.12) drop-shadow(0 4px 4px rgba(0,0,0,.48))!important}
.cinematicReplayPage .personalGlyphImgV262.summary{width:48px!important;height:48px!important}
.cinematicReplayPage .personalGlyphMaskV262,.cinematicReplayPage .personalGlyphSvgWrapV262,.cinematicReplayPage .moduleMiniIconV262{width:48px!important;height:48px!important;display:grid!important;place-items:center!important;flex:0 0 48px!important}
.cinematicReplayPage .personalGlyphMaskInnerV262{width:42px!important;height:42px!important;display:block!important;opacity:1!important}
.cinematicReplayPage .personalGlyphMaskV262.spotted .personalGlyphMaskInnerV262{color:#7edce7!important;background:#7edce7!important;filter:drop-shadow(0 0 8px rgba(113,211,226,.24))!important}
.cinematicReplayPage .personalGlyphSvgV262,.cinematicReplayPage .moduleMiniSvgV262{width:42px!important;height:42px!important;display:block!important;color:inherit!important}
.cinematicReplayPage .personalGlyphSvgWrapV262.crits{color:#efb060!important;filter:drop-shadow(0 0 8px rgba(239,176,96,.20))!important}
.cinematicReplayPage .personalGlyphSvgWrapV262.blocked{color:#90b9ff!important;filter:drop-shadow(0 0 8px rgba(108,160,255,.18))!important}
.cinematicReplayPage .moduleMiniIconV262.track,.cinematicReplayPage .moduleMiniIconV262.engine,.cinematicReplayPage .moduleMiniIconV262.ammo,.cinematicReplayPage .moduleMiniIconV262.radio{color:#d2d7d4!important}
.cinematicReplayPage .personalBattleTableV262{overflow:hidden!important;border:1px solid rgba(136,149,154,.20)!important;border-radius:6px!important;background:rgba(14,18,20,.34)!important}
.cinematicReplayPage .personalBattleColumnsV262,.cinematicReplayPage .personalBattleRowV262{display:grid!important;grid-template-columns:minmax(220px,1.14fr) minmax(245px,1fr) 116px 82px 112px 112px 112px 112px!important;align-items:center!important}
.cinematicReplayPage .personalBattleColumnsV262{min-height:48px!important;color:#aeb4b5!important;background:linear-gradient(180deg,rgba(20,25,28,.98),rgba(17,22,25,.98))!important;border-bottom:1px solid rgba(132,145,150,.20)!important}
.cinematicReplayPage .personalBattleColumnsV262>span{height:100%!important;display:flex!important;align-items:center!important;padding:0 15px!important;border-right:1px solid rgba(117,128,133,.16)!important;font-size:13px!important;font-weight:430!important;letter-spacing:.015em!important}
.cinematicReplayPage .personalBattleColumnsV262>span:last-child{border-right:0!important}
.cinematicReplayPage .personalBattleColumnsV262>span.metric{justify-content:center!important;padding:0!important}
.cinematicReplayPage .personalBattleColumnsV262 .personalGlyphImgV262.table{width:26px!important;height:26px!important}
.cinematicReplayPage .personalBattleColumnsV262 .personalGlyphMaskV262.table,.cinematicReplayPage .personalBattleColumnsV262 .personalGlyphSvgWrapV262.table{width:32px!important;height:32px!important;flex:0 0 32px!important}
.cinematicReplayPage .personalBattleColumnsV262 .personalGlyphMaskV262.table .personalGlyphMaskInnerV262,.cinematicReplayPage .personalBattleColumnsV262 .personalGlyphSvgWrapV262.table .personalGlyphSvgV262{width:28px!important;height:28px!important}
.cinematicReplayPage .personalBattleBodyV262{background:rgba(18,23,25,.30)!important}
.cinematicReplayPage .personalBattleRowV262{min-height:54px!important;color:#e9ecea!important;border-bottom:1px solid rgba(111,123,128,.17)!important;background:linear-gradient(90deg,rgba(255,255,255,.008),rgba(255,255,255,.002))!important;transition:background .13s ease,box-shadow .13s ease!important}
.cinematicReplayPage .personalBattleRowV262:last-child{border-bottom:0!important}
.cinematicReplayPage .personalBattleRowV262:hover{background:linear-gradient(90deg,rgba(128,168,72,.075),rgba(57,70,63,.035))!important;box-shadow:inset 2px 0 0 rgba(155,222,36,.40)!important}
.cinematicReplayPage .personalEnemyV262,.cinematicReplayPage .personalVehicleV262,.cinematicReplayPage .personalMetricValueV262{height:100%!important;min-height:54px!important;border-right:1px solid rgba(111,123,128,.15)!important}
.cinematicReplayPage .personalEnemyV262{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;padding:0 16px!important}
.cinematicReplayPage .personalEnemyV262 strong{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#eef1ef!important;font-size:14px!important;font-weight:520!important}
.cinematicReplayPage .personalEnemyV262 span{flex:0 0 auto!important;color:#8f9995!important;font-size:10px!important;font-weight:450!important}
.cinematicReplayPage .personalVehicleV262{display:grid!important;grid-template-columns:104px minmax(0,1fr)!important;align-items:center!important;gap:5px!important;min-width:0!important;padding:0 10px 0 4px!important}
.cinematicReplayPage .personalTankThumbV262{width:104px!important;height:48px!important;display:grid!important;place-items:center!important;overflow:visible!important}
.cinematicReplayPage .personalTankThumbV262 img{max-width:104px!important;max-height:46px!important;width:auto!important;height:auto!important;object-fit:contain!important;filter:brightness(1.12) contrast(1.12) saturate(1.06) drop-shadow(0 5px 4px rgba(0,0,0,.58))!important}
.cinematicReplayPage .personalVehicleV262 strong{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#ecefed!important;font-size:14px!important;font-weight:520!important}
.cinematicReplayPage .personalMetricValueV262{display:flex!important;align-items:center!important;justify-content:center!important;color:#f3f5f4!important;font-size:16px!important;font-weight:600!important;font-variant-numeric:tabular-nums!important;letter-spacing:.02em!important;text-align:center!important}
.cinematicReplayPage .personalMetricValueV262.kills{color:#f06258!important;text-shadow:0 0 7px rgba(240,98,88,.10)!important}
.cinematicReplayPage .personalMetricValueV262.assist{color:#9ee11f!important;text-shadow:0 0 7px rgba(158,225,31,.08)!important}
.cinematicReplayPage .personalMetricValueV262.spotted{color:#8ae9f1!important;text-shadow:0 0 7px rgba(138,233,241,.08)!important}
.cinematicReplayPage .personalMetricValueV262.crits{color:#ffbb64!important;text-shadow:0 0 7px rgba(255,187,100,.08)!important}
.cinematicReplayPage .personalMetricValueV262.blocked{border-right:0!important;color:#9abfff!important;text-shadow:0 0 7px rgba(154,191,255,.08)!important}
.cinematicReplayPage .personalModulesStripV262{margin-top:12px!important;display:grid!important;grid-template-columns:1.25fr repeat(4,minmax(0,1fr))!important;gap:12px!important}
.cinematicReplayPage .personalModulesLeadV262,.cinematicReplayPage .personalModuleCardV262{min-height:110px!important;border:1px solid rgba(136,149,154,.20)!important;border-radius:6px!important;background:linear-gradient(180deg,rgba(31,36,39,.92),rgba(24,29,32,.94))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important}
.cinematicReplayPage .personalModulesLeadV262{display:flex!important;align-items:center!important;gap:14px!important;padding:14px 16px!important}
.cinematicReplayPage .personalModulesLeadV262 h4{margin:0!important;color:#f0f2f1!important;font-size:17px!important;letter-spacing:.04em!important;text-transform:uppercase!important}
.cinematicReplayPage .personalModulesLeadV262 p{margin:8px 0 0!important;color:#a7afb0!important;font-size:15px!important}
.cinematicReplayPage .personalModulesLeadV262 p strong{color:#ffb958!important;font-size:22px!important;font-weight:650!important}
.cinematicReplayPage .personalModuleCardV262{display:flex!important;align-items:center!important;gap:12px!important;padding:14px 16px!important}
.cinematicReplayPage .personalModuleCardV262 div{min-width:0!important}
.cinematicReplayPage .personalModuleCardV262 span{display:block!important;color:#b8bdbe!important;font-size:14px!important;line-height:1.12!important}
.cinematicReplayPage .personalModuleCardV262 strong{display:block!important;margin-top:8px!important;color:#ffbf63!important;font-size:28px!important;line-height:1!important;font-weight:650!important}
.cinematicReplayPage .personalBattleNoteV262{min-height:38px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;margin-top:10px!important;color:#7d8587!important;font-size:12px!important;letter-spacing:.01em!important;text-align:center!important}
.cinematicReplayPage .personalBattleEmptyV262{min-height:132px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:24px!important;color:#7f8987!important;font-size:13px!important;text-align:center!important}
@media(max-width:1480px){.cinematicReplayPage .personalSummaryGridV262{grid-template-columns:repeat(3,minmax(0,1fr))!important}.cinematicReplayPage .personalModulesStripV262{grid-template-columns:repeat(2,minmax(0,1fr))!important}.cinematicReplayPage .personalModulesLeadV262{grid-column:1/-1!important}}
@media(max-width:1180px){.cinematicReplayPage .personalBattleColumnsV262,.cinematicReplayPage .personalBattleRowV262{grid-template-columns:minmax(190px,1.05fr) minmax(220px,.96fr) 96px 74px 96px 96px 96px 96px!important}.cinematicReplayPage .personalVehicleV262{grid-template-columns:88px minmax(0,1fr)!important}.cinematicReplayPage .personalTankThumbV262{width:88px!important}.cinematicReplayPage .personalTankThumbV262 img{max-width:88px!important}}
@media(max-width:900px){.cinematicReplayPage .personalBattleEffectV262{padding:14px 12px 12px!important;overflow-x:auto!important}.cinematicReplayPage .personalBattleHeaderV262,.cinematicReplayPage .personalSummaryGridV262,.cinematicReplayPage .personalBattleTableV262,.cinematicReplayPage .personalModulesStripV262,.cinematicReplayPage .personalBattleNoteV262{min-width:980px!important}.cinematicReplayPage .personalBattleHeaderV262{flex-direction:column!important;align-items:flex-start!important}.cinematicReplayPage .personalBattleLegendV262{white-space:normal!important}}

/* ========================================================================== 
   v0.3.5.263 — REAL CRIT MASK DECODER UI
   Critical-hit cells now show the decoded WoT module/tankman breakdown. The
   lower module strip is populated from real parsed replay data.
   ========================================================================== */
.cinematicReplayPage .personalCritCellV263{
  position:relative!important;
  cursor:help!important;
  overflow:visible!important;
  outline:none!important;
}
.cinematicReplayPage .personalCritCellV263>b{
  color:#ffbb64!important;
  font:inherit!important;
  text-shadow:0 0 8px rgba(255,187,100,.12)!important;
}
.cinematicReplayPage .personalCritTooltipV263{
  position:absolute!important;
  z-index:80!important;
  left:50%!important;
  bottom:calc(100% - 3px)!important;
  width:240px!important;
  transform:translate(-50%,8px)!important;
  padding:11px 12px!important;
  border:1px solid rgba(210,165,91,.42)!important;
  border-radius:5px!important;
  background:linear-gradient(180deg,rgba(29,32,32,.985),rgba(14,18,19,.985))!important;
  box-shadow:0 14px 28px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.035)!important;
  color:#dce1df!important;
  text-align:left!important;
  pointer-events:none!important;
  opacity:0!important;
  visibility:hidden!important;
  transition:opacity .13s ease,transform .13s ease,visibility .13s ease!important;
}
.cinematicReplayPage .personalCritCellV263:hover .personalCritTooltipV263,
.cinematicReplayPage .personalCritCellV263:focus .personalCritTooltipV263{
  opacity:1!important;
  visibility:visible!important;
  transform:translate(-50%,0)!important;
}
.cinematicReplayPage .personalCritTooltipV263:after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:100%!important;
  border:6px solid transparent!important;
  border-top-color:rgba(210,165,91,.42)!important;
  transform:translateX(-50%)!important;
}
.cinematicReplayPage .personalCritTooltipV263>strong{
  display:block!important;
  margin-bottom:7px!important;
  color:#efb060!important;
  font-size:12px!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
}
.cinematicReplayPage .personalCritTooltipGroupV263{
  display:grid!important;
  grid-template-columns:80px minmax(0,1fr)!important;
  gap:7px!important;
  padding:4px 0!important;
  border-top:1px solid rgba(255,255,255,.05)!important;
  font-size:11px!important;
  line-height:1.25!important;
}
.cinematicReplayPage .personalCritTooltipGroupV263 span{color:#929b99!important;font-weight:500!important}
.cinematicReplayPage .personalCritTooltipGroupV263 b{color:#e8ecea!important;font-size:11px!important;font-weight:600!important;white-space:normal!important}
.cinematicReplayPage .personalCritTooltipGroupV263.critical b{color:#ffc16d!important}
.cinematicReplayPage .personalCritTooltipGroupV263.destroyed b{color:#ff796f!important}
.cinematicReplayPage .personalCritTooltipGroupV263.crew b{color:#d8dde0!important}
.cinematicReplayPage .personalModulesStripV263{
  grid-template-columns:minmax(260px,1.35fr) repeat(3,minmax(180px,1fr))!important;
  align-items:stretch!important;
}
.cinematicReplayPage .personalModulesLeadV262>div>small{
  display:block!important;
  margin-top:4px!important;
  color:#737d7b!important;
  font-size:10px!important;
}
.cinematicReplayPage .personalModuleCardV262.realV263{
  position:relative!important;
  overflow:hidden!important;
  transition:border-color .13s ease,background .13s ease,transform .13s ease!important;
}
.cinematicReplayPage .personalModuleCardV262.realV263:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(238,177,86,.38)!important;
  background:linear-gradient(180deg,rgba(39,40,38,.96),rgba(25,29,30,.96))!important;
}
.cinematicReplayPage .personalModuleCardV262.realV263 strong{color:#ffc064!important}
.cinematicReplayPage .personalModuleCardV262.realV263 small{
  display:block!important;
  margin-top:5px!important;
  color:#7f8987!important;
  font-size:9px!important;
  line-height:1.15!important;
}
.cinematicReplayPage .personalModuleCardV262.realV263.crew{
  box-shadow:inset 0 -2px 0 rgba(202,210,216,.16),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.cinematicReplayPage .personalModuleCardV262.emptyV263{justify-content:center!important;text-align:center!important}
@media(max-width:1480px){
  .cinematicReplayPage .personalModulesStripV263{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .cinematicReplayPage .personalModulesStripV263 .personalModulesLeadV262{grid-column:1/-1!important}
}

/* ========================================================================== 
   v0.3.5.264 — PERSONAL RESULT APPROVED MOCKUP VISUAL INTEGRATION
   Tightens the Personal Result block back into the established FermaniHUB
   battle-page proportions while preserving the premium crit-module expansion.
   ========================================================================== */
.cinematicReplayPage .personalBattleEffectV262{
  margin-top:0!important;
  padding:14px 16px 14px!important;
  border-radius:6px!important;
  border-color:rgba(120,134,138,.18)!important;
  background:
    radial-gradient(circle at 26% 0,rgba(255,255,255,.03),transparent 42%),
    linear-gradient(180deg,#1b2023 0%,#171c1f 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 10px 24px rgba(0,0,0,.12)!important;
}
.cinematicReplayPage .personalBattleHeaderV262{
  min-height:36px!important;
  padding:0 2px 10px!important;
  gap:10px!important;
}
.cinematicReplayPage .personalBattleHeaderMainV262{gap:10px!important}
.cinematicReplayPage .personalBattleTargetV262{width:28px!important;height:28px!important;flex-basis:28px!important}
.cinematicReplayPage .personalBattleTargetV262 .personalBattleTargetIconV262{width:28px!important;height:28px!important;filter:drop-shadow(0 0 8px rgba(155,221,25,.26))!important}
.cinematicReplayPage .personalBattleHeaderMainV262 h3{font-size:18px!important;letter-spacing:.03em!important}
.cinematicReplayPage .personalBattleLegendV262{font-size:11px!important;color:#848d90!important}
.cinematicReplayPage .personalBattleLegendV262 span{width:16px!important;height:16px!important;flex-basis:16px!important;font-size:10px!important}

.cinematicReplayPage .personalSummaryGridV262{
  gap:10px!important;
  margin:0 0 10px!important;
}
.cinematicReplayPage .personalSummaryCardV262{
  min-height:74px!important;
  display:grid!important;
  grid-template-rows:auto auto!important;
  justify-items:center!important;
  align-content:center!important;
  gap:5px!important;
  padding:10px 8px 8px!important;
  border-radius:5px!important;
  border:1px solid rgba(130,144,148,.18)!important;
  background:linear-gradient(180deg,rgba(39,45,49,.9),rgba(28,33,36,.96))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important;
}
.cinematicReplayPage .personalSummaryCardV262.tone-neutral{box-shadow:inset 0 -2px 0 rgba(240,243,245,.46), inset 0 1px 0 rgba(255,255,255,.02)!important}
.cinematicReplayPage .personalSummaryCardV262.tone-red{box-shadow:inset 0 -2px 0 rgba(249,92,88,.80), inset 0 1px 0 rgba(255,255,255,.02)!important}
.cinematicReplayPage .personalSummaryCardV262.tone-green{box-shadow:inset 0 -2px 0 rgba(156,222,38,.82), inset 0 1px 0 rgba(255,255,255,.02)!important;background:radial-gradient(circle at 50% 0,rgba(122,172,55,.10),transparent 55%),linear-gradient(180deg,rgba(39,45,49,.9),rgba(28,33,36,.96))!important}
.cinematicReplayPage .personalSummaryCardV262.tone-cyan{box-shadow:inset 0 -2px 0 rgba(92,213,228,.82), inset 0 1px 0 rgba(255,255,255,.02)!important}
.cinematicReplayPage .personalSummaryCardV262.tone-orange{box-shadow:inset 0 -2px 0 rgba(238,177,80,.82), inset 0 1px 0 rgba(255,255,255,.02)!important}
.cinematicReplayPage .personalSummaryCardV262.tone-blue{box-shadow:inset 0 -2px 0 rgba(123,169,255,.82), inset 0 1px 0 rgba(255,255,255,.02)!important}
.cinematicReplayPage .personalSummaryCopyV262 span{font-size:10px!important;letter-spacing:.04em!important;color:#b7bec0!important}
.cinematicReplayPage .personalSummaryCopyV262 strong{margin-top:4px!important;font-size:24px!important;line-height:1!important}
.cinematicReplayPage .personalGlyphImgV262.summary,
.cinematicReplayPage .personalGlyphMaskV262.summary,
.cinematicReplayPage .personalGlyphSvgWrapV262.summary{width:30px!important;height:30px!important;flex-basis:30px!important}
.cinematicReplayPage .personalGlyphImgV262.summary{width:30px!important;height:30px!important}
.cinematicReplayPage .personalGlyphMaskV262.summary .personalGlyphMaskInnerV262,
.cinematicReplayPage .personalGlyphSvgWrapV262.summary .personalGlyphSvgV262{width:26px!important;height:26px!important}

.cinematicReplayPage .personalBattleTableV262{
  border-radius:5px!important;
  background:rgba(15,19,21,.42)!important;
}
.cinematicReplayPage .personalBattleColumnsV262,
.cinematicReplayPage .personalBattleRowV262{
  grid-template-columns:minmax(188px,1.08fr) minmax(170px,.90fr) 88px 72px 82px 88px 82px 82px!important;
}
.cinematicReplayPage .personalBattleColumnsV262{min-height:40px!important}
.cinematicReplayPage .personalBattleColumnsV262>span{
  padding:0 12px!important;
  font-size:12px!important;
  border-right-color:rgba(117,128,133,.12)!important;
}
.cinematicReplayPage .personalBattleColumnsV262 .personalGlyphImgV262.table{width:22px!important;height:22px!important}
.cinematicReplayPage .personalBattleColumnsV262 .personalGlyphMaskV262.table,
.cinematicReplayPage .personalBattleColumnsV262 .personalGlyphSvgWrapV262.table{width:28px!important;height:28px!important;flex-basis:28px!important}
.cinematicReplayPage .personalBattleColumnsV262 .personalGlyphMaskV262.table .personalGlyphMaskInnerV262,
.cinematicReplayPage .personalBattleColumnsV262 .personalGlyphSvgWrapV262.table .personalGlyphSvgV262{width:24px!important;height:24px!important}
.cinematicReplayPage .personalBattleRowV262{min-height:38px!important}
.cinematicReplayPage .personalEnemyV262,
.cinematicReplayPage .personalVehicleV262,
.cinematicReplayPage .personalMetricValueV262{min-height:38px!important}
.cinematicReplayPage .personalEnemyV262{padding:0 14px!important}
.cinematicReplayPage .personalEnemyV262 strong{font-size:13px!important}
.cinematicReplayPage .personalEnemyV262 span{font-size:10px!important}
.cinematicReplayPage .personalVehicleV262{grid-template-columns:74px minmax(0,1fr)!important;padding:0 8px 0 4px!important}
.cinematicReplayPage .personalTankThumbV262{width:74px!important;height:38px!important}
.cinematicReplayPage .personalTankThumbV262 img{max-width:74px!important;max-height:34px!important}
.cinematicReplayPage .personalVehicleV262 strong{font-size:13px!important}
.cinematicReplayPage .personalMetricValueV262{font-size:14px!important}
.cinematicReplayPage .personalBattleRowV262:hover{box-shadow:inset 2px 0 0 rgba(155,222,36,.28)!important}

.cinematicReplayPage .personalCritTooltipV263{
  width:180px!important;
  padding:8px 10px!important;
  border-radius:4px!important;
}
.cinematicReplayPage .personalCritTooltipV263>strong{font-size:11px!important;margin-bottom:5px!important}
.cinematicReplayPage .personalCritTooltipGroupV263{grid-template-columns:64px minmax(0,1fr)!important;font-size:10px!important;gap:6px!important}
.cinematicReplayPage .personalCritTooltipGroupV263 b{font-size:10px!important}

.cinematicReplayPage .personalModulesStripV263{
  margin-top:12px!important;
  display:grid!important;
  grid-template-columns:1.55fr repeat(6,minmax(0,1fr))!important;
  gap:10px!important;
  align-items:stretch!important;
}
.cinematicReplayPage .personalModulesLeadV262,
.cinematicReplayPage .personalModuleCardV262{
  min-height:74px!important;
  border-radius:5px!important;
  background:linear-gradient(180deg,rgba(38,44,48,.93),rgba(28,33,36,.97))!important;
  border:1px solid rgba(130,144,148,.18)!important;
}
.cinematicReplayPage .personalModulesLeadV262{gap:10px!important;padding:12px 14px!important}
.cinematicReplayPage .personalModulesLeadV262 .personalGlyphSvgWrapV262,
.cinematicReplayPage .personalModulesLeadV262 .personalGlyphMaskV262,
.cinematicReplayPage .personalModulesLeadV262 .moduleMiniIconV262{width:30px!important;height:30px!important;flex-basis:30px!important}
.cinematicReplayPage .personalModulesLeadV262 .personalGlyphSvgV262,
.cinematicReplayPage .personalModulesLeadV262 .personalGlyphMaskInnerV262,
.cinematicReplayPage .personalModulesLeadV262 .moduleMiniSvgV262{width:26px!important;height:26px!important}
.cinematicReplayPage .personalModulesLeadV262 h4{font-size:13px!important;letter-spacing:.04em!important}
.cinematicReplayPage .personalModulesLeadV262 p{margin-top:5px!important;font-size:11px!important;color:#adb3b5!important}
.cinematicReplayPage .personalModulesLeadV262 p strong{font-size:14px!important;color:#ffbe63!important}
.cinematicReplayPage .personalModulesLeadV262>div>small{margin-top:2px!important;font-size:9px!important}
.cinematicReplayPage .personalModuleCardV262{gap:8px!important;padding:10px 12px!important;justify-content:flex-start!important}
.cinematicReplayPage .personalModuleCardV262 .personalGlyphImgV262,
.cinematicReplayPage .personalModuleCardV262 .personalGlyphMaskV262,
.cinematicReplayPage .personalModuleCardV262 .personalGlyphSvgWrapV262,
.cinematicReplayPage .personalModuleCardV262 .moduleMiniIconV262{width:28px!important;height:28px!important;flex-basis:28px!important}
.cinematicReplayPage .personalModuleCardV262 .moduleMiniSvgV262,
.cinematicReplayPage .personalModuleCardV262 .personalGlyphMaskInnerV262,
.cinematicReplayPage .personalModuleCardV262 .personalGlyphSvgV262{width:24px!important;height:24px!important}
.cinematicReplayPage .personalModuleCardV262 span{font-size:10px!important;color:#b7bec0!important;text-transform:none!important}
.cinematicReplayPage .personalModuleCardV262 strong{margin-top:4px!important;font-size:15px!important;color:#ffbf63!important}
.cinematicReplayPage .personalModuleCardV262 small{display:none!important}
.cinematicReplayPage .personalModuleCardV262.realV263:hover{transform:none!important;border-color:rgba(130,144,148,.24)!important;background:linear-gradient(180deg,rgba(38,44,48,.93),rgba(28,33,36,.97))!important}
.cinematicReplayPage .personalModuleCardV262.emptyV263{justify-content:center!important;text-align:center!important}
.cinematicReplayPage .personalModuleCardV262.emptyV263 strong{font-size:20px!important}

.cinematicReplayPage .moduleMiniIconV262.track{color:#d7dcdc!important}
.cinematicReplayPage .moduleMiniIconV262.engine{color:#d7dcdc!important}
.cinematicReplayPage .moduleMiniIconV262.ammo{color:#d7dcdc!important}
.cinematicReplayPage .moduleMiniIconV262.radio,
.cinematicReplayPage .moduleMiniIconV262.optics{color:#d7dcdc!important}
.cinematicReplayPage .moduleMiniIconV262.gun{color:#d7dcdc!important}
.cinematicReplayPage .moduleMiniIconV262.fuel{color:#d7dcdc!important}

.cinematicReplayPage .personalBattleNoteV262{display:none!important}

@media(max-width:1500px){
  .cinematicReplayPage .personalSummaryGridV262{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .cinematicReplayPage .personalModulesStripV263{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .cinematicReplayPage .personalModulesStripV263 .personalModulesLeadV262{grid-column:1/-1!important}
}
@media(max-width:1180px){
  .cinematicReplayPage .personalBattleColumnsV262,
  .cinematicReplayPage .personalBattleRowV262{grid-template-columns:minmax(170px,1fr) minmax(160px,.9fr) 76px 60px 72px 76px 72px 72px!important}
  .cinematicReplayPage .personalVehicleV262{grid-template-columns:66px minmax(0,1fr)!important}
  .cinematicReplayPage .personalTankThumbV262{width:66px!important}
  .cinematicReplayPage .personalTankThumbV262 img{max-width:66px!important}
}
@media(max-width:900px){
  .cinematicReplayPage .personalBattleEffectV262{padding:12px!important;overflow-x:auto!important}
  .cinematicReplayPage .personalBattleHeaderV262,
  .cinematicReplayPage .personalSummaryGridV262,
  .cinematicReplayPage .personalBattleTableV262,
  .cinematicReplayPage .personalModulesStripV262{min-width:980px!important}
}

/* ========================================================================== 
   v0.3.5.265 — PERSONAL RESULT NO DUPLICATE TOP KPI PASS
   Removes duplicate top-level damage/kill/assist cards and keeps those metrics
   only in the enemy interaction table, while preserving overall FermaniHUB style.
   ========================================================================== */
.cinematicReplayPage .personalSummaryGridV262.personalSummaryGridCompactV265{
  grid-template-columns:1.35fr repeat(3,minmax(0,1fr))!important;
  align-items:stretch!important;
}
.cinematicReplayPage .personalSummaryInfoV265{
  min-height:74px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:6px!important;
  padding:12px 14px!important;
  border-radius:5px!important;
  border:1px solid rgba(130,144,148,.18)!important;
  background:linear-gradient(180deg,rgba(37,43,47,.88),rgba(28,33,36,.95))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important;
}
.cinematicReplayPage .personalSummaryInfoV265 strong{
  font-size:13px!important;
  letter-spacing:.04em!important;
  color:#edf1f2!important;
  text-transform:uppercase!important;
}
.cinematicReplayPage .personalSummaryInfoV265 span{
  font-size:11px!important;
  line-height:1.45!important;
  color:#a9b1b3!important;
}
@media(max-width:1500px){
  .cinematicReplayPage .personalSummaryGridV262.personalSummaryGridCompactV265{
    grid-template-columns:1fr!important;
  }
}

/* ========================================================================== 
   v0.3.5.266 — PERSONAL TAB REMOVE + HERO COMBAT INSIGHTS CONSOLIDATION
   Personal Result is removed from the lower report navigation. Unique combat
   insight is consolidated into the hero secondary HUD; Teams is the default.
   ========================================================================== */

/* Two tabs only: preserve approved rail width and make each tab exactly half. */
.cinematicReplayPage .cinematicTabsV266:has(button[data-report-tab].active){
  width:52%!important;
  max-width:660px!important;
  margin:0 0 8px 12px!important;
}
.cinematicReplayPage .cinematicTabsV266 button{
  flex:1 1 50%!important;
  width:50%!important;
  min-width:0!important;
}

/* Hero secondary rail now carries the unique Personal-result insights. */
.cinematicReplayPage .approvedSubMetricsV266{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
}
.cinematicReplayPage .approvedSubMetricsV266>div{
  position:relative!important;
  grid-template-columns:25px auto minmax(0,1fr)!important;
  column-gap:8px!important;
  padding:0 12px!important;
  min-width:0!important;
}
.cinematicReplayPage .approvedSubMetricsV266>div>span{
  width:24px!important;
  height:24px!important;
}
.cinematicReplayPage .approvedSubMetricsV266>div>span>.uiMaskIcon{
  width:23px!important;
  height:23px!important;
}
.cinematicReplayPage .approvedSubMetricsV266 strong{
  font-size:19px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.cinematicReplayPage .approvedSubMetricsV266 small{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:9px!important;
  letter-spacing:0!important;
}
.cinematicReplayPage .approvedSubMetricsV266 .blockedInsightV266>span{
  color:#8fbaff!important;
  filter:drop-shadow(0 0 6px rgba(115,164,255,.18))!important;
}
.cinematicReplayPage .approvedSubMetricsV266 .blockedInsightV266 strong{color:#a8c8ff!important}
.cinematicReplayPage .approvedSubMetricsV266 .critInsightV266{
  cursor:help!important;
  outline:none!important;
}
.cinematicReplayPage .approvedSubMetricsV266 .critInsightV266>span{
  color:#efad58!important;
  filter:drop-shadow(0 0 6px rgba(239,173,88,.20))!important;
}
.cinematicReplayPage .approvedSubMetricsV266 .critInsightV266 strong{color:#ffc06a!important}
.cinematicReplayPage .heroCombatInsightGlyphV266{
  width:24px!important;
  height:24px!important;
  display:grid!important;
  place-items:center!important;
  color:inherit!important;
}
.cinematicReplayPage .heroCombatInsightGlyphV266 svg{
  width:22px!important;
  height:22px!important;
  display:block!important;
}

/* Decoded crit summary stays accessible in-place; no separate Personal tab. */
.cinematicReplayPage .heroCritTooltipV266{
  position:absolute!important;
  z-index:140!important;
  right:2px!important;
  bottom:calc(100% - 4px)!important;
  width:230px!important;
  padding:10px 11px!important;
  border:1px solid rgba(218,169,91,.38)!important;
  border-radius:5px!important;
  background:linear-gradient(180deg,rgba(29,33,33,.99),rgba(13,17,18,.99))!important;
  box-shadow:0 16px 32px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.035)!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translateY(7px)!important;
  pointer-events:none!important;
  transition:opacity .13s ease,transform .13s ease,visibility .13s ease!important;
  text-align:left!important;
}
.cinematicReplayPage .critInsightV266:hover .heroCritTooltipV266,
.cinematicReplayPage .critInsightV266:focus .heroCritTooltipV266{
  opacity:1!important;
  visibility:visible!important;
  transform:translateY(0)!important;
}
.cinematicReplayPage .heroCritTooltipV266>strong{
  display:block!important;
  margin-bottom:6px!important;
  color:#efad58!important;
  font-size:11px!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
}
.cinematicReplayPage .heroCritTooltipV266>div{
  min-height:24px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:7px!important;
  border-top:1px solid rgba(255,255,255,.055)!important;
  color:#cdd3d0!important;
}
.cinematicReplayPage .heroCritTooltipV266>div>span{
  width:auto!important;
  height:auto!important;
  color:#b9c0bd!important;
  font-size:10px!important;
  white-space:normal!important;
}
.cinematicReplayPage .heroCritTooltipV266>div>b{
  color:#ffc06a!important;
  font-size:11px!important;
  white-space:nowrap!important;
}
.cinematicReplayPage .heroCritTooltipV266>div>em{
  grid-column:1/-1!important;
  margin-top:-4px!important;
  color:#8f9895!important;
  font-size:8px!important;
  font-style:normal!important;
}

/* Teams is now the primary/default report: no Personal pane or spacer remains. */
.cinematicReplayPage .battleTeamsPaneV247.active{display:block!important}

@media(max-width:1250px){
  .cinematicReplayPage .approvedSubMetricsV266>div{padding:0 8px!important;column-gap:6px!important}
  .cinematicReplayPage .approvedSubMetricsV266 strong{font-size:17px!important}
  .cinematicReplayPage .approvedSubMetricsV266 small{font-size:8px!important}
}
@media(max-width:1050px){
  .cinematicReplayPage .cinematicTabsV266:has(button[data-report-tab].active){
    width:calc(100% - 24px)!important;
    max-width:none!important;
    margin:0 12px 8px!important;
  }
  .cinematicReplayPage .approvedSubMetricsV266{
    grid-template-columns:repeat(3,1fr)!important;
    height:auto!important;
    min-height:108px!important;
  }
  .cinematicReplayPage .approvedReplayHero{min-height:860px!important;height:860px!important}
}

/* =====================================================================
   v0.3.5.267 — TABS BEAUTY + TEAMS LIGHT GREEN/RED TONE POLISH
   Scope: two-tab rail polish after Personal-tab removal, plus lighter team
   color language for alive / destroyed / top-3 states inside TEAMS.
   No layout, parser, sorting, or report-data logic changes.
   ===================================================================== */

/* Two-tab rail: make it look deliberate and premium instead of cropped. */
.cinematicReplayPage .cinematicTabsV266:has(button[data-report-tab].active){
  border:1px solid rgba(194,206,199,.16)!important;
  border-radius:8px!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,rgba(28,33,37,.94) 0%,rgba(18,22,25,.95) 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 10px 24px rgba(0,0,0,.18)!important;
}
.cinematicReplayPage .cinematicTabsV266 button{
  height:46px!important;
  border:0!important;
  border-right:1px solid rgba(185,197,191,.12)!important;
  background:linear-gradient(180deg,rgba(35,40,44,.92) 0%,rgba(24,29,33,.95) 100%)!important;
  color:#aeb7b4!important;
  font-family:var(--approved-font)!important;
  font-size:15px!important;
  font-weight:540!important;
  letter-spacing:.01em!important;
  text-shadow:0 1px 1px rgba(0,0,0,.55)!important;
  transition:background .14s ease,color .14s ease,box-shadow .14s ease,transform .14s ease!important;
}
.cinematicReplayPage .cinematicTabsV266 button:last-child{border-right:0!important}
.cinematicReplayPage .cinematicTabsV266 button:hover:not(.active){
  color:#edf2ef!important;
  background:linear-gradient(180deg,rgba(43,49,53,.94) 0%,rgba(28,33,37,.95) 100%)!important;
}
.cinematicReplayPage .cinematicTabsV266 button[data-report-tab="teams"].active{
  color:#f8fdf8!important;
  background:linear-gradient(180deg,rgba(72,122,43,.98) 0%,rgba(42,81,27,.98) 52%,rgba(19,40,19,.99) 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(230,255,170,.18),
    inset 0 -1px 0 rgba(171,235,61,.54),
    inset 0 0 18px rgba(147,220,39,.10),
    0 0 16px rgba(134,212,28,.16)!important;
}
.cinematicReplayPage .cinematicTabsV266 button[data-report-tab="teams"].active:after{
  content:""!important;
  position:absolute!important;
  left:0!important;right:0!important;bottom:0!important;
  height:2px!important;
  background:linear-gradient(90deg,#8bd31d 0%,#c4ff57 50%,#8bd31d 100%)!important;
  box-shadow:0 0 8px rgba(182,246,66,.75),0 0 18px rgba(129,214,26,.40)!important;
}
.cinematicReplayPage .cinematicTabsV266 button[data-report-tab="details"].active{
  color:#f1f4f2!important;
  background:linear-gradient(180deg,rgba(62,70,74,.98) 0%,rgba(39,46,50,.98) 52%,rgba(23,28,31,.99) 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(182,194,187,.18),
    inset 0 0 14px rgba(255,255,255,.03),
    0 0 14px rgba(151,164,158,.08)!important;
}
.cinematicReplayPage .cinematicTabsV266 button[data-report-tab="details"].active:after{
  content:""!important;
  position:absolute!important;
  left:0!important;right:0!important;bottom:0!important;
  height:2px!important;
  background:linear-gradient(90deg,#96a29d 0%,#d7e1dc 50%,#96a29d 100%)!important;
  box-shadow:0 0 7px rgba(224,234,228,.26)!important;
}

/* Team card shell: a bit cleaner and brighter. */
.battleTeamsPaneV247 .teamCardV247.ally{
  box-shadow:
    0 16px 34px rgba(0,0,0,.22),
    -8px 0 26px rgba(142,224,38,.08),
    inset 0 0 0 1px rgba(189,247,79,.05)!important;
}
.battleTeamsPaneV247 .teamCardV247.enemy{
  box-shadow:
    0 16px 34px rgba(0,0,0,.22),
    8px 0 26px rgba(255,106,98,.08),
    inset 0 0 0 1px rgba(255,132,124,.05)!important;
}

/* Light-green / light-red headline colors requested by the user. */
.battleTeamsPaneV247 .teamCardV247.ally .teamTitleV247 h3{
  color:#bff95a!important;
  text-shadow:0 0 10px rgba(187,244,76,.24),0 1px 1px rgba(0,0,0,.48)!important;
}
.battleTeamsPaneV247 .teamCardV247.enemy .teamTitleV247 h3{
  color:#ff8f89!important;
  text-shadow:0 0 10px rgba(255,128,121,.22),0 1px 1px rgba(0,0,0,.48)!important;
}
.battleTeamsPaneV247 .teamCardV247.ally .teamResultV247{
  color:#c4ff62!important;
  font-size:22px!important;
  text-shadow:0 0 10px rgba(188,244,82,.28),0 1px 1px rgba(0,0,0,.48)!important;
}
.battleTeamsPaneV247 .teamCardV247.enemy .teamResultV247{
  color:#ff8a83!important;
  font-size:22px!important;
  text-shadow:0 0 10px rgba(255,117,108,.26),0 1px 1px rgba(0,0,0,.48)!important;
}

/* Alive rows: shift to a cleaner, lighter green-black instead of deep teal. */
.battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateAlive,
.battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateAlive.rank-1,
.battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateAlive.rank-2,
.battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateAlive.rank-3{
  background:linear-gradient(90deg,#143521 0%,#10311f 52%,#0a1d16 100%)!important;
}
.battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateAlive,
.battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateAlive.rank-1,
.battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateAlive.rank-2,
.battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateAlive.rank-3{
  background:linear-gradient(90deg,#173225 0%,#10291f 52%,#0a1b18 100%)!important;
}

/* Destroyed rows: lighter warm red instead of muddy burgundy. */
.battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateDestroyed,
.battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateDestroyed.rank-1,
.battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateDestroyed.rank-2,
.battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateDestroyed.rank-3{
  background:linear-gradient(90deg,#501718 0%,#381314 54%,#1e0d10 100%)!important;
}
.battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateDestroyed,
.battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateDestroyed.rank-1,
.battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateDestroyed.rank-2,
.battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateDestroyed.rank-3{
  background:linear-gradient(90deg,#5c1617 0%,#421213 54%,#210d0f 100%)!important;
}

/* Top-3 leader polish: keep survival-state colors, add cleaner rank edging. */
.battleTeamsPaneV247 .teamRowV247.rank-1:after,
.battleTeamsPaneV247 .teamRowV247.rank-2:after,
.battleTeamsPaneV247 .teamRowV247.rank-3:after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
}
.battleTeamsPaneV247 .teamRowV247.rank-1:after{
  box-shadow:
    inset 0 1px 0 rgba(255,222,95,.18),
    inset 0 -1px 0 rgba(255,205,71,.09),
    inset 0 0 18px rgba(255,214,77,.03)!important;
}
.battleTeamsPaneV247 .teamRowV247.rank-2:after{
  box-shadow:
    inset 0 1px 0 rgba(235,243,247,.14),
    inset 0 -1px 0 rgba(220,230,238,.06),
    inset 0 0 16px rgba(223,233,239,.025)!important;
}
.battleTeamsPaneV247 .teamRowV247.rank-3:after{
  box-shadow:
    inset 0 1px 0 rgba(243,177,109,.14),
    inset 0 -1px 0 rgba(231,144,73,.06),
    inset 0 0 16px rgba(230,144,72,.025)!important;
}

/* Living owner row and top-3 leaders should read a bit brighter/cleaner. */
.battleTeamsPaneV247 .teamRowV247.owner{
  box-shadow:
    inset 4px 0 0 #baf33b,
    inset 0 0 0 1px rgba(178,241,61,.55),
    inset 24px 0 30px rgba(133,218,27,.10)!important;
}
.battleTeamsPaneV247 .teamCardV247 .teamTopTrophyV247.rank-1{
  filter:brightness(1.26) contrast(1.12) saturate(1.18) drop-shadow(0 0 5px rgba(255,218,75,.58)) drop-shadow(0 0 10px rgba(241,184,30,.24)) drop-shadow(0 4px 6px rgba(0,0,0,.44))!important;
}
.battleTeamsPaneV247 .teamCardV247 .teamTopTrophyV247.rank-2{
  filter:brightness(1.22) contrast(1.12) saturate(1.06) drop-shadow(0 0 5px rgba(232,240,247,.46)) drop-shadow(0 0 9px rgba(184,206,221,.18)) drop-shadow(0 4px 6px rgba(0,0,0,.44))!important;
}
.battleTeamsPaneV247 .teamCardV247 .teamTopTrophyV247.rank-3{
  filter:brightness(1.23) contrast(1.12) saturate(1.16) drop-shadow(0 0 5px rgba(247,164,86,.46)) drop-shadow(0 0 9px rgba(216,115,47,.18)) drop-shadow(0 4px 6px rgba(0,0,0,.44))!important;
}

/* Slightly brighter stat values for the refreshed lighter row palette. */
.battleTeamsPaneV247 .teamNumV247,
.battleTeamsPaneV247 .teamPlayerTextV247 strong,
.battleTeamsPaneV247 .teamVehicleV247>strong{
  text-shadow:0 1px 1px rgba(0,0,0,.58),0 0 3px rgba(255,255,255,.05)!important;
}

/* =====================================================================
   v0.3.5.268 — TABS BUGFIX / SINGLE-LINE BALANCED RAIL
   Fix cropped two-tab rail after Personal-tab removal:
   - make both tabs balanced and centered
   - prevent text wrapping in 'ПОДРОБНЫЙ ОТЧЁТ'
   - keep premium visual style without changing report content
   ===================================================================== */
.cinematicReplayPage .cinematicTabsV266:has(button[data-report-tab].active){
  width:min(700px,calc(100% - 12px))!important;
  max-width:700px!important;
  min-width:460px!important;
  margin:12px 0 12px 12px!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  align-items:stretch!important;
}
.cinematicReplayPage .cinematicTabsV266 button{
  min-width:0!important;
  width:100%!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1!important;
  padding:0 16px!important;
  height:48px!important;
}
.cinematicReplayPage .cinematicTabsV266 button span,
.cinematicReplayPage .cinematicTabsV266 button b,
.cinematicReplayPage .cinematicTabsV266 button strong{
  white-space:nowrap!important;
}
@media (max-width: 900px){
  .cinematicReplayPage .cinematicTabsV266:has(button[data-report-tab].active){
    width:min(640px,calc(100% - 10px))!important;
    min-width:0!important;
    margin:12px 0 12px 8px!important;
  }
  .cinematicReplayPage .cinematicTabsV266 button{
    font-size:14px!important;
    padding:0 12px!important;
  }
}
@media (max-width: 640px){
  .cinematicReplayPage .cinematicTabsV266:has(button[data-report-tab].active){
    width:calc(100% - 8px)!important;
    margin:10px 0 10px 4px!important;
  }
  .cinematicReplayPage .cinematicTabsV266 button{
    font-size:12px!important;
    letter-spacing:0!important;
  }
}


/* =====================================================================
   v0.3.5.269 — BATTLE TABS FULL-WIDTH INTEGRATED SECTION POLISH
   Make the report tabs feel like one premium section with the opened pane:
   - full-width 2-column rail
   - no orphan/floating tab strip feeling
   - active tab grows out of the section with unified green underline
   - preserve existing green/glow language from Teams
   ===================================================================== */
.cinematicReplayPage > .cinematicReportShell{
  width:min(100%, 1240px)!important;
  margin:12px auto 0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

.cinematicReplayPage .cinematicTabs{
  width:100%!important;
  max-width:none!important;
  height:52px!important;
  margin:0 0 10px!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:stretch!important;
  border:1px solid rgba(150,171,164,.20)!important;
  border-radius:8px!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,rgba(15,24,29,.95),rgba(8,14,18,.96))!important;
  box-shadow:0 10px 26px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.03)!important;
}

.cinematicReplayPage .cinematicTabs button{
  position:relative!important;
  min-width:0!important;
  width:100%!important;
  height:52px!important;
  padding:0 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-right:1px solid rgba(164,183,176,.13)!important;
  border-radius:0!important;
  background:linear-gradient(180deg,rgba(17,28,34,.96),rgba(10,17,22,.98))!important;
  color:#abb5b1!important;
  font-family:var(--approved-font)!important;
  font-size:15px!important;
  font-weight:620!important;
  letter-spacing:.012em!important;
  line-height:1!important;
  text-transform:uppercase!important;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.02)!important;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease!important;
}
.cinematicReplayPage .cinematicTabs button:last-child{border-right:0!important}
.cinematicReplayPage .cinematicTabs button:hover{
  color:#edf2ef!important;
  background:linear-gradient(180deg,rgba(23,37,44,.98),rgba(12,20,25,.98))!important;
}
.cinematicReplayPage .cinematicTabs button.active{
  color:#f5f8f6!important;
  background:linear-gradient(180deg,rgba(34,58,39,.84),rgba(12,24,18,.96))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(159,231,30,.08)!important;
}
.cinematicReplayPage .cinematicTabs button.active:after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:2px!important;
  background:#9fe71e!important;
  box-shadow:0 0 10px rgba(159,231,30,.68)!important;
}

.cinematicReplayPage .battleReportContent.cinematicReportContent{
  padding:0!important;
  overflow:visible!important;
  background:transparent!important;
}

@media(max-width:1050px){
  .cinematicReplayPage > .cinematicReportShell{width:min(100%, 1240px)!important}
  .cinematicReplayPage .cinematicTabs{height:50px!important}
  .cinematicReplayPage .cinematicTabs button{height:50px!important;font-size:14px!important}
}
@media(max-width:760px){
  .cinematicReplayPage .cinematicTabs{height:48px!important}
  .cinematicReplayPage .cinematicTabs button{height:48px!important;padding:0 12px!important;font-size:13px!important}
}

/* =====================================================================
   v0.3.5.270 — BATTLE TABS CENTERED DOCK INTEGRATION
   Replace the oversized full-width buttons from .269 with a slim graphite
   navigation dock: the rail spans the report width, while the two tabs stay
   compact and centered so they read as report navigation, not large CTAs.
   ===================================================================== */
.cinematicReplayPage > .cinematicReportShell{
  width:min(100%,1240px)!important;
  margin:12px auto 0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Full-width graphite dock. */
.cinematicReplayPage .cinematicTabs{
  width:100%!important;
  max-width:none!important;
  height:48px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:0!important;
  border:0!important;
  border-top:1px solid rgba(161,178,171,.14)!important;
  border-bottom:1px solid rgba(161,178,171,.18)!important;
  border-radius:0!important;
  overflow:visible!important;
  background:linear-gradient(180deg,rgba(18,25,29,.96) 0%,rgba(10,16,20,.98) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018),0 6px 18px rgba(0,0,0,.10)!important;
}

/* Compact centered tabs inside the dock. */
.cinematicReplayPage .cinematicTabs button{
  position:relative!important;
  flex:0 0 245px!important;
  width:245px!important;
  min-width:0!important;
  height:48px!important;
  margin:0!important;
  padding:0 20px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-right:1px solid rgba(170,185,180,.08)!important;
  border-radius:0!important;
  background:transparent!important;
  color:#9ea8a4!important;
  font-family:var(--approved-font)!important;
  font-size:14px!important;
  font-weight:600!important;
  letter-spacing:.015em!important;
  line-height:1!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  box-shadow:none!important;
  text-shadow:0 1px 1px rgba(0,0,0,.52)!important;
  transition:color .15s ease,background .15s ease,box-shadow .15s ease!important;
}
.cinematicReplayPage .cinematicTabs button:last-child{border-right:0!important}
.cinematicReplayPage .cinematicTabs button:hover:not(.active){
  color:#e6ebe8!important;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008))!important;
}

/* Active tab grows out of the dock instead of looking like a separate button. */
.cinematicReplayPage .cinematicTabs button.active{
  color:#f4f8f5!important;
  background:linear-gradient(180deg,rgba(63,92,46,.20) 0%,rgba(24,38,27,.12) 58%,rgba(12,20,16,.03) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(214,245,175,.035)!important;
}
.cinematicReplayPage .cinematicTabs button.active:after{
  content:""!important;
  position:absolute!important;
  left:22px!important;
  right:22px!important;
  bottom:-1px!important;
  height:2px!important;
  background:linear-gradient(90deg,rgba(159,231,30,0) 0%,#9fe71e 22%,#c9ff59 50%,#9fe71e 78%,rgba(159,231,30,0) 100%)!important;
  box-shadow:0 0 8px rgba(159,231,30,.52),0 0 14px rgba(159,231,30,.18)!important;
}

/* Opened report sits immediately below the dock, visually becoming one unit. */
.cinematicReplayPage .battleReportContent.cinematicReportContent{
  padding:10px 0 0!important;
  margin:0!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
}
.cinematicReplayPage .battleTeamsPaneV247,
.cinematicReplayPage .wotDetailedReportV255{
  margin-top:0!important;
}

@media(max-width:900px){
  .cinematicReplayPage .cinematicTabs button{
    flex:0 0 215px!important;
    width:215px!important;
    font-size:13px!important;
    padding:0 14px!important;
  }
}
@media(max-width:560px){
  .cinematicReplayPage .cinematicTabs{justify-content:stretch!important}
  .cinematicReplayPage .cinematicTabs button{
    flex:1 1 50%!important;
    width:auto!important;
    padding:0 10px!important;
    font-size:12px!important;
  }
  .cinematicReplayPage .cinematicTabs button.active:after{left:14px!important;right:14px!important}
}

/* =====================================================================
   v0.3.5.271 — BATTLE REPORT UNIFIED FRAME + TABS INTEGRATION
   Approved direction: restore one continuous graphite report frame around
   tabs + active content. Tabs are compact, left-docked inside that frame,
   not a floating pill and not full-width CTAs.
   ===================================================================== */

/* One continuous report body with visible side/bottom outline. */
.cinematicReplayPage > .cinematicReportShell{
  width:min(100%,1240px)!important;
  margin:12px auto 0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid rgba(132,150,145,.24)!important;
  border-radius:7px!important;
  background:
    linear-gradient(180deg,rgba(12,19,22,.98) 0%,rgba(8,13,16,.985) 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 15px 34px rgba(0,0,0,.18)!important;
}

/* Tabs become the top navigation row OF the report frame. */
.cinematicReplayPage .cinematicTabs{
  width:100%!important;
  max-width:none!important;
  height:48px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  border-bottom:1px solid rgba(145,160,155,.17)!important;
  background:linear-gradient(180deg,rgba(31,37,40,.97) 0%,rgba(22,27,30,.98) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}

/* Two calm, equal tabs docked to the left. */
.cinematicReplayPage .cinematicTabs button{
  position:relative!important;
  flex:0 0 320px!important;
  width:320px!important;
  min-width:0!important;
  height:48px!important;
  margin:0!important;
  padding:0 22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  border:0!important;
  border-right:1px solid rgba(150,165,160,.13)!important;
  border-radius:0!important;
  background:linear-gradient(180deg,rgba(35,41,44,.88),rgba(26,31,34,.90))!important;
  color:#aeb7b4!important;
  font-family:var(--approved-font)!important;
  font-size:14px!important;
  font-weight:590!important;
  letter-spacing:.012em!important;
  line-height:1!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  box-shadow:none!important;
  text-shadow:0 1px 1px rgba(0,0,0,.50)!important;
  transition:background .14s ease,color .14s ease,box-shadow .14s ease!important;
}
.cinematicReplayPage .cinematicTabs button:last-child{border-right:1px solid rgba(150,165,160,.13)!important}
.cinematicReplayPage .cinematicTabs button:hover:not(.active){
  color:#edf2ef!important;
  background:linear-gradient(180deg,rgba(42,49,52,.94),rgba(29,35,38,.95))!important;
}

/* Active tab: slight graphite lift + one clean green edge, no capsule. */
.cinematicReplayPage .cinematicTabs button.active{
  color:#f4f7f5!important;
  background:
    linear-gradient(180deg,rgba(51,61,57,.78) 0%,rgba(31,39,36,.90) 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(159,231,30,.08)!important;
}
.cinematicReplayPage .cinematicTabs button.active:after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:2px!important;
  background:linear-gradient(90deg,#88cb1b 0%,#b9f844 50%,#88cb1b 100%)!important;
  box-shadow:0 0 7px rgba(159,231,30,.46),0 0 13px rgba(159,231,30,.15)!important;
}

/* Content lives inside the same frame, with breathing room from the outline. */
.cinematicReplayPage .battleReportContent.cinematicReportContent{
  margin:0!important;
  padding:10px 10px 12px!important;
  overflow:visible!important;
  border:0!important;
  background:linear-gradient(180deg,rgba(9,14,17,.34),rgba(7,11,13,.20))!important;
}
.cinematicReplayPage .battleTeamsPaneV247,
.cinematicReplayPage .wotDetailedReportV255{
  margin:0!important;
}

/* Let the outer report frame provide the main visual box, not random gaps. */
.cinematicReplayPage .battleTeamsGridV247{
  margin:0!important;
}

@media(max-width:1050px){
  .cinematicReplayPage .cinematicTabs button{
    flex-basis:280px!important;
    width:280px!important;
    font-size:13px!important;
  }
}
@media(max-width:680px){
  .cinematicReplayPage .cinematicTabs{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
  }
  .cinematicReplayPage .cinematicTabs button{
    width:100%!important;
    flex-basis:auto!important;
    padding:0 10px!important;
    font-size:12px!important;
  }
  .cinematicReplayPage .battleReportContent.cinematicReportContent{
    padding:8px!important;
  }
}

/* =====================================================================
   v0.3.5.272 — BATTLE TABS FULL DOCK SYMMETRY + UNIFIED ACTIVE GREEN
   Final tab-dock cleanup requested by user:
   - eliminate dead space between/after tabs
   - two equal tabs fill the entire report header width
   - identical FermaniHUB lime active state for TEAMS and DETAILS
   - neutral graphite inactive state
   - clean single center divider
   ===================================================================== */

/* Hard reset old state-specific width/margin rules from pre-.266/.255 eras. */
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266,
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266:has(button[data-report-tab="teams"].active),
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266:has(button[data-report-tab="details"].active),
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266:has(button[data-report-tab].active){
  width:100%!important;
  max-width:none!important;
  height:48px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  gap:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  border-bottom:1px solid rgba(145,160,155,.17)!important;
  background:linear-gradient(180deg,rgba(31,37,40,.97) 0%,rgba(22,27,30,.98) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}

/* Equal 50/50 cells: no fixed widths, no phantom flex space. */
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266 button,
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266:has(button[data-report-tab="details"].active) button,
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266:has(button[data-report-tab="teams"].active) button{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:48px!important;
  flex:none!important;
  margin:0!important;
  padding:0 20px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  border:0!important;
  border-right:1px solid rgba(154,169,164,.13)!important;
  border-radius:0!important;
  background:linear-gradient(180deg,rgba(35,41,44,.88),rgba(26,31,34,.90))!important;
  color:#aeb7b4!important;
  font-family:var(--approved-font)!important;
  font-size:14px!important;
  font-weight:590!important;
  letter-spacing:.012em!important;
  line-height:1!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  box-shadow:none!important;
  text-shadow:0 1px 1px rgba(0,0,0,.50)!important;
  transition:background .14s ease,color .14s ease,box-shadow .14s ease!important;
}
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266 button:last-child{
  border-right:0!important;
}
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266 button:hover:not(.active){
  color:#edf2ef!important;
  background:linear-gradient(180deg,rgba(42,49,52,.94),rgba(29,35,38,.95))!important;
}

/* One source of truth for BOTH active tabs. Explicit attribute selectors
   override old .251/.255/.267 state-specific green-vs-grey rules. */
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266 button[data-report-tab="teams"].active,
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266 button[data-report-tab="details"].active,
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266 button[data-report-tab].active{
  color:#f8fdf8!important;
  background:linear-gradient(180deg,rgba(59,91,43,.72) 0%,rgba(34,57,31,.82) 54%,rgba(20,35,25,.92) 100%)!important;
  border-color:rgba(159,231,30,.34)!important;
  box-shadow:
    inset 0 1px 0 rgba(225,255,172,.10),
    inset 0 -1px 0 rgba(171,235,61,.24),
    inset 0 0 16px rgba(147,220,39,.055)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.48),0 0 6px rgba(216,255,154,.05)!important;
}
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266 button[data-report-tab="teams"].active:after,
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266 button[data-report-tab="details"].active:after,
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266 button[data-report-tab].active:after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:2px!important;
  background:linear-gradient(90deg,#88cb1b 0%,#bff34a 50%,#88cb1b 100%)!important;
  box-shadow:0 0 7px rgba(159,231,30,.52),0 0 13px rgba(159,231,30,.16)!important;
}

/* Keep the content married to the unified frame; no extra tab/content gap. */
.cinematicReplayPage > .cinematicReportShell .battleReportContent.cinematicReportContent{
  margin:0!important;
  padding-top:10px!important;
}

@media(max-width:680px){
  .cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266,
  .cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266:has(button[data-report-tab].active){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    height:46px!important;
  }
  .cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266 button{
    height:46px!important;
    padding:0 8px!important;
    font-size:12px!important;
  }
}

/* =====================================================================
   v0.3.5.273 — BATTLE REPORT HERO-WIDTH EXPANSION + TRUE CENTER DIVIDER
   User-approved geometry pass:
   - report shell matches the full battle hero width on desktop
   - Teams and Detailed Report both gain the reclaimed horizontal space
   - tab split is mathematically centered 50/50
   - preserve .272 unified lime active state and all Teams row semantics
   ===================================================================== */

/* Desktop: remove the legacy 1240px report cap. The hero already occupies
   100% of .cinematicReplayPage, so the report now inherits that exact canvas. */
@media (min-width:1051px){
  .cinematicReplayPage > .cinematicReportShell{
    width:100%!important;
    max-width:none!important;
    margin:12px 0 0!important;
    box-sizing:border-box!important;
  }

  /* Keep a small premium inner gutter while allowing both report modes to
     actually use the wider shell. */
  .cinematicReplayPage > .cinematicReportShell .battleReportContent.cinematicReportContent{
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }

  .cinematicReplayPage > .cinematicReportShell .battleTeamsPaneV247,
  .cinematicReplayPage > .cinematicReportShell .wotDetailedReportV255{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }

  /* .253 used a +24px/−12px breakout while the report was narrower. With the
     shell now hero-width that compensation would overshoot, so neutralize it. */
  .cinematicReplayPage > .cinematicReportShell .battleTeamsPaneV247{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  .cinematicReplayPage > .cinematicReportShell .battleTeamsGridV247{
    width:100%!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:14px!important;
  }
}

/* One exact center split for the dock. No inherited flex/fixed-width behavior. */
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266,
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266:has(button[data-report-tab].active){
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:0!important;
  padding:0!important;
}
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266 button{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  flex:none!important;
  margin:0!important;
  border-right:0!important;
}
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266 button:first-child{
  border-right:1px solid rgba(154,169,164,.16)!important;
}
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266 button:last-child{
  border-left:0!important;
  border-right:0!important;
}

/* Preserve the exact same green active language for either side after the
   geometry override above. */
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266 button[data-report-tab="teams"].active,
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266 button[data-report-tab="details"].active{
  color:#f8fdf8!important;
  background:linear-gradient(180deg,rgba(59,91,43,.72) 0%,rgba(34,57,31,.82) 54%,rgba(20,35,25,.92) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(225,255,172,.10),inset 0 -1px 0 rgba(171,235,61,.24),inset 0 0 16px rgba(147,220,39,.055)!important;
}

/* =====================================================================
   v0.3.5.274 — BATTLE HERO MASTER MEDAL VERTICAL ALIGNMENT FIX
   User-requested hero award micro-fix:
   - keep the Mastery medal at its approved size
   - lift only Mastery so its visual baseline matches the medal rail
   - prevent the large Mastery art from hanging down into the KPI strip
   - do not move/reorder/resize any other award
   ===================================================================== */
.approvedReplayHero .approvedAwardsRail > .approvedAward.mastery{
  top:-10px!important;
}

/* Keep the same relative lift on narrower desktop/tablet layouts where the
   medal rail itself is slightly more compact. */
@media (max-width:1200px){
  .approvedReplayHero .approvedAwardsRail > .approvedAward.mastery{
    top:-8px!important;
  }
}

/* =====================================================================
   v0.3.5.275 — PLAYER PROFILE MASTER LABEL VERTICAL ALIGNMENT FIX
   Player-profile-only micro-fix requested by user:
   - keep the real Mastery medal art exactly where it is
   - lift only the text block ("Мастер" + sublabel) closer to the medal
   - preserve size, glow, best-battle card and all profile geometry
   ===================================================================== */
.playerProfileFinalMockup .playerHeroMasteryFinal > div{
  margin-top:-10px!important;
  transform:translateY(-2px)!important;
}
.playerProfileFinalMockup .playerHeroMasteryFinal strong{
  margin-top:0!important;
}

/* =====================================================================
   v0.3.5.276 — HOME HERO PNG STAT ICONS INTEGRATION
   Approved HOME hero KPI icon pass:
   - replace legacy mask/SVG glyphs with the four approved transparent PNGs
   - preserve the current 4-card metrics geometry and live counters
   - normalize optical scale while respecting the wider tank silhouette
   - keep glow restrained so the icons read as premium game HUD assets
   ===================================================================== */
body.homePageActive .homeApprovedHero .heroMetrics>div{
  min-width:0!important;
  height:60px!important;
  min-height:60px!important;
  padding:5px 10px!important;
  gap:8px!important;
  background:linear-gradient(180deg,rgba(10,24,27,.82),rgba(6,16,19,.78))!important;
  border:1px solid rgba(148,177,175,.28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 6px 18px rgba(0,0,0,.10)!important;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease!important;
}
body.homePageActive .homeApprovedHero .heroMetrics>div:hover{
  border-color:rgba(168,229,26,.38)!important;
  background:linear-gradient(180deg,rgba(12,29,29,.88),rgba(7,18,20,.82))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 22px rgba(0,0,0,.13),0 0 18px rgba(168,229,26,.035)!important;
}
body.homePageActive .homeApprovedHero .metricIcon{
  position:relative!important;
  width:45px!important;
  height:45px!important;
  min-width:45px!important;
  flex:0 0 45px!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:inherit!important;
}
body.homePageActive .homeApprovedHero .metricIcon .mockMetricGlyph,
body.homePageActive .homeApprovedHero .metricIcon svg{
  display:none!important;
}
body.homePageActive .homeApprovedHero .homeMetricPng{
  display:block!important;
  width:44px!important;
  height:44px!important;
  max-width:none!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:brightness(1.02) saturate(.96) drop-shadow(0 0 5px rgba(166,233,32,.20))!important;
  transform:translateZ(0)!important;
  transition:filter .16s ease,transform .16s ease!important;
  pointer-events:none!important;
  user-select:none!important;
}
body.homePageActive .homeApprovedHero .homeMetricPng-replays{width:45px!important;height:45px!important}
body.homePageActive .homeApprovedHero .homeMetricPng-players{width:44px!important;height:44px!important}
body.homePageActive .homeApprovedHero .homeMetricPng-tanks{
  width:58px!important;
  height:46px!important;
  transform:scale(1.02) translateZ(0)!important;
}
body.homePageActive .homeApprovedHero .homeMetricPng-regions{width:45px!important;height:45px!important}
body.homePageActive .homeApprovedHero .heroMetrics>div:hover .homeMetricPng{
  filter:brightness(1.10) saturate(1.03) drop-shadow(0 0 7px rgba(166,233,32,.28))!important;
}
body.homePageActive .homeApprovedHero .heroMetrics>div:hover .homeMetricPng:not(.homeMetricPng-tanks){
  transform:translateY(-1px) translateZ(0)!important;
}
body.homePageActive .homeApprovedHero .heroMetrics>div:hover .homeMetricPng-tanks{
  transform:scale(1.02) translateY(-1px) translateZ(0)!important;
}
body.homePageActive .homeApprovedHero .metricText{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  line-height:1!important;
}
body.homePageActive .homeApprovedHero .heroMetrics strong{
  font-size:20px!important;
  line-height:1!important;
  font-variant-numeric:tabular-nums!important;
}
body.homePageActive .homeApprovedHero .heroMetrics small{
  margin-top:5px!important;
  font-size:7px!important;
  letter-spacing:.08em!important;
  line-height:1!important;
}

@media(max-width:900px){
  body.homePageActive .homeApprovedHero .heroMetrics>div{height:58px!important;min-height:58px!important;padding:5px 9px!important}
  body.homePageActive .homeApprovedHero .metricIcon{width:42px!important;height:42px!important;min-width:42px!important;flex-basis:42px!important}
  body.homePageActive .homeApprovedHero .homeMetricPng{width:41px!important;height:41px!important}
  body.homePageActive .homeApprovedHero .homeMetricPng-tanks{width:53px!important;height:42px!important}
}
@media(max-width:620px){
  body.homePageActive .homeApprovedHero .heroMetrics>div{height:56px!important;min-height:56px!important}
  body.homePageActive .homeApprovedHero .metricIcon{width:39px!important;height:39px!important;min-width:39px!important;flex-basis:39px!important}
  body.homePageActive .homeApprovedHero .homeMetricPng{width:38px!important;height:38px!important}
  body.homePageActive .homeApprovedHero .homeMetricPng-tanks{width:49px!important;height:39px!important}
  body.homePageActive .homeApprovedHero .heroMetrics strong{font-size:18px!important}
  body.homePageActive .homeApprovedHero .heroMetrics small{font-size:6.5px!important}
}

/* =====================================================================
   v0.3.5.277 — HOME HERO PNG STAT ICON + TEXT ALIGNMENT FIX
   HOME-only alignment pass for the approved PNG KPI cards:
   - reserve a real fixed icon column matching the new PNG optical size
   - remove inherited span margin that was dropping icon/text wrappers
   - keep every number/label on one shared vertical and horizontal rhythm
   - prevent the wider tank PNG from colliding with the value text
   ===================================================================== */
body.homePageActive .homeApprovedHero .heroMetrics>div{
  grid-template-columns:52px minmax(0,1fr)!important;
  column-gap:7px!important;
  align-items:center!important;
}
body.homePageActive .homeApprovedHero .metricIcon{
  width:52px!important;
  height:48px!important;
  min-width:52px!important;
  margin:0!important;
  align-self:center!important;
  justify-self:center!important;
}
body.homePageActive .homeApprovedHero .metricText{
  margin:0!important;
  padding:0!important;
  align-self:center!important;
  justify-self:stretch!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  min-width:0!important;
  text-align:left!important;
  transform:none!important;
}
body.homePageActive .homeApprovedHero .heroMetrics strong,
body.homePageActive .homeApprovedHero .heroMetrics small{
  margin-left:0!important;
  margin-right:0!important;
  text-align:left!important;
}
body.homePageActive .homeApprovedHero .heroMetrics strong{
  display:block!important;
  line-height:1!important;
}
body.homePageActive .homeApprovedHero .heroMetrics small{
  display:block!important;
  margin-top:5px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
/* Tank is naturally wider: keep it centered inside the same icon lane. */
body.homePageActive .homeApprovedHero .homeMetricPng-tanks{
  width:54px!important;
  height:44px!important;
  transform:translateX(-1px) translateZ(0)!important;
}
body.homePageActive .homeApprovedHero .heroMetrics>div:hover .homeMetricPng-tanks{
  transform:translateX(-1px) translateY(-1px) translateZ(0)!important;
}

@media(max-width:900px){
  body.homePageActive .homeApprovedHero .heroMetrics>div{
    grid-template-columns:48px minmax(0,1fr)!important;
    column-gap:6px!important;
  }
  body.homePageActive .homeApprovedHero .metricIcon{
    width:48px!important;
    min-width:48px!important;
    height:44px!important;
  }
  body.homePageActive .homeApprovedHero .homeMetricPng-tanks{
    width:50px!important;
    height:41px!important;
  }
}
@media(max-width:620px){
  body.homePageActive .homeApprovedHero .heroMetrics>div{
    grid-template-columns:44px minmax(0,1fr)!important;
    column-gap:6px!important;
  }
  body.homePageActive .homeApprovedHero .metricIcon{
    width:44px!important;
    min-width:44px!important;
    height:41px!important;
  }
  body.homePageActive .homeApprovedHero .homeMetricPng-tanks{
    width:46px!important;
    height:38px!important;
  }
}

/* =====================================================================
   v0.3.5.278 — PLAYER PROFILE MASTER MEDAL BASELINE ALIGNMENT FIX
   User-approved award-rail micro-polish:
   - lower the large Mastery medal back toward the shared medal baseline
   - keep its approved size / glow / order unchanged
   - let its lower edge overlap the KPI strip by the same subtle amount as
     the neighboring medals instead of floating visibly above them
   - do not move or resize any other award
   ===================================================================== */
.approvedReplayHero .approvedAwardsRail > .approvedAward.mastery{
  top:-2px!important;
}

@media (max-width:1200px){
  .approvedReplayHero .approvedAwardsRail > .approvedAward.mastery{
    top:-1px!important;
  }
}

/* =====================================================================
   v0.3.5.279 — GLOBAL LIKE CHIP BORDER REMOVAL + HEART COUNT UI CLEANUP
   User-approved global like presentation:
   - visual output is only a red heart + numeric count
   - remove pill/chip borders, backgrounds, shadows and capsule surfaces
   - keep generous invisible hit area, realtime animations and auth behavior
   - slightly enlarge the heart while keeping counts baseline-aligned
   - apply consistently to replay cards, battle hero, video cards,
     featured video and video detail actions
   ===================================================================== */
.rhLikeControl,
.rhLikeControl:hover,
.rhLikeControl.is-liked,
.videoDetailActionsInline>.rhLike-detail,
.videoDetailActionsInline>.rhLike-detail.is-liked{
  --rh-like-fg:#eef3f0!important;
  --rh-like-border:transparent!important;
  --rh-like-bg:transparent!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* No hidden pill/glass surface behind the content, even on hover/liked. */
.rhLikeControl .rhLikeGlow{
  display:none!important;
}
.rhLikeControl:hover{
  color:#ffffff!important;
}
.rhLikeControl.is-liked{
  color:#ffffff!important;
}

/* Heart + count is the complete visible like UI. */
.rhLikeGlyph{
  width:20px!important;
  height:20px!important;
  flex:0 0 20px!important;
  background:#ff4655!important;
  color:#ff4655!important;
  filter:drop-shadow(0 0 4px rgba(255,70,85,.18))!important;
  transition:transform .16s ease,filter .16s ease!important;
}
.rhLikeControl:hover .rhLikeGlyph{
  transform:scale(1.242)!important;
  filter:drop-shadow(0 0 6px rgba(255,70,85,.28))!important;
}
.rhLikeControl b[data-like-count]{
  color:#f3f6f4!important;
  font-weight:950!important;
  font-variant-numeric:tabular-nums!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
  text-shadow:none!important;
}

/* Preserve comfortable clickable geometry without any visible capsule. */
.rhLikeControl{
  min-height:30px!important;
  height:auto!important;
  min-width:0!important;
  padding:3px 5px!important;
  border-radius:0!important;
  gap:6px!important;
  overflow:visible!important;
}
.rhLike-card,
.rhLike-video-card,
.rhLike-featured,
.rhLike-detail{
  min-height:30px!important;
  padding:3px 5px!important;
  border-radius:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.rhLike-card{font-size:8.8px!important}
.rhLike-video-card{font-size:8.9px!important}
.rhLike-featured{font-size:8.8px!important}
.rhLike-detail{font-size:9.6px!important;gap:6px!important}

/* Featured card keeps its absolute anchor, but no visual badge/chip. */
.rhLike-featured{
  right:9px!important;
  top:8px!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Battle hero wrapper must also remain surface-free. */
.approvedLikeAction,
.approvedLikeAction.active,
.approvedLikeAction:hover{
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.approvedLikeAction .rhLike-detail{
  height:auto!important;
  min-height:30px!important;
  width:auto!important;
  padding:3px 5px!important;
}

/* Video detail: the like should not occupy a faux action-button width. */
.videoDetailActionsInline>.rhLike-detail{
  min-width:0!important;
  width:auto!important;
  justify-content:flex-start!important;
  align-self:center!important;
}

/* Keep realtime ring/delta feedback; they float independently of the chip. */
.rhLikeBurst{
  border-color:rgba(255,70,85,.38)!important;
}

@media(max-width:650px){
  .rhLikeControl,
  .rhLike-card,
  .rhLike-video-card,
  .rhLike-featured,
  .rhLike-detail,
  .approvedLikeAction .rhLike-detail{
    min-height:28px!important;
    width:auto!important;
    padding:2px 4px!important;
    gap:5px!important;
  }
  .rhLikeGlyph{
    width:19px!important;
    height:19px!important;
    flex-basis:19px!important;
  }
}

/* =====================================================================
   v0.3.5.280 — BATTLE PAGE LIKE DEFAULT HOVER COLOR FIX
   Scope correction: this is the replay/battle detail hero, not player profile.
   The battle like control must no longer render as the pale/white block in
   its resting state. Keep the v0.3.5.279 heart + count treatment, but give
   the battle-hero like shell the same dark premium glass tone it currently
   reaches on hover so it visually matches the neighboring hero actions.
   ===================================================================== */
.cinematicReplayPage .approvedHeroActions .approvedLikeAction,
.cinematicReplayPage .approvedHeroActions .approvedLikeAction.active,
.cinematicReplayPage .approvedHeroActions .approvedLikeAction:hover{
  height:41px!important;
  min-height:41px!important;
  padding:0 8px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-radius:5px!important;
  color:#fff!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 24%),
    linear-gradient(180deg,rgba(24,34,28,.80),rgba(9,16,13,.82))!important;
  box-shadow:0 11px 28px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.055)!important;
  backdrop-filter:blur(20px) saturate(1.10)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.10)!important;
  transform:none!important;
}

/* Keep the visible like itself exactly heart + count; no inner chip returns. */
.cinematicReplayPage .approvedHeroActions .approvedLikeAction .rhLike-detail,
.cinematicReplayPage .approvedHeroActions .approvedLikeAction .rhLike-detail:hover,
.cinematicReplayPage .approvedHeroActions .approvedLikeAction .rhLike-detail.is-liked{
  min-height:30px!important;
  height:30px!important;
  width:auto!important;
  padding:2px 3px!important;
  gap:5px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#fff!important;
}
.cinematicReplayPage .approvedHeroActions .approvedLikeAction .rhLikeGlyph{
  width:20px!important;
  height:20px!important;
  flex-basis:20px!important;
  background:#ff4655!important;
  filter:drop-shadow(0 0 5px rgba(255,70,85,.22))!important;
}
.cinematicReplayPage .approvedHeroActions .approvedLikeAction b[data-like-count]{
  color:#f6f8f7!important;
}

/* Hover can breathe slightly, but must not switch from pale -> dark anymore. */
.cinematicReplayPage .approvedHeroActions .approvedLikeAction:hover{
  filter:brightness(1.035)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.27),0 0 15px rgba(169,229,27,.045),inset 0 1px 0 rgba(255,255,255,.06)!important;
}

/* =====================================================================
   v0.3.5.281 — REPLAYS HERO INTEGRATED SEARCH HEADER COMPACT REBUILD
   Approved /replays top-section rebuild:
   - use the user-approved mockup render as the hero source of truth
   - keep live HTML title / replay count over a protected dark left zone
   - integrate search + filters inside the bottom edge of the hero
   - reduce hero height so replay cards begin noticeably higher
   - preserve existing filtering, sorting and replay-card behavior
   ===================================================================== */
.replaysDiscoveryPage.approvedReplaysMockup{
  width:min(1280px,calc(100% - 40px))!important;
  max-width:1280px!important;
  padding-top:10px!important;
  padding-bottom:40px!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity{
  position:relative!important;
  min-height:338px!important;
  height:338px!important;
  margin:0 0 8px!important;
  overflow:hidden!important;
  border:1px solid rgba(157,181,169,.24)!important;
  border-radius:10px!important;
  background:#07100d!important;
  box-shadow:
    0 22px 58px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -1px 0 rgba(0,0,0,.34)!important;
}
/* Old long decorative line and animated sweep are intentionally removed. */
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity::before{
  display:none!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:4!important;
  inset:0!important;
  width:auto!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 16%,transparent 70%,rgba(0,0,0,.24)),
    linear-gradient(90deg,rgba(169,229,27,.045),transparent 18%,transparent 82%,rgba(169,229,27,.025))!important;
  mix-blend-mode:normal!important;
  filter:none!important;
  animation:none!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroBackdrop{
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  background:url('/assets/replays_hero_approved_v281.webp') center center/cover no-repeat!important;
  filter:saturate(1.03) contrast(1.03) brightness(.98)!important;
  transform:none!important;
  transform-origin:center!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroBackdrop::before,
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroBackdrop::after{
  display:none!important;
  animation:none!important;
}
/* The approved source image contains reference typography on the left.
   This opaque-to-transparent protection zone hides it and leaves only the
   exact tank / forest / radar render visible on the right. */
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroShade{
  position:absolute!important;
  z-index:2!important;
  inset:0!important;
  border-radius:inherit!important;
  background:
    linear-gradient(90deg,
      rgba(3,8,8,.995) 0%,
      rgba(3,8,8,.995) 31%,
      rgba(3,8,8,.985) 38%,
      rgba(3,8,8,.90) 44%,
      rgba(3,8,8,.57) 50%,
      rgba(3,8,8,.22) 57%,
      rgba(3,8,8,.06) 68%,
      rgba(3,8,8,.02) 100%),
    linear-gradient(180deg,rgba(3,8,8,.05) 0%,rgba(3,8,8,.01) 58%,rgba(3,8,8,.52) 100%)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroFx{
  display:none!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroContent{
  position:relative!important;
  z-index:5!important;
  min-height:338px!important;
  height:338px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  padding:34px 42px 80px!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeading{
  width:510px!important;
  max-width:43%!important;
  margin:0!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .eyebrow{
  display:flex!important;
  align-items:center!important;
  margin:0!important;
  color:#9aa69f!important;
  font-size:9px!important;
  font-weight:720!important;
  line-height:1!important;
  letter-spacing:.17em!important;
  text-transform:uppercase!important;
  text-shadow:0 2px 10px rgba(0,0,0,.55)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .eyebrow::before{
  content:""!important;
  display:inline-block!important;
  width:30px!important;
  height:3px!important;
  margin:0 12px 0 0!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#a9e51b,#6fbf19)!important;
  box-shadow:0 0 10px rgba(169,229,27,.24)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .pageTitle{
  margin:22px 0 18px!important;
  color:#f7f9f8!important;
  font-size:66px!important;
  font-weight:820!important;
  line-height:.90!important;
  letter-spacing:-.045em!important;
  text-transform:uppercase!important;
  filter:none!important;
  text-shadow:0 14px 34px rgba(0,0,0,.56),0 1px 0 rgba(255,255,255,.035)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroStatus{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  min-height:26px!important;
  margin:0 0 13px!important;
  color:#d4dcd8!important;
  font-family:var(--approved-font)!important;
  font-size:11.5px!important;
  font-weight:560!important;
  line-height:1!important;
  text-shadow:0 3px 10px rgba(0,0,0,.50)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroStatusCount,
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroStatusFresh{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroStatusCount strong{
  display:inline!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#b7ef45!important;
  font-size:14px!important;
  font-weight:850!important;
  letter-spacing:.01em!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroStatusDot{
  color:#76827c!important;
  font-size:11px!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroStatusIcon{
  width:17px!important;
  height:17px!important;
  flex:0 0 17px!important;
  background:#a9e51b!important;
  opacity:.96!important;
  filter:drop-shadow(0 0 5px rgba(169,229,27,.18))!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysPageSub{
  display:block!important;
  margin:0!important;
  max-width:410px!important;
  color:#aeb8b3!important;
  font-size:12.5px!important;
  font-weight:500!important;
  line-height:1.45!important;
  text-shadow:0 3px 12px rgba(0,0,0,.52)!important;
}

/* Integrated search/filter dock: one compact premium rail inside the hero. */
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroSearchBar{
  position:absolute!important;
  z-index:8!important;
  left:18px!important;
  right:18px!important;
  bottom:12px!important;
  width:auto!important;
  min-height:58px!important;
  display:grid!important;
  grid-template-columns:minmax(300px,1.62fr) repeat(3,minmax(148px,.86fr)) minmax(160px,.92fr)!important;
  align-items:stretch!important;
  gap:8px!important;
  margin:0!important;
  padding:7px!important;
  border:1px solid rgba(160,183,173,.20)!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,rgba(9,16,17,.82),rgba(5,11,12,.90))!important;
  background-size:auto!important;
  background-position:initial!important;
  backdrop-filter:blur(18px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.08)!important;
  box-shadow:0 15px 34px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.045)!important;
  animation:none!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroSearchBar::before{
  content:""!important;
  position:absolute!important;
  left:14px!important;
  right:14px!important;
  top:0!important;
  height:1px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,transparent,rgba(169,229,27,.30) 22%,rgba(169,229,27,.12) 62%,transparent)!important;
  box-shadow:none!important;
  pointer-events:none!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroSearchBar::after{
  display:none!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaySearchField,
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .rhCustomSelect,
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .rhCustomSelectButton{
  min-width:0!important;
  height:44px!important;
  min-height:44px!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaySearchField,
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .rhCustomSelectButton{
  border:1px solid rgba(201,214,208,.15)!important;
  border-radius:6px!important;
  background:linear-gradient(180deg,rgba(16,24,24,.92),rgba(7,13,14,.94))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  transform:none!important;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaySearchField:hover,
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .rhCustomSelectButton:hover,
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .rhCustomSelect.open .rhCustomSelectButton{
  border-color:rgba(169,229,27,.28)!important;
  background:linear-gradient(180deg,rgba(19,29,28,.96),rgba(8,15,15,.96))!important;
  box-shadow:0 0 0 1px rgba(169,229,27,.035),inset 0 1px 0 rgba(255,255,255,.045)!important;
  transform:none!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaySearchField:focus-within,
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .rhCustomSelect.open .rhCustomSelectButton{
  border-color:rgba(169,229,27,.44)!important;
  box-shadow:0 0 0 1px rgba(169,229,27,.06),0 0 15px rgba(169,229,27,.045),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaySearchField{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:0 14px!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaySearchIcon{
  width:17px!important;
  height:17px!important;
  flex:0 0 17px!important;
  background:#a9b5af!important;
  opacity:.86!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaySearchField input{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:#eef3f0!important;
  font-family:var(--approved-font)!important;
  font-size:11px!important;
  font-weight:540!important;
  box-shadow:none!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaySearchField input::placeholder{
  color:#8c9892!important;
  opacity:1!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .rhCustomSelectButton{
  padding:0 14px!important;
  color:#e5ebe8!important;
  font-size:10.5px!important;
  font-weight:590!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .rhCustomSelect.searchable .rhCustomSelectButton::before{
  width:4px!important;
  height:4px!important;
  background:#9fd91d!important;
  box-shadow:0 0 7px rgba(169,229,27,.20)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .rhCustomSelectChevron{
  border-color:#9ea9a4!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .activeFilterBar{
  margin:0 0 4px!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .discoveryCatalogMeta{
  margin-top:0!important;
  margin-bottom:5px!important;
}

@media(max-width:1100px){
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity{
    min-height:384px!important;
    height:384px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroBackdrop{
    background-position:61% center!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroContent{
    min-height:384px!important;
    height:384px!important;
    padding:32px 32px 132px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeading{
    max-width:48%!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .pageTitle{
    font-size:58px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroSearchBar{
    grid-template-columns:minmax(280px,1.4fr) repeat(2,minmax(150px,.8fr))!important;
    grid-auto-rows:44px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroSearchBar .replaySearchField{
    grid-column:1 / span 1!important;
  }
}
@media(max-width:820px){
  .replaysDiscoveryPage.approvedReplaysMockup{
    width:calc(100% - 20px)!important;
    padding-top:8px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity{
    min-height:438px!important;
    height:438px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroBackdrop{
    background-position:67% center!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroShade{
    background:
      linear-gradient(90deg,rgba(3,8,8,.98) 0%,rgba(3,8,8,.92) 47%,rgba(3,8,8,.58) 67%,rgba(3,8,8,.24) 100%),
      linear-gradient(180deg,rgba(3,8,8,.05),rgba(3,8,8,.34) 60%,rgba(3,8,8,.78) 100%)!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroContent{
    min-height:438px!important;
    height:438px!important;
    padding:26px 24px 190px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeading{
    width:100%!important;
    max-width:66%!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .pageTitle{
    margin:16px 0 14px!important;
    font-size:49px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroStatus{
    gap:7px!important;
    font-size:10.5px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroSearchBar{
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    grid-template-columns:1fr 1fr!important;
    grid-auto-rows:42px!important;
    gap:6px!important;
    padding:6px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroSearchBar .replaySearchField{
    grid-column:1 / -1!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaySearchField,
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .rhCustomSelect,
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .rhCustomSelectButton{
    height:42px!important;
    min-height:42px!important;
  }
}
@media(max-width:560px){
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity{
    min-height:500px!important;
    height:500px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroContent{
    min-height:500px!important;
    height:500px!important;
    padding:24px 18px 244px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeading{
    max-width:88%!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .pageTitle{
    font-size:44px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroSearchBar{
    grid-template-columns:1fr 1fr!important;
  }
}

/* =====================================================================
   v0.3.5.282 — REPLAYS HERO CENTER LIGHT LIFT + LATE DARK OVERLAY START
   Visual-only /replays hero polish on top of v0.3.5.281:
   - keep the user-approved hero render and compact integrated-search layout
   - confine the opaque text-protection shade to the live title zone
   - release the center immediately after the word "РЕПЛЕИ"
   - lift render midtones / green radar atmosphere
   - make the integrated search dock a touch less black while preserving contrast
   ===================================================================== */

/* Open the approved render: the source already carries its own cinematic darkness.
   The live-text protection mask below is enough on the left, so the render itself
   can breathe more through the center and around the tank. */
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroBackdrop{
  filter:saturate(1.08) contrast(1.015) brightness(1.105)!important;
}

/* Keep the baked reference typography fully hidden only under the live text.
   The opaque zone finishes at the visual end of the live word "РЕПЛЕИ" and then
   falls away quickly instead of carrying a black veil through the hero center. */
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroShade{
  background:
    linear-gradient(90deg,
      rgba(3,8,8,.995) 0%,
      rgba(3,8,8,.995) 29%,
      rgba(3,8,8,.965) 32%,
      rgba(3,8,8,.72) 35%,
      rgba(3,8,8,.38) 39%,
      rgba(3,8,8,.14) 43%,
      rgba(3,8,8,.035) 47%,
      rgba(3,8,8,0) 52%,
      rgba(3,8,8,0) 100%),
    linear-gradient(180deg,
      rgba(3,8,8,.025) 0%,
      rgba(3,8,8,0) 56%,
      rgba(3,8,8,.30) 100%)!important;
}

/* Reduce the general top/bottom veil from .281. The center should read as image,
   not as a second dark panel, while the lower edge still supports the controls. */
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity::after{
  background:
    linear-gradient(180deg,rgba(255,255,255,.026),transparent 18%,transparent 73%,rgba(0,0,0,.13)),
    linear-gradient(90deg,rgba(169,229,27,.035),transparent 15%,transparent 86%,rgba(169,229,27,.020))!important;
}

/* Integrated controls: slightly lighter graphite so the page no longer stacks
   a black search rail on top of an already-dark hero. Geometry stays untouched. */
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroSearchBar{
  border-color:rgba(173,198,186,.25)!important;
  background:linear-gradient(180deg,rgba(15,25,25,.80),rgba(8,16,16,.86))!important;
  box-shadow:0 14px 30px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaySearchField,
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .rhCustomSelectButton{
  border-color:rgba(209,223,216,.19)!important;
  background:linear-gradient(180deg,rgba(22,33,32,.91),rgba(10,18,19,.92))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaySearchIcon{
  background:#bdc8c2!important;
  opacity:.94!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaySearchField input::placeholder{
  color:#a4afaa!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .rhCustomSelectButton{
  color:#edf2ef!important;
}

/* Tablet/mobile still need a stronger text-protection zone because the live copy
   occupies more of the image. Only lift the old mobile mask a little; do not force
   the desktop late-release geometry onto narrow screens. */
@media(max-width:820px){
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroBackdrop{
    filter:saturate(1.06) contrast(1.02) brightness(1.06)!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroProfileParity .replaysHeroShade{
    background:
      linear-gradient(90deg,rgba(3,8,8,.98) 0%,rgba(3,8,8,.91) 44%,rgba(3,8,8,.52) 63%,rgba(3,8,8,.18) 82%,rgba(3,8,8,.04) 100%),
      linear-gradient(180deg,rgba(3,8,8,.03),rgba(3,8,8,.22) 64%,rgba(3,8,8,.62) 100%)!important;
  }
}

/* =====================================================================
   v0.3.5.283 — GLOBAL HEADER ACTIVE NAV UNDERLINE POSITION LOCK
   Fix the /replays-only active-nav underline drift introduced by the old
   full-height replay header link override. Keep the underline on the exact
   shared global-header baseline used by HOME / VIDEO / battle pages.
   ===================================================================== */

/* /replays had height:100% on each nav anchor. The global underline is
   intentionally positioned relative to the compact text line (bottom:-25px),
   so a full-height anchor pushed it below the header. Restore the shared
   intrinsic link box while keeping the nav row vertically centered. */
body.replaysPageActive .approvedTopbar .approvedNav a{
  height:auto!important;
  min-height:0!important;
  align-self:center!important;
}

/* Lock the replay active underline to the same geometry and brand treatment
   as every other header section. This also supersedes the legacy /replays
   nth-child underline rule without touching the header or hero layout. */
body.replaysPageActive .approvedTopbar .approvedNav a::after{
  bottom:-25px!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#89c91c,#b7ef38)!important;
  box-shadow:0 0 12px rgba(169,229,27,.24)!important;
}

/* Active state stays driven by updateGlobalNav(); no page-specific fake
   underline state. This makes transitions between HOME / REPLAYS / VIDEO
   deterministic and prevents the bar from jumping vertically. */
body.replaysPageActive .approvedTopbar .approvedNav a.active::after,
body.replaysPageActive .approvedTopbar .approvedNav a[aria-current="page"]::after{
  left:0!important;
  right:0!important;
  opacity:1!important;
}

/* =====================================================================
   v0.3.5.284 — GLOBAL FERMANIHUB BRAND WORDMARK COLOR SYSTEM
   One source of truth for every visible FermaniHUB brand token.
   FERMANI = clean white / HUB(.) = approved lime.
   ===================================================================== */
:root{
  --rh-brand-white:#f4f7f5;
  --rh-brand-yellow:#a9e51b;
  --rh-brand-yellow-hot:#b8f33b;
}

/* Header and the pre-existing login wordmark now use the exact same palette. */
.brandWord,
.rhBrandWord,
.rhGlobalBrandWord{
  white-space:nowrap!important;
  color:var(--rh-brand-white)!important;
}
.brandWord>span,
.rhBrandWord>span,
.rhGlobalBrandHub{
  color:var(--rh-brand-yellow)!important;
}
.rhGlobalBrandReplay{
  color:var(--rh-brand-white)!important;
}

/* Dynamic in-copy wordmarks inherit the local typography/scale so they do not
   disturb approved page geometry, line height, labels, paragraphs or cards. */
.rhGlobalBrandWord{
  display:inline!important;
  font:inherit!important;
  font-size:inherit!important;
  font-weight:inherit!important;
  line-height:inherit!important;
  letter-spacing:inherit!important;
  text-transform:none!important;
  vertical-align:baseline!important;
}
.rhGlobalBrandWord>span{
  font:inherit!important;
  font-size:inherit!important;
  font-weight:inherit!important;
  line-height:inherit!important;
  letter-spacing:inherit!important;
}

/* Keep the main logo crisp and slightly more premium without changing its
   existing dimensions or header geometry. */
.approvedBrand .brandWord{
  color:var(--rh-brand-white)!important;
  text-shadow:0 0 14px rgba(255,255,255,.035)!important;
}
.approvedBrand .brandWord>span{
  color:var(--rh-brand-yellow)!important;
  text-shadow:0 0 12px rgba(169,229,27,.10)!important;
}

/* Profile KPI watermark was historically generated by ::before rather than a
   DOM text node, so give that legacy brand token the same white/lime split. */
.playerProfileKpis::before{
  content:"FERMANIHUB."!important;
  color:transparent!important;
  background:linear-gradient(90deg,
    rgba(244,247,245,.38) 0%,
    rgba(244,247,245,.38) 70%,
    rgba(169,229,27,.52) 70%,
    rgba(169,229,27,.52) 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
}

/* On tiny text keep the yellow readable but restrained; no extra glow/no box. */
.eyebrow .rhGlobalBrandHub,
.playerProfileEyebrow .rhGlobalBrandHub,
footer .rhGlobalBrandHub{
  color:var(--rh-brand-yellow-hot)!important;
}

/* =====================================================================
   v0.3.5.285 — GLOBAL I18N FOUNDATION + LANGUAGE SWITCHER
   Compact header selector; language choice is persisted by i18n.js.
   ===================================================================== */
.approvedLanguageSlot{
  position:relative;
  z-index:80;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  height:100%;
}
.rhLanguageSwitcher{position:relative;display:inline-flex;align-items:center;font-family:var(--approved-font)}
.rhLanguageToggle{
  height:36px;
  min-width:58px;
  padding:0 11px 0 13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(13,19,21,.92),rgba(5,10,12,.92));
  color:#dce2df;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 22px rgba(0,0,0,.14);
  cursor:pointer;
  font:700 11px/1 var(--approved-font);
  letter-spacing:.08em;
  transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease;
}
.rhLanguageToggle>em{font-style:normal;font-size:12.5px;line-height:1;color:#7f8a84;transform:translateY(-1px);transition:transform .16s ease,color .16s ease}
.rhLanguageToggle:hover,
.rhLanguageSwitcher.is-open .rhLanguageToggle{
  color:#fff;
  border-color:rgba(224,190,58,.42);
  background:linear-gradient(180deg,rgba(18,24,25,.98),rgba(7,12,14,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 9px 24px rgba(0,0,0,.22),0 0 18px rgba(225,190,54,.05);
}
.rhLanguageSwitcher.is-open .rhLanguageToggle>em{transform:translateY(1px) rotate(180deg);color:#d4ba4b}
.rhLanguageToggle:focus-visible{outline:2px solid rgba(211,185,63,.72);outline-offset:2px}
.rhLanguageMenu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:188px;
  padding:7px;
  display:none;
  border:1px solid rgba(255,255,255,.115);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(15,20,22,.985),rgba(6,10,12,.992));
  box-shadow:0 22px 60px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(22px) saturate(1.12);
  overflow:hidden;
}
.rhLanguageSwitcher.is-open .rhLanguageMenu{display:block;animation:rhLanguageMenuIn .14s ease-out both}
@keyframes rhLanguageMenuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.rhLanguageMenu button{
  width:100%;
  min-height:38px;
  padding:0 9px;
  display:grid;
  grid-template-columns:20px 27px 1fr 16px;
  align-items:center;
  gap:7px;
  border:0;
  border-radius:6px;
  background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));
  color:#aab4af;
  text-align:left;
  cursor:pointer;
  font-family:var(--approved-ui);
  transition:background .14s ease,color .14s ease;
}
.rhLanguageMenu button b{font:700 10px/1 var(--approved-font);letter-spacing:.08em;color:#707d76}
.rhLanguageMenu button span{font-size:12px;font-weight:650;white-space:nowrap}
.rhLanguageMenu button>em{font-style:normal;font-size:12px;text-align:center;color:#d9bd49}
.rhLanguageMenu button:hover{background:rgba(255,255,255,.055);color:#fff}
.rhLanguageMenu button.active{background:linear-gradient(90deg,rgba(211,181,52,.12),rgba(211,181,52,.035));color:#f3f0e6}
.rhLanguageMenu button.active b{color:#d9bd49}
.rhLanguageMenu button:focus-visible{outline:1px solid rgba(211,185,63,.68);outline-offset:-1px}
.rhLanguageFlag{display:inline-block;position:relative;box-sizing:border-box;width:18px;height:12px;flex:0 0 18px;border:1px solid rgba(255,255,255,.30);border-radius:1px;box-shadow:0 1px 3px rgba(0,0,0,.38);overflow:hidden}
.rhLanguageFlag-uk{background:linear-gradient(to bottom,#1769aa 0 50%,#ffd538 50% 100%)}
.rhLanguageFlag-ru{background:linear-gradient(to bottom,#fff 0 33.333%,#21468b 33.333% 66.666%,#d52b1e 66.666% 100%)}
.rhLanguageFlag-en{background:linear-gradient(33deg,transparent 43%,#fff 43% 47%,#bd2d35 47% 51%,#fff 51% 55%,transparent 55%),linear-gradient(-33deg,transparent 43%,#fff 43% 47%,#bd2d35 47% 51%,#fff 51% 55%,transparent 55%),linear-gradient(to bottom,transparent 37%,#fff 37% 44%,#c92c36 44% 56%,#fff 56% 63%,transparent 63%),linear-gradient(to right,#1d3e75 0 100%)}
.rhLanguageFlag-pl{background:linear-gradient(to bottom,#fff 0 50%,#dc143c 50% 100%)}
.rhLanguageToggle .rhLanguageFlag{margin-left:-2px}
.rhLanguageMenu .rhLanguageFlag{justify-self:center}
@media(max-width:1200px){.approvedHeaderActions{gap:11px!important}}
@media(max-width:850px){.rhLanguageMenu{right:-4px}}

/* v0.3.5.288 — canonical terminology keeps legacy HUD casing without duplicate copy keys. */
body.homePageActive .topBattleV121Damage span,
body.homePageActive .topBattleV121Stat small,
body.homePageActive .damageScore small,
.playerBestDamage span,
.playerProfileFinalMockup .playerHeroBestDamage span,
.playerProfileFinalMockup .playerHeroBestMetricCopy small,
.videoDetailReplayWideDamage span,
.videoDetailReplayWideMetrics small{
  text-transform:uppercase!important;
}

/* v0.3.5.288 FIX2 — ADMIN VIDEO TITLE TRANSLATION STORAGE */
.videoAdminTranslationState{color:#9fce45!important;letter-spacing:.02em}
.videoAdminLibraryHead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.videoAdminLibraryHead>div>strong,.videoAdminLibraryHead>div>span{display:block}
.videoAdminLibraryHead>button{border:1px solid rgba(169,229,27,.30);background:#101a12;color:#bfe957;padding:7px 10px;font-size:9px;font-weight:850;border-radius:4px;cursor:pointer}
.videoAdminLibraryHead>button:disabled,.videoAdminTranslateOne:disabled{opacity:.55;cursor:wait}
.videoAdminExistingActions .videoAdminTranslateOne{color:#bfe957;border-color:rgba(169,229,27,.22)}

/* =========================================================
   v0.3.5.288 FIX4 — SECURE WG OWNER WHITELIST
   Owner-only admin entry appears automatically after verified WG auth.
   ========================================================= */
.approvedAdminEntry{
  height:32px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:0 10px;border:1px solid rgba(169,229,27,.38);border-radius:4px;
  background:linear-gradient(180deg,rgba(74,105,20,.24),rgba(17,27,13,.78));
  color:#b7ef2e;text-decoration:none;text-transform:uppercase;
  font-family:var(--approved-font);font-size:10.5px;font-weight:900;letter-spacing:.055em;
  box-shadow:inset 0 1px rgba(255,255,255,.025);transition:.16s ease;
}
.approvedAdminEntry:hover{color:#eaffad;border-color:rgba(169,229,27,.68);background:linear-gradient(180deg,rgba(96,137,24,.34),rgba(20,33,14,.88));}
.approvedAdminShield{font-size:9px;line-height:1;color:#a9e51b;filter:drop-shadow(0 0 5px rgba(169,229,27,.35));}
body.videoAdminPageActive .approvedAdminEntry{color:#fff;border-color:#a9e51b;background:linear-gradient(180deg,#668f18,#3e650d);box-shadow:0 0 0 1px rgba(169,229,27,.12),0 7px 20px rgba(76,119,14,.18);}
@media(max-width:1100px){.approvedAdminEntry{width:32px;padding:0}.approvedAdminEntry>span:last-child{display:none}.approvedAdminEntry .approvedAdminShield{font-size:9px}}
@media(max-width:850px){.approvedAdminEntry{height:30px;width:30px}}

/* =====================================================================
   v0.3.5.398 FIX18 — OWNER-ONLY SITE ANALYTICS
   ===================================================================== */
.adminAnalyticsFix18{
  margin-top:16px;padding:18px;border:1px solid rgba(169,229,27,.20);border-radius:7px;
  background:radial-gradient(circle at 10% 0,rgba(118,170,26,.12),transparent 30%),linear-gradient(145deg,rgba(15,27,23,.96),rgba(6,13,12,.98));
  box-shadow:0 16px 46px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.025);
}
.adminAnalyticsHeadFix18{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:14px}
.adminAnalyticsHeadFix18>div>span{display:block;color:#a9e51b;font:900 8px/1 var(--approved-font);letter-spacing:.15em}
.adminAnalyticsHeadFix18 h2{margin:8px 0 0;color:#f2f6f3;font:900 24px/1 var(--approved-font);letter-spacing:.025em}
.adminAnalyticsHeadFix18>small{display:flex;align-items:center;gap:7px;color:#78857f;font-size:9px}
.adminAnalyticsHeadFix18>small i{width:7px;height:7px;border-radius:50%;background:#a9e51b;box-shadow:0 0 10px rgba(169,229,27,.72)}
.adminAnalyticsLoadingFix18{min-height:120px;display:grid;place-items:center;border:1px solid rgba(207,225,215,.07);border-radius:6px;color:#829089;font:800 9px/1 var(--approved-font);letter-spacing:.08em}
.adminAnalyticsGridFix18{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.adminAnalyticsMetricFix18{position:relative;min-height:124px;padding:16px;overflow:hidden;border:1px solid rgba(207,225,215,.10);border-radius:6px;background:linear-gradient(150deg,rgba(22,36,33,.90),rgba(7,15,14,.95))}
.adminAnalyticsMetricFix18:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:#80908a}
.adminAnalyticsMetricFix18.is-online:before,.adminAnalyticsMetricFix18.is-visits:before{background:#a9e51b;box-shadow:0 0 13px rgba(169,229,27,.55)}
.adminAnalyticsMetricFix18.is-free:before{background:#58cbd4;box-shadow:0 0 13px rgba(88,203,212,.4)}
.adminAnalyticsMetricFix18.is-pro:before{background:#d7b53d;box-shadow:0 0 13px rgba(215,181,61,.42)}
.adminAnalyticsMetricFix18>span{display:block;color:#8d9b94;font:850 9px/1.2 var(--approved-font);letter-spacing:.075em}
.adminAnalyticsMetricFix18>strong{display:block;margin-top:14px;color:#f2f6f3;font:900 34px/.9 var(--approved-font);letter-spacing:.01em}
.adminAnalyticsMetricFix18.is-online>strong{color:#c7f45c;text-shadow:0 0 15px rgba(169,229,27,.15)}
.adminAnalyticsMetricFix18.is-free>strong{color:#80dce2}.adminAnalyticsMetricFix18.is-pro>strong{color:#ebca55}
.adminAnalyticsMetricFix18>small{display:block;margin-top:10px;color:#74817b;font-size:8.5px;line-height:1.3}
.adminAnalyticsMetricFix18>b{display:block;position:absolute;right:14px;bottom:13px;color:#9ba8a2;font:800 8px/1 var(--approved-font);letter-spacing:.06em;text-transform:uppercase}
.adminAnalyticsHistoryFix18{margin-top:12px;border:1px solid rgba(207,225,215,.08);border-radius:6px;overflow:hidden}
.adminAnalyticsHistoryFix18>div{min-height:34px;display:grid;grid-template-columns:minmax(105px,1.3fr) repeat(3,minmax(75px,.7fr));align-items:center;padding:0 12px;border-top:1px solid rgba(207,225,215,.06);color:#aeb9b4;font-size:9px;text-align:right}
.adminAnalyticsHistoryFix18>div:first-child{min-height:38px;border-top:0;background:rgba(255,255,255,.025);color:#718078;font:850 7.5px/1 var(--approved-font);letter-spacing:.07em}
.adminAnalyticsHistoryFix18>div>*:first-child{text-align:left}.adminAnalyticsHistoryFix18>div>strong{font-weight:850;color:#d9e1dd}
.adminAnalyticsHistoryFix18>div:first-child>strong{color:#a9e51b}
@media(max-width:980px){.adminAnalyticsGridFix18{grid-template-columns:1fr 1fr}}
@media(max-width:620px){
  .adminAnalyticsFix18{padding:12px;margin-top:12px}.adminAnalyticsHeadFix18{align-items:flex-start;flex-direction:column;gap:7px}
  .adminAnalyticsHeadFix18 h2{font-size:21px}.adminAnalyticsGridFix18{grid-template-columns:1fr 1fr;gap:7px}
  .adminAnalyticsMetricFix18{min-height:112px;padding:13px}.adminAnalyticsMetricFix18>strong{font-size:29px}
  .adminAnalyticsMetricFix18>span{font-size:8px}.adminAnalyticsMetricFix18>b{position:static;margin-top:9px}
  .adminAnalyticsHistoryFix18{overflow-x:auto}.adminAnalyticsHistoryFix18>div{min-width:420px}
}

/* =====================================================================
   v0.3.5.288 FIX5 — VIDEO + ADMIN DESKTOP LAYOUT RECOVERY
   Restore readable desktop geometry after i18n/admin ownership changes.
   Scope: video detail + video admin only. Mobile/tablet remains for .289.
   ===================================================================== */
@media (min-width:1101px){
  .videoDetailPageApproved{
    width:min(1580px,calc(100vw - 48px))!important;
    max-width:1580px!important;
    margin:16px auto 72px!important;
  }
  .videoDetailLayoutApproved{
    grid-template-columns:minmax(0,1fr) 390px!important;
    gap:16px!important;
  }
  .videoDetailMainApproved,
  .videoDetailSideApproved{gap:12px!important}
  .videoDetailInfoInlineApproved{padding:17px 18px 16px!important;gap:12px!important}
  .videoDetailInfoCopy .eyebrow{font-size:9px!important}
  .videoDetailInfoCopy h1{font-size:25px!important;line-height:1.18!important;margin:9px 0 9px!important}
  .videoDetailMetaInline{font-size:10.5px!important;gap:11px!important}
  .videoDetailMetaInline strong{font-size:11px!important}
  .videoDetailMetaInline .videoViewsValue{font-size:12px!important}
  .videoDetailMetaInline .videoDateValue{font-size:10.5px!important}
  .videoDetailAction{min-height:42px!important;padding:0 16px!important;font-size:10px!important;gap:8px!important}
  .videoDetailSideHead{height:46px!important;padding:0 13px!important}
  .videoDetailSideHead strong{font-size:9.5px!important}
  .videoDetailReplayWideHead{height:31px!important}
  .videoDetailReplayWideHead strong{font-size:8.8px!important}
  .videoDetailReplayWideCard{padding:11px 12px 9px!important}
  .videoDetailReplayWideMain{grid-template-columns:82px minmax(0,1fr) auto!important;gap:11px!important;min-height:59px!important}
  .videoDetailReplayWideThumb{width:82px!important;height:52px!important}
  .videoDetailReplayWideTank{width:78px!important;height:49px!important}
  .videoDetailReplayWideIdentity>strong{font-size:15px!important}
  .videoDetailReplayWideIdentity>small{font-size:8.5px!important;margin-top:5px!important}
  .videoDetailReplayWideIdentity>em{font-size:8.4px!important;margin-top:4px!important}
  .videoDetailReplayWideDamage{min-width:105px!important}
  .videoDetailReplayWideDamage strong{font-size:29px!important}
  .videoDetailReplayWideDamage span{font-size:6.5px!important}
  .videoDetailReplayWideFoot{min-height:36px!important;margin-top:8px!important;padding-top:8px!important}
  .videoDetailReplayWideMetrics>span{min-width:70px!important;height:29px!important;padding:0 8px!important;grid-template-columns:17px auto!important}
  .videoDetailReplayWideMetrics .cardPremiumKpiIcon{width:17px!important;height:17px!important}
  .videoDetailReplayWideMetrics b{font-size:11.5px!important}
  .videoDetailReplayWideMetrics small{font-size:5.8px!important}
  .videoDetailReplayWideAwards{height:29px!important}
  .videoDetailReplayWideAwards .cardAwardIcon{width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important;flex-basis:26px!important}
  .videoDetailReplayWideAwards .cardAwardIcon img{width:25px!important;height:25px!important;max-width:25px!important;max-height:25px!important}
  .videoDetailRelatedList{padding:5px 12px 10px!important}
  .videoDetailRelatedItem{min-height:104px!important;padding:11px 0!important;grid-template-columns:152px minmax(0,1fr)!important;gap:12px!important}
  .videoDetailRelatedThumb{width:152px!important}
  .videoDetailRelatedItem strong{font-size:11.2px!important;line-height:1.3!important}
  .videoDetailRelatedItem small{font-size:9px!important;margin-top:7px!important}
  .videoDetailRelatedItem em{font-size:8.6px!important;margin-top:5px!important}
  .videoYoutubeCommentsPanel{margin-top:16px!important}
  .videoYoutubeCommentsHead{min-height:58px!important;padding:0 16px!important}
  .videoYoutubeCommentsHead strong{font-size:10.5px!important}
  .videoYoutubeCommentsHead span{font-size:8.5px!important}
  .videoCommentSort button{height:33px!important;padding:0 13px!important;font-size:8.8px!important}
  .videoYoutubeCommentRow{min-height:108px!important;padding:16px!important;grid-template-columns:44px minmax(0,1fr)!important;gap:13px!important}
  .videoYoutubeCommentAvatar{width:44px!important;height:44px!important}
  .videoYoutubeCommentTop strong,.videoYoutubeCommentTop a{font-size:10.3px!important}
  .videoYoutubeCommentTop small{font-size:8.2px!important}
  .videoYoutubeCommentBody p{font-size:10px!important;line-height:1.55!important;margin:7px 0 9px!important}
  .videoYoutubeCommentMeta{font-size:8px!important}
}

@media (min-width:981px){
  .videoAdminShell{
    width:min(1580px,calc(100vw - 48px))!important;
    max-width:1580px!important;
    margin:18px auto 72px!important;
  }
  .videoAdminHead{min-height:164px!important;padding:30px 34px!important;gap:26px!important}
  .videoAdminHead .eyebrow{font-size:9.5px!important}
  .videoAdminHead h1{margin:11px 0 8px!important;font-size:42px!important;line-height:1!important}
  .videoAdminHead p{max-width:820px!important;font-size:12px!important;line-height:1.6!important}
  .videoAdminHead>a{font-size:10.5px!important;padding-top:3px!important}
  .videoAdminGrid{grid-template-columns:minmax(470px,.78fr) minmax(0,1.42fr)!important;gap:16px!important;margin-top:16px!important}
  .videoAdminForm{padding:20px!important;gap:15px!important}
  .videoAdminForm label{gap:7px!important;font-size:10px!important;letter-spacing:.055em!important}
  .videoAdminForm label>small{font-size:8.8px!important;line-height:1.35!important}
  .videoAdminForm input,.videoAdminForm select,.videoAdminPicker input{height:46px!important;padding:0 13px!important;font-size:12px!important;border-radius:5px!important}
  .videoAdminFormRow{gap:12px!important}
  .videoAdminCheck{gap:10px!important;padding-top:16px!important}
  .videoAdminCheck input{width:18px!important;height:18px!important}
  .videoAdminCheck span{font-size:10px!important;line-height:1.35!important}
  .videoAdminToken{gap:10px!important}
  .videoAdminToken button,.videoAdminPickerHead button{height:46px!important;padding:0 15px!important;font-size:10px!important;border-radius:5px!important}
  .videoAdminSubmit{height:50px!important;font-size:11px!important;border-radius:5px!important}
  .videoAdminMessage{min-height:24px!important;font-size:10px!important}
  .videoAdminPickerHead{min-height:82px!important;padding:14px 15px!important;gap:14px!important}
  .videoAdminPickerHead>div strong{font-size:12px!important}
  .videoAdminPickerHead>div span{margin-top:4px!important;font-size:9px!important}
  .videoAdminPickerHead label{grid-template-columns:270px auto!important;gap:8px!important}
  .videoAdminReplayChoices{padding:13px!important;gap:9px!important;max-height:520px!important}
  .videoAdminReplayChoice{min-height:65px!important;padding:10px 11px!important;grid-template-columns:21px 1fr!important;gap:9px!important;border-radius:5px!important}
  .videoAdminReplayChoice input{width:17px!important;height:17px!important}
  .videoAdminReplayChoice strong{font-size:11px!important}
  .videoAdminReplayChoice small{margin-top:4px!important;font-size:8.8px!important}
  .videoAdminLibrary{margin-top:16px!important;padding:15px!important}
  .videoAdminLibraryHead{min-height:42px!important;padding-bottom:8px!important}
  .videoAdminLibraryHead>div>strong{font-size:12px!important}
  .videoAdminLibraryHead>div>span{font-size:9px!important;margin-top:3px!important;color:#7e8a84!important}
  .videoAdminLibraryHead>button{height:38px!important;padding:0 13px!important;font-size:9.5px!important}
  .videoAdminExisting{min-height:112px!important;grid-template-columns:174px minmax(0,1fr) auto!important;gap:16px!important;padding:12px 10px!important}
  .videoAdminExisting>img{width:174px!important;border-radius:5px!important}
  .videoAdminExisting>div>strong{font-size:12px!important;line-height:1.3!important}
  .videoAdminExisting>div>small{margin-top:5px!important;font-size:9px!important;line-height:1.35!important}
  .videoAdminTranslationState{font-size:9px!important}
  .videoAdminReplayChips{gap:6px!important;margin-top:9px!important}
  .videoAdminReplayChips button{padding:5px 8px!important;font-size:8px!important}
  .videoAdminExistingActions{gap:8px!important}
  .videoAdminExistingActions a,.videoAdminExistingActions button{min-height:34px!important;padding:0 11px!important;display:inline-flex!important;align-items:center!important;font-size:9px!important;border-radius:4px!important;white-space:nowrap!important}
}

@media (min-width:981px) and (max-width:1300px){
  .videoAdminGrid{grid-template-columns:minmax(390px,.85fr) minmax(0,1.15fr)!important}
  .videoAdminReplayChoices{grid-template-columns:1fr!important}
  .videoAdminExisting{grid-template-columns:145px minmax(0,1fr)!important}
  .videoAdminExisting>img{width:145px!important}
  .videoAdminExistingActions{grid-column:2!important;justify-content:flex-start!important}
}

@media (min-width:1101px) and (max-width:1400px){
  .videoDetailPageApproved{width:calc(100vw - 36px)!important}
  .videoDetailLayoutApproved{grid-template-columns:minmax(0,1fr) 350px!important;gap:13px!important}
  .videoDetailRelatedItem{grid-template-columns:132px minmax(0,1fr)!important}
  .videoDetailRelatedThumb{width:132px!important}
}

/* =====================================================================
   v0.3.5.288 FIX6 — VIDEO DETAIL INDEPENDENT COLUMN FLOW + COMMENT ALIGNMENT
   Keep player/info/comments in the left column while the replay/related rail
   flows independently on the right. Removes the large dead gap below video.
   ===================================================================== */
@media (min-width:901px){
  .videoDetailMainApproved > .videoYoutubeCommentsInMain{
    width:100%!important;
    min-width:0!important;
    margin-top:0!important;
    align-self:start!important;
  }
  .videoDetailMainApproved > .videoYoutubeCommentsInMain .videoYoutubeCommentBody p{
    max-width:100%!important;
  }
  .videoDetailMainApproved > .videoYoutubeCommentsInMain .videoYoutubeReplyBody p{
    max-width:100%!important;
  }
  .videoDetailSideApproved{
    align-self:start!important;
  }
}


/* =====================================================================
   v0.3.5.288 FIX7 — GLOBAL DESKTOP XL CANVAS + SCALE PASS
   Desktop-only geometry pass. Reuse the proven 1672px Battle canvas for
   HOME / Replays / Player / Video / Upload and generic working surfaces.
   No surface-color redesign and no global typography pass in this version.
   ===================================================================== */
@media (min-width:1600px){
  :root{--rh-desktop-xl:1672px;--rh-desktop-gutter:48px}

  /* Generic content surfaces / utility pages. */
  .pageShell,
  .wrap,
  .assetNotice,
  .uploadPremiumPage{
    width:min(var(--rh-desktop-xl),calc(100vw - var(--rh-desktop-gutter)))!important;
    max-width:var(--rh-desktop-xl)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* HOME — same visual composition, larger working stage. */
  body.homePageActive{
    --home-canvas:min(var(--rh-desktop-xl),calc(100vw - var(--rh-desktop-gutter)))!important;
  }
  body.homePageActive .homeApprovedHero{
    width:var(--home-canvas)!important;
    max-width:var(--rh-desktop-xl)!important;
    height:468px!important;
    min-height:468px!important;
  }
  body.homePageActive .homeApprovedHero .heroInner{
    grid-template-columns:minmax(0,1fr) 500px!important;
    gap:34px!important;
    padding-left:30px!important;
    padding-right:30px!important;
  }
  body.homePageActive .homeApprovedHero .heroCopy{
    width:min(720px,100%)!important;
    max-width:720px!important;
    padding-top:42px!important;
  }
  body.homePageActive .heroMetrics{width:590px!important}
  body.homePageActive .approvedTopBattle{margin-top:16px!important}
  body.homePageActive .topBattleFeature,
  body.homePageActive .topBattleFeatureCopy{min-height:316px!important}
  body.homePageActive .homeQuickFilters,
  body.homePageActive .approvedHomeDashboard,
  body.homePageActive .approvedHomeFeatures{
    width:var(--home-canvas)!important;
    max-width:var(--rh-desktop-xl)!important;
  }
  body.homePageActive .approvedHomeDashboard{
    gap:16px!important;
    grid-template-columns:.94fr 1.25fr .96fr!important;
  }
  body.homePageActive .approvedHomeDashboard > .homePanel,
  body.homePageActive .approvedHomeDashboard > .damagePanel,
  body.homePageActive .approvedHomeDashboard > .latestPanel,
  body.homePageActive .approvedHomeDashboard > .popularPanel{
    height:348px!important;
    max-height:348px!important;
  }
  body.homePageActive .approvedHomeFeatures{gap:14px!important}
  body.homePageActive .approvedHomeFeatures>div{min-height:88px!important}

  /* REPLAYS — preserve 4-column density, give each card more breathing room. */
  .replaysDiscoveryPage.approvedReplaysMockup{
    width:min(var(--rh-desktop-xl),calc(100vw - var(--rh-desktop-gutter)))!important;
    max-width:var(--rh-desktop-xl)!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysHeroBanner.replaysHeroProfileParity{
    height:372px!important;
    min-height:372px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replayCard .art{
    height:162px!important;
    min-height:162px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .replaysGrid,
  .replaysDiscoveryPage.approvedReplaysMockup .cardGrid{
    gap:14px!important;
  }

  /* PLAYER — keep approved hero balance, simply give the composition room. */
  .playerProfilePage.playerProfileFinalMockup{
    width:min(var(--rh-desktop-xl),calc(100vw - var(--rh-desktop-gutter)))!important;
    max-width:var(--rh-desktop-xl)!important;
  }
  .playerProfileFinalMockup .playerProfileHeroFinal{
    height:500px!important;
    min-height:500px!important;
  }
  .playerProfileFinalMockup .playerProfileHeroMain{
    left:46px!important;
    top:32px!important;
    width:640px!important;
    max-width:45%!important;
  }
  .playerProfileFinalMockup .playerHeroBestCard{
    right:30px!important;
    width:500px!important;
  }
  .playerProfileFinalMockup .playerHeroMasteryFinal{right:31px!important}
  .playerProfileFinalMockup .playerReplaySectionFinal{padding-left:18px!important;padding-right:18px!important}

  /* VIDEO HUB — current visual language, larger hero/cards. */
  .videoHubPageApproved{
    width:min(var(--rh-desktop-xl),calc(100vw - var(--rh-desktop-gutter)))!important;
    max-width:var(--rh-desktop-xl)!important;
  }
  .videoHubHeroApproved{
    height:410px!important;
    min-height:410px!important;
  }
  .videoHubHeroCopyApproved{
    width:610px!important;
    max-width:46%!important;
    padding-left:36px!important;
    padding-top:66px!important;
  }
  .videoHeroSideApproved{width:350px!important;right:22px!important}
  .videoHubGridApproved{gap:14px!important}

  /* VIDEO DETAIL / ADMIN were already wide in FIX5; align them to the same rail. */
  .videoDetailPageApproved,
  .videoAdminShell{
    width:min(var(--rh-desktop-xl),calc(100vw - var(--rh-desktop-gutter)))!important;
    max-width:var(--rh-desktop-xl)!important;
  }
  .videoDetailLayoutApproved{grid-template-columns:minmax(0,1fr) 404px!important;gap:18px!important}

  /* Upload / generic cards should use the new space without typography changes. */
  .uploadPremiumPage .uploadCinematicPanel{padding-left:40px!important;padding-right:40px!important}
  .uploadPremiumPage .uploadGrid{gap:20px!important}

  /* Keep the global header on the same proven wide rail. */
  .approvedTopbar{
    padding-left:max(28px,calc((100vw - var(--rh-desktop-xl))/2))!important;
    padding-right:max(28px,calc((100vw - var(--rh-desktop-xl))/2))!important;
  }
}

/* =====================================================================
   v0.3.5.288 FIX8 — GLOBAL SURFACE HIERARCHY + DEPTH PASS
   Surface-only polish. Preserve FIX7 geometry, typography and cinematic art.
   Establish a restrained four-level dark hierarchy:
   page -> section -> card -> inner surface.
   ===================================================================== */
:root{
  --rh-depth-page:#05090b;
  --rh-depth-section-top:#0c1512;
  --rh-depth-section-bottom:#07100e;
  --rh-depth-card-top:#131d19;
  --rh-depth-card-bottom:#0b1311;
  --rh-depth-inner:#08110f;
  --rh-depth-line:rgba(205,222,213,.19);
  --rh-depth-line-soft:rgba(205,222,213,.105);
  --rh-depth-highlight:rgba(255,255,255,.034);
  --rh-depth-shadow:0 18px 44px rgba(0,0,0,.22);
  --rh-depth-shadow-soft:0 10px 28px rgba(0,0,0,.16);
}

/* PAGE — keep the black identity, add only a restrained central lift. */
html{background:#040809!important}
body{
  background:
    radial-gradient(1100px 470px at 50% -140px,rgba(76,108,88,.065),transparent 72%),
    radial-gradient(760px 560px at 7% 42%,rgba(35,70,55,.030),transparent 72%),
    var(--rh-depth-page)!important;
}
.approvedTopbar{
  background:rgba(4,9,9,.965)!important;
  border-bottom-color:rgba(190,207,198,.115)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.12)!important;
}

/* HOME — section / card / inner-row separation without changing dimensions. */
body.homePageActive .approvedHomeDashboard > .homePanel{
  background:linear-gradient(180deg,rgba(14,24,21,.97),rgba(7,14,12,.985))!important;
  border-color:var(--rh-depth-line)!important;
  box-shadow:var(--rh-depth-shadow),inset 0 1px 0 var(--rh-depth-highlight)!important;
}
body.homePageActive .approvedHomeDashboard .damageMiniCard,
body.homePageActive .approvedHomeDashboard .latestReplayRow,
body.homePageActive .approvedHomeDashboard .popularMiniCard{
  background:linear-gradient(180deg,rgba(13,22,19,.96),rgba(8,16,14,.985))!important;
  border-color:var(--rh-depth-line-soft)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.024),0 5px 15px rgba(0,0,0,.10)!important;
}
body.homePageActive .approvedHomeFeatures>div{
  background:linear-gradient(180deg,rgba(14,23,20,.96),rgba(8,15,13,.985))!important;
  border-color:rgba(199,218,208,.17)!important;
  box-shadow:var(--rh-depth-shadow-soft),inset 0 1px 0 rgba(255,255,255,.028)!important;
}
body.homePageActive .homeQuickFilters{
  background:rgba(6,12,11,.38)!important;
  border-color:rgba(199,218,208,.075)!important;
}
body.homePageActive .homeQuickFilter:not(.active){
  background:linear-gradient(180deg,rgba(12,20,18,.90),rgba(7,13,12,.94))!important;
  border-color:rgba(199,218,208,.13)!important;
}

/* REPLAYS — the archive stays black, cards now clearly sit above the page. */
.replaysDiscoveryPage.approvedReplaysMockup .replayCard,
.playerProfileFinalMockup .playerReplayGrid .replayCard{
  background:linear-gradient(158deg,var(--rh-depth-card-top),var(--rh-depth-card-bottom))!important;
  border-color:rgba(205,222,213,.20)!important;
  box-shadow:var(--rh-depth-shadow),inset 0 1px 0 rgba(255,255,255,.038)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replayCard:hover,
.playerProfileFinalMockup .playerReplayGrid .replayCard:hover{
  border-color:rgba(181,224,104,.34)!important;
  box-shadow:0 22px 48px rgba(0,0,0,.29),0 0 24px rgba(169,229,27,.030),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.replaysDiscoveryPage .replaysToolbar,
.replaysHeroBanner .replaysToolbar{
  background:linear-gradient(180deg,rgba(12,22,19,.96),rgba(7,14,12,.98))!important;
  border-color:rgba(205,222,213,.19)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.03)!important;
}
.replaysDiscoveryPage .replaysToolbar input,
.replaysDiscoveryPage .replaysToolbar select,
.replaysHeroBanner .replaysToolbar input,
.replaysHeroBanner .replaysToolbar select{
  background:var(--rh-depth-inner)!important;
  border-color:rgba(205,222,213,.15)!important;
}

/* PLAYER — keep the cinematic hero untouched; lift archive and KPI surfaces. */
.playerProfileFinalMockup .playerReplaySectionFinal{
  background:linear-gradient(180deg,rgba(12,21,18,.79),rgba(7,13,11,.72))!important;
  outline-color:rgba(199,218,208,.17)!important;
  box-shadow:0 20px 52px rgba(0,0,0,.21),inset 0 1px 0 rgba(255,255,255,.030)!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal{
  background:linear-gradient(180deg,rgba(12,22,18,.88),rgba(6,13,11,.96))!important;
  border-color:rgba(199,218,208,.21)!important;
}
.playerProfileFinalMockup .playerProfileKpisFinal>div>span{
  background:linear-gradient(180deg,rgba(14,24,20,.78),rgba(8,16,13,.72))!important;
  border-color:rgba(199,218,208,.14)!important;
}

/* BATTLE — preserve red/green life-state rows; improve only their container depth. */
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266,
.cinematicReplayPage > .cinematicReportShell .cinematicTabs.cinematicTabsV266:has(button[data-report-tab].active){
  background:linear-gradient(180deg,rgba(20,29,32,.97),rgba(10,17,20,.99))!important;
  border-top-color:rgba(205,219,213,.18)!important;
  border-bottom-color:rgba(205,219,213,.22)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.028)!important;
}
.battleTeamsPaneV247 .teamCardV247,
.wotDetailPanelV255{
  border-color:rgba(205,216,211,.22)!important;
  box-shadow:0 16px 36px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.battleTeamsPaneV247 .teamCardV247{
  background:radial-gradient(circle at 20% 0,rgba(255,255,255,.035),transparent 40%),linear-gradient(132deg,#202629 0%,#1a2022 52%,#151b1d 100%)!important;
}
.wotDetailPanelV255{
  background:radial-gradient(circle at 20% 0,rgba(255,255,255,.034),transparent 40%),linear-gradient(132deg,#202629 0%,#1a2022 52%,#151b1d 100%)!important;
}

/* VIDEO HUB — hero stays cinematic; toolbar/cards gain a clean vertical stack. */
.videoHubToolbarApproved{
  background:linear-gradient(180deg,rgba(12,22,19,.96),rgba(7,14,12,.985))!important;
  border-color:var(--rh-depth-line)!important;
  box-shadow:var(--rh-depth-shadow-soft),inset 0 1px 0 rgba(255,255,255,.030)!important;
}
.videoHubSearchApproved,
.videoHubSort{
  background:var(--rh-depth-inner)!important;
  border-color:rgba(205,222,213,.15)!important;
}
.videoHubCardApproved{
  background:linear-gradient(155deg,var(--rh-depth-card-top),var(--rh-depth-card-bottom))!important;
  border-color:rgba(205,222,213,.20)!important;
  box-shadow:var(--rh-depth-shadow),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.videoHubCardApproved:hover{
  border-color:rgba(181,224,104,.31)!important;
  box-shadow:0 22px 48px rgba(0,0,0,.28),0 0 22px rgba(169,229,27,.025),inset 0 1px 0 rgba(255,255,255,.04)!important;
}

/* VIDEO DETAIL — player is level 0; info/comments/rail are explicit level 2/3 surfaces. */
.videoDetailInfoInlineApproved,
.videoDetailReplayWidePanel,
.videoDetailRelatedPanel,
.videoYoutubeCommentsPanel,
.videoCommentsPanel{
  background:linear-gradient(150deg,rgba(14,24,21,.97),rgba(7,14,12,.985))!important;
  border-color:rgba(205,222,213,.18)!important;
  box-shadow:var(--rh-depth-shadow-soft),inset 0 1px 0 rgba(255,255,255,.029)!important;
}
.videoDetailReplayWideCard,
.videoDetailRelatedItem,
.videoYoutubeCommentRow{
  background:linear-gradient(180deg,rgba(11,20,17,.78),rgba(7,14,12,.82))!important;
  border-color:rgba(205,222,213,.09)!important;
}
.videoYoutubeCommentRow:hover{background:rgba(15,26,21,.90)!important}

/* ADMIN — distinguish the editor, picker and saved-video library at a glance. */
.videoAdminForm,
.videoAdminPicker,
.videoAdminLibrary{
  background:linear-gradient(150deg,rgba(14,24,21,.97),rgba(7,14,12,.985))!important;
  border-color:rgba(205,222,213,.19)!important;
  box-shadow:var(--rh-depth-shadow-soft),inset 0 1px 0 rgba(255,255,255,.030)!important;
}
.videoAdminReplayChoice,
.videoAdminForm input,
.videoAdminForm select,
.videoAdminPicker input,
.videoAdminReplayChips button{
  background:var(--rh-depth-inner)!important;
  border-color:rgba(205,222,213,.14)!important;
}
.videoAdminExisting{
  border-top-color:rgba(205,222,213,.105)!important;
}

/* UPLOAD / GENERIC DATA SURFACES — no layout changes, only depth. */
.uploadPremiumPage .uploadCinematicPanel,
.uploadSide,
.uploadStatus,
.toolbar,
.empty,
.recordsTable{
  background:linear-gradient(180deg,rgba(13,23,20,.96),rgba(7,14,12,.985))!important;
  border-color:rgba(205,222,213,.18)!important;
  box-shadow:var(--rh-depth-shadow-soft),inset 0 1px 0 rgba(255,255,255,.028)!important;
}
.dropzone{
  background:radial-gradient(circle at 50% 47%,rgba(169,229,27,.065),transparent 34%),linear-gradient(180deg,rgba(10,19,16,.96),rgba(6,13,11,.985))!important;
  border-color:rgba(205,222,213,.20)!important;
}
.toolbar input,.toolbar select{
  background:var(--rh-depth-inner)!important;
  border-color:rgba(205,222,213,.15)!important;
}

/* Keep brand accents semantic: no new lime/gold decoration is introduced here. */


/* =====================================================================
   v0.3.5.288 FIX9 — GLOBAL TYPOGRAPHY + READABILITY SCALE PASS
   Desktop readability-only pass on top of FIX8.
   Preserve FIX7 geometry and FIX8 surface hierarchy. Large hero titles and
   primary KPI values stay intentionally stable; only secondary / micro copy
   is lifted so 2K/4K desktop layouts remain readable at normal zoom.
   ===================================================================== */
@media (min-width:1600px){
  /* GLOBAL HEADER — small lift only; keep the approved header geometry. */
  .approvedTopbar .approvedNav a{
    font-size:11px!important;
    letter-spacing:.075em!important;
  }
  .approvedTopbar .approvedSearch input,
  .approvedTopbar .approvedSearch input::placeholder{
    font-size:10px!important;
  }

  /* HOME — make the dashboard's information layer readable without touching
     hero typography, big damage values or the FIX7 panel dimensions. */
  body.homePageActive .approvedHomeDashboard .panelTitle strong{
    font-size:11.6px!important;
  }
  body.homePageActive .approvedHomeDashboard .panelTitle .homePanelHeaderAction{
    font-size:8.8px!important;
  }
  body.homePageActive .damageIdentity small{
    font-size:9px!important;
    line-height:1.08!important;
  }
  body.homePageActive .damageScore small{
    font-size:6.8px!important;
  }
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestBody>strong{
    font-size:11.5px!important;
    line-height:1.08!important;
  }
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestBody>small{
    font-size:9px!important;
    line-height:1.32!important;
  }
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestStats span{
    font-size:7.6px!important;
    letter-spacing:.055em!important;
  }
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestOpen{
    font-size:8.2px!important;
  }
  body.homePageActive .popularMiniCard .popularIdentity>span{
    font-size:11.4px!important;
  }
  body.homePageActive .popularMiniCard .popularIdentity>small{
    font-size:6.8px!important;
    letter-spacing:.045em!important;
  }
  body.homePageActive .popularReplayCount b{
    font-size:11.2px!important;
  }
  body.homePageActive .popularReplayCount small{
    font-size:6.5px!important;
  }
  body.homePageActive .approvedHomeFeatures strong{
    font-size:11.7px!important;
  }
  body.homePageActive .approvedHomeFeatures p{
    font-size:8.7px!important;
    line-height:1.42!important;
  }

  /* REPLAYS — preserve 4-column cards, lift title/map/result and utility copy. */
  .replaysDiscoveryPage.approvedReplaysMockup .cardHeaderTank{
    font-size:13.3px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .cardHeaderMap{
    font-size:11.7px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .cardBattleStateOverlay strong{
    font-size:12.8px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .cardBattleStateOverlay small{
    font-size:6.9px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .statsRow.cardHudStats .cardHudValue small{
    font-size:6.8px!important;
    letter-spacing:.06em!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .cardFoot{
    font-size:9.5px!important;
    line-height:1.24!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .cardFoot .cardPlayerName{
    font-size:9.7px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .cardFoot .cardUploadDate{
    font-size:8.4px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .cardFoot b,
  .replaysDiscoveryPage.approvedReplaysMockup .cardFoot b i{
    font-size:9px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .catalogCount,
  .replaysDiscoveryPage.approvedReplaysMockup .catalogCount span,
  .replaysDiscoveryPage.approvedReplaysMockup .catalogPageInfo{
    font-size:9px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup .rhCustomSelectButton,
  .replaysDiscoveryPage.approvedReplaysMockup .replaySearchField input{
    font-size:10.8px!important;
  }

  /* PLAYER — hero stays cinematic; lift facts, captions and archive utility text. */
  .playerProfileFinalMockup .playerProfileFacts>span{
    font-size:11px!important;
  }
  .playerProfileFinalMockup .playerProfileHeroMain>p{
    font-size:10.8px!important;
    line-height:1.5!important;
  }
  .playerProfileFinalMockup .playerHeroBestTitle{
    font-size:9.6px!important;
  }
  .playerProfileFinalMockup .playerHeroBestIdentity>small{
    font-size:9.2px!important;
  }
  .playerProfileFinalMockup .playerHeroBestMetrics small{
    font-size:6.5px!important;
  }
  .playerProfileFinalMockup .playerProfileKpiCopy small{
    font-size:9px!important;
  }
  .playerProfileFinalMockup .playerProfileKpiCopy em{
    font-size:7.2px!important;
  }
  .playerProfileFinalMockup .approvedPlayerStats strong span,
  .playerProfileFinalMockup .approvedPlayerStats small span{
    font-size:7.7px!important;
  }
  .playerProfileFinalMockup .playerReplayGrid .cardHeaderTank{
    font-size:13.2px!important;
  }
  .playerProfileFinalMockup .playerReplayGrid .cardHeaderMap{
    font-size:11.5px!important;
  }
  .playerProfileFinalMockup .playerReplayGrid .statsRow.cardHudStats .cardHudValue small{
    font-size:6.8px!important;
  }
  .playerProfileFinalMockup .playerReplayGrid .cardFoot,
  .playerProfileFinalMockup .playerReplayGrid .cardFoot .cardPlayerName{
    font-size:9.5px!important;
  }
  .playerProfileFinalMockup .playerReplayGrid .cardFoot .cardUploadDate{
    font-size:8.3px!important;
  }

  /* BATTLE — values were already readable; only lift column labels and small chips. */
  .battleTeamsPaneV247 .teamColumnsV247 b{
    font-size:12.6px!important;
  }
  .battleTeamsPaneV247 .teamPlayerTextV247 em{
    font-size:9.6px!important;
  }
  .cinematicReplayPage .cinematicTabsV266 button,
  .cinematicReplayPage .cinematicTabsV266 button span,
  .cinematicReplayPage .cinematicTabsV266 button b,
  .cinematicReplayPage .cinematicTabsV266 button strong{
    font-size:13.5px!important;
  }

  /* VIDEO HUB — titles were acceptable; actions/source/meta were too quiet. */
  .videoHubCardBodyApproved>strong{
    font-size:12.2px!important;
    line-height:1.31!important;
  }
  .videoReplayMetaLine{
    font-size:8.7px!important;
  }
  .videoCardStatsRow small,
  .videoCardStatsRow .videoViewsValue{
    font-size:11.2px!important;
  }
  .videoCardStatsRow .videoDateValue{
    font-size:10px!important;
  }
  .videoWatchAction,
  .videoReplayAction{
    font-size:8.4px!important;
  }

  /* VIDEO DETAIL — right rail and comments need to scan as easily as main content. */
  .videoDetailRelatedItem strong{
    font-size:12px!important;
    line-height:1.32!important;
  }
  .videoDetailRelatedItem small{
    font-size:9.5px!important;
  }
  .videoDetailRelatedItem em{
    font-size:9.3px!important;
  }
  .videoDetailRelatedMeta .videoDateValue{
    font-size:9.8px!important;
  }
  .videoYoutubeCommentsHead strong{
    font-size:11.3px!important;
  }
  .videoYoutubeCommentsHead span{
    font-size:9px!important;
  }
  .videoYoutubeCommentTop strong,
  .videoYoutubeCommentTop a{
    font-size:10.8px!important;
  }
  .videoYoutubeCommentTop small{
    font-size:8.8px!important;
  }
  .videoYoutubeCommentBody p{
    font-size:10.6px!important;
    line-height:1.56!important;
  }

  /* ADMIN — keep the FIX5 desktop geometry, make every operational label readable. */
  .videoAdminHead .eyebrow{
    font-size:10.2px!important;
  }
  .videoAdminHead p{
    font-size:12.8px!important;
  }
  .videoAdminHead>a{
    font-size:11px!important;
  }
  .videoAdminForm label{
    font-size:11px!important;
  }
  .videoAdminForm label>small{
    font-size:9.5px!important;
  }
  .videoAdminCheck span{
    font-size:10.8px!important;
  }
  .videoAdminToken button,
  .videoAdminPickerHead button{
    font-size:10.7px!important;
  }
  .videoAdminSubmit{
    font-size:11.7px!important;
  }
  .videoAdminPickerHead>div strong,
  .videoAdminLibraryHead>div>strong{
    font-size:12.8px!important;
  }
  .videoAdminPickerHead>div span,
  .videoAdminLibraryHead>div>span{
    font-size:9.7px!important;
  }
  .videoAdminReplayChoice strong{
    font-size:11.7px!important;
  }
  .videoAdminReplayChoice small{
    font-size:9.4px!important;
  }
  .videoAdminExisting>div>strong{
    font-size:12.8px!important;
  }
  .videoAdminExisting>div>small,
  .videoAdminTranslationState{
    font-size:9.6px!important;
  }
  .videoAdminReplayChips button{
    font-size:8.8px!important;
  }
  .videoAdminExistingActions a,
  .videoAdminExistingActions button,
  .videoAdminLibraryHead>button{
    font-size:9.8px!important;
  }

  /* UPLOAD / GENERIC utility copy. */
  .uploadPremiumPage .pipeline p{
    font-size:10px!important;
    line-height:1.5!important;
  }
  .uploadPremiumPage .pipeline strong{
    font-size:11.5px!important;
  }
  .uploadPremiumPage .statusRow{
    font-size:10.8px!important;
  }
}

/* =====================================================================
   v0.3.5.288 FIX10 — GLOBAL HEADER TYPOGRAPHY + NAV SCALE LOCK
   One final desktop navigation contract for every FermaniHUB route.
   Supersedes historical page-scoped HOME/REPLAYS/BATTLE/VIDEO overrides
   without changing the approved header canvas or action controls.
   ===================================================================== */
:root{
  --rh-global-nav-font-size:12px;
  --rh-global-nav-weight:650;
  --rh-global-nav-tracking:.065em;
  --rh-global-nav-gap:34px;
}

@media (min-width:1051px){
  html body .approvedTopbar .approvedNav,
  html body.replaysPageActive .approvedTopbar .approvedNav{
    height:100%!important;
    display:flex!important;
    align-items:center!important;
    gap:var(--rh-global-nav-gap)!important;
  }

  html body .approvedTopbar .approvedNav > a,
  html body.replaysPageActive .approvedTopbar .approvedNav > a{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    align-self:center!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
    font-family:var(--approved-font)!important;
    font-size:var(--rh-global-nav-font-size)!important;
    font-weight:var(--rh-global-nav-weight)!important;
    line-height:1!important;
    letter-spacing:var(--rh-global-nav-tracking)!important;
    text-transform:uppercase!important;
    color:#c3c8c6!important;
  }

  html body .approvedTopbar .approvedNav > a:hover,
  html body.replaysPageActive .approvedTopbar .approvedNav > a:hover{
    color:#fff!important;
  }

  html body .approvedTopbar .approvedNav > a.active,
  html body .approvedTopbar .approvedNav > a[aria-current="page"],
  html body.replaysPageActive .approvedTopbar .approvedNav > a.active,
  html body.replaysPageActive .approvedTopbar .approvedNav > a[aria-current="page"]{
    color:#f3f6f4!important;
    text-shadow:0 0 16px rgba(169,229,27,.12)!important;
  }

  html body .approvedTopbar .approvedNav > a::after,
  html body.replaysPageActive .approvedTopbar .approvedNav > a::after,
  html body.replaysPageActive .approvedTopbar .approvedNav > a:nth-child(2)::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    right:50%!important;
    bottom:-25px!important;
    height:2px!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,#89c91c,#b7ef38)!important;
    box-shadow:0 0 12px rgba(169,229,27,.24)!important;
    opacity:0!important;
    transition:left .16s ease,right .16s ease,opacity .16s ease!important;
    pointer-events:none!important;
  }

  html body .approvedTopbar .approvedNav > a.active::after,
  html body .approvedTopbar .approvedNav > a[aria-current="page"]::after,
  html body.replaysPageActive .approvedTopbar .approvedNav > a.active::after,
  html body.replaysPageActive .approvedTopbar .approvedNav > a[aria-current="page"]::after{
    left:0!important;
    right:0!important;
    opacity:1!important;
  }
}

/* =====================================================================
   v0.3.5.288 FIX11 — VIDEO HERO FEATURED LIKE CHIP ALIGNMENT
   Lock the featured-video heart/count to the 30px desktop header rail so
   the 20px heart and numeric count share one true vertical center line.
   ===================================================================== */
@media (min-width:651px){
  .videoFeaturedCardApproved > .rhLike-featured{
    top:0!important;
    right:8px!important;
    height:30px!important;
    min-height:30px!important;
    padding:0 3px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:5px!important;
    line-height:1!important;
  }
  .videoFeaturedCardApproved > .rhLike-featured .rhLikeGlyph{
    align-self:center!important;
    margin:0!important;
    transform-origin:center center!important;
  }
  .videoFeaturedCardApproved > .rhLike-featured b[data-like-count]{
    height:20px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    padding:0!important;
    line-height:1!important;
  }
}


/* =====================================================================
   v0.3.5.289 — MOBILE + TABLET GLOBAL RESPONSIVE QA PASS
   Responsive-only layer on top of the approved FIX11 desktop system.
   Desktop XL (>=1600px), FIX8 depth, FIX9 readability and FIX10/FIX11
   contracts remain untouched. Breakpoints: 1200 / 980 / 700 / 480.
   ===================================================================== */

/* ---------- compact desktop / tablet landscape ---------- */
@media (max-width:1200px){
  :root{--rh-responsive-gutter:28px}
  .pageShell,.wrap,.assetNotice,.uploadPremiumPage,
  .replaysDiscoveryPage.approvedReplaysMockup,
  .playerProfilePage.playerProfileFinalMockup,
  .videoHubPageApproved,.videoDetailPageApproved,.videoAdminShell{
    width:calc(100% - var(--rh-responsive-gutter))!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* One stable compact header. */
  html body .approvedTopbar,
  html body.replaysPageActive .approvedTopbar{
    height:72px!important;
    grid-template-columns:176px minmax(330px,1fr) auto!important;
    gap:18px!important;
    padding-left:16px!important;
    padding-right:16px!important;
  }
  .approvedBrand{font-size:20px!important;gap:8px!important}
  .approvedBrand .brandWord{font-size:20px!important}
  .approvedBrandLogo{width:31px!important;height:37px!important}
  html body .approvedTopbar .approvedNav,
  html body.replaysPageActive .approvedTopbar .approvedNav{gap:20px!important}
  html body .approvedTopbar .approvedNav>a,
  html body.replaysPageActive .approvedTopbar .approvedNav>a{font-size:11px!important}
  html body .approvedTopbar .approvedNav>a::after,
  html body.replaysPageActive .approvedTopbar .approvedNav>a::after{bottom:-24px!important}
  .approvedHeaderActions{gap:9px!important}
  .approvedSearchBox{width:190px!important}
  .approvedLivePill{display:none!important}
  .approvedSignIn{height:36px!important;padding:0 13px!important;font-size:10px!important}
  .approvedAccountButton{max-width:150px!important}

  /* HOME */
  body.homePageActive{--home-canvas:calc(100% - var(--rh-responsive-gutter))!important}
  body.homePageActive .homeApprovedHero,
  body.homePageActive .homeQuickFilters,
  body.homePageActive .approvedHomeDashboard,
  body.homePageActive .approvedHomeFeatures{width:var(--home-canvas)!important;max-width:none!important}
  body.homePageActive .homeApprovedHero .heroInner{grid-template-columns:minmax(0,1fr) 390px!important;gap:20px!important}
  body.homePageActive .approvedHomeDashboard{grid-template-columns:1fr 1.18fr!important}
  body.homePageActive .approvedHomeDashboard .popularPanel{grid-column:1/-1!important}
  body.homePageActive .approvedHomeFeatures{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* REPLAYS */
  .approvedReplaysMockup .discoveryCardGrid,
  .replaysDiscoveryPage.approvedReplaysMockup .replaysGrid,
  .replaysDiscoveryPage.approvedReplaysMockup .cardGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
  .approvedReplaysMockup .approvedReplaysControlBar{grid-template-columns:minmax(250px,1.35fr) repeat(3,minmax(130px,.75fr))!important}

  /* PLAYER */
  .playerProfileFinalMockup .playerProfileHeroMain{max-width:52%!important}
  .playerProfileFinalMockup .playerHeroBestCard,
  .playerProfileFinalMockup .playerHeroBestCardCompact{right:20px!important;max-width:42%!important}
  .playerProfileFinalMockup .playerReplayGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}

  /* VIDEO */
  .videoHubGridApproved{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .videoDetailLayoutApproved{grid-template-columns:minmax(0,1fr) 330px!important;gap:13px!important}
}

/* ---------- tablet portrait ---------- */
@media (max-width:980px){
  :root{--rh-responsive-gutter:24px}

  /* Two-row global header: identity/actions above, all navigation below. */
  html body .approvedTopbar,
  html body.replaysPageActive .approvedTopbar{
    height:112px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:64px 48px!important;
    grid-template-areas:"brand actions" "nav nav"!important;
    gap:0 12px!important;
    padding:0 14px!important;
  }
  .approvedBrand{grid-area:brand!important;align-self:center!important;justify-self:start!important}
  .approvedHeaderActions{grid-area:actions!important;height:64px!important;align-self:center!important;gap:8px!important}
  html body .approvedTopbar .approvedNav,
  html body.replaysPageActive .approvedTopbar .approvedNav{
    grid-area:nav!important;
    width:100%!important;
    height:48px!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:0!important;
    align-items:center!important;
    border-top:1px solid rgba(205,222,213,.075)!important;
  }
  html body .approvedTopbar .approvedNav>a,
  html body.replaysPageActive .approvedTopbar .approvedNav>a{
    display:flex!important;
    visibility:visible!important;
    align-items:center!important;
    justify-content:center!important;
    height:48px!important;
    font-size:11px!important;
    white-space:nowrap!important;
  }
  html body .approvedTopbar .approvedNav>a:nth-child(n){display:flex!important}
  html body .approvedTopbar .approvedNav>a::after,
  html body.replaysPageActive .approvedTopbar .approvedNav>a::after{bottom:0!important;height:2px!important}
  .approvedSearchBox,.approvedLivePill{display:none!important}
  .approvedAccountButton{max-width:132px!important;height:34px!important;padding:0 9px!important}
  .approvedAuthLogout{display:none!important}
  .approvedAdminEntry{height:32px!important}

  /* HOME becomes an intentional vertical dashboard. */
  body.homePageActive .homeApprovedHero{height:auto!important;min-height:0!important}
  body.homePageActive .homeApprovedHero .heroInner{
    min-height:0!important;height:auto!important;display:grid!important;grid-template-columns:1fr!important;
    gap:18px!important;padding:24px 18px 20px!important;
  }
  body.homePageActive .homeApprovedHero .heroCopy{
    position:relative!important;inset:auto!important;width:100%!important;max-width:620px!important;height:auto!important;padding:8px 0 0!important;
  }
  body.homePageActive .homeApprovedHero .heroCopy h1{font-size:clamp(42px,8vw,62px)!important}
  body.homePageActive .homeApprovedHero .heroMetrics{width:100%!important;max-width:620px!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;margin:18px 0 0!important}
  body.homePageActive .approvedTopBattle{
    position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;margin:0!important;align-self:auto!important;
  }
  body.homePageActive .homeQuickFilters{overflow-x:auto!important;display:grid!important;grid-template-columns:repeat(5,minmax(120px,1fr))!important;gap:7px!important;padding-bottom:3px!important;scrollbar-width:thin}
  body.homePageActive .approvedHomeDashboard{grid-template-columns:1fr!important;gap:12px!important}
  body.homePageActive .approvedHomeDashboard .popularPanel{grid-column:auto!important}
  body.homePageActive .approvedHomeDashboard>.homePanel{height:auto!important;max-height:none!important;min-height:0!important}
  body.homePageActive .approvedHomeDashboard .damageList,
  body.homePageActive .approvedHomeDashboard .popularList,
  body.homePageActive .approvedHomeDashboard .latestGrid{height:auto!important;max-height:none!important;min-height:0!important}
  body.homePageActive .approvedHomeFeatures{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* REPLAYS: 2 columns, filters get their own rows. */
  .approvedReplaysMockup .replaysHeroBanner{height:auto!important;min-height:300px!important}
  .approvedReplaysMockup .replaysHeroContent{min-height:300px!important;padding:28px 22px 92px!important}
  .approvedReplaysMockup .approvedReplaysControlBar{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:8px!important;
  }
  .approvedReplaysMockup .approvedReplaysControlBar .replaySearchField{grid-column:1/-1!important}
  .approvedReplaysMockup .discoveryCardGrid,
  .replaysDiscoveryPage.approvedReplaysMockup .replaysGrid,
  .replaysDiscoveryPage.approvedReplaysMockup .cardGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* PLAYER: hero content above best battle; archive 2 columns. */
  .playerProfileFinalMockup .playerProfileHeroFinal{height:auto!important;min-height:640px!important;padding:24px 18px 18px!important;overflow:hidden!important}
  .playerProfileFinalMockup .playerProfileHeroMain{
    position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:62%!important;z-index:4!important;
  }
  .playerProfileFinalMockup .playerHeroBestCard,
  .playerProfileFinalMockup .playerHeroBestCardCompact{
    position:absolute!important;left:18px!important;right:18px!important;top:auto!important;bottom:112px!important;width:auto!important;max-width:none!important;
  }
  .playerProfileFinalMockup .playerProfileKpisFinal{grid-template-columns:repeat(3,minmax(0,1fr))!important;height:auto!important}
  .playerProfileFinalMockup .playerReplayGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* BATTLE: team cards stack; report remains full-width. */
  .cinematicReplayPage{width:calc(100% - var(--rh-responsive-gutter))!important;max-width:none!important}
  .cinematicReplayPage>.cinematicReportShell{width:100%!important;max-width:none!important}
  .cinematicReplayPage .battleTeamsGridV247{grid-template-columns:1fr!important;gap:12px!important}
  .cinematicReplayPage .cinematicTabs,
  .cinematicReplayPage>.cinematicReportShell .cinematicTabs.cinematicTabsV266{width:100%!important;max-width:none!important}
  .battleTeamsFooterV247{gap:12px!important}

  /* VIDEO Hub/Detail: two cards; detail sidebar moves below main. */
  .videoHubGridApproved{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .videoDetailLayoutApproved{grid-template-columns:1fr!important;gap:14px!important}
  .videoDetailSideApproved{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important}
  .videoDetailSideApproved>*{min-width:0!important}

  /* UPLOAD / ADMIN */
  .uploadPremiumPage .uploadGrid{grid-template-columns:1fr!important}
  .videoAdminShell{margin-top:12px!important}
  .videoAdminHead{min-height:0!important;padding:22px!important}
  .videoAdminHead h1{font-size:34px!important}
  .videoAdminGrid{grid-template-columns:1fr!important;gap:12px!important}
  .videoAdminReplayChoices{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-height:440px!important}
  .videoAdminExisting{grid-template-columns:140px minmax(0,1fr)!important}
  .videoAdminExisting>img{width:140px!important}
  .videoAdminExistingActions{grid-column:2!important;justify-content:flex-start!important;flex-wrap:wrap!important}
}

/* ---------- mobile ---------- */
@media (max-width:700px){
  :root{--rh-responsive-gutter:18px}
  body{overflow-x:hidden!important}

  html body .approvedTopbar,
  html body.replaysPageActive .approvedTopbar{height:104px!important;grid-template-rows:58px 46px!important;padding:0 9px!important}
  .approvedBrand{font-size:17px!important;gap:6px!important}
  .approvedBrand .brandWord{font-size:17px!important}
  .approvedBrandLogo{width:27px!important;height:32px!important}
  .approvedHeaderActions{height:58px!important;gap:5px!important}
  .approvedLanguageSlot .rhLanguageButton,.rhLanguageButton{height:32px!important;min-width:42px!important;padding:0 8px!important}
  .approvedSignIn{height:34px!important;padding:0 10px!important;font-size:9px!important}
  .approvedAccountButton{max-width:106px!important;height:32px!important;padding:0 7px!important;font-size:8px!important}
  .approvedAccountWG{display:none!important}
  .approvedAdminEntry{height:30px!important;width:30px!important;padding:0!important}
  .approvedAdminEntry>span:last-child{display:none!important}
  html body .approvedTopbar .approvedNav,
  html body.replaysPageActive .approvedTopbar .approvedNav{height:46px!important}
  html body .approvedTopbar .approvedNav>a,
  html body.replaysPageActive .approvedTopbar .approvedNav>a{height:46px!important;font-size:9.5px!important;letter-spacing:.035em!important}

  /* HOME */
  body.homePageActive .homeApprovedHero .heroInner{padding:18px 12px 14px!important}
  body.homePageActive .homeApprovedHero .heroCopy h1{font-size:42px!important;line-height:.92!important}
  body.homePageActive .homeApprovedHero .heroCopy p{font-size:11px!important;line-height:1.48!important}
  body.homePageActive .heroButtons{width:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  body.homePageActive .heroButtons .button{justify-content:center!important;min-width:0!important;padding-left:8px!important;padding-right:8px!important}
  body.homePageActive .homeApprovedHero .heroMetrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.homePageActive .approvedTopBattle{padding:12px!important}
  body.homePageActive .topBattleFeature{grid-template-columns:minmax(0,1fr)!important}
  body.homePageActive .homeQuickFilters{grid-template-columns:repeat(5,minmax(104px,1fr))!important}
  body.homePageActive .approvedHomeFeatures{grid-template-columns:1fr!important}
  body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid{grid-auto-rows:auto!important}
  body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid>.latestCard.latestReplayRow,
  body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid>.latestCard.latestReplayRow:has(.latestAwards){
    grid-template-columns:92px minmax(0,1fr)!important;grid-template-rows:minmax(78px,auto)!important;height:auto!important;min-height:78px!important;
  }
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestStats{display:none!important}
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRow .latestOpen{display:none!important}

  /* REPLAYS */
  .approvedReplaysMockup .replaysHeroBanner{min-height:250px!important}
  .approvedReplaysMockup .replaysHeroContent{min-height:250px!important;padding:22px 15px 108px!important}
  .approvedReplaysMockup .pageTitle{font-size:44px!important}
  .approvedReplaysMockup .replaysPageSub{max-width:75%!important}
  .approvedReplaysMockup .approvedReplaysControlBar{grid-template-columns:1fr!important;gap:7px!important}
  .approvedReplaysMockup .approvedReplaysControlBar .replaySearchField{grid-column:auto!important}
  .approvedReplaysMockup .discoveryCardGrid,
  .replaysDiscoveryPage.approvedReplaysMockup .replaysGrid,
  .replaysDiscoveryPage.approvedReplaysMockup .cardGrid{grid-template-columns:1fr!important;gap:10px!important}
  .approvedReplaysMockup .replayCard .art{height:auto!important;aspect-ratio:16/7.7!important;min-height:176px!important}

  /* PLAYER */
  .playerProfileFinalMockup .playerProfileHeroFinal{min-height:720px!important;padding:18px 12px 12px!important}
  .playerProfileFinalMockup .playerProfileHeroMain{max-width:100%!important;padding-right:0!important}
  .playerProfileFinalMockup .playerProfileNameLine{align-items:flex-start!important;flex-wrap:wrap!important;gap:8px!important}
  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:40px!important;overflow-wrap:anywhere!important}
  .playerProfileFinalMockup .playerProfileFacts{flex-wrap:wrap!important;gap:9px 12px!important}
  .playerProfileFinalMockup .playerProfileHeroActions{flex-wrap:wrap!important}
  .playerProfileFinalMockup .playerHeroBestCard,
  .playerProfileFinalMockup .playerHeroBestCardCompact{left:12px!important;right:12px!important;bottom:132px!important}
  .playerProfileFinalMockup .playerHeroMasteryFinal{right:14px!important;top:24px!important;transform:scale(.82)!important;transform-origin:top right!important}
  .playerProfileFinalMockup .playerProfileKpisFinal{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .playerProfileFinalMockup .playerProfileKpisFinal>.replay-wins{grid-column:1/-1!important}
  .playerProfileFinalMockup .playerReplayGrid{grid-template-columns:1fr!important}
  .playerProfileFinalMockup .playerReplayHeader{align-items:flex-start!important;flex-wrap:wrap!important;gap:6px!important}

  /* BATTLE hero: give each data rail enough vertical room. */
  .cinematicReplayPage{width:calc(100% - var(--rh-responsive-gutter))!important}
  .approvedReplayHero{height:980px!important;min-height:980px!important}
  .approvedHeroTop{left:13px!important;right:13px!important;top:16px!important;align-items:flex-start!important}
  .approvedBattleMeta{font-size:10px!important;gap:7px!important;flex-wrap:wrap!important;max-width:62%!important}
  .approvedHeroActions{gap:6px!important}
  .approvedHeroActions .approvedAction{width:36px!important;height:36px!important;padding:0!important;justify-content:center!important}
  .approvedHeroActions .approvedAction span{display:none!important}
  .approvedHeroCopy{left:14px!important;right:14px!important;top:70px!important;width:auto!important}
  .approvedTankTitle{height:auto!important;min-height:40px!important;gap:8px!important}
  .approvedTankTitle>strong{font-size:30px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .approvedHeroCopy h1{font-size:50px!important;margin-top:14px!important}
  .approvedAwardsRail{height:62px!important;gap:7px!important;overflow:hidden!important}
  .approvedAward{width:48px!important;height:48px!important;flex:0 0 48px!important}
  .approvedAward.mastery{width:60px!important;height:58px!important;flex-basis:60px!important}
  .approvedHeroTank{top:260px!important;right:-9%!important;width:92%!important;height:270px!important;opacity:.88!important}
  .approvedHeroPrimaryStats{left:12px!important;right:12px!important;bottom:302px!important;width:auto!important;height:150px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .approvedHeroMetric{min-width:0!important;padding:0 10px!important;gap:8px!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
  .approvedHeroMetric strong{font-size:22px!important}
  .approvedHeroMetric small{font-size:7px!important}
  .approvedEconomyCards{left:12px!important;right:12px!important;bottom:208px!important;width:auto!important;height:84px!important;min-width:0!important}
  .approvedEconomy{padding:9px 11px!important}
  .approvedEconomy>strong{font-size:21px!important}
  .approvedSubMetrics{left:12px!important;right:12px!important;bottom:12px!important;height:184px!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:repeat(2,1fr)!important}
  .approvedSubMetrics>div{min-width:0!important;padding:0 7px!important;border-bottom:1px solid rgba(255,255,255,.07)!important}
  .approvedSubMetrics strong{font-size:15px!important}
  .approvedSubMetrics small{font-size:6.5px!important;white-space:normal!important}
  .cinematicReplayPage>.cinematicReportShell .cinematicTabs.cinematicTabsV266{height:58px!important}
  .cinematicReplayPage>.cinematicReportShell .cinematicTabs.cinematicTabsV266 button{font-size:11px!important;padding:0 8px!important}
  .battleTeamsPaneV247 .teamColumnsV247,
  .battleTeamsPaneV247 .teamRowV247{grid-template-columns:minmax(0,1.30fr) minmax(0,.82fr) repeat(4,minmax(32px,.34fr))!important;column-gap:4px!important;padding-left:7px!important;padding-right:7px!important}
  .battleTeamsPaneV247 .teamColumnsV247 b{font-size:9px!important}
  .battleTeamsPaneV247 .teamColumnIconV247{width:14px!important;height:14px!important;flex-basis:14px!important}
  .battleTeamsPaneV247 .teamPlayerV247{gap:5px!important}
  .battleTeamsPaneV247 .teamTopTrophyV247{width:22px!important;height:22px!important;flex-basis:22px!important}
  .battleTeamsPaneV247 .teamTankThumbV247{display:none!important}
  .battleTeamsPaneV247 .teamPlayerTextV247 strong,
  .battleTeamsPaneV247 .teamVehicleV247>strong,
  .battleTeamsPaneV247 .teamNumV247{font-size:10.5px!important}
  .battleTeamsPaneV247 .teamPlayerTextV247 strong span{font-size:8px!important}
  .battleTeamsPaneV247 .teamPlayerTextV247 em{height:16px!important;padding:0 4px!important;font-size:7px!important}
  .teamHeadV247{padding:0 9px!important}
  .teamTitleV247 h3{font-size:18px!important}
  .teamSummaryV247{gap:8px!important}
  .teamSummaryMetricV247 b,.teamResultV247{font-size:12px!important}
  .battleTeamsFooterV247{padding:10px!important;gap:10px!important;flex-direction:column!important}
  .battleTeamsFooterV247>button{min-width:0!important;width:100%!important}

  /* VIDEO HUB */
  .videoHubHeroApproved{height:auto!important;min-height:560px!important;background-position:60% 50%!important}
  .videoHubHeroCopyApproved{width:calc(100% - 28px)!important;max-width:none!important;padding:26px 0 0 16px!important}
  .videoHubHeroCopyApproved h1{font-size:34px!important}
  .videoHeroSideApproved{left:14px!important;right:14px!important;bottom:14px!important;width:auto!important}
  .videoHubToolbarApproved{grid-template-columns:1fr!important;gap:7px!important;padding:7px!important}
  .videoHubModes{width:100%!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .videoHubSort{width:100%!important}
  .videoHubGridApproved{grid-template-columns:1fr!important;gap:10px!important}

  /* VIDEO DETAIL */
  .videoDetailPageApproved{width:calc(100% - var(--rh-responsive-gutter))!important;margin-top:10px!important}
  .videoDetailSideApproved{grid-template-columns:1fr!important}
  .videoDetailInfoInlineApproved{padding:13px!important}
  .videoDetailInfoCopy h1{font-size:18px!important;overflow-wrap:anywhere!important}
  .videoDetailMetaInline{flex-wrap:wrap!important;white-space:normal!important}
  .videoDetailActionsApproved{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  .videoDetailAction{width:100%!important;justify-content:center!important}
  .videoDetailReplayWideMain{grid-template-columns:72px minmax(0,1fr)!important}
  .videoDetailReplayWideDamage{grid-column:2!important;justify-self:start!important;min-width:0!important;margin-top:5px!important}
  .videoDetailReplayWideFoot{flex-wrap:wrap!important;gap:8px!important}
  .videoDetailRelatedItem{grid-template-columns:112px minmax(0,1fr)!important}
  .videoDetailRelatedThumb{width:112px!important}
  .videoYoutubeCommentsHead{align-items:flex-start!important;flex-direction:column!important;gap:8px!important;padding:11px!important}
  .videoCommentSort{width:100%!important}.videoCommentSort button{flex:1!important}
  .videoYoutubeCommentRow{grid-template-columns:38px minmax(0,1fr)!important;padding:12px!important;gap:9px!important}

  /* UPLOAD */
  .uploadPremiumPage{width:calc(100% - var(--rh-responsive-gutter))!important;padding-top:10px!important}
  .uploadPremiumPage .uploadCinematicPanel{padding:22px 13px 14px!important}
  .uploadPremiumPage .pageTitle{font-size:40px!important;overflow-wrap:anywhere!important}
  .uploadPremiumPage .uploadTrustStrip{grid-template-columns:1fr!important}
  .uploadPremiumPage .dropzone{min-height:270px!important;padding:20px 13px!important}

  /* ADMIN */
  .videoAdminShell{width:calc(100% - var(--rh-responsive-gutter))!important;margin-bottom:42px!important}
  .videoAdminHead{padding:17px!important;display:block!important}
  .videoAdminHead h1{font-size:28px!important;overflow-wrap:anywhere!important}
  .videoAdminHead>a{display:inline-flex!important;margin-top:12px!important}
  .videoAdminForm{padding:13px!important}
  .videoAdminFormRow{grid-template-columns:1fr!important}
  .videoAdminCheck{padding-top:3px!important}
  .videoAdminPickerHead{align-items:stretch!important;flex-direction:column!important}
  .videoAdminPickerHead label{grid-template-columns:minmax(0,1fr) auto!important;width:100%!important}
  .videoAdminReplayChoices{grid-template-columns:1fr!important;padding:9px!important}
  .videoAdminLibrary{padding:10px!important}
  .videoAdminLibraryHead{align-items:flex-start!important;gap:9px!important;flex-direction:column!important}
  .videoAdminExisting{grid-template-columns:104px minmax(0,1fr)!important;gap:9px!important;padding:10px 4px!important}
  .videoAdminExisting>img{width:104px!important}
  .videoAdminExistingActions{grid-column:1/-1!important;justify-content:flex-start!important}

  .rhLikeLoginPrompt{width:min(calc(100% - 18px),430px)!important;left:9px!important;right:9px!important;bottom:9px!important}
}

/* ---------- narrow phones ---------- */
@media (max-width:480px){
  :root{--rh-responsive-gutter:12px}
  .approvedBrand .brandWord{font-size:15.5px!important}
  .approvedBrandLogo{width:25px!important;height:30px!important}
  .approvedHeaderActions{gap:4px!important}
  .approvedLanguageSlot .rhLanguageButton,.rhLanguageButton{min-width:38px!important;padding:0 6px!important;font-size:8px!important}
  .approvedSignIn{padding:0 8px!important}
  .approvedAccountButton{max-width:86px!important}
  html body .approvedTopbar .approvedNav>a,
  html body.replaysPageActive .approvedTopbar .approvedNav>a{font-size:8.7px!important}

  body.homePageActive .heroButtons{grid-template-columns:1fr!important}
  body.homePageActive .homeApprovedHero .heroCopy h1{font-size:38px!important}
  body.homePageActive .homeApprovedHero .heroMetrics{gap:6px!important}

  .approvedReplaysMockup .pageTitle{font-size:39px!important}
  .approvedReplaysMockup .replaysPageSub{max-width:88%!important}

  .playerProfileFinalMockup .playerProfileNameLine h1{font-size:34px!important}
  .playerProfileFinalMockup .playerProfileKpisFinal{grid-template-columns:1fr 1fr!important}

  .approvedBattleMeta{max-width:58%!important;font-size:9px!important}
  .approvedHeroCopy h1{font-size:44px!important}
  .battleTeamsPaneV247 .teamColumnsV247,
  .battleTeamsPaneV247 .teamRowV247{grid-template-columns:minmax(0,1.15fr) minmax(0,.72fr) repeat(4,minmax(28px,.31fr))!important;column-gap:3px!important;padding-left:5px!important;padding-right:5px!important}
  .battleTeamsPaneV247 .teamColumnsV247>span:nth-child(2) .teamColumnIconV247{display:none!important}
  .battleTeamsPaneV247 .teamColumnsV247 b{font-size:8px!important}
  .battleTeamsPaneV247 .teamPlayerTextV247 strong,
  .battleTeamsPaneV247 .teamVehicleV247>strong,
  .battleTeamsPaneV247 .teamNumV247{font-size:9.5px!important}

  .videoHubHeroCopyApproved h1{font-size:30px!important}
  .videoDetailRelatedItem{grid-template-columns:96px minmax(0,1fr)!important}
  .videoDetailRelatedThumb{width:96px!important}
  .videoYoutubeCommentAvatar{width:34px!important;height:34px!important}

  .videoAdminPickerHead label{grid-template-columns:1fr!important}
  .videoAdminPickerHead button{width:100%!important}
  .videoAdminExisting{grid-template-columns:86px minmax(0,1fr)!important}
  .videoAdminExisting>img{width:86px!important}
}


/* =====================================================================
   v0.3.5.290 — EMPTY / ERROR / EDGE STATES UI PASS
   Unified branded states; no raw browser/server errors as primary UI.
   ===================================================================== */
.rhEdgePage{min-height:clamp(360px,58vh,620px);display:grid;place-items:center;padding-top:42px!important;padding-bottom:42px!important}
.rhEdgeVideoPage{width:min(1672px,calc(100% - 40px));margin:0 auto;min-height:58vh;display:grid;place-items:center;padding:38px 0}
.rhEdgeState{--edge-accent:#a9e51b;width:min(760px,100%);min-height:260px;display:grid;grid-template-columns:88px 1fr;grid-template-areas:"glyph copy" "glyph actions";column-gap:24px;row-gap:18px;align-content:center;padding:34px 38px;border:1px solid rgba(205,222,213,.18);border-radius:10px;background:radial-gradient(circle at 10% 20%,color-mix(in srgb,var(--edge-accent) 7%,transparent),transparent 28%),linear-gradient(145deg,rgba(15,26,22,.98),rgba(6,13,11,.99));box-shadow:0 28px 75px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.035);position:relative;overflow:hidden}
.rhEdgeState:after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,var(--edge-accent),transparent);opacity:.62}
.rhEdgeGlyph{grid-area:glyph;width:78px;height:78px;border:1px solid color-mix(in srgb,var(--edge-accent) 33%,#34423b);border-radius:9px;background:linear-gradient(145deg,color-mix(in srgb,var(--edge-accent) 8%,#111a17),#07100d);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 12px 30px rgba(0,0,0,.26)}
.rhEdgeGlyph i{width:26px;height:26px;border:2px solid var(--edge-accent);border-radius:50%;position:relative;opacity:.9}
.rhEdgeGlyph i:before,.rhEdgeGlyph i:after{content:"";position:absolute;left:50%;top:50%;background:var(--edge-accent);transform:translate(-50%,-50%);border-radius:2px}.rhEdgeGlyph i:before{width:12px;height:2px}.rhEdgeGlyph i:after{width:2px;height:12px}
.rhEdgeCopy{grid-area:copy;align-self:end}.rhEdgeEyebrow{display:block;color:var(--edge-accent);font-size:10.5px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;margin-bottom:7px}.rhEdgeCopy>strong{display:block;color:#edf3ef;font-family:var(--approved-font,Arial,sans-serif);font-size:24px;line-height:1.08;letter-spacing:.01em}.rhEdgeCopy p{margin:9px 0 0;max-width:620px;color:#92a099;font-size:12px;line-height:1.6}.rhEdgeCopy small{display:block;margin-top:9px;color:#67766f;font-size:11.5px;line-height:1.45}
.rhEdgeActions{grid-area:actions;display:flex;gap:9px;align-self:start}.rhEdgeButton{min-height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 15px;border:1px solid rgba(205,222,213,.18);border-radius:5px;background:#0d1714;color:#bec9c3;text-decoration:none;text-transform:uppercase;font-size:10.5px;font-weight:900;letter-spacing:.055em;cursor:pointer}.rhEdgeButton:hover{border-color:rgba(169,229,27,.42);color:#e8f6d1}.rhEdgeButton.primary{border-color:color-mix(in srgb,var(--edge-accent) 43%,#3a493f);background:linear-gradient(180deg,color-mix(in srgb,var(--edge-accent) 17%,#152017),#0d1711);color:#dcf2b0}
.rhEdge-warning{--edge-accent:#e8b94e}.rhEdge-error{--edge-accent:#e46363}.rhEdge-missing{--edge-accent:#d2a85a}.rhEdge-offline{--edge-accent:#8ea59b}.rhEdge-service{--edge-accent:#d8b45a}.rhEdge-auth{--edge-accent:#a9e51b}.rhEdge-processing{--edge-accent:#8fc6dd}.rhEdge-empty{--edge-accent:#7f948a}
.rhEdge-processing .rhEdgeGlyph i{border-style:dashed;animation:rhEdgeSpin 1.6s linear infinite}.rhEdge-processing .rhEdgeGlyph i:before,.rhEdge-processing .rhEdgeGlyph i:after{display:none}@keyframes rhEdgeSpin{to{transform:rotate(360deg)}}
.rhEdgeState.compact{width:100%;min-height:158px;grid-template-columns:54px 1fr;column-gap:16px;row-gap:12px;padding:22px 24px;border-radius:7px}.rhEdgeState.compact .rhEdgeGlyph{width:48px;height:48px;border-radius:6px}.rhEdgeState.compact .rhEdgeGlyph i{width:18px;height:18px}.rhEdgeState.compact .rhEdgeCopy>strong{font-size:16px}.rhEdgeState.compact .rhEdgeCopy p{font-size:11.5px;line-height:1.5}.rhEdgeState.compact .rhEdgeEyebrow{font-size:9px;margin-bottom:4px}.rhEdgeState.compact .rhEdgeButton{min-height:32px;font-size:9px;padding:0 11px}
.discoveryCardGrid>.rhEdgeState,.playerReplayGrid>.rhEdgeState,.videoHubGridApproved>.rhEdgeState{grid-column:1/-1}
.uploadEdgeHost{margin-top:12px}.uploadEdgeHost .rhEdgeState{min-height:132px}.recordsTable>.rhEdgeState{margin:18px;width:calc(100% - 36px)}
.tankAssetFallback{width:100%;height:100%;min-height:24px;display:grid;place-items:center;text-align:center;padding:4px;color:#65736c;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:radial-gradient(circle at 50% 70%,rgba(169,229,27,.055),transparent 48%)}
.approvedAwardsRail.emptyAwards .awardRailEmpty{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border:1px dashed rgba(205,222,213,.13);border-radius:4px;background:rgba(8,15,13,.56);color:#74817a;font-size:9px;letter-spacing:.04em}
.approvedAuthUnavailable{opacity:.62;cursor:default!important;border-style:dashed!important}
@media(max-width:700px){.rhEdgePage{min-height:420px;padding-top:20px!important}.rhEdgeVideoPage{width:calc(100% - 24px)}.rhEdgeState{grid-template-columns:1fr;grid-template-areas:"glyph" "copy" "actions";padding:26px 22px;min-height:0}.rhEdgeGlyph{width:58px;height:58px}.rhEdgeCopy>strong{font-size:20px}.rhEdgeActions{flex-wrap:wrap}.rhEdgeState.compact{grid-template-columns:44px 1fr;grid-template-areas:"glyph copy" "actions actions";padding:18px}.rhEdgeState.compact .rhEdgeCopy>strong{font-size:14px}}


/* =====================================================================
   v0.3.5.292 FIX1 — SEO VISIBLE CONTENT + SEMANTIC LANDING FOUNDATION
   Human-readable HOME explanation that doubles as crawlable semantic copy.
   No keyword stuffing; preserve the approved dark cinematic design.
   ===================================================================== */
body.homePageActive .homeSeoLanding{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:min(1210px,calc(100% - 40px));
  margin:20px auto 0;
  padding:28px 30px 26px;
  border:1px solid var(--rh-depth-line,rgba(205,222,213,.19));
  border-radius:8px;
  background:linear-gradient(180deg,rgba(13,23,20,.98),rgba(7,14,12,.99));
  box-shadow:var(--rh-depth-shadow,0 18px 44px rgba(0,0,0,.22)),inset 0 1px 0 rgba(255,255,255,.035);
}
body.homePageActive .homeSeoLandingGlow{
  position:absolute;
  z-index:-1;
  width:520px;
  height:300px;
  right:-120px;
  top:-165px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(169,229,27,.075),rgba(169,229,27,.018) 42%,transparent 72%);
  pointer-events:none;
}
body.homePageActive .homeSeoHeader{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
  gap:54px;
  align-items:end;
}
body.homePageActive .homeSeoEyebrow{
  color:#9eaaa4;
  font-size:9px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
body.homePageActive .homeSeoEyebrow:before{
  content:"";
  display:inline-block;
  width:22px;
  height:2px;
  margin-right:9px;
  vertical-align:middle;
  background:var(--green);
  box-shadow:0 0 14px rgba(169,229,27,.16);
}
body.homePageActive .homeSeoHeading h2{
  max-width:760px;
  margin:10px 0 0;
  color:#f0f5f2;
  font-size:clamp(25px,2vw,34px);
  line-height:1.06;
  letter-spacing:-.035em;
  text-transform:uppercase;
}
body.homePageActive .homeSeoLead{
  display:grid;
  gap:7px;
  max-width:720px;
}
body.homePageActive .homeSeoLead p{
  margin:0;
  color:#9aa7a1;
  font-size:12.5px;
  line-height:1.62;
}
body.homePageActive .homeSeoGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:22px;
}
body.homePageActive .homeSeoCard{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:11px;
  min-height:112px;
  padding:16px 15px;
  border:1px solid var(--rh-depth-line-soft,rgba(205,222,213,.105));
  border-radius:6px;
  background:linear-gradient(180deg,rgba(18,29,25,.72),rgba(8,16,14,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.022);
}
body.homePageActive .homeSeoCardIcon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(169,229,27,.15);
  border-radius:5px;
  background:rgba(169,229,27,.035);
}
body.homePageActive .homeSeoHudIcon{width:19px!important;height:19px!important;opacity:.86}
body.homePageActive .homeSeoCard h3{
  margin:1px 0 6px;
  color:#e9efec;
  font-size:11.5px;
  line-height:1.22;
  letter-spacing:.045em;
  text-transform:uppercase;
}
body.homePageActive .homeSeoCard p{
  margin:0;
  color:#7f8d86;
  font-size:10.5px;
  line-height:1.52;
}
@media (min-width:1600px){
  body.homePageActive .homeSeoLanding{
    width:var(--home-canvas)!important;
    max-width:var(--rh-desktop-xl)!important;
    padding-left:30px;
    padding-right:30px;
  }
  body.homePageActive .homeSeoHeading h2{font-size:36px}
  body.homePageActive .homeSeoLead p{font-size:12px}
  body.homePageActive .homeSeoCard{min-height:118px;padding:18px 17px}
  body.homePageActive .homeSeoCard h3{font-size:11px}
  body.homePageActive .homeSeoCard p{font-size:10px}
}
@media (max-width:1200px){
  body.homePageActive .homeSeoLanding{width:min(100% - 32px,1210px)}
  body.homePageActive .homeSeoHeader{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:900px){
  body.homePageActive .homeSeoHeader{grid-template-columns:1fr;gap:14px;align-items:start}
  body.homePageActive .homeSeoGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:650px){
  body.homePageActive .homeSeoLanding{width:calc(100% - 24px);padding:22px 18px 20px}
  body.homePageActive .homeSeoHeading h2{font-size:27px}
  body.homePageActive .homeSeoLead p{font-size:10px}
  body.homePageActive .homeSeoGrid{grid-template-columns:1fr}
  body.homePageActive .homeSeoCard{min-height:0}
}


/* =====================================================================
   v0.3.5.292 FIX2 — ABOUT PROJECT + CREATOR + COOPERATION HUB
   Dedicated project/about page using the approved FermaniHUB depth system.
   ===================================================================== */
body.aboutPageActive #app{padding-bottom:26px}
body.aboutPageActive .aboutHero,body.aboutPageActive .aboutStory,body.aboutPageActive .aboutCapabilities,body.aboutPageActive .aboutCreator,body.aboutPageActive .aboutCooperation,body.aboutPageActive .aboutLegal{width:min(1210px,calc(100% - 40px));margin-left:auto;margin-right:auto}
body.aboutPageActive .aboutHero{position:relative;isolation:isolate;overflow:hidden;min-height:390px;margin-top:0;border:1px solid rgba(205,222,213,.17);border-top:0;border-radius:0 0 9px 9px;background:#07100d;box-shadow:0 28px 80px rgba(0,0,0,.28)}
body.aboutPageActive .aboutHeroBackdrop{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(3,8,7,.96) 0%,rgba(3,8,7,.84) 42%,rgba(4,9,8,.34) 71%,rgba(4,8,7,.70) 100%),linear-gradient(0deg,rgba(4,9,8,.82),transparent 54%),url('/assets/home_hero_user_battle.jpg') center 42%/cover no-repeat;filter:saturate(1.08) contrast(1.02)}
body.aboutPageActive .aboutHero:after{content:"";position:absolute;inset:auto -80px -160px 38%;height:310px;background:radial-gradient(ellipse,rgba(169,229,27,.085),transparent 68%);pointer-events:none}
body.aboutPageActive .aboutHeroInner{min-height:390px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);align-items:center;gap:48px;padding:54px 58px}
body.aboutPageActive .aboutEyebrow,body.aboutPageActive .aboutSectionKicker{display:block;color:#a7b3ad;font-size:9px;line-height:1.2;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
body.aboutPageActive .aboutEyebrow:before,body.aboutPageActive .aboutSectionKicker:before{content:"";display:inline-block;width:22px;height:2px;margin-right:9px;vertical-align:middle;background:var(--green);box-shadow:0 0 14px rgba(169,229,27,.18)}
body.aboutPageActive .aboutHeroCopy h1{margin:13px 0 14px;color:#f1f5f3;font-size:clamp(35px,4vw,62px);line-height:.94;letter-spacing:-.055em;text-transform:uppercase;max-width:850px}
body.aboutPageActive .aboutHeroCopy h1 span{color:#f2f5f3}body.aboutPageActive .aboutHeroCopy h1 span:after{content:".";color:#e5c34b}body.aboutPageActive .aboutHeroCopy h1 em{font-style:normal;color:#cfd8d3;font-size:.55em;letter-spacing:-.02em}
body.aboutPageActive .aboutHeroCopy p{max-width:720px;margin:0;color:#9ba8a2;font-size:12px;line-height:1.65}
body.aboutPageActive .aboutHeroActions{display:flex;gap:9px;margin-top:22px}.aboutHeroActions .button{min-height:40px;padding:0 17px;font-size:9px}
body.aboutPageActive .aboutHeroBrand{justify-self:end;width:min(100%,310px);min-height:180px;display:flex;align-items:center;gap:18px;padding:26px;border:1px solid rgba(205,222,213,.15);border-radius:8px;background:linear-gradient(145deg,rgba(13,24,20,.82),rgba(5,12,10,.74));box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 18px 50px rgba(0,0,0,.24);backdrop-filter:blur(7px)}
body.aboutPageActive .aboutHeroBrand img{width:72px;height:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}.aboutHeroBrand>div{display:grid;gap:4px}.aboutHeroBrand strong{color:#f4f6f5;font-size:24px;letter-spacing:-.04em}.aboutHeroBrand strong span{color:#e5c34b}.aboutHeroBrand small{color:#7d8a84;font-size:9px;line-height:1.5;letter-spacing:.12em}
body.aboutPageActive .aboutStory{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:54px;margin-top:18px;padding:30px;border:1px solid var(--rh-depth-line);border-radius:8px;background:linear-gradient(180deg,rgba(13,23,20,.98),rgba(7,14,12,.99));box-shadow:var(--rh-depth-shadow)}
body.aboutPageActive .aboutStory h2,body.aboutPageActive .aboutCreator h2,body.aboutPageActive .aboutCooperation h2{margin:10px 0 0;color:#edf3ef;font-size:clamp(24px,2.4vw,36px);line-height:1.05;letter-spacing:-.04em;text-transform:uppercase}.aboutStoryCopy{display:grid;gap:12px;align-content:center}.aboutStoryCopy p{margin:0;color:#96a39d;font-size:12.5px;line-height:1.7}
body.aboutPageActive .aboutCapabilities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:10px}.aboutCapabilities article{min-height:150px;padding:19px 18px;border:1px solid var(--rh-depth-line-soft);border-radius:7px;background:linear-gradient(180deg,rgba(18,29,25,.82),rgba(8,16,14,.88));box-shadow:var(--rh-depth-shadow-soft),inset 0 1px 0 rgba(255,255,255,.025)}.aboutCapabilityIcon{width:38px;height:38px;display:grid;place-items:center;margin-bottom:15px;border:1px solid rgba(169,229,27,.15);border-radius:5px;background:rgba(169,229,27,.035)}.aboutHudIcon{width:20px!important;height:20px!important;opacity:.88}.aboutCapabilities h3{margin:0 0 8px;color:#e8eeeb;font-size:11.5px;line-height:1.25;letter-spacing:.055em;text-transform:uppercase}.aboutCapabilities p{margin:0;color:#7f8d86;font-size:10.5px;line-height:1.55}
body.aboutPageActive .aboutCreator{display:grid;grid-template-columns:minmax(0,.95fr) minmax(480px,1.05fr);gap:24px;align-items:center;margin-top:18px;padding:28px 30px;border:1px solid var(--rh-depth-line);border-radius:8px;background:linear-gradient(145deg,rgba(13,23,20,.98),rgba(7,14,12,.99));box-shadow:var(--rh-depth-shadow)}.aboutCreatorIdentity{display:grid;grid-template-columns:70px minmax(0,1fr);gap:18px;align-items:center}.aboutCreatorMark{width:68px;height:68px;display:grid;place-items:center;border:1px solid rgba(229,195,75,.2);border-radius:7px;background:radial-gradient(circle at 50% 30%,rgba(229,195,75,.08),transparent 64%),#09110f}.aboutCreatorMark img{width:46px;height:auto}.aboutCreator h2{font-size:30px!important}.aboutCreatorIdentity p{max-width:590px;margin:9px 0 0;color:#8e9c95;font-size:11.5px;line-height:1.6}.aboutSocialGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.aboutSocialLink{min-height:66px;display:grid;grid-template-columns:38px minmax(0,1fr) 18px;gap:12px;align-items:center;padding:10px 12px;border:1px solid rgba(205,222,213,.11);border-radius:6px;background:#08110f;text-decoration:none;transition:border-color .15s ease,background .15s ease,transform .15s ease}.aboutSocialLink:hover{border-color:rgba(169,229,27,.35);background:#0d1714;transform:translateY(-1px)}.aboutSocialMark{width:34px;height:34px;display:grid;place-items:center;border-radius:5px;border:1px solid rgba(205,222,213,.13);background:#101a17;color:#cdd6d1;font-size:9px;font-weight:900;letter-spacing:.05em}.aboutSocialLink strong{display:block;color:#e6ece9;font-size:11.5px;line-height:1.2}.aboutSocialLink small{display:block;margin-top:3px;color:#6f7d76;font-size:8px}.aboutSocialLink>i{color:var(--green);font-style:normal;font-size:16px;text-align:right}
body.aboutPageActive .aboutCooperation{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center;margin-top:18px;padding:31px 32px;border:1px solid rgba(169,229,27,.19);border-radius:8px;background:linear-gradient(125deg,rgba(15,27,22,.98),rgba(7,14,12,.99));box-shadow:var(--rh-depth-shadow),inset 0 1px 0 rgba(255,255,255,.03)}.aboutCooperationGlow{position:absolute;z-index:-1;right:-70px;top:-125px;width:390px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(169,229,27,.105),transparent 68%)}.aboutCooperation h2{max-width:820px;font-size:32px!important}.aboutCooperationCopy>p{max-width:900px;margin:10px 0 0;color:#93a099;font-size:11.5px;line-height:1.65}.aboutCoopTags{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}.aboutCoopTags span{padding:6px 9px;border:1px solid rgba(205,222,213,.11);border-radius:4px;background:rgba(7,14,12,.7);color:#87958e;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.aboutCoopButton{min-width:176px;min-height:44px;font-size:9px!important}.aboutCoopButton span{margin-left:5px;font-size:13px}
body.aboutPageActive .aboutLegal{margin-top:12px;padding:13px 18px;text-align:center}.aboutLegal p{margin:0;color:#5f6d66;font-size:9px;line-height:1.55}
@media(min-width:1600px){body.aboutPageActive .aboutHero,body.aboutPageActive .aboutStory,body.aboutPageActive .aboutCapabilities,body.aboutPageActive .aboutCreator,body.aboutPageActive .aboutCooperation,body.aboutPageActive .aboutLegal{width:var(--rh-desktop-xl)!important;max-width:var(--rh-desktop-xl)!important}.aboutHeroInner{padding-left:64px!important;padding-right:64px!important}.aboutStoryCopy p{font-size:12px!important}.aboutCapabilities h3{font-size:11px!important}.aboutCapabilities p{font-size:10px!important}.aboutCreatorIdentity p,.aboutCooperationCopy>p{font-size:11px!important}}
@media(max-width:1100px){body.aboutPageActive .aboutHeroInner{grid-template-columns:1fr;gap:24px;padding:42px 36px}.aboutHeroBrand{justify-self:start!important}.aboutCapabilities{grid-template-columns:repeat(2,minmax(0,1fr))!important}.aboutCreator{grid-template-columns:1fr!important}.aboutSocialGrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:800px){body.aboutPageActive .aboutStory{grid-template-columns:1fr;gap:18px}.aboutSocialGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.aboutCooperation{grid-template-columns:1fr!important}.aboutCoopButton{justify-self:start}.aboutHeroCopy h1{font-size:42px!important}}
@media(max-width:650px){body.aboutPageActive .aboutHero,body.aboutPageActive .aboutStory,body.aboutPageActive .aboutCapabilities,body.aboutPageActive .aboutCreator,body.aboutPageActive .aboutCooperation,body.aboutPageActive .aboutLegal{width:calc(100% - 24px)}body.aboutPageActive .aboutHeroInner{padding:32px 22px}.aboutHeroBrand{width:100%!important;min-height:120px!important;padding:18px!important}.aboutHeroBrand img{width:54px!important}.aboutHeroBrand strong{font-size:20px!important}.aboutHeroCopy h1{font-size:34px!important}.aboutCapabilities{grid-template-columns:1fr!important}.aboutCreator{padding:22px 18px!important}.aboutCreatorIdentity{grid-template-columns:54px 1fr}.aboutCreatorMark{width:52px;height:52px}.aboutCreatorMark img{width:34px}.aboutSocialGrid{grid-template-columns:1fr}.aboutCooperation{padding:24px 20px!important}.aboutCooperation h2{font-size:26px!important}.aboutCoopButton{width:100%}.aboutLegal{padding-left:6px!important;padding-right:6px!important}}


/* ========================================================================
   v0.3.5.292 FIX3 — SOCIAL ICONS BRAND POLISH + ABOUT FEATURE ICON FILL
   Dedicated About-page iconography. No dependency on HOME-only icon masks.
   ======================================================================== */
body.aboutPageActive .aboutCapabilityCard{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
body.aboutPageActive .aboutCapabilityCard:after{
  content:"";
  position:absolute;
  z-index:-1;
  left:16px;
  top:-34px;
  width:104px;
  height:104px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(169,229,27,.075),transparent 69%);
  opacity:.6;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
body.aboutPageActive .aboutCapabilityCard:hover{
  transform:translateY(-2px);
  border-color:rgba(169,229,27,.25);
  background:linear-gradient(180deg,rgba(20,33,28,.9),rgba(9,18,15,.94));
  box-shadow:0 14px 34px rgba(0,0,0,.21),inset 0 1px 0 rgba(255,255,255,.035);
}
body.aboutPageActive .aboutCapabilityCard:hover:after{opacity:1;transform:scale(1.08)}
body.aboutPageActive .aboutCapabilityIcon{
  width:44px;
  height:44px;
  position:relative;
  display:grid;
  place-items:center;
  margin-bottom:15px;
  border:1px solid rgba(169,229,27,.2);
  border-radius:7px;
  background:linear-gradient(145deg,rgba(169,229,27,.07),rgba(169,229,27,.018));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 8px 22px rgba(0,0,0,.14);
  color:#cfe0d7;
}
body.aboutPageActive .aboutCapabilityIcon:after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.025);
  pointer-events:none;
}
body.aboutPageActive .aboutFeatureGlyph{
  width:24px;
  height:24px;
  display:block;
  background:currentColor;
  mask:var(--about-feature-icon) center/contain no-repeat;
  -webkit-mask:var(--about-feature-icon) center/contain no-repeat;
  filter:drop-shadow(0 0 8px rgba(169,229,27,.08));
  transition:color .18s ease,transform .18s ease,filter .18s ease;
}
body.aboutPageActive .aboutCapabilityCard:hover .aboutFeatureGlyph{
  color:var(--green);
  transform:scale(1.06);
  filter:drop-shadow(0 0 10px rgba(169,229,27,.22));
}
body.aboutPageActive .aboutCapabilities h3{margin-top:1px}

body.aboutPageActive .aboutSocialLink{
  --social-brand:#a9e51b;
  --social-rgb:169,229,27;
  min-height:72px;
  position:relative;
  overflow:hidden;
  grid-template-columns:44px minmax(0,1fr) 20px;
  gap:11px;
  padding:10px 13px;
  border-color:rgba(205,222,213,.12);
  background:linear-gradient(145deg,rgba(10,20,17,.98),rgba(6,13,11,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
body.aboutPageActive .aboutSocialLink:before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:2px;
  border-radius:0 2px 2px 0;
  background:var(--social-brand);
  opacity:.16;
  box-shadow:0 0 12px rgba(var(--social-rgb),.18);
  transition:opacity .18s ease,box-shadow .18s ease;
}
body.aboutPageActive .aboutSocial-youtube{--social-brand:#ff0033;--social-rgb:255,0,51}
body.aboutPageActive .aboutSocial-twitch{--social-brand:#9146ff;--social-rgb:145,70,255}
body.aboutPageActive .aboutSocial-telegram{--social-brand:#26a5e4;--social-rgb:38,165,228}
body.aboutPageActive .aboutSocial-instagram{--social-brand:#e4405f;--social-rgb:228,64,95}
body.aboutPageActive .aboutSocialMark{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:8px;
  border:1px solid rgba(205,222,213,.13);
  background:linear-gradient(145deg,rgba(19,31,27,.96),rgba(11,20,17,.96));
  color:#d5dfda;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 7px 18px rgba(0,0,0,.13);
  transition:color .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
body.aboutPageActive .aboutBrandIcon{
  width:21px;
  height:21px;
  display:block;
  background:currentColor;
  mask:var(--about-brand-icon) center/contain no-repeat;
  -webkit-mask:var(--about-brand-icon) center/contain no-repeat;
  transition:transform .18s ease,filter .18s ease;
}
body.aboutPageActive .aboutSocialCopy{min-width:0;display:grid;gap:4px}
body.aboutPageActive .aboutSocialTitle{min-width:0;display:flex;align-items:baseline;gap:7px}
body.aboutPageActive .aboutSocialTitle strong{flex:0 0 auto;color:#edf2ef;font-size:11.5px;line-height:1.2}
body.aboutPageActive .aboutSocialTitle b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#77857e;
  font-size:9px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.015em;
}
body.aboutPageActive .aboutSocialCopy small{margin:0;color:#75837c;font-size:9px;line-height:1.25}
body.aboutPageActive .aboutSocialLink>i{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:5px;
  color:#75837c;
  font-size:15px;
  transition:color .18s ease,background .18s ease,transform .18s ease;
}
body.aboutPageActive .aboutSocialLink:hover,
body.aboutPageActive .aboutSocialLink:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(var(--social-rgb),.42);
  background:linear-gradient(145deg,rgba(var(--social-rgb),.055),rgba(8,16,14,.98) 55%);
  box-shadow:0 13px 30px rgba(0,0,0,.2),0 0 24px rgba(var(--social-rgb),.055),inset 0 1px 0 rgba(255,255,255,.035);
  outline:none;
}
body.aboutPageActive .aboutSocialLink:hover:before,
body.aboutPageActive .aboutSocialLink:focus-visible:before{opacity:.88;box-shadow:0 0 15px rgba(var(--social-rgb),.38)}
body.aboutPageActive .aboutSocialLink:hover .aboutSocialMark,
body.aboutPageActive .aboutSocialLink:focus-visible .aboutSocialMark{
  color:var(--social-brand);
  border-color:rgba(var(--social-rgb),.36);
  background:rgba(var(--social-rgb),.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 20px rgba(var(--social-rgb),.08);
}
body.aboutPageActive .aboutSocialLink:hover .aboutBrandIcon,
body.aboutPageActive .aboutSocialLink:focus-visible .aboutBrandIcon{transform:scale(1.07);filter:drop-shadow(0 0 8px rgba(var(--social-rgb),.3))}
body.aboutPageActive .aboutSocialLink:hover>i,
body.aboutPageActive .aboutSocialLink:focus-visible>i{color:var(--social-brand);background:rgba(var(--social-rgb),.055);transform:translate(1px,-1px)}
body.aboutPageActive .aboutSocial-instagram:hover .aboutBrandIcon,
body.aboutPageActive .aboutSocial-instagram:focus-visible .aboutBrandIcon{
  background:linear-gradient(135deg,#833ab4 0%,#fd1d1d 55%,#fcb045 100%);
}
@media(max-width:650px){
  body.aboutPageActive .aboutSocialLink{min-height:68px}
  body.aboutPageActive .aboutSocialTitle b{font-size:7.5px}
}

/* ========================================================================
   v0.3.5.297 — HOME POPULAR TANKS MOCKUP PARITY + REPLAY FILTER NAVIGATION
   Only the existing HOME Popular Tanks panel internals are changed.
   ======================================================================== */
body.homePageActive .approvedHomeDashboard .popularPanel .popularList{
  display:grid!important;
  grid-template-rows:repeat(5,49px)!important;
  align-content:start!important;
  gap:0!important;
  height:264px!important;
  min-height:264px!important;
  max-height:264px!important;
  padding:0!important;
  overflow:hidden!important;
}
body.homePageActive .popularMockRowV297{
  --popular-width:8%;
  min-width:0;
  height:49px;
  display:grid;
  grid-template-columns:18px 58px minmax(0,1fr) 48px;
  align-items:center;
  gap:7px;
  padding:0 5px 0 2px;
  border:0;
  border-bottom:1px solid rgba(190,208,199,.105);
  border-radius:5px;
  background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  outline:none;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
body.homePageActive .popularMockRowV297:first-child{border-top:1px solid rgba(190,208,199,.075)}
body.homePageActive .popularMockRowV297:hover,
body.homePageActive .popularMockRowV297:focus-visible{
  position:relative;
  z-index:2;
  transform:translateY(-1px);
  border-color:rgba(169,229,27,.25);
  background:linear-gradient(90deg,rgba(169,229,27,.055),rgba(18,27,23,.62) 58%,rgba(9,15,13,.22));
  box-shadow:inset 0 0 0 1px rgba(169,229,27,.10),0 7px 18px rgba(0,0,0,.18);
}
body.homePageActive .popularMockRankV297{
  justify-self:center;
  color:#c7d0cb;
  font-size:10.5px;
  line-height:1;
  font-weight:850;
  font-variant-numeric:tabular-nums;
}
body.homePageActive .popularMockTankV297{
  width:58px;
  height:34px;
  display:grid;
  place-items:center;
  overflow:visible;
}
body.homePageActive .popularMockTankV297 img{
  display:block;
  width:58px!important;
  height:34px!important;
  max-width:58px!important;
  max-height:34px!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:brightness(.96) saturate(.84) contrast(1.02) drop-shadow(0 5px 5px rgba(0,0,0,.46))!important;
  transition:filter .18s ease,transform .18s ease!important;
}
body.homePageActive .popularMockRowV297:hover .popularMockTankV297 img,
body.homePageActive .popularMockRowV297:focus-visible .popularMockTankV297 img{
  transform:scale(1.035)!important;
  filter:brightness(1.13) saturate(.98) contrast(1.04) drop-shadow(0 6px 7px rgba(0,0,0,.52))!important;
}
body.homePageActive .popularMockIdentityV297{
  min-width:0;
  align-self:center;
  display:grid;
  grid-template-rows:auto auto 2px;
  gap:2px;
}
body.homePageActive .popularMockIdentityV297>strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#e8eeea;
  font-size:10.2px;
  line-height:1.05;
  font-weight:850;
}
body.homePageActive .popularMockIdentityV297>small{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#75827c;
  font-size:6.1px;
  line-height:1;
  font-weight:650;
}
body.homePageActive .popularMockBarV297{
  width:100%;
  height:2px;
  margin-top:1px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(150,165,157,.10);
}
body.homePageActive .popularMockBarV297>i{
  display:block;
  width:var(--popular-width);
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#a6d819,#d1aa25);
  box-shadow:0 0 5px rgba(169,229,27,.10);
  transition:filter .18s ease,box-shadow .18s ease;
}
body.homePageActive .popularMockRowV297:hover .popularMockBarV297>i,
body.homePageActive .popularMockRowV297:focus-visible .popularMockBarV297>i{
  filter:brightness(1.12);
  box-shadow:0 0 7px rgba(169,229,27,.18);
}
body.homePageActive .popularMockPercentV297{
  justify-self:end;
  color:#b8c3bd;
  font-size:10.5px;
  line-height:1;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
body.homePageActive .popularMockRowV297.popular-rank-1 .popularMockPercentV297{color:#d7c069}
@media(max-width:1180px){
  body.homePageActive .approvedHomeDashboard .popularPanel .popularList{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    grid-template-rows:none!important;
  }
}
@media(max-width:700px){
  body.homePageActive .popularMockRowV297{grid-template-columns:18px 54px minmax(0,1fr) 44px}
  body.homePageActive .popularMockTankV297,
  body.homePageActive .popularMockTankV297 img{width:54px!important;max-width:54px!important}
}

/* ========================================================================
   v0.3.5.298 — HOME POPULAR TANKS READABILITY + PREMIUM ROW HOVER POLISH
   Scope lock: only Popular Tanks internals. Existing panel/canvas dimensions stay unchanged.
   User-approved change: remove the progress line and scale up all useful row content.
   ======================================================================== */
body.homePageActive .approvedHomeDashboard .popularPanel .popularList{
  display:grid!important;
  grid-template-rows:repeat(5,49px)!important;
  align-content:start!important;
  gap:0!important;
  height:264px!important;
  min-height:264px!important;
  max-height:264px!important;
  padding:0!important;
  overflow:hidden!important;
}
body.homePageActive .popularMockRowV298{
  min-width:0;
  height:49px;
  display:grid;
  grid-template-columns:22px 70px minmax(0,1fr) 48px;
  align-items:center;
  gap:8px;
  padding:0 7px 0 3px;
  border:0;
  border-bottom:1px solid rgba(190,208,199,.105);
  border-radius:6px;
  background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  outline:none;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
body.homePageActive .popularMockRowV298:first-child{border-top:1px solid rgba(190,208,199,.075)}
body.homePageActive .popularMockRowV298:hover,
body.homePageActive .popularMockRowV298:focus-visible{
  position:relative;
  z-index:2;
  transform:translateY(-1px);
  border-color:rgba(169,229,27,.28);
  background:linear-gradient(90deg,rgba(169,229,27,.075),rgba(18,27,23,.70) 55%,rgba(9,15,13,.30));
  box-shadow:inset 0 0 0 1px rgba(169,229,27,.12),0 7px 18px rgba(0,0,0,.20);
}
body.homePageActive .popularMockRankV298{
  justify-self:center;
  color:#c9d2cd;
  font-size:12.5px;
  line-height:1;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}
body.homePageActive .popularMockRowV298.popular-rank-1 .popularMockRankV298{color:#dec36b}
body.homePageActive .popularMockTankV298{
  width:70px;
  height:42px;
  display:grid;
  place-items:center;
  overflow:visible;
}
body.homePageActive .popularMockTankV298 img{
  display:block;
  width:70px!important;
  height:42px!important;
  max-width:70px!important;
  max-height:42px!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:brightness(1.03) saturate(.88) contrast(1.03) drop-shadow(0 6px 6px rgba(0,0,0,.48))!important;
  transition:filter .16s ease,transform .16s ease!important;
}
body.homePageActive .popularMockRowV298:hover .popularMockTankV298 img,
body.homePageActive .popularMockRowV298:focus-visible .popularMockTankV298 img{
  transform:scale(1.045)!important;
  filter:brightness(1.17) saturate(1.02) contrast(1.05) drop-shadow(0 7px 8px rgba(0,0,0,.54))!important;
}
body.homePageActive .popularMockIdentityV298{
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:8px;
  white-space:nowrap;
  overflow:hidden;
}
body.homePageActive .popularMockIdentityV298>strong{
  flex:0 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f0f4f1;
  font-size:11.8px;
  line-height:1;
  font-weight:900;
  transition:color .16s ease,text-shadow .16s ease;
}
body.homePageActive .popularMockIdentityV298>small{
  flex:0 0 auto;
  color:#8e9a94;
  font-size:7.4px;
  line-height:1;
  font-weight:750;
  letter-spacing:.01em;
  transition:color .16s ease;
}
body.homePageActive .popularMockPercentV298{
  justify-self:end;
  color:#c7d0cb;
  font-size:12.5px;
  line-height:1;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  transition:color .16s ease,text-shadow .16s ease;
}
body.homePageActive .popularMockRowV298.popular-rank-1 .popularMockPercentV298{color:#e0c66e}
body.homePageActive .popularMockRowV298:hover .popularMockIdentityV298>strong,
body.homePageActive .popularMockRowV298:focus-visible .popularMockIdentityV298>strong{
  color:#fff;
  text-shadow:0 0 10px rgba(255,255,255,.06);
}
body.homePageActive .popularMockRowV298:hover .popularMockIdentityV298>small,
body.homePageActive .popularMockRowV298:focus-visible .popularMockIdentityV298>small{color:#b1bdb6}
body.homePageActive .popularMockRowV298:hover .popularMockPercentV298,
body.homePageActive .popularMockRowV298:focus-visible .popularMockPercentV298{
  color:var(--green);
  text-shadow:0 0 9px rgba(169,229,27,.12);
}
@media(max-width:1180px){
  body.homePageActive .approvedHomeDashboard .popularPanel .popularList{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    grid-template-rows:none!important;
  }
}
@media(max-width:700px){
  body.homePageActive .popularMockRowV298{grid-template-columns:20px 62px minmax(0,1fr) 44px;gap:6px}
  body.homePageActive .popularMockTankV298,
  body.homePageActive .popularMockTankV298 img{width:62px!important;max-width:62px!important;height:38px!important;max-height:38px!important}
  body.homePageActive .popularMockIdentityV298>strong{font-size:10.8px}
  body.homePageActive .popularMockIdentityV298>small{font-size:6.8px}
  body.homePageActive .popularMockPercentV298{font-size:9.5px}
}


/* ========================================================================
   v0.3.5.299 — HOME POPULAR TANKS FULL-HEIGHT ROW DENSITY + RANK EMPHASIS
   Scope lock: only Popular Tanks block. Fill the full column height and increase row density.
   ======================================================================== */
body.homePageActive .approvedHomeDashboard .popularPanel{
  display:flex!important;
  flex-direction:column!important;
}
body.homePageActive .approvedHomeDashboard .popularPanel .popularList{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  display:grid!important;
  grid-template-rows:repeat(5,minmax(0,1fr))!important;
  align-content:stretch!important;
  gap:8px!important;
  padding:4px 0 0!important;
}
body.homePageActive .popularMockRowV299{
  min-width:0;
  min-height:0;
  height:auto!important;
  display:grid;
  grid-template-columns:28px 82px minmax(0,1fr) 58px;
  align-items:center;
  gap:12px;
  padding:0 10px 0 6px;
  border:1px solid rgba(194,210,202,.10);
  border-radius:10px;
  background:linear-gradient(145deg,rgba(14,21,18,.92),rgba(11,17,15,.76));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  outline:none;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
body.homePageActive .popularMockRowV299:hover,
body.homePageActive .popularMockRowV299:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(169,229,27,.28);
  background:linear-gradient(145deg,rgba(26,36,31,.96),rgba(14,21,18,.82));
  box-shadow:inset 0 0 0 1px rgba(169,229,27,.09),0 10px 22px rgba(0,0,0,.22);
}
body.homePageActive .popularMockRankV299{
  width:22px;
  height:22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  justify-self:center;
  font-size:11.5px;
  line-height:1;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  color:#d7dfdb;
  background:linear-gradient(180deg,rgba(77,88,84,.50),rgba(33,41,37,.72));
  border:1px solid rgba(173,185,178,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
body.homePageActive .popularMockRowV299.popular-rank-1 .popularMockRankV299{
  color:#14110a;
  background:linear-gradient(180deg,#f2cf6f,#b48729);
  border-color:rgba(255,215,109,.58);
}
body.homePageActive .popularMockRowV299.popular-rank-2 .popularMockRankV299{
  color:#111416;
  background:linear-gradient(180deg,#d7dde3,#8d99a5);
  border-color:rgba(214,225,236,.44);
}
body.homePageActive .popularMockRowV299.popular-rank-3 .popularMockRankV299{
  color:#130c08;
  background:linear-gradient(180deg,#d49a63,#825126);
  border-color:rgba(210,152,102,.44);
}
body.homePageActive .popularMockTankV299{
  width:82px;
  height:48px;
  display:grid;
  place-items:center;
  overflow:visible;
}
body.homePageActive .popularMockTankV299 img{
  display:block;
  width:82px!important;
  height:48px!important;
  max-width:82px!important;
  max-height:48px!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:brightness(1.06) saturate(.94) contrast(1.04) drop-shadow(0 7px 7px rgba(0,0,0,.52))!important;
  transition:filter .16s ease,transform .16s ease!important;
}
body.homePageActive .popularMockRowV299:hover .popularMockTankV299 img,
body.homePageActive .popularMockRowV299:focus-visible .popularMockTankV299 img{
  transform:scale(1.05)!important;
  filter:brightness(1.16) saturate(1.03) contrast(1.05) drop-shadow(0 8px 9px rgba(0,0,0,.56))!important;
}
body.homePageActive .popularMockIdentityV299{
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:6px;
  white-space:nowrap;
  overflow:hidden;
}
body.homePageActive .popularMockIdentityV299>strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f0f4f1;
  font-size:13.2px;
  line-height:1;
  font-weight:900;
  letter-spacing:.01em;
  transition:color .16s ease,text-shadow .16s ease;
}
body.homePageActive .popularMockIdentityV299>small{
  flex:0 0 auto;
  color:#9ba7a1;
  font-size:10.5px;
  line-height:1;
  font-weight:750;
  transition:color .16s ease;
}
body.homePageActive .popularMockPercentV299{
  justify-self:end;
  color:#d3dbd7;
  font-size:12.2px;
  line-height:1;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  transition:color .16s ease,text-shadow .16s ease;
}
body.homePageActive .popularMockRowV299.popular-rank-1 .popularMockPercentV299{color:#e2c96f}
body.homePageActive .popularMockRowV299:hover .popularMockIdentityV299>strong,
body.homePageActive .popularMockRowV299:focus-visible .popularMockIdentityV299>strong{
  color:#ffffff;
  text-shadow:0 0 10px rgba(255,255,255,.05);
}
body.homePageActive .popularMockRowV299:hover .popularMockIdentityV299>small,
body.homePageActive .popularMockRowV299:focus-visible .popularMockIdentityV299>small{color:#bcc8c2}
body.homePageActive .popularMockRowV299:hover .popularMockPercentV299,
body.homePageActive .popularMockRowV299:focus-visible .popularMockPercentV299{
  color:var(--green);
  text-shadow:0 0 9px rgba(169,229,27,.14);
}
@media(max-width:1180px){
  body.homePageActive .approvedHomeDashboard .popularPanel .popularList{
    grid-template-rows:none!important;
    gap:6px!important;
  }
}
@media(max-width:700px){
  body.homePageActive .popularMockRowV299{grid-template-columns:24px 72px minmax(0,1fr) 52px;gap:8px;padding:0 8px 0 4px}
  body.homePageActive .popularMockTankV299,
  body.homePageActive .popularMockTankV299 img{width:72px!important;max-width:72px!important;height:42px!important;max-height:42px!important}
  body.homePageActive .popularMockIdentityV299>strong{font-size:11.7px}
  body.homePageActive .popularMockIdentityV299>small{font-size:8.1px}
  body.homePageActive .popularMockPercentV299{font-size:10.8px}
}


/* ========================================================================
   v0.3.5.299 FIX2 — HOME HERO VIDEO METRIC + ABOUT HOVER PARITY
   Scope lock: only HOME hero KPI metrics. Add real public video count before Regions.
   YouTube glyph follows About-page behavior: neutral at rest, YouTube red on hover.
   ======================================================================== */
body.homePageActive .homeApprovedHero .heroMetrics{
  width:min(760px,100%)!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:9px!important;
}
body.homePageActive .homeApprovedHero .heroMetrics>div{
  min-width:0!important;
}
body.homePageActive .homeApprovedHero .heroMetrics .heroMetricVideo{
  --youtube-brand:#ff0033;
  --youtube-rgb:255,0,51;
}
body.homePageActive .homeApprovedHero .homeMetricYoutube{
  width:35px;
  height:35px;
  display:block;
  background:#d5dfda;
  mask:url('/assets/ui/social/youtube.svg') center/contain no-repeat;
  -webkit-mask:url('/assets/ui/social/youtube.svg') center/contain no-repeat;
  filter:drop-shadow(0 0 5px rgba(166,233,32,.10));
  transform:translateZ(0);
  transition:background .18s ease,transform .18s ease,filter .18s ease;
  pointer-events:none;
}
body.homePageActive .homeApprovedHero .heroMetricVideo:hover,
body.homePageActive .homeApprovedHero .heroMetricVideo:focus-within{
  border-color:rgba(var(--youtube-rgb),.42)!important;
  background:linear-gradient(180deg,rgba(var(--youtube-rgb),.055),rgba(7,18,20,.84))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 22px rgba(0,0,0,.13),0 0 20px rgba(var(--youtube-rgb),.055)!important;
}
body.homePageActive .homeApprovedHero .heroMetricVideo:hover .homeMetricYoutube,
body.homePageActive .homeApprovedHero .heroMetricVideo:focus-within .homeMetricYoutube{
  background:var(--youtube-brand);
  transform:scale(1.07) translateY(-1px) translateZ(0);
  filter:drop-shadow(0 0 8px rgba(var(--youtube-rgb),.30));
}
body.homePageActive .homeApprovedHero .heroMetricVideo:hover strong,
body.homePageActive .homeApprovedHero .heroMetricVideo:focus-within strong{color:#fff!important}
body.homePageActive .homeApprovedHero .heroMetricVideo:hover small,
body.homePageActive .homeApprovedHero .heroMetricVideo:focus-within small{color:#ff6b83!important}

@media(max-width:1180px) and (min-width:981px){
  body.homePageActive .homeApprovedHero .heroMetrics{
    width:min(700px,100%)!important;
    gap:7px!important;
  }
  body.homePageActive .homeApprovedHero .heroMetrics>div{
    grid-template-columns:44px minmax(0,1fr)!important;
    padding-left:7px!important;
    padding-right:7px!important;
  }
  body.homePageActive .homeApprovedHero .metricIcon{width:44px!important;min-width:44px!important}
  body.homePageActive .homeApprovedHero .heroMetrics strong{font-size:18px!important}
  body.homePageActive .homeApprovedHero .heroMetrics small{font-size:6.3px!important}
  body.homePageActive .homeApprovedHero .homeMetricYoutube{width:31px;height:31px}
}
@media(max-width:980px){
  body.homePageActive .homeApprovedHero .heroMetrics{
    width:100%!important;
    max-width:760px!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }
}
@media(max-width:700px){
  body.homePageActive .homeApprovedHero .heroMetrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.homePageActive .homeApprovedHero .heroMetricVideo{grid-column:auto!important}
}


/* ========================================================================
   v0.3.5.299 FIX3 — HOME HERO METRIC NAVIGATION
   Scope lock: only Replay + Video hero KPI navigation behavior.
   Replays opens the catalog explicitly with ALL patches; Video opens Video Hub.
   ======================================================================== */
body.homePageActive .homeApprovedHero .heroMetricNavigable{
  position:relative!important;
  cursor:pointer!important;
}
body.homePageActive .homeApprovedHero .heroMetricNavigable .heroMetricHit{
  position:absolute;
  inset:0;
  z-index:8;
  display:block;
  border-radius:inherit;
  color:transparent;
  text-decoration:none;
  outline:none;
}
body.homePageActive .homeApprovedHero .heroMetricNavigable:focus-within{
  border-color:rgba(169,229,27,.38)!important;
  box-shadow:inset 0 0 0 1px rgba(169,229,27,.10),0 8px 22px rgba(0,0,0,.15)!important;
}
body.homePageActive .homeApprovedHero .heroMetricReplays:hover,
body.homePageActive .homeApprovedHero .heroMetricReplays:focus-within{
  border-color:rgba(169,229,27,.34)!important;
  background:linear-gradient(180deg,rgba(169,229,27,.055),rgba(7,18,20,.84))!important;
}
body.homePageActive .homeApprovedHero .heroMetricReplays:hover .metricIcon,
body.homePageActive .homeApprovedHero .heroMetricReplays:focus-within .metricIcon{
  transform:translateY(-1px) scale(1.04);
  filter:brightness(1.12) drop-shadow(0 0 7px rgba(169,229,27,.18));
}


/* =====================================================================
   v0.3.5.300 — BATTLE HERO RESULT TOP RAIL + VERTICAL COMPRESSION
   Scope lock: battle hero only. Move outcome to a centered top rail and
   reclaim vertical space so the report starts higher without changing
   Teams / Detailed Report internals.
   ===================================================================== */
.cinematicReplayPage .approvedHeroResultTopV300{
  position:absolute!important;
  z-index:14!important;
  left:50%!important;
  top:64px!important;
  transform:translateX(-50%)!important;
  min-width:238px!important;
  max-width:320px!important;
  min-height:58px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  padding:7px 22px 8px!important;
  border-top:1px solid rgba(169,229,27,.22)!important;
  border-bottom:1px solid rgba(169,229,27,.20)!important;
  background:linear-gradient(90deg,transparent,rgba(8,14,12,.68) 18%,rgba(8,14,12,.78) 50%,rgba(8,14,12,.68) 82%,transparent)!important;
  pointer-events:none!important;
  text-align:center!important;
  font-family:var(--approved-font)!important;
}
.cinematicReplayPage .approvedHeroResultTopV300>strong{
  display:block!important;
  color:#a9e51b!important;
  font-size:37px!important;
  line-height:.92!important;
  font-weight:720!important;
  letter-spacing:-.01em!important;
  text-transform:uppercase!important;
  text-shadow:0 0 16px rgba(169,229,27,.20),0 3px 18px rgba(30,72,14,.18)!important;
}
.cinematicReplayPage .approvedHeroResultTopV300>small{
  display:block!important;
  margin-top:5px!important;
  color:#b9c2bd!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:650!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.cinematicReplayPage .approvedReplayHero.cinematic-loss .approvedHeroResultTopV300{
  border-top-color:rgba(239,106,96,.22)!important;
  border-bottom-color:rgba(239,106,96,.18)!important;
}
.cinematicReplayPage .approvedReplayHero.cinematic-loss .approvedHeroResultTopV300>strong{
  color:#ef6a60!important;
  text-shadow:0 0 16px rgba(239,106,96,.18),0 3px 18px rgba(92,28,24,.16)!important;
}
.cinematicReplayPage .approvedReplayHero.cinematic-draw .approvedHeroResultTopV300{
  border-top-color:rgba(226,184,75,.23)!important;
  border-bottom-color:rgba(226,184,75,.20)!important;
}
.cinematicReplayPage .approvedReplayHero.cinematic-draw .approvedHeroResultTopV300>strong{
  color:#e2b84b!important;
  text-shadow:0 0 15px rgba(226,184,75,.18),0 3px 17px rgba(77,58,19,.14)!important;
}

@media (min-width:1251px){
  .cinematicReplayPage .approvedReplayHero{
    height:430px!important;
    min-height:430px!important;
  }
  .cinematicReplayPage .approvedHeroTop{
    left:48px!important;
    right:28px!important;
    top:14px!important;
  }
  .cinematicReplayPage .approvedHeroCopy{
    left:48px!important;
    top:56px!important;
    width:500px!important;
    max-width:500px!important;
  }
  .cinematicReplayPage .approvedTankTitle{
    height:49px!important;
  }
  .cinematicReplayPage .approvedPlayerMetaLine{
    margin-top:0!important;
  }
  .cinematicReplayPage .approvedAwardsRail{
    height:88px!important;
    min-height:88px!important;
    margin-top:10px!important;
  }
  .cinematicReplayPage .approvedAwardsRail.emptyAwards{
    height:46px!important;
    min-height:46px!important;
  }
  .cinematicReplayPage .approvedHeroPrimaryStats{
    left:48px!important;
    width:54%!important;
    height:74px!important;
    bottom:83px!important;
  }
  .cinematicReplayPage .approvedEconomyCards{
    right:48px!important;
    width:38%!important;
    height:80px!important;
    bottom:83px!important;
  }
  .cinematicReplayPage .approvedHeroMetric{
    padding-left:13px!important;
    padding-right:13px!important;
  }
  .cinematicReplayPage .approvedHeroMetric strong{font-size:25px!important}
  .cinematicReplayPage .approvedHeroMetric small{font-size:8px!important;margin-top:4px!important}
  .cinematicReplayPage .approvedEconomy{padding:10px 15px!important}
  .cinematicReplayPage .approvedEconomy>span{font-size:10px!important}
  .cinematicReplayPage .approvedEconomy>strong{font-size:30px!important;margin-top:6px!important}
  .cinematicReplayPage .approvedEconomy>small{font-size:8px!important;margin-top:5px!important}
  .cinematicReplayPage .approvedSubMetrics,
  .cinematicReplayPage .approvedSubMetricsV266{
    left:48px!important;
    right:48px!important;
    bottom:14px!important;
    height:58px!important;
  }
  .cinematicReplayPage .approvedSubMetricsV266>div{
    grid-template-columns:22px auto minmax(0,1fr)!important;
    column-gap:6px!important;
    padding:0 9px!important;
  }
  .cinematicReplayPage .approvedSubMetricsV266>div>span,
  .cinematicReplayPage .heroCombatInsightGlyphV266{
    width:21px!important;
    height:21px!important;
  }
  .cinematicReplayPage .approvedSubMetricsV266>div>span>.uiMaskIcon,
  .cinematicReplayPage .heroCombatInsightGlyphV266 svg{
    width:20px!important;
    height:20px!important;
  }
  .cinematicReplayPage .approvedSubMetricsV266 strong{font-size:17px!important}
  .cinematicReplayPage .approvedSubMetricsV266 small{font-size:8px!important}
  .cinematicReplayPage .cinematicReportShell{
    margin-top:6px!important;
  }
}

@media (max-width:1250px) and (min-width:651px){
  .cinematicReplayPage .approvedHeroResultTopV300{
    top:62px!important;
    min-width:210px!important;
  }
  .cinematicReplayPage .approvedHeroResultTopV300>strong{font-size:31px!important}
  .cinematicReplayPage .approvedHeroCopy{top:70px!important}
  .cinematicReplayPage .approvedAwardsRail{margin-top:10px!important}
}
@media (max-width:650px){
  .cinematicReplayPage .approvedHeroResultTopV300{
    left:22px!important;
    right:22px!important;
    top:124px!important;
    transform:none!important;
    min-width:0!important;
    max-width:none!important;
    align-items:flex-start!important;
    text-align:left!important;
    padding-left:0!important;
    background:linear-gradient(90deg,rgba(8,14,12,.78),transparent)!important;
  }
  .cinematicReplayPage .approvedHeroResultTopV300>strong{font-size:34px!important}
  .cinematicReplayPage .approvedHeroCopy{top:62px!important}
  .cinematicReplayPage .approvedAwardsRail{margin-top:92px!important}
}


/* =====================================================================
   v0.3.5.301 — BATTLE HERO RESULT EMPHASIS + MEDAL RAIL REBALANCE
   Scope lock: battle hero only. The result is the top-center focal point;
   medals return to the KPI zone; the vehicle cutout lifts slightly.
   ===================================================================== */
.cinematicReplayPage .approvedHeroResultTopV300{
  top:55px!important;
  min-width:300px!important;
  max-width:390px!important;
  min-height:76px!important;
  padding:9px 30px 10px!important;
  border-top-color:rgba(169,229,27,.28)!important;
  border-bottom-color:rgba(169,229,27,.26)!important;
  background:linear-gradient(90deg,transparent,rgba(8,14,12,.57) 10%,rgba(8,14,12,.88) 32%,rgba(8,14,12,.90) 50%,rgba(8,14,12,.88) 68%,rgba(8,14,12,.57) 90%,transparent)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.10)!important;
}
.cinematicReplayPage .approvedHeroResultTopV300::before,
.cinematicReplayPage .approvedHeroResultTopV300::after{
  content:"";
  position:absolute;
  top:50%;
  width:52px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(169,229,27,.34));
  opacity:.8;
}
.cinematicReplayPage .approvedHeroResultTopV300::before{right:100%}
.cinematicReplayPage .approvedHeroResultTopV300::after{left:100%;transform:scaleX(-1)}
.cinematicReplayPage .approvedHeroResultTopV300>strong{
  font-size:50px!important;
  line-height:.88!important;
  font-weight:760!important;
  letter-spacing:.005em!important;
  text-shadow:0 0 20px rgba(169,229,27,.28),0 4px 24px rgba(30,72,14,.20)!important;
}
.cinematicReplayPage .approvedHeroResultTopV300>small{
  margin-top:8px!important;
  color:#d0d7d3!important;
  font-size:11.5px!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:.075em!important;
}
.cinematicReplayPage .approvedReplayHero.cinematic-loss .approvedHeroResultTopV300::before,
.cinematicReplayPage .approvedReplayHero.cinematic-loss .approvedHeroResultTopV300::after{
  background:linear-gradient(90deg,transparent,rgba(239,106,96,.34));
}
.cinematicReplayPage .approvedReplayHero.cinematic-draw .approvedHeroResultTopV300::before,
.cinematicReplayPage .approvedReplayHero.cinematic-draw .approvedHeroResultTopV300::after{
  background:linear-gradient(90deg,transparent,rgba(226,184,75,.34));
}

@media (min-width:1251px){
  .cinematicReplayPage .approvedHeroCopy{
    top:56px!important;
  }
  .cinematicReplayPage .approvedAwardsRailV301{
    position:absolute!important;
    z-index:12!important;
    left:48px!important;
    top:auto!important;
    bottom:158px!important;
    width:54%!important;
    max-width:760px!important;
    height:60px!important;
    min-height:60px!important;
    margin:0!important;
    display:flex!important;
    align-items:flex-end!important;
    gap:4px!important;
    overflow:visible!important;
    pointer-events:auto!important;
  }
  .cinematicReplayPage .approvedAwardsRailV301::before{
    bottom:3px!important;
    height:43px!important;
    opacity:.72!important;
  }
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward{
    width:52px!important;
    height:52px!important;
    transform-origin:center bottom!important;
  }
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward.mastery{
    width:72px!important;
    height:66px!important;
  }
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAwardCount{
    height:42px!important;
    min-width:52px!important;
    font-size:18px!important;
  }
  .cinematicReplayPage .approvedAwardsRailV301.emptyAwards{
    height:44px!important;
    min-height:44px!important;
    bottom:163px!important;
  }
  .cinematicReplayPage .approvedReplayHero.lowResHero .approvedHeroTank{
    top:106px!important;
  }
}

@media (max-width:1250px) and (min-width:851px){
  .cinematicReplayPage .approvedHeroResultTopV300{
    top:54px!important;
    min-width:260px!important;
    min-height:68px!important;
  }
  .cinematicReplayPage .approvedHeroResultTopV300>strong{font-size:43px!important}
  .cinematicReplayPage .approvedHeroResultTopV300>small{font-size:10.5px!important}
  .cinematicReplayPage .approvedAwardsRailV301{
    position:absolute!important;
    z-index:12!important;
    left:45px!important;
    bottom:164px!important;
    width:54%!important;
    max-width:610px!important;
    height:58px!important;
    min-height:58px!important;
    margin:0!important;
    gap:2px!important;
  }
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward{width:49px!important;height:49px!important}
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward.mastery{width:66px!important;height:61px!important}
  .cinematicReplayPage .approvedReplayHero.lowResHero .approvedHeroTank{top:132px!important}
}

@media (max-width:850px){
  .cinematicReplayPage .approvedAwardsRailV301{
    position:absolute!important;
    z-index:12!important;
    left:22px!important;
    right:22px!important;
    top:214px!important;
    width:auto!important;
    height:70px!important;
    min-height:70px!important;
    margin:0!important;
    gap:2px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
  }
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward{flex:0 0 52px!important;width:52px!important;height:52px!important}
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward.mastery{flex-basis:70px!important;width:70px!important;height:64px!important}
}

/* =====================================================================
   v0.3.5.302 — BATTLE HERO TANK LIFT + MEDAL RAIL ALIGNMENT POLISH
   Scope lock: battle hero only. Raise the vehicle cutout and rebalance
   medal spacing/alignment without changing the hero height or team report.
   ===================================================================== */
@media (min-width:1251px){
  /* Raise the right-side tank decisively so it stays in the visual top half
     and clears the primary KPI/economy rail. */
  .cinematicReplayPage .approvedReplayHero.classicIconHero .approvedHeroTank.classicHeaderTankIcon,
  .cinematicReplayPage .approvedReplayHero.lowResHero .approvedHeroTank{
    top:34px!important;
  }

  /* Mastery is the vertical anchor: all awards share one optical center line. */
  .cinematicReplayPage .approvedAwardsRailV301{
    height:66px!important;
    min-height:66px!important;
    bottom:157px!important;
    align-items:center!important;
    gap:0!important;
  }
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward{
    width:58px!important;
    min-width:58px!important;
    height:60px!important;
    min-height:60px!important;
    flex:0 0 58px!important;
    margin-left:-3px!important;
    margin-right:0!important;
    align-self:center!important;
    justify-content:center!important;
    transform-origin:center center!important;
  }
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward:first-child{
    margin-left:0!important;
  }
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward.mastery{
    width:82px!important;
    min-width:82px!important;
    height:66px!important;
    min-height:66px!important;
    flex:0 0 82px!important;
    margin-left:0!important;
    margin-right:1px!important;
    align-self:center!important;
    justify-content:center!important;
  }
  /* Keep the attractive overlap, but soften the old -8/-10/-18px stacking. */
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward.awardMinor,
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward.tier-standard,
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward.awardMicro,
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward.tier-trailing{
    margin-left:-3px!important;
  }
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward.tier-marks.realClientMark{
    margin-left:-4px!important;
    margin-right:-3px!important;
  }
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward.tier-marks.realClientMark + .approvedAward{
    margin-left:-5px!important;
  }
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward.mastery + .approvedAward.tier-marks.realClientMark{
    margin-left:-3px!important;
  }
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAwardIcon,
  .cinematicReplayPage .approvedAwardsRailV301 .realGunMarksRow{
    align-self:center!important;
  }
}

@media (max-width:1250px) and (min-width:851px){
  .cinematicReplayPage .approvedReplayHero.classicIconHero .approvedHeroTank.classicHeaderTankIcon,
  .cinematicReplayPage .approvedReplayHero.lowResHero .approvedHeroTank{
    top:72px!important;
  }
  .cinematicReplayPage .approvedAwardsRailV301{
    height:64px!important;
    min-height:64px!important;
    align-items:center!important;
    gap:0!important;
  }
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward{
    width:55px!important;
    min-width:55px!important;
    height:58px!important;
    min-height:58px!important;
    flex:0 0 55px!important;
    margin-left:-3px!important;
    justify-content:center!important;
    align-self:center!important;
  }
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward:first-child{margin-left:0!important}
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward.mastery{
    width:76px!important;
    min-width:76px!important;
    height:64px!important;
    min-height:64px!important;
    flex:0 0 76px!important;
    margin-left:0!important;
    justify-content:center!important;
    align-self:center!important;
  }
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward.awardMinor,
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward.tier-standard,
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward.awardMicro,
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward.tier-trailing{margin-left:-3px!important}
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward.tier-marks.realClientMark{margin-left:-4px!important;margin-right:-3px!important}
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward.tier-marks.realClientMark + .approvedAward{margin-left:-5px!important}
}


/* =====================================================================
   v0.3.5.303 — BATTLE HERO MEDAL GLOW CONTENT-FIT + EMPTY STATE CLEANUP
   Scope lock: medal glow only. The shared amber halo follows the real rendered
   award span and disappears completely when no real awards are present.
   ===================================================================== */
.cinematicReplayPage .approvedAwardsRailV301{
  --medal-glow-left:0px;
  --medal-glow-width:0px;
}
.cinematicReplayPage .approvedReplayHero .approvedAwardsRailV301::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  left:var(--medal-glow-left)!important;
  top:12px!important;
  width:var(--medal-glow-width)!important;
  height:48px!important;
  border-radius:999px!important;
  background:radial-gradient(ellipse at 48% 58%,rgba(244,196,83,.28) 0%,rgba(179,126,42,.18) 35%,rgba(106,75,29,.09) 55%,rgba(0,0,0,0) 78%)!important;
  filter:blur(9px)!important;
  opacity:.78!important;
  pointer-events:none!important;
  transition:left .16s ease,width .16s ease,opacity .16s ease!important;
}
.cinematicReplayPage .approvedReplayHero .approvedAwardsRailV301.emptyAwards::after{
  content:none!important;
  display:none!important;
  width:0!important;
  opacity:0!important;
  background:none!important;
}
@media(max-width:1250px){
  .cinematicReplayPage .approvedReplayHero .approvedAwardsRailV301::after{
    top:11px!important;
    height:46px!important;
    filter:blur(8px)!important;
  }
}


/* ========================================================================
   v0.3.5.304 — HOME LATEST REPLAYS ROW-CARD ENHANCEMENT + MEDAL READABILITY
   Scope lock: only HOME "Latest replays" internals. Keep panel/canvas geometry.
   ======================================================================== */
@media (min-width:1051px){
  body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid{
    grid-template-rows:repeat(3,84px)!important;
    grid-auto-rows:84px!important;
    gap:6px!important;
    height:264px!important;
    min-height:264px!important;
    max-height:264px!important;
    padding:0!important;
  }
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304{
    grid-template-columns:136px minmax(0,1fr) 176px 98px!important;
    grid-template-rows:84px!important;
    min-height:84px!important;
    height:84px!important;
    max-height:84px!important;
  }
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestArtV304,
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestBodyV304,
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestStatsV304{
    min-height:84px!important;
    height:84px!important;
    max-height:84px!important;
  }
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border:1px solid rgba(198,215,206,.16)!important;
  border-radius:8px!important;
  background:linear-gradient(112deg,rgba(17,27,23,.98),rgba(8,15,13,.985) 62%,rgba(13,21,18,.96))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.026),0 6px 15px rgba(0,0,0,.12)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304::before{
  content:"";
  position:absolute;
  z-index:0;
  left:0;top:0;bottom:0;
  width:2px;
  background:linear-gradient(180deg,transparent,rgba(169,229,27,.30),transparent);
  opacity:.38;
  transition:opacity .18s ease,box-shadow .18s ease;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(169,229,27,.30)!important;
  background:linear-gradient(112deg,rgba(22,34,29,.99),rgba(9,17,14,.99) 62%,rgba(15,24,20,.98))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 24px rgba(0,0,0,.20),0 0 18px rgba(169,229,27,.025)!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304:hover::before{
  opacity:.95;
  box-shadow:0 0 10px rgba(169,229,27,.16);
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestArtV304{
  position:relative!important;
  overflow:hidden!important;
  border-right:1px solid rgba(198,215,206,.11)!important;
  filter:none!important;
  background-size:cover!important;
  background-position:center!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestArtV304::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:linear-gradient(90deg,rgba(4,8,7,.03),rgba(5,10,8,.12) 55%,rgba(7,13,11,.55))!important;
  pointer-events:none!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestArtV304>span{
  z-index:4!important;
  top:6px!important;
  left:6px!important;
  padding:3px 6px!important;
  border-radius:3px!important;
  border:1px solid rgba(210,226,218,.18)!important;
  background:rgba(6,12,10,.76)!important;
  color:#d5ded9!important;
  font-size:6.7px!important;
  font-weight:900!important;
  letter-spacing:.05em!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestArtV304 img{
  z-index:3!important;
  width:92%!important;
  height:100%!important;
  bottom:-7px!important;
  filter:brightness(1.12) saturate(.98) contrast(1.035) drop-shadow(0 9px 8px rgba(0,0,0,.58))!important;
  transition:transform .18s ease,filter .18s ease!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304:hover .latestArtV304 img{
  transform:translateX(-50%) scale(1.025)!important;
  filter:brightness(1.18) saturate(1.04) contrast(1.04) drop-shadow(0 10px 10px rgba(0,0,0,.62))!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestBodyV304{
  position:relative!important;
  z-index:2!important;
  min-width:0!important;
  padding:9px 10px 6px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestBodyV304>strong{
  color:#f3f6f4!important;
  font-size:12.4px!important;
  line-height:1.05!important;
  font-weight:950!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestMetaV304{
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  min-width:0!important;
  margin:4px 0 5px!important;
  color:#aab5af!important;
  font-size:8.8px!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestMetaV304>i{
  color:#5f6b65!important;
  font-style:normal!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestMapV304{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestMetaV304 .outcome{
  flex:0 0 auto!important;
  font-size:8.1px!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.025em!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestMetaV304 .outcome.win{color:#a9e51b!important}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestMetaV304 .outcome.loss{color:#ff655d!important}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestMetaV304 .outcome.draw{color:#e0bd68!important}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestAwardsV304{
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  min-height:24px!important;
  height:24px!important;
  max-height:24px!important;
  overflow:hidden!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestAwardsV304 .cardAwardIcon{
  flex:0 0 23px!important;
  width:23px!important;
  height:23px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  filter:none!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestAwardsV304 img{
  width:23px!important;
  height:23px!important;
  max-width:23px!important;
  max-height:23px!important;
  object-fit:contain!important;
  filter:brightness(1.06) drop-shadow(0 3px 4px rgba(0,0,0,.48))!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestStatsV304{
  position:relative!important;
  z-index:2!important;
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  align-items:center!important;
  gap:3px!important;
  padding:8px 7px!important;
  border-left:1px solid rgba(198,215,206,.09)!important;
  border-right:1px solid rgba(198,215,206,.09)!important;
  background:rgba(5,11,9,.22)!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestStatsV304>div{
  min-width:0!important;
  text-align:center!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestStatsV304 b{
  display:block!important;
  color:#f1f5f2!important;
  font-size:13.8px!important;
  line-height:1!important;
  font-weight:950!important;
  font-variant-numeric:tabular-nums!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestStatsV304 span{
  display:block!important;
  margin-top:4px!important;
  color:#8f9b95!important;
  font-size:6.7px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestOpenV304{
  position:relative!important;
  z-index:2!important;
  align-self:center!important;
  justify-self:stretch!important;
  height:32px!important;
  margin:0 8px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(169,229,27,.28)!important;
  border-radius:5px!important;
  background:linear-gradient(180deg,rgba(42,59,31,.48),rgba(20,30,20,.58))!important;
  color:#dce7df!important;
  font-size:7.8px!important;
  line-height:1!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  transition:border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304:hover .latestOpenV304{
  color:#eef8e8!important;
  border-color:rgba(169,229,27,.48)!important;
  background:linear-gradient(180deg,rgba(76,105,42,.58),rgba(31,48,25,.68))!important;
  box-shadow:0 0 12px rgba(169,229,27,.055)!important;
}
@media(max-width:1500px) and (min-width:1051px){
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304{
    grid-template-columns:126px minmax(0,1fr) 162px 92px!important;
  }
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestBodyV304>strong{font-size:11.7px!important}
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestMetaV304{font-size:8.1px!important}
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestStatsV304 b{font-size:13px!important}
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestStatsV304 span{font-size:6.2px!important}
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestOpenV304{font-size:7.1px!important;margin:0 6px!important}
}
@media(max-width:1050px){
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304{
    border-radius:7px!important;
  }
}


/* ========================================================================
   v0.3.5.305 — HOME LATEST REPLAYS HOVER STABILITY + CTA BUTTON CLEANUP
   Scope lock: only Latest Replays block. Prevent tank jump on hover and simplify CTA.
   ======================================================================== */
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304:hover .latestArtV304 img{
  transform:scale(1.025)!important;
  filter:brightness(1.16) saturate(1.02) contrast(1.04) drop-shadow(0 10px 10px rgba(0,0,0,.62))!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestOpenV305,
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestOpenV305{
  position:relative!important;
  z-index:2!important;
  align-self:center!important;
  justify-self:stretch!important;
  height:28px!important;
  margin:0 8px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(169,229,27,.22)!important;
  border-radius:4px!important;
  background:rgba(19,29,19,.42)!important;
  color:#dbe5db!important;
  font-size:7.1px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  transition:border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304:hover .latestOpenV305,
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304:focus-visible .latestOpenV305{
  color:#eef6ee!important;
  border-color:rgba(169,229,27,.34)!important;
  background:rgba(30,44,27,.58)!important;
  box-shadow:0 0 0 1px rgba(169,229,27,.05) inset!important;
}
@media(max-width:1180px){
  body.homePageActive .approvedHomeDashboard .latestPanel .latestOpenV305{font-size:6.8px!important;height:27px!important}
}
@media(max-width:700px){
  body.homePageActive .approvedHomeDashboard .latestPanel .latestOpenV305{font-size:6.4px!important;height:25px!important;margin:0 6px!important}
}


/* ========================================================================
   v0.3.5.307 — BATTLE HERO CRITS TOOLTIP VIEWPORT-SAFE FLOATING FIX
   Scope lock: only the hero critical-hits tooltip. Render it at body level so
   hero overflow and the right screen edge can never clip the popup.
   ======================================================================== */
.cinematicReplayPage .heroCritTooltipV266{
  display:none!important;
}
.heroCritFloatingTooltipV307{
  position:fixed;
  z-index:10050;
  width:min(286px,calc(100vw - 24px));
  max-height:min(360px,calc(100vh - 24px));
  overflow:auto;
  padding:12px 13px;
  border:1px solid rgba(218,169,91,.42);
  border-radius:7px;
  background:linear-gradient(180deg,rgba(29,33,33,.995),rgba(12,16,17,.995));
  box-shadow:0 18px 42px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.04);
  color:#cdd3d0;
  text-align:left;
  opacity:0;
  visibility:hidden;
  transform:translateY(5px);
  pointer-events:none;
  transition:opacity .13s ease,transform .13s ease,visibility .13s ease;
}
.heroCritFloatingTooltipV307.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.heroCritFloatingTooltipV307::after{
  content:"";
  position:absolute;
  right:22px;
  bottom:-6px;
  width:10px;
  height:10px;
  background:#0f1415;
  border-right:1px solid rgba(218,169,91,.42);
  border-bottom:1px solid rgba(218,169,91,.42);
  transform:rotate(45deg);
}
.heroCritFloatingTooltipV307.placeBelow::after{
  top:-6px;
  bottom:auto;
  transform:rotate(225deg);
}
.heroCritFloatingTooltipV307>strong{
  display:block;
  margin-bottom:7px;
  color:#f0b35e;
  font-size:12px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.heroCritFloatingTooltipV307>div{
  min-height:28px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  padding:4px 0;
  border-top:1px solid rgba(255,255,255,.065);
  color:#d2d8d5;
  font-size:11.5px;
}
.heroCritFloatingTooltipV307>div>span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.heroCritFloatingTooltipV307>div>b{
  color:#f5c47c;
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
}
.heroCritFloatingTooltipV307>div>em{
  grid-column:1/-1;
  margin-top:-2px;
  color:#dd746b;
  font-size:9px;
  line-height:1.2;
  font-style:normal;
}
@media(max-width:700px){
  .heroCritFloatingTooltipV307{width:min(260px,calc(100vw - 20px));padding:10px 11px}
  .heroCritFloatingTooltipV307>strong{font-size:11px}
  .heroCritFloatingTooltipV307>div{font-size:9px}
}


/* ========================================================================
   v0.3.5.309 — BATTLE HERO CRITS TOOLTIP REMOVAL + STATIC METRIC CLEANUP
   Scope lock: only the hero "Crits" metric. It is a static KPI, not a tooltip trigger.
   ======================================================================== */
.cinematicReplayPage .approvedSubMetricsV266 .critInsightV266{
  cursor:default!important;
  outline:none!important;
}
.cinematicReplayPage .approvedSubMetricsV266 .critInsightV266 .heroCritTooltipV266,
.heroCritFloatingTooltipV307{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}


/* ========================================================================
   v0.3.5.310 — BATTLE KPI ENTRY ANIMATION + RECORD SIGNAL FOUNDATION
   One-shot, staggered Battle Pulse. No infinite motion. Reduced-motion safe.
   ======================================================================== */
.cinematicReplayPage .battleEntryMetricV310{
  will-change:transform,opacity,filter;
}
.cinematicReplayPage .battleEntryMetricV310.kpiEntryPendingV310{
  opacity:.46;
  transform:translateY(4px);
  filter:saturate(.78) brightness(.86);
}
.cinematicReplayPage .battleEntryMetricV310.kpiEntryRunningV310{
  opacity:1;
  transform:translateY(0);
  filter:none;
  transition:opacity .18s ease,transform .22s ease,filter .22s ease;
}
.cinematicReplayPage .battleEntryMetricV310.kpiEntryDoneV310{
  opacity:1;
  transform:none;
  filter:none;
}
@keyframes battleKpiPulseV310{
  0%{box-shadow:inset 0 0 0 0 rgba(169,229,27,0)}
  36%{box-shadow:inset 0 0 0 1px rgba(169,229,27,.18),0 0 15px rgba(169,229,27,.07)}
  100%{box-shadow:inset 0 0 0 0 rgba(169,229,27,0),0 0 0 rgba(169,229,27,0)}
}
.cinematicReplayPage .approvedHeroPrimaryStats .battleEntryMetricV310.kpiPulseV310,
.cinematicReplayPage .approvedSubMetricsV266 .battleEntryMetricV310.kpiPulseV310{
  animation:battleKpiPulseV310 .42s ease-out 1;
}
.cinematicReplayPage .approvedHeroPrimaryStats .battleEntryMetricV310.kpiPulseV310>span,
.cinematicReplayPage .approvedSubMetricsV266 .battleEntryMetricV310.kpiPulseV310>span{
  filter:brightness(1.18) drop-shadow(0 0 7px rgba(169,229,27,.16));
}
/* Foundation hook for later verified record badges. No record claim is shown in .310. */
.cinematicReplayPage .battleEntryMetricV310[data-record-signal="verified"]{
  position:relative;
}
@media (prefers-reduced-motion: reduce){
  .cinematicReplayPage .battleEntryMetricV310{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
    transition:none!important;
  }
}


/* ========================================================================
   v0.3.5.311 FIX1 — BATTLE MEDAL + KPI PARALLEL ENTRY ANIMATION
   Base: v0.3.5.310. Medal reveal runs in parallel with KPI count-up.
   ======================================================================== */
.cinematicReplayPage .approvedAwardsRailV301.medalEntryActiveV311Fix1::after{
  opacity:0!important;
}
.cinematicReplayPage .approvedAwardsRailV301 .approvedAward.medalEntryPendingV311Fix1 > .approvedAwardIcon,
.cinematicReplayPage .approvedAwardsRailV301 .approvedAward.medalEntryPendingV311Fix1 > .realGunMarksRow{
  opacity:0!important;
  transform:translateY(7px) scale(.74)!important;
  filter:brightness(.76) saturate(.72)!important;
}
.cinematicReplayPage .approvedAwardsRailV301 .approvedAward.medalEntryRunningV311Fix1 > .approvedAwardIcon,
.cinematicReplayPage .approvedAwardsRailV301 .approvedAward.medalEntryRunningV311Fix1 > .realGunMarksRow{
  animation:battleMedalEntryV311Fix1 .32s cubic-bezier(.2,.78,.26,1.14) both!important;
  will-change:transform,opacity,filter;
}
.cinematicReplayPage .approvedAwardsRailV301 .approvedAward.mastery.medalEntryRunningV311Fix1 > .approvedAwardIcon{
  animation-name:battleMasteryEntryV311Fix1!important;
  animation-duration:.40s!important;
}
.cinematicReplayPage .approvedAwardsRailV301 .approvedAward.medalEntryDoneV311Fix1 > .approvedAwardIcon,
.cinematicReplayPage .approvedAwardsRailV301 .approvedAward.medalEntryDoneV311Fix1 > .realGunMarksRow{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}
@keyframes battleMedalEntryV311Fix1{
  0%{opacity:0;transform:translateY(7px) scale(.74);filter:brightness(.76) saturate(.72)}
  68%{opacity:1;transform:translateY(-1px) scale(1.06);filter:brightness(1.16) saturate(1.05) drop-shadow(0 0 8px rgba(232,185,78,.15))}
  100%{opacity:1;transform:translateY(0) scale(1);filter:none}
}
@keyframes battleMasteryEntryV311Fix1{
  0%{opacity:0;transform:translateY(8px) scale(.68);filter:brightness(.72) saturate(.68)}
  64%{opacity:1;transform:translateY(-2px) scale(1.09);filter:brightness(1.2) saturate(1.08) drop-shadow(0 0 11px rgba(232,185,78,.22))}
  100%{opacity:1;transform:translateY(0) scale(1);filter:none}
}
.cinematicReplayPage .approvedAwardsRailV301.medalEntryGlowPulseV311Fix1::after{
  transform-origin:center center!important;
  animation:battleMedalGlowBloomV311Fix1 .52s ease-out 1!important;
}
@keyframes battleMedalGlowBloomV311Fix1{
  0%{transform:scaleX(.8) scaleY(.86)}
  45%{transform:scaleX(1.05) scaleY(1.08)}
  100%{transform:scaleX(1) scaleY(1)}
}
@media (prefers-reduced-motion: reduce){
  .cinematicReplayPage .approvedAwardsRailV301.medalEntryActiveV311Fix1::after{opacity:.78!important}
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward > .approvedAwardIcon,
  .cinematicReplayPage .approvedAwardsRailV301 .approvedAward > .realGunMarksRow{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
  }
  .cinematicReplayPage .approvedAwardsRailV301.medalEntryGlowPulseV311Fix1::after{animation:none!important}
}


/* v0.3.5.313 — replay cards video badge in YouTube-red instead of burgundy */
.approvedReplaysMockup .replayCard.approvedMockupCard:hover .cardVideoBadge{
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:0 12px 24px rgba(0,0,0,.38),0 0 20px rgba(255,47,47,.26)!important;
  filter:brightness(1.03)!important;
}

/* ========================================================================
   v0.3.5.314 — GLOBAL SMART SEARCH QUICK RESULTS
   Modern command-palette style search anchored to the global header.
   ======================================================================== */
.approvedTopbar .approvedSearchBox{
  position:relative!important;
  transition:width .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease!important;
}
.approvedTopbar .approvedSearchBox:focus-within,
.approvedTopbar .approvedSearchBox.smartSearchOpenV314{
  width:330px!important;
  border-color:rgba(169,229,27,.32)!important;
  background:rgba(7,13,12,.94)!important;
  box-shadow:0 0 0 1px rgba(169,229,27,.055),0 10px 30px rgba(0,0,0,.18)!important;
}
.globalSmartSearchV314{
  position:fixed;
  z-index:25000;
  overflow:auto;
  overscroll-behavior:contain;
  padding:7px;
  border:1px solid rgba(202,218,209,.17);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(44,50,54,.96),rgba(27,32,35,.975));
  box-shadow:0 26px 70px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(255,255,255,.025);
  backdrop-filter:blur(18px);
  color-scheme:dark;
  scrollbar-width:thin;
  scrollbar-color:rgba(169,229,27,.25) rgba(255,255,255,.025);
  animation:globalSmartSearchInV314 .15s ease-out both;
}
.globalSmartSearchV314[hidden]{display:none!important}
@keyframes globalSmartSearchInV314{
  from{opacity:0;transform:translateY(-5px) scale(.992)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.globalSmartSearchV314::-webkit-scrollbar{width:6px}
.globalSmartSearchV314::-webkit-scrollbar-track{background:rgba(255,255,255,.025)}
.globalSmartSearchV314::-webkit-scrollbar-thumb{background:rgba(169,229,27,.22);border-radius:6px}
.globalSmartSearchGroupV314{padding:3px 0 5px}
.globalSmartSearchGroupV314+.globalSmartSearchGroupV314{border-top:1px solid rgba(205,222,212,.07)}
.globalSmartSearchGroupHeadV314{
  min-height:29px;
  display:flex;
  align-items:center;
  padding:0 8px;
  color:#89958f;
  font-family:var(--approved-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.globalSmartSearchItemsV314{display:grid;gap:6px}
.globalSmartSearchItemV314{
  min-width:0;
  min-height:60px;
  display:grid;
  grid-template-columns:74px minmax(0,1fr) 34px;
  align-items:center;
  gap:12px;
  padding:6px 10px;
  border:1px solid transparent;
  border-radius:7px;
  color:#e8eeea;
  text-decoration:none;
  background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));
  transition:background .13s ease,border-color .13s ease,transform .13s ease,box-shadow .13s ease;
}
.globalSmartSearchItemV314:hover,
.globalSmartSearchItemV314.isActiveV314{
  background:linear-gradient(90deg,rgba(169,229,27,.11),rgba(70,78,74,.34) 52%,rgba(46,52,56,.28));
  border-color:rgba(169,229,27,.24);
  transform:translateY(-1px);
  box-shadow:inset 2px 0 0 rgba(169,229,27,.52);
}
.globalSmartSearchTankArtV314,
.globalSmartSearchReplayArtV314,
.globalSmartSearchMapArtV314,
.globalSmartSearchPlayerV314{
  width:68px;
  height:46px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:5px;
  background:rgba(255,255,255,.025);
}
.globalSmartSearchTankArtV314 img,
.globalSmartSearchReplayArtV314 img{
  width:68px!important;
  height:46px!important;
  max-width:68px!important;
  max-height:46px!important;
  object-fit:contain!important;
  filter:brightness(1.07) saturate(.94) drop-shadow(0 5px 5px rgba(0,0,0,.45))!important;
  transition:filter .13s ease,transform .13s ease!important;
}
.globalSmartSearchItemV314:hover .globalSmartSearchTankArtV314 img,
.globalSmartSearchItemV314:hover .globalSmartSearchReplayArtV314 img,
.globalSmartSearchItemV314.isActiveV314 .globalSmartSearchTankArtV314 img,
.globalSmartSearchItemV314.isActiveV314 .globalSmartSearchReplayArtV314 img{
  transform:scale(1.035)!important;
  filter:brightness(1.16) saturate(1.02) drop-shadow(0 6px 6px rgba(0,0,0,.48))!important;
}
.globalSmartSearchMapArtV314{
  background-position:center!important;
  background-size:cover!important;
  border:1px solid rgba(204,220,211,.09);
  filter:saturate(.82) brightness(.91);
}
.globalSmartSearchPlayerV314{
  width:42px;
  height:42px;
  justify-self:center;
  border-radius:50%;
  border:1px solid rgba(169,229,27,.22);
  background:radial-gradient(circle at 38% 32%,rgba(169,229,27,.16),rgba(18,28,23,.92) 64%);
  color:#dff2bd;
  font-size:15px;
  font-weight:950;
}
.globalSmartSearchCopyV314{min-width:0;display:flex;flex-direction:column;gap:6px}
.globalSmartSearchCopyV314 strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#edf2ef;
  font-family:var(--approved-ui);
  font-size:12.5px;
  line-height:1;
  font-weight:900;
}
.globalSmartSearchCopyV314 strong mark{
  padding:0;
  background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));
  color:#b8ee43;
}
.globalSmartSearchCopyV314 small{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#7e8c85;
  font-size:8.5px;
  line-height:1;
  font-weight:650;
}
.globalSmartSearchCopyV314 small mark{padding:0;background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));color:#aab9b1}
.globalSmartSearchArrowV314{
  justify-self:center;
  color:#68766f;
  font-size:16px;
  font-style:normal;
  transition:color .13s ease,transform .13s ease;
}
.globalSmartSearchItemV314:hover .globalSmartSearchArrowV314,
.globalSmartSearchItemV314.isActiveV314 .globalSmartSearchArrowV314{color:var(--green);transform:translateX(2px)}
.globalSmartSearchItemV314.smartPlayerV314{grid-template-columns:74px minmax(0,1fr) 34px}
.globalSmartSearchItemV314.smartReplayV314{grid-template-columns:74px minmax(0,1fr) 92px}
.globalSmartSearchReplayDamageV314{justify-self:end;text-align:right;white-space:nowrap}
.globalSmartSearchReplayDamageV314 b{display:block;color:#edf3ef;font-size:12.5px;line-height:1;font-weight:950;font-variant-numeric:tabular-nums}
.globalSmartSearchReplayDamageV314 small{display:block;margin-top:4px;color:#77847d;font-size:7px;line-height:1;text-transform:uppercase}
.globalSmartSearchAllV314{
  min-height:54px;
  margin-top:5px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid rgba(169,229,27,.14);
  border-radius:7px;
  background:linear-gradient(90deg,rgba(169,229,27,.06),rgba(12,20,17,.7));
  color:#dce5df;
  text-decoration:none;
  transition:border-color .13s ease,background .13s ease;
}
.globalSmartSearchAllV314:hover,.globalSmartSearchAllV314.isActiveV314{border-color:rgba(169,229,27,.32);background:linear-gradient(90deg,rgba(169,229,27,.10),rgba(15,25,21,.82))}
.globalSmartSearchAllV314>span{min-width:0;display:flex;flex-direction:column;gap:4px}
.globalSmartSearchAllV314 strong{font-size:10.5px;font-weight:900;color:#e8eee9}
.globalSmartSearchAllV314 small{font-size:9px;color:#809087}
.globalSmartSearchAllV314 kbd{
  min-width:48px;
  height:26px;
  display:grid;
  place-items:center;
  border:1px solid rgba(205,220,212,.13);
  border-bottom-color:rgba(205,220,212,.24);
  border-radius:4px;
  background:#0a100e;
  color:#829089;
  font-family:var(--approved-ui);
  font-size:7px;
  box-shadow:0 2px 0 rgba(0,0,0,.22);
}
.globalSmartSearchHintV314,.globalSmartSearchEmptyV314{
  min-height:116px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:17px 14px;
}
.globalSmartSearchHintIconV314{
  width:48px;height:48px;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid rgba(169,229,27,.15);border-radius:9px;background:rgba(169,229,27,.045);color:#9ed62d;font-size:24px;
}
.globalSmartSearchHintV314>div,.globalSmartSearchEmptyV314{color:#dfe7e2}
.globalSmartSearchHintV314 strong,.globalSmartSearchEmptyV314 strong{display:block;font-size:11.5px;font-weight:900}
.globalSmartSearchHintV314 small,.globalSmartSearchEmptyV314 small{display:block;margin-top:7px;color:#78867f;font-size:9px;line-height:1.45}
.globalSmartSearchEmptyV314{flex-direction:column;align-items:flex-start;justify-content:center}
.globalSmartSearchEmptyV314.error strong{color:#eab176}
.globalSmartSearchLoadingV314{height:104px;display:grid;gap:7px;padding:15px}
.globalSmartSearchLoadingV314 i{display:block;border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.025),rgba(255,255,255,.075),rgba(255,255,255,.025));background-size:220% 100%;animation:globalSmartSearchSkeletonV314 .9s linear infinite}
@keyframes globalSmartSearchSkeletonV314{to{background-position:-220% 0}}
@media(max-width:1200px){
  .approvedTopbar .approvedSearchBox:focus-within,.approvedTopbar .approvedSearchBox.smartSearchOpenV314{width:255px!important}
}
@media(max-width:850px){.globalSmartSearchV314{display:none!important}}
@media(prefers-reduced-motion:reduce){
  .globalSmartSearchV314,.globalSmartSearchLoadingV314 i,.globalSmartSearchItemV314,.globalSmartSearchTankArtV314 img,.globalSmartSearchReplayArtV314 img{animation:none!important;transition:none!important;transform:none!important}
}


/* ========================================================================
   v0.3.5.315 — GLOBAL SMART SEARCH READABILITY + LIGHTER SURFACE CONTRAST
   Larger typography/previews and a lighter graphite panel for better legibility.
   ======================================================================== */
.globalSmartSearchV314{
  border-color:rgba(214,224,219,.20)!important;
}
.globalSmartSearchGroupV314+.globalSmartSearchGroupV314{
  border-top:1px solid rgba(227,235,231,.08)!important;
}
.globalSmartSearchGroupHeadV314{
  color:#aeb9b4!important;
}
.globalSmartSearchCopyV314 strong,
.globalSmartSearchReplayDamageV314 b,
.globalSmartSearchAllV314 strong,
.globalSmartSearchHintV314 strong,
.globalSmartSearchEmptyV314 strong{
  text-shadow:0 1px 0 rgba(0,0,0,.24)!important;
}
.globalSmartSearchCopyV314 small,
.globalSmartSearchReplayDamageV314 small,
.globalSmartSearchAllV314 small,
.globalSmartSearchHintV314 small,
.globalSmartSearchEmptyV314 small{
  color:#98a49e!important;
}
.globalSmartSearchTankArtV314,
.globalSmartSearchReplayArtV314,
.globalSmartSearchMapArtV314,
.globalSmartSearchPlayerV314{
  border:1px solid rgba(218,228,223,.10)!important;
  background-color:rgba(255,255,255,.03)!important;
}
.globalSmartSearchItemV314:hover,
.globalSmartSearchItemV314.isActiveV314{
  box-shadow:inset 3px 0 0 rgba(169,229,27,.56),0 10px 24px rgba(0,0,0,.14)!important;
}
.globalSmartSearchAllV314{
  background:linear-gradient(90deg,rgba(169,229,27,.08),rgba(70,78,74,.28))!important;
}
.globalSmartSearchAllV314:hover,.globalSmartSearchAllV314.isActiveV314{
  background:linear-gradient(90deg,rgba(169,229,27,.12),rgba(78,87,82,.34))!important;
}


/* v0.3.5.316 — VERIFIED RECORD BADGES FOUNDATION + BATTLE SIGNALS */
.verifiedRecordSignalsV316{display:flex;align-items:center;gap:5px;min-width:0;pointer-events:none}
.verifiedRecordBadgeV316{min-width:0;height:22px;padding:0 7px 0 6px;display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(228,184,73,.34);border-radius:4px;background:linear-gradient(180deg,rgba(68,52,18,.92),rgba(27,24,14,.94));color:#f4d778;box-shadow:inset 0 1px 0 rgba(255,239,172,.05),0 5px 14px rgba(0,0,0,.20);font-family:var(--approved-ui);white-space:nowrap}
.verifiedRecordBadgeV316>i{width:8px;height:8px;flex:0 0 auto;display:block;transform:rotate(45deg);border:1px solid currentColor;background:rgba(238,194,78,.18);box-shadow:0 0 8px rgba(238,194,78,.12)}
.verifiedRecordBadgeV316>b{overflow:hidden;text-overflow:ellipsis;font-size:7px;line-height:1;font-weight:950;letter-spacing:.045em}
.verifiedRecordBadgeV316.record-tank_top10_damage{border-color:rgba(169,229,27,.28);color:#d9ef8c;background:linear-gradient(180deg,rgba(45,58,22,.91),rgba(24,29,16,.94))}
.verifiedRecordBadgeV316.record-tank_top10_damage>i{background:rgba(169,229,27,.13);box-shadow:0 0 8px rgba(169,229,27,.10)}
.approvedReplaysMockup .cardRecordSignalsV316{position:absolute;z-index:7;right:7px;top:34px;max-width:72%;justify-content:flex-end;flex-wrap:wrap}
.approvedReplaysMockup .cardRecordSignalsV316 .verifiedRecordBadgeV316{height:20px;padding:0 6px}
.approvedReplaysMockup .cardRecordSignalsV316 .verifiedRecordBadgeV316>b{font-size:6.4px}
.approvedReplaysMockup .replayCard:hover .cardRecordSignalsV316 .verifiedRecordBadgeV316{filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,239,172,.07),0 7px 16px rgba(0,0,0,.23)}
.cinematicReplayPage .battleRecordSignalsV316{position:absolute;z-index:18;left:50%;top:139px;transform:translateX(-50%);justify-content:center;max-width:42%;flex-wrap:wrap}
.cinematicReplayPage .battleRecordSignalsV316 .verifiedRecordBadgeV316{height:24px;padding:0 8px;border-radius:5px}
.cinematicReplayPage .battleRecordSignalsV316 .verifiedRecordBadgeV316>b{font-size:7.5px}
@media(max-width:1250px) and (min-width:851px){.cinematicReplayPage .battleRecordSignalsV316{top:132px;max-width:46%}.cinematicReplayPage .battleRecordSignalsV316 .verifiedRecordBadgeV316{height:22px;padding:0 7px}}
@media(max-width:850px){.cinematicReplayPage .battleRecordSignalsV316{position:relative;left:auto;top:auto;transform:none;max-width:none;margin:6px 18px 0;justify-content:flex-start}}


/* ========================================================================
   v0.3.5.317 — VERIFIED RECORD BADGE PREMIUM VISUAL POLISH
   Keep .316 logic untouched; only upgrade the visual treatment of verified badges.
   ======================================================================== */
.verifiedRecordSignalsV316{gap:6px}
.verifiedRecordBadgeV316{
  position:relative;
  overflow:hidden;
  min-width:0;
  height:26px;
  padding:0 10px 0 9px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(228,184,73,.42);
  border-radius:6px;
  background:linear-gradient(180deg,rgba(82,64,24,.96),rgba(35,30,17,.98));
  color:#f6dd8c;
  box-shadow:inset 0 1px 0 rgba(255,242,184,.10),0 8px 20px rgba(0,0,0,.24),0 0 18px rgba(228,184,73,.08);
}
.verifiedRecordBadgeV316::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 45%);
}
.verifiedRecordBadgeV316>i{
  width:14px;
  height:14px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform:none;
  border-radius:999px;
  border:1px solid currentColor;
  background:radial-gradient(circle at 50% 45%,rgba(255,234,160,.24),rgba(226,182,67,.11) 58%,rgba(226,182,67,.04) 100%);
  box-shadow:0 0 10px rgba(238,194,78,.14);
}
.verifiedRecordBadgeV316>i::before{content:'✦';font-size:8px;line-height:1;font-weight:900;color:currentColor;transform:translateY(-.2px)}
.verifiedRecordBadgeV316>b{
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:7.8px;
  line-height:1;
  font-weight:950;
  letter-spacing:.055em;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(0,0,0,.28);
}
.verifiedRecordBadgeV316.record-daily_damage{border-color:rgba(241,191,84,.46);color:#f8df8d}
.verifiedRecordBadgeV316.record-daily_damage>i::before{content:'✦'}
.verifiedRecordBadgeV316.record-tank_top10_damage{
  border-color:rgba(169,229,27,.34);
  color:#e3f79b;
  background:linear-gradient(180deg,rgba(56,71,27,.95),rgba(24,29,16,.98));
  box-shadow:inset 0 1px 0 rgba(242,255,206,.06),0 8px 20px rgba(0,0,0,.24),0 0 16px rgba(169,229,27,.08);
}
.verifiedRecordBadgeV316.record-tank_top10_damage>i{background:radial-gradient(circle at 50% 45%,rgba(223,255,168,.22),rgba(169,229,27,.10) 58%,rgba(169,229,27,.04) 100%);box-shadow:0 0 10px rgba(169,229,27,.14)}
.verifiedRecordBadgeV316.record-tank_top10_damage>i::before{content:'↑';font-size:9px}
.verifiedRecordBadgeV316.record-personal_vehicle_damage{border-color:rgba(245,199,108,.40);color:#ffe2a1}
.verifiedRecordBadgeV316.record-personal_vehicle_damage>i::before{content:'★';font-size:8px}
.approvedReplaysMockup .cardRecordSignalsV316{right:8px;top:32px;max-width:74%;gap:5px}
.approvedReplaysMockup .cardRecordSignalsV316 .verifiedRecordBadgeV316{height:22px;padding:0 8px 0 7px;border-radius:5px}
.approvedReplaysMockup .cardRecordSignalsV316 .verifiedRecordBadgeV316>i{width:12px;height:12px}
.approvedReplaysMockup .cardRecordSignalsV316 .verifiedRecordBadgeV316>i::before{font-size:7px}
.approvedReplaysMockup .cardRecordSignalsV316 .verifiedRecordBadgeV316>b{font-size:7px;letter-spacing:.05em}
.approvedReplaysMockup .replayCard:hover .cardRecordSignalsV316 .verifiedRecordBadgeV316{filter:brightness(1.05);box-shadow:inset 0 1px 0 rgba(255,239,172,.08),0 8px 18px rgba(0,0,0,.25),0 0 18px rgba(228,184,73,.10)}
.cinematicReplayPage .battleRecordSignalsV316{top:137px;max-width:48%;gap:7px}
.cinematicReplayPage .battleRecordSignalsV316 .verifiedRecordBadgeV316{height:28px;padding:0 12px 0 10px;border-radius:7px;box-shadow:inset 0 1px 0 rgba(255,242,184,.12),0 10px 24px rgba(0,0,0,.28),0 0 24px rgba(228,184,73,.10);animation:verifiedRecordBadgeIntroV317 .42s cubic-bezier(.2,.8,.2,1) both}
.cinematicReplayPage .battleRecordSignalsV316 .verifiedRecordBadgeV316:nth-child(2){animation-delay:.05s}
.cinematicReplayPage .battleRecordSignalsV316 .verifiedRecordBadgeV316:nth-child(3){animation-delay:.10s}
.cinematicReplayPage .battleRecordSignalsV316 .verifiedRecordBadgeV316>i{width:15px;height:15px}
.cinematicReplayPage .battleRecordSignalsV316 .verifiedRecordBadgeV316>i::before{font-size:8.5px}
.cinematicReplayPage .battleRecordSignalsV316 .verifiedRecordBadgeV316>b{font-size:8.8px;letter-spacing:.06em}
@keyframes verifiedRecordBadgeIntroV317{0%{transform:scale(.92);opacity:0}70%{transform:scale(1.04);opacity:1}100%{transform:scale(1);opacity:1}}
@media(max-width:1250px) and (min-width:851px){
  .cinematicReplayPage .battleRecordSignalsV316{top:132px;max-width:50%}
  .cinematicReplayPage .battleRecordSignalsV316 .verifiedRecordBadgeV316{height:26px;padding:0 10px 0 9px}
  .cinematicReplayPage .battleRecordSignalsV316 .verifiedRecordBadgeV316>b{font-size:8.1px}
}
@media(max-width:850px){
  .cinematicReplayPage .battleRecordSignalsV316 .verifiedRecordBadgeV316{height:24px;padding:0 9px 0 8px}
  .cinematicReplayPage .battleRecordSignalsV316 .verifiedRecordBadgeV316>b{font-size:7.5px}
}


/* ========================================================================
   v0.3.5.319 — BATTLE COMMENTS FOUNDATION + HERO COMMENT ACTION
   ======================================================================== */
.cinematicReplayPage .approvedCommentActionV319{gap:8px!important}
.cinematicReplayPage .approvedCommentActionV319>b{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:rgba(169,229,27,.11);border:1px solid rgba(169,229,27,.22);color:#d9ef8c;font-size:9px;line-height:1;font-weight:900;font-family:var(--approved-ui);font-style:normal}
.battleCommentActionGlyphV319{position:relative;width:18px;height:14px;display:inline-block;border:1.7px solid currentColor;border-radius:5px;box-sizing:border-box;color:#d7ddda}
.battleCommentActionGlyphV319::after{content:'';position:absolute;left:3px;bottom:-4px;width:5px;height:5px;border-left:1.7px solid currentColor;transform:skewY(-35deg);background:transparent}
.cinematicReplayPage .approvedCommentActionV319:hover .battleCommentActionGlyphV319{color:#e8f6c5}
.cinematicReplayPage .approvedCommentActionV319:hover>b{background:rgba(169,229,27,.16);border-color:rgba(169,229,27,.35);color:#efffc1}
.battleCommentsV319{width:min(1280px,calc(100% - 40px));margin:18px auto 58px;padding:0;border:1px solid rgba(255,255,255,.085);border-radius:10px;background:linear-gradient(180deg,rgba(28,33,35,.94),rgba(16,20,21,.98));box-shadow:0 24px 70px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.025);overflow:hidden;scroll-margin-top:92px;font-family:var(--approved-ui)}
.battleCommentsHeadV319{min-height:78px;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(255,255,255,.07);background:linear-gradient(90deg,rgba(255,255,255,.018),rgba(169,229,27,.018),rgba(255,255,255,0))}
.battleCommentsHeadV319>div{display:flex;align-items:center;gap:10px}.battleCommentsHeadV319 strong{font-size:16px;letter-spacing:.07em;font-weight:950;color:#f1f3f2}.battleCommentsHeadV319>div>span{height:22px;min-width:24px;padding:0 7px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:rgba(169,229,27,.10);border:1px solid rgba(169,229,27,.18);color:#d8ee8b;font-size:10px;font-weight:900}.battleCommentsHeadV319>small{font-size:11px;color:#8f9995;letter-spacing:.015em}
.battleCommentsHeadGlyphV319{position:relative;width:20px;height:16px;border:1.8px solid #b9ca74;border-radius:6px;box-sizing:border-box}.battleCommentsHeadGlyphV319::after{content:'';position:absolute;left:4px;bottom:-4px;width:6px;height:5px;border-left:1.8px solid #b9ca74;transform:skewY(-35deg)}
.battleCommentComposerV319{margin:20px 24px 12px;padding:14px 15px;display:flex;gap:12px;align-items:flex-start;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:linear-gradient(180deg,rgba(42,48,50,.74),rgba(28,33,35,.76));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.battleCommentComposerV319:focus-within{border-color:rgba(169,229,27,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 0 0 2px rgba(169,229,27,.035)}
.battleCommentAvatarV319{position:relative;width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#4b5553,#252b2c);border:1px solid rgba(255,255,255,.12);box-shadow:0 5px 14px rgba(0,0,0,.22);color:#f1f3f2;font-size:11px;font-weight:950;letter-spacing:.03em}.battleCommentAvatarV319>i{position:absolute;right:-3px;bottom:-2px;height:14px;min-width:18px;padding:0 3px;display:flex;align-items:center;justify-content:center;border-radius:7px;background:#272d2e;border:1px solid rgba(169,229,27,.32);color:#d9ee8c;font-size:6px;font-style:normal;font-weight:950;letter-spacing:.03em}
.battleCommentComposerMainV319{min-width:0;flex:1}.battleCommentComposerMainV319 textarea,.battleCommentInlineEditV319 textarea{width:100%;resize:vertical;min-height:56px;max-height:180px;padding:9px 11px;border:0;border-radius:6px;outline:0;background:rgba(7,10,11,.52);box-shadow:inset 0 0 0 1px rgba(255,255,255,.065);color:#edf0ee;font:500 13px/1.45 var(--approved-ui)}.battleCommentComposerMainV319 textarea::placeholder{color:#727d79}.battleCommentComposerMainV319 textarea:focus,.battleCommentInlineEditV319 textarea:focus{box-shadow:inset 0 0 0 1px rgba(169,229,27,.24)}
.battleCommentComposerFootV319{height:34px;margin-top:7px;display:flex;align-items:center;justify-content:flex-end;gap:12px}.battleCommentComposerFootV319>span{color:#78827e;font-size:9px}.battleCommentComposerFootV319 button,.battleCommentLoginV319,.battleCommentsMoreV319 button,.battleCommentInlineEditV319 button,.battleCommentDeleteConfirmV319 button{height:31px;padding:0 14px;border:1px solid rgba(169,229,27,.28);border-radius:5px;background:linear-gradient(180deg,rgba(130,176,25,.94),rgba(90,125,15,.96));color:#101407;font:900 9px/1 var(--approved-ui);letter-spacing:.055em;cursor:pointer;box-shadow:inset 0 1px 0 rgba(238,255,194,.15)}.battleCommentComposerFootV319 button:hover:not(:disabled),.battleCommentLoginV319:hover,.battleCommentsMoreV319 button:hover{filter:brightness(1.08)}.battleCommentComposerFootV319 button:disabled{opacity:.38;cursor:default}.battleCommentComposerFootV319 button.isBusy{opacity:.65}
.battleCommentComposerV319.isGuest{align-items:center}.battleCommentGuestCopyV319{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}.battleCommentGuestCopyV319 strong{font-size:12px;color:#e5e9e6}.battleCommentGuestCopyV319 span{font-size:10px;color:#8c9692}.battleCommentLoginV319{height:34px;flex:0 0 auto}
.battleCommentsListV319{padding:2px 24px 8px}.battleCommentRowV319{display:flex;gap:13px;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.055)}.battleCommentRowV319:last-child{border-bottom:0}.battleCommentBodyV319{min-width:0;flex:1}.battleCommentMetaV319{min-height:20px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.battleCommentAuthorV319{color:#f1f3f2;font-size:11px;font-weight:900}.battleCommentAuthorV319.playerProfileLink{cursor:pointer}.battleCommentAuthorV319.playerProfileLink:hover{color:#d9ee8d}.battleCommentMetaV319 time,.battleCommentMetaV319 em{color:#707a76;font-size:8.5px;font-style:normal}.battleCommentAdminV319{height:16px;padding:0 5px;display:inline-flex;align-items:center;border:1px solid rgba(232,184,73,.30);border-radius:3px;background:rgba(232,184,73,.07);color:#e9c967;font-size:6.5px;font-weight:950;letter-spacing:.06em}.battleCommentTextV319{max-width:940px;margin-top:5px;color:#cdd3d0;font-size:12px;line-height:1.55;overflow-wrap:anywhere}.battleCommentActionsV319{margin-top:7px;display:flex;gap:12px}.battleCommentActionsV319 button{padding:0;border:0;background:none;color:#7f8a85;font:700 8.5px/1 var(--approved-ui);cursor:pointer}.battleCommentActionsV319 button:hover{color:#bfc8c3}.battleCommentActionsV319 button.danger:hover{color:#e18a86}.battleCommentActionsV319[hidden]{display:none!important}
.battleCommentInlineEditV319{margin-top:8px}.battleCommentInlineEditV319>div{margin-top:7px;display:flex;gap:7px}.battleCommentInlineEditV319 button{height:28px}.battleCommentInlineEditV319 button:last-child,.battleCommentDeleteConfirmV319 button:last-child{border-color:rgba(255,255,255,.11);background:rgba(255,255,255,.04);color:#b7c0bc}
.battleCommentDeleteConfirmV319{margin-top:8px;min-height:38px;padding:7px 9px;display:flex;align-items:center;gap:7px;border:1px solid rgba(196,85,79,.16);border-radius:5px;background:rgba(117,44,40,.08)}.battleCommentDeleteConfirmV319[hidden]{display:none!important}.battleCommentDeleteConfirmV319 span{margin-right:auto;color:#b9c1be;font-size:9px}.battleCommentDeleteConfirmV319 button{height:27px}.battleCommentDeleteConfirmV319 button.danger{border-color:rgba(203,93,86,.35);background:linear-gradient(180deg,rgba(147,58,52,.92),rgba(104,38,34,.94));color:#ffe5e2}
.battleCommentsMoreV319{padding:4px 24px 22px;text-align:center}.battleCommentsMoreV319 button{min-width:150px;background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.10);color:#aeb8b3}.battleCommentsLoadingV319{padding:30px;text-align:center;color:#727d78;font-size:10px;letter-spacing:.03em}.battleCommentsEmptyV319{min-height:130px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:6px;color:#7f8985}.battleCommentsEmptyV319>i{width:29px;height:22px;border:1px solid rgba(255,255,255,.14);border-radius:8px;opacity:.7}.battleCommentsEmptyV319 strong{color:#b7c0bc;font-size:11px}.battleCommentsEmptyV319 span{font-size:9.5px}.battleCommentsEmptyV319.error strong{color:#dba09b}
@media(max-width:1100px){.battleCommentsV319{width:calc(100% - 28px)}.battleCommentsHeadV319>small{display:none}.cinematicReplayPage .approvedCommentActionV319>span{display:none!important}.cinematicReplayPage .approvedCommentActionV319{padding:0 11px!important}}
@media(max-width:700px){.battleCommentsV319{width:calc(100% - 20px);margin-bottom:34px}.battleCommentsHeadV319{padding:15px 16px;min-height:64px}.battleCommentComposerV319{margin:14px 14px 8px}.battleCommentsListV319{padding:0 14px 6px}.battleCommentsMoreV319{padding-left:14px;padding-right:14px}.battleCommentComposerV319.isGuest{flex-wrap:wrap}.battleCommentGuestCopyV319{min-width:180px}.battleCommentLoginV319{margin-left:52px}.battleCommentAvatarV319{width:36px;height:36px;flex-basis:36px}.battleCommentTextV319{font-size:11.5px}}

/* ========================================================================
   v0.3.5.320 — PLAYER CUSTOM AVATAR UPLOAD + COMMUNITY IDENTITY FOUNDATION
   ======================================================================== */
.playerProfileIdentityV320{display:flex;align-items:center;gap:16px;min-width:0;margin-bottom:4px}
.playerProfileIdentityCopyV320{min-width:0;flex:1 1 auto}
.playerProfileAvatarV320{position:relative;width:78px;height:78px;flex:0 0 78px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.16);background:radial-gradient(circle at 35% 28%,rgba(169,229,27,.14),rgba(38,45,44,.97) 60%,rgba(16,20,20,.99));box-shadow:0 12px 28px rgba(0,0,0,.28),0 0 0 4px rgba(255,255,255,.025);color:#f2f5f1;font-family:var(--approved-ui);font-size:20px;font-weight:950;letter-spacing:.04em;padding:0}
button.playerProfileAvatarV320{cursor:pointer}
.playerProfileAvatarV320>img{width:100%;height:100%;display:block;object-fit:cover}
.playerProfileAvatarV320>span{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
.playerProfileAvatarV320>em{position:absolute;inset:auto 6px 7px;padding:3px 5px;border-radius:4px;background:rgba(10,13,13,.86);border:1px solid rgba(169,229,27,.25);color:#dff38d;font-size:6px;line-height:1;font-style:normal;font-weight:950;letter-spacing:.07em;opacity:0;transform:translateY(3px);transition:.16s ease}
.playerProfileAvatarEditV320{position:absolute;right:4px;top:4px;width:19px;height:19px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#a9e51b;color:#172000;border:2px solid rgba(17,21,20,.92);font-size:9px;font-style:normal;font-weight:950;box-shadow:0 3px 9px rgba(0,0,0,.28)}
@media(hover:hover) and (pointer:fine){button.playerProfileAvatarV320:hover{border-color:rgba(169,229,27,.46);box-shadow:0 14px 30px rgba(0,0,0,.30),0 0 20px rgba(169,229,27,.10)}button.playerProfileAvatarV320:hover>em{opacity:1;transform:none}}

.communityAvatarV320{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:inherit;overflow:hidden;background:linear-gradient(145deg,#4b5553,#252b2c);color:#f1f3f2}
.communityAvatarV320>img{width:100%;height:100%;display:block;object-fit:cover}
.communityAvatarV320>b{font-size:11px;font-weight:950;letter-spacing:.03em}
.battleCommentAvatarV319>.communityAvatarV320{position:absolute;inset:0}
.battleCommentAvatarV319>i{z-index:2}
.globalSmartSearchPlayerV314.hasAvatarV320{overflow:hidden;padding:0!important;background:#252c2d!important}
.globalSmartSearchPlayerV314.hasAvatarV320>img{width:100%;height:100%;display:block;object-fit:cover}

.playerAvatarModalV320{position:fixed;z-index:99990;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;font-family:var(--approved-ui)}
.playerAvatarBackdropV320{position:absolute;inset:0;background:rgba(4,7,7,.82);backdrop-filter:blur(8px)}
.playerAvatarDialogV320{position:relative;z-index:1;width:min(820px,100%);max-height:calc(100vh - 48px);overflow:auto;border:1px solid rgba(255,255,255,.11);border-radius:14px;background:linear-gradient(180deg,rgba(43,49,50,.99),rgba(22,27,28,.995));box-shadow:0 36px 100px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.045);color:#edf1ef}
.playerAvatarDialogV320>header{min-height:92px;padding:20px 22px 18px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(90deg,rgba(169,229,27,.055),transparent 46%)}
.playerAvatarDialogV320>header>div>span,.playerAvatarPreviewColumnV320>span{display:block;color:#a9e51b;font-size:8px;font-weight:950;letter-spacing:.11em;text-transform:uppercase}
.playerAvatarDialogV320>header h2{margin:4px 0 4px;color:#fff;font-size:22px;line-height:1.05;font-weight:950;letter-spacing:-.02em}
.playerAvatarDialogV320>header p{margin:0;max-width:590px;color:#aab4b0;font-size:10px;line-height:1.45}
.playerAvatarDialogV320>header>button{width:36px;height:36px;flex:0 0 36px;border-radius:8px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035);color:#c8cecb;font-size:22px;line-height:1;cursor:pointer}
.playerAvatarEditorLayoutV320{display:grid;grid-template-columns:minmax(330px,1fr) 250px;gap:24px;padding:22px}
.playerAvatarCropColumnV320{min-width:0}
.playerAvatarCropV320{position:relative;width:min(360px,100%);aspect-ratio:1/1;margin:0 auto;border-radius:12px;overflow:hidden;background:radial-gradient(circle at center,#353d3d,#1d2223 70%);border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 0 45px rgba(0,0,0,.22)}
.playerAvatarCropV320 canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.playerAvatarCropV320 canvas:active{cursor:grabbing}
.playerAvatarCropGuideV320{position:absolute;inset:1px;border-radius:50%;border:2px solid rgba(255,255,255,.76);box-shadow:0 0 0 100vmax rgba(4,7,7,.46),inset 0 0 0 1px rgba(0,0,0,.25);pointer-events:none}
.playerAvatarCropGuideV320::before,.playerAvatarCropGuideV320::after{content:'';position:absolute;background:rgba(255,255,255,.16);pointer-events:none}.playerAvatarCropGuideV320::before{left:50%;top:0;bottom:0;width:1px}.playerAvatarCropGuideV320::after{top:50%;left:0;right:0;height:1px}
.playerAvatarEditorEmptyV320{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;background:linear-gradient(180deg,rgba(37,43,44,.96),rgba(25,30,31,.98));pointer-events:none}
.playerAvatarEditorEmptyV320.isHiddenV320{display:none}
.playerAvatarEditorEmptyV320>i{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:12px;border:1px dashed rgba(169,229,27,.45);color:#c9ee65;background:rgba(169,229,27,.055);font-size:25px;font-style:normal;font-weight:300}
.playerAvatarEditorEmptyV320>strong{font-size:13px;color:#f2f5f3}.playerAvatarEditorEmptyV320>small{margin-top:6px;max-width:250px;color:#98a29f;font-size:8.5px;line-height:1.4}
.playerAvatarCropToolsV320{display:flex;align-items:end;gap:10px;margin:14px auto 0;width:min(360px,100%)}
.playerAvatarCropToolsV320>label{flex:1 1 auto;color:#aeb7b4;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.playerAvatarCropToolsV320 input{width:100%;accent-color:#a9e51b;margin-top:6px}.playerAvatarCropToolsV320 button{height:32px;padding:0 10px;border-radius:6px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035);color:#c8d0cc;font-size:8px;font-weight:900;cursor:pointer}
.playerAvatarCropToolsV320 button:disabled,.playerAvatarCropToolsV320 input:disabled{opacity:.35;cursor:default}
.playerAvatarChooseV320{width:min(360px,100%);height:38px;margin:12px auto 0;display:flex;align-items:center;justify-content:center;border-radius:7px;border:1px solid rgba(169,229,27,.38);background:linear-gradient(180deg,rgba(169,229,27,.15),rgba(169,229,27,.08));color:#e7f7b0;font-size:9px;font-weight:950;letter-spacing:.055em;cursor:pointer}.playerAvatarChooseV320>input{display:none}
.playerAvatarPreviewColumnV320{min-width:0;padding:4px 0 0;border-left:1px solid rgba(255,255,255,.075);padding-left:24px}
.playerAvatarPreviewProfileV320{width:120px;height:120px;margin:14px 0 7px;border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,.17);background:#262d2e;box-shadow:0 12px 25px rgba(0,0,0,.23)}
.playerAvatarPreviewProfileV320 canvas{width:100%;height:100%;display:block}
.playerAvatarPreviewColumnV320>small{display:block;color:#8f9a96;font-size:8px;line-height:1.35}
.playerAvatarPreviewCommentV320{margin:22px 0 7px;display:flex;align-items:center;gap:10px;color:#e9eeeb;font-size:10px}.playerAvatarPreviewCommentV320 canvas{width:48px;height:48px;border-radius:50%;background:#262d2e;border:1px solid rgba(255,255,255,.13)}.playerAvatarPreviewCommentV320>b{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.playerAvatarPreviewColumnV320>p{margin:22px 0 0;padding:10px 11px;border-radius:7px;background:rgba(169,229,27,.045);border:1px solid rgba(169,229,27,.12);color:#a9b4b0;font-size:8.5px;line-height:1.45}
.playerAvatarDialogV320>footer{min-height:70px;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid rgba(255,255,255,.08);background:rgba(10,13,13,.20)}
.playerAvatarDialogV320>footer>div{display:flex;gap:8px}.playerAvatarDialogV320>footer button{height:38px;padding:0 15px;border-radius:7px;font-family:inherit;font-size:8.5px;font-weight:950;letter-spacing:.04em;cursor:pointer}.avatarCancelV320{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035);color:#c8d0cc}.avatarSaveV320{border:1px solid rgba(169,229,27,.38);background:#a9e51b;color:#152000;min-width:138px}.avatarSaveV320:disabled{opacity:.35;cursor:default}.avatarSaveV320.isBusyV320{opacity:.65}.avatarDeleteV320{border:1px solid rgba(232,96,89,.24);background:rgba(232,96,89,.06);color:#e89a94}

@media(max-width:850px){.playerProfileIdentityV320{gap:12px}.playerProfileAvatarV320{width:64px;height:64px;flex-basis:64px;font-size:16px}.playerAvatarModalV320{padding:12px}.playerAvatarDialogV320{max-height:calc(100vh - 24px)}.playerAvatarEditorLayoutV320{grid-template-columns:1fr;gap:18px;padding:16px}.playerAvatarPreviewColumnV320{border-left:0;border-top:1px solid rgba(255,255,255,.075);padding:18px 0 0;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}.playerAvatarPreviewColumnV320>span,.playerAvatarPreviewColumnV320>p{grid-column:1/-1}.playerAvatarPreviewProfileV320{width:88px;height:88px;margin:12px 0 6px}.playerAvatarPreviewCommentV320{margin:12px 0 6px}.playerAvatarDialogV320>footer{padding:12px 16px;flex-wrap:wrap}.playerAvatarDialogV320>footer>div{margin-left:auto}}
@media(max-width:520px){.playerProfileAvatarV320{width:56px;height:56px;flex-basis:56px}.playerAvatarDialogV320>header{padding:16px}.playerAvatarDialogV320>header h2{font-size:19px}.playerAvatarEditorLayoutV320{padding:12px}.playerAvatarDialogV320>footer{align-items:stretch}.playerAvatarDialogV320>footer>div{width:100%;margin:0}.playerAvatarDialogV320>footer button{flex:1 1 auto;padding:0 10px}.avatarDeleteV320{width:100%}}


/* v0.3.5.320 FIX1 — AVATAR LOCAL PREVIEW LOAD HARD FIX */
.playerAvatarFileStatusV320{width:min(360px,100%);min-height:18px;margin:7px auto 0;color:#8e9995;font-size:8px;line-height:1.35;text-align:center;overflow-wrap:anywhere}
.playerAvatarFileStatusV320.isReadyV320{color:#c9ed70}
.playerAvatarFileStatusV320.isErrorV320{color:#ef9690}

/* ========================================================================
   v0.3.5.321 FIX1 — BATTLE KPI GLASS PANELS ONLY
   Base: v0.3.5.320 FIX1.
   Scope lock: visual treatment ONLY for battle KPI / economy / secondary data
   panels. Hero background, result typography, tank, identity, actions, medals
   and teams remain untouched.
   MASTER REFERENCE: design_reference/BATTLE_PAGE_MASTER_REFERENCE_APPROVED_2026-08-28.png
   ======================================================================== */

/* Primary four KPI cells — transparent dark glass that lets the map breathe. */
.cinematicReplayPage .approvedHeroPrimaryStats{
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 32%,rgba(0,0,0,.025) 100%),
    linear-gradient(90deg,rgba(8,13,14,.52),rgba(8,13,14,.43))!important;
  border-color:rgba(230,238,234,.17)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.08)!important;
  backdrop-filter:blur(14px) saturate(1.08)!important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.21),
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.18)!important;
}
.cinematicReplayPage .approvedHeroMetric{
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0) 58%)!important;
  border-right-color:rgba(235,242,239,.105)!important;
}
.cinematicReplayPage .approvedHeroMetric:last-child{border-right-color:transparent!important}

/* Economy cards — same glass family, with only a restrained semantic tint. */
.cinematicReplayPage .approvedEconomy{
  border-color:rgba(232,239,236,.18)!important;
  -webkit-backdrop-filter:blur(15px) saturate(1.08)!important;
  backdrop-filter:blur(15px) saturate(1.08)!important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.18)!important;
}
.cinematicReplayPage .approvedEconomy.silver{
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.008) 34%,transparent 58%),
    linear-gradient(115deg,rgba(31,72,47,.43),rgba(8,20,17,.47))!important;
}
.cinematicReplayPage .approvedEconomy.experience{
  background:
    linear-gradient(180deg,rgba(255,255,255,.047),rgba(255,255,255,.008) 34%,transparent 58%),
    linear-gradient(115deg,rgba(88,64,28,.45),rgba(28,23,17,.48))!important;
  border-left-color:rgba(232,184,73,.24)!important;
}
.cinematicReplayPage .approvedEconomy::after{
  opacity:.42!important;
}

/* Secondary rail — thinner, lighter, more transparent than the main KPI row. */
.cinematicReplayPage .approvedSubMetrics,
.cinematicReplayPage .approvedSubMetricsV266{
  background:
    linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.004) 36%,transparent 68%),
    rgba(7,12,13,.43)!important;
  border-color:rgba(229,237,233,.145)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.06)!important;
  backdrop-filter:blur(12px) saturate(1.06)!important;
  box-shadow:
    0 10px 26px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.cinematicReplayPage .approvedSubMetrics>div,
.cinematicReplayPage .approvedSubMetricsV266>div{
  background:transparent!important;
  border-right-color:rgba(235,242,239,.09)!important;
}
.cinematicReplayPage .approvedSubMetrics>div:last-child,
.cinematicReplayPage .approvedSubMetricsV266>div:last-child{border-right-color:transparent!important}

/* Keep text crisp against brighter maps without turning the glass opaque. */
.cinematicReplayPage .approvedHeroMetric strong,
.cinematicReplayPage .approvedSubMetricsV266 strong{
  text-shadow:0 2px 8px rgba(0,0,0,.38)!important;
}
.cinematicReplayPage .approvedHeroMetric small,
.cinematicReplayPage .approvedSubMetricsV266 small,
.cinematicReplayPage .approvedEconomy>span,
.cinematicReplayPage .approvedEconomy>small{
  text-shadow:0 1px 5px rgba(0,0,0,.42)!important;
}


/* ========================================================================
   v0.3.5.321 FIX2 — BATTLE KPI GLASS TRANSPARENCY + MEDAL GLOW RESTORE
   Base: v0.3.5.321 FIX1.
   Scope lock: KPI/economy/secondary glass transparency + medal glow only.
   Hero, map art, result typography, tank, identity, actions and teams untouched.
   ======================================================================== */

/* Main KPI rail: lighter real glass, less opaque black fill. */
.cinematicReplayPage .approvedHeroPrimaryStats{
  background:
    linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.010) 34%,rgba(255,255,255,0) 62%),
    linear-gradient(90deg,rgba(7,12,13,.39),rgba(7,12,13,.31))!important;
  border-color:rgba(235,242,239,.19)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.10)!important;
  backdrop-filter:blur(16px) saturate(1.10)!important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.11)!important;
}
.cinematicReplayPage .approvedHeroMetric{
  background:linear-gradient(180deg,rgba(255,255,255,.020),rgba(255,255,255,0) 62%)!important;
  border-right-color:rgba(241,246,243,.115)!important;
}

/* Economy: same glass family, only a restrained semantic tint remains. */
.cinematicReplayPage .approvedEconomy{
  border-color:rgba(238,244,241,.19)!important;
  -webkit-backdrop-filter:blur(17px) saturate(1.10)!important;
  backdrop-filter:blur(17px) saturate(1.10)!important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.19),
    inset 0 1px 0 rgba(255,255,255,.105),
    inset 0 -1px 0 rgba(0,0,0,.12)!important;
}
.cinematicReplayPage .approvedEconomy.silver{
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.008) 36%,transparent 64%),
    linear-gradient(115deg,rgba(28,65,43,.31),rgba(7,16,14,.34))!important;
}
.cinematicReplayPage .approvedEconomy.experience{
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.008) 36%,transparent 64%),
    linear-gradient(115deg,rgba(84,61,26,.32),rgba(24,20,15,.35))!important;
  border-left-color:rgba(233,188,81,.28)!important;
}
.cinematicReplayPage .approvedEconomy::after{opacity:.30!important}

/* Secondary metrics: thinnest / most transparent glass layer. */
.cinematicReplayPage .approvedSubMetrics,
.cinematicReplayPage .approvedSubMetricsV266{
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.004) 40%,transparent 72%),
    rgba(6,11,12,.31)!important;
  border-color:rgba(234,241,238,.16)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.08)!important;
  backdrop-filter:blur(14px) saturate(1.08)!important;
  box-shadow:
    0 9px 22px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.075)!important;
}
.cinematicReplayPage .approvedSubMetrics>div,
.cinematicReplayPage .approvedSubMetricsV266>div{
  border-right-color:rgba(239,245,242,.10)!important;
}

/* Restore the approved content-fit medal halo. Keep it behind real awards and
   make it visible enough on bright map art without becoming a neon strip. */
.cinematicReplayPage .approvedReplayHero .approvedAwardsRailV301{
  isolation:isolate!important;
}
.cinematicReplayPage .approvedReplayHero .approvedAwardsRailV301::after{
  z-index:0!important;
  top:8px!important;
  height:54px!important;
  border-radius:999px!important;
  background:
    radial-gradient(ellipse at 46% 56%,
      rgba(255,218,125,.43) 0%,
      rgba(233,178,68,.30) 30%,
      rgba(171,112,34,.17) 51%,
      rgba(98,64,22,.075) 66%,
      rgba(0,0,0,0) 80%)!important;
  filter:blur(10px)!important;
  opacity:.94!important;
  mix-blend-mode:screen!important;
}
.cinematicReplayPage .approvedAwardsRailV301 .approvedAward,
.cinematicReplayPage .approvedAwardsRailV301 .awardRailEmpty{
  position:relative!important;
  z-index:1!important;
}
.cinematicReplayPage .approvedAwardsRailV301.medalEntryActiveV311Fix1::after{
  opacity:0!important;
}
.cinematicReplayPage .approvedAwardsRailV301.emptyAwards::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  width:0!important;
}
@media(max-width:1250px){
  .cinematicReplayPage .approvedReplayHero .approvedAwardsRailV301::after{
    top:8px!important;
    height:50px!important;
    filter:blur(9px)!important;
    opacity:.90!important;
  }
}

/* ========================================================================
   v0.3.5.321 FIX3 — KPI TRUE GLASS + MEDAL WARM GLOW TUNING
   Base: v0.3.5.321 FIX2.
   Scope lock: true-glass tuning for battle KPI/economy panels + warm medal halo.
   No hero/map/tank/result/actions/teams geometry changes.
   ======================================================================== */

/* Primary KPI rail: remove the remaining "black card" feeling. The map should
   remain clearly present behind the values while text stays crisp. */
.cinematicReplayPage .approvedHeroPrimaryStats{
  background:
    linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.012) 30%,rgba(255,255,255,0) 60%),
    linear-gradient(90deg,rgba(8,13,14,.245),rgba(8,13,14,.185))!important;
  border-color:rgba(239,245,242,.205)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.12)!important;
  backdrop-filter:blur(18px) saturate(1.12)!important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.145),
    inset 0 1px 0 rgba(255,255,255,.125),
    inset 0 -1px 0 rgba(0,0,0,.08)!important;
}
.cinematicReplayPage .approvedHeroMetric{
  background:linear-gradient(180deg,rgba(255,255,255,.016),rgba(255,255,255,0) 64%)!important;
  border-right-color:rgba(242,247,244,.070)!important;
}
.cinematicReplayPage .approvedHeroMetric:last-child{border-right-color:transparent!important}

/* Economy cards: keep their semantic green/gold identity, but make them part
   of the same glass family instead of opaque cards. */
.cinematicReplayPage .approvedEconomy{
  border-color:rgba(240,246,243,.20)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.11)!important;
  backdrop-filter:blur(18px) saturate(1.11)!important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.08)!important;
}
.cinematicReplayPage .approvedEconomy.silver{
  background:
    linear-gradient(180deg,rgba(255,255,255,.058),rgba(255,255,255,.006) 36%,transparent 66%),
    linear-gradient(115deg,rgba(30,72,48,.235),rgba(7,17,15,.245))!important;
}
.cinematicReplayPage .approvedEconomy.experience{
  background:
    linear-gradient(180deg,rgba(255,255,255,.058),rgba(255,255,255,.006) 36%,transparent 66%),
    linear-gradient(115deg,rgba(91,66,28,.245),rgba(25,20,15,.255))!important;
  border-left-color:rgba(234,190,84,.275)!important;
}
.cinematicReplayPage .approvedEconomy::after{opacity:.24!important}

/* Secondary metrics were already close in FIX2. Only a tiny lift, keeping
   them visually thinner than the primary row. */
.cinematicReplayPage .approvedSubMetrics,
.cinematicReplayPage .approvedSubMetricsV266{
  background:
    linear-gradient(180deg,rgba(255,255,255,.036),rgba(255,255,255,.003) 42%,transparent 74%),
    rgba(6,11,12,.255)!important;
  border-color:rgba(236,243,240,.17)!important;
  -webkit-backdrop-filter:blur(15px) saturate(1.09)!important;
  backdrop-filter:blur(15px) saturate(1.09)!important;
}
.cinematicReplayPage .approvedSubMetrics>div,
.cinematicReplayPage .approvedSubMetricsV266>div{
  border-right-color:rgba(241,246,244,.075)!important;
}

/* Warm content-fit medal halo. Width/left still come from the v.303 runtime
   measurements, so the light hugs the real medal group and never fills empty
   space. */
.cinematicReplayPage .approvedReplayHero .approvedAwardsRailV301::after{
  top:5px!important;
  height:61px!important;
  border-radius:999px!important;
  background:
    radial-gradient(ellipse at 48% 54%,
      rgba(255,230,151,.58) 0%,
      rgba(246,194,82,.42) 27%,
      rgba(211,145,47,.245) 49%,
      rgba(126,78,26,.105) 66%,
      rgba(0,0,0,0) 82%)!important;
  filter:blur(11px)!important;
  opacity:.98!important;
  mix-blend-mode:screen!important;
  box-shadow:0 0 18px rgba(231,170,64,.11)!important;
}
/* Never let the halo fully disappear during the accepted parallel medal
   entry animation; keep it restrained until the final bloom. */
.cinematicReplayPage .approvedAwardsRailV301.medalEntryActiveV311Fix1::after{
  opacity:.54!important;
}
.cinematicReplayPage .approvedAwardsRailV301.medalEntryGlowPulseV311Fix1::after{
  opacity:1!important;
}
.cinematicReplayPage .approvedAwardsRailV301.emptyAwards::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  width:0!important;
  box-shadow:none!important;
}
@media(max-width:1250px){
  .cinematicReplayPage .approvedReplayHero .approvedAwardsRailV301::after{
    top:6px!important;
    height:56px!important;
    filter:blur(10px)!important;
    opacity:.95!important;
  }
  .cinematicReplayPage .approvedAwardsRailV301.medalEntryActiveV311Fix1::after{opacity:.50!important}
}


/* ========================================================================
   v0.3.5.322 — BATTLE RESULT HERO + DYNAMIC RECORD OF THE DAY PARITY
   Scope lock: result typography + real daily-record centerpiece only.
   Preserve .321 FIX3 KPI glass, medal glow, tank, actions and teams.
   ======================================================================== */
.cinematicReplayPage .approvedHeroResultTopV300{
  top:54px!important;
  min-width:0!important;
  max-width:none!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.cinematicReplayPage .approvedHeroResultTopV300::before,
.cinematicReplayPage .approvedHeroResultTopV300::after{content:none!important;display:none!important}
.cinematicReplayPage .approvedHeroResultTopV300>strong{
  color:#f6f8f7!important;
  font-size:50px!important;
  line-height:.90!important;
  font-weight:770!important;
  letter-spacing:.012em!important;
  text-shadow:0 2px 2px rgba(0,0,0,.50),0 7px 22px rgba(0,0,0,.34),0 0 12px rgba(255,255,255,.06)!important;
}
.cinematicReplayPage .approvedHeroResultTopV300>small{
  margin-top:7px!important;
  color:rgba(245,248,246,.86)!important;
  font-size:10.5px!important;
  font-weight:720!important;
  letter-spacing:.075em!important;
  text-shadow:0 2px 7px rgba(0,0,0,.72)!important;
}
.cinematicReplayPage .approvedReplayHero.cinematic-loss .approvedHeroResultTopV300>strong{
  color:#ff918b!important;
  text-shadow:0 2px 2px rgba(0,0,0,.48),0 7px 22px rgba(55,8,8,.38),0 0 13px rgba(255,104,98,.12)!important;
}
.cinematicReplayPage .approvedReplayHero.cinematic-draw .approvedHeroResultTopV300>strong{
  color:#e9d59c!important;
  text-shadow:0 2px 2px rgba(0,0,0,.48),0 7px 22px rgba(52,37,8,.30)!important;
}
.cinematicReplayPage .battleDailyRecordV322{
  position:absolute!important;
  z-index:18!important;
  left:50%!important;
  top:121px!important;
  transform:translateX(-50%)!important;
  width:286px!important;
  height:62px!important;
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr) 52px!important;
  align-items:center!important;
  pointer-events:none!important;
  color:#f8e5ae!important;
  text-align:center!important;
  font-family:var(--approved-font)!important;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.28))!important;
}
.cinematicReplayPage .battleDailyRecordV322::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;top:50%;
  width:200px;height:58px;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse,rgba(13,14,12,.42) 0%,rgba(13,14,12,.22) 46%,rgba(13,14,12,0) 76%);
  filter:blur(3px);
}
.cinematicReplayPage .recordCoreV322{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;position:relative;z-index:2}
.cinematicReplayPage .recordCoreV322>strong{
  display:flex;align-items:center;justify-content:center;gap:6px;
  color:#fff4cf;font-size:12px;line-height:1;font-weight:900;letter-spacing:.055em;text-transform:uppercase;
  text-shadow:0 2px 7px rgba(0,0,0,.78),0 0 11px rgba(236,191,80,.18);
}
.cinematicReplayPage .recordCoreV322>strong>i{font-style:normal;color:#fff;font-size:12px;text-shadow:0 0 7px rgba(240,198,94,.48)}
.cinematicReplayPage .recordCoreV322>small{
  display:block;margin-top:5px;color:rgba(246,247,241,.82);font-size:8.5px;line-height:1.05;font-weight:620;letter-spacing:.015em;
  white-space:nowrap;text-shadow:0 2px 6px rgba(0,0,0,.82);
}
.cinematicReplayPage .recordCoreV322>b{
  display:block;margin-top:4px;color:#f7f7f1;font-size:24px;line-height:.95;font-weight:820;letter-spacing:.03em;
  text-shadow:0 2px 2px rgba(0,0,0,.52),0 5px 13px rgba(0,0,0,.40),0 0 10px rgba(238,194,78,.14);
}
.cinematicReplayPage .recordLaurelV322{display:block;width:52px;height:62px;color:#c99c45;opacity:.84}
.cinematicReplayPage .recordLaurelV322 svg{width:100%;height:100%;overflow:visible;fill:currentColor;stroke:none;filter:drop-shadow(0 0 5px rgba(228,180,72,.12))}
.cinematicReplayPage .recordLaurelV322 svg .stem{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;opacity:.86}
.cinematicReplayPage .recordLaurelV322.right{transform:scaleX(-1)}
.cinematicReplayPage .battleDailyRecordV322.record-damage{--record-accent:#f0c663}
.cinematicReplayPage .battleDailyRecordV322.record-assist{--record-accent:#cfe6c5}
.cinematicReplayPage .battleDailyRecordV322.record-kills{--record-accent:#ead39b}
.cinematicReplayPage .battleDailyRecordV322.record-xp{--record-accent:#f2c960}
.cinematicReplayPage .battleDailyRecordV322 .recordCoreV322>b{color:var(--record-accent,#f7f7f1)}
@media(max-width:1250px) and (min-width:651px){
  .cinematicReplayPage .approvedHeroResultTopV300{top:57px!important}
  .cinematicReplayPage .approvedHeroResultTopV300>strong{font-size:43px!important}
  .cinematicReplayPage .approvedHeroResultTopV300>small{font-size:9.5px!important}
  .cinematicReplayPage .battleDailyRecordV322{top:119px!important;width:260px!important;height:57px!important;grid-template-columns:46px minmax(0,1fr) 46px!important}
  .cinematicReplayPage .recordLaurelV322{width:46px;height:57px}
  .cinematicReplayPage .recordCoreV322>strong{font-size:10.5px}
  .cinematicReplayPage .recordCoreV322>small{font-size:7.8px}
  .cinematicReplayPage .recordCoreV322>b{font-size:21px}
}
@media(max-width:650px){
  .cinematicReplayPage .approvedHeroResultTopV300{top:124px!important;left:22px!important;right:22px!important;transform:none!important;align-items:flex-start!important;text-align:left!important}
  .cinematicReplayPage .approvedHeroResultTopV300>strong{font-size:34px!important}
  .cinematicReplayPage .battleDailyRecordV322{position:relative!important;left:auto!important;top:auto!important;transform:none!important;width:245px!important;height:56px!important;margin:6px 18px 0!important;grid-template-columns:43px minmax(0,1fr) 43px!important}
  .cinematicReplayPage .recordLaurelV322{width:43px;height:56px}
  .cinematicReplayPage .recordCoreV322>strong{font-size:10px}
  .cinematicReplayPage .recordCoreV322>small{font-size:7.5px}
  .cinematicReplayPage .recordCoreV322>b{font-size:20px}
}


/* ========================================================================
   v0.3.5.322 FIX1 — RESULT UNDERLAY + RECORD OF DAY PREMIUM SCALE PARITY
   Scope lock: result underlay + daily-record centerpiece scale/position only.
   Preserve .321 FIX3 glass/medals/teams and .322 record logic.
   ======================================================================== */

/* Result stays at the approved .322 height and font size. Add only the
   soft cinematic underlay seen in the master reference. */
.cinematicReplayPage .approvedHeroResultTopV300{
  top:54px!important;
  isolation:isolate!important;
}
.cinematicReplayPage .approvedHeroResultTopV300::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  left:50%!important;
  top:-7px!important;
  width:292px!important;
  height:62px!important;
  transform:translateX(-50%)!important;
  border:0!important;
  border-radius:4px!important;
  background:
    linear-gradient(90deg,
      rgba(9,14,16,0) 0%,
      rgba(9,14,16,.18) 12%,
      rgba(9,14,16,.44) 34%,
      rgba(9,14,16,.54) 50%,
      rgba(9,14,16,.44) 66%,
      rgba(9,14,16,.18) 88%,
      rgba(9,14,16,0) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  filter:blur(.15px)!important;
  opacity:1!important;
  pointer-events:none!important;
}
.cinematicReplayPage .approvedHeroResultTopV300::after{
  content:none!important;
  display:none!important;
}
.cinematicReplayPage .approvedHeroResultTopV300>strong,
.cinematicReplayPage .approvedHeroResultTopV300>small{
  position:relative!important;
  z-index:1!important;
}
/* Explicitly preserve the .322 result typography size. */
.cinematicReplayPage .approvedHeroResultTopV300>strong{font-size:50px!important}

/* Daily record: move only this block lower and give it the visual scale of
   the master reference. Keep the real metric/value logic from .322. */
.cinematicReplayPage .battleDailyRecordV322{
  top:128px!important;
  width:332px!important;
  height:82px!important;
  grid-template-columns:64px minmax(0,1fr) 64px!important;
  color:#f8e5ae!important;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.31))!important;
}
.cinematicReplayPage .battleDailyRecordV322::before{
  width:236px!important;
  height:72px!important;
  background:radial-gradient(ellipse,rgba(11,14,14,.34) 0%,rgba(11,14,14,.20) 48%,rgba(11,14,14,0) 78%)!important;
  filter:blur(4px)!important;
}
.cinematicReplayPage .recordLaurelV322{
  width:64px!important;
  height:82px!important;
  color:#d2a54b!important;
  opacity:.92!important;
}
.cinematicReplayPage .recordLaurelV322 svg{
  filter:drop-shadow(0 0 7px rgba(228,180,72,.18))!important;
}
.cinematicReplayPage .recordCoreV322>strong{
  gap:7px!important;
  color:#fff5d7!important;
  font-size:13.5px!important;
  letter-spacing:.06em!important;
  text-shadow:0 2px 7px rgba(0,0,0,.80),0 0 12px rgba(236,191,80,.18)!important;
}
.cinematicReplayPage .recordCoreV322>strong>i{
  font-size:13.5px!important;
  color:#fff!important;
  text-shadow:0 0 8px rgba(240,198,94,.52)!important;
}
.cinematicReplayPage .recordCoreV322>small{
  margin-top:6px!important;
  color:rgba(247,249,247,.90)!important;
  font-size:9.4px!important;
  line-height:1.05!important;
  font-weight:650!important;
  text-shadow:0 2px 7px rgba(0,0,0,.82)!important;
}
.cinematicReplayPage .recordCoreV322>b,
.cinematicReplayPage .battleDailyRecordV322 .recordCoreV322>b{
  margin-top:5px!important;
  color:#f8faf8!important;
  font-size:29px!important;
  line-height:.94!important;
  font-weight:830!important;
  letter-spacing:.03em!important;
  text-shadow:0 2px 2px rgba(0,0,0,.52),0 6px 15px rgba(0,0,0,.42),0 0 11px rgba(255,255,255,.07)!important;
}
/* Gold remains an accent on laurels/star only; metric value stays light. */
.cinematicReplayPage .battleDailyRecordV322.record-damage,
.cinematicReplayPage .battleDailyRecordV322.record-assist,
.cinematicReplayPage .battleDailyRecordV322.record-kills,
.cinematicReplayPage .battleDailyRecordV322.record-xp{--record-accent:#f8faf8!important}

@media(max-width:1250px) and (min-width:651px){
  .cinematicReplayPage .approvedHeroResultTopV300{top:57px!important}
  .cinematicReplayPage .approvedHeroResultTopV300::before{width:260px!important;height:56px!important;top:-6px!important}
  .cinematicReplayPage .approvedHeroResultTopV300>strong{font-size:43px!important}
  .cinematicReplayPage .battleDailyRecordV322{top:126px!important;width:302px!important;height:74px!important;grid-template-columns:57px minmax(0,1fr) 57px!important}
  .cinematicReplayPage .recordLaurelV322{width:57px!important;height:74px!important}
  .cinematicReplayPage .recordCoreV322>strong{font-size:12.2px!important}
  .cinematicReplayPage .recordCoreV322>small{font-size:8.7px!important}
  .cinematicReplayPage .recordCoreV322>b{font-size:26px!important}
}
@media(max-width:650px){
  .cinematicReplayPage .approvedHeroResultTopV300::before{left:0!important;transform:none!important;width:220px!important;height:48px!important;top:-5px!important}
  .cinematicReplayPage .battleDailyRecordV322{width:272px!important;height:66px!important;grid-template-columns:50px minmax(0,1fr) 50px!important}
  .cinematicReplayPage .recordLaurelV322{width:50px!important;height:66px!important}
  .cinematicReplayPage .recordCoreV322>strong{font-size:11px!important}
  .cinematicReplayPage .recordCoreV322>small{font-size:8px!important}
  .cinematicReplayPage .recordCoreV322>b{font-size:23px!important}
}


/* ========================================================================
   v0.3.5.322 FIX2 — RESULT BLOCK LOWERING + UNDERLAY ALIGNMENT + LAUREL SPACING FIX
   Scope lock: positioning/alignment of the result + daily-record composition only.
   Preserve .322 FIX1 typography/record logic and all KPI/medal/team styling.
   ======================================================================== */

/* Lower the whole result composition without changing the approved type scale. */
.cinematicReplayPage .approvedHeroResultTopV300{
  top:69px!important;
  width:304px!important;
  min-width:304px!important;
  max-width:304px!important;
}

/* Make the cinematic underlay a single straight, symmetric rail attached to
   the centered result container instead of an independently sized floating box. */
.cinematicReplayPage .approvedHeroResultTopV300::before{
  left:0!important;
  top:-8px!important;
  width:100%!important;
  height:59px!important;
  transform:none!important;
  border-radius:0!important;
  background:linear-gradient(90deg,
    rgba(8,13,15,0) 0%,
    rgba(8,13,15,.16) 10%,
    rgba(8,13,15,.40) 28%,
    rgba(8,13,15,.52) 50%,
    rgba(8,13,15,.40) 72%,
    rgba(8,13,15,.16) 90%,
    rgba(8,13,15,0) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),inset 0 -1px 0 rgba(0,0,0,.06)!important;
}

/* Lower the full daily-record group, but compact its horizontal footprint so
   the laurels actually frame the text instead of floating far away. */
.cinematicReplayPage .battleDailyRecordV322{
  top:143px!important;
  width:278px!important;
  height:70px!important;
  grid-template-columns:50px minmax(0,1fr) 50px!important;
  column-gap:0!important;
}
.cinematicReplayPage .battleDailyRecordV322::before{
  width:204px!important;
  height:64px!important;
}
.cinematicReplayPage .recordLaurelV322{
  width:50px!important;
  height:70px!important;
}
.cinematicReplayPage .recordLaurelV322.left{
  justify-self:end!important;
  margin-right:-3px!important;
}
.cinematicReplayPage .recordLaurelV322.right{
  justify-self:start!important;
  margin-left:-3px!important;
}
.cinematicReplayPage .recordCoreV322{
  width:178px!important;
  max-width:178px!important;
}

@media(max-width:1250px) and (min-width:651px){
  .cinematicReplayPage .approvedHeroResultTopV300{
    top:70px!important;
    width:270px!important;
    min-width:270px!important;
    max-width:270px!important;
  }
  .cinematicReplayPage .approvedHeroResultTopV300::before{
    left:0!important;
    top:-7px!important;
    width:100%!important;
    height:53px!important;
    transform:none!important;
  }
  .cinematicReplayPage .battleDailyRecordV322{
    top:139px!important;
    width:254px!important;
    height:64px!important;
    grid-template-columns:45px minmax(0,1fr) 45px!important;
  }
  .cinematicReplayPage .battleDailyRecordV322::before{width:188px!important;height:58px!important}
  .cinematicReplayPage .recordLaurelV322{width:45px!important;height:64px!important}
  .cinematicReplayPage .recordCoreV322{width:164px!important;max-width:164px!important}
}

@media(max-width:650px){
  /* Keep the existing mobile flow; only make the underlay follow the result box. */
  .cinematicReplayPage .approvedHeroResultTopV300{
    width:220px!important;
    min-width:220px!important;
    max-width:220px!important;
  }
  .cinematicReplayPage .approvedHeroResultTopV300::before{
    left:0!important;
    width:100%!important;
    transform:none!important;
  }
  .cinematicReplayPage .battleDailyRecordV322{
    width:240px!important;
    grid-template-columns:42px minmax(0,1fr) 42px!important;
  }
  .cinematicReplayPage .recordLaurelV322{width:42px!important}
  .cinematicReplayPage .recordCoreV322{width:156px!important;max-width:156px!important}
}


/* ========================================================================
   v0.3.5.323 — PLAYER STAT STRIP + WG WTR / WINRATE COLOR SYSTEM
   Battle hero only. Keep profile statistics on their approved legacy layout.
   WR uses the classic XVM win-rate color scale; WTR uses official WG rank
   thresholds/groups while FermaniHUB supplies its own premium glass surface.
   ======================================================================== */
.cinematicReplayPage .approvedPlayerMetaLine{
  gap:7px!important;
  flex-wrap:nowrap!important;
  min-width:0!important;
}
.cinematicReplayPage .playerStatStripV323{
  --strip-border:rgba(210,222,216,.16);
  display:inline-flex!important;
  align-items:stretch!important;
  flex:0 0 auto!important;
  height:29px!important;
  min-width:0!important;
  margin-left:4px!important;
  border:1px solid var(--strip-border)!important;
  border-radius:5px!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,rgba(12,18,20,.77),rgba(5,10,12,.88))!important;
  -webkit-backdrop-filter:blur(7px) saturate(1.08)!important;
  backdrop-filter:blur(7px) saturate(1.08)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 5px 14px rgba(0,0,0,.17)!important;
  color:#ecf1ee!important;
  font-family:var(--approved-font)!important;
  line-height:1!important;
  vertical-align:middle!important;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease!important;
}
.cinematicReplayPage .playerStatStripV323:hover{
  border-color:rgba(210,222,216,.24)!important;
  background:linear-gradient(180deg,rgba(17,24,26,.80),rgba(7,12,14,.90))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.075),0 7px 17px rgba(0,0,0,.20)!important;
}
.cinematicReplayPage .playerStatCellV323{
  --stat-accent:#aeb8b3;
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  min-width:0!important;
  height:27px!important;
  padding:0 9px!important;
  white-space:nowrap!important;
  isolation:isolate!important;
}
.cinematicReplayPage .playerStatCellV323::after{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  left:5px!important;
  right:5px!important;
  bottom:0!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,var(--stat-accent),transparent)!important;
  opacity:.55!important;
  pointer-events:none!important;
}
.cinematicReplayPage .playerStatCellV323>b{
  color:#f1f5f2!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
  text-shadow:0 1px 3px rgba(0,0,0,.58)!important;
}
.cinematicReplayPage .playerStatCellV323>small{
  color:#9ca8a2!important;
  font-size:6.6px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
}
.cinematicReplayPage .playerStatDividerV323{
  width:1px!important;
  height:17px!important;
  align-self:center!important;
  flex:0 0 1px!important;
  background:linear-gradient(180deg,transparent,rgba(213,224,219,.16),transparent)!important;
}
/* WR: exact classic XVM signal colors, deliberately used only on the value
   and one-pixel accent so they do not turn FermaniHUB into a neon panel. */
.cinematicReplayPage .winrateStatV323{min-width:76px!important}
.cinematicReplayPage .winrateStatV323>b{color:var(--stat-accent)!important;text-shadow:0 0 7px color-mix(in srgb,var(--stat-accent) 26%,transparent)!important}
.cinematicReplayPage .wrVeryBadV323{--stat-accent:#FE0E00!important}
.cinematicReplayPage .wrBadV323{--stat-accent:#FE7903!important}
.cinematicReplayPage .wrNormalV323{--stat-accent:#F8F400!important}
.cinematicReplayPage .wrGoodV323{--stat-accent:#60FF00!important}
.cinematicReplayPage .wrVeryGoodV323{--stat-accent:#02C9B3!important}
.cinematicReplayPage .wrUniqueV323{--stat-accent:#D042F3!important}
.cinematicReplayPage .wrUnknownV323{--stat-accent:#76817c!important}
/* WTR: official WG group identity / thresholds, rendered in FermaniHUB glass. */
.cinematicReplayPage .wtrStatV323{min-width:144px!important;gap:5px!important}
.cinematicReplayPage .wtrStatV323>i{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:16px!important;
  padding:0 4px!important;
  border:1px solid color-mix(in srgb,var(--stat-accent) 58%,rgba(255,255,255,.08))!important;
  border-radius:3px!important;
  background:color-mix(in srgb,var(--stat-accent) 10%,rgba(8,13,15,.76))!important;
  color:var(--stat-accent)!important;
  font-style:normal!important;
  font-size:6.4px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.08em!important;
}
.cinematicReplayPage .wtrStatV323>b{color:var(--stat-accent)!important;text-shadow:0 0 8px color-mix(in srgb,var(--stat-accent) 20%,transparent)!important}
.cinematicReplayPage .wtr-bronzeV323{--stat-accent:#b98557!important}
.cinematicReplayPage .wtr-silverV323{--stat-accent:#d5dde1!important}
.cinematicReplayPage .wtr-goldV323{--stat-accent:#efbd4d!important}
.cinematicReplayPage .wtr-aceV323{--stat-accent:#d9edf8!important}
.cinematicReplayPage .wtr-legendV323{--stat-accent:#b78bf4!important}
.cinematicReplayPage .wtrUnknownV323{--stat-accent:#76817c!important}
.cinematicReplayPage .battlesStatV323{--stat-accent:#87928d!important;min-width:68px!important}
.cinematicReplayPage .statsUnavailableV323{opacity:.80!important}
.cinematicReplayPage .isLoadingV323{opacity:.74!important}
@media(max-width:1250px) and (min-width:851px){
  .cinematicReplayPage .playerStatCellV323{padding:0 7px!important}
  .cinematicReplayPage .winrateStatV323{min-width:68px!important}
  .cinematicReplayPage .wtrStatV323{min-width:126px!important}
  .cinematicReplayPage .battlesStatV323{min-width:60px!important}
  .cinematicReplayPage .playerStatCellV323>b{font-size:11px!important}
  .cinematicReplayPage .playerStatCellV323>small{font-size:6px!important}
}
@media(max-width:850px){
  .cinematicReplayPage .approvedPlayerMetaLine{flex-wrap:wrap!important}
  .cinematicReplayPage .playerStatStripV323{margin-left:0!important;max-width:100%!important}
  .cinematicReplayPage .wtrStatV323{min-width:124px!important}
}


/* ========================================================================
   v0.3.5.323 FIX1 — PLAYER STAT STRIP READABILITY + GLASS POLISH
   Battle hero player-stat strip only. Keep .323 data / WR / WTR logic intact.
   ======================================================================== */
.cinematicReplayPage .playerStatStripV323{
  height:34px!important;
  border-color:rgba(226,236,232,.22)!important;
  border-radius:6px!important;
  background:
    linear-gradient(180deg,rgba(28,37,39,.60),rgba(7,13,15,.72))!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.12)!important;
  backdrop-filter:blur(10px) saturate(1.12)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(255,255,255,.025),
    0 6px 16px rgba(0,0,0,.18)!important;
}
.cinematicReplayPage .playerStatStripV323::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:linear-gradient(105deg,rgba(255,255,255,.055),transparent 27%,transparent 72%,rgba(169,229,27,.018))!important;
}
.cinematicReplayPage .playerStatStripV323:hover{
  border-color:rgba(226,236,232,.29)!important;
  background:linear-gradient(180deg,rgba(33,43,45,.64),rgba(9,15,17,.75))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 7px 18px rgba(0,0,0,.20)!important;
}
.cinematicReplayPage .playerStatCellV323{
  height:32px!important;
  gap:5px!important;
  padding:0 11px!important;
}
.cinematicReplayPage .playerStatCellV323>b{
  font-size:14px!important;
  font-weight:950!important;
  letter-spacing:.012em!important;
}
.cinematicReplayPage .playerStatCellV323>small{
  font-size:7.4px!important;
  font-weight:850!important;
  letter-spacing:.06em!important;
  color:#aeb9b4!important;
}
.cinematicReplayPage .playerStatDividerV323{
  height:21px!important;
  background:linear-gradient(180deg,transparent,rgba(225,235,231,.22),transparent)!important;
}
.cinematicReplayPage .playerStatCellV323::after{
  left:7px!important;
  right:7px!important;
  opacity:.62!important;
}
.cinematicReplayPage .winrateStatV323{min-width:84px!important}
.cinematicReplayPage .wtrStatV323{min-width:157px!important;gap:6px!important}
.cinematicReplayPage .wtrStatV323>i{
  height:18px!important;
  padding:0 5px!important;
  font-size:7.1px!important;
  border-radius:4px!important;
}
.cinematicReplayPage .battlesStatV323{min-width:76px!important}
@media(max-width:1250px) and (min-width:851px){
  .cinematicReplayPage .playerStatStripV323{height:32px!important}
  .cinematicReplayPage .playerStatCellV323{height:30px!important;padding:0 8px!important}
  .cinematicReplayPage .playerStatCellV323>b{font-size:12.5px!important}
  .cinematicReplayPage .playerStatCellV323>small{font-size:6.6px!important}
  .cinematicReplayPage .winrateStatV323{min-width:74px!important}
  .cinematicReplayPage .wtrStatV323{min-width:138px!important}
  .cinematicReplayPage .battlesStatV323{min-width:65px!important}
}
@media(max-width:850px){
  .cinematicReplayPage .playerStatStripV323{height:auto!important;min-height:32px!important}
  .cinematicReplayPage .playerStatCellV323{height:30px!important;padding:0 8px!important}
  .cinematicReplayPage .playerStatCellV323>b{font-size:12px!important}
  .cinematicReplayPage .playerStatCellV323>small{font-size:6.5px!important}
  .cinematicReplayPage .wtrStatV323{min-width:132px!important}
}


/* ========================================================================
   v0.3.5.324 — PLAYER PROFILE HERO IDENTITY + PREMIUM STAT SYSTEM
   Profile hero only. Reuse the real WG player-stat source introduced in .323:
   classic XVM WR signal colors + official WG WTR rank thresholds/groups.
   Keep the right Best Battle, background and career KPI rail unchanged.
   ======================================================================== */
.playerProfileFinalMockup .playerProfileIdentityV320{
  align-items:center!important;
  gap:18px!important;
  margin-bottom:7px!important;
}
.playerProfileFinalMockup .playerProfileAvatarV320{
  width:92px!important;
  height:92px!important;
  flex:0 0 92px!important;
  border:1px solid rgba(225,235,231,.22)!important;
  background:
    radial-gradient(circle at 34% 28%,rgba(169,229,27,.13),rgba(39,47,46,.83) 58%,rgba(11,16,17,.92))!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.08)!important;
  backdrop-filter:blur(10px) saturate(1.08)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 12px 28px rgba(0,0,0,.28),
    0 0 0 4px rgba(255,255,255,.026),
    0 0 22px rgba(169,229,27,.055)!important;
  font-size:22px!important;
}
.playerProfileFinalMockup .playerProfileAvatarV320::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.055);
  pointer-events:none;
}
.playerProfileFinalMockup .playerProfileAvatarV320>img{
  object-fit:cover!important;
}
.playerProfileFinalMockup .playerProfileIdentityCopyV320{
  min-width:0!important;
  max-width:510px!important;
}
.playerProfileFinalMockup .playerProfileNameLine{
  gap:10px!important;
  margin-bottom:8px!important;
}
.playerProfileFinalMockup .playerProfileMetaPrimary{
  display:flex!important;
  width:auto!important;
  max-width:100%!important;
  margin-top:0!important;
}
.playerProfileFinalMockup .profilePlayerStatStripV324{
  --strip-border:rgba(220,232,227,.20);
  position:relative!important;
  display:inline-flex!important;
  align-items:stretch!important;
  width:auto!important;
  max-width:100%!important;
  min-width:405px!important;
  height:49px!important;
  margin:0!important;
  overflow:hidden!important;
  border:1px solid var(--strip-border)!important;
  border-radius:7px!important;
  color:#edf3ef!important;
  background:
    linear-gradient(180deg,rgba(31,40,42,.55),rgba(8,14,16,.68))!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.14)!important;
  backdrop-filter:blur(12px) saturate(1.14)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.105),
    inset 0 -1px 0 rgba(255,255,255,.025),
    0 7px 18px rgba(0,0,0,.18)!important;
  font-family:var(--approved-font)!important;
  line-height:1!important;
}
.playerProfileFinalMockup .profilePlayerStatStripV324::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.055),transparent 25%,transparent 72%,rgba(169,229,27,.02));
}
.playerProfileFinalMockup .profilePlayerStatStripV324 .playerStatCellV323{
  --stat-accent:#89948f;
  position:relative!important;
  isolation:isolate!important;
  display:flex!important;
  align-content:center!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:3px 6px!important;
  height:47px!important;
  padding:6px 15px!important;
  white-space:nowrap!important;
}
.playerProfileFinalMockup .profilePlayerStatStripV324 .playerStatCellV323::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:9px;
  right:9px;
  bottom:0;
  height:1px;
  opacity:.62;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--stat-accent),transparent);
}
.playerProfileFinalMockup .profilePlayerStatStripV324 .playerStatCellV323>b{
  color:#f2f6f3!important;
  font-size:20px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.012em!important;
  text-shadow:0 1px 4px rgba(0,0,0,.55)!important;
}
.playerProfileFinalMockup .profilePlayerStatStripV324 .playerStatCellV323>small{
  flex:1 0 100%!important;
  color:#aab6b0!important;
  font-size:7.6px!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:.065em!important;
  text-align:center!important;
  text-transform:uppercase!important;
}
.playerProfileFinalMockup .profilePlayerStatStripV324 .playerStatDividerV323{
  width:1px!important;
  height:31px!important;
  align-self:center!important;
  flex:0 0 1px!important;
  background:linear-gradient(180deg,transparent,rgba(225,235,231,.23),transparent)!important;
}
.playerProfileFinalMockup .profilePlayerStatStripV324 .winrateStatV323{
  min-width:120px!important;
}
.playerProfileFinalMockup .profilePlayerStatStripV324 .winrateStatV323>b{
  color:var(--stat-accent)!important;
  text-shadow:0 0 9px color-mix(in srgb,var(--stat-accent) 22%,transparent)!important;
}
.playerProfileFinalMockup .profilePlayerStatStripV324 .wrVeryBadV323{--stat-accent:#FE0E00!important}
.playerProfileFinalMockup .profilePlayerStatStripV324 .wrBadV323{--stat-accent:#FE7903!important}
.playerProfileFinalMockup .profilePlayerStatStripV324 .wrNormalV323{--stat-accent:#F8F400!important}
.playerProfileFinalMockup .profilePlayerStatStripV324 .wrGoodV323{--stat-accent:#60FF00!important}
.playerProfileFinalMockup .profilePlayerStatStripV324 .wrVeryGoodV323{--stat-accent:#02C9B3!important}
.playerProfileFinalMockup .profilePlayerStatStripV324 .wrUniqueV323{--stat-accent:#D042F3!important}
.playerProfileFinalMockup .profilePlayerStatStripV324 .wrUnknownV323{--stat-accent:#76817c!important}
.playerProfileFinalMockup .profilePlayerStatStripV324 .wtrStatV323{
  min-width:174px!important;
}
.playerProfileFinalMockup .profilePlayerStatStripV324 .wtrStatV323>i{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:20px!important;
  padding:0 6px!important;
  border:1px solid color-mix(in srgb,var(--stat-accent) 58%,rgba(255,255,255,.08))!important;
  border-radius:4px!important;
  background:color-mix(in srgb,var(--stat-accent) 10%,rgba(8,13,15,.70))!important;
  color:var(--stat-accent)!important;
  font-style:normal!important;
  font-size:7.6px!important;
  font-weight:950!important;
  letter-spacing:.08em!important;
}
.playerProfileFinalMockup .profilePlayerStatStripV324 .wtrStatV323>b{
  color:var(--stat-accent)!important;
  text-shadow:0 0 9px color-mix(in srgb,var(--stat-accent) 20%,transparent)!important;
}
.playerProfileFinalMockup .profilePlayerStatStripV324 .wtr-bronzeV323{--stat-accent:#b98557!important}
.playerProfileFinalMockup .profilePlayerStatStripV324 .wtr-silverV323{--stat-accent:#d5dde1!important}
.playerProfileFinalMockup .profilePlayerStatStripV324 .wtr-goldV323{--stat-accent:#efbd4d!important}
.playerProfileFinalMockup .profilePlayerStatStripV324 .wtr-aceV323{--stat-accent:#d9edf8!important}
.playerProfileFinalMockup .profilePlayerStatStripV324 .wtr-legendV323{--stat-accent:#b78bf4!important}
.playerProfileFinalMockup .profilePlayerStatStripV324 .wtrUnknownV323{--stat-accent:#76817c!important}
.playerProfileFinalMockup .profilePlayerStatStripV324 .battlesStatV323{
  --stat-accent:#89948f!important;
  min-width:110px!important;
}
.playerProfileFinalMockup .profilePlayerStatStripV324.statsUnavailableV323,
.playerProfileFinalMockup .profilePlayerStatStripV324.isLoadingV323{opacity:.78!important}
@media(hover:hover) and (pointer:fine){
  .playerProfileFinalMockup .profilePlayerStatStripV324:hover{
    border-color:rgba(226,237,232,.28)!important;
    background:linear-gradient(180deg,rgba(36,46,48,.59),rgba(10,16,18,.71))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.125),0 8px 20px rgba(0,0,0,.20)!important;
  }
}
@media(max-width:1250px) and (min-width:851px){
  .playerProfileFinalMockup .playerProfileAvatarV320{width:82px!important;height:82px!important;flex-basis:82px!important}
  .playerProfileFinalMockup .profilePlayerStatStripV324{min-width:360px!important;height:46px!important}
  .playerProfileFinalMockup .profilePlayerStatStripV324 .playerStatCellV323{height:44px!important;padding:5px 12px!important}
  .playerProfileFinalMockup .profilePlayerStatStripV324 .playerStatCellV323>b{font-size:17px!important}
  .playerProfileFinalMockup .profilePlayerStatStripV324 .playerStatCellV323>small{font-size:6.8px!important}
  .playerProfileFinalMockup .profilePlayerStatStripV324 .winrateStatV323{min-width:105px!important}
  .playerProfileFinalMockup .profilePlayerStatStripV324 .wtrStatV323{min-width:155px!important}
  .playerProfileFinalMockup .profilePlayerStatStripV324 .battlesStatV323{min-width:96px!important}
}
@media(max-width:850px){
  .playerProfileFinalMockup .playerProfileIdentityV320{align-items:flex-start!important;gap:12px!important}
  .playerProfileFinalMockup .playerProfileAvatarV320{width:68px!important;height:68px!important;flex-basis:68px!important}
  .playerProfileFinalMockup .profilePlayerStatStripV324{min-width:0!important;width:100%!important;height:auto!important;min-height:44px!important}
  .playerProfileFinalMockup .profilePlayerStatStripV324 .playerStatCellV323{height:42px!important;padding:5px 8px!important}
  .playerProfileFinalMockup .profilePlayerStatStripV324 .playerStatCellV323>b{font-size:15px!important}
  .playerProfileFinalMockup .profilePlayerStatStripV324 .playerStatCellV323>small{font-size:6px!important}
  .playerProfileFinalMockup .profilePlayerStatStripV324 .winrateStatV323{min-width:86px!important;flex:1 1 86px!important}
  .playerProfileFinalMockup .profilePlayerStatStripV324 .wtrStatV323{min-width:126px!important;flex:1 1 126px!important}
  .playerProfileFinalMockup .profilePlayerStatStripV324 .battlesStatV323{min-width:80px!important;flex:1 1 80px!important}
}

/* ========================================================================
   v0.3.5.324 FIX1 — PROFILE HERO NAME WIDTH + STAT STRIP READABILITY BALANCE
   Scope: profile hero left identity only. Preserve background, Best Battle,
   tank artwork and career KPI rail exactly as in v0.3.5.324.
   ======================================================================== */
@media(min-width:1251px){
  .playerProfileFinalMockup .playerProfileHeroMain{
    width:760px!important;
    max-width:56%!important;
  }
  .playerProfileFinalMockup .playerProfileIdentityCopyV320{
    width:auto!important;
    max-width:640px!important;
    min-width:0!important;
  }
  .playerProfileFinalMockup .playerProfileNameLine{
    width:max-content!important;
    max-width:640px!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:14px!important;
  }
  .playerProfileFinalMockup .playerProfileNameLine h1{
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    flex:0 1 auto!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
  }
  .playerProfileFinalMockup .playerRegionBadge{
    flex:0 0 auto!important;
    margin-left:4px!important;
  }
  .playerProfileFinalMockup .playerProfileMetaPrimary{
    width:auto!important;
    max-width:100%!important;
  }
  .playerProfileFinalMockup .profilePlayerStatStripV324{
    min-width:470px!important;
    height:57px!important;
    border-color:rgba(224,235,230,.22)!important;
    background:
      linear-gradient(180deg,rgba(39,49,51,.48),rgba(8,14,16,.60))!important;
    -webkit-backdrop-filter:blur(14px) saturate(1.16)!important;
    backdrop-filter:blur(14px) saturate(1.16)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -1px 0 rgba(255,255,255,.028),
      0 8px 22px rgba(0,0,0,.20)!important;
  }
  .playerProfileFinalMockup .profilePlayerStatStripV324 .playerStatCellV323{
    height:55px!important;
    padding:6px 17px!important;
    gap:4px 7px!important;
  }
  .playerProfileFinalMockup .profilePlayerStatStripV324 .playerStatCellV323>b{
    font-size:22px!important;
    letter-spacing:.016em!important;
  }
  .playerProfileFinalMockup .profilePlayerStatStripV324 .playerStatCellV323>small{
    font-size:8.5px!important;
    letter-spacing:.07em!important;
  }
  .playerProfileFinalMockup .profilePlayerStatStripV324 .playerStatDividerV323{
    height:37px!important;
    background:linear-gradient(180deg,transparent,rgba(232,240,236,.25),transparent)!important;
  }
  .playerProfileFinalMockup .profilePlayerStatStripV324 .winrateStatV323{
    min-width:132px!important;
  }
  .playerProfileFinalMockup .profilePlayerStatStripV324 .wtrStatV323{
    min-width:190px!important;
  }
  .playerProfileFinalMockup .profilePlayerStatStripV324 .wtrStatV323>i{
    height:22px!important;
    padding:0 7px!important;
    font-size:8.2px!important;
  }
  .playerProfileFinalMockup .profilePlayerStatStripV324 .battlesStatV323{
    min-width:118px!important;
  }
}

@media(max-width:1250px) and (min-width:851px){
  .playerProfileFinalMockup .playerProfileHeroMain{
    max-width:58%!important;
  }
  .playerProfileFinalMockup .playerProfileIdentityCopyV320{
    max-width:570px!important;
  }
  .playerProfileFinalMockup .playerProfileNameLine{
    max-width:570px!important;
    flex-wrap:nowrap!important;
  }
  .playerProfileFinalMockup .playerProfileNameLine h1{
    max-width:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
  }
  .playerProfileFinalMockup .playerRegionBadge{flex:0 0 auto!important}
  .playerProfileFinalMockup .profilePlayerStatStripV324{
    min-width:420px!important;
    height:51px!important;
    background:linear-gradient(180deg,rgba(37,47,49,.49),rgba(8,14,16,.61))!important;
    -webkit-backdrop-filter:blur(13px) saturate(1.14)!important;
    backdrop-filter:blur(13px) saturate(1.14)!important;
  }
  .playerProfileFinalMockup .profilePlayerStatStripV324 .playerStatCellV323{
    height:49px!important;
    padding:5px 13px!important;
  }
  .playerProfileFinalMockup .profilePlayerStatStripV324 .playerStatCellV323>b{font-size:19px!important}
  .playerProfileFinalMockup .profilePlayerStatStripV324 .playerStatCellV323>small{font-size:7.4px!important}
  .playerProfileFinalMockup .profilePlayerStatStripV324 .winrateStatV323{min-width:116px!important}
  .playerProfileFinalMockup .profilePlayerStatStripV324 .wtrStatV323{min-width:172px!important}
  .playerProfileFinalMockup .profilePlayerStatStripV324 .battlesStatV323{min-width:104px!important}
}


/* ========================================================================
   v0.3.5.324 FIX2 — PROFILE TOP STAT STRIP HEIGHT + OVERFLOW HARD FIX
   Scope: profile hero top WR/WTR/Battles strip only.
   Root cause: legacy .playerProfileMeta>span:not(.approvedPlayerStats) rule had
   higher specificity and forced the new strip back to 25px height.
   ======================================================================== */
.playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary{
  min-height:66px!important;
  height:auto!important;
  overflow:visible!important;
  align-items:flex-start!important;
  margin-top:18px!important;
}
.playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary > span.profilePlayerStatStripV324{
  position:relative!important;
  display:inline-flex!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  flex-wrap:nowrap!important;
  width:auto!important;
  max-width:100%!important;
  min-width:470px!important;
  height:62px!important;
  min-height:62px!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
  border:1px solid rgba(224,235,230,.22)!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,rgba(39,49,51,.48),rgba(8,14,16,.60))!important;
  color:#edf3ef!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.16)!important;
  backdrop-filter:blur(14px) saturate(1.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(255,255,255,.028),0 8px 22px rgba(0,0,0,.20)!important;
  font-family:var(--approved-font)!important;
  font-size:inherit!important;
  font-weight:inherit!important;
  letter-spacing:normal!important;
  line-height:normal!important;
  text-transform:none!important;
}
.playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary > span.profilePlayerStatStripV324 .playerStatCellV323{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  align-content:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  min-height:60px!important;
  height:60px!important;
  padding:7px 17px 8px!important;
  gap:3px 7px!important;
  overflow:visible!important;
  white-space:nowrap!important;
  line-height:1!important;
}
.playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary > span.profilePlayerStatStripV324 .playerStatCellV323>b{
  display:inline-block!important;
  margin:0!important;
  padding:0!important;
  font-size:22px!important;
  line-height:1.05!important;
  font-weight:950!important;
  vertical-align:middle!important;
  overflow:visible!important;
}
.playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary > span.profilePlayerStatStripV324 .playerStatCellV323>small{
  display:block!important;
  flex:1 0 100%!important;
  margin:0!important;
  padding:0 0 1px!important;
  font-size:8.5px!important;
  line-height:1.15!important;
  font-weight:850!important;
  letter-spacing:.07em!important;
  text-align:center!important;
  overflow:visible!important;
}
.playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary > span.profilePlayerStatStripV324 .playerStatDividerV323{
  align-self:center!important;
  width:1px!important;
  height:40px!important;
  flex:0 0 1px!important;
}
.playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary > span.profilePlayerStatStripV324 .wtrStatV323>i{
  height:22px!important;
  min-height:22px!important;
  padding:0 7px!important;
  font-size:8.2px!important;
  line-height:20px!important;
  overflow:visible!important;
}
.playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary > span.profilePlayerStatStripV324 .winrateStatV323{min-width:132px!important}
.playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary > span.profilePlayerStatStripV324 .wtrStatV323{min-width:190px!important}
.playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary > span.profilePlayerStatStripV324 .battlesStatV323{min-width:118px!important}

@media(max-width:1250px) and (min-width:851px){
  .playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary{min-height:60px!important;margin-top:17px!important}
  .playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary > span.profilePlayerStatStripV324{
    min-width:420px!important;height:57px!important;min-height:57px!important;
  }
  .playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary > span.profilePlayerStatStripV324 .playerStatCellV323{
    height:55px!important;min-height:55px!important;padding:6px 13px 7px!important;
  }
  .playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary > span.profilePlayerStatStripV324 .playerStatCellV323>b{font-size:19px!important}
  .playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary > span.profilePlayerStatStripV324 .playerStatCellV323>small{font-size:7.4px!important}
  .playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary > span.profilePlayerStatStripV324 .winrateStatV323{min-width:116px!important}
  .playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary > span.profilePlayerStatStripV324 .wtrStatV323{min-width:172px!important}
  .playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary > span.profilePlayerStatStripV324 .battlesStatV323{min-width:104px!important}
}
@media(max-width:850px){
  .playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary{min-height:54px!important;width:100%!important}
  .playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary > span.profilePlayerStatStripV324{
    min-width:0!important;width:100%!important;height:auto!important;min-height:52px!important;overflow:visible!important;
  }
  .playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary > span.profilePlayerStatStripV324 .playerStatCellV323{
    height:50px!important;min-height:50px!important;padding:6px 8px!important;
  }
  .playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary > span.profilePlayerStatStripV324 .playerStatCellV323>b{font-size:15px!important}
  .playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary > span.profilePlayerStatStripV324 .playerStatCellV323>small{font-size:6px!important}
  .playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary > span.profilePlayerStatStripV324 .winrateStatV323{min-width:86px!important;flex:1 1 86px!important}
  .playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary > span.profilePlayerStatStripV324 .wtrStatV323{min-width:126px!important;flex:1 1 126px!important}
  .playerProfileFinalMockup .playerProfileMeta.playerProfileMetaPrimary > span.profilePlayerStatStripV324 .battlesStatV323{min-width:80px!important;flex:1 1 80px!important}
}


/* ========================================================================
   v0.3.5.326 FIX3 — HOME TOP TODAY 5 CARDS ONLY
   Scope lock: LEFT "TOP TODAY" panel only.
   Latest Replays and Popular Tanks are intentionally untouched.
   ======================================================================== */
body.homePageActive .todayLeaderboardPanel{
  --leader-accent:#d9b344;
  --leader-accent-soft:rgba(217,179,68,.14);
  overflow:visible!important;
}
body.homePageActive .todayLeaderboardPanel[data-leader-metric="kills"]{
  --leader-accent:#eb8f74;
  --leader-accent-soft:rgba(235,143,116,.13);
}
body.homePageActive .todayLeaderboardPanel[data-leader-metric="assist"]{
  --leader-accent:#75cfc0;
  --leader-accent-soft:rgba(117,207,192,.13);
}
body.homePageActive .todayLeaderboardPanel .panelTitle{
  height:31px!important;
  min-height:31px!important;
  flex:0 0 31px!important;
  padding-bottom:4px!important;
}
body.homePageActive .todayLeaderboardPanel .panelTitle strong{
  font-size:11.7px!important;
  letter-spacing:.035em!important;
}
body.homePageActive .todayLeaderboardTabs{
  position:relative;
  height:28px;
  min-height:28px;
  margin:1px 0 6px;
  padding:2px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:3px;
  border:1px solid rgba(160,181,174,.13);
  border-radius:7px;
  background:linear-gradient(180deg,rgba(14,23,20,.88),rgba(7,13,11,.82));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
body.homePageActive .todayLeaderboardTab{
  position:relative;
  height:22px;
  min-width:0;
  border:0;
  border-radius:5px;
  background:transparent;
  color:#77857f;
  font:850 7.5px/1 var(--approved-font);
  letter-spacing:.045em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .18s ease,background .18s ease,box-shadow .18s ease;
}
body.homePageActive .todayLeaderboardTab::after{
  content:"";
  position:absolute;
  left:25%;right:25%;bottom:1px;
  height:1px;border-radius:2px;
  background:var(--leader-accent);
  box-shadow:0 0 7px var(--leader-accent-soft);
  transform:scaleX(0);transform-origin:center;
  transition:transform .18s ease;
}
body.homePageActive .todayLeaderboardTab:hover{
  color:#c9d2ce;background:rgba(255,255,255,.018);
}
body.homePageActive .todayLeaderboardTab.active{
  color:#eef3f0;
  background:linear-gradient(180deg,var(--leader-accent-soft),rgba(255,255,255,.012));
  box-shadow:inset 0 0 0 1px rgba(226,235,230,.055);
}
body.homePageActive .todayLeaderboardTab.active::after{transform:scaleX(1)}
body.homePageActive .todayLeaderboardPanel .damageScore{
  color:var(--leader-accent)!important;
  text-shadow:0 0 10px var(--leader-accent-soft)!important;
}

/* XL desktop: 5 real cards fill the existing panel without changing panel height. */
@media (min-width:1600px){
  body.homePageActive .approvedHomeDashboard .todayLeaderboardPanel .todayLeaderboardList{
    display:grid!important;
    grid-template-rows:54px repeat(4,46px)!important;
    gap:4px!important;
    height:254px!important;
    min-height:254px!important;
    max-height:254px!important;
    padding:0!important;
    margin:0!important;
    overflow:visible!important;
  }
  body.homePageActive .todayLeaderboardPanel .damageMiniCard{
    height:46px!important;min-height:46px!important;max-height:46px!important;
    grid-template-columns:34px 70px minmax(0,1fr) 78px 58px!important;
    gap:7px!important;padding:0 7px 0 5px!important;
  }
  body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-1{
    height:54px!important;min-height:54px!important;max-height:54px!important;
  }
  body.homePageActive .todayLeaderboardPanel .damageRankWrap,
  body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-1 .damageRankWrap{
    width:34px!important;height:44px!important;
  }
  body.homePageActive .todayLeaderboardPanel .damageTrophy{width:32px!important;height:32px!important}
  body.homePageActive .todayLeaderboardPanel .damageTrophy.rank-1{width:35px!important;height:35px!important}
  body.homePageActive .todayLeaderboardPanel .damageTankThumb,
  body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-1 .damageTankThumb{
    width:70px!important;height:43px!important;
  }
  body.homePageActive .todayLeaderboardPanel .damageTankThumb img,
  body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-1 .damageTankThumb img{
    width:70px!important;height:43px!important;max-width:70px!important;max-height:43px!important;
    filter:brightness(1.13) contrast(1.04) drop-shadow(0 6px 7px rgba(0,0,0,.56))!important;
  }
  body.homePageActive .todayLeaderboardPanel .damageIdentity .damageTankName{font-size:13.1px!important}
  body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-1 .damageIdentity .damageTankName{font-size:14px!important}
  body.homePageActive .todayLeaderboardPanel .damageIdentity small,
  body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-1 .damageIdentity small{
    margin-top:4px!important;font-size:8.2px!important;line-height:1!important;
  }
  body.homePageActive .todayLeaderboardPanel .damageScore{font-size:15.8px!important;line-height:.95!important}
  body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-1 .damageScore{font-size:17.3px!important}
  body.homePageActive .todayLeaderboardPanel .damageScore small{margin-top:4px!important;font-size:5.9px!important}
  body.homePageActive .todayLeaderboardPanel .damageOpen,
  body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-1 .damageOpen{
    width:58px!important;height:29px!important;font-size:7.4px!important;border-radius:6px!important;
  }
}

/* Standard desktop: keep all 5 rows inside the original 326px panel. */
@media (min-width:1051px) and (max-width:1599px){
  body.homePageActive .approvedHomeDashboard .todayLeaderboardPanel .todayLeaderboardList{
    display:grid!important;
    grid-template-rows:48px repeat(4,42px)!important;
    gap:4px!important;
    height:232px!important;min-height:232px!important;max-height:232px!important;
    padding:0!important;margin:0!important;overflow:visible!important;
  }
  body.homePageActive .todayLeaderboardPanel .damageMiniCard{
    height:42px!important;min-height:42px!important;max-height:42px!important;
    grid-template-columns:31px 62px minmax(0,1fr) 70px 52px!important;
    gap:6px!important;padding:0 6px 0 4px!important;
  }
  body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-1{
    height:48px!important;min-height:48px!important;max-height:48px!important;
  }
  body.homePageActive .todayLeaderboardPanel .damageRankWrap,
  body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-1 .damageRankWrap{width:31px!important;height:40px!important}
  body.homePageActive .todayLeaderboardPanel .damageTrophy{width:29px!important;height:29px!important}
  body.homePageActive .todayLeaderboardPanel .damageTrophy.rank-1{width:32px!important;height:32px!important}
  body.homePageActive .todayLeaderboardPanel .damageTankThumb,
  body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-1 .damageTankThumb{width:62px!important;height:38px!important}
  body.homePageActive .todayLeaderboardPanel .damageTankThumb img,
  body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-1 .damageTankThumb img{
    width:62px!important;height:38px!important;max-width:62px!important;max-height:38px!important;
  }
  body.homePageActive .todayLeaderboardPanel .damageIdentity .damageTankName{font-size:11.8px!important}
  body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-1 .damageIdentity .damageTankName{font-size:12.6px!important}
  body.homePageActive .todayLeaderboardPanel .damageIdentity small,
  body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-1 .damageIdentity small{margin-top:3px!important;font-size:7.5px!important}
  body.homePageActive .todayLeaderboardPanel .damageScore{font-size:14.2px!important}
  body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-1 .damageScore{font-size:15.6px!important}
  body.homePageActive .todayLeaderboardPanel .damageScore small{margin-top:3px!important;font-size:5.5px!important}
  body.homePageActive .todayLeaderboardPanel .damageOpen{width:52px!important;height:27px!important;font-size:6.9px!important}
}

/* Stacked HOME: no clipping, still show all 5 leaders. */
@media (max-width:1050px){
  body.homePageActive .todayLeaderboardTabs{margin-bottom:7px}
  body.homePageActive .approvedHomeDashboard .todayLeaderboardPanel .todayLeaderboardList{
    display:grid!important;grid-template-rows:repeat(5,minmax(48px,auto))!important;
    height:auto!important;min-height:0!important;max-height:none!important;gap:5px!important;
  }
}
@media (max-width:560px){
  body.homePageActive .todayLeaderboardTab{font-size:6.7px}
  body.homePageActive .todayLeaderboardPanel .damageMiniCard{grid-template-columns:28px 54px minmax(0,1fr) 62px!important}
  body.homePageActive .todayLeaderboardPanel .damageOpen{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  body.homePageActive .todayLeaderboardTab,
  body.homePageActive .todayLeaderboardTab::after{transition:none!important}
}


/* ========================================================================
   v0.3.5.328 FIX1 — HOME LIVE PULSE READABILITY HARD POLISH
   Bigger, clearer two-event Pulse. No changes to dashboard panels.
   ======================================================================== */
body.homePageActive .homeLivePulseV328{
  width:min(var(--home-canvas),calc(100% - 38px));
  min-height:64px;
  margin:10px auto 0;
  display:grid;
  grid-template-columns:190px minmax(0,1fr) 94px;
  align-items:center;
  gap:11px;
  padding:7px 11px;
  border:1px solid rgba(169,229,27,.34);
  border-radius:7px;
  background:
    linear-gradient(90deg,rgba(14,28,22,.98),rgba(10,22,18,.96) 52%,rgba(15,27,21,.97)),
    radial-gradient(circle at 15% 50%,rgba(169,229,27,.085),transparent 34%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 26px rgba(0,0,0,.16),0 0 25px rgba(169,229,27,.04);
  overflow:hidden;
}
body.homePageActive .homePulseLeadV328{
  min-width:0;height:48px;display:flex;align-items:center;gap:11px;padding-right:11px;
  border-right:1px solid rgba(178,200,190,.15);
}
body.homePageActive .homePulseLiveDotV328{
  position:relative;flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:#a9e51b;
  box-shadow:0 0 12px rgba(169,229,27,.68);
}
body.homePageActive .homePulseLiveDotV328::after{
  content:"";position:absolute;inset:-5px;border:1px solid rgba(169,229,27,.27);border-radius:50%;
  animation:homePulseRingV328 2.2s ease-out infinite;
}
body.homePageActive .homePulseLeadV328>span:last-child{min-width:0;display:flex;flex-direction:column;gap:4px}
body.homePageActive .homePulseLeadV328 strong{color:#f5f8f6;font:950 12.6px/1 var(--approved-font);letter-spacing:.05em}
body.homePageActive .homePulseLeadV328 small{color:#93a39b;font:850 7.6px/1.1 var(--approved-font);letter-spacing:.075em;white-space:nowrap}
body.homePageActive .homePulseTrackV328{
  min-width:0;height:48px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:8px;overflow:hidden;
}
body.homePageActive .homePulseItemV328{
  min-width:0;height:48px;padding:0 9px 0 10px;display:flex;align-items:center;gap:9px;
  border:1px solid rgba(155,177,167,.12);border-radius:6px;background:rgba(255,255,255,.018);
  color:#d5ddd9;text-decoration:none;transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease;
}
body.homePageActive .homePulseItemV328:hover{border-color:rgba(169,229,27,.34);background:rgba(169,229,27,.05);color:#fff;transform:translateY(-1px)}
body.homePageActive .homePulseItemV328.pulse-critical{border-color:rgba(221,178,64,.31);background:linear-gradient(90deg,rgba(221,178,64,.10),rgba(255,255,255,.015))}
body.homePageActive .homePulseItemV328.pulse-strong{border-color:rgba(169,229,27,.22);background:linear-gradient(90deg,rgba(169,229,27,.045),rgba(255,255,255,.012))}
body.homePageActive .homePulseItemBodyV328{min-width:0;display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;gap:4px;overflow:hidden}
body.homePageActive .homePulseEventLabelV328{display:block;color:#9fb0a7;font:900 7.4px/1 var(--approved-font);letter-spacing:.075em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.homePageActive .pulse-critical .homePulseEventLabelV328{color:#e6bf55}
body.homePageActive .pulse-strong .homePulseEventLabelV328{color:#b9df54}
body.homePageActive .homePulseEventTextV328{display:block;min-width:0;color:#eef3f0;font:900 10.5px/1.08 var(--approved-font);letter-spacing:.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.homePageActive .homePulseHudIcon{flex:0 0 23px!important;width:23px!important;height:23px!important;color:#a9e51b!important;opacity:1}
body.homePageActive .homePulseHudIcon-critical{color:#e0b53e!important;filter:drop-shadow(0 0 7px rgba(221,178,64,.28))}
body.homePageActive .homePulseHudIcon-strong{color:#c8dc51!important;filter:drop-shadow(0 0 5px rgba(169,229,27,.14))}
body.homePageActive .homePulseOpenV328{flex:0 0 auto;color:#809087;font:950 13px/1 var(--approved-font);transition:color .16s ease,transform .16s ease}
body.homePageActive .homePulseItemV328:hover .homePulseOpenV328{color:#b7e848;transform:translateX(2px)}
body.homePageActive .homePulseEmptyV328{align-self:center;color:#96a59e;font:850 9.5px/1 var(--approved-font);letter-spacing:.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.homePageActive .homePulseStatusV328{justify-self:end;color:#91a098;font:850 7.1px/1 var(--approved-font);letter-spacing:.055em;white-space:nowrap;text-align:right}
body.homePageActive .homePulseItemV328.is-fresh{animation:homePulseFreshV328 .55s ease-out 1}
@keyframes homePulseRingV328{0%{transform:scale(.72);opacity:.7}75%,100%{transform:scale(1.7);opacity:0}}
@keyframes homePulseFreshV328{0%{box-shadow:inset 0 0 0 1px rgba(169,229,27,.42),0 0 17px rgba(169,229,27,.18)}100%{box-shadow:none}}
@media(max-width:1180px){
  body.homePageActive .homeLivePulseV328{grid-template-columns:176px minmax(0,1fr) 78px}
  body.homePageActive .homePulseTrackV328{grid-template-columns:repeat(2,minmax(250px,1fr));overflow-x:auto;scrollbar-width:none}
  body.homePageActive .homePulseTrackV328::-webkit-scrollbar{display:none}
}
@media(max-width:760px){
  body.homePageActive .homeLivePulseV328{width:calc(100% - 24px);grid-template-columns:148px minmax(0,1fr);gap:8px;padding:7px 8px;min-height:62px}
  body.homePageActive .homePulseStatusV328{display:none}
  body.homePageActive .homePulseLeadV328 strong{font-size:10.8px}
  body.homePageActive .homePulseLeadV328 small{font-size:6.5px}
  body.homePageActive .homePulseTrackV328{grid-template-columns:minmax(250px,1fr);overflow:hidden}
  body.homePageActive .homePulseItemV328:nth-child(n+2){display:none}
  body.homePageActive .homePulseEventTextV328{font-size:9.5px}
  body.homePageActive .homePulseHudIcon{flex-basis:21px!important;width:21px!important;height:21px!important}
}
@media(prefers-reduced-motion:reduce){
  body.homePageActive .homePulseLiveDotV328::after,body.homePageActive .homePulseItemV328.is-fresh{animation:none!important}
}

/* ========================================================================
   v0.3.5.329 — RECORD BATTLE + TOP-5 ENTRY EVENTS
   Metric identity inside Pulse + rare global leader-change toast.
   ======================================================================== */
body.homePageActive .homePulseHudIcon-damage{color:#e2b84b!important;filter:drop-shadow(0 0 6px rgba(226,184,75,.20))}
body.homePageActive .homePulseHudIcon-kills{color:#dc8f55!important;filter:drop-shadow(0 0 6px rgba(220,143,85,.18))}
body.homePageActive .homePulseHudIcon-assist{color:#67cbd0!important;filter:drop-shadow(0 0 6px rgba(103,203,208,.18))}
body.homePageActive .homePulseItemV328.metric-damage .homePulseEventLabelV328{color:#dfbc5a}
body.homePageActive .homePulseItemV328.metric-kills .homePulseEventLabelV328{color:#dc9a68}
body.homePageActive .homePulseItemV328.metric-assist .homePulseEventLabelV328{color:#78cdd1}
body.homePageActive .homePulseItemV328.metric-damage{border-color:rgba(220,177,67,.18)}
body.homePageActive .homePulseItemV328.metric-kills{border-color:rgba(211,132,77,.17)}
body.homePageActive .homePulseItemV328.metric-assist{border-color:rgba(80,187,193,.17)}

.recordBattleToastV329{
  position:fixed;right:24px;bottom:24px;z-index:4500;width:min(390px,calc(100vw - 32px));min-height:82px;
  display:grid;grid-template-columns:42px minmax(0,1fr) 20px;align-items:center;gap:12px;padding:13px 14px;
  border:1px solid rgba(219,177,63,.50);border-radius:9px;
  background:linear-gradient(118deg,rgba(34,28,12,.98),rgba(13,18,16,.985) 48%,rgba(10,17,14,.99));
  box-shadow:0 18px 46px rgba(0,0,0,.48),0 0 30px rgba(220,176,60,.13),inset 0 1px 0 rgba(255,255,255,.055);
  color:#f4f5ef;text-decoration:none;overflow:hidden;animation:recordBattleToastInV329 .22s ease-out both;
}
.recordBattleToastV329::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#dbb13f;box-shadow:0 0 16px rgba(219,177,63,.62)}
.recordBattleToastV329.isStrong{border-color:rgba(169,229,27,.38);background:linear-gradient(118deg,rgba(22,33,12,.98),rgba(12,20,16,.985) 50%,rgba(10,17,14,.99))}
.recordBattleToastV329.isStrong::before{background:#a9e51b;box-shadow:0 0 16px rgba(169,229,27,.52)}
.recordBattleToastIconV329{width:34px!important;height:34px!important;color:#e0b53e!important;filter:drop-shadow(0 0 9px rgba(224,181,62,.30))}
.recordBattleToastV329.isStrong .recordBattleToastIconV329{color:#b9df54!important;filter:drop-shadow(0 0 8px rgba(169,229,27,.22))}
.recordBattleToastCopyV329{min-width:0;display:flex;flex-direction:column;gap:4px}
.recordBattleToastCopyV329 small{color:#e2bd55;font:950 8.5px/1 var(--approved-font);letter-spacing:.085em}
.recordBattleToastV329.isStrong .recordBattleToastCopyV329 small{color:#badd55}
.recordBattleToastCopyV329 strong{color:#f7f9f6;font:950 13px/1.08 var(--approved-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recordBattleToastCopyV329 b{color:#d8dfdb;font:900 11px/1.05 var(--approved-font);font-variant-numeric:tabular-nums}
.recordBattleToastOpenV329{color:#d1b24e;font:950 17px/1 var(--approved-font);transition:transform .16s ease,color .16s ease}
.recordBattleToastV329:hover .recordBattleToastOpenV329{transform:translateX(2px);color:#f0ce62}
.recordBattleToastV329.isLeaving{animation:recordBattleToastOutV329 .18s ease-in both}
@keyframes recordBattleToastInV329{from{opacity:0;transform:translate3d(18px,8px,0) scale(.985)}to{opacity:1;transform:none}}
@keyframes recordBattleToastOutV329{to{opacity:0;transform:translate3d(14px,4px,0) scale(.99)}}
@media(max-width:760px){
  .recordBattleToastV329{right:12px;bottom:12px;width:calc(100vw - 24px);grid-template-columns:36px minmax(0,1fr) 18px;min-height:72px;padding:11px 12px;gap:10px}
  .recordBattleToastIconV329{width:29px!important;height:29px!important}
  .recordBattleToastCopyV329 strong{font-size:11.5px}
  .recordBattleToastCopyV329 b{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.recordBattleToastV329,.recordBattleToastV329.isLeaving{animation:none!important}}


/* ========================================================================
   v0.3.5.329 FIX1 — LIVE PULSE 5 STATIC SLOTS + EVENT-DRIVEN UPDATES
   Five compact event cells. No time-based carousel/rotation.
   ======================================================================== */
@media(min-width:1181px){
  body.homePageActive .homeLivePulseV328{grid-template-columns:176px minmax(0,1fr) 88px;gap:8px;padding-left:10px;padding-right:10px}
  body.homePageActive .homePulseTrackV328{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;height:48px;overflow:hidden}
  body.homePageActive .homePulseItemV328{height:48px;gap:6px;padding:0 6px;border-radius:5px}
  body.homePageActive .homePulseItemBodyV328{gap:3px}
  body.homePageActive .homePulseEventLabelV328{font-size:6.15px;letter-spacing:.055em}
  body.homePageActive .homePulseEventTextV328{font-size:8.2px;line-height:1.08}
  body.homePageActive .homePulseOpenV328{font-size:10px}
}
@media(min-width:761px) and (max-width:1180px){
  body.homePageActive .homePulseTrackV328{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:hidden}
  body.homePageActive .homePulseItemV328:nth-child(n+4){display:none}
}
body.homePageActive .homePulseEmojiIconV329{
  flex:0 0 20px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  font:400 16px/1 "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
  filter:saturate(.96) drop-shadow(0 0 5px rgba(0,0,0,.22));
}
body.homePageActive .homePulseEmojiIcon-critical{filter:saturate(1.05) drop-shadow(0 0 7px rgba(224,181,62,.28))}
body.homePageActive .homePulseEmojiIcon-leader{filter:saturate(1.05) drop-shadow(0 0 7px rgba(224,181,62,.24))}
body.homePageActive .homePulseEmojiIcon-damage{filter:saturate(1.05) drop-shadow(0 0 6px rgba(226,184,75,.20))}
body.homePageActive .homePulseEmojiIcon-kills{filter:saturate(1.05) drop-shadow(0 0 6px rgba(220,143,85,.18))}
body.homePageActive .homePulseEmojiIcon-assist{filter:saturate(1.02) drop-shadow(0 0 6px rgba(103,203,208,.18))}
body.homePageActive .homePulseEmojiIcon-replay{color:#a9e51b;font-family:var(--approved-font);font-size:15px;font-weight:950}
@media(max-width:760px){
  body.homePageActive .homePulseEmojiIconV329{flex-basis:20px;width:20px;height:20px;font-size:15px}
}


/* ========================================================================
   v0.3.5.329 FIX2 — LIVE PULSE TYPOGRAPHY + REPLAY IDENTITY
   Keep five static slots. Increase legibility and use the real HOME replay
   icon so the play symbol remains reserved for future uploaded video events.
   ======================================================================== */
@media(min-width:1181px){
  body.homePageActive .homePulseTrackV328{gap:6px!important}
  body.homePageActive .homePulseItemV328{gap:7px!important;padding:0 7px!important}
  body.homePageActive .homePulseItemBodyV328{gap:4px!important}
  body.homePageActive .homePulseEventLabelV328{
    font-size:7.35px!important;
    line-height:1!important;
    letter-spacing:.045em!important;
  }
  body.homePageActive .homePulseEventTextV328{
    font-size:9.75px!important;
    line-height:1.08!important;
    letter-spacing:.002em!important;
  }
  body.homePageActive .homePulseEmojiIconV329,
  body.homePageActive .homePulseReplayIconV329{
    flex-basis:22px!important;
    width:22px!important;
    height:22px!important;
  }
  body.homePageActive .homePulseEmojiIconV329{font-size:17px!important}
  body.homePageActive .homePulseOpenV328{font-size:11px!important}
}
body.homePageActive .homePulseReplayIconV329{
  flex:0 0 22px;
  width:22px;
  height:22px;
  display:inline-grid;
  place-items:center;
  border-radius:5px;
  background:rgba(169,229,27,.035);
  filter:drop-shadow(0 0 5px rgba(169,229,27,.13));
  overflow:visible;
}
body.homePageActive .homePulseReplayIconV329 img{
  display:block;
  width:20px;
  height:20px;
  object-fit:contain;
  filter:brightness(1.08) saturate(1.02);
}
@media(min-width:761px) and (max-width:1180px){
  body.homePageActive .homePulseEventLabelV328{font-size:7.25px!important}
  body.homePageActive .homePulseEventTextV328{font-size:9.7px!important}
  body.homePageActive .homePulseEmojiIconV329,
  body.homePageActive .homePulseReplayIconV329{flex-basis:22px!important;width:22px!important;height:22px!important}
  body.homePageActive .homePulseReplayIconV329 img{width:20px;height:20px}
}
@media(max-width:760px){
  body.homePageActive .homePulseEventLabelV328{font-size:7px!important}
  body.homePageActive .homePulseEventTextV328{font-size:10px!important}
  body.homePageActive .homePulseReplayIconV329{flex-basis:21px!important;width:21px!important;height:21px!important}
  body.homePageActive .homePulseReplayIconV329 img{width:19px;height:19px}
}

/* ========================================================================
   v0.3.5.329 FIX3 — LIVE PULSE 2.5D PREMIUM DEPTH
   Give Live Pulse its own premium instrument layer with depth, glow,
   stronger hierarchy, and clearer separation from the rest of HOME.
   ======================================================================== */
body.homePageActive .homeLivePulseV328{
  position:relative;
  isolation:isolate;
  min-height:76px!important;
  margin:12px auto 0!important;
  grid-template-columns:188px minmax(0,1fr) 92px!important;
  gap:10px!important;
  padding:9px 12px 10px!important;
  border:1px solid rgba(149,189,78,.34)!important;
  border-radius:10px!important;
  background:
    linear-gradient(180deg,rgba(26,39,31,.98) 0%,rgba(11,20,17,.985) 36%,rgba(7,13,11,.99) 100%),
    radial-gradient(circle at 14% 44%,rgba(169,229,27,.11),transparent 28%),
    radial-gradient(circle at 52% 125%,rgba(81,126,86,.14),transparent 38%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.62),
    0 2px 0 rgba(7,11,10,.95),
    0 14px 34px rgba(0,0,0,.34),
    0 0 28px rgba(169,229,27,.055)!important;
  overflow:visible!important;
}
body.homePageActive .homeLivePulseV328::before{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:0;
  height:1px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(169,229,27,.05),rgba(193,244,91,.72) 18%,rgba(228,239,208,.15) 50%,rgba(169,229,27,.52) 82%,rgba(169,229,27,.04));
  box-shadow:0 0 12px rgba(169,229,27,.14);
  pointer-events:none;
}
body.homePageActive .homeLivePulseV328::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:9px;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),transparent 24%),
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.04),transparent 38%);
  z-index:-1;
}
body.homePageActive .homePulseLeadV328{
  position:relative;
  min-width:0;
  height:56px!important;
  display:flex;
  align-items:center;
  gap:12px!important;
  padding:0 14px 0 12px!important;
  border:none!important;
  border-radius:8px;
  background:linear-gradient(180deg,rgba(23,37,28,.96),rgba(12,22,18,.985));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 8px 18px rgba(0,0,0,.24);
}
body.homePageActive .homePulseLeadV328::after{
  content:"";
  position:absolute;
  top:8px;
  bottom:8px;
  right:-5px;
  width:1px;
  background:linear-gradient(180deg,rgba(169,229,27,.03),rgba(169,229,27,.28),rgba(169,229,27,.03));
}
body.homePageActive .homePulseLiveDotV328{
  width:11px!important;
  height:11px!important;
  flex-basis:11px!important;
  background:#b7ec44!important;
  box-shadow:0 0 0 3px rgba(169,229,27,.10),0 0 16px rgba(169,229,27,.78)!important;
}
body.homePageActive .homePulseLiveDotV328::after{
  inset:-6px!important;
  border-color:rgba(169,229,27,.34)!important;
}
body.homePageActive .homePulseLeadV328 strong{
  color:#f5f8f5!important;
  font-size:12.9px!important;
  letter-spacing:.055em!important;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
body.homePageActive .homePulseLeadV328 small{
  color:#9faf9d!important;
  font-size:7.7px!important;
  letter-spacing:.09em!important;
}
body.homePageActive .homePulseTrackV328{
  position:relative;
  min-width:0;
  height:56px!important;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  align-items:stretch;
  gap:7px!important;
  overflow:hidden!important;
}
body.homePageActive .homePulseItemV328{
  position:relative;
  min-width:0;
  height:56px!important;
  padding:0 9px 0 10px!important;
  display:flex;
  align-items:center;
  gap:8px!important;
  border:1px solid rgba(116,144,127,.22)!important;
  border-radius:8px!important;
  background:
    linear-gradient(180deg,rgba(31,44,37,.92),rgba(17,26,22,.98) 55%,rgba(10,16,14,.99)),
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.03),transparent 26%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.62),
    0 7px 16px rgba(0,0,0,.18)!important;
  color:#dce4df!important;
  text-decoration:none;
  transform:translateY(0);
  transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease!important;
  overflow:hidden;
}
body.homePageActive .homePulseItemV328::before{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:0;
  height:1px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.15) 50%,rgba(255,255,255,0));
  opacity:.9;
}
body.homePageActive .homePulseItemV328::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:12px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.18));
  pointer-events:none;
}
body.homePageActive .homePulseItemV328:hover{
  border-color:rgba(169,229,27,.38)!important;
  background:
    linear-gradient(180deg,rgba(38,57,46,.94),rgba(18,29,23,.99) 56%,rgba(11,18,15,.995)),
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.04),transparent 28%)!important;
  color:#fff!important;
  transform:translateY(-2px)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.62),
    0 10px 20px rgba(0,0,0,.24),
    0 0 18px rgba(169,229,27,.08)!important;
}
body.homePageActive .homePulseItemV328.pulse-critical{
  border-color:rgba(221,178,64,.34)!important;
  background:
    linear-gradient(180deg,rgba(49,39,18,.92),rgba(20,19,14,.985) 58%,rgba(12,15,13,.99)),
    radial-gradient(circle at 14% 18%,rgba(221,178,64,.11),transparent 28%)!important;
}
body.homePageActive .homePulseItemV328.pulse-strong{
  border-color:rgba(169,229,27,.28)!important;
  background:
    linear-gradient(180deg,rgba(32,45,23,.92),rgba(17,26,18,.985) 58%,rgba(10,15,13,.99)),
    radial-gradient(circle at 14% 18%,rgba(169,229,27,.08),transparent 28%)!important;
}
body.homePageActive .homePulseItemBodyV328{gap:4px!important}
body.homePageActive .homePulseEventLabelV328{
  font-size:7.65px!important;
  line-height:1!important;
  letter-spacing:.06em!important;
  color:#a7b5ad!important;
}
body.homePageActive .homePulseEventTextV328{
  color:#f0f4f1!important;
  font-size:10.1px!important;
  line-height:1.1!important;
  letter-spacing:.004em!important;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
body.homePageActive .homePulseEmojiIconV329,
body.homePageActive .homePulseReplayIconV329{
  flex:0 0 23px!important;
  width:23px!important;
  height:23px!important;
}
body.homePageActive .homePulseEmojiIconV329{font-size:17px!important}
body.homePageActive .homePulseReplayIconV329{
  border-radius:6px!important;
  background:linear-gradient(180deg,rgba(169,229,27,.09),rgba(169,229,27,.02))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 8px rgba(169,229,27,.10)!important;
}
body.homePageActive .homePulseReplayIconV329 img{
  width:20px!important;
  height:20px!important;
  filter:brightness(1.12) saturate(1.04)!important;
}
body.homePageActive .homePulseOpenV328{
  color:#7f8d85!important;
  font-size:11px!important;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
body.homePageActive .homePulseItemV328:hover .homePulseOpenV328{
  color:#cde86e!important;
  transform:translateX(2px)!important;
}
body.homePageActive .homePulseEmptyV328{
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed rgba(129,154,140,.22);
  border-radius:8px;
  background:rgba(255,255,255,.015);
  color:#9aa8a1!important;
  font-size:10px!important;
}
body.homePageActive .homePulseStatusV328{
  height:56px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right:4px;
  color:#97a59d!important;
  font-size:7.2px!important;
  letter-spacing:.08em!important;
  text-align:right;
  text-shadow:0 1px 0 rgba(0,0,0,.32);
}
body.homePageActive .homePulseItemV328.is-fresh{
  animation:homePulseFreshV329 .7s ease-out 1!important;
}
@keyframes homePulseFreshV329{
  0%{
    box-shadow:
      inset 0 0 0 1px rgba(169,229,27,.45),
      0 0 0 1px rgba(169,229,27,.18),
      0 0 24px rgba(169,229,27,.18);
  }
  100%{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      inset 0 -1px 0 rgba(0,0,0,.62),
      0 7px 16px rgba(0,0,0,.18);
  }
}
@media(min-width:761px) and (max-width:1180px){
  body.homePageActive .homeLivePulseV328{
    grid-template-columns:170px minmax(0,1fr) 78px!important;
    min-height:74px!important;
    padding:8px 10px 9px!important;
  }
  body.homePageActive .homePulseLeadV328,
  body.homePageActive .homePulseTrackV328,
  body.homePageActive .homePulseStatusV328{height:54px!important}
  body.homePageActive .homePulseTrackV328{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
  body.homePageActive .homePulseItemV328{height:54px!important;padding:0 8px!important}
  body.homePageActive .homePulseEventLabelV328{font-size:7.35px!important}
  body.homePageActive .homePulseEventTextV328{font-size:9.8px!important}
}
@media(max-width:760px){
  body.homePageActive .homeLivePulseV328{
    width:calc(100% - 24px)!important;
    min-height:68px!important;
    grid-template-columns:144px minmax(0,1fr)!important;
    gap:8px!important;
    padding:8px!important;
    border-radius:9px!important;
  }
  body.homePageActive .homeLivePulseV328::before{left:8px;right:8px}
  body.homePageActive .homePulseLeadV328,
  body.homePageActive .homePulseTrackV328{height:52px!important}
  body.homePageActive .homePulseLeadV328{padding:0 10px!important;gap:10px!important}
  body.homePageActive .homePulseLeadV328 strong{font-size:10.9px!important}
  body.homePageActive .homePulseLeadV328 small{font-size:6.5px!important}
  body.homePageActive .homePulseTrackV328{grid-template-columns:minmax(0,1fr)!important;gap:0!important}
  body.homePageActive .homePulseItemV328{height:52px!important;padding:0 8px 0 9px!important;border-radius:7px!important}
  body.homePageActive .homePulseEventLabelV328{font-size:7.05px!important}
  body.homePageActive .homePulseEventTextV328{font-size:10px!important}
  body.homePageActive .homePulseEmojiIconV329,
  body.homePageActive .homePulseReplayIconV329{flex-basis:21px!important;width:21px!important;height:21px!important}
}
@media(prefers-reduced-motion:reduce){
  body.homePageActive .homePulseItemV328,
  body.homePageActive .homePulseItemV328:hover,
  body.homePageActive .homePulseItemV328.is-fresh{transition:none!important;animation:none!important;transform:none!important}
}

/* ========================================================================
   v0.3.5.329 FIX4 — LIVE PULSE READABILITY + EVENT HIERARCHY
   +10% typography, stronger key-value hierarchy, event-specific accents,
   and a restrained emphasis on the newest event. Five static slots remain.
   ======================================================================== */
body.homePageActive .homeLivePulseV328{
  min-height:82px!important;
  padding:10px 12px 11px!important;
}
body.homePageActive .homePulseLeadV328,
body.homePageActive .homePulseTrackV328,
body.homePageActive .homePulseStatusV328{
  height:60px!important;
}
body.homePageActive .homePulseTrackV328{
  gap:7px!important;
}
body.homePageActive .homePulseItemV328{
  --pulse-accent:rgba(169,229,27,.56);
  --pulse-accent-soft:rgba(169,229,27,.075);
  height:60px!important;
  gap:8px!important;
  padding:0 10px!important;
  border-color:rgba(124,151,136,.24)!important;
  background:
    linear-gradient(180deg,rgba(33,47,40,.94),rgba(17,27,23,.99) 57%,rgba(10,16,14,.995)),
    radial-gradient(circle at 10% 16%,var(--pulse-accent-soft),transparent 30%)!important;
  box-shadow:
    inset 2px 0 0 var(--pulse-accent),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.64),
    0 7px 17px rgba(0,0,0,.19)!important;
}
body.homePageActive .homePulseItemV328.metric-damage{
  --pulse-accent:rgba(226,184,75,.72);
  --pulse-accent-soft:rgba(226,184,75,.10);
}
body.homePageActive .homePulseItemV328.metric-kills{
  --pulse-accent:rgba(220,143,85,.76);
  --pulse-accent-soft:rgba(220,143,85,.105);
}
body.homePageActive .homePulseItemV328.metric-assist{
  --pulse-accent:rgba(103,203,208,.76);
  --pulse-accent-soft:rgba(103,203,208,.10);
}
body.homePageActive .homePulseItemV328.type-replay_uploaded{
  --pulse-accent:rgba(169,229,27,.68);
  --pulse-accent-soft:rgba(169,229,27,.085);
}
body.homePageActive .homePulseItemV328.type-daily_record{
  --pulse-accent:rgba(235,194,77,.88);
  --pulse-accent-soft:rgba(235,194,77,.135);
}
body.homePageActive .homePulseItemV328.type-record_broken{
  --pulse-accent:rgba(239,176,69,.94);
  --pulse-accent-soft:rgba(239,176,69,.15);
}
body.homePageActive .homePulseItemV328.pulse-critical,
body.homePageActive .homePulseItemV328.pulse-strong{
  background:
    linear-gradient(180deg,rgba(38,45,32,.95),rgba(19,26,20,.99) 58%,rgba(10,16,14,.995)),
    radial-gradient(circle at 10% 16%,var(--pulse-accent-soft),transparent 32%)!important;
  box-shadow:
    inset 2px 0 0 var(--pulse-accent),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.64),
    0 8px 18px rgba(0,0,0,.20)!important;
}
body.homePageActive .homePulseItemV328.is-latest{
  border-color:color-mix(in srgb,var(--pulse-accent) 54%,rgba(135,158,147,.22))!important;
  background:
    linear-gradient(180deg,rgba(42,58,48,.97),rgba(20,31,25,.995) 56%,rgba(11,18,15,.998)),
    radial-gradient(circle at 12% 16%,var(--pulse-accent-soft),transparent 34%)!important;
  box-shadow:
    inset 3px 0 0 var(--pulse-accent),
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.65),
    0 9px 20px rgba(0,0,0,.22),
    0 0 15px color-mix(in srgb,var(--pulse-accent) 14%,transparent)!important;
}
body.homePageActive .homePulseItemV328.is-latest::before{
  background:linear-gradient(90deg,transparent,var(--pulse-accent),transparent)!important;
  opacity:.38!important;
}
body.homePageActive .homePulseItemV328:hover{
  border-color:color-mix(in srgb,var(--pulse-accent) 70%,rgba(169,229,27,.25))!important;
  box-shadow:
    inset 3px 0 0 var(--pulse-accent),
    inset 0 1px 0 rgba(255,255,255,.085),
    inset 0 -1px 0 rgba(0,0,0,.64),
    0 12px 22px rgba(0,0,0,.25),
    0 0 18px color-mix(in srgb,var(--pulse-accent) 18%,transparent)!important;
}
body.homePageActive .homePulseItemBodyV328{
  gap:5px!important;
}
body.homePageActive .homePulseEventLabelV328{
  font-size:8.4px!important;
  line-height:1!important;
  letter-spacing:.055em!important;
  color:#b2beb8!important;
  text-shadow:0 1px 0 rgba(0,0,0,.42);
}
body.homePageActive .homePulseItemV328.metric-damage .homePulseEventLabelV328{color:#e6c567!important}
body.homePageActive .homePulseItemV328.metric-kills .homePulseEventLabelV328{color:#e4a477!important}
body.homePageActive .homePulseItemV328.metric-assist .homePulseEventLabelV328{color:#84d5d8!important}
body.homePageActive .homePulseItemV328.type-replay_uploaded .homePulseEventLabelV328{color:#c1e967!important}
body.homePageActive .homePulseItemV328.type-daily_record .homePulseEventLabelV328,
body.homePageActive .homePulseItemV328.type-record_broken .homePulseEventLabelV328{color:#efc95c!important}
body.homePageActive .homePulseEventTextV328{
  font-size:11.1px!important;
  line-height:1.08!important;
  letter-spacing:0!important;
  color:#edf2ef!important;
  font-weight:900!important;
}
body.homePageActive .homePulseActorV329{
  color:#f5f8f6;
  font-weight:950;
}
body.homePageActive .homePulseVehicleV329{
  color:#c6d0ca;
  font-weight:850;
}
body.homePageActive .homePulseSepV329{
  color:#65756d;
  font-weight:800;
}
body.homePageActive .homePulseValueV329{
  color:#f2f7f3;
  font-weight:1000;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 8px color-mix(in srgb,var(--pulse-accent) 15%,transparent),0 1px 0 rgba(0,0,0,.45);
}
body.homePageActive .homePulseItemV328.metric-damage .homePulseValueV329{color:#f0cf6c}
body.homePageActive .homePulseItemV328.metric-kills .homePulseValueV329{color:#edb080}
body.homePageActive .homePulseItemV328.metric-assist .homePulseValueV329{color:#91dde0}
body.homePageActive .homePulseItemV328.type-replay_uploaded .homePulseValueV329{color:#d0ef80}
body.homePageActive .homePulseItemV328.type-daily_record .homePulseValueV329,
body.homePageActive .homePulseItemV328.type-record_broken .homePulseValueV329{color:#f3ce62}
body.homePageActive .homePulseEmojiIconV329,
body.homePageActive .homePulseReplayIconV329{
  flex-basis:24px!important;
  width:24px!important;
  height:24px!important;
}
body.homePageActive .homePulseEmojiIconV329{font-size:18px!important}
body.homePageActive .homePulseReplayIconV329 img{width:21px!important;height:21px!important}
body.homePageActive .homePulseOpenV328{
  font-size:12px!important;
  color:#8d9b93!important;
}
body.homePageActive .homePulseItemV328.is-latest .homePulseOpenV328{color:#b8d56e!important}
body.homePageActive .homePulseItemV328.is-fresh{
  animation:homePulseFreshV329Fix4 .82s ease-out 1!important;
}
@keyframes homePulseFreshV329Fix4{
  0%{
    transform:translateY(-1px);
    box-shadow:
      inset 3px 0 0 var(--pulse-accent),
      inset 0 0 0 1px color-mix(in srgb,var(--pulse-accent) 62%,transparent),
      0 0 28px color-mix(in srgb,var(--pulse-accent) 24%,transparent);
  }
  100%{
    transform:none;
    box-shadow:
      inset 3px 0 0 var(--pulse-accent),
      inset 0 1px 0 rgba(255,255,255,.075),
      inset 0 -1px 0 rgba(0,0,0,.65),
      0 9px 20px rgba(0,0,0,.22),
      0 0 15px color-mix(in srgb,var(--pulse-accent) 14%,transparent);
  }
}
@media(min-width:761px) and (max-width:1180px){
  body.homePageActive .homeLivePulseV328{min-height:80px!important;padding:9px 10px 10px!important}
  body.homePageActive .homePulseLeadV328,
  body.homePageActive .homePulseTrackV328,
  body.homePageActive .homePulseStatusV328{height:58px!important}
  body.homePageActive .homePulseItemV328{height:58px!important;padding:0 9px!important}
  body.homePageActive .homePulseEventLabelV328{font-size:8.05px!important}
  body.homePageActive .homePulseEventTextV328{font-size:10.75px!important}
}
@media(max-width:760px){
  body.homePageActive .homeLivePulseV328{min-height:72px!important;padding:8px!important}
  body.homePageActive .homePulseLeadV328,
  body.homePageActive .homePulseTrackV328{height:54px!important}
  body.homePageActive .homePulseItemV328{height:54px!important;padding:0 9px!important}
  body.homePageActive .homePulseEventLabelV328{font-size:7.7px!important}
  body.homePageActive .homePulseEventTextV328{font-size:10.6px!important}
  body.homePageActive .homePulseEmojiIconV329,
  body.homePageActive .homePulseReplayIconV329{flex-basis:22px!important;width:22px!important;height:22px!important}
  body.homePageActive .homePulseEmojiIconV329{font-size:16px!important}
}
@media(prefers-reduced-motion:reduce){
  body.homePageActive .homePulseItemV328.is-fresh{animation:none!important}
}

/* ========================================================================
   v0.3.5.329 FIX5 — LIVE PULSE HOVER OVERFLOW CLIP HARD FIX
   Pulse cards must be allowed to lift/glow outside the track box on hover.
   ======================================================================== */
body.homePageActive .homePulseTrackV328{
  overflow:visible!important;
  position:relative;
  z-index:2;
}
body.homePageActive .homePulseItemV328{
  position:relative;
  z-index:1;
  will-change:transform,box-shadow;
}
body.homePageActive .homePulseItemV328:hover,
body.homePageActive .homePulseItemV328:focus-visible{
  z-index:8;
  transform:translate3d(0,-2px,0)!important;
}
body.homePageActive .homePulseItemV328.is-fresh{
  z-index:6;
}
@media(max-width:760px){
  body.homePageActive .homePulseTrackV328{overflow:visible!important}
  body.homePageActive .homePulseItemV328:hover,
  body.homePageActive .homePulseItemV328:focus-visible{transform:none!important}
}

/* ========================================================================
   v0.3.5.330 — HOME STEEL COMFORT THEME
   HOME-only visual migration from near-black/graphite to a layered steel
   palette. Geometry and functionality stay intact. The goal is lower eye
   strain, clearer surface hierarchy, and stronger premium depth/shadows.
   ======================================================================== */
body.homePageActive{
  --home-steel-page:#182228;
  --home-steel-page-deep:#111a1f;
  --home-steel-header:#1c272d;
  --home-steel-section:#202c32;
  --home-steel-section-deep:#182328;
  --home-steel-card:#26343a;
  --home-steel-card-deep:#1d292e;
  --home-steel-inner:#222f35;
  --home-steel-line:rgba(221,232,235,.22);
  --home-steel-line-soft:rgba(221,232,235,.13);
  --home-steel-highlight:rgba(255,255,255,.07);
  --home-steel-text:#eef3f3;
  --home-steel-muted:#a5b1b4;
  --home-steel-muted2:#87969a;
  --home-steel-shadow:0 18px 42px rgba(0,0,0,.30);
  --home-steel-shadow-soft:0 10px 25px rgba(0,0,0,.22);
  background:
    radial-gradient(1100px 520px at 50% -130px,rgba(113,139,151,.16),transparent 70%),
    radial-gradient(780px 520px at 7% 48%,rgba(79,106,116,.10),transparent 72%),
    linear-gradient(180deg,#202b31 0%,var(--home-steel-page) 38%,var(--home-steel-page-deep) 100%)!important;
  color:var(--home-steel-text)!important;
}
body.homePageActive .noise{opacity:.022!important}

/* Header: lifted steel rail instead of a black strip. */
body.homePageActive .approvedTopbar,
body.homePageActive .topbar{
  background:linear-gradient(180deg,rgba(33,45,51,.985),rgba(24,34,39,.985))!important;
  border-bottom-color:rgba(221,232,235,.18)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.28),inset 0 -1px 0 rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035)!important;
  backdrop-filter:blur(20px) saturate(1.05)!important;
}
body.homePageActive .topbar nav a{color:#d0d8da!important}
body.homePageActive .topbar nav a:hover{color:#eff6e7!important}
body.homePageActive .topActions .liveDot,
body.homePageActive .topActions .languageSelector,
body.homePageActive .topActions .accountControl,
body.homePageActive .topSearch,
body.homePageActive .approvedSearch{
  background:rgba(24,34,39,.78)!important;
  border-color:rgba(221,232,235,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
}

/* Hero: keep approved art/composition; make the frame/surfaces steel and lifted. */
body.homePageActive .homeApprovedHero{
  border:1px solid rgba(221,232,235,.24)!important;
  background:#202b31!important;
  box-shadow:0 24px 52px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
body.homePageActive .homeApprovedHero .heroBackdrop{
  background-color:#1d292f!important;
  filter:saturate(.88) contrast(1.04) brightness(.83)!important;
}
body.homePageActive .homeApprovedHero:before{
  background:
    linear-gradient(90deg,
      rgba(21,30,35,.92) 0%,
      rgba(21,30,35,.80) 20%,
      rgba(21,30,35,.48) 38%,
      rgba(21,30,35,.18) 54%,
      rgba(21,30,35,.055) 74%,
      rgba(21,30,35,.02) 100%),
    linear-gradient(180deg,rgba(15,23,27,.00),rgba(15,23,27,.05) 62%,rgba(15,23,27,.60) 100%)!important;
}
body.homePageActive .homeApprovedHero:after{
  background:linear-gradient(180deg,transparent 74%,rgba(18,27,31,.72) 100%)!important;
}
body.homePageActive .homeHero p{color:#d0d8d8!important}
body.homePageActive .heroMetrics>div{
  border-color:rgba(221,232,235,.23)!important;
  background:linear-gradient(180deg,rgba(47,62,69,.80),rgba(29,41,47,.82))!important;
  box-shadow:0 10px 20px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.075),inset 0 -1px 0 rgba(0,0,0,.28)!important;
}
body.homePageActive .heroMetrics small{color:#a0adb0!important}
body.homePageActive .approvedTopBattle,
body.homePageActive .homeHero .topBattle,
body.homePageActive .topBattleV121{
  background:linear-gradient(160deg,rgba(39,48,50,.96),rgba(22,29,31,.97))!important;
  border-color:rgba(229,182,62,.50)!important;
  box-shadow:0 20px 42px rgba(0,0,0,.34),0 0 24px rgba(229,182,62,.055),inset 0 1px 0 rgba(255,255,255,.065)!important;
}
body.homePageActive .button:not(.primary),
body.homePageActive .homeBrowseButton{
  background:linear-gradient(180deg,rgba(53,66,72,.92),rgba(32,43,48,.96))!important;
  border-color:rgba(221,232,235,.25)!important;
  color:#f0f4f4!important;
  box-shadow:0 7px 16px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.055)!important;
}

/* Pulse: keep 2.5D/event hierarchy, but seat it in the new steel family. */
body.homePageActive .homeLivePulseV328{
  border-color:rgba(177,216,91,.38)!important;
  background:
    linear-gradient(180deg,rgba(43,58,54,.98) 0%,rgba(27,40,38,.99) 46%,rgba(20,31,31,.995) 100%),
    radial-gradient(circle at 14% 44%,rgba(169,229,27,.12),transparent 28%),
    radial-gradient(circle at 52% 125%,rgba(94,135,127,.16),transparent 38%)!important;
  box-shadow:0 15px 32px rgba(0,0,0,.30),0 0 28px rgba(169,229,27,.06),inset 0 1px 0 rgba(255,255,255,.075),inset 0 -1px 0 rgba(0,0,0,.34)!important;
}
body.homePageActive .homePulseLeadV328{
  background:linear-gradient(180deg,rgba(49,65,61,.96),rgba(29,43,40,.985))!important;
  box-shadow:0 7px 16px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.30)!important;
}
body.homePageActive .homePulseItemV328{
  background:
    linear-gradient(180deg,rgba(51,66,67,.96),rgba(31,45,46,.99) 58%,rgba(25,37,38,.995)),
    radial-gradient(circle at 10% 16%,var(--pulse-accent-soft),transparent 30%)!important;
  border-color:rgba(221,232,235,.20)!important;
  box-shadow:inset 2px 0 0 var(--pulse-accent),inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.30),0 7px 15px rgba(0,0,0,.22)!important;
}
body.homePageActive .homePulseItemV328.is-latest{
  background:
    linear-gradient(180deg,rgba(62,80,75,.98),rgba(37,53,51,.995) 58%,rgba(28,41,41,.998)),
    radial-gradient(circle at 12% 16%,var(--pulse-accent-soft),transparent 34%)!important;
}
body.homePageActive .homePulseEventLabelV328{color:#c4ced0!important}
body.homePageActive .homePulseEventTextV328{color:#f4f7f7!important}
body.homePageActive .homePulseVehicleV329{color:#d2dadd!important}
body.homePageActive .homePulseSepV329{color:#86969a!important}
body.homePageActive .homePulseStatusV328{color:#a6b2b5!important}

/* Quick filters: steel segmented bar with shallow 3D lift. */
body.homePageActive .homeQuickFilters{
  background:linear-gradient(180deg,rgba(35,48,54,.54),rgba(25,36,41,.58))!important;
  border-color:rgba(221,232,235,.14)!important;
}
body.homePageActive .homeQuickFilter:not(.active){
  background:linear-gradient(180deg,rgba(55,69,75,.94),rgba(34,47,52,.96))!important;
  border-color:rgba(221,232,235,.22)!important;
  color:#dce3e4!important;
  box-shadow:0 6px 13px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.055),inset 0 -1px 0 rgba(0,0,0,.22)!important;
}
body.homePageActive .homeQuickFilter:not(.active):hover{
  border-color:rgba(203,226,153,.42)!important;
  background:linear-gradient(180deg,rgba(63,79,83,.98),rgba(38,53,57,.98))!important;
}
body.homePageActive .homeQuickFilter.active{
  box-shadow:0 7px 16px rgba(82,112,23,.24),0 0 20px rgba(169,229,27,.11),inset 0 1px 0 rgba(255,255,255,.30)!important;
}

/* Main dashboard: section panels -> cards -> inner controls. */
body.homePageActive .approvedHomeDashboard>.homePanel,
body.homePageActive .homePanel{
  background:linear-gradient(180deg,rgba(39,52,58,.985),rgba(27,39,44,.995))!important;
  border-color:rgba(221,232,235,.24)!important;
  box-shadow:0 18px 36px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.065),inset 0 -1px 0 rgba(0,0,0,.24)!important;
}
body.homePageActive .panelTitle{border-bottom-color:rgba(221,232,235,.13)!important}
body.homePageActive .panelTitle strong{color:#f1f4f4!important}
body.homePageActive .homePanelHeaderAction{color:#b6df5a!important}
body.homePageActive .approvedHomeDashboard .damageMiniCard,
body.homePageActive .approvedHomeDashboard .latestReplayRow,
body.homePageActive .approvedHomeDashboard .popularMiniCard,
body.homePageActive .approvedHomeDashboard .popularRow{
  background:linear-gradient(180deg,rgba(51,66,72,.96),rgba(34,47,52,.985))!important;
  border-color:rgba(221,232,235,.16)!important;
  box-shadow:0 6px 13px rgba(0,0,0,.19),inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.18)!important;
}
body.homePageActive .approvedHomeDashboard .damageMiniCard:hover,
body.homePageActive .approvedHomeDashboard .latestReplayRow:hover,
body.homePageActive .approvedHomeDashboard .popularMiniCard:hover,
body.homePageActive .approvedHomeDashboard .popularRow:hover{
  background:linear-gradient(180deg,rgba(60,77,83,.98),rgba(38,53,58,.99))!important;
  border-color:rgba(197,225,135,.30)!important;
  box-shadow:0 9px 18px rgba(0,0,0,.23),0 0 16px rgba(169,229,27,.035),inset 0 1px 0 rgba(255,255,255,.065)!important;
}
body.homePageActive .todayLeaderboardTabs{
  background:linear-gradient(180deg,rgba(32,44,49,.92),rgba(25,36,40,.94))!important;
  border-color:rgba(221,232,235,.14)!important;
}
body.homePageActive .todayLeaderboardTab{color:#aebabc!important}
body.homePageActive .todayLeaderboardTab.active{color:#eef3ef!important}
body.homePageActive .latestReplayRow .latestStats{
  border-left-color:rgba(221,232,235,.17)!important;
  background:rgba(29,41,46,.34)!important;
}
body.homePageActive .latestReplayRow .latestBody>small,
body.homePageActive .latestReplayRow .latestStats span,
body.homePageActive .popularRow>b small,
body.homePageActive .damageIdentity small{color:#a2afb2!important}
body.homePageActive .damageOpen,
body.homePageActive .latestOpen{
  background:linear-gradient(180deg,rgba(48,63,67,.90),rgba(29,42,46,.96))!important;
  border-color:rgba(187,223,99,.32)!important;
  color:#eff4f1!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}

/* Feature tiles: clear steel cards with visible elevation. */
body.homePageActive .approvedHomeFeatures>div{
  background:linear-gradient(180deg,rgba(45,59,65,.985),rgba(30,43,48,.995))!important;
  border-color:rgba(221,232,235,.22)!important;
  box-shadow:0 13px 28px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.065),inset 0 -1px 0 rgba(0,0,0,.20)!important;
}
body.homePageActive .approvedHomeFeatures>div:hover{
  border-color:rgba(210,227,231,.30)!important;
  background:linear-gradient(180deg,rgba(51,67,73,.99),rgba(34,48,53,.998))!important;
}
body.homePageActive .approvedHomeFeatures strong{color:#f1f4f4!important}
body.homePageActive .approvedHomeFeatures p{color:#a6b2b5!important}

/* SEO/landing block: no black slab; same steel stack as the dashboard. */
body.homePageActive .homeSeoLanding{
  border-color:rgba(221,232,235,.23)!important;
  background:linear-gradient(180deg,rgba(40,54,60,.99),rgba(27,40,45,.995))!important;
  box-shadow:0 18px 38px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.065),inset 0 -1px 0 rgba(0,0,0,.20)!important;
}
body.homePageActive .homeSeoLandingGlow{
  background:radial-gradient(circle,rgba(169,229,27,.095),rgba(169,229,27,.025) 42%,transparent 72%)!important;
}
body.homePageActive .homeSeoEyebrow{color:#b3bfc1!important}
body.homePageActive .homeSeoHeading h2{color:#f2f5f5!important}
body.homePageActive .homeSeoLead p{color:#b2bdc0!important}
body.homePageActive .homeSeoCard{
  border-color:rgba(221,232,235,.17)!important;
  background:linear-gradient(180deg,rgba(51,66,72,.92),rgba(34,47,52,.96))!important;
  box-shadow:0 8px 18px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
body.homePageActive .homeSeoCard h3{color:#eef3f3!important}
body.homePageActive .homeSeoCard p{color:#a4b0b3!important}
body.homePageActive .homeSeoCardIcon{
  background:linear-gradient(180deg,rgba(54,71,69,.84),rgba(35,49,49,.90))!important;
  border-color:rgba(169,229,27,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}

/* Preserve comfortable hierarchy on smaller widths without changing layout. */
@media(max-width:900px){
  body.homePageActive{
    background:linear-gradient(180deg,#202b31 0%,#182228 46%,#111a1f 100%)!important;
  }
  body.homePageActive .approvedTopbar,
  body.homePageActive .topbar{box-shadow:0 8px 20px rgba(0,0,0,.27)!important}
}

/* ========================================================================
   v0.3.5.331 — HOME STEEL PREMIUM PARITY
   Stage A–E polish pass against the approved steel mockup.
   HOME only. No dashboard geometry or business logic changes.
   ======================================================================== */

/* A. GLOBAL SURFACE POLISH ------------------------------------------------ */
body.homePageActive{
  --home-steel-page:#243139;
  --home-steel-page-mid:#1f2b32;
  --home-steel-page-deep:#182329;
  --home-steel-header:#26343b;
  --home-steel-section:#2b3940;
  --home-steel-section-deep:#202d33;
  --home-steel-card:#33434a;
  --home-steel-card-deep:#26353b;
  --home-steel-inner:#2d3c43;
  --home-steel-line:rgba(230,239,241,.27);
  --home-steel-line-soft:rgba(230,239,241,.16);
  --home-steel-highlight:rgba(255,255,255,.095);
  --home-steel-text:#f2f6f6;
  --home-steel-muted:#bcc6c9;
  --home-steel-muted2:#9eabad;
  background:
    radial-gradient(980px 470px at 48% -110px,rgba(151,177,187,.20),transparent 72%),
    radial-gradient(620px 420px at 8% 48%,rgba(95,128,140,.12),transparent 72%),
    radial-gradient(760px 520px at 92% 72%,rgba(91,116,126,.10),transparent 75%),
    linear-gradient(180deg,#2a373e 0%,var(--home-steel-page) 34%,var(--home-steel-page-mid) 68%,var(--home-steel-page-deep) 100%)!important;
  color:var(--home-steel-text)!important;
}
body.homePageActive::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.16;
  background:
    linear-gradient(115deg,rgba(255,255,255,.018),transparent 24%,rgba(255,255,255,.012) 53%,transparent 80%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.006) 0 1px,transparent 1px 4px);
}
body.homePageActive .noise{opacity:.016!important}

body.homePageActive .approvedTopbar,
body.homePageActive .topbar{
  background:linear-gradient(180deg,rgba(45,59,66,.99),rgba(31,43,49,.995))!important;
  border-bottom:1px solid rgba(233,240,242,.22)!important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.31),
    inset 0 1px 0 rgba(255,255,255,.065),
    inset 0 -1px 0 rgba(0,0,0,.34)!important;
}
body.homePageActive .topSearch,
body.homePageActive .approvedSearch,
body.homePageActive .topActions .liveDot,
body.homePageActive .topActions .languageSelector,
body.homePageActive .topActions .accountControl{
  background:linear-gradient(180deg,rgba(41,54,60,.96),rgba(28,39,44,.98))!important;
  border-color:rgba(232,239,241,.20)!important;
  box-shadow:0 5px 13px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.05)!important;
}

/* B. HERO PARITY PASS ----------------------------------------------------- */
body.homePageActive .homeApprovedHero{
  border-color:rgba(235,241,242,.31)!important;
  background:#2b373d!important;
  box-shadow:
    0 25px 58px rgba(0,0,0,.34),
    0 2px 0 rgba(8,14,16,.50),
    inset 0 1px 0 rgba(255,255,255,.09)!important;
}
body.homePageActive .homeApprovedHero .heroBackdrop{
  filter:saturate(.90) contrast(1.03) brightness(.91)!important;
}
body.homePageActive .homeApprovedHero:before{
  background:
    linear-gradient(90deg,
      rgba(33,45,51,.88) 0%,
      rgba(33,45,51,.74) 20%,
      rgba(33,45,51,.45) 38%,
      rgba(33,45,51,.14) 56%,
      rgba(33,45,51,.03) 78%,
      rgba(33,45,51,.01) 100%),
    linear-gradient(180deg,rgba(21,30,35,.02),rgba(21,30,35,.03) 62%,rgba(21,30,35,.54) 100%)!important;
}
body.homePageActive .homeApprovedHero:after{
  background:linear-gradient(180deg,transparent 73%,rgba(26,37,42,.62) 100%)!important;
}
body.homePageActive .homeHero p{color:#dbe2e3!important}
body.homePageActive .heroMetrics>div{
  border-color:rgba(234,241,242,.30)!important;
  background:
    linear-gradient(180deg,rgba(67,82,89,.90),rgba(42,56,62,.94))!important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.105),
    inset 0 -1px 0 rgba(0,0,0,.30)!important;
}
body.homePageActive .heroMetrics>div:hover{
  border-color:rgba(202,225,154,.40)!important;
  background:linear-gradient(180deg,rgba(74,91,96,.95),rgba(46,61,66,.97))!important;
}
body.homePageActive .heroMetrics small{color:#b0bdc0!important}
body.homePageActive .button:not(.primary),
body.homePageActive .homeBrowseButton{
  background:linear-gradient(180deg,rgba(72,86,92,.97),rgba(42,56,62,.98))!important;
  border-color:rgba(234,241,242,.31)!important;
  box-shadow:0 8px 18px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.085),inset 0 -1px 0 rgba(0,0,0,.24)!important;
}
body.homePageActive .approvedTopBattle,
body.homePageActive .homeHero .topBattle,
body.homePageActive .topBattleV121{
  background:linear-gradient(160deg,rgba(44,53,55,.97),rgba(24,31,33,.985))!important;
  border-color:rgba(230,184,65,.57)!important;
  box-shadow:
    0 22px 46px rgba(0,0,0,.38),
    0 0 25px rgba(229,182,62,.07),
    inset 0 1px 0 rgba(255,255,255,.085)!important;
}

/* C. LIVE PULSE PARITY PASS ---------------------------------------------- */
body.homePageActive .homeLivePulseV328{
  border-color:rgba(214,231,179,.35)!important;
  background:
    linear-gradient(180deg,rgba(59,74,74,.98),rgba(39,53,54,.995) 50%,rgba(29,42,44,.998) 100%),
    radial-gradient(circle at 14% 42%,rgba(169,229,27,.11),transparent 30%),
    radial-gradient(circle at 50% 125%,rgba(129,160,153,.17),transparent 42%)!important;
  box-shadow:
    0 17px 36px rgba(0,0,0,.32),
    0 0 26px rgba(169,229,27,.045),
    inset 0 1px 0 rgba(255,255,255,.095),
    inset 0 -1px 0 rgba(0,0,0,.31)!important;
}
body.homePageActive .homePulseLeadV328{
  background:linear-gradient(180deg,rgba(66,83,79,.98),rgba(42,58,55,.995))!important;
  border:1px solid rgba(236,242,243,.12)!important;
  box-shadow:0 9px 19px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.085),inset 0 -1px 0 rgba(0,0,0,.29)!important;
}
body.homePageActive .homePulseTrackV328{gap:8px!important}
body.homePageActive .homePulseItemV328{
  min-height:62px!important;
  height:62px!important;
  border-color:rgba(234,241,242,.24)!important;
  background:
    linear-gradient(180deg,rgba(68,84,85,.98),rgba(43,59,60,.995) 58%,rgba(34,48,49,.998)),
    radial-gradient(circle at 12% 16%,var(--pulse-accent-soft),transparent 32%)!important;
  box-shadow:
    inset 2px 0 0 var(--pulse-accent),
    inset 0 1px 0 rgba(255,255,255,.095),
    inset 0 -1px 0 rgba(0,0,0,.27),
    0 8px 18px rgba(0,0,0,.23)!important;
}
body.homePageActive .homePulseItemV328:hover,
body.homePageActive .homePulseItemV328:focus-visible{
  border-color:rgba(218,232,187,.42)!important;
  background:
    linear-gradient(180deg,rgba(80,98,97,.99),rgba(50,68,67,.998) 58%,rgba(39,55,55,.998)),
    radial-gradient(circle at 12% 16%,var(--pulse-accent-soft),transparent 36%)!important;
  box-shadow:
    inset 2px 0 0 var(--pulse-accent),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 13px 25px rgba(0,0,0,.30),
    0 0 17px var(--pulse-accent-soft)!important;
}
body.homePageActive .homePulseItemV328.is-latest{
  border-color:color-mix(in srgb,var(--pulse-accent) 58%,rgba(238,244,245,.28))!important;
  box-shadow:
    inset 3px 0 0 var(--pulse-accent),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 10px 23px rgba(0,0,0,.27),
    0 0 18px var(--pulse-accent-soft)!important;
}
body.homePageActive .homePulseItemBodyV328{gap:3px!important}
body.homePageActive .homePulseEventLabelV328{
  color:#d5dddf!important;
  font-size:7.8px!important;
  letter-spacing:.065em!important;
}
body.homePageActive .homePulseEventTextV328{
  color:#fbfdfd!important;
  font-size:10.1px!important;
  line-height:1.06!important;
}
body.homePageActive .homePulseActorV329{color:#fff!important}
body.homePageActive .homePulseValueV329{font-weight:950!important}
body.homePageActive .homePulseVehicleV329{color:#e0e6e7!important}
body.homePageActive .homePulseTimeV331{
  display:block;
  margin-top:1px;
  color:#aebabc;
  font:800 6.9px/1 var(--approved-font);
  letter-spacing:.025em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.homePageActive .homePulseStatusV328{color:#bac4c6!important}

/* D. SECTION + ROW PARITY PASS ------------------------------------------- */
body.homePageActive .approvedHomeDashboard>.homePanel,
body.homePageActive .homePanel{
  background:linear-gradient(180deg,rgba(51,66,73,.99),rgba(37,51,57,.998))!important;
  border-color:rgba(235,241,242,.28)!important;
  box-shadow:
    0 19px 39px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.085),
    inset 0 -1px 0 rgba(0,0,0,.24)!important;
}
body.homePageActive .approvedHomeDashboard .panelTitle,
body.homePageActive .homePanel .panelTitle{
  margin:-4px -4px 5px!important;
  padding-left:7px!important;
  padding-right:7px!important;
  border-bottom:1px solid rgba(235,241,242,.15)!important;
  border-radius:5px 5px 0 0!important;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.006))!important;
}
body.homePageActive .approvedHomeDashboard .panelTitle strong{color:#f8fafa!important}
body.homePageActive .approvedHomeDashboard .damageMiniCard,
body.homePageActive .approvedHomeDashboard .latestReplayRow,
body.homePageActive .approvedHomeDashboard .popularMiniCard,
body.homePageActive .approvedHomeDashboard .popularRow{
  background:linear-gradient(180deg,rgba(61,78,85,.98),rgba(43,58,64,.995))!important;
  border-color:rgba(233,240,242,.20)!important;
  box-shadow:
    0 7px 15px rgba(0,0,0,.21),
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.19)!important;
}
body.homePageActive .approvedHomeDashboard .damageMiniCard:hover,
body.homePageActive .approvedHomeDashboard .latestReplayRow:hover,
body.homePageActive .approvedHomeDashboard .popularMiniCard:hover,
body.homePageActive .approvedHomeDashboard .popularRow:hover{
  background:linear-gradient(180deg,rgba(72,91,98,.99),rgba(49,66,72,.999))!important;
  border-color:rgba(212,229,174,.34)!important;
  box-shadow:0 11px 21px rgba(0,0,0,.27),0 0 15px rgba(169,229,27,.025),inset 0 1px 0 rgba(255,255,255,.09)!important;
}
body.homePageActive .todayLeaderboardTabs{
  background:linear-gradient(180deg,rgba(42,56,62,.95),rgba(32,44,49,.97))!important;
  border-color:rgba(232,239,241,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}
body.homePageActive .latestReplayRow .latestStats{
  background:linear-gradient(180deg,rgba(46,61,67,.54),rgba(36,49,54,.60))!important;
  border-left-color:rgba(235,241,242,.20)!important;
}
body.homePageActive .latestReplayRow .latestBody>small,
body.homePageActive .latestReplayRow .latestStats span,
body.homePageActive .popularRow>b small,
body.homePageActive .damageIdentity small{color:#bdc7c9!important}
body.homePageActive .damageOpen,
body.homePageActive .latestOpen{
  background:linear-gradient(180deg,rgba(64,80,83,.96),rgba(42,57,61,.99))!important;
  border-color:rgba(193,224,112,.36)!important;
  box-shadow:0 5px 11px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.06)!important;
}

/* E. FEATURE / SEO CARD PARITY PASS -------------------------------------- */
body.homePageActive .approvedHomeFeatures>div{
  background:linear-gradient(180deg,rgba(58,74,81,.99),rgba(41,56,62,.998))!important;
  border-color:rgba(235,241,242,.27)!important;
  box-shadow:
    0 15px 31px rgba(0,0,0,.27),
    inset 0 1px 0 rgba(255,255,255,.085),
    inset 0 -1px 0 rgba(0,0,0,.20)!important;
}
body.homePageActive .approvedHomeFeatures>div:hover{
  background:linear-gradient(180deg,rgba(68,86,93,.998),rgba(47,64,70,.999))!important;
  border-color:rgba(239,244,245,.34)!important;
  box-shadow:0 18px 34px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.10)!important;
}
body.homePageActive .approvedHomeFeatures p{color:#bdc6c9!important}
body.homePageActive .homeSeoLanding{
  border-color:rgba(235,241,242,.28)!important;
  background:linear-gradient(180deg,rgba(52,68,75,.995),rgba(38,52,58,.999))!important;
  box-shadow:0 20px 42px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.085),inset 0 -1px 0 rgba(0,0,0,.21)!important;
}
body.homePageActive .homeSeoLead p{color:#c7d0d2!important}
body.homePageActive .homeSeoCard{
  background:linear-gradient(180deg,rgba(62,79,86,.97),rgba(43,58,64,.99))!important;
  border-color:rgba(235,241,242,.21)!important;
  box-shadow:0 9px 20px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.07)!important;
}
body.homePageActive .homeSeoCard p{color:#bfc9cb!important}

@media(max-width:1180px){
  body.homePageActive .homePulseItemV328{height:58px!important;min-height:58px!important}
  body.homePageActive .homePulseTimeV331{font-size:6.6px!important}
}
@media(max-width:760px){
  body.homePageActive{background:linear-gradient(180deg,#29363d 0%,#202c33 48%,#182329 100%)!important}
  body.homePageActive .homePulseItemV328{height:54px!important;min-height:54px!important}
  body.homePageActive .homePulseTimeV331{display:none!important}
}

/* ========================================================================
   v0.3.5.332 — REPLAYS STEEL PREMIUM PARITY
   Stage 2 of the site-wide steel migration. Replays page only.
   Keep all approved geometry, card density, filters and replay logic intact.
   ======================================================================== */
body.replaysPageActive{
  background:
    radial-gradient(circle at 18% 7%,rgba(111,139,151,.18),transparent 32%),
    radial-gradient(circle at 82% 24%,rgba(84,110,120,.11),transparent 30%),
    linear-gradient(180deg,#2a373e 0%,#222f36 42%,#1a262c 100%)!important;
  color:#edf2f2!important;
}
body.replaysPageActive::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.17;
  background:
    linear-gradient(116deg,rgba(255,255,255,.018),transparent 24%,rgba(255,255,255,.010) 58%,transparent 82%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.006) 0 1px,transparent 1px 4px);
}
body.replaysPageActive .noise{opacity:.015!important}
body.replaysPageActive .replaysDiscoveryPage::before{
  background:transparent!important;
}
body.replaysPageActive .replaysDiscoveryPage::after{display:none!important}

/* Header parity with the approved HOME steel shell. */
body.replaysPageActive .approvedTopbar,
body.replaysPageActive .topbar{
  background:linear-gradient(180deg,rgba(46,61,68,.99),rgba(31,44,50,.995))!important;
  border-bottom:1px solid rgba(235,241,243,.21)!important;
  box-shadow:0 13px 31px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.34)!important;
}
body.replaysPageActive .approvedSearchBox,
body.replaysPageActive .topSearch,
body.replaysPageActive .approvedLivePill,
body.replaysPageActive .liveDot,
body.replaysPageActive .languageSelector,
body.replaysPageActive .accountControl{
  background:linear-gradient(180deg,rgba(42,56,62,.96),rgba(28,40,45,.99))!important;
  border-color:rgba(234,240,242,.19)!important;
  box-shadow:0 5px 13px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.05)!important;
}

/* Cinematic hero: keep artwork but mount it in a brighter steel frame. */
body.replaysPageActive .approvedReplaysMockup .replaysHeroBanner{
  border-color:rgba(237,242,244,.31)!important;
  background:#2d3a40!important;
  box-shadow:0 25px 58px rgba(0,0,0,.34),0 2px 0 rgba(8,14,16,.48),inset 0 1px 0 rgba(255,255,255,.09)!important;
}
body.replaysPageActive .approvedReplaysMockup .replaysHeroBanner::before{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)!important;
}
body.replaysPageActive .approvedReplaysMockup .replaysHeroBackdrop{
  filter:saturate(.90) contrast(1.03) brightness(.91)!important;
  opacity:1!important;
}
body.replaysPageActive .approvedReplaysMockup .replaysHeroShade{
  background:
    linear-gradient(90deg,rgba(35,47,53,.91) 0%,rgba(35,47,53,.74) 26%,rgba(35,47,53,.34) 48%,rgba(35,47,53,.08) 70%,rgba(35,47,53,.01) 100%),
    linear-gradient(180deg,rgba(14,22,26,.02),rgba(14,22,26,.04) 63%,rgba(23,33,38,.45) 100%)!important;
}
body.replaysPageActive .approvedReplaysMockup .replaysHeroFx{
  background:radial-gradient(circle at 52% 15%,rgba(214,226,229,.08),transparent 34%)!important;
  opacity:1!important;
}
body.replaysPageActive .approvedReplaysMockup .pageTitle{color:#f7f9f9!important;text-shadow:0 2px 9px rgba(0,0,0,.30)!important}
body.replaysPageActive .approvedReplaysMockup .eyebrow{color:#c6d65d!important}
body.replaysPageActive .approvedReplaysMockup .replaysPageSub{color:#d0d9db!important}
body.replaysPageActive .approvedReplaysMockup .replaysHeroStatus{color:#d7dfe1!important}
body.replaysPageActive .approvedReplaysMockup .replaysHeroStatus strong{color:#f6f8f8!important}
body.replaysPageActive .approvedReplaysMockup .replaysHeroStatusIcon{color:#c2d07c!important}

/* Search/filter rail = raised steel control deck. */
body.replaysPageActive .approvedReplaysMockup .approvedReplaysControlBar{
  border-color:rgba(235,241,243,.28)!important;
  background:linear-gradient(180deg,rgba(62,78,85,.985),rgba(40,55,61,.997))!important;
  box-shadow:0 16px 34px rgba(0,0,0,.29),inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.25)!important;
}
body.replaysPageActive .approvedReplaysMockup .approvedReplaysControlBar .replaySearchField,
body.replaysPageActive .approvedReplaysMockup .approvedReplaysControlBar select,
body.replaysPageActive .approvedReplaysMockup .rhCustomSelectButton{
  background:linear-gradient(180deg,rgba(48,64,70,.99),rgba(31,44,49,.998))!important;
  border-color:rgba(235,241,243,.22)!important;
  color:#e8edee!important;
  box-shadow:0 6px 13px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.22)!important;
}
body.replaysPageActive .approvedReplaysMockup .approvedReplaysControlBar input{color:#f0f3f3!important}
body.replaysPageActive .approvedReplaysMockup .approvedReplaysControlBar input::placeholder{color:#aab6b9!important}
body.replaysPageActive .approvedReplaysMockup .approvedReplaysControlBar .replaySearchIcon{color:#c0cbcd!important}
body.replaysPageActive .approvedReplaysMockup .approvedReplaysControlBar .replaySearchField:hover,
body.replaysPageActive .approvedReplaysMockup .approvedReplaysControlBar select:hover,
body.replaysPageActive .approvedReplaysMockup .rhCustomSelectButton:hover{
  background:linear-gradient(180deg,rgba(57,75,81,.99),rgba(36,50,56,.999))!important;
  border-color:rgba(220,235,191,.34)!important;
}
body.replaysPageActive .approvedReplaysMockup .approvedReplaysControlBar .replaySearchField:focus-within,
body.replaysPageActive .approvedReplaysMockup .approvedReplaysControlBar select:focus,
body.replaysPageActive .approvedReplaysMockup .rhCustomSelectButton:focus-visible{
  border-color:rgba(169,229,27,.46)!important;
  box-shadow:0 0 0 1px rgba(169,229,27,.10),0 7px 15px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.07)!important;
}

/* Active filters and catalog status. */
body.replaysPageActive .approvedReplaysMockup .activeFilterBar{
  border-color:rgba(235,241,243,.20)!important;
  background:linear-gradient(180deg,rgba(50,66,72,.97),rgba(35,49,54,.99))!important;
  box-shadow:0 9px 20px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
body.replaysPageActive .approvedReplaysMockup .activeFilterChip{
  background:linear-gradient(180deg,rgba(69,86,91,.98),rgba(46,62,67,.99))!important;
  border-color:rgba(235,241,243,.22)!important;
  color:#e7eced!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055)!important;
}
body.replaysPageActive .approvedReplaysMockup .clearAllFilters{color:#c6d46a!important}
body.replaysPageActive .approvedReplaysMockup .discoveryCatalogMeta{color:#c0cbcd!important}
body.replaysPageActive .approvedReplaysMockup .catalogCount,
body.replaysPageActive .approvedReplaysMockup .catalogPageInfo{
  background:linear-gradient(180deg,rgba(52,68,74,.90),rgba(38,52,57,.92))!important;
  border-color:rgba(235,241,243,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}
body.replaysPageActive .approvedReplaysMockup .catalogCount b,
body.replaysPageActive .approvedReplaysMockup .catalogPageInfo b{color:#f4f7f7!important}

/* Replay cards: steel exterior + darker readable inner deck. */
body.replaysPageActive .approvedReplaysMockup .replayCard.approvedMockupCard{
  border-color:rgba(235,241,243,.27)!important;
  background:linear-gradient(180deg,rgba(55,70,77,.995),rgba(39,53,59,.999))!important;
  box-shadow:0 18px 38px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.085),inset 0 -1px 0 rgba(0,0,0,.22)!important;
}
body.replaysPageActive .approvedReplaysMockup .replayCard.approvedMockupCard:hover{
  border-color:rgba(212,230,174,.41)!important;
  background:linear-gradient(180deg,rgba(66,83,90,.999),rgba(45,61,67,.999))!important;
  box-shadow:0 23px 46px rgba(0,0,0,.34),0 0 18px rgba(169,229,27,.035),inset 0 1px 0 rgba(255,255,255,.10)!important;
}
body.replaysPageActive .approvedReplaysMockup .replayCard .art{
  background-color:#29363c!important;
  filter:saturate(.95) contrast(1.02) brightness(.98)!important;
}
body.replaysPageActive .approvedReplaysMockup .replayCard:hover .art{filter:saturate(1.00) contrast(1.03) brightness(1.01)!important}
body.replaysPageActive .approvedReplaysMockup .cardImageOverlay{
  background:linear-gradient(180deg,rgba(54,68,74,.92),rgba(35,47,52,.95))!important;
  border-color:rgba(236,242,243,.25)!important;
  box-shadow:0 7px 17px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.07)!important;
  backdrop-filter:blur(4px)!important;
}
body.replaysPageActive .approvedReplaysMockup .cardImageOverlay strong{color:#f8faf9!important}
body.replaysPageActive .approvedReplaysMockup .cardImageOverlay strong span{color:#d5dddf!important}
body.replaysPageActive .approvedReplaysMockup .cardRegionTag{
  background:linear-gradient(180deg,rgba(54,68,74,.94),rgba(34,46,51,.97))!important;
  border-color:rgba(236,242,243,.23)!important;
  color:#edf2f2!important;
  box-shadow:0 6px 15px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)!important;
  backdrop-filter:blur(4px)!important;
}
body.replaysPageActive .approvedReplaysMockup .cardBody{
  background:linear-gradient(180deg,rgba(49,64,70,.99),rgba(36,50,55,.998))!important;
}
body.replaysPageActive .approvedReplaysMockup .statsRow.cardHudStats{
  background:linear-gradient(180deg,rgba(57,73,79,.98),rgba(40,54,60,.995))!important;
  border-color:rgba(235,241,243,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),inset 0 -1px 0 rgba(0,0,0,.19)!important;
}
body.replaysPageActive .approvedReplaysMockup .statsRow.cardHudStats .cardHudStat+ .cardHudStat::before{background:rgba(235,241,243,.14)!important}
body.replaysPageActive .approvedReplaysMockup .statsRow.cardHudStats .cardHudValue strong{color:#f8fafa!important}
body.replaysPageActive .approvedReplaysMockup .statsRow.cardHudStats .cardHudValue small{color:#b9c4c6!important}
body.replaysPageActive .approvedReplaysMockup .cardAwards{
  background:linear-gradient(180deg,rgba(46,60,66,.90),rgba(34,47,52,.94))!important;
  border-top-color:rgba(235,241,243,.12)!important;
  border-bottom-color:rgba(235,241,243,.12)!important;
}
body.replaysPageActive .approvedReplaysMockup .cardFoot{
  background:linear-gradient(180deg,rgba(45,59,65,.98),rgba(32,45,50,.998))!important;
  border-top-color:rgba(235,241,243,.14)!important;
  color:#bdc7c9!important;
}
body.replaysPageActive .approvedReplaysMockup .cardFoot .cardPlayerName{color:#dbe2e3!important}
body.replaysPageActive .approvedReplaysMockup .cardFoot .cardUploadDate{color:#aeb9bc!important}
body.replaysPageActive .approvedReplaysMockup .cardFoot b{color:#cfe477!important}
body.replaysPageActive .approvedReplaysMockup .replayCard:hover .cardFoot b{color:#dff48a!important}
body.replaysPageActive .approvedReplaysMockup .cardFoot .rhLikeControl{color:#c0cbcd!important}

/* Pagination sits on the same steel system, not a black island. */
body.replaysPageActive .approvedReplaysMockup .catalogPager{
  border-color:rgba(235,241,243,.23)!important;
  background:linear-gradient(180deg,rgba(52,68,74,.98),rgba(37,51,57,.997))!important;
  box-shadow:0 13px 28px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.07)!important;
  color:#c8d1d3!important;
}
body.replaysPageActive .approvedReplaysMockup .pageBtn{
  background:linear-gradient(180deg,rgba(66,82,88,.98),rgba(43,58,63,.995))!important;
  border-color:rgba(235,241,243,.21)!important;
  color:#e2e8e9!important;
  box-shadow:0 5px 11px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
body.replaysPageActive .approvedReplaysMockup .pageBtn:hover:not(:disabled){border-color:rgba(202,225,154,.38)!important;background:linear-gradient(180deg,rgba(75,94,99,.99),rgba(49,66,71,.999))!important}
body.replaysPageActive .approvedReplaysMockup .pageBtn.active{
  color:#17210d!important;
  background:linear-gradient(180deg,#b4e83f,#8fc51d)!important;
  border-color:#b9ed46!important;
  box-shadow:0 7px 15px rgba(111,157,24,.22),inset 0 1px 0 rgba(255,255,255,.26)!important;
}

/* Portal dropdowns must match even though they are rendered outside pageShell. */
body.replaysPageActive #rhReplaySelectPortal .rhCustomSelectMenu{
  background:linear-gradient(180deg,rgba(55,71,77,.997),rgba(34,48,53,.999))!important;
  border-color:rgba(235,241,243,.27)!important;
  box-shadow:0 20px 45px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body.replaysPageActive #rhReplaySelectPortal .rhCustomSelectOption{
  color:#dfe6e7!important;
  border-color:rgba(235,241,243,.08)!important;
}
body.replaysPageActive #rhReplaySelectPortal .rhCustomSelectOption:hover{
  background:linear-gradient(180deg,rgba(72,90,96,.97),rgba(51,68,73,.99))!important;
}
body.replaysPageActive #rhReplaySelectPortal .rhCustomSelectOption.selected{
  background:linear-gradient(180deg,rgba(72,91,76,.98),rgba(48,67,55,.99))!important;
  color:#f4f8ee!important;
}
body.replaysPageActive #rhReplaySelectPortal .rhCustomSelectOptionMeta{color:#aeb9bc!important}
body.replaysPageActive #rhReplaySelectPortal .rhCustomSelectSearch{
  background:linear-gradient(180deg,rgba(45,60,65,.99),rgba(33,46,51,.99))!important;
  border-bottom-color:rgba(235,241,243,.14)!important;
}
body.replaysPageActive #rhReplaySelectPortal .rhCustomSelectSearch input{
  background:linear-gradient(180deg,rgba(61,77,83,.95),rgba(42,57,62,.98))!important;
  border-color:rgba(235,241,243,.19)!important;
  color:#eef2f2!important;
}
body.replaysPageActive #rhReplaySelectPortal .rhCustomSelectHint{color:#aeb9bc!important}

@media(max-width:760px){
  body.replaysPageActive{
    background:linear-gradient(180deg,#29363d 0%,#202c33 48%,#182329 100%)!important;
  }
  body.replaysPageActive .approvedReplaysMockup .replaysHeroShade{
    background:linear-gradient(180deg,rgba(31,43,49,.62),rgba(31,43,49,.36) 50%,rgba(22,32,37,.68) 100%)!important;
  }
}

/* ========================================================================
   v0.3.5.332 FIX1 — REPLAYS STEEL VISIBILITY HARD FIX
   Direct, route-independent steel overrides. The previous pass was too
   subtle against legacy dark replay-page surfaces. This pass intentionally
   makes the steel hierarchy unmistakable and matches HOME premium parity.
   ======================================================================== */

/* The actual replay page canvas must be steel, not legacy near-black. */
html:has(.replaysDiscoveryPage.approvedReplaysMockup),
body:has(.replaysDiscoveryPage.approvedReplaysMockup),
body.replaysPageActive{
  background:
    radial-gradient(circle at 18% 4%,rgba(167,190,199,.16),transparent 30%),
    radial-gradient(circle at 88% 22%,rgba(105,137,148,.14),transparent 34%),
    linear-gradient(180deg,#34434a 0%,#2b3940 35%,#243239 68%,#1f2c32 100%)!important;
  color:#eef3f3!important;
}
.replaysDiscoveryPage.approvedReplaysMockup{
  position:relative!important;
  isolation:isolate!important;
  background:transparent!important;
}
.replaysDiscoveryPage.approvedReplaysMockup::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:-36px!important;
  right:-36px!important;
  top:-18px!important;
  bottom:-72px!important;
  z-index:-1!important;
  border-radius:14px!important;
  background:
    radial-gradient(ellipse at 50% 2%,rgba(197,214,220,.08),transparent 38%),
    linear-gradient(180deg,rgba(46,61,68,.74) 0%,rgba(39,53,59,.80) 43%,rgba(31,44,50,.88) 100%)!important;
  box-shadow:0 28px 90px rgba(4,10,13,.24),inset 0 1px 0 rgba(255,255,255,.045)!important;
}

/* Header: visibly steel like the HOME render, not black. */
body:has(.replaysDiscoveryPage.approvedReplaysMockup) .approvedTopbar,
body:has(.replaysDiscoveryPage.approvedReplaysMockup) .topbar,
body.replaysPageActive .approvedTopbar,
body.replaysPageActive .topbar{
  background:linear-gradient(180deg,#334249 0%,#29383f 100%)!important;
  border-bottom:1px solid rgba(225,235,238,.26)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.32)!important;
}
body:has(.replaysDiscoveryPage.approvedReplaysMockup) .approvedSearchBox,
body:has(.replaysDiscoveryPage.approvedReplaysMockup) .approvedLivePill,
body:has(.replaysDiscoveryPage.approvedReplaysMockup) .languageSelector,
body:has(.replaysDiscoveryPage.approvedReplaysMockup) .accountControl{
  background:linear-gradient(180deg,#2f3e45,#233138)!important;
  border-color:rgba(229,237,240,.22)!important;
  box-shadow:0 5px 13px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.06)!important;
}

/* Hero mounted into an obvious steel frame. */
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroBanner{
  border:1px solid rgba(234,241,243,.37)!important;
  background:#35444b!important;
  box-shadow:0 24px 52px rgba(0,0,0,.31),0 2px 0 rgba(7,13,16,.42),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroShade{
  background:
    linear-gradient(90deg,rgba(42,55,61,.88) 0%,rgba(40,53,59,.70) 28%,rgba(38,51,56,.29) 55%,rgba(31,43,48,.08) 76%,rgba(31,43,48,.02) 100%),
    linear-gradient(180deg,rgba(12,20,24,.02),rgba(17,26,30,.05) 60%,rgba(31,43,48,.46) 100%)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroBackdrop{
  filter:saturate(.93) contrast(1.02) brightness(.97)!important;
}

/* Filter deck must read as a steel control console. */
.replaysDiscoveryPage.approvedReplaysMockup .approvedReplaysControlBar{
  border:1px solid rgba(234,241,243,.34)!important;
  background:linear-gradient(180deg,#46575e 0%,#34454c 100%)!important;
  box-shadow:0 16px 32px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.25)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField,
.replaysDiscoveryPage.approvedReplaysMockup .approvedReplaysControlBar select,
.replaysDiscoveryPage.approvedReplaysMockup .rhCustomSelectButton{
  background:linear-gradient(180deg,#394a51,#2b3a41)!important;
  border-color:rgba(234,241,243,.26)!important;
  color:#f0f4f4!important;
  box-shadow:0 5px 12px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.07)!important;
}

/* Replay cards: visible steel outer shell + darker but NOT black content deck. */
.replaysDiscoveryPage.approvedReplaysMockup .replayCard.approvedMockupCard{
  border:1px solid rgba(232,240,242,.31)!important;
  background:linear-gradient(180deg,#405057 0%,#324248 100%)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.27),0 2px 0 rgba(9,16,19,.38),inset 0 1px 0 rgba(255,255,255,.10)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replayCard.approvedMockupCard:hover{
  border-color:rgba(213,232,174,.50)!important;
  background:linear-gradient(180deg,#4b5c63 0%,#394b51 100%)!important;
  box-shadow:0 23px 44px rgba(0,0,0,.32),0 0 19px rgba(169,229,27,.045),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .cardBody{
  background:linear-gradient(180deg,#334249 0%,#2a383e 100%)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .cardResultBlock{
  background:linear-gradient(180deg,#394950 0%,#2d3c42 100%)!important;
  border-color:rgba(231,239,241,.18)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .statsRow,
.replaysDiscoveryPage.approvedReplaysMockup .statsRow.cardHudStats{
  background:linear-gradient(180deg,#34444a 0%,#29383e 100%)!important;
  border-top-color:rgba(235,241,243,.17)!important;
  border-bottom-color:rgba(235,241,243,.17)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),inset 0 -1px 0 rgba(0,0,0,.18)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .cardAwards{
  background:linear-gradient(180deg,#303f45 0%,#28363c 100%)!important;
  border-top-color:rgba(235,241,243,.14)!important;
  border-bottom-color:rgba(235,241,243,.14)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .cardFoot{
  background:linear-gradient(180deg,#2e3d43 0%,#26343a 100%)!important;
  border-top-color:rgba(235,241,243,.16)!important;
  color:#c8d1d3!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .cardImageOverlay,
.replaysDiscoveryPage.approvedReplaysMockup .cardRegionTag{
  background:linear-gradient(180deg,rgba(58,73,80,.94),rgba(38,51,57,.97))!important;
  border-color:rgba(235,241,243,.28)!important;
  box-shadow:0 7px 16px rgba(0,0,0,.21),inset 0 1px 0 rgba(255,255,255,.07)!important;
}

/* Catalog metadata / pager must not remain dark islands. */
.replaysDiscoveryPage.approvedReplaysMockup .activeFilterBar,
.replaysDiscoveryPage.approvedReplaysMockup .catalogPager{
  background:linear-gradient(180deg,#3d4e55 0%,#2f4047 100%)!important;
  border-color:rgba(233,240,242,.27)!important;
  box-shadow:0 11px 24px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .pageBtn,
.replaysDiscoveryPage.approvedReplaysMockup .activeFilterChip{
  background:linear-gradient(180deg,#46575e,#35464d)!important;
  border-color:rgba(233,240,242,.24)!important;
  color:#edf2f2!important;
}

/* Portal dropdowns live outside pageShell, so bind them by route too. */
body.replaysPageActive #rhReplaySelectPortal .rhCustomSelectMenu,
body:has(.replaysDiscoveryPage.approvedReplaysMockup) #rhReplaySelectPortal .rhCustomSelectMenu{
  background:linear-gradient(180deg,#405159,#2e3f46)!important;
  border-color:rgba(234,241,243,.31)!important;
  box-shadow:0 20px 42px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.09)!important;
}
body.replaysPageActive #rhReplaySelectPortal .rhCustomSelectOption:hover,
body:has(.replaysDiscoveryPage.approvedReplaysMockup) #rhReplaySelectPortal .rhCustomSelectOption:hover{
  background:linear-gradient(180deg,#52636a,#3e5057)!important;
}

@media(max-width:760px){
  html:has(.replaysDiscoveryPage.approvedReplaysMockup),
  body:has(.replaysDiscoveryPage.approvedReplaysMockup),
  body.replaysPageActive{
    background:linear-gradient(180deg,#34434a 0%,#29383f 50%,#213037 100%)!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup::before{left:-12px!important;right:-12px!important}
}

/* ========================================================================
   v0.3.5.333 — HOME MOCKUP BACKGROUND + SHADOW PARITY
   Use the approved user-supplied steel texture and reproduce the mockup's
   raised-card depth: dark steel surfaces, crisp top rims, and visible
   downward cast shadows. HOME only; layout/business logic unchanged.
   ======================================================================== */

body.homePageActive{
  --mock-page:#111a20;
  --mock-panel-top:#202c32;
  --mock-panel-bottom:#151f24;
  --mock-row-top:#1b272c;
  --mock-row-bottom:#10191d;
  --mock-line:rgba(210,221,225,.25);
  --mock-line-soft:rgba(210,221,225,.13);
  --mock-top-rim:rgba(255,255,255,.085);
  --mock-shadow:rgba(0,0,0,.52);
  --mock-shadow-soft:rgba(0,0,0,.34);
  background-color:var(--mock-page)!important;
  background-image:
    radial-gradient(980px 520px at 50% 0%,rgba(124,148,158,.07),transparent 72%),
    linear-gradient(180deg,rgba(6,12,16,.08),rgba(7,12,16,.24)),
    url('/assets/home-steel-texture.png')!important;
  background-repeat:no-repeat,no-repeat,no-repeat!important;
  background-position:center top,center top,center top!important;
  background-size:cover,cover,cover!important;
  background-attachment:fixed,fixed,fixed!important;
  color:#eef3f4!important;
}
body.homePageActive::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:1!important;
  background:
    radial-gradient(760px 420px at 49% 10%,rgba(178,195,201,.045),transparent 72%),
    linear-gradient(90deg,rgba(0,0,0,.16),transparent 16%,transparent 84%,rgba(0,0,0,.18));
}
body.homePageActive .noise{opacity:.006!important}

/* Header: darker than the page, raised with an unmistakable bottom shadow. */
body.homePageActive .approvedTopbar,
body.homePageActive .topbar{
  background:linear-gradient(180deg,rgba(28,39,45,.985),rgba(15,24,29,.992))!important;
  border-bottom:1px solid rgba(220,230,233,.18)!important;
  box-shadow:
    0 14px 26px -11px rgba(0,0,0,.86),
    0 4px 9px -5px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.58)!important;
}
body.homePageActive .topSearch,
body.homePageActive .approvedSearch,
body.homePageActive .topActions .liveDot,
body.homePageActive .topActions .languageSelector,
body.homePageActive .topActions .accountControl{
  background:linear-gradient(180deg,rgba(27,38,43,.96),rgba(14,23,27,.985))!important;
  border-color:rgba(215,226,229,.16)!important;
  box-shadow:
    0 7px 12px -7px rgba(0,0,0,.78),
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -1px 0 rgba(0,0,0,.48)!important;
}

/* Hero: clear lifted plate with a visible cast shadow beneath it. */
body.homePageActive .homeApprovedHero{
  background:#1a252a!important;
  border-color:rgba(225,233,235,.28)!important;
  box-shadow:
    0 24px 31px -17px rgba(0,0,0,.88),
    0 10px 18px -12px rgba(0,0,0,.72),
    0 2px 3px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.50)!important;
}
body.homePageActive .homeApprovedHero .heroBackdrop{
  filter:saturate(.93) contrast(1.035) brightness(.94)!important;
}
body.homePageActive .heroMetrics>div{
  background:linear-gradient(180deg,rgba(39,52,58,.95),rgba(18,29,34,.98))!important;
  border-color:rgba(219,229,232,.24)!important;
  box-shadow:
    0 11px 15px -10px rgba(0,0,0,.82),
    0 3px 7px -5px rgba(0,0,0,.68),
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.46)!important;
}
body.homePageActive .button:not(.primary),
body.homePageActive .homeBrowseButton{
  background:linear-gradient(180deg,rgba(43,57,63,.96),rgba(23,34,39,.99))!important;
  border-color:rgba(225,233,235,.24)!important;
  box-shadow:
    0 9px 13px -8px rgba(0,0,0,.78),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.44)!important;
}
body.homePageActive .approvedTopBattle,
body.homePageActive .homeHero .topBattle,
body.homePageActive .topBattleV121{
  background:linear-gradient(160deg,rgba(31,35,34,.985),rgba(13,20,22,.995))!important;
  box-shadow:
    0 20px 29px -14px rgba(0,0,0,.88),
    0 6px 13px -9px rgba(0,0,0,.75),
    0 0 20px rgba(224,178,57,.055),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.48)!important;
}

/* Pulse: raised console bar, with each event as a smaller raised inset plate. */
body.homePageActive .homeLivePulseV328{
  background:linear-gradient(180deg,rgba(31,45,47,.985),rgba(16,27,30,.995))!important;
  border-color:rgba(197,215,185,.29)!important;
  box-shadow:
    0 19px 25px -15px rgba(0,0,0,.86),
    0 7px 13px -9px rgba(0,0,0,.68),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.50)!important;
}
body.homePageActive .homePulseLeadV328{
  background:linear-gradient(180deg,rgba(39,54,54,.98),rgba(20,34,34,.995))!important;
  border-color:rgba(219,230,226,.14)!important;
  box-shadow:
    0 10px 14px -10px rgba(0,0,0,.78),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.46)!important;
}
body.homePageActive .homePulseItemV328{
  background:linear-gradient(180deg,rgba(37,51,52,.99),rgba(19,31,32,.998))!important;
  border-color:rgba(220,230,228,.17)!important;
  box-shadow:
    inset 2px 0 0 var(--pulse-accent),
    0 10px 13px -10px rgba(0,0,0,.82),
    0 3px 6px -4px rgba(0,0,0,.60),
    inset 0 1px 0 rgba(255,255,255,.065),
    inset 0 -1px 0 rgba(0,0,0,.42)!important;
}
body.homePageActive .homePulseItemV328:hover,
body.homePageActive .homePulseItemV328:focus-visible{
  background:linear-gradient(180deg,rgba(46,63,63,.995),rgba(25,39,40,.999))!important;
  box-shadow:
    inset 2px 0 0 var(--pulse-accent),
    0 16px 18px -11px rgba(0,0,0,.86),
    0 5px 9px -6px rgba(0,0,0,.68),
    0 0 14px var(--pulse-accent-soft),
    inset 0 1px 0 rgba(255,255,255,.085)!important;
}

/* Filters: mockup-style floating control deck. */
body.homePageActive .homeQuickFilters,
body.homePageActive .approvedHomeFilters,
body.homePageActive .homeFilterBar{
  filter:drop-shadow(0 9px 8px rgba(0,0,0,.35));
}

/* Three dashboard columns: strong separation from the textured backdrop. */
body.homePageActive .approvedHomeDashboard>.homePanel,
body.homePageActive .homePanel{
  background:linear-gradient(180deg,var(--mock-panel-top),var(--mock-panel-bottom))!important;
  border-color:rgba(220,230,233,.22)!important;
  box-shadow:
    0 20px 25px -15px rgba(0,0,0,.88),
    0 8px 14px -10px rgba(0,0,0,.73),
    0 2px 3px rgba(0,0,0,.30),
    inset 0 1px 0 var(--mock-top-rim),
    inset 0 -1px 0 rgba(0,0,0,.48)!important;
}
body.homePageActive .approvedHomeDashboard .panelTitle,
body.homePageActive .homePanel .panelTitle{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.055))!important;
  border-bottom-color:rgba(216,227,230,.13)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body.homePageActive .approvedHomeDashboard .damageMiniCard,
body.homePageActive .approvedHomeDashboard .latestReplayRow,
body.homePageActive .approvedHomeDashboard .popularMiniCard,
body.homePageActive .approvedHomeDashboard .popularRow{
  background:linear-gradient(180deg,var(--mock-row-top),var(--mock-row-bottom))!important;
  border-color:rgba(210,222,225,.15)!important;
  box-shadow:
    0 10px 14px -11px rgba(0,0,0,.86),
    0 3px 6px -5px rgba(0,0,0,.64),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.42)!important;
}
body.homePageActive .approvedHomeDashboard .damageMiniCard:hover,
body.homePageActive .approvedHomeDashboard .latestReplayRow:hover,
body.homePageActive .approvedHomeDashboard .popularMiniCard:hover,
body.homePageActive .approvedHomeDashboard .popularRow:hover{
  background:linear-gradient(180deg,#26343a,#172329)!important;
  box-shadow:
    0 14px 18px -11px rgba(0,0,0,.88),
    0 5px 9px -7px rgba(0,0,0,.68),
    0 0 12px rgba(169,229,27,.022),
    inset 0 1px 0 rgba(255,255,255,.07)!important;
}
body.homePageActive .todayLeaderboardTabs{
  background:linear-gradient(180deg,rgba(29,40,45,.98),rgba(14,23,27,.99))!important;
  border-color:rgba(215,226,229,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 6px 9px -7px rgba(0,0,0,.74)!important;
}
body.homePageActive .latestReplayRow .latestStats{
  background:linear-gradient(180deg,rgba(18,29,34,.68),rgba(10,19,23,.78))!important;
  border-left-color:rgba(215,226,229,.13)!important;
}
body.homePageActive .damageOpen,
body.homePageActive .latestOpen{
  background:linear-gradient(180deg,rgba(35,48,52,.97),rgba(17,28,32,.995))!important;
  box-shadow:0 8px 11px -8px rgba(0,0,0,.76),inset 0 1px 0 rgba(255,255,255,.045)!important;
}

/* Feature cards: each card visibly floats over the texture. */
body.homePageActive .approvedHomeFeatures>div{
  background:linear-gradient(180deg,#202d33,#151f24)!important;
  border-color:rgba(219,229,232,.21)!important;
  box-shadow:
    0 18px 22px -14px rgba(0,0,0,.86),
    0 7px 12px -9px rgba(0,0,0,.68),
    inset 0 1px 0 rgba(255,255,255,.065),
    inset 0 -1px 0 rgba(0,0,0,.46)!important;
}
body.homePageActive .approvedHomeFeatures>div:hover{
  background:linear-gradient(180deg,#29383f,#19252a)!important;
  box-shadow:
    0 21px 26px -14px rgba(0,0,0,.88),
    0 8px 13px -9px rgba(0,0,0,.70),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
}

/* SEO/landing card: a large raised slab like the mockup. */
body.homePageActive .homeSeoLanding{
  background:linear-gradient(180deg,#202d33,#151f24)!important;
  border-color:rgba(219,229,232,.21)!important;
  box-shadow:
    0 23px 30px -17px rgba(0,0,0,.88),
    0 9px 15px -10px rgba(0,0,0,.70),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.48)!important;
}
body.homePageActive .homeSeoCard{
  background:linear-gradient(180deg,#1d2a30,#121c21)!important;
  border-color:rgba(216,227,230,.16)!important;
  box-shadow:
    0 12px 16px -11px rgba(0,0,0,.82),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.42)!important;
}

/* Keep the supplied texture visible on smaller screens as well. */
@media(max-width:760px){
  body.homePageActive{
    background-color:var(--mock-page)!important;
    background-image:
      linear-gradient(180deg,rgba(6,12,16,.10),rgba(7,12,16,.27)),
      url('/assets/home-steel-texture.png')!important;
    background-size:cover,cover!important;
    background-position:center top,center top!important;
    background-attachment:scroll,scroll!important;
  }
}

/* ========================================================================
   v0.3.5.333 FIX1 — HOME MOCKUP DEPTH PARITY
   Remove the middle filter underlay and push buttons/panels/rows closer to
   the approved mockup: exposed texture between sections, pronounced cast
   shadows, crisp steel rims, and visibly raised inner cards.
   ======================================================================== */

/* 1) The mockup has no full-width slab behind the center filter buttons. */
body.homePageActive .homeQuickFilters,
body.homePageActive .approvedHomeFilters,
body.homePageActive .homeFilterBar{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  overflow:visible!important;
}

/* 2) Filter buttons float directly above the supplied steel texture. */
body.homePageActive .homeQuickFilter{
  position:relative;
  border-radius:5px!important;
  transform:translateZ(0);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease!important;
}
body.homePageActive .homeQuickFilter:not(.active){
  background:linear-gradient(180deg,#35434a 0%,#26343a 48%,#1d292e 100%)!important;
  border:1px solid rgba(216,228,232,.31)!important;
  color:#e7ecee!important;
  box-shadow:
    0 11px 13px -7px rgba(0,0,0,.82),
    0 3px 4px -2px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(0,0,0,.48)!important;
}
body.homePageActive .homeQuickFilter:not(.active):hover{
  transform:translateY(-1px)!important;
  background:linear-gradient(180deg,#425159 0%,#2e3e44 52%,#223036 100%)!important;
  border-color:rgba(222,235,239,.42)!important;
  box-shadow:
    0 14px 17px -8px rgba(0,0,0,.88),
    0 4px 6px -3px rgba(0,0,0,.68),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.50)!important;
}
body.homePageActive .homeQuickFilter.active{
  background:linear-gradient(180deg,#b8ec43 0%,#91ca22 53%,#6e9f15 100%)!important;
  border:1px solid rgba(211,246,111,.72)!important;
  color:#14200c!important;
  box-shadow:
    0 12px 15px -7px rgba(0,0,0,.78),
    0 4px 7px -3px rgba(72,99,12,.58),
    0 0 16px rgba(169,229,27,.13),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(48,72,5,.42)!important;
}

/* 3) Main dashboard plates — clearer cast shadow like the mockup. */
body.homePageActive .approvedHomeDashboard>.homePanel,
body.homePageActive .approvedHomeDashboard>.damagePanel,
body.homePageActive .approvedHomeDashboard>.latestPanel,
body.homePageActive .approvedHomeDashboard>.popularPanel{
  position:relative;
  background:linear-gradient(180deg,#202c32 0%,#182329 46%,#131d22 100%)!important;
  border:1px solid rgba(210,222,226,.30)!important;
  box-shadow:
    0 21px 27px -13px rgba(0,0,0,.91),
    0 9px 13px -8px rgba(0,0,0,.78),
    0 2px 3px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.105),
    inset 0 -1px 0 rgba(0,0,0,.56)!important;
  overflow:visible!important;
}
body.homePageActive .approvedHomeDashboard>.homePanel::before{
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  top:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15) 17%,rgba(255,255,255,.09) 70%,transparent);
  opacity:.78;
}

/* 4) Panel headers get a subtle metal cap, not a flat strip. */
body.homePageActive .approvedHomeDashboard .panelTitle{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 56%,rgba(0,0,0,.08))!important;
  border-bottom:1px solid rgba(207,220,224,.18)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 4px 7px -6px rgba(0,0,0,.70)!important;
}

/* 5) TOP TODAY / latest / popular rows become physical raised cards. */
body.homePageActive .approvedHomeDashboard .damageMiniCard,
body.homePageActive .approvedHomeDashboard .latestReplayRow,
body.homePageActive .approvedHomeDashboard .popularMiniCard,
body.homePageActive .approvedHomeDashboard .popularRow{
  position:relative;
  background:linear-gradient(180deg,#202c31 0%,#162126 48%,#10191d 100%)!important;
  border:1px solid rgba(204,218,222,.24)!important;
  border-radius:5px!important;
  box-shadow:
    0 10px 13px -7px rgba(0,0,0,.84),
    0 3px 5px -3px rgba(0,0,0,.66),
    inset 0 1px 0 rgba(255,255,255,.085),
    inset 0 -1px 0 rgba(0,0,0,.48)!important;
  overflow:hidden;
}
body.homePageActive .approvedHomeDashboard .damageMiniCard::before,
body.homePageActive .approvedHomeDashboard .latestReplayRow::before,
body.homePageActive .approvedHomeDashboard .popularMiniCard::before,
body.homePageActive .approvedHomeDashboard .popularRow::before{
  content:"";
  position:absolute;
  left:5px;
  right:5px;
  top:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 24%,rgba(255,255,255,.07) 72%,transparent);
  opacity:.82;
}
body.homePageActive .approvedHomeDashboard .damageMiniCard:hover,
body.homePageActive .approvedHomeDashboard .latestReplayRow:hover,
body.homePageActive .approvedHomeDashboard .popularMiniCard:hover,
body.homePageActive .approvedHomeDashboard .popularRow:hover{
  transform:translateY(-1px)!important;
  background:linear-gradient(180deg,#29373d 0%,#1b282d 50%,#142026 100%)!important;
  border-color:rgba(218,231,235,.34)!important;
  box-shadow:
    0 14px 17px -8px rgba(0,0,0,.90),
    0 5px 7px -4px rgba(0,0,0,.72),
    0 0 12px rgba(169,229,27,.025),
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(0,0,0,.50)!important;
}

/* First leaderboard card is slightly stronger, matching the mockup's winner row. */
body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-1{
  border-color:rgba(225,191,76,.31)!important;
  background:linear-gradient(180deg,#273032 0%,#1a2426 50%,#121b1e 100%)!important;
  box-shadow:
    inset 3px 0 0 rgba(220,174,55,.78),
    0 12px 15px -8px rgba(0,0,0,.87),
    0 3px 5px -3px rgba(0,0,0,.66),
    inset 0 1px 0 rgba(255,255,255,.09)!important;
}

/* 6) Tabs and in-row buttons must have the same physical raised treatment. */
body.homePageActive .todayLeaderboardTabs{
  background:linear-gradient(180deg,#263239,#172228)!important;
  border:1px solid rgba(207,221,225,.20)!important;
  box-shadow:
    0 8px 11px -7px rgba(0,0,0,.78),
    inset 0 1px 0 rgba(255,255,255,.065),
    inset 0 -1px 0 rgba(0,0,0,.46)!important;
}
body.homePageActive .damageOpen,
body.homePageActive .latestOpen{
  background:linear-gradient(180deg,#35444a 0%,#202f34 100%)!important;
  border-color:rgba(211,224,228,.27)!important;
  box-shadow:
    0 8px 10px -6px rgba(0,0,0,.80),
    0 2px 3px -2px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.43)!important;
}
body.homePageActive .damageOpen:hover,
body.homePageActive .latestOpen:hover{
  transform:translateY(-1px)!important;
  box-shadow:
    0 11px 13px -6px rgba(0,0,0,.86),
    0 3px 5px -2px rgba(0,0,0,.64),
    inset 0 1px 0 rgba(255,255,255,.12)!important;
}

/* 7) The four benefit cards need the same stronger mockup depth. */
body.homePageActive .approvedHomeFeatures>div{
  background:linear-gradient(180deg,#202c32 0%,#172228 52%,#121c21 100%)!important;
  border:1px solid rgba(211,223,227,.27)!important;
  box-shadow:
    0 17px 21px -12px rgba(0,0,0,.88),
    0 6px 9px -6px rgba(0,0,0,.70),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.50)!important;
}
body.homePageActive .approvedHomeFeatures>div:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg,#29373d 0%,#1c292f 52%,#152126 100%)!important;
  border-color:rgba(220,232,235,.35)!important;
  box-shadow:
    0 20px 25px -12px rgba(0,0,0,.91),
    0 7px 11px -6px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.115)!important;
}

@media(max-width:760px){
  body.homePageActive .homeQuickFilters{overflow-x:auto!important;overflow-y:visible!important}
  body.homePageActive .approvedHomeDashboard>.homePanel{overflow:hidden!important}
}

/* ========================================================================
   v0.3.5.333 FIX2 — HOME PULSE CLIP + OPAQUE STEEL CARD PARITY
   Fix clipped Pulse labels and make all three HOME dashboard columns use
   unmistakably opaque, raised steel surfaces like the approved mockup.
   ======================================================================== */

/* PULSE: give the three text lines enough vertical room. The previous
   1.0 line-height + clipped body made the top label look shaved off. */
body.homePageActive .homeLivePulseV328{
  min-height:82px!important;
  padding-top:9px!important;
  padding-bottom:10px!important;
}
body.homePageActive .homePulseLeadV328,
body.homePageActive .homePulseTrackV328,
body.homePageActive .homePulseStatusV328{
  height:64px!important;
  min-height:64px!important;
}
body.homePageActive .homePulseItemV328{
  height:64px!important;
  min-height:64px!important;
  padding-top:4px!important;
  padding-bottom:4px!important;
  overflow:visible!important;
}
body.homePageActive .homePulseItemBodyV328{
  min-height:52px!important;
  padding:2px 0 2px!important;
  gap:3px!important;
  justify-content:center!important;
  overflow:hidden!important;
}
body.homePageActive .homePulseEventLabelV328{
  display:block!important;
  min-height:11px!important;
  padding-top:1px!important;
  font-size:8.4px!important;
  line-height:1.22!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
body.homePageActive .homePulseEventTextV328{
  min-height:13px!important;
  line-height:1.14!important;
}
body.homePageActive .homePulseTimeV331{
  min-height:9px!important;
  line-height:1.15!important;
  padding-bottom:1px!important;
}

/* Dashboard plate: fully opaque steel. The supplied texture must be seen
   between panels, never through the actual content plates. */
body.homePageActive .approvedHomeDashboard>.todayLeaderboardPanel,
body.homePageActive .approvedHomeDashboard>.latestPanel,
body.homePageActive .approvedHomeDashboard>.popularPanel,
body.homePageActive .approvedHomeDashboard>.homePanel{
  background:#243238!important;
  background-image:linear-gradient(180deg,#2c3b42 0%,#243238 42%,#1d292f 100%)!important;
  border:1px solid rgba(224,233,236,.32)!important;
  box-shadow:
    0 24px 30px -15px rgba(0,0,0,.92),
    0 10px 15px -9px rgba(0,0,0,.80),
    0 3px 5px -2px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(0,0,0,.58)!important;
}
body.homePageActive .approvedHomeDashboard .panelTitle{
  background:#2b3a40!important;
  background-image:linear-gradient(180deg,#34454c 0%,#29383e 54%,#222f35 100%)!important;
  border-bottom:1px solid rgba(225,234,237,.23)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 7px 10px -8px rgba(0,0,0,.78)!important;
}

/* TOP TODAY — actual mini cards. Fully opaque and visibly raised. */
body.homePageActive .todayLeaderboardPanel .damageMiniCard,
body.homePageActive .approvedHomeDashboard .damageMiniCard{
  background:#2a383e!important;
  background-image:linear-gradient(180deg,#34434a 0%,#2a383e 47%,#202c31 100%)!important;
  border-color:rgba(221,231,234,.29)!important;
  box-shadow:
    0 12px 15px -8px rgba(0,0,0,.88),
    0 4px 6px -3px rgba(0,0,0,.67),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.50)!important;
}
body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-1{
  background:#303837!important;
  background-image:linear-gradient(105deg,#4b4025 0%,#343b38 31%,#29363b 66%,#202b30 100%)!important;
  border-color:rgba(231,192,77,.48)!important;
  box-shadow:
    inset 3px 0 0 rgba(232,185,58,.86),
    0 14px 18px -8px rgba(0,0,0,.90),
    0 4px 7px -3px rgba(0,0,0,.68),
    inset 0 1px 0 rgba(255,255,255,.13)!important;
}
body.homePageActive .todayLeaderboardPanel .damageMiniCard:hover{
  background-image:linear-gradient(180deg,#3d4d54 0%,#304047 50%,#253238 100%)!important;
  box-shadow:
    0 17px 21px -9px rgba(0,0,0,.92),
    0 6px 9px -4px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.15)!important;
}

/* LATEST REPLAYS — this is the real renderer class. Previous generic rule
   missed the dominant legacy V304 declaration, leaving rows near-black. */
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304{
  background:#2a383e!important;
  background-image:linear-gradient(112deg,#34434a 0%,#2b3a40 34%,#253238 66%,#202c31 100%)!important;
  border:1px solid rgba(221,231,234,.29)!important;
  box-shadow:
    0 12px 15px -8px rgba(0,0,0,.88),
    0 4px 6px -3px rgba(0,0,0,.67),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.50)!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304:hover{
  background-image:linear-gradient(112deg,#3d4d54 0%,#33434a 35%,#2a383e 68%,#233036 100%)!important;
  border-color:rgba(225,235,238,.38)!important;
  box-shadow:
    0 17px 21px -9px rgba(0,0,0,.92),
    0 6px 9px -4px rgba(0,0,0,.72),
    0 0 13px rgba(169,229,27,.025),
    inset 0 1px 0 rgba(255,255,255,.15)!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestBodyV304{
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(0,0,0,.035))!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestStatsV304{
  background:#243238!important;
  background-image:linear-gradient(180deg,#2c3a40 0%,#233137 100%)!important;
  border-left-color:rgba(224,233,236,.19)!important;
  border-right-color:rgba(224,233,236,.19)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055)!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestOpenV305,
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestOpenV304{
  background:#2d3c42!important;
  background-image:linear-gradient(180deg,#3a4a50 0%,#29383e 100%)!important;
  border-color:rgba(204,224,149,.35)!important;
  box-shadow:
    0 8px 10px -6px rgba(0,0,0,.80),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.42)!important;
}

/* POPULAR TANKS — actual V299 cards. Make them the same steel family. */
body.homePageActive .approvedHomeDashboard .popularPanel .popularMockRowV299,
body.homePageActive .popularMockRowV299{
  background:#2a383e!important;
  background-image:linear-gradient(180deg,#34434a 0%,#2a383e 48%,#202c31 100%)!important;
  border:1px solid rgba(221,231,234,.29)!important;
  border-radius:6px!important;
  box-shadow:
    0 12px 15px -8px rgba(0,0,0,.88),
    0 4px 6px -3px rgba(0,0,0,.67),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.50)!important;
}
body.homePageActive .approvedHomeDashboard .popularPanel .popularMockRowV299:hover,
body.homePageActive .popularMockRowV299:hover,
body.homePageActive .popularMockRowV299:focus-visible{
  background-image:linear-gradient(180deg,#3d4d54 0%,#304047 50%,#253238 100%)!important;
  border-color:rgba(225,235,238,.38)!important;
  box-shadow:
    0 17px 21px -9px rgba(0,0,0,.92),
    0 6px 9px -4px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.15)!important;
}

/* Keep the card family consistent: no transparent/texture-through surfaces. */
body.homePageActive .todayLeaderboardPanel .damageMiniCard,
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304,
body.homePageActive .popularMockRowV299{
  opacity:1!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

@media(max-width:1180px){
  body.homePageActive .homeLivePulseV328{min-height:80px!important}
  body.homePageActive .homePulseLeadV328,
  body.homePageActive .homePulseTrackV328,
  body.homePageActive .homePulseStatusV328{height:62px!important;min-height:62px!important}
  body.homePageActive .homePulseItemV328{height:62px!important;min-height:62px!important}
}
@media(max-width:760px){
  body.homePageActive .homeLivePulseV328{min-height:72px!important}
  body.homePageActive .homePulseLeadV328,
  body.homePageActive .homePulseTrackV328{height:54px!important;min-height:54px!important}
  body.homePageActive .homePulseItemV328{height:54px!important;min-height:54px!important;padding-top:3px!important;padding-bottom:3px!important}
  body.homePageActive .homePulseItemBodyV328{min-height:44px!important}
  body.homePageActive .homePulseEventLabelV328{line-height:1.18!important;min-height:10px!important}
}

/* ========================================================================
   v0.3.5.333 FIX3 — HOME MOCKUP CARD DEPTH HARD PARITY
   Make the three HOME dashboard columns visually match the approved mockup:
   dark gunmetal surfaces, strong raised shadows, light top edges, and no
   texture showing through card bodies. Also hard-fix Pulse label clipping.
   ======================================================================== */

/* PULSE — stop shaving the top line. Keep horizontal ellipsis only. */
body.homePageActive .homeLivePulseV328{
  min-height:86px!important;
  padding-top:10px!important;
  padding-bottom:10px!important;
  overflow:visible!important;
}
body.homePageActive .homePulseLeadV328,
body.homePageActive .homePulseTrackV328,
body.homePageActive .homePulseStatusV328{
  height:66px!important;
  min-height:66px!important;
  overflow:visible!important;
}
body.homePageActive .homePulseItemV328{
  height:66px!important;
  min-height:66px!important;
  padding-top:5px!important;
  padding-bottom:5px!important;
  overflow:visible!important;
}
body.homePageActive .homePulseItemBodyV328{
  min-height:54px!important;
  padding:3px 0!important;
  gap:3px!important;
  justify-content:center!important;
  overflow-x:hidden!important;
  overflow-y:visible!important;
}
body.homePageActive .homePulseEventLabelV328{
  min-height:12px!important;
  padding-top:2px!important;
  padding-bottom:1px!important;
  font-size:8.5px!important;
  line-height:1.28!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body.homePageActive .homePulseEventTextV328{
  min-height:13px!important;
  line-height:1.18!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
body.homePageActive .homePulseTimeV331{
  min-height:10px!important;
  line-height:1.2!important;
  padding-bottom:1px!important;
  overflow:visible!important;
}

/* DASHBOARD COLUMN SHELLS — dark raised metal, not flat/transparent. */
body.homePageActive .approvedHomeDashboard>.homePanel,
body.homePageActive .approvedHomeDashboard>.todayLeaderboardPanel,
body.homePageActive .approvedHomeDashboard>.latestPanel,
body.homePageActive .approvedHomeDashboard>.popularPanel{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  background:#1a242a!important;
  background-image:linear-gradient(180deg,#263238 0%,#1d282e 16%,#172126 58%,#121b20 100%)!important;
  border:1px solid rgba(198,211,217,.34)!important;
  border-radius:7px!important;
  box-shadow:
    0 20px 31px -14px rgba(0,0,0,.88),
    0 10px 16px -10px rgba(0,0,0,.78),
    0 3px 5px -3px rgba(0,0,0,.60),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.62)!important;
}
body.homePageActive .approvedHomeDashboard>.homePanel::before,
body.homePageActive .approvedHomeDashboard>.todayLeaderboardPanel::before,
body.homePageActive .approvedHomeDashboard>.latestPanel::before,
body.homePageActive .approvedHomeDashboard>.popularPanel::before{
  content:""!important;
  position:absolute!important;
  left:8px!important;
  right:8px!important;
  top:0!important;
  height:1px!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24) 18%,rgba(255,255,255,.13) 72%,transparent)!important;
  opacity:.9!important;
  z-index:5!important;
}
body.homePageActive .approvedHomeDashboard .panelTitle{
  position:relative!important;
  background:#222e34!important;
  background-image:linear-gradient(180deg,#2c3940 0%,#243138 48%,#1c282e 100%)!important;
  border-bottom:1px solid rgba(202,215,220,.22)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 7px 11px -8px rgba(0,0,0,.82)!important;
}

/* TOP TODAY — actual five cards. */
body.homePageActive .todayLeaderboardPanel .todayLeaderboardList{
  overflow:visible!important;
}
body.homePageActive .todayLeaderboardPanel .damageMiniCard,
body.homePageActive .approvedHomeDashboard .damageMiniCard{
  position:relative!important;
  opacity:1!important;
  overflow:visible!important;
  background:#202b31!important;
  background-image:linear-gradient(180deg,#2a363c 0%,#222d33 47%,#182228 100%)!important;
  border:1px solid rgba(190,204,210,.28)!important;
  border-radius:6px!important;
  box-shadow:
    0 10px 14px -7px rgba(0,0,0,.88),
    0 4px 7px -4px rgba(0,0,0,.68),
    inset 0 1px 0 rgba(255,255,255,.115),
    inset 0 -1px 0 rgba(0,0,0,.52)!important;
}
body.homePageActive .todayLeaderboardPanel .damageMiniCard::before,
body.homePageActive .approvedHomeDashboard .damageMiniCard::before{
  content:""!important;
  position:absolute!important;
  left:6px!important;
  right:6px!important;
  top:0!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18) 28%,rgba(255,255,255,.09) 72%,transparent)!important;
  opacity:.9!important;
  pointer-events:none!important;
}
body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-1{
  background:#242c2d!important;
  background-image:linear-gradient(103deg,#493d23 0%,#303536 24%,#222d31 58%,#182126 100%)!important;
  border-color:rgba(226,188,72,.49)!important;
  box-shadow:
    inset 3px 0 0 rgba(226,181,55,.88),
    0 12px 17px -8px rgba(0,0,0,.90),
    0 4px 7px -4px rgba(0,0,0,.70),
    inset 0 1px 0 rgba(255,255,255,.12)!important;
}
body.homePageActive .todayLeaderboardPanel .damageMiniCard:hover{
  transform:translateY(-1px)!important;
  background-image:linear-gradient(180deg,#334148 0%,#29363c 49%,#1d282e 100%)!important;
  border-color:rgba(213,225,230,.40)!important;
  box-shadow:
    0 15px 19px -8px rgba(0,0,0,.93),
    0 6px 9px -4px rgba(0,0,0,.73),
    inset 0 1px 0 rgba(255,255,255,.15)!important;
}

/* LATEST REPLAYS — make the three rows the same dark raised family. */
body.homePageActive .approvedHomeDashboard .latestPanel .latestGrid{
  overflow:visible!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304,
body.homePageActive .approvedHomeDashboard .latestPanel .latestCard.latestReplayRow{
  position:relative!important;
  opacity:1!important;
  overflow:visible!important;
  background:#202b31!important;
  background-image:linear-gradient(180deg,#2a363c 0%,#222d33 47%,#182228 100%)!important;
  border:1px solid rgba(190,204,210,.28)!important;
  border-radius:6px!important;
  box-shadow:
    0 10px 14px -7px rgba(0,0,0,.88),
    0 4px 7px -4px rgba(0,0,0,.68),
    inset 0 1px 0 rgba(255,255,255,.115),
    inset 0 -1px 0 rgba(0,0,0,.52)!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304::before,
body.homePageActive .approvedHomeDashboard .latestPanel .latestCard.latestReplayRow::before{
  content:""!important;
  position:absolute!important;
  left:7px!important;
  right:7px!important;
  top:0!important;
  height:1px!important;
  z-index:5!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18) 28%,rgba(255,255,255,.09) 72%,transparent)!important;
  opacity:.9!important;
  pointer-events:none!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestBodyV304{
  background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(0,0,0,.035))!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestStatsV304{
  background:#1b252b!important;
  background-image:linear-gradient(180deg,#253137 0%,#1b252b 100%)!important;
  border-left:1px solid rgba(193,207,212,.20)!important;
  border-right:1px solid rgba(193,207,212,.20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055)!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304:hover{
  transform:translateY(-1px)!important;
  background-image:linear-gradient(180deg,#334148 0%,#29363c 49%,#1d282e 100%)!important;
  border-color:rgba(213,225,230,.40)!important;
  box-shadow:
    0 15px 19px -8px rgba(0,0,0,.93),
    0 6px 9px -4px rgba(0,0,0,.73),
    inset 0 1px 0 rgba(255,255,255,.15)!important;
}

/* POPULAR TANKS — exact V299 rows, same card material and depth. */
body.homePageActive .approvedHomeDashboard .popularPanel .popularList{
  overflow:visible!important;
}
body.homePageActive .approvedHomeDashboard .popularPanel .popularMockRowV299,
body.homePageActive .popularMockRowV299{
  position:relative!important;
  opacity:1!important;
  overflow:visible!important;
  background:#202b31!important;
  background-image:linear-gradient(180deg,#2a363c 0%,#222d33 47%,#182228 100%)!important;
  border:1px solid rgba(190,204,210,.28)!important;
  border-radius:6px!important;
  box-shadow:
    0 10px 14px -7px rgba(0,0,0,.88),
    0 4px 7px -4px rgba(0,0,0,.68),
    inset 0 1px 0 rgba(255,255,255,.115),
    inset 0 -1px 0 rgba(0,0,0,.52)!important;
}
body.homePageActive .approvedHomeDashboard .popularPanel .popularMockRowV299::before,
body.homePageActive .popularMockRowV299::before{
  content:""!important;
  position:absolute!important;
  left:6px!important;
  right:6px!important;
  top:0!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18) 28%,rgba(255,255,255,.09) 72%,transparent)!important;
  opacity:.9!important;
  pointer-events:none!important;
}
body.homePageActive .approvedHomeDashboard .popularPanel .popularMockRowV299:hover,
body.homePageActive .popularMockRowV299:hover,
body.homePageActive .popularMockRowV299:focus-visible{
  transform:translateY(-1px)!important;
  background-image:linear-gradient(180deg,#334148 0%,#29363c 49%,#1d282e 100%)!important;
  border-color:rgba(213,225,230,.40)!important;
  box-shadow:
    0 15px 19px -8px rgba(0,0,0,.93),
    0 6px 9px -4px rgba(0,0,0,.73),
    inset 0 1px 0 rgba(255,255,255,.15)!important;
}

/* Small controls inherit the same raised metal language. */
body.homePageActive .todayLeaderboardTabs,
body.homePageActive .damageOpen,
body.homePageActive .latestOpenV305,
body.homePageActive .latestOpenV304{
  box-shadow:
    0 7px 10px -6px rgba(0,0,0,.80),
    0 2px 3px -2px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.44)!important;
}

@media(max-width:1180px){
  body.homePageActive .homeLivePulseV328{min-height:82px!important}
  body.homePageActive .homePulseLeadV328,
  body.homePageActive .homePulseTrackV328,
  body.homePageActive .homePulseStatusV328{height:62px!important;min-height:62px!important}
  body.homePageActive .homePulseItemV328{height:62px!important;min-height:62px!important}
}
@media(max-width:760px){
  body.homePageActive .homeLivePulseV328{min-height:74px!important}
  body.homePageActive .homePulseLeadV328,
  body.homePageActive .homePulseTrackV328{height:56px!important;min-height:56px!important}
  body.homePageActive .homePulseItemV328{height:56px!important;min-height:56px!important;padding-top:4px!important;padding-bottom:4px!important}
  body.homePageActive .homePulseItemBodyV328{min-height:46px!important}
  body.homePageActive .homePulseEventLabelV328{min-height:11px!important;line-height:1.22!important}
}

/* ========================================================================
   v0.3.5.333 FIX4 — HOME PERMANENT CARD DEPTH / MOCKUP MATERIAL PARITY
   The previous pass read mainly on hover. This pass makes the raised-card
   effect permanent and visible at rest, matching the approved mockup.
   ======================================================================== */

/* Keep the dashboard shells darker than their child cards so the card layer
   is visible even before hover. */
body.homePageActive .approvedHomeDashboard>.homePanel,
body.homePageActive .approvedHomeDashboard>.todayLeaderboardPanel,
body.homePageActive .approvedHomeDashboard>.latestPanel,
body.homePageActive .approvedHomeDashboard>.popularPanel{
  background:#151e23!important;
  background-image:linear-gradient(180deg,#202a30 0%,#182227 24%,#121b20 100%)!important;
  border-color:rgba(143,160,168,.34)!important;
  box-shadow:
    0 18px 28px -14px rgba(0,0,0,.92),
    0 7px 13px -8px rgba(0,0,0,.88),
    inset 0 1px 0 rgba(255,255,255,.105),
    inset 0 -1px 0 rgba(0,0,0,.72)!important;
}
body.homePageActive .approvedHomeDashboard .panelTitle{
  background:#202a30!important;
  background-image:linear-gradient(180deg,#29343a 0%,#212c32 48%,#192329 100%)!important;
  border-bottom:1px solid rgba(183,198,204,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 8px 12px -9px rgba(0,0,0,.92)!important;
}

/* Permanent raised-card material shared by all three HOME columns. */
body.homePageActive .todayLeaderboardPanel .damageMiniCard,
body.homePageActive .approvedHomeDashboard .damageMiniCard,
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304,
body.homePageActive .approvedHomeDashboard .latestPanel .latestCard.latestReplayRow,
body.homePageActive .approvedHomeDashboard .popularPanel .popularMockRowV299,
body.homePageActive .popularMockRowV299{
  background:#263239!important;
  background-image:linear-gradient(180deg,#313e45 0%,#28343a 34%,#202b31 72%,#192329 100%)!important;
  border-style:solid!important;
  border-width:1px!important;
  border-color:rgba(203,215,221,.32) rgba(132,149,157,.26) rgba(4,8,10,.86) rgba(161,176,184,.30)!important;
  border-radius:6px!important;
  box-shadow:
    0 6px 0 -4px rgba(3,7,9,.94),
    0 11px 13px -8px rgba(0,0,0,.96),
    0 4px 6px -4px rgba(0,0,0,.88),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.64)!important;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.42))!important;
  transform:translateY(-1px)!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease,filter .16s ease!important;
}

/* A real top bevel at rest — this is visible without hover. */
body.homePageActive .todayLeaderboardPanel .damageMiniCard::before,
body.homePageActive .approvedHomeDashboard .damageMiniCard::before,
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304::before,
body.homePageActive .approvedHomeDashboard .latestPanel .latestCard.latestReplayRow::before,
body.homePageActive .approvedHomeDashboard .popularPanel .popularMockRowV299::before,
body.homePageActive .popularMockRowV299::before{
  content:""!important;
  position:absolute!important;
  left:6px!important;
  right:6px!important;
  top:0!important;
  height:1px!important;
  z-index:8!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.29) 20%,rgba(255,255,255,.15) 72%,transparent)!important;
  opacity:1!important;
}

/* TOP TODAY: make all five rows visibly metallic at rest; #1 keeps gold. */
body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-1{
  background:#2c302e!important;
  background-image:linear-gradient(100deg,#514224 0%,#353a39 18%,#2b363a 54%,#1c272c 100%)!important;
  border-color:rgba(229,193,83,.62) rgba(165,143,77,.35) rgba(12,11,7,.90) rgba(209,173,69,.48)!important;
  box-shadow:
    inset 3px 0 0 rgba(231,184,58,.92),
    0 6px 0 -4px rgba(24,18,6,.96),
    0 12px 15px -8px rgba(0,0,0,.98),
    0 4px 6px -4px rgba(0,0,0,.90),
    inset 0 1px 0 rgba(255,255,255,.16)!important;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.48))!important;
}

/* Latest rows had brighter child surfaces that hid the outer-card material.
   Bring all inner pieces into the same dark steel family as the mockup. */
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestBodyV304{
  background:linear-gradient(180deg,#2d3940 0%,#252f35 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestStatsV304{
  background:#222d33!important;
  background-image:linear-gradient(180deg,#2b373d 0%,#222d33 100%)!important;
  border-left:1px solid rgba(192,205,211,.16)!important;
  border-right:1px solid rgba(192,205,211,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),inset 0 -1px 0 rgba(0,0,0,.30)!important;
}
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestOpenV305,
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304 .latestOpenV304,
body.homePageActive .todayLeaderboardPanel .damageOpen{
  background:linear-gradient(180deg,#344148,#222d33)!important;
  border:1px solid rgba(181,196,203,.28)!important;
  box-shadow:0 6px 8px -5px rgba(0,0,0,.90),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.50)!important;
}

/* Popular tanks: same slate-metal surface, not near-black/transparent. */
body.homePageActive .approvedHomeDashboard .popularPanel .popularMockRowV299,
body.homePageActive .popularMockRowV299{
  background:#263239!important;
  background-image:linear-gradient(180deg,#313e45 0%,#28343a 38%,#202b31 73%,#192329 100%)!important;
}

/* Hover is only an extra millimetre of lift; the depth is already present. */
body.homePageActive .todayLeaderboardPanel .damageMiniCard:hover,
body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV304:hover,
body.homePageActive .approvedHomeDashboard .popularPanel .popularMockRowV299:hover,
body.homePageActive .popularMockRowV299:hover,
body.homePageActive .popularMockRowV299:focus-visible{
  transform:translateY(-2px)!important;
  background-image:linear-gradient(180deg,#37464e 0%,#2d3a40 44%,#222e34 100%)!important;
  border-color:rgba(220,230,235,.43) rgba(153,170,178,.34) rgba(6,10,12,.92) rgba(178,193,201,.37)!important;
  box-shadow:
    0 7px 0 -4px rgba(2,6,8,.96),
    0 14px 18px -8px rgba(0,0,0,.98),
    0 6px 8px -4px rgba(0,0,0,.90),
    inset 0 1px 0 rgba(255,255,255,.17)!important;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.52))!important;
}

/* Make the four feature cards permanently raised too; their current flatness
   made the dashboard depth feel inconsistent. */
body.homePageActive .approvedHomeFeatures .homeFeatureCard,
body.homePageActive .homeFeatureCard{
  background:#202b31!important;
  background-image:linear-gradient(180deg,#2c383e 0%,#222d33 50%,#192329 100%)!important;
  border-color:rgba(180,195,202,.32) rgba(120,137,145,.25) rgba(4,8,10,.82) rgba(147,164,172,.28)!important;
  box-shadow:
    0 7px 0 -5px rgba(3,7,9,.94),
    0 13px 17px -10px rgba(0,0,0,.92),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.55)!important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.32))!important;
}

/* ========================================================================
   v0.3.5.333 FIX5 — TOP TODAY NON-WINNER CARD REST-STATE PARITY
   Rows #2–#5 must keep the same raised steel material they previously showed
   only on hover. #1 keeps its separate gold winner treatment.
   ======================================================================== */
body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-2,
body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-3,
body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-4,
body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-5,
body.homePageActive .approvedHomeDashboard .todayLeaderboardPanel .damageMiniCard.rank-card-2,
body.homePageActive .approvedHomeDashboard .todayLeaderboardPanel .damageMiniCard.rank-card-3,
body.homePageActive .approvedHomeDashboard .todayLeaderboardPanel .damageMiniCard.rank-card-4,
body.homePageActive .approvedHomeDashboard .todayLeaderboardPanel .damageMiniCard.rank-card-5{
  background:#304047!important;
  background-image:linear-gradient(180deg,#3d4d54 0%,#304047 48%,#253238 100%)!important;
  border-color:rgba(220,230,235,.43) rgba(153,170,178,.34) rgba(6,10,12,.92) rgba(178,193,201,.37)!important;
  box-shadow:
    0 7px 0 -4px rgba(2,6,8,.96),
    0 14px 18px -8px rgba(0,0,0,.98),
    0 6px 8px -4px rgba(0,0,0,.90),
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -1px 0 rgba(0,0,0,.58)!important;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.52))!important;
  transform:translateY(-1px)!important;
}

/* Keep podium identity via a restrained left accent, not a darker card body. */
body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-2{
  box-shadow:
    inset 2px 0 0 rgba(194,205,211,.52),
    0 7px 0 -4px rgba(2,6,8,.96),
    0 14px 18px -8px rgba(0,0,0,.98),
    0 6px 8px -4px rgba(0,0,0,.90),
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -1px 0 rgba(0,0,0,.58)!important;
}
body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-3{
  box-shadow:
    inset 2px 0 0 rgba(196,137,78,.52),
    0 7px 0 -4px rgba(2,6,8,.96),
    0 14px 18px -8px rgba(0,0,0,.98),
    0 6px 8px -4px rgba(0,0,0,.90),
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -1px 0 rgba(0,0,0,.58)!important;
}

/* Hover now adds only a small lift instead of being the first moment the
   steel material appears. */
body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-2:hover,
body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-3:hover,
body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-4:hover,
body.homePageActive .todayLeaderboardPanel .damageMiniCard.rank-card-5:hover{
  background-image:linear-gradient(180deg,#43555d 0%,#35464d 48%,#29373d 100%)!important;
  border-color:rgba(233,240,243,.50) rgba(169,185,193,.39) rgba(6,10,12,.94) rgba(194,208,215,.42)!important;
  transform:translateY(-2px)!important;
  box-shadow:
    0 8px 0 -4px rgba(2,6,8,.97),
    0 16px 20px -8px rgba(0,0,0,.99),
    0 7px 9px -4px rgba(0,0,0,.92),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.60)!important;
}

/* ========================================================================
   v0.3.5.334 — REPLAYS TEXTURE + PERMANENT CARD DEPTH PARITY
   Port the approved HOME mockup material system to /replays:
   supplied steel texture, raised hero/control deck, opaque gunmetal cards,
   crisp top bevels and visible cast shadows in the REST state.
   Geometry and replay behavior are unchanged.
   ======================================================================== */
html:has(.replaysDiscoveryPage.approvedReplaysMockup),
body.replaysPageActive,
body:has(.replaysDiscoveryPage.approvedReplaysMockup){
  --rp-page:#111a20;
  --rp-shell-top:#202c32;
  --rp-shell-bottom:#151f24;
  --rp-card-top:#3d4d54;
  --rp-card-mid:#304047;
  --rp-card-bottom:#253238;
  --rp-inner-top:#2f3d44;
  --rp-inner-bottom:#202b31;
  background-color:var(--rp-page)!important;
  background-image:
    radial-gradient(980px 520px at 50% 0%,rgba(124,148,158,.07),transparent 72%),
    linear-gradient(180deg,rgba(6,12,16,.08),rgba(7,12,16,.24)),
    url('/assets/home-steel-texture.png')!important;
  background-repeat:no-repeat,no-repeat,no-repeat!important;
  background-position:center top,center top,center top!important;
  background-size:cover,cover,cover!important;
  background-attachment:fixed,fixed,fixed!important;
  color:#eef3f4!important;
}
body.replaysPageActive::before,
body:has(.replaysDiscoveryPage.approvedReplaysMockup)::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(760px 420px at 49% 10%,rgba(178,195,201,.04),transparent 72%),
    linear-gradient(90deg,rgba(0,0,0,.15),transparent 16%,transparent 84%,rgba(0,0,0,.18));
}
body.replaysPageActive .noise,
body:has(.replaysDiscoveryPage.approvedReplaysMockup) .noise{opacity:.006!important}

/* Header matches HOME: dark raised steel with a visible bottom cast shadow. */
body.replaysPageActive .approvedTopbar,
body.replaysPageActive .topbar,
body:has(.replaysDiscoveryPage.approvedReplaysMockup) .approvedTopbar,
body:has(.replaysDiscoveryPage.approvedReplaysMockup) .topbar{
  background:linear-gradient(180deg,rgba(28,39,45,.985),rgba(15,24,29,.992))!important;
  border-bottom:1px solid rgba(220,230,233,.18)!important;
  box-shadow:
    0 14px 26px -11px rgba(0,0,0,.86),
    0 4px 9px -5px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.58)!important;
}
body.replaysPageActive .approvedSearchBox,
body.replaysPageActive .approvedLivePill,
body.replaysPageActive .languageSelector,
body.replaysPageActive .accountControl{
  background:linear-gradient(180deg,rgba(27,38,43,.96),rgba(14,23,27,.985))!important;
  border-color:rgba(215,226,229,.16)!important;
  box-shadow:0 7px 12px -7px rgba(0,0,0,.78),inset 0 1px 0 rgba(255,255,255,.045),inset 0 -1px 0 rgba(0,0,0,.48)!important;
}

/* The page shell itself is transparent: the supplied texture must remain
   visible BETWEEN hero, controls, cards and pagination. */
.replaysDiscoveryPage.approvedReplaysMockup{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}
.replaysDiscoveryPage.approvedReplaysMockup::before,
.replaysDiscoveryPage.approvedReplaysMockup::after{display:none!important}

/* Hero = raised slab over the texture. Keep art unchanged. */
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroBanner{
  background:#1a252a!important;
  border:1px solid rgba(225,233,235,.29)!important;
  border-radius:8px!important;
  box-shadow:
    0 25px 32px -17px rgba(0,0,0,.91),
    0 10px 18px -12px rgba(0,0,0,.76),
    0 2px 3px rgba(0,0,0,.44),
    inset 0 1px 0 rgba(255,255,255,.085),
    inset 0 -1px 0 rgba(0,0,0,.52)!important;
  overflow:visible!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroBanner::before{
  content:""!important;
  position:absolute!important;
  left:10px!important;
  right:10px!important;
  top:0!important;
  height:1px!important;
  z-index:10!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20) 22%,rgba(255,255,255,.09) 76%,transparent)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroBackdrop{filter:saturate(.93) contrast(1.035) brightness(.94)!important}
.replaysDiscoveryPage.approvedReplaysMockup .replaysHeroShade{
  background:linear-gradient(90deg,rgba(9,16,19,.82) 0%,rgba(12,20,23,.51) 42%,rgba(10,17,20,.13) 73%,rgba(7,12,14,.20) 100%)!important;
}

/* Search/filter console floats as one raised control deck. */
.replaysDiscoveryPage.approvedReplaysMockup .approvedReplaysControlBar{
  background:linear-gradient(180deg,#27353b 0%,#1d2a30 52%,#151f24 100%)!important;
  border:1px solid rgba(219,229,232,.27)!important;
  border-radius:7px!important;
  box-shadow:
    0 16px 21px -13px rgba(0,0,0,.88),
    0 6px 10px -7px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.52)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField,
.replaysDiscoveryPage.approvedReplaysMockup .approvedReplaysControlBar select,
.replaysDiscoveryPage.approvedReplaysMockup .rhCustomSelectButton{
  background:linear-gradient(180deg,#35434a 0%,#26343a 50%,#1b272c 100%)!important;
  border:1px solid rgba(213,225,229,.27)!important;
  color:#e9eef0!important;
  box-shadow:
    0 9px 12px -8px rgba(0,0,0,.78),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.48)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .approvedReplaysControlBar .replaySearchField:hover,
.replaysDiscoveryPage.approvedReplaysMockup .rhCustomSelectButton:hover{
  background:linear-gradient(180deg,#3c4b52 0%,#2c3a40 52%,#202c31 100%)!important;
  border-color:rgba(225,234,238,.38)!important;
}

/* Filter/meta bars float over texture; no giant opaque slab. */
.replaysDiscoveryPage.approvedReplaysMockup .activeFilterBar,
.replaysDiscoveryPage.approvedReplaysMockup .discoveryCatalogMeta{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .activeFilterChip,
.replaysDiscoveryPage.approvedReplaysMockup .pageBtn{
  background:linear-gradient(180deg,#35434a,#202d33)!important;
  border:1px solid rgba(211,224,228,.28)!important;
  box-shadow:0 10px 13px -8px rgba(0,0,0,.78),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.50)!important;
}

/* Replay cards: permanent raised gunmetal at REST, same family as HOME rows.
   This is deliberately strong so the depth never depends on hover. */
.replaysDiscoveryPage.approvedReplaysMockup .replayCard.approvedMockupCard{
  position:relative!important;
  background:#304047!important;
  background-image:linear-gradient(180deg,var(--rp-card-top) 0%,var(--rp-card-mid) 48%,var(--rp-card-bottom) 100%)!important;
  border-style:solid!important;
  border-width:1px!important;
  border-color:rgba(220,230,235,.43) rgba(153,170,178,.34) rgba(6,10,12,.92) rgba(178,193,201,.37)!important;
  border-radius:7px!important;
  box-shadow:
    0 8px 0 -5px rgba(2,6,8,.97),
    0 17px 21px -10px rgba(0,0,0,.99),
    0 7px 10px -5px rgba(0,0,0,.91),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.60)!important;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.50))!important;
  transform:translateY(-1px)!important;
  overflow:hidden!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease,filter .16s ease!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replayCard.approvedMockupCard::before{
  content:""!important;
  position:absolute!important;
  left:7px!important;
  right:7px!important;
  top:0!important;
  height:1px!important;
  z-index:30!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.31) 20%,rgba(255,255,255,.16) 72%,transparent)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replayCard.approvedMockupCard:hover,
.replaysDiscoveryPage.approvedReplaysMockup .replayCard.approvedMockupCard:focus-visible{
  transform:translateY(-3px)!important;
  background-image:linear-gradient(180deg,#465861 0%,#35464d 49%,#29373d 100%)!important;
  border-color:rgba(236,242,245,.53) rgba(178,194,202,.42) rgba(6,10,12,.95) rgba(202,215,221,.45)!important;
  box-shadow:
    0 9px 0 -5px rgba(2,6,8,.98),
    0 20px 25px -10px rgba(0,0,0,.99),
    0 8px 11px -5px rgba(0,0,0,.93),
    inset 0 1px 0 rgba(255,255,255,.21),
    inset 0 -1px 0 rgba(0,0,0,.62)!important;
  filter:drop-shadow(0 5px 4px rgba(0,0,0,.55))!important;
}

/* Card art sits in its own recessed frame. */
.replaysDiscoveryPage.approvedReplaysMockup .replayCard .art{
  border-bottom:1px solid rgba(218,229,232,.20)!important;
  box-shadow:inset 0 -10px 18px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .cardImageOverlay{
  background:linear-gradient(90deg,rgba(20,29,33,.88),rgba(22,31,35,.60) 65%,rgba(13,20,23,.18))!important;
  border:1px solid rgba(218,228,232,.15)!important;
  box-shadow:0 7px 12px -8px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.05)!important;
}

/* The lower card is opaque layered steel, never page texture. */
.replaysDiscoveryPage.approvedReplaysMockup .replayCard .cardBody{
  background:#263239!important;
  background-image:linear-gradient(180deg,#313e45 0%,#28343a 38%,#202b31 74%,#192329 100%)!important;
  border:0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.56)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .statsRow.cardHudStats{
  background:linear-gradient(180deg,#2f3d44 0%,#222e34 100%)!important;
  border-top:1px solid rgba(220,230,234,.13)!important;
  border-bottom:1px solid rgba(4,8,10,.72)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.065),0 6px 10px -9px rgba(0,0,0,.84)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .cardAwards{
  background:linear-gradient(180deg,#28353b 0%,#1d282d 100%)!important;
  border-top:1px solid rgba(213,225,229,.12)!important;
  border-bottom:1px solid rgba(4,8,10,.68)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .cardFoot{
  background:linear-gradient(180deg,#233037 0%,#192329 100%)!important;
  border-top:1px solid rgba(211,224,228,.13)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.50)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .cardFoot b{
  background:linear-gradient(180deg,#334148,#222d33)!important;
  border:1px solid rgba(181,196,203,.24)!important;
  border-radius:4px!important;
  padding:5px 8px!important;
  box-shadow:0 7px 9px -6px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.48)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replayCard:hover .cardFoot b{
  background:linear-gradient(180deg,#405058,#29363d)!important;
  border-color:rgba(198,219,161,.38)!important;
}

/* Dropdown portal must match the raised steel controls. */
body.replaysPageActive #rhReplaySelectPortal .rhCustomSelectMenu,
body:has(.replaysDiscoveryPage.approvedReplaysMockup) #rhReplaySelectPortal .rhCustomSelectMenu{
  background:linear-gradient(180deg,#29373d,#19252a)!important;
  border:1px solid rgba(213,225,229,.28)!important;
  box-shadow:0 20px 28px -12px rgba(0,0,0,.94),0 7px 13px -8px rgba(0,0,0,.76),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body.replaysPageActive #rhReplaySelectPortal .rhCustomSelectOption:hover,
body:has(.replaysDiscoveryPage.approvedReplaysMockup) #rhReplaySelectPortal .rhCustomSelectOption:hover{
  background:linear-gradient(180deg,#3a4950,#28363c)!important;
}

/* Pager floats on texture like HOME filter buttons. */
.replaysDiscoveryPage.approvedReplaysMockup .catalogPager{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 9px 8px rgba(0,0,0,.34));
}

@media(max-width:760px){
  html:has(.replaysDiscoveryPage.approvedReplaysMockup),
  body.replaysPageActive,
  body:has(.replaysDiscoveryPage.approvedReplaysMockup){
    background-color:var(--rp-page)!important;
    background-image:linear-gradient(180deg,rgba(6,12,16,.10),rgba(7,12,16,.27)),url('/assets/home-steel-texture.png')!important;
    background-size:cover,cover!important;
    background-position:center top,center top!important;
    background-attachment:scroll,scroll!important;
  }
}


/* ========================================================================
   v0.3.5.335 — REPLAYS HERO MOCKUP REBUILD
   User-approved replay hero composition: supplied tank render, left blackout,
   action buttons and three live stat tiles. Discovery filters move below hero.
   ======================================================================== */
.replaysDiscoveryPage.approvedReplaysMockup.replaysMockupV335{
  width:min(1280px,calc(100vw - 40px))!important;
  max-width:1280px!important;
  margin:0 auto!important;
  padding-top:0!important;
  overflow:visible!important;
}

.replaysMockupV335 .replaysHeroBanner.replaysHeroMockupV335{
  position:relative!important;
  width:100vw!important;
  max-width:none!important;
  height:436px!important;
  min-height:436px!important;
  margin:0 0 24px calc(50% - 50vw)!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:#081013!important;
  box-shadow:0 22px 42px -24px rgba(0,0,0,.95)!important;
}
.replaysMockupV335 .replaysHeroBanner.replaysHeroMockupV335::before{
  display:none!important;
}
.replaysMockupV335 .replaysHeroBanner.replaysHeroMockupV335::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:4!important;
  pointer-events:none!important;
  border-radius:0!important;
  background:
    linear-gradient(180deg,rgba(2,7,9,.11) 0%,rgba(2,7,9,0) 47%,rgba(1,6,8,.19) 75%,rgba(1,5,7,.62) 100%),
    radial-gradient(900px 260px at 68% 25%,rgba(210,227,232,.08),transparent 68%)!important;
}
.replaysMockupV335 .replaysHeroMockupV335 .replaysHeroBackdrop{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  display:block!important;
  background:url('/assets/replays_hero_user_v336.webp') center 52%/cover no-repeat!important;
  filter:saturate(1.02) contrast(1.04) brightness(.88)!important;
  opacity:1!important;
  transform:none!important;
}
.replaysMockupV335 .replaysHeroMockupV335 .replaysHeroShade{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  display:block!important;
  background:
    linear-gradient(90deg,
      rgba(3,8,11,.995) 0%,
      rgba(3,8,11,.985) 19%,
      rgba(3,8,11,.93) 28%,
      rgba(3,8,11,.72) 36%,
      rgba(3,8,11,.34) 46%,
      rgba(3,8,11,.08) 59%,
      rgba(3,8,11,0) 72%),
    linear-gradient(180deg,rgba(3,8,11,.10),rgba(3,8,11,.02) 55%,rgba(2,7,9,.38) 100%)!important;
}
.replaysMockupV335 .replaysHeroMockupV335 .replaysHeroFx{
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  display:block!important;
  opacity:1!important;
  background:
    radial-gradient(420px 220px at 5% 53%,rgba(70,101,108,.10),transparent 72%),
    linear-gradient(90deg,rgba(0,0,0,.18),transparent 12%,transparent 91%,rgba(0,0,0,.13))!important;
}

.replaysMockupV335 .replaysHeroMockupV335 .replaysHeroContent{
  position:relative!important;
  z-index:6!important;
  width:100%!important;
  max-width:none!important;
  height:436px!important;
  min-height:436px!important;
  margin:0!important;
  padding:59px clamp(44px,5.2vw,104px) 26px!important;
  display:block!important;
  box-sizing:border-box!important;
}
.replaysMockupV335 .replaysHeroMockupV335 .replaysHeadingV335{
  width:610px!important;
  max-width:44vw!important;
  margin:0!important;
}
.replaysMockupV335 .replaysHeroMockupV335 .eyebrow{
  display:flex!important;
  align-items:center!important;
  gap:0!important;
  margin:0!important;
  color:#a3adb0!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:.19em!important;
  text-transform:uppercase!important;
  text-shadow:0 3px 14px rgba(0,0,0,.72)!important;
}
.replaysMockupV335 .replaysHeroMockupV335 .eyebrow::before{
  content:""!important;
  width:47px!important;
  height:4px!important;
  margin:0 29px 0 0!important;
  border-radius:999px!important;
  background:#a9e51b!important;
  box-shadow:0 0 13px rgba(169,229,27,.35)!important;
}
.replaysMockupV335 .replaysHeroMockupV335 .eyebrow b{
  color:#eef2f3!important;
  font-weight:900!important;
  letter-spacing:.17em!important;
}
.replaysMockupV335 .replaysHeroMockupV335 .eyebrow b span{color:#a9e51b!important}

.replaysMockupV335 .replaysHeroMockupV335 .pageTitle{
  margin:26px 0 22px!important;
  color:#f7f8f8!important;
  font-size:78px!important;
  font-weight:880!important;
  line-height:.84!important;
  letter-spacing:-.052em!important;
  text-transform:uppercase!important;
  text-shadow:0 8px 26px rgba(0,0,0,.58)!important;
}
.replaysMockupV335 .replaysHeroMockupV335 .replaysPageSub{
  max-width:560px!important;
  margin:0!important;
  color:#c8d0d3!important;
  font-size:20px!important;
  line-height:1.35!important;
  font-weight:500!important;
  text-shadow:0 3px 16px rgba(0,0,0,.66)!important;
}
.replaysMockupV335 .replaysHeroArchiveV335{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  margin-top:39px!important;
  color:#aab3b6!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:.22em!important;
  text-transform:uppercase!important;
}
.replaysMockupV335 .replaysHeroArchiveV335 i{
  width:31px!important;
  height:2px!important;
  flex:0 0 31px!important;
  background:#a9e51b!important;
  box-shadow:0 0 10px rgba(169,229,27,.25)!important;
}
.replaysMockupV335 .replaysHeroArchiveV335 b{
  color:#a9e51b!important;
  font-weight:900!important;
}

.replaysMockupV335 .replaysHeroActionsV335{
  display:flex!important;
  align-items:center!important;
  gap:32px!important;
  margin-top:34px!important;
}
.replaysMockupV335 .replaysHeroActionV335{
  height:66px!important;
  min-width:320px!important;
  padding:0 38px!important;
  border-radius:7px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:20px!important;
  color:#e6e9ea!important;
  font-size:17px!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  cursor:pointer!important;
  transition:transform .16s ease,filter .16s ease,border-color .16s ease,background .16s ease!important;
}
.replaysMockupV335 .replaysHeroActionV335.primary{
  color:#142005!important;
  border:1px solid rgba(200,255,66,.72)!important;
  background:linear-gradient(180deg,#baf42c 0%,#93d711 100%)!important;
  box-shadow:0 0 25px rgba(169,229,27,.18),inset 0 1px 0 rgba(255,255,255,.46),0 9px 20px -10px rgba(0,0,0,.9)!important;
}
.replaysMockupV335 .replaysHeroActionV335.secondary{
  min-width:310px!important;
  color:#aeb7ba!important;
  border:1px solid rgba(190,204,210,.35)!important;
  background:linear-gradient(180deg,rgba(34,44,49,.91),rgba(16,24,28,.94))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 9px 20px -12px rgba(0,0,0,.96)!important;
}
.replaysMockupV335 .replaysHeroActionV335:hover{
  transform:translateY(-2px)!important;
  filter:brightness(1.06)!important;
}
.replaysMockupV335 .replaysHeroActionV335:disabled{
  opacity:.55!important;
  cursor:wait!important;
  transform:none!important;
}
.replaysMockupV335 .replaysHeroActionIconV335{
  width:27px!important;
  height:27px!important;
  flex:0 0 27px!important;
  background:currentColor!important;
}

.replaysMockupV335 .replaysHeroStatsV335{
  position:absolute!important;
  right:clamp(28px,5vw,92px)!important;
  bottom:24px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(180px,1fr))!important;
  width:min(660px,47vw)!important;
  gap:16px!important;
  z-index:7!important;
}
.replaysMockupV335 .replaysHeroStatV335{
  min-height:99px!important;
  display:grid!important;
  grid-template-columns:48px 1fr!important;
  align-items:center!important;
  gap:15px!important;
  padding:15px 18px!important;
  border:1px solid rgba(177,198,205,.31)!important;
  border-radius:7px!important;
  background:linear-gradient(180deg,rgba(20,31,36,.89),rgba(9,17,21,.94))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 10px 23px -12px rgba(0,0,0,.95)!important;
  color:#eef2f2!important;
  text-decoration:none!important;
  backdrop-filter:blur(8px)!important;
  overflow:hidden!important;
  position:relative!important;
}
.replaysMockupV335 .replaysHeroStatV335::after{
  content:""!important;
  position:absolute!important;
  left:14px!important;
  right:14px!important;
  bottom:0!important;
  height:2px!important;
  background:linear-gradient(90deg,transparent,#a9e51b 26%,#a9e51b 74%,transparent)!important;
  box-shadow:0 0 11px rgba(169,229,27,.34)!important;
}
.replaysMockupV335 .replaysHeroStatV335:hover{
  border-color:rgba(194,218,225,.46)!important;
  background:linear-gradient(180deg,rgba(27,40,46,.94),rgba(12,21,25,.97))!important;
}
.replaysMockupV335 .replaysHeroStatIconV335{
  width:45px!important;
  height:45px!important;
  display:grid!important;
  place-items:center!important;
  color:#8c989d!important;
}
.replaysMockupV335 .replaysHeroStatMaskV335{
  width:34px!important;
  height:34px!important;
  background:currentColor!important;
}
.replaysMockupV335 .replaysHeroStatCopyV335{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
}
.replaysMockupV335 .replaysHeroStatCopyV335 small,
.replaysMockupV335 .replaysHeroStatCopyV335 em{
  color:#909ca1!important;
  font-style:normal!important;
  font-size:10px!important;
  line-height:1.15!important;
  font-weight:800!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
}
.replaysMockupV335 .replaysHeroStatCopyV335 strong,
.replaysMockupV335 .replaysHeroStatCopyV335 small b{
  color:#a9e51b!important;
  font-size:28px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:-.03em!important;
}
.replaysMockupV335 .replaysHeroStatCopyV335 strong{margin:4px 0 1px!important}
.replaysMockupV335 .replaysHeroStatCopyV335 small b{margin-right:4px!important}

.replaysMockupV335 .replaysCatalogToolsV335{
  width:100%!important;
  margin:0 0 8px!important;
}
.replaysMockupV335 .replaysCatalogToolbarV335{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  min-height:64px!important;
  margin:0!important;
  padding:8px!important;
  display:grid!important;
  grid-template-columns:minmax(280px,1.55fr) repeat(3,minmax(145px,.82fr)) minmax(160px,.9fr)!important;
  gap:8px!important;
  border-radius:8px!important;
}
.replaysMockupV335 .replaysCatalogToolbarV335 .replaySearchField,
.replaysMockupV335 .replaysCatalogToolbarV335 .rhCustomSelect,
.replaysMockupV335 .replaysCatalogToolbarV335 .rhCustomSelectButton{
  height:46px!important;
  min-height:46px!important;
}

@media(max-width:1320px){
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeadingV335{max-width:47vw!important}
  .replaysMockupV335 .replaysHeroMockupV335 .pageTitle{font-size:70px!important}
  .replaysMockupV335 .replaysHeroMockupV335 .replaysPageSub{font-size:17px!important}
  .replaysMockupV335 .replaysHeroActionsV335{gap:14px!important}
  .replaysMockupV335 .replaysHeroActionV335{min-width:260px!important;padding:0 26px!important;font-size:15px!important}
  .replaysMockupV335 .replaysHeroActionV335.secondary{min-width:245px!important}
  .replaysMockupV335 .replaysHeroStatsV335{grid-template-columns:repeat(3,minmax(150px,1fr))!important;width:min(570px,45vw)!important;gap:10px!important}
  .replaysMockupV335 .replaysHeroStatV335{grid-template-columns:38px 1fr!important;gap:10px!important;padding:13px!important}
  .replaysMockupV335 .replaysHeroStatIconV335{width:36px!important}
  .replaysMockupV335 .replaysHeroStatCopyV335 strong,
  .replaysMockupV335 .replaysHeroStatCopyV335 small b{font-size:24px!important}
}
@media(max-width:1040px){
  .replaysDiscoveryPage.approvedReplaysMockup.replaysMockupV335{
    width:calc(100vw - 28px)!important;
    max-width:calc(100vw - 28px)!important;
  }
  .replaysMockupV335 .replaysHeroBanner.replaysHeroMockupV335{
    height:520px!important;
    min-height:520px!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroBackdrop{background-position:59% 52%!important}
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroContent{
    height:520px!important;
    min-height:520px!important;
    padding:48px 34px 22px!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeadingV335{
    width:520px!important;
    max-width:61vw!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .pageTitle{font-size:62px!important}
  .replaysMockupV335 .replaysHeroArchiveV335{margin-top:26px!important}
  .replaysMockupV335 .replaysHeroActionsV335{margin-top:24px!important}
  .replaysMockupV335 .replaysHeroActionV335{height:58px!important;min-width:230px!important}
  .replaysMockupV335 .replaysHeroStatsV335{
    left:34px!important;
    right:34px!important;
    bottom:18px!important;
    width:auto!important;
    grid-template-columns:repeat(3,1fr)!important;
  }
  .replaysMockupV335 .replaysCatalogToolbarV335{
    grid-template-columns:1.35fr repeat(2,1fr)!important;
  }
  .replaysMockupV335 .replaysCatalogToolbarV335 .replaySearchField{grid-column:1/-1!important}
}
@media(max-width:720px){
  .replaysDiscoveryPage.approvedReplaysMockup.replaysMockupV335{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    padding-top:0!important;
  }
  .replaysMockupV335 .replaysHeroBanner.replaysHeroMockupV335{
    height:650px!important;
    min-height:650px!important;
    margin-bottom:16px!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroBackdrop{
    background-position:64% 44%!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroShade{
    background:
      linear-gradient(90deg,rgba(3,8,11,.985) 0%,rgba(3,8,11,.91) 45%,rgba(3,8,11,.42) 78%,rgba(3,8,11,.20) 100%),
      linear-gradient(180deg,rgba(3,8,11,.14),rgba(3,8,11,.10) 44%,rgba(2,7,9,.72) 100%)!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroContent{
    height:650px!important;
    min-height:650px!important;
    padding:34px 22px 20px!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeadingV335{
    width:100%!important;
    max-width:92%!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .eyebrow{font-size:10px!important;letter-spacing:.15em!important}
  .replaysMockupV335 .replaysHeroMockupV335 .eyebrow::before{width:32px!important;margin-right:14px!important}
  .replaysMockupV335 .replaysHeroMockupV335 .pageTitle{font-size:50px!important;margin:21px 0 14px!important}
  .replaysMockupV335 .replaysHeroMockupV335 .replaysPageSub{font-size:15px!important;max-width:88%!important}
  .replaysMockupV335 .replaysHeroArchiveV335{margin-top:24px!important;font-size:9px!important;gap:9px!important}
  .replaysMockupV335 .replaysHeroActionsV335{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
    margin-top:22px!important;
  }
  .replaysMockupV335 .replaysHeroActionV335,
  .replaysMockupV335 .replaysHeroActionV335.secondary{
    width:100%!important;
    min-width:0!important;
    height:54px!important;
    padding:0 12px!important;
    gap:9px!important;
    font-size:11px!important;
  }
  .replaysMockupV335 .replaysHeroActionIconV335{width:20px!important;height:20px!important;flex-basis:20px!important}
  .replaysMockupV335 .replaysHeroStatsV335{
    left:14px!important;
    right:14px!important;
    bottom:14px!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
  }
  .replaysMockupV335 .replaysHeroStatV335{
    min-height:62px!important;
    grid-template-columns:34px 1fr!important;
    padding:8px 12px!important;
  }
  .replaysMockupV335 .replaysHeroStatIconV335{height:34px!important}
  .replaysMockupV335 .replaysHeroStatMaskV335{width:25px!important;height:25px!important}
  .replaysMockupV335 .replaysHeroStatCopyV335{
    display:grid!important;
    grid-template-columns:auto 1fr!important;
    column-gap:8px!important;
    align-items:baseline!important;
  }
  .replaysMockupV335 .replaysHeroStatCopyV335 small{grid-column:1/-1!important}
  .replaysMockupV335 .replaysHeroStatCopyV335 strong,
  .replaysMockupV335 .replaysHeroStatCopyV335 small b{font-size:20px!important}
  .replaysMockupV335 .replaysCatalogToolbarV335{grid-template-columns:1fr!important;gap:7px!important}
  .replaysMockupV335 .replaysCatalogToolbarV335 .replaySearchField{grid-column:auto!important}
}


/* ========================================================================
   v0.3.5.337 — REPLAYS EXACT USER RENDER HARD LOCK
   Scope: /replays hero art only.
   The user-supplied 1920x720 WebP is mounted as a real IMG element so legacy
   background-image rules cannot replace it. No generated artwork is used.
   ======================================================================== */
.replaysDiscoveryPage.approvedReplaysMockup.replaysMockupV335
.replaysHeroMockupV335 > .replaysHeroExactImageV337{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center 52%!important;
  background:none!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  pointer-events:none!important;
  user-select:none!important;
}
.replaysDiscoveryPage.approvedReplaysMockup.replaysMockupV335
.replaysHeroMockupV335 > .replaysHeroExactImageV337::before,
.replaysDiscoveryPage.approvedReplaysMockup.replaysMockupV335
.replaysHeroMockupV335 > .replaysHeroExactImageV337::after{
  display:none!important;
  content:none!important;
}
/* Preserve text readability only on the left; the rest of the supplied render
   stays untouched and receives no brightness/saturation filter. */
.replaysDiscoveryPage.approvedReplaysMockup.replaysMockupV335
.replaysHeroMockupV335 > .replaysHeroShade{
  background:
    linear-gradient(90deg,
      rgba(3,8,11,.985) 0%,
      rgba(3,8,11,.96) 18%,
      rgba(3,8,11,.84) 28%,
      rgba(3,8,11,.55) 38%,
      rgba(3,8,11,.22) 48%,
      rgba(3,8,11,.055) 58%,
      rgba(3,8,11,0) 69%),
    linear-gradient(180deg,rgba(3,8,11,.035),rgba(3,8,11,0) 57%,rgba(2,7,9,.27) 100%)!important;
}
@media(max-width:1040px){
  .replaysDiscoveryPage.approvedReplaysMockup.replaysMockupV335
  .replaysHeroMockupV335 > .replaysHeroExactImageV337{object-position:58% 52%!important}
}
@media(max-width:720px){
  .replaysDiscoveryPage.approvedReplaysMockup.replaysMockupV335
  .replaysHeroMockupV335 > .replaysHeroExactImageV337{object-position:64% 48%!important}
}

/* ========================================================================
   v0.3.5.338 — REPLAYS HERO WORKING-CANVAS WIDTH LOCK
   Scope: /replays hero geometry only.
   The hero is locked to the same 1280px working canvas as the filters/cards.
   The user-supplied render remains untouched and is not regenerated.
   ======================================================================== */
@media (min-width:1041px){
  .replaysDiscoveryPage.approvedReplaysMockup.replaysMockupV335
  .replaysHeroBanner.replaysHeroMockupV335{
    width:100%!important;
    max-width:1280px!important;
    margin:0 0 24px 0!important;
  }

  /* Keep the original mockup composition inside the now-correct 1280px canvas
     without letting the right KPI rail collide with the action buttons. */
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroContent{
    padding-left:48px!important;
    padding-right:48px!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeadingV335{
    max-width:560px!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .pageTitle{
    font-size:70px!important;
  }
  .replaysMockupV335 .replaysHeroActionsV335{
    gap:14px!important;
  }
  .replaysMockupV335 .replaysHeroActionV335{
    min-width:250px!important;
    padding-left:24px!important;
    padding-right:24px!important;
    font-size:15px!important;
  }
  .replaysMockupV335 .replaysHeroActionV335.secondary{
    min-width:235px!important;
  }
  .replaysMockupV335 .replaysHeroStatsV335{
    right:32px!important;
    width:570px!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .replaysMockupV335 .replaysHeroStatV335{
    grid-template-columns:38px 1fr!important;
    gap:10px!important;
    padding:13px!important;
  }
  .replaysMockupV335 .replaysHeroStatIconV335{
    width:36px!important;
  }
  .replaysMockupV335 .replaysHeroStatCopyV335 strong,
  .replaysMockupV335 .replaysHeroStatCopyV335 small b{
    font-size:24px!important;
  }
}


/* ========================================================================
   v0.3.5.339 — REPLAYS HERO COMPACT PREMIUM POLISH
   Scope: /replays hero only.
   - keep the user's exact 1920x720 render
   - reduce hero height and bright sky dominance
   - compact primary/secondary actions
   - compact the live KPI rail into three small glass tiles
   - remove the redundant archive subtitle row from markup
   - preserve filters, cards, backend and replay logic
   ======================================================================== */
@media (min-width:1041px){
  .replaysDiscoveryPage.approvedReplaysMockup.replaysMockupV335
  .replaysHeroBanner.replaysHeroMockupV335{
    height:290px!important;
    min-height:290px!important;
    margin-bottom:16px!important;
    border:1px solid rgba(198,214,219,.14)!important;
    border-radius:8px!important;
    box-shadow:0 18px 34px -22px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.025)!important;
  }

  .replaysDiscoveryPage.approvedReplaysMockup.replaysMockupV335
  .replaysHeroMockupV335 > .replaysHeroExactImageV337{
    object-position:center 66%!important;
    filter:brightness(.62) contrast(1.07) saturate(.88)!important;
  }

  .replaysDiscoveryPage.approvedReplaysMockup.replaysMockupV335
  .replaysHeroMockupV335 > .replaysHeroShade{
    background:
      linear-gradient(90deg,
        rgba(3,8,11,.995) 0%,
        rgba(3,8,11,.975) 17%,
        rgba(3,8,11,.90) 27%,
        rgba(3,8,11,.69) 37%,
        rgba(3,8,11,.34) 48%,
        rgba(3,8,11,.10) 58%,
        rgba(3,8,11,0) 69%),
      linear-gradient(180deg,rgba(2,7,9,.16),rgba(2,7,9,.015) 50%,rgba(2,7,9,.34) 100%)!important;
  }

  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroFx{
    opacity:.72!important;
    background:
      radial-gradient(430px 170px at 9% 50%,rgba(90,112,118,.09),transparent 72%),
      linear-gradient(90deg,rgba(0,0,0,.14),transparent 15%,transparent 92%,rgba(0,0,0,.09))!important;
  }

  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroContent{
    height:290px!important;
    min-height:290px!important;
    padding:26px 32px 20px!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeadingV335{
    width:500px!important;
    max-width:500px!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .eyebrow{
    font-size:9px!important;
    letter-spacing:.18em!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .eyebrow::before{
    width:30px!important;
    height:2px!important;
    margin-right:14px!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .pageTitle{
    margin:15px 0 10px!important;
    font-size:52px!important;
    line-height:.9!important;
    letter-spacing:-.045em!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysPageSub{
    max-width:390px!important;
    color:#bdc7ca!important;
    font-size:12px!important;
    line-height:1.4!important;
    font-weight:560!important;
  }

  .replaysMockupV335 .replaysHeroActionsV335{
    gap:12px!important;
    margin-top:27px!important;
  }
  .replaysMockupV335 .replaysHeroActionV335{
    box-sizing:border-box!important;
    height:44px!important;
    min-width:0!important;
    width:190px!important;
    padding:0 16px!important;
    gap:10px!important;
    border-radius:5px!important;
    font-size:12px!important;
    letter-spacing:.015em!important;
  }
  .replaysMockupV335 .replaysHeroActionV335.secondary{
    min-width:0!important;
    width:170px!important;
    color:#b6c0c3!important;
    border-color:rgba(189,205,211,.25)!important;
    background:linear-gradient(180deg,rgba(30,41,46,.80),rgba(12,20,24,.88))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 8px 18px -12px rgba(0,0,0,.94)!important;
  }
  .replaysMockupV335 .replaysHeroActionV335.primary{
    background:linear-gradient(180deg,#afea25 0%,#87c90d 100%)!important;
    box-shadow:0 0 16px rgba(169,229,27,.12),inset 0 1px 0 rgba(255,255,255,.38),0 8px 18px -12px rgba(0,0,0,.92)!important;
  }
  .replaysMockupV335 .replaysHeroActionV335:hover{
    transform:translateY(-1px)!important;
  }
  .replaysMockupV335 .replaysHeroActionIconV335{
    width:17px!important;
    height:17px!important;
    flex:0 0 17px!important;
  }

  .replaysMockupV335 .replaysHeroStatsV335{
    right:22px!important;
    bottom:22px!important;
    width:414px!important;
    grid-template-columns:repeat(3,130px)!important;
    gap:12px!important;
  }
  .replaysMockupV335 .replaysHeroStatV335{
    box-sizing:border-box!important;
    min-height:64px!important;
    height:64px!important;
    grid-template-columns:28px minmax(0,1fr)!important;
    gap:8px!important;
    padding:8px 10px!important;
    border-radius:5px!important;
    border-color:rgba(181,201,208,.22)!important;
    background:linear-gradient(180deg,rgba(23,34,39,.78),rgba(8,15,19,.88))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 9px 18px -13px rgba(0,0,0,.95)!important;
    backdrop-filter:blur(7px)!important;
  }
  .replaysMockupV335 .replaysHeroStatV335::after{
    left:10px!important;
    right:10px!important;
    height:1px!important;
    opacity:.76!important;
  }
  .replaysMockupV335 .replaysHeroStatIconV335{
    width:28px!important;
    height:28px!important;
  }
  .replaysMockupV335 .replaysHeroStatMaskV335{
    width:20px!important;
    height:20px!important;
  }
  .replaysMockupV335 .replaysHeroStatCopyV335 small,
  .replaysMockupV335 .replaysHeroStatCopyV335 em{
    font-size:7px!important;
    line-height:1.05!important;
    letter-spacing:.035em!important;
  }
  .replaysMockupV335 .replaysHeroStatCopyV335 strong,
  .replaysMockupV335 .replaysHeroStatCopyV335 small b{
    font-size:18px!important;
    line-height:1!important;
  }
  .replaysMockupV335 .replaysHeroStatCopyV335 strong{
    margin:3px 0 0!important;
  }

  .replaysMockupV335 .replaysCatalogToolsV335{
    margin-bottom:8px!important;
  }
}

@media (min-width:721px) and (max-width:1040px){
  .replaysMockupV335 .replaysHeroBanner.replaysHeroMockupV335{
    height:370px!important;
    min-height:370px!important;
    margin-bottom:14px!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroContent{
    height:370px!important;
    min-height:370px!important;
    padding:32px 28px 18px!important;
  }
  .replaysDiscoveryPage.approvedReplaysMockup.replaysMockupV335
  .replaysHeroMockupV335 > .replaysHeroExactImageV337{
    object-position:60% 64%!important;
    filter:brightness(.62) contrast(1.06) saturate(.90)!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .pageTitle{font-size:54px!important}
  .replaysMockupV335 .replaysHeroMockupV335 .replaysPageSub{font-size:13px!important}
  .replaysMockupV335 .replaysHeroActionsV335{margin-top:24px!important;gap:10px!important}
  .replaysMockupV335 .replaysHeroActionV335{height:44px!important;min-width:0!important;width:190px!important;padding:0 15px!important;font-size:12px!important;gap:9px!important}
  .replaysMockupV335 .replaysHeroActionV335.secondary{min-width:0!important;width:170px!important}
  .replaysMockupV335 .replaysHeroActionIconV335{width:17px!important;height:17px!important;flex-basis:17px!important}
  .replaysMockupV335 .replaysHeroStatsV335{left:28px!important;right:28px!important;bottom:16px!important;width:auto!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important}
  .replaysMockupV335 .replaysHeroStatV335{min-height:60px!important;height:60px!important;grid-template-columns:26px 1fr!important;padding:8px 10px!important;gap:7px!important}
  .replaysMockupV335 .replaysHeroStatIconV335{width:26px!important;height:26px!important}
  .replaysMockupV335 .replaysHeroStatMaskV335{width:19px!important;height:19px!important}
  .replaysMockupV335 .replaysHeroStatCopyV335 strong,
  .replaysMockupV335 .replaysHeroStatCopyV335 small b{font-size:18px!important}
}


/* ========================================================================
   v0.3.5.340 — REPLAYS HERO BATTLE ART SWAP
   Scope: /replays hero artwork only.
   Uses the newly approved generated battle scene exactly as supplied.
   Existing compact hero geometry, controls, KPI tiles and replay logic remain intact.
   ======================================================================== */
@media (min-width:1041px){
  .replaysDiscoveryPage.approvedReplaysMockup.replaysMockupV335
  .replaysHeroMockupV335 > .replaysHeroBattleV340{
    object-position:center 44%!important;
    filter:none!important;
  }
}
@media (min-width:721px) and (max-width:1040px){
  .replaysDiscoveryPage.approvedReplaysMockup.replaysMockupV335
  .replaysHeroMockupV335 > .replaysHeroBattleV340{
    object-position:center 46%!important;
    filter:none!important;
  }
}
@media (max-width:720px){
  .replaysDiscoveryPage.approvedReplaysMockup.replaysMockupV335
  .replaysHeroMockupV335 > .replaysHeroBattleV340{
    object-position:55% 46%!important;
    filter:none!important;
  }
}


/* ========================================================================
   v0.3.5.341 — REPLAYS HERO FUNCTION RAIL
   Scope: /replays hero controls + live counters only.
   - left: Upload Replay + Random Top Battle
   - right: total replays + video count/link + best battle today damage/link
   - data comes from existing /api/home contract
   - hero artwork, filters, cards and backend parsing remain untouched
   ======================================================================== */
@media (min-width:1041px){
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroActionsV341{
    position:absolute!important;
    left:32px!important;
    bottom:22px!important;
    z-index:8!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    margin:0!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroActionsV341 .replaysHeroActionV335{
    height:42px!important;
    min-width:0!important;
    width:178px!important;
    padding:0 14px!important;
    gap:8px!important;
    border-radius:5px!important;
    font-size:10.5px!important;
    line-height:1!important;
    letter-spacing:.02em!important;
    white-space:nowrap!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroActionsV341 .replaysHeroActionV335.secondary{
    width:205px!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroActionsV341 .replaysHeroActionIconV335{
    width:16px!important;
    height:16px!important;
    flex:0 0 16px!important;
  }

  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroStatsV341{
    position:absolute!important;
    right:22px!important;
    bottom:22px!important;
    left:auto!important;
    z-index:8!important;
    width:486px!important;
    display:grid!important;
    grid-template-columns:132px 132px 206px!important;
    gap:8px!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroStatsV341 .replaysHeroStatV335{
    box-sizing:border-box!important;
    min-width:0!important;
    width:auto!important;
    min-height:54px!important;
    height:54px!important;
    grid-template-columns:23px minmax(0,1fr)!important;
    gap:7px!important;
    padding:7px 9px!important;
    border-radius:5px!important;
    border:1px solid rgba(190,209,215,.20)!important;
    background:linear-gradient(180deg,rgba(23,34,39,.80),rgba(8,15,19,.90))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 8px 16px -12px rgba(0,0,0,.96)!important;
    backdrop-filter:blur(7px)!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroStatsV341 .replaysHeroStatV335:hover{
    transform:translateY(-1px)!important;
    border-color:rgba(169,229,27,.34)!important;
    background:linear-gradient(180deg,rgba(28,42,46,.88),rgba(9,18,21,.94))!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroStatsV341 .replaysHeroStatV335::after{
    left:9px!important;
    right:9px!important;
    height:1px!important;
    opacity:.62!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroStatsV341 .replaysHeroStatIconV335{
    width:23px!important;
    height:23px!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroStatsV341 .replaysHeroStatMaskV335{
    width:17px!important;
    height:17px!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroStatsV341 .replaysHeroStatCopyV335 small,
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroStatsV341 .replaysHeroStatCopyV335 em{
    font-size:6.5px!important;
    line-height:1.05!important;
    letter-spacing:.045em!important;
    white-space:nowrap!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroStatsV341 .replaysHeroStatCopyV335 strong{
    margin:3px 0 0!important;
    font-size:17px!important;
    line-height:1!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroStatsV341 .replaysHeroStatBestV341 .replaysHeroStatCopyV335{
    display:grid!important;
    grid-template-columns:auto 1fr!important;
    align-items:end!important;
    column-gap:5px!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroStatsV341 .replaysHeroStatBestV341 small{
    grid-column:1/-1!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroStatsV341 .replaysHeroStatBestV341 strong{
    font-size:20px!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroStatsV341 .replaysHeroStatBestV341 em{
    padding-bottom:1px!important;
    color:#8f9a9d!important;
  }
  .replaysMockupV335 .replaysHeroVideoIconV341{
    display:grid!important;
    place-items:center!important;
    border:1px solid rgba(169,229,27,.26)!important;
    border-radius:50%!important;
    background:rgba(169,229,27,.08)!important;
  }
  .replaysMockupV335 .replaysHeroVideoIconV341 i{
    width:0!important;
    height:0!important;
    margin-left:2px!important;
    border-top:5px solid transparent!important;
    border-bottom:5px solid transparent!important;
    border-left:8px solid #a9e51b!important;
  }
  .replaysMockupV335 .replaysHeroStatVideoV341 strong{
    color:#dce5e7!important;
  }
}

@media (min-width:721px) and (max-width:1040px){
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroActionsV341{
    position:absolute!important;
    left:28px!important;
    top:192px!important;
    margin:0!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroActionsV341 .replaysHeroActionV335{
    width:172px!important;
    height:42px!important;
    font-size:10px!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroActionsV341 .replaysHeroActionV335.secondary{width:198px!important}
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroStatsV341{
    left:28px!important;
    right:28px!important;
    bottom:16px!important;
    width:auto!important;
    grid-template-columns:1fr 1fr 1.35fr!important;
    gap:8px!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroStatsV341 .replaysHeroStatV335{
    height:58px!important;
    min-height:58px!important;
  }
}

@media (max-width:720px){
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroActionsV341{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroActionsV341 .replaysHeroActionV335,
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroActionsV341 .replaysHeroActionV335.secondary{
    width:100%!important;
    min-width:0!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroStatsV341{
    grid-template-columns:1fr!important;
  }
}

/* ========================================================================
   v0.3.5.342 — REPLAYS HERO RAIL LIFT + DEPTH + SEARCH FIELD FIX
   Scope: /replays hero function rail + catalog search only.
   - lift action buttons / live counters so hero overflow can never clip them
   - +10% typography on the function rail
   - deeper tactile 3D treatment for both hero action buttons
   - remove legacy near-black fill from the catalog search input
   - preserve hero art, filters, cards, replay data and backend logic
   ======================================================================== */
@media (min-width:1041px){
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroActionsV341{
    top:184px!important;
    bottom:auto!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroStatsV341{
    top:178px!important;
    bottom:auto!important;
  }

  /* +10% text size from v341, with stronger tactile depth. */
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroActionsV341 .replaysHeroActionV335{
    font-size:11.6px!important;
    font-weight:900!important;
    border-width:1px!important;
    text-shadow:0 1px 0 rgba(255,255,255,.08)!important;
    transition:transform .14s ease,filter .14s ease,box-shadow .14s ease,border-color .14s ease,background .14s ease!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroActionsV341 .replaysHeroActionV335.primary{
    border-color:rgba(211,255,91,.86)!important;
    background:linear-gradient(180deg,#c5f83e 0%,#a9e51b 43%,#82c50b 100%)!important;
    box-shadow:
      0 4px 0 #5f9706,
      0 10px 17px -7px rgba(0,0,0,.88),
      0 0 18px rgba(169,229,27,.16),
      inset 0 1px 0 rgba(255,255,255,.58),
      inset 0 -2px 0 rgba(64,102,4,.30)!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroActionsV341 .replaysHeroActionV335.secondary{
    color:#c4ced1!important;
    border-color:rgba(205,220,225,.31)!important;
    background:linear-gradient(180deg,#34434a 0%,#26343a 46%,#172329 100%)!important;
    box-shadow:
      0 4px 0 #0c1519,
      0 10px 17px -7px rgba(0,0,0,.92),
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -2px 0 rgba(0,0,0,.44)!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroActionsV341 .replaysHeroActionV335:hover{
    transform:translateY(-2px)!important;
    filter:brightness(1.07)!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroActionsV341 .replaysHeroActionV335:active{
    transform:translateY(2px)!important;
    filter:brightness(.98)!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroActionsV341 .replaysHeroActionV335.primary:active{
    box-shadow:0 1px 0 #5f9706,0 5px 10px -6px rgba(0,0,0,.86),inset 0 1px 0 rgba(255,255,255,.42)!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroActionsV341 .replaysHeroActionV335.secondary:active{
    box-shadow:0 1px 0 #0c1519,0 5px 10px -6px rgba(0,0,0,.90),inset 0 1px 0 rgba(255,255,255,.08)!important;
  }

  /* +10% rail labels/values as well, while keeping current tile geometry. */
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroStatsV341 .replaysHeroStatCopyV335 small,
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroStatsV341 .replaysHeroStatCopyV335 em{
    font-size:7.2px!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroStatsV341 .replaysHeroStatCopyV335 strong{
    font-size:18.7px!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroStatsV341 .replaysHeroStatBestV341 strong{
    font-size:22px!important;
  }
}

/* Tablet: lift the two actions a little higher as well. */
@media (min-width:721px) and (max-width:1040px){
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroActionsV341{
    top:176px!important;
    bottom:auto!important;
  }
  .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroActionsV341 .replaysHeroActionV335{
    font-size:11px!important;
    box-shadow:0 4px 0 rgba(5,11,14,.72),0 9px 15px -8px rgba(0,0,0,.88),inset 0 1px 0 rgba(255,255,255,.10)!important;
  }
}

/* The legacy input itself had #0b1514, which created the black rectangle
   inside the otherwise steel search control. The outer field owns the fill. */
.replaysDiscoveryPage.approvedReplaysMockup.replaysMockupV335
.replaysCatalogToolbarV335 .replaySearchField input{
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  color:#e8eef0!important;
  caret-color:#a9e51b!important;
}
.replaysDiscoveryPage.approvedReplaysMockup.replaysMockupV335
.replaysCatalogToolbarV335 .replaySearchField input::placeholder{
  color:#9fadb1!important;
  opacity:.92!important;
}
.replaysDiscoveryPage.approvedReplaysMockup.replaysMockupV335
.replaysCatalogToolbarV335 .replaySearchField:focus-within{
  border-color:rgba(169,229,27,.46)!important;
  background:linear-gradient(180deg,#3b4b52 0%,#2c3b41 52%,#202c31 100%)!important;
  box-shadow:0 9px 14px -9px rgba(0,0,0,.82),0 0 0 1px rgba(169,229,27,.08),inset 0 1px 0 rgba(255,255,255,.11)!important;
}


/* ========================================================================
   v0.3.5.343 — REPLAYS HOME UI PARITY
   Scope: /replays hero controls only.
   Exact HOME visual language is reused for Upload, Replay count and Video.
   - Upload Replay matches HOME .button.primary geometry/iconography.
   - Random battle matches HOME secondary steel button family.
   - Replay counter matches HOME replay KPI: same approved PNG and number/label order.
   - Video matches HOME YouTube KPI and turns YouTube-red on hover/focus.
   - Right KPI rail is lowered by ~half a tile and keeps a compact 60px profile.
   - Best-today remains live/clickable, but is restyled into the same HOME KPI family.
   ======================================================================== */
body.replaysPageActive .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroActionsV343{
  position:absolute!important;
  left:32px!important;
  top:182px!important;
  z-index:12!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:0!important;
}
body.replaysPageActive .replaysHeroActionsV343 .replaysHomeActionV343{
  box-sizing:border-box!important;
  height:46px!important;
  min-height:46px!important;
  padding:0 20px!important;
  gap:10px!important;
  border-radius:5px!important;
  font-family:inherit!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
  white-space:nowrap!important;
  transition:transform .16s ease,filter .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease!important;
}
body.replaysPageActive .replaysHeroActionsV343 .replaysHomeActionV343 .homeHudIcon{
  display:inline-block!important;
  width:19px!important;
  height:19px!important;
  min-width:19px!important;
  flex:0 0 19px!important;
  background:currentColor!important;
  mask:var(--home-icon) center/contain no-repeat!important;
  -webkit-mask:var(--home-icon) center/contain no-repeat!important;
}
/* HOME primary button: same lime gradient/border, with the same compact geometry. */
body.replaysPageActive .replaysHeroActionsV343 .replaysHomeActionV343.primary{
  min-width:178px!important;
  background:linear-gradient(#86bd19,#577f0d)!important;
  border:1px solid #9bd327!important;
  color:#fff!important;
  box-shadow:0 8px 15px -9px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
body.replaysPageActive .replaysHeroActionsV343 .replaysHomeRandomV343{
  min-width:214px!important;
  color:#f0f4f4!important;
  border:1px solid rgba(225,233,235,.24)!important;
  background:linear-gradient(180deg,rgba(43,57,63,.96),rgba(23,34,39,.99))!important;
  box-shadow:0 9px 13px -8px rgba(0,0,0,.78),inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.44)!important;
}
body.replaysPageActive .replaysHeroActionsV343 .replaysHomeActionV343:hover{
  transform:translateY(-1px)!important;
  filter:brightness(1.08)!important;
}
body.replaysPageActive .replaysHeroActionsV343 .replaysHomeActionV343:active{
  transform:translateY(1px)!important;
  filter:brightness(.98)!important;
}

/* Right rail: same card language as HOME, lowered ~30px from v342. */
body.replaysPageActive .replaysMockupV335 .replaysHeroMockupV335 .replaysHomeMetricsV343{
  position:absolute!important;
  right:22px!important;
  top:204px!important;
  left:auto!important;
  z-index:12!important;
  width:500px!important;
  display:grid!important;
  grid-template-columns:142px 142px 200px!important;
  gap:8px!important;
  margin:0!important;
}
body.replaysPageActive .replaysHomeMetricsV343 .replaysHomeMetricV343{
  position:relative!important;
  box-sizing:border-box!important;
  min-width:0!important;
  width:auto!important;
  height:60px!important;
  min-height:60px!important;
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr)!important;
  column-gap:7px!important;
  align-items:center!important;
  padding:5px 9px!important;
  border:1px solid rgba(219,229,232,.24)!important;
  border-radius:7px!important;
  background:linear-gradient(180deg,rgba(39,52,58,.95),rgba(18,29,34,.98))!important;
  color:#eef3f3!important;
  text-decoration:none!important;
  cursor:pointer!important;
  overflow:hidden!important;
  box-shadow:0 11px 15px -10px rgba(0,0,0,.82),0 3px 7px -5px rgba(0,0,0,.68),inset 0 1px 0 rgba(255,255,255,.075),inset 0 -1px 0 rgba(0,0,0,.46)!important;
  backdrop-filter:blur(8px)!important;
  transition:transform .17s ease,border-color .17s ease,background .17s ease,box-shadow .17s ease!important;
  animation:replaysHomeMetricInV343 .30s cubic-bezier(.2,.8,.2,1) both;
}
body.replaysPageActive .replaysHomeMetricsV343 .replaysHomeMetricV343:nth-child(2){animation-delay:.045s}
body.replaysPageActive .replaysHomeMetricsV343 .replaysHomeMetricV343:nth-child(3){animation-delay:.09s}
@keyframes replaysHomeMetricInV343{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:translateY(0)}
}
body.replaysPageActive .replaysHomeMetricsV343 .replaysHomeMetricV343:hover,
body.replaysPageActive .replaysHomeMetricsV343 .replaysHomeMetricV343:focus-visible{
  transform:translateY(-2px)!important;
  outline:none!important;
  border-color:rgba(168,229,26,.38)!important;
  background:linear-gradient(180deg,rgba(47,62,66,.98),rgba(21,34,38,.99))!important;
  box-shadow:0 15px 22px -11px rgba(0,0,0,.88),0 5px 10px -7px rgba(0,0,0,.72),0 0 18px rgba(168,229,26,.045),inset 0 1px 0 rgba(255,255,255,.09)!important;
}
body.replaysPageActive .replaysHomeMetricsV343 .metricIcon{
  position:relative!important;
  width:48px!important;
  height:46px!important;
  min-width:48px!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
body.replaysPageActive .replaysHomeMetricsV343 .homeMetricPng{
  display:block!important;
  width:43px!important;
  height:43px!important;
  max-width:none!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:brightness(1.02) saturate(.96) drop-shadow(0 0 5px rgba(166,233,32,.20))!important;
  transition:filter .17s ease,transform .17s ease!important;
  pointer-events:none!important;
}
body.replaysPageActive .replaysHomeMetricsV343 .homeMetricPng-replays{width:44px!important;height:44px!important}
body.replaysPageActive .replaysHomeMetricsV343 .replaysHomeMetricV343:hover .homeMetricPng{
  transform:translateY(-1px)!important;
  filter:brightness(1.10) saturate(1.03) drop-shadow(0 0 7px rgba(166,233,32,.28))!important;
}
body.replaysPageActive .replaysHomeMetricsV343 .metricText{
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  line-height:1!important;
  text-align:left!important;
}
body.replaysPageActive .replaysHomeMetricsV343 .metricText strong{
  display:block!important;
  margin:0!important;
  font-size:20px!important;
  line-height:1!important;
  font-weight:950!important;
  font-variant-numeric:tabular-nums!important;
  color:#f3f6f5!important;
  white-space:nowrap!important;
}
body.replaysPageActive .replaysHomeMetricsV343 .metricText small{
  display:block!important;
  margin:5px 0 0!important;
  color:#b0bdc0!important;
  font-size:7px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
/* Replay KPI: same green hover behavior as HOME. */
body.replaysPageActive .replaysHomeMetricsV343 .heroMetricReplays:hover,
body.replaysPageActive .replaysHomeMetricsV343 .heroMetricReplays:focus-visible{
  border-color:rgba(169,229,27,.42)!important;
  background:linear-gradient(180deg,rgba(169,229,27,.07),rgba(7,18,20,.90))!important;
  box-shadow:0 15px 22px -11px rgba(0,0,0,.88),0 0 20px rgba(169,229,27,.07),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
/* Video KPI: exact HOME YouTube icon behavior + red hover. */
body.replaysPageActive .replaysHomeMetricsV343 .heroMetricVideo{
  --youtube-brand:#ff0033;
  --youtube-rgb:255,0,51;
}
body.replaysPageActive .replaysHomeMetricsV343 .homeMetricYoutube{
  width:35px!important;
  height:35px!important;
  display:block!important;
  background:#d5dfda!important;
  mask:url('/assets/ui/social/youtube.svg') center/contain no-repeat!important;
  -webkit-mask:url('/assets/ui/social/youtube.svg') center/contain no-repeat!important;
  filter:drop-shadow(0 0 5px rgba(166,233,32,.10))!important;
  transform:translateZ(0)!important;
  transition:background .18s ease,transform .18s ease,filter .18s ease!important;
  pointer-events:none!important;
}
body.replaysPageActive .replaysHomeMetricsV343 .heroMetricVideo:hover,
body.replaysPageActive .replaysHomeMetricsV343 .heroMetricVideo:focus-visible{
  border-color:rgba(var(--youtube-rgb),.50)!important;
  background:linear-gradient(180deg,rgba(var(--youtube-rgb),.075),rgba(18,18,22,.96))!important;
  box-shadow:0 15px 24px -11px rgba(0,0,0,.90),0 0 22px rgba(var(--youtube-rgb),.11),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body.replaysPageActive .replaysHomeMetricsV343 .heroMetricVideo:hover .homeMetricYoutube,
body.replaysPageActive .replaysHomeMetricsV343 .heroMetricVideo:focus-visible .homeMetricYoutube{
  background:var(--youtube-brand)!important;
  transform:scale(1.07) translateY(-1px) translateZ(0)!important;
  filter:drop-shadow(0 0 9px rgba(var(--youtube-rgb),.38))!important;
}
body.replaysPageActive .replaysHomeMetricsV343 .heroMetricVideo:hover .metricText small,
body.replaysPageActive .replaysHomeMetricsV343 .heroMetricVideo:focus-visible .metricText small{color:#ff6b83!important}
/* Best today: same steel tile family; extra eyebrow keeps context without growing the card. */
body.replaysPageActive .replaysHomeMetricsV343 .replaysHomeDamageMetricIconV343 .homeHudIcon{
  display:block!important;
  width:31px!important;
  height:31px!important;
  background:#d9e3df!important;
  mask:var(--home-icon) center/contain no-repeat!important;
  -webkit-mask:var(--home-icon) center/contain no-repeat!important;
  filter:drop-shadow(0 0 5px rgba(169,229,27,.18))!important;
}
body.replaysPageActive .replaysHomeMetricsV343 .replaysHomeBestTextV343{
  position:relative!important;
  padding-top:9px!important;
}
body.replaysPageActive .replaysHomeMetricsV343 .replaysHomeBestTextV343 em{
  position:absolute!important;
  left:0!important;
  top:0!important;
  margin:0!important;
  color:#c6d0d2!important;
  font-size:6.6px!important;
  line-height:1!important;
  font-style:normal!important;
  font-weight:850!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
body.replaysPageActive .replaysHomeMetricsV343 .replaysHomeBestV343 .metricText strong{color:#b7ef2d!important}

@media (min-width:721px) and (max-width:1040px){
  body.replaysPageActive .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroActionsV343{
    left:28px!important;top:174px!important;gap:9px!important;
  }
  body.replaysPageActive .replaysHeroActionsV343 .replaysHomeActionV343{height:44px!important;min-height:44px!important;padding:0 15px!important;font-size:10px!important}
  body.replaysPageActive .replaysHeroActionsV343 .replaysHomeActionV343.primary{min-width:165px!important}
  body.replaysPageActive .replaysHeroActionsV343 .replaysHomeRandomV343{min-width:190px!important}
  body.replaysPageActive .replaysMockupV335 .replaysHeroMockupV335 .replaysHomeMetricsV343{
    left:28px!important;right:28px!important;top:224px!important;width:auto!important;grid-template-columns:1fr 1fr 1.3fr!important;
  }
}
@media (max-width:720px){
  body.replaysPageActive .replaysMockupV335 .replaysHeroMockupV335 .replaysHeroActionsV343{
    position:relative!important;left:auto!important;top:auto!important;margin-top:18px!important;display:grid!important;grid-template-columns:1fr!important;width:100%!important;
  }
  body.replaysPageActive .replaysHeroActionsV343 .replaysHomeActionV343,
  body.replaysPageActive .replaysHeroActionsV343 .replaysHomeActionV343.primary,
  body.replaysPageActive .replaysHeroActionsV343 .replaysHomeRandomV343{width:100%!important;min-width:0!important}
  body.replaysPageActive .replaysMockupV335 .replaysHeroMockupV335 .replaysHomeMetricsV343{
    position:relative!important;left:auto!important;right:auto!important;top:auto!important;width:100%!important;margin-top:10px!important;grid-template-columns:1fr!important;
  }
}

/* v0.3.5.344 — REPLAYS HERO BEST DAMAGE TODAY ICON + LOGIC FIX
   Use the same approved damage PNG already used across battle/replay KPI UI. */
body.replaysPageActive .replaysHomeMetricsV343 .replaysHomeDamageMetricIconV343 .replaysHomeDamagePngV344{
  display:block!important;
  width:39px!important;
  height:39px!important;
  max-width:none!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:brightness(1.06) saturate(.98) drop-shadow(0 0 6px rgba(169,229,27,.18))!important;
  transition:transform .17s ease,filter .17s ease!important;
  pointer-events:none!important;
}
body.replaysPageActive .replaysHomeMetricsV343 .replaysHomeBestV343:hover .replaysHomeDamagePngV344,
body.replaysPageActive .replaysHomeMetricsV343 .replaysHomeBestV343:focus-visible .replaysHomeDamagePngV344{
  transform:translateY(-1px) scale(1.04)!important;
  filter:brightness(1.12) saturate(1.02) drop-shadow(0 0 8px rgba(169,229,27,.26))!important;
}


/* ========================================================================
   v0.3.5.345 — REPLAYS CARD MATERIAL DEPTH + SUBTLE PAPER TEXTURE POLISH
   Scope: /replays catalog cards only. Geometry remains unchanged.
   Adds a faint grey dusty/crumpled-paper material to lower UI panels only;
   battle/map artwork is intentionally untouched by the texture layer.
   ======================================================================== */
.replaysDiscoveryPage.approvedReplaysMockup{
  --rp-paper-noise:url('/assets/ui/replay-card-paper-v345.png');
}

/* Preserve the approved image area: no paper/noise layer on battle artwork. */
.replaysDiscoveryPage.approvedReplaysMockup .replayCard .art{
  background-blend-mode:normal!important;
}

/* Stronger permanent physical shell without changing width/height/padding. */
.replaysDiscoveryPage.approvedReplaysMockup .replayCard.approvedMockupCard{
  box-shadow:
    0 9px 0 -5px rgba(2,6,8,.98),
    0 19px 24px -11px rgba(0,0,0,.99),
    0 7px 11px -5px rgba(0,0,0,.92),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.66),
    inset 1px 0 0 rgba(255,255,255,.025),
    inset -1px 0 0 rgba(0,0,0,.18)!important;
}

/* Lower deck: very weak material mottling; children keep their own layers. */
.replaysDiscoveryPage.approvedReplaysMockup .replayCard .cardBody{
  background-color:#263239!important;
  background-image:
    var(--rp-paper-noise),
    radial-gradient(110% 78% at 18% 18%,rgba(222,228,229,.045),transparent 56%),
    radial-gradient(90% 70% at 82% 74%,rgba(0,0,0,.075),transparent 60%),
    linear-gradient(180deg,#313e45 0%,#28343a 38%,#202b31 74%,#192329 100%)!important;
  background-size:180px 180px,100% 100%,100% 100%,100% 100%!important;
  background-blend-mode:soft-light,soft-light,multiply,normal!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.62),
    inset 0 14px 22px -22px rgba(255,255,255,.24)!important;
}

/* KPI deck: grey dusty fibre + tiny wear marks, kept below text/icons. */
.replaysDiscoveryPage.approvedReplaysMockup .statsRow.cardHudStats{
  background-color:#27343a!important;
  background-image:
    var(--rp-paper-noise),
    radial-gradient(130% 95% at 10% 8%,rgba(232,237,238,.065),transparent 48%),
    repeating-linear-gradient(104deg,rgba(237,242,243,.018) 0 1px,transparent 1px 17px),
    linear-gradient(180deg,#334148 0%,#27343a 52%,#202b31 100%)!important;
  background-size:165px 165px,100% 100%,100% 100%,100% 100%!important;
  background-blend-mode:soft-light,soft-light,screen,normal!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 8px 12px -13px rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.78),
    0 7px 12px -10px rgba(0,0,0,.90)!important;
}

/* Award rail: slightly rougher than KPI, still only a 4–7% visual effect. */
.replaysDiscoveryPage.approvedReplaysMockup .cardAwards{
  background-color:#202c31!important;
  background-image:
    var(--rp-paper-noise),
    radial-gradient(110% 80% at 32% 20%,rgba(219,226,228,.050),transparent 52%),
    linear-gradient(180deg,#2b383e 0%,#222e33 48%,#1b262b 100%)!important;
  background-size:175px 175px,100% 100%,100% 100%!important;
  background-blend-mode:soft-light,soft-light,normal!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.068),
    inset 0 -1px 0 rgba(0,0,0,.72),
    0 6px 10px -10px rgba(0,0,0,.88)!important;
}

/* Service/footer rail: darkest layer so the card reads as three stacked plates. */
.replaysDiscoveryPage.approvedReplaysMockup .cardFoot{
  background-color:#1a252a!important;
  background-image:
    var(--rp-paper-noise),
    radial-gradient(120% 90% at 15% 15%,rgba(221,228,230,.042),transparent 54%),
    repeating-linear-gradient(8deg,rgba(255,255,255,.012) 0 1px,transparent 1px 23px),
    linear-gradient(180deg,#253239 0%,#1d292e 50%,#172126 100%)!important;
  background-size:185px 185px,100% 100%,100% 100%,100% 100%!important;
  background-blend-mode:soft-light,soft-light,screen,normal!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.072),
    inset 0 -1px 0 rgba(0,0,0,.62),
    inset 0 10px 18px -20px rgba(255,255,255,.20)!important;
}

/* Existing motion stays restrained, but material depth becomes clearer on hover. */
.replaysDiscoveryPage.approvedReplaysMockup .replayCard.approvedMockupCard:hover,
.replaysDiscoveryPage.approvedReplaysMockup .replayCard.approvedMockupCard:focus-visible{
  transform:translateY(-4px)!important;
  box-shadow:
    0 10px 0 -5px rgba(2,6,8,.98),
    0 24px 30px -12px rgba(0,0,0,.99),
    0 9px 13px -6px rgba(0,0,0,.94),
    0 0 18px rgba(169,229,27,.035),
    inset 0 1px 0 rgba(255,255,255,.23),
    inset 0 -1px 0 rgba(0,0,0,.67)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replayCard:hover .art,
.replaysDiscoveryPage.approvedReplaysMockup .replayCard:focus-visible .art{
  filter:saturate(1.025) contrast(1.045) brightness(1.025)!important;
}

/* Reduced-motion users keep the material, without the lift animation. */
@media (prefers-reduced-motion:reduce){
  .replaysDiscoveryPage.approvedReplaysMockup .replayCard.approvedMockupCard,
  .replaysDiscoveryPage.approvedReplaysMockup .replayCard.approvedMockupCard:hover,
  .replaysDiscoveryPage.approvedReplaysMockup .replayCard.approvedMockupCard:focus-visible{
    transition:none!important;
    transform:translateY(-1px)!important;
  }
}

/* ========================================================================
   v0.3.5.347 — BATTLE + PLAYER DUSTY PAPER PAGE BACKGROUND
   Scope: route background only. The approved battle/player UI itself is untouched.
   The supplied texture is used exactly as provided; no retouching or recoloring.
   ======================================================================== */
body.battlePageActive,
body.playerPageActive{
  background-color:#17130f!important;
  background-image:url('/assets/battle_player_dusty_paper_bg_v347.png')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
}

/* Mobile browsers handle fixed backgrounds inconsistently; preserve the same
   artwork and crop while allowing normal scrolling. */
@media (max-width:720px){
  body.battlePageActive,
  body.playerPageActive{
    background-attachment:scroll!important;
    background-position:center top!important;
  }
}

/* ========================================================================
   v0.3.5.348 — BATTLE + PLAYER DUSTY PAPER DEPTH SHADOWS
   Scope: shadow/depth only on the two routes that received the v347 paper.
   No geometry, colors, hero art, KPI/table/card content or application logic changes.
   The broad neutral/warm-black shadows make the existing UI sit physically above
   the dusty-paper background, matching the approved dusty-paper mockup direction.
   ======================================================================== */

/* BATTLE — hero, report frame and comments cast one calm layered shadow onto paper. */
body.battlePageActive .cinematicReplayPage > .cinematicHero{
  box-shadow:
    0 34px 74px -24px rgba(0,0,0,.92),
    0 15px 28px -16px rgba(0,0,0,.82),
    0 5px 10px -7px rgba(31,20,12,.64),
    0 0 0 1px rgba(255,255,255,.018) inset,
    inset 0 1px 0 rgba(255,255,255,.030)!important;
}
body.battlePageActive .cinematicReplayPage > .cinematicReportShell{
  box-shadow:
    0 30px 62px -24px rgba(0,0,0,.88),
    0 13px 24px -15px rgba(0,0,0,.78),
    0 4px 9px -7px rgba(35,23,14,.58),
    inset 0 1px 0 rgba(255,255,255,.026)!important;
}
body.battlePageActive .battleCommentsV319{
  box-shadow:
    0 28px 58px -24px rgba(0,0,0,.84),
    0 11px 22px -14px rgba(0,0,0,.72),
    0 4px 8px -7px rgba(36,23,14,.52),
    inset 0 1px 0 rgba(255,255,255,.025)!important;
}

/* PLAYER — same paper-contact shadow language for hero and archive surface. */
body.playerPageActive .playerProfileFinalMockup .playerProfileHero{
  box-shadow:
    0 34px 76px -24px rgba(0,0,0,.90),
    0 15px 29px -16px rgba(0,0,0,.80),
    0 5px 10px -7px rgba(34,22,13,.60),
    0 0 0 1px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -24px 48px rgba(0,0,0,.18),
    0 0 38px rgba(231,177,71,.035)!important;
}
body.playerPageActive .playerProfileFinalMockup .playerReplaySectionFinal{
  box-shadow:
    0 30px 64px -24px rgba(0,0,0,.86),
    0 12px 24px -15px rgba(0,0,0,.76),
    0 4px 9px -7px rgba(34,22,13,.54),
    inset 0 1px 0 rgba(255,255,255,.030)!important;
}

/* Keep depth elegant on small screens: shorter shadows, same hierarchy. */
@media (max-width:720px){
  body.battlePageActive .cinematicReplayPage > .cinematicHero,
  body.playerPageActive .playerProfileFinalMockup .playerProfileHero{
    box-shadow:
      0 22px 44px -20px rgba(0,0,0,.86),
      0 9px 18px -12px rgba(0,0,0,.70),
      inset 0 1px 0 rgba(255,255,255,.030)!important;
  }
  body.battlePageActive .cinematicReplayPage > .cinematicReportShell,
  body.battlePageActive .battleCommentsV319,
  body.playerPageActive .playerProfileFinalMockup .playerReplaySectionFinal{
    box-shadow:
      0 20px 38px -20px rgba(0,0,0,.80),
      0 8px 16px -12px rgba(0,0,0,.64),
      inset 0 1px 0 rgba(255,255,255,.024)!important;
  }
}

/* ========================================================================
   v0.3.5.349 — BATTLE DUSTY PAPER EDGE SHADOWS + HERO ROUNDING
   Scope: visual depth polish only. No battle data, layout, KPI, team tables,
   hero artwork, filters, controls or application logic changes.
   ======================================================================== */

/* Slightly darken the supplied dusty-paper background without modifying the asset. */
body.battlePageActive{
  background-color:#110e0b!important;
  background-image:
    linear-gradient(rgba(0,0,0,.13),rgba(0,0,0,.13)),
    url('/assets/battle_player_dusty_paper_bg_v347.png')!important;
  background-position:center center,center center!important;
  background-size:cover,cover!important;
  background-repeat:no-repeat,no-repeat!important;
  background-attachment:fixed,fixed!important;
}

/* Make the battle hero rounding clearly visible against the paper. */
body.battlePageActive .cinematicReplayPage > .cinematicHero.approvedReplayHero{
  border-radius:18px!important;
  overflow:hidden!important;
  box-shadow:
    0 0 30px 3px rgba(0,0,0,.58),
    0 0 12px rgba(0,0,0,.74),
    0 18px 38px -14px rgba(0,0,0,.88),
    0 -8px 22px -16px rgba(0,0,0,.72),
    10px 0 24px -18px rgba(0,0,0,.66),
    -10px 0 24px -18px rgba(0,0,0,.66),
    0 0 0 1px rgba(255,255,255,.022) inset,
    inset 0 1px 0 rgba(255,255,255,.032)!important;
}

/* The report surface also casts a real contact shadow on every edge, not only down. */
body.battlePageActive .cinematicReplayPage > .cinematicReportShell{
  box-shadow:
    0 0 27px 2px rgba(0,0,0,.54),
    0 0 10px rgba(0,0,0,.68),
    0 16px 34px -15px rgba(0,0,0,.84),
    0 -7px 19px -15px rgba(0,0,0,.64),
    9px 0 22px -18px rgba(0,0,0,.60),
    -9px 0 22px -18px rgba(0,0,0,.60),
    inset 0 1px 0 rgba(255,255,255,.026)!important;
}

body.battlePageActive .battleCommentsV319{
  box-shadow:
    0 0 24px 2px rgba(0,0,0,.50),
    0 0 9px rgba(0,0,0,.62),
    0 14px 30px -15px rgba(0,0,0,.80),
    0 -6px 18px -15px rgba(0,0,0,.58),
    8px 0 20px -18px rgba(0,0,0,.56),
    -8px 0 20px -18px rgba(0,0,0,.56),
    inset 0 1px 0 rgba(255,255,255,.024)!important;
}

/* Keep the same supplied paper on mobile, with lighter all-edge depth. */
@media (max-width:720px){
  body.battlePageActive{
    background-attachment:scroll,scroll!important;
    background-position:center top,center top!important;
  }
  body.battlePageActive .cinematicReplayPage > .cinematicHero.approvedReplayHero{
    border-radius:12px!important;
    box-shadow:
      0 0 20px 2px rgba(0,0,0,.54),
      0 12px 26px -14px rgba(0,0,0,.80),
      inset 0 1px 0 rgba(255,255,255,.026)!important;
  }
  body.battlePageActive .cinematicReplayPage > .cinematicReportShell,
  body.battlePageActive .battleCommentsV319{
    box-shadow:
      0 0 18px 1px rgba(0,0,0,.48),
      0 10px 22px -14px rgba(0,0,0,.74),
      inset 0 1px 0 rgba(255,255,255,.022)!important;
  }
}

/* ========================================================================
   v0.3.5.350 — PLAYER PAGE BATTLE WIDTH PARITY + DUSTY PAPER EDGE SHADOWS
   Scope: player-profile canvas/depth parity only.
   Preserve all approved player content, hero artwork, KPI/replay data and logic.
   ======================================================================== */

/* Use the exact same gently darkened dusty-paper treatment as the battle page. */
body.playerPageActive{
  background-color:#110e0b!important;
  background-image:
    linear-gradient(rgba(0,0,0,.13),rgba(0,0,0,.13)),
    url('/assets/battle_player_dusty_paper_bg_v347.png')!important;
  background-position:center center,center center!important;
  background-size:cover,cover!important;
  background-repeat:no-repeat,no-repeat!important;
  background-attachment:fixed,fixed!important;
}

/* Desktop/tablet: player profile now sits on the exact battle-page canvas rail.
   Remove only the generic pageShell side padding so HERO/archive edges line up
   with the 1672px / 48px-gutter battle container. */
@media (min-width:821px){
  body.playerPageActive .playerProfilePage.playerProfileFinalMockup{
    width:calc(100% - 48px)!important;
    max-width:1672px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
}

/* Profile HERO: same rounded, all-edge contact shadow language as battle HERO. */
body.playerPageActive .playerProfileFinalMockup .playerProfileHero.playerProfileHeroFinal{
  border-radius:18px!important;
  overflow:hidden!important;
  box-shadow:
    0 0 30px 3px rgba(0,0,0,.58),
    0 0 12px rgba(0,0,0,.74),
    0 18px 38px -14px rgba(0,0,0,.88),
    0 -8px 22px -16px rgba(0,0,0,.72),
    10px 0 24px -18px rgba(0,0,0,.66),
    -10px 0 24px -18px rgba(0,0,0,.66),
    0 0 0 1px rgba(255,255,255,.022) inset,
    inset 0 1px 0 rgba(255,255,255,.040),
    inset 0 -24px 48px rgba(0,0,0,.18)!important;
}

/* Replay archive: real depth on top/right/bottom/left, matching battle report. */
body.playerPageActive .playerProfileFinalMockup .playerReplaySectionFinal{
  box-shadow:
    0 0 27px 2px rgba(0,0,0,.54),
    0 0 10px rgba(0,0,0,.68),
    0 16px 34px -15px rgba(0,0,0,.84),
    0 -7px 19px -15px rgba(0,0,0,.64),
    9px 0 22px -18px rgba(0,0,0,.60),
    -9px 0 22px -18px rgba(0,0,0,.60),
    inset 0 1px 0 rgba(255,255,255,.026)!important;
}

/* Mobile keeps the current profile geometry; only retain the same paper/depth
   direction with lighter rendering for performance and visual balance. */
@media (max-width:820px){
  body.playerPageActive{
    background-attachment:scroll,scroll!important;
    background-position:center top,center top!important;
  }
  body.playerPageActive .playerProfileFinalMockup .playerProfileHero.playerProfileHeroFinal{
    border-radius:12px!important;
    box-shadow:
      0 0 20px 2px rgba(0,0,0,.54),
      0 12px 26px -14px rgba(0,0,0,.80),
      inset 0 1px 0 rgba(255,255,255,.028),
      inset 0 -18px 36px rgba(0,0,0,.16)!important;
  }
  body.playerPageActive .playerProfileFinalMockup .playerReplaySectionFinal{
    box-shadow:
      0 0 18px 1px rgba(0,0,0,.48),
      0 10px 22px -14px rgba(0,0,0,.74),
      inset 0 1px 0 rgba(255,255,255,.022)!important;
  }
}

/* ========================================================================
   v0.3.5.354 — REPLAYS CINEMATIC GRADIENT BACKGROUND REWORK
   Scope: the /replays document canvas only.
   Pure CSS atmosphere replaces the full-screen steel bitmap. Hero, controls,
   replay cards, their material layers, geometry and application logic remain
   untouched. The final selector group matches every legacy replay-canvas
   state so older .334/.351/.352/.353 rules cannot return after render.
   ======================================================================== */
html:has(.replaysDiscoveryPage.approvedReplaysMockup),
body.replaysPageActive,
body:has(.replaysDiscoveryPage.approvedReplaysMockup),
body.replaysPageActive:has(.replaysDiscoveryPage.approvedReplaysMockup){
  background-color:#050a0d!important;
  background-image:
    linear-gradient(90deg,
      rgba(2,6,8,.76) 0%,
      rgba(3,8,11,.47) 9%,
      rgba(4,10,13,.13) 27%,
      rgba(4,10,13,0) 43%,
      rgba(4,10,13,0) 57%,
      rgba(4,10,13,.14) 75%,
      rgba(3,8,11,.50) 91%,
      rgba(2,6,8,.78) 100%),
    radial-gradient(ellipse 56vw 620px at 50% 340px,
      rgba(152,177,188,.105) 0%,
      rgba(92,124,138,.052) 39%,
      rgba(37,62,73,.020) 61%,
      transparent 79%),
    radial-gradient(ellipse 42vw 430px at 12% 120px,
      rgba(67,105,123,.135) 0%,
      rgba(43,78,94,.052) 44%,
      transparent 76%),
    radial-gradient(ellipse 38vw 470px at 88% 315px,
      rgba(101,129,142,.105) 0%,
      rgba(64,92,104,.037) 48%,
      transparent 78%),
    radial-gradient(ellipse 34vw 300px at 53% 545px,
      rgba(130,151,72,.040) 0%,
      rgba(91,111,51,.015) 48%,
      transparent 78%),
    linear-gradient(180deg,
      #050a0d 0,
      #071015 180px,
      #0c171d 510px,
      #111d23 850px,
      #0d181e 1200px,
      #0a1217 1660px,
      #081015 100%)!important;
  background-position:center top!important;
  background-size:auto!important;
  background-repeat:no-repeat!important;
  background-attachment:scroll!important;
}

/* Retire the legacy fixed steel-light overlay; all light shaping now lives in
   the controlled gradient stack above. */
body.replaysPageActive::before,
body:has(.replaysDiscoveryPage.approvedReplaysMockup)::before,
body.replaysPageActive:has(.replaysDiscoveryPage.approvedReplaysMockup)::before{
  background:none!important;
  opacity:0!important;
}

/* Existing SVG fractal noise is retained as a tiny fixed tile. At this route
   opacity it only breaks gradient banding and never reads as a texture. */
body.replaysPageActive .noise,
body:has(.replaysDiscoveryPage.approvedReplaysMockup) .noise{
  opacity:.028!important;
}

@media (max-width:720px){
  html:has(.replaysDiscoveryPage.approvedReplaysMockup),
  body.replaysPageActive,
  body:has(.replaysDiscoveryPage.approvedReplaysMockup),
  body.replaysPageActive:has(.replaysDiscoveryPage.approvedReplaysMockup){
    background-color:#060d11!important;
    background-image:
      linear-gradient(90deg,
        rgba(2,6,8,.42) 0%,
        transparent 28%,
        transparent 72%,
        rgba(2,6,8,.46) 100%),
      radial-gradient(ellipse 92vw 380px at 50% 265px,
        rgba(111,142,154,.080) 0%,
        rgba(55,85,97,.026) 52%,
        transparent 80%),
      linear-gradient(180deg,
        #050a0d 0,
        #071015 150px,
        #0c171d 440px,
        #0d181e 820px,
        #091217 1300px,
        #071015 100%)!important;
    background-position:center top!important;
    background-size:auto!important;
    background-repeat:no-repeat!important;
    background-attachment:scroll!important;
  }
  body.replaysPageActive .noise,
  body:has(.replaysDiscoveryPage.approvedReplaysMockup) .noise{
    opacity:.018!important;
  }
}

/* =====================================================================
   v0.3.5.355 — REPLAY CARDS CINEMATIC DEPTH + COLOR ACCENT
   ===================================================================== */
body.replaysPageActive .replaysDiscoveryPage .replayCard{
  position:relative!important;
  isolation:isolate!important;
  border-color:rgba(207,224,228,.24)!important;
  background:linear-gradient(155deg,rgba(28,43,47,.98),rgba(9,19,23,.99) 72%)!important;
  box-shadow:0 21px 48px rgba(0,0,0,.36),0 7px 17px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.055),inset 0 -1px 0 rgba(0,0,0,.32)!important;
}
body.replaysPageActive .replaysDiscoveryPage .replayCard::after{
  content:""!important;
  position:absolute!important;
  z-index:7!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:linear-gradient(135deg,rgba(255,255,255,.034),transparent 25%,transparent 74%,rgba(0,0,0,.19))!important;
  box-shadow:inset 0 0 34px rgba(0,0,0,.12)!important;
}
body.replaysPageActive .replaysDiscoveryPage .replayCard:hover{
  transform:translateY(-4px)!important;
  border-color:rgba(185,226,111,.44)!important;
  box-shadow:0 29px 62px rgba(0,0,0,.44),0 0 27px rgba(169,229,27,.032),inset 0 1px 0 rgba(255,255,255,.068)!important;
}
body.replaysPageActive .replaysDiscoveryPage .replayCard .art::after{
  background:
    linear-gradient(90deg,rgba(2,6,8,.26),transparent 18%,transparent 79%,rgba(2,6,8,.28)),
    linear-gradient(180deg,rgba(2,6,8,.03) 48%,rgba(2,7,9,.58) 100%)!important;
}
body.replaysPageActive .replaysDiscoveryPage .replayCard .cardStats{
  background:linear-gradient(180deg,rgba(37,54,59,.96),rgba(22,38,43,.98))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.038),inset 0 -1px 0 rgba(0,0,0,.34)!important;
}
body.replaysPageActive .replaysDiscoveryPage .replayCard .awards,
body.replaysPageActive .replaysDiscoveryPage .replayCard .cardBottom{
  background:linear-gradient(180deg,rgba(24,41,45,.98),rgba(13,27,31,.99))!important;
}

/* =====================================================================
   v0.3.5.356 FIX1 — HOME CINEMATIC GRADIENT VISUAL LIFT
   ===================================================================== */
body.homePageActive{
  background-color:#081116!important;
  background-image:
    linear-gradient(90deg,rgba(2,6,8,.64) 0%,rgba(2,7,9,.16) 26%,transparent 42%,transparent 58%,rgba(2,7,9,.17) 74%,rgba(2,6,8,.68) 100%),
    radial-gradient(ellipse 1080px 560px at 50% 340px,rgba(128,156,165,.121) 0%,rgba(59,92,104,.046) 57%,transparent 84%),
    radial-gradient(ellipse 920px 520px at 50% 790px,rgba(78,107,117,.035) 0%,transparent 80%),
    radial-gradient(ellipse 760px 360px at 84% 350px,rgba(169,135,62,.044) 0%,transparent 77%),
    linear-gradient(180deg,#071015 0,#0a151a 145px,#102028 420px,#122229 790px,#0d191f 1240px,#081116 1840px,#071015 100%)!important;
  background-position:center top!important;
  background-size:auto!important;
  background-repeat:no-repeat!important;
  background-attachment:scroll!important;
}
body.homePageActive::before{background:none!important;opacity:0!important}
body.homePageActive .noise{opacity:.024!important}
@media (max-width:760px){
  body.homePageActive{
    background-image:
      linear-gradient(90deg,rgba(2,6,8,.29),transparent 27%,transparent 73%,rgba(2,6,8,.32)),
      radial-gradient(ellipse 108vw 520px at 50% 340px,rgba(128,156,165,.121),rgba(59,92,104,.046) 57%,transparent 84%),
      radial-gradient(ellipse 94vw 520px at 50% 790px,rgba(78,107,117,.035),transparent 80%),
      radial-gradient(ellipse 76vw 360px at 84% 350px,rgba(169,135,62,.044),transparent 77%),
      linear-gradient(180deg,#071015 0,#0a151a 145px,#102028 420px,#122229 790px,#0d191f 1240px,#081116 100%)!important;
  }
  body.homePageActive .noise{opacity:.016!important}
}

/* =====================================================================
   v0.3.5.357 — VIDEO HUB CINEMATIC THEATER EXPERIENCE
   ===================================================================== */
html:has(body.videosPageActive){background:#04080a!important}
body.videosPageActive{
  background-color:#061015!important;
  background-image:
    linear-gradient(90deg,rgba(2,6,8,.76),rgba(3,8,11,.24) 20%,transparent 38%,transparent 62%,rgba(3,8,11,.27) 80%,rgba(2,6,8,.78)),
    radial-gradient(ellipse 92vw 580px at 50% 265px,rgba(98,128,139,.105),rgba(44,76,89,.045) 54%,transparent 82%),
    radial-gradient(ellipse 54vw 430px at 78% 285px,rgba(117,135,143,.05),transparent 76%),
    radial-gradient(ellipse 48vw 390px at 35% 480px,rgba(124,151,69,.025),transparent 78%),
    linear-gradient(180deg,#050b0e 0,#09141a 210px,#0c1920 650px,#09151a 1180px,#060e12 100%)!important;
  background-position:center top!important;
  background-size:auto!important;
  background-repeat:no-repeat!important;
  background-attachment:scroll!important;
}
body.videosPageActive::before{background:none!important;opacity:0!important}
body.videosPageActive .noise{opacity:.022!important;mix-blend-mode:soft-light!important}

.videoHubPageApproved{
  position:relative!important;z-index:1!important;
  width:min(1500px,calc(100vw - 48px))!important;max-width:1500px!important;
  margin:16px auto 72px!important;
}
.videoHubHeroApproved{
  height:430px!important;min-height:430px!important;overflow:hidden!important;
  border:1px solid rgba(205,222,226,.20)!important;border-radius:11px!important;
  background-size:cover!important;background-position:center 48%!important;
  box-shadow:0 34px 90px rgba(0,0,0,.36),0 8px 24px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.videoHubHeroApproved::after{
  content:""!important;display:block!important;position:absolute!important;z-index:1!important;
  inset:auto 0 0!important;height:42%!important;pointer-events:none!important;
  background:linear-gradient(180deg,transparent,rgba(3,8,10,.19) 76%,rgba(3,8,10,.42))!important;
}
.videoHubHeroShadeApproved,.videoHubHeroGlowApproved{display:none!important}
.videoHubHeroCopyApproved{
  z-index:3!important;width:min(610px,43%)!important;max-width:43%!important;padding:68px 0 0 38px!important;
}
.videoHubHeroCopyApproved .eyebrow{font-size:9.5px!important;letter-spacing:.19em!important;color:#d1d9d5!important;text-shadow:0 2px 10px rgba(0,0,0,.75)!important}
.videoHubHeroCopyApproved h1{margin:14px 0 13px!important;font-size:clamp(44px,3.45vw,58px)!important;line-height:.92!important;letter-spacing:-.035em!important;text-shadow:0 5px 24px rgba(0,0,0,.68)!important}
.videoHubHeroCopyApproved p{max-width:480px!important;color:#ced7d3!important;font-size:12px!important;line-height:1.55!important;text-shadow:0 2px 12px rgba(0,0,0,.82)!important}
.videoHubCount{margin-top:22px!important;min-height:50px!important;padding:0 17px!important;border-color:rgba(213,228,231,.18)!important;border-radius:6px!important;background:linear-gradient(180deg,rgba(7,15,17,.88),rgba(4,10,12,.94))!important;box-shadow:0 14px 30px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.04)!important}
.videoHeroSideApproved{z-index:4!important;top:14px!important;right:24px!important;bottom:auto!important;width:390px!important;gap:9px!important}
.videoFeaturedCardApproved{
  border-color:rgba(222,190,87,.50)!important;border-radius:9px!important;
  background:linear-gradient(160deg,rgba(18,22,21,.975),rgba(5,10,11,.985))!important;
  box-shadow:0 26px 60px rgba(0,0,0,.48),0 0 30px rgba(214,169,52,.045),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.videoFeaturedCardApproved:hover{transform:translateY(-2px)!important;border-color:rgba(238,204,101,.74)!important;box-shadow:0 31px 70px rgba(0,0,0,.54),0 0 34px rgba(214,169,52,.065)!important}
.videoFeaturedLabel{height:38px!important;padding:0 13px!important;font-size:9px!important;letter-spacing:.08em!important;color:#edcf73!important;background:linear-gradient(90deg,rgba(83,62,13,.32),transparent)!important}
.videoFeaturedThumb{width:calc(100% - 18px)!important;margin:0 9px!important;border-radius:6px!important;border-color:rgba(255,255,255,.105)!important;box-shadow:0 14px 34px rgba(0,0,0,.30)!important}
.videoFeaturedThumb::after{background:linear-gradient(180deg,rgba(0,0,0,.01),rgba(1,5,7,.02) 52%,rgba(1,5,7,.38))!important}
.videoFeaturedThumb .videoYoutubePlay.compact{transform:translate(-50%,-50%) scale(.90)!important}
.videoFeaturedCopy{padding:11px 14px 13px!important}
.videoFeaturedCopy strong{min-height:36px!important;font-size:14px!important;line-height:1.28!important;color:#f1f4f2!important}
.videoFeaturedStatsRow{gap:16px!important;margin-top:7px!important}.videoFeaturedStatsRow small{font-size:9.5px!important;color:#aeb9b4!important}
.videoFeaturedReplayLine{font-size:9px!important;color:#aab5b0!important}.videoFeaturedReplayLine b{font-size:9.5px!important;color:#d9bc5d!important}
.videoPromoteCard{min-height:54px!important;border-color:rgba(199,218,222,.16)!important;border-radius:7px!important;background:linear-gradient(180deg,rgba(12,23,26,.94),rgba(5,12,14,.97))!important;box-shadow:0 15px 34px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.035)!important}

.videoHubToolbarApproved{
  min-height:66px!important;margin-top:14px!important;padding:10px!important;gap:10px!important;
  border:1px solid rgba(205,222,226,.18)!important;border-radius:9px!important;
  background:linear-gradient(180deg,rgba(20,35,40,.92),rgba(8,18,22,.96))!important;
  box-shadow:0 20px 48px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.videoHubSearchApproved,.videoHubSort,.videoHubModes{border-color:rgba(207,224,228,.15)!important;background:rgba(5,12,15,.70)!important}
.videoHubSearchApproved{min-height:44px!important;border-radius:6px!important}.videoHubSearchApproved input{font-size:11px!important}
.videoHubModes button{min-height:42px!important;font-size:10px!important;color:#aab5b2!important}
.videoHubModes button.active{color:#eff5e9!important;border-color:rgba(169,229,27,.52)!important;background:linear-gradient(180deg,rgba(123,174,21,.38),rgba(66,101,9,.25))!important}
.videoHubSort{min-height:44px!important;font-size:10px!important;border-radius:6px!important}

.videoHubGridApproved{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;margin-top:16px!important}
.videoHubCardApproved{
  position:relative!important;overflow:hidden!important;border:1px solid rgba(204,221,225,.18)!important;border-radius:9px!important;
  background:linear-gradient(158deg,rgba(23,37,41,.98),rgba(8,17,21,.99) 72%)!important;
  box-shadow:0 19px 44px rgba(0,0,0,.29),0 6px 14px rgba(0,0,0,.19),inset 0 1px 0 rgba(255,255,255,.042)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.videoHubCardApproved::after{content:""!important;position:absolute!important;inset:0!important;z-index:0!important;pointer-events:none!important;border-radius:inherit!important;background:linear-gradient(135deg,rgba(255,255,255,.026),transparent 28%,transparent 74%,rgba(0,0,0,.14))!important}
.videoHubCardApproved>*{position:relative!important;z-index:1!important}
.videoHubCardApproved:hover{transform:translateY(-4px)!important;border-color:rgba(179,222,104,.39)!important;box-shadow:0 27px 58px rgba(0,0,0,.38),0 0 25px rgba(169,229,27,.025),inset 0 1px 0 rgba(255,255,255,.055)!important}
.videoHubThumbApproved{overflow:hidden!important;background:#020607!important;border-bottom:1px solid rgba(205,222,226,.13)!important}
.videoHubThumbApproved::after{background:linear-gradient(90deg,rgba(1,5,7,.22),transparent 18%,transparent 78%,rgba(1,5,7,.24)),linear-gradient(180deg,rgba(1,4,5,.02) 48%,rgba(1,5,7,.60))!important}
.videoHubThumbApproved img{filter:saturate(.94) contrast(1.055) brightness(.92)!important;transition:transform .26s ease,filter .26s ease!important}
.videoHubCardApproved:hover .videoHubThumbApproved img{transform:scale(1.025)!important;filter:saturate(1.05) contrast(1.045) brightness(.99)!important}
.videoYoutubePlay{width:54px!important;height:38px!important;border-radius:10px!important;border:1px solid rgba(255,255,255,.14)!important;background:linear-gradient(180deg,#e4473c,#b91f19)!important;box-shadow:0 12px 28px rgba(0,0,0,.46),0 0 18px rgba(224,54,44,.20),inset 0 1px 0 rgba(255,255,255,.18)!important}
.videoHubCardBodyApproved{padding:13px 13px 12px!important}.videoHubCardBodyApproved>strong{min-height:40px!important;color:#eef3f1!important;font-size:13.5px!important;line-height:1.35!important}
.videoCardStatsRow{margin-top:8px!important;gap:7px!important}.videoCardStatsRow small,.videoCardStatsRow span{font-size:9.5px!important}
.videoReplayMetaLine{min-height:20px!important;margin-top:8px!important;color:#aab5b0!important;font-size:9.6px!important;line-height:1.25!important}.videoReplayMetaLine b{color:#d5b95d!important;font-size:9.8px!important}
.videoCardBottomRow{min-height:37px!important;margin-top:11px!important;padding-top:10px!important;border-top-color:rgba(204,221,225,.10)!important}
.videoWatchAction,.videoReplayAction{min-height:31px!important;padding:0 10px!important;border-radius:5px!important;font-size:8.5px!important}
.videoWatchAction{color:#eaf4df!important;border-color:rgba(169,229,27,.36)!important;background:linear-gradient(180deg,rgba(106,153,16,.28),rgba(44,75,7,.25))!important}
.videoReplayAction{color:#e3c96f!important;border-color:rgba(218,180,70,.27)!important;background:rgba(68,51,10,.18)!important}

.videoDetailPageApproved{
  position:relative!important;isolation:isolate!important;width:min(1600px,calc(100vw - 48px))!important;max-width:1600px!important;margin:18px auto 78px!important;
}
.videoDetailPageApproved::before{
  content:""!important;position:fixed!important;z-index:-2!important;left:-7vw!important;right:-7vw!important;top:56px!important;height:min(72vh,760px)!important;pointer-events:none!important;opacity:.23!important;
  background-image:linear-gradient(180deg,rgba(4,9,12,.35),rgba(4,9,12,.48) 55%,#061015),linear-gradient(90deg,#061015,transparent 24%,transparent 76%,#061015),var(--video-ambient-image)!important;
  background-position:center!important;background-size:cover!important;filter:blur(48px) saturate(.72) brightness(.62)!important;transform:scale(1.11)!important;
}
.videoDetailPageApproved::after{content:""!important;position:fixed!important;z-index:-1!important;inset:60px 0 auto!important;height:720px!important;pointer-events:none!important;background:radial-gradient(ellipse 58vw 520px at 50% 22%,rgba(134,160,170,.095),transparent 72%),linear-gradient(180deg,transparent,rgba(6,16,21,.14) 58%,#061015)!important}
.videoDetailLayoutApproved{grid-template-columns:minmax(0,1fr) 390px!important;gap:20px!important;align-items:start!important}
.videoDetailMainApproved,.videoDetailSideApproved{gap:13px!important}
.videoPlayerFrameApproved{overflow:hidden!important;border:1px solid rgba(219,232,235,.25)!important;border-radius:11px!important;background:#000!important;box-shadow:0 42px 110px rgba(0,0,0,.55),0 15px 38px rgba(0,0,0,.38),0 0 0 1px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.055)!important}
.videoDetailInfoApproved{padding:18px 19px!important;gap:15px!important;border-color:rgba(207,224,228,.18)!important;border-radius:9px!important;background:linear-gradient(155deg,rgba(21,35,39,.96),rgba(7,16,20,.985))!important;box-shadow:0 22px 52px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04)!important}
.videoDetailInfoCopy .eyebrow{font-size:9px!important;color:#b6ea43!important}.videoDetailInfoCopy h1{margin:9px 0 10px!important;color:#f2f5f3!important;font-size:25px!important;line-height:1.22!important;letter-spacing:-.015em!important}
.videoDetailMetaInline{gap:11px!important;color:#98a7a2!important;font-size:10px!important}.videoDetailMetaInline strong{font-size:10.5px!important;color:#dfe6e2!important}
.videoDetailActionsApproved{gap:7px!important}.videoDetailAction{min-height:42px!important;padding:0 14px!important;border-radius:6px!important;font-size:9.5px!important;background:linear-gradient(180deg,rgba(17,29,32,.98),rgba(7,15,18,.99))!important;box-shadow:0 8px 19px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.03)!important}
.videoDetailActionYoutube{border-color:rgba(227,71,60,.40)!important;color:#f3e8e6!important;background:linear-gradient(180deg,rgba(77,28,25,.64),rgba(27,14,14,.72))!important}
.videoDetailActionReplay{border-color:rgba(220,184,73,.33)!important;color:#e7cd78!important;background:linear-gradient(180deg,rgba(75,57,14,.34),rgba(25,20,9,.42))!important}
.videoDetailCommentAction{border-color:rgba(169,229,27,.58)!important;color:#edf6e4!important;background:linear-gradient(180deg,#719f16,#4a700a)!important}
.videoDetailReplayWideCard,.videoDetailRelatedPanel,.videoYoutubeCommentsPanel{border-color:rgba(207,224,228,.18)!important;border-radius:9px!important;background:linear-gradient(155deg,rgba(20,33,37,.965),rgba(7,16,19,.985))!important;box-shadow:0 22px 52px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.038)!important}
.videoDetailReplayWideCard{border-color:rgba(192,217,99,.46)!important}.videoDetailReplayWideCard:hover{border-color:rgba(190,232,91,.72)!important;box-shadow:0 27px 58px rgba(0,0,0,.38),0 0 24px rgba(169,229,27,.04)!important}
.videoDetailSideHead{border-bottom-color:rgba(207,224,228,.09)!important}.videoDetailSideHead strong{color:#e5ebe8!important;font-size:10px!important}
.videoDetailRelatedList{padding:5px 12px 10px!important}.videoDetailRelatedItem{min-height:102px!important;padding:11px 0!important;grid-template-columns:150px minmax(0,1fr)!important;gap:12px!important;border-bottom-color:rgba(207,224,228,.09)!important}.videoDetailRelatedThumb{width:150px!important;border-radius:6px!important;box-shadow:0 8px 18px rgba(0,0,0,.26)!important}
.videoDetailRelatedItem strong{font-size:11px!important;line-height:1.34!important;color:#eaf0ed!important}.videoDetailRelatedItem small{font-size:8.7px!important;color:#a7b2ad!important}.videoDetailRelatedItem em{font-size:8.2px!important;color:#7f8e88!important}
.videoYoutubeCommentsPanel{margin-top:2px!important;overflow:hidden!important}.videoYoutubeCommentsHead{min-height:60px!important;padding:0 17px!important;border-bottom-color:rgba(207,224,228,.10)!important;background:linear-gradient(180deg,rgba(20,34,38,.78),rgba(10,21,24,.58))!important}
.videoYoutubeCommentsHead strong{font-size:10.5px!important;color:#edf2ef!important}.videoYoutubeCommentsHead span{font-size:8.5px!important;color:#8d9b96!important}.videoCommentSort button{height:34px!important;padding:0 13px!important;border-radius:5px!important;font-size:8.5px!important;background:rgba(4,11,13,.70)!important}
.videoYoutubeCommentRow{min-height:106px!important;padding:16px 17px!important;border-bottom-color:rgba(207,224,228,.085)!important}.videoYoutubeCommentRow:hover{background:rgba(118,151,160,.025)!important}.videoYoutubeCommentBody p{font-size:10.2px!important;line-height:1.58!important;color:#b8c3be!important}

@media (max-width:1280px){
  .videoHubPageApproved,.videoDetailPageApproved{width:calc(100vw - 36px)!important}
  .videoHubGridApproved{grid-template-columns:repeat(3,minmax(0,1fr))!important}.videoHeroSideApproved{width:350px!important}
  .videoDetailLayoutApproved{grid-template-columns:minmax(0,1fr) 350px!important;gap:14px!important}.videoDetailRelatedItem{grid-template-columns:132px minmax(0,1fr)!important}.videoDetailRelatedThumb{width:132px!important}
}
@media (max-width:980px){
  .videoHubPageApproved,.videoDetailPageApproved{width:calc(100vw - 24px)!important;margin-top:12px!important}
  .videoHubHeroApproved{height:auto!important;min-height:590px!important;background-position:58% center!important}.videoHubHeroCopyApproved{width:calc(100% - 32px)!important;max-width:620px!important;padding:30px 0 0 20px!important}
  .videoHeroSideApproved{left:18px!important;right:18px!important;top:auto!important;bottom:18px!important;width:auto!important;max-width:440px!important}.videoFeaturedCopy strong{min-height:0!important}
  .videoHubGridApproved{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .videoDetailLayoutApproved{grid-template-columns:1fr!important;gap:14px!important}.videoDetailSideApproved{grid-template-columns:1fr 1fr!important;gap:13px!important}.videoDetailPageApproved::before{height:54vh!important;filter:blur(34px) saturate(.68) brightness(.58)!important}
}
@media (max-width:700px){
  body.videosPageActive{background-image:linear-gradient(90deg,rgba(2,6,8,.38),transparent 30%,transparent 70%,rgba(2,6,8,.42)),radial-gradient(ellipse 108vw 470px at 50% 280px,rgba(89,117,127,.085),transparent 80%),linear-gradient(180deg,#050b0e,#09151a 300px,#0a171c 790px,#061015 100%)!important}
  body.videosPageActive .noise{opacity:.015!important}.videoHubPageApproved,.videoDetailPageApproved{width:calc(100vw - 18px)!important;margin:9px auto 48px!important}
  .videoHubHeroApproved{min-height:600px!important;border-radius:8px!important;background-position:59% center!important}.videoHubHeroCopyApproved{width:calc(100% - 26px)!important;max-width:none!important;padding:24px 0 0 14px!important}.videoHubHeroCopyApproved h1{font-size:36px!important}.videoHubHeroCopyApproved p{max-width:78%!important;font-size:10.5px!important}
  .videoHeroSideApproved{left:12px!important;right:12px!important;bottom:12px!important;max-width:none!important}.videoFeaturedLabel{height:34px!important}.videoFeaturedCopy strong{font-size:12.5px!important}.videoPromoteCard{min-height:48px!important}
  .videoHubToolbarApproved{grid-template-columns:1fr!important;gap:8px!important;padding:8px!important}.videoHubModes{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important}.videoHubSort{width:100%!important}.videoHubGridApproved{grid-template-columns:1fr!important;gap:12px!important}.videoHubCardBodyApproved>strong{min-height:0!important;font-size:14px!important}
  .videoDetailPageApproved::before,.videoDetailPageApproved::after{display:none!important}.videoDetailSideApproved{grid-template-columns:1fr!important}.videoDetailInfoApproved{padding:14px!important}.videoDetailInfoCopy h1{font-size:19px!important}.videoDetailActionsApproved{grid-template-columns:1fr!important}.videoDetailRelatedItem{grid-template-columns:112px minmax(0,1fr)!important}.videoDetailRelatedThumb{width:112px!important}
}
@media (prefers-reduced-motion:reduce){.videoHubCardApproved,.videoFeaturedCardApproved,.videoHubThumbApproved img{transition:none!important}}

/* =====================================================================
   v0.3.5.357 FIX1 — VIDEO READABILITY + LATEST VIDEO HERO LOCK
   Final VIDEO-only lift. Hero art and page geometry remain unchanged.
   ===================================================================== */
body.videosPageActive{
  background-image:
    linear-gradient(90deg,rgba(2,6,8,.73),rgba(3,8,11,.20) 20%,transparent 38%,transparent 62%,rgba(3,8,11,.23) 80%,rgba(2,6,8,.75)),
    radial-gradient(ellipse 96vw 640px at 50% 560px,rgba(111,145,156,.132),rgba(54,88,101,.054) 55%,transparent 83%),
    radial-gradient(ellipse 58vw 460px at 77% 310px,rgba(123,143,151,.058),transparent 77%),
    radial-gradient(ellipse 50vw 420px at 34% 520px,rgba(133,159,76,.029),transparent 79%),
    linear-gradient(180deg,#050b0e 0,#09151a 210px,#0d1b22 680px,#0a171d 1220px,#061015 100%)!important;
}
.videoHubGridApproved{margin-top:20px!important}
.videoHubCardApproved{
  border-color:rgba(210,226,230,.235)!important;
  box-shadow:0 23px 52px rgba(0,0,0,.36),0 7px 17px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.052)!important;
}
.videoHubCardApproved:hover{
  border-color:rgba(187,229,111,.46)!important;
  box-shadow:0 31px 66px rgba(0,0,0,.44),0 0 26px rgba(169,229,27,.035),inset 0 1px 0 rgba(255,255,255,.065)!important;
}
.videoHubCardBodyApproved>strong{font-size:14.3px!important;line-height:1.34!important}
.videoCardStatsRow small,.videoCardStatsRow span{font-size:10px!important}
.videoReplayMetaLine{font-size:10px!important}.videoReplayMetaLine b{font-size:10.2px!important}
.videoWatchAction,.videoReplayAction{min-height:33px!important;padding:0 11px!important;font-size:9px!important}

@media (max-width:980px){.videoHubGridApproved{margin-top:15px!important}}
@media (max-width:700px){
  body.videosPageActive{
    background-image:
      linear-gradient(90deg,rgba(2,6,8,.34),transparent 30%,transparent 70%,rgba(2,6,8,.38)),
      radial-gradient(ellipse 112vw 500px at 50% 310px,rgba(96,125,136,.095),transparent 81%),
      linear-gradient(180deg,#050b0e,#0a171d 330px,#0b1920 820px,#061015 100%)!important;
  }
  .videoHubGridApproved{margin-top:13px!important}
  .videoHubCardBodyApproved>strong{font-size:14.5px!important}
}

/* =====================================================================
   v0.3.5.358 — VIDEO HERO COMPACT LATEST CARD + LOCALIZED TITLES
   VIDEO-only pass: compact latest-video rail, remove promo rail, reuse the
   /replays video KPI language, and expose automatic stored title translation.
   ===================================================================== */
.videoHeroSideApproved{
  width:320px!important;
  top:18px!important;
  right:22px!important;
  gap:0!important;
}
.videoFeaturedCardApproved{
  border-radius:8px!important;
  box-shadow:0 22px 52px rgba(0,0,0,.46),0 0 24px rgba(214,169,52,.04),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.videoFeaturedLabel{height:33px!important;padding:0 11px!important;font-size:8.2px!important}
.videoFeaturedThumb{width:calc(100% - 14px)!important;margin:0 7px!important;border-radius:5px!important}
.videoFeaturedThumb .videoYoutubePlay.compact{transform:translate(-50%,-50%) scale(.78)!important}
.videoFeaturedCopy{padding:9px 11px 11px!important}
.videoFeaturedCopy strong{min-height:31px!important;font-size:12.2px!important;line-height:1.26!important}
.videoFeaturedStatsRow{gap:12px!important;margin-top:6px!important}
.videoFeaturedStatsRow small{font-size:8.7px!important}
.videoFeaturedDivider{margin:7px 0 6px!important}
.videoFeaturedReplayLine{font-size:8px!important}
.videoFeaturedReplayLine b{font-size:8.4px!important}

/* Exact visual family used by the VIDEO metric on /replays. */
.videoHubCount.videoHubReplayMetricParity{
  box-sizing:border-box!important;
  width:142px!important;
  min-width:142px!important;
  height:60px!important;
  min-height:60px!important;
  margin-top:22px!important;
  padding:5px 9px!important;
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr)!important;
  grid-template-rows:1fr!important;
  column-gap:7px!important;
  align-items:center!important;
  border:1px solid rgba(219,229,232,.24)!important;
  border-radius:7px!important;
  background:linear-gradient(180deg,rgba(39,52,58,.95),rgba(18,29,34,.98))!important;
  box-shadow:0 11px 15px -10px rgba(0,0,0,.82),0 3px 7px -5px rgba(0,0,0,.68),inset 0 1px 0 rgba(255,255,255,.075),inset 0 -1px 0 rgba(0,0,0,.46)!important;
  backdrop-filter:blur(8px)!important;
}
.videoHubReplayMetricParity .metricIcon{
  width:48px!important;height:46px!important;min-width:48px!important;
  display:grid!important;place-items:center!important;
}
.videoHubReplayMetricParity .homeMetricYoutube{
  width:35px!important;height:35px!important;display:block!important;
  background:#d5dfda!important;
  mask:url('/assets/ui/social/youtube.svg') center/contain no-repeat!important;
  -webkit-mask:url('/assets/ui/social/youtube.svg') center/contain no-repeat!important;
  filter:drop-shadow(0 0 5px rgba(166,233,32,.10))!important;
}
.videoHubReplayMetricParity .metricText{
  min-width:0!important;display:flex!important;flex-direction:column!important;
  justify-content:center!important;align-items:flex-start!important;line-height:1!important;
}
.videoHubCount.videoHubReplayMetricParity .metricText strong{
  margin:0!important;font-size:20px!important;line-height:1!important;font-weight:950!important;
  font-variant-numeric:tabular-nums!important;color:#f3f6f5!important;text-shadow:none!important;
}
.videoHubCount.videoHubReplayMetricParity .metricText small{
  margin:5px 0 0!important;color:#b0bdc0!important;font-size:7px!important;line-height:1!important;
  font-weight:800!important;letter-spacing:.08em!important;text-transform:uppercase!important;text-shadow:none!important;
}

.videoAdminAutoTranslateLocked{
  min-height:42px;align-self:end;display:grid;grid-template-columns:24px minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:8px;align-items:center;padding:7px 10px;border:1px solid rgba(169,229,27,.28);border-radius:6px;
  background:linear-gradient(180deg,rgba(92,132,15,.15),rgba(25,43,7,.16));
}
.videoAdminAutoTranslateLocked>span{grid-row:1/3;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#84b819;color:#081005;font-weight:950}
.videoAdminAutoTranslateLocked strong{color:#dce9d4;font-size:9px;line-height:1.1}
.videoAdminAutoTranslateLocked small{color:#91a087;font-size:7.5px;letter-spacing:.06em}

@media (max-width:1280px) and (min-width:981px){
  .videoHeroSideApproved{width:300px!important;right:18px!important}
  .videoFeaturedCopy strong{font-size:11.8px!important}
}
@media (max-width:980px){
  .videoHeroSideApproved{left:18px!important;right:18px!important;top:auto!important;bottom:18px!important;width:auto!important;max-width:410px!important}
}
@media (max-width:700px){
  .videoHeroSideApproved{left:12px!important;right:12px!important;bottom:12px!important;width:auto!important;max-width:none!important}
  .videoFeaturedLabel{height:31px!important}
  .videoFeaturedCopy strong{font-size:12.2px!important}
  .videoHubCount.videoHubReplayMetricParity{width:132px!important;min-width:132px!important;height:56px!important;min-height:56px!important;grid-template-columns:43px minmax(0,1fr)!important}
  .videoHubReplayMetricParity .metricIcon{width:43px!important;height:42px!important;min-width:43px!important}
  .videoHubReplayMetricParity .homeMetricYoutube{width:31px!important;height:31px!important}
}

/* ========================================================================
   v0.3.5.360 — BATTLE CINEMATIC AFTER-ACTION REPORT
   Battle-route visual system only. Data, parser, dynamic map/tank selection,
   team survival truth, TOP-3 ordering and every interaction remain unchanged.
   ======================================================================== */

/* Deep graphite cinematic canvas: pure CSS, asymmetric atmosphere and a calm
   central light zone. This definitively retires the v347-v350 paper bitmap on
   the battle route without touching the player profile. */
body.battlePageActive{
  background-color:#050a0d!important;
  background-image:
    linear-gradient(90deg,
      rgba(1,5,7,.84) 0%,rgba(2,7,10,.54) 10%,rgba(4,11,14,.15) 28%,
      transparent 43%,transparent 58%,rgba(3,9,12,.16) 76%,
      rgba(2,6,9,.58) 91%,rgba(1,4,6,.86) 100%),
    radial-gradient(ellipse 70vw 650px at 50% 315px,
      rgba(128,155,165,.115) 0%,rgba(72,105,117,.050) 44%,
      rgba(29,55,66,.018) 66%,transparent 83%),
    radial-gradient(ellipse 42vw 430px at 15% 185px,
      rgba(56,91,106,.100) 0%,rgba(31,65,80,.035) 49%,transparent 78%),
    radial-gradient(ellipse 38vw 470px at 86% 350px,
      rgba(94,119,128,.075) 0%,rgba(49,79,91,.025) 52%,transparent 80%),
    radial-gradient(ellipse 30vw 280px at 52% 620px,
      rgba(137,157,76,.024) 0%,rgba(82,105,45,.010) 51%,transparent 80%),
    linear-gradient(180deg,
      #04090c 0,#071015 150px,#0b171d 480px,#0d1a20 860px,
      #09141a 1380px,#071016 1900px,#050b0f 100%)!important;
  background-position:center top!important;
  background-size:auto!important;
  background-repeat:no-repeat!important;
  background-attachment:scroll!important;
}
body.battlePageActive .noise{opacity:.027!important}

/* One centered scene: clear edge, soft contact shadow, no dusty-paper halo. */
body.battlePageActive .cinematicReplayPage{
  position:relative!important;
  isolation:isolate!important;
}
body.battlePageActive .cinematicReplayPage>.cinematicHero.approvedReplayHero{
  border:1px solid rgba(199,218,222,.24)!important;
  border-radius:15px!important;
  background:#061014!important;
  box-shadow:
    0 34px 78px -25px rgba(0,0,0,.92),
    0 13px 28px -15px rgba(0,0,0,.80),
    0 0 0 1px rgba(255,255,255,.024) inset,
    inset 0 1px 0 rgba(255,255,255,.055)!important;
}
body.battlePageActive .approvedReplayHero .approvedHeroBg{
  background-position:center 48%!important;
  filter:saturate(1.10) contrast(1.09) brightness(1.035)!important;
  transform:scale(1.018)!important;
}
body.battlePageActive .approvedReplayHero .approvedHeroVignette,
body.battlePageActive .approvedReplayHero.lowResHero .approvedHeroVignette,
body.battlePageActive .approvedReplayHero.classicIconHero .approvedHeroVignette{
  background:
    linear-gradient(90deg,
      rgba(3,8,11,.94) 0%,rgba(3,8,11,.79) 24%,rgba(3,8,11,.29) 47%,
      rgba(3,8,11,.045) 69%,rgba(3,8,11,.14) 100%),
    linear-gradient(180deg,
      rgba(2,6,8,.12) 0%,rgba(2,6,8,.015) 46%,rgba(3,8,10,.20) 69%,rgba(3,8,10,.82) 100%)!important;
}
body.battlePageActive .approvedReplayHero .approvedHeroGlow{
  opacity:.72!important;
  background:
    radial-gradient(ellipse 37% 49% at 81% 31%,rgba(168,190,196,.135),transparent 72%),
    radial-gradient(ellipse 30% 48% at 18% 47%,rgba(147,200,67,.070),transparent 74%)!important;
  mix-blend-mode:screen!important;
}
body.battlePageActive .approvedReplayHero.cinematic-loss .approvedHeroGlow{
  background:
    radial-gradient(ellipse 37% 49% at 81% 31%,rgba(168,190,196,.125),transparent 72%),
    radial-gradient(ellipse 28% 44% at 19% 46%,rgba(209,91,78,.060),transparent 75%)!important;
}
body.battlePageActive .approvedReplayHero .approvedHeroLightBeam{
  animation:none!important;
  opacity:.44!important;
  background:linear-gradient(113deg,transparent 48%,rgba(222,238,240,.040) 52%,transparent 57%)!important;
}
body.battlePageActive .approvedReplayHero .cinematicAtmosphere{
  opacity:.42!important;
  filter:blur(18px)!important;
}
body.battlePageActive .approvedReplayHero .approvedHeroTank{
  filter:
    drop-shadow(0 34px 24px rgba(0,0,0,.72))
    drop-shadow(-10px 7px 20px rgba(0,0,0,.32))
    drop-shadow(0 0 2px rgba(205,225,228,.12))
    saturate(1.07) contrast(1.075) brightness(1.02)!important;
}

/* Result and record retain the established geometry but gain the restrained
   coral/white/gold hierarchy approved in the concept. */
body.battlePageActive .approvedHeroResultTopV300>strong{
  color:#f4f7f6!important;
  text-shadow:0 2px 2px rgba(0,0,0,.62),0 9px 25px rgba(0,0,0,.40),0 0 13px rgba(237,246,244,.055)!important;
}
body.battlePageActive .approvedReplayHero.cinematic-loss .approvedHeroResultTopV300>strong{
  color:#ff908a!important;
  text-shadow:0 2px 2px rgba(0,0,0,.58),0 9px 24px rgba(55,8,8,.36),0 0 14px rgba(255,107,99,.11)!important;
}
body.battlePageActive .battleDailyRecordV322{
  filter:drop-shadow(0 7px 13px rgba(0,0,0,.36))!important;
}
body.battlePageActive .battleDailyRecordV322::before{
  background:radial-gradient(ellipse,rgba(10,16,17,.46),rgba(10,15,16,.18) 48%,transparent 78%)!important;
}
body.battlePageActive .approvedAwardsRailV301{
  filter:drop-shadow(0 11px 12px rgba(0,0,0,.34))!important;
}
body.battlePageActive .approvedAwardsRailV301::after{
  background:radial-gradient(ellipse at 48% 55%,rgba(255,226,140,.40),rgba(222,158,57,.225) 40%,rgba(116,73,24,.070) 66%,transparent 82%)!important;
  filter:blur(12px)!important;
  opacity:.84!important;
}
body.battlePageActive .approvedAwardsRailV301 .approvedAwardIcon{
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.58)) saturate(1.06) contrast(1.035)!important;
}

/* Coherent smoked-glass combat HUD. Primary, economy and secondary panels are
   three depths of one system instead of unrelated opaque blocks. */
body.battlePageActive .approvedHeroPrimaryStats{
  border-color:rgba(217,231,233,.22)!important;
  border-radius:7px 0 0 7px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.010) 37%,transparent 69%),
    linear-gradient(90deg,rgba(9,18,21,.58),rgba(7,15,18,.43))!important;
  -webkit-backdrop-filter:blur(17px) saturate(1.09)!important;
  backdrop-filter:blur(17px) saturate(1.09)!important;
  box-shadow:0 14px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.105),inset 0 -1px 0 rgba(0,0,0,.19)!important;
}
body.battlePageActive .approvedHeroMetric{
  background:linear-gradient(180deg,rgba(255,255,255,.020),transparent 67%)!important;
  border-right-color:rgba(226,237,239,.105)!important;
}
body.battlePageActive .approvedEconomyCards{
  border-radius:0 7px 7px 0!important;
  overflow:hidden!important;
  box-shadow:0 14px 30px rgba(0,0,0,.22)!important;
}
body.battlePageActive .approvedEconomy{
  transform:none!important;
  border-color:rgba(217,231,233,.22)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.010) 38%,transparent 68%),
    linear-gradient(118deg,rgba(15,31,32,.57),rgba(7,15,18,.48))!important;
  -webkit-backdrop-filter:blur(17px) saturate(1.09)!important;
  backdrop-filter:blur(17px) saturate(1.09)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.18)!important;
}
body.battlePageActive .approvedEconomy.silver>*{transform:none!important}
body.battlePageActive .approvedEconomy.silver{
  background:
    linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.009) 38%,transparent 68%),
    linear-gradient(118deg,rgba(29,61,48,.44),rgba(8,23,21,.44))!important;
}
body.battlePageActive .approvedEconomy.experience{
  border-left-color:rgba(219,174,66,.25)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.009) 38%,transparent 68%),
    linear-gradient(118deg,rgba(81,62,27,.43),rgba(25,24,19,.44))!important;
}
body.battlePageActive .approvedSubMetrics,
body.battlePageActive .approvedSubMetricsV266{
  border-color:rgba(213,228,231,.17)!important;
  border-radius:7px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.037),rgba(255,255,255,.004) 42%,transparent 75%),
    rgba(6,14,17,.49)!important;
  -webkit-backdrop-filter:blur(13px) saturate(1.07)!important;
  backdrop-filter:blur(13px) saturate(1.07)!important;
  box-shadow:0 11px 25px rgba(0,0,0,.19),inset 0 1px 0 rgba(255,255,255,.075)!important;
}
body.battlePageActive .approvedSubMetricsV266>div{
  border-right-color:rgba(221,233,235,.085)!important;
}

/* Report dock: one elevated smoked-glass slab with the tabs physically joined
   to its content. */
body.battlePageActive .cinematicReplayPage>.cinematicReportShell{
  margin-top:12px!important;
  overflow:hidden!important;
  border:1px solid rgba(188,208,212,.20)!important;
  border-radius:10px!important;
  background:
    radial-gradient(ellipse 75% 260px at 50% 0,rgba(102,132,140,.050),transparent 76%),
    linear-gradient(145deg,rgba(16,29,34,.97),rgba(6,14,18,.985) 68%)!important;
  box-shadow:0 31px 66px -25px rgba(0,0,0,.90),0 11px 25px -14px rgba(0,0,0,.76),inset 0 1px 0 rgba(255,255,255,.047)!important;
}
body.battlePageActive .cinematicReportShell>.cinematicTabs{
  margin:0!important;
  width:100%!important;
  max-width:none!important;
  height:51px!important;
  padding:0!important;
  border:0!important;
  border-bottom:1px solid rgba(196,214,218,.12)!important;
  border-radius:0!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  background:linear-gradient(180deg,rgba(27,42,47,.84),rgba(13,25,29,.84))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body.battlePageActive .cinematicReportShell>.cinematicTabs button{
  min-width:0!important;
  width:100%!important;
  height:51px!important;
  border:0!important;
  border-right:1px solid rgba(196,214,218,.09)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.012),transparent)!important;
  color:#9eaaa7!important;
  font-size:14px!important;
  font-weight:600!important;
}
body.battlePageActive .cinematicReportShell>.cinematicTabs button:last-child{border-right:0!important}
body.battlePageActive .cinematicReportShell>.cinematicTabs button.active{
  color:#eef4f0!important;
  background:linear-gradient(180deg,rgba(77,113,54,.15),rgba(18,35,30,.09))!important;
  box-shadow:inset 0 -2px 0 #91d51b,0 7px 22px rgba(119,181,24,.035)!important;
}
body.battlePageActive .cinematicReportShell>.cinematicTabs button.active::after{
  height:2px!important;background:#96dc1c!important;box-shadow:0 0 10px rgba(150,220,28,.42)!important;
}
body.battlePageActive .battleReportContent.cinematicReportContent{
  padding:12px!important;
  background:transparent!important;
  border:0!important;
}

/* Team cards and rows: semantic color stays readable without painting half the
   screen bright red. Survival state remains the sole owner of row background. */
body.battlePageActive .battleTeamsGridV247{gap:13px!important}
body.battlePageActive .teamCardV247{
  border:1px solid rgba(174,198,203,.20)!important;
  border-radius:8px!important;
  background:
    radial-gradient(circle at 18% 0,rgba(255,255,255,.030),transparent 38%),
    linear-gradient(145deg,rgba(22,36,41,.94),rgba(8,18,22,.97))!important;
  box-shadow:0 19px 38px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.040)!important;
}
body.battlePageActive .teamCardV247.ally{border-color:rgba(117,166,137,.27)!important}
body.battlePageActive .teamCardV247.enemy{border-color:rgba(174,119,119,.25)!important}
body.battlePageActive .teamHeadV247{
  border-bottom-color:rgba(194,213,216,.11)!important;
  background:linear-gradient(180deg,rgba(31,47,52,.88),rgba(15,28,33,.90))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body.battlePageActive .teamCardV247.ally .teamTitleV247 h3{color:#b1ec42!important;text-shadow:0 0 11px rgba(169,229,27,.10)!important}
body.battlePageActive .teamCardV247.enemy .teamTitleV247 h3{color:#ff8580!important;text-shadow:0 0 11px rgba(255,103,96,.08)!important}
body.battlePageActive .teamCardV247.ally .teamResultV247{color:#b7e66a!important}
body.battlePageActive .teamCardV247.enemy .teamResultV247{color:#ff9893!important}
body.battlePageActive .teamColumnsV247{
  border-bottom-color:rgba(194,213,216,.09)!important;
  background:rgba(6,15,19,.55)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
}
body.battlePageActive .teamBodyV247{background:rgba(5,13,17,.74)!important}
body.battlePageActive .teamRowV247{
  border-top-color:rgba(188,208,212,.075)!important;
  transition:filter .16s ease,box-shadow .16s ease!important;
}
body.battlePageActive .teamCardV247.ally .teamRowV247.stateAlive,
body.battlePageActive .teamCardV247.ally .teamRowV247.stateAlive.rank-1,
body.battlePageActive .teamCardV247.ally .teamRowV247.stateAlive.rank-2,
body.battlePageActive .teamCardV247.ally .teamRowV247.stateAlive.rank-3{
  background:linear-gradient(90deg,rgba(20,75,53,.64),rgba(12,50,40,.52) 55%,rgba(7,24,25,.58))!important;
}
body.battlePageActive .teamCardV247.enemy .teamRowV247.stateAlive,
body.battlePageActive .teamCardV247.enemy .teamRowV247.stateAlive.rank-1,
body.battlePageActive .teamCardV247.enemy .teamRowV247.stateAlive.rank-2,
body.battlePageActive .teamCardV247.enemy .teamRowV247.stateAlive.rank-3{
  background:linear-gradient(90deg,rgba(19,62,48,.59),rgba(11,42,36,.50) 55%,rgba(7,23,25,.57))!important;
}
body.battlePageActive .teamCardV247.ally .teamRowV247.stateDestroyed,
body.battlePageActive .teamCardV247.ally .teamRowV247.stateDestroyed.rank-1,
body.battlePageActive .teamCardV247.ally .teamRowV247.stateDestroyed.rank-2,
body.battlePageActive .teamCardV247.ally .teamRowV247.stateDestroyed.rank-3,
body.battlePageActive .teamCardV247.enemy .teamRowV247.stateDestroyed,
body.battlePageActive .teamCardV247.enemy .teamRowV247.stateDestroyed.rank-1,
body.battlePageActive .teamCardV247.enemy .teamRowV247.stateDestroyed.rank-2,
body.battlePageActive .teamCardV247.enemy .teamRowV247.stateDestroyed.rank-3{
  background:linear-gradient(90deg,rgba(89,24,31,.69),rgba(64,20,27,.58) 54%,rgba(25,17,22,.64))!important;
}
body.battlePageActive .teamRowV247.stateUnknown{background:rgba(7,18,22,.69)!important}
body.battlePageActive .teamRowV247.rank-1{box-shadow:inset 0 0 0 1px rgba(237,191,58,.20)!important}
body.battlePageActive .teamRowV247.rank-2{box-shadow:inset 0 0 0 1px rgba(206,219,224,.105)!important}
body.battlePageActive .teamRowV247.rank-3{box-shadow:inset 0 0 0 1px rgba(212,133,70,.12)!important}
body.battlePageActive .teamRowV247.owner,
body.battlePageActive .teamRowV247.owner.rank-1,
body.battlePageActive .teamRowV247.owner.rank-2,
body.battlePageActive .teamRowV247.owner.rank-3{
  border-top-color:rgba(158,231,30,.82)!important;
  box-shadow:inset 3px 0 0 #a5ee24,inset 0 0 0 1px rgba(157,229,30,.76),inset 22px 0 28px rgba(125,195,26,.085),0 0 15px rgba(135,207,28,.065)!important;
}
body.battlePageActive .teamRowV247:hover{filter:brightness(1.075)!important}
body.battlePageActive .teamTankImgV247{
  filter:drop-shadow(0 6px 6px rgba(0,0,0,.70)) saturate(1.07) contrast(1.04) brightness(1.02)!important;
}
body.battlePageActive .battleTeamsFooterV247{opacity:.80!important}

/* Detailed report and comments share the same material family so switching
   tabs never feels like entering an older page. */
body.battlePageActive .wotDetailV255{background:transparent!important}
body.battlePageActive .wotDetailPanelV255{
  border-color:rgba(184,204,208,.18)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.026),transparent 30%),
    linear-gradient(145deg,rgba(24,37,42,.92),rgba(9,18,22,.96))!important;
  box-shadow:0 18px 38px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.036)!important;
}
body.battlePageActive .battleCommentsV319{
  border-color:rgba(184,204,208,.18)!important;
  border-radius:9px!important;
  background:linear-gradient(145deg,rgba(18,31,36,.95),rgba(7,16,20,.98))!important;
  box-shadow:0 26px 58px -24px rgba(0,0,0,.86),0 10px 22px -14px rgba(0,0,0,.70),inset 0 1px 0 rgba(255,255,255,.034)!important;
}

@media(max-width:1050px){
  body.battlePageActive .cinematicReportShell>.cinematicTabs{width:100%!important;margin:0!important}
  body.battlePageActive .battleTeamsGridV247{grid-template-columns:1fr!important}
}

/* Mobile: retain the cinematic palette but remove expensive backdrop filters. */
@media(max-width:720px){
  body.battlePageActive{
    background-color:#060d11!important;
    background-image:
      linear-gradient(90deg,rgba(2,6,8,.44),transparent 27%,transparent 73%,rgba(2,6,8,.47)),
      radial-gradient(ellipse 102vw 420px at 50% 275px,rgba(93,124,135,.085),transparent 80%),
      linear-gradient(180deg,#050a0d,#08141a 390px,#09171d 900px,#061016 100%)!important;
    background-attachment:scroll!important;
  }
  body.battlePageActive .noise{opacity:.017!important}
  body.battlePageActive .cinematicReplayPage>.cinematicHero.approvedReplayHero{border-radius:11px!important}
  body.battlePageActive .approvedHeroPrimaryStats,
  body.battlePageActive .approvedEconomy,
  body.battlePageActive .approvedSubMetrics,
  body.battlePageActive .approvedSubMetricsV266{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  body.battlePageActive .cinematicReplayPage>.cinematicReportShell{border-radius:8px!important;box-shadow:0 18px 38px -20px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.03)!important}
  body.battlePageActive .battleReportContent.cinematicReportContent{padding:8px!important}
  body.battlePageActive .cinematicReportShell>.cinematicTabs button{font-size:12px!important}
}

@media(prefers-reduced-motion:reduce){
  body.battlePageActive .approvedReplayHero:hover .approvedHeroTank{transform:scale(1)!important;transition:none!important}
  body.battlePageActive .teamRowV247{transition:none!important}
}

/* ========================================================================
   v0.3.5.361 — PLAYER COMMANDER DOSSIER CINEMATIC GLASS
   Scope: player-profile visuals only. Player/replay data, archive ordering,
   card geometry, actions and application logic remain unchanged.
   ======================================================================== */

/* Pure CSS document atmosphere. This final route-specific rule supersedes the
   legacy v347/v350 dusty-paper bitmap after every render and refresh. */
body.playerPageActive{
  min-height:100vh!important;
  background-color:#050a0d!important;
  background-image:
    linear-gradient(90deg,
      rgba(1,5,7,.78) 0%,
      rgba(3,8,11,.45) 10%,
      rgba(5,12,16,.12) 28%,
      rgba(5,12,16,.02) 50%,
      rgba(5,12,16,.13) 73%,
      rgba(2,7,10,.48) 90%,
      rgba(1,5,7,.80) 100%),
    radial-gradient(ellipse 72vw 620px at 50% 345px,rgba(102,132,142,.115),rgba(57,82,91,.040) 47%,transparent 78%),
    radial-gradient(ellipse 44vw 440px at 79% 260px,rgba(157,126,62,.070),rgba(111,116,51,.028) 46%,transparent 79%),
    radial-gradient(ellipse 38vw 390px at 18% 245px,rgba(61,91,104,.050),transparent 75%),
    linear-gradient(180deg,#04090c 0,#071116 190px,#0a171c 510px,#08141a 940px,#050d12 100%)!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
  background-attachment:scroll!important;
  background-size:auto!important;
}
body.playerPageActive .noise{opacity:.024!important}

/* One FermaniHUB desktop rail: profile and approved battle report now share
   the exact same 1280px canvas without altering internal section geometry. */
@media(min-width:1251px){
  body.playerPageActive .playerProfilePage.playerProfileFinalMockup{
    width:min(1280px,calc(100% - 40px))!important;
    max-width:1280px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
}
@media(min-width:821px) and (max-width:1250px){
  body.playerPageActive .playerProfilePage.playerProfileFinalMockup{
    width:calc(100% - 32px)!important;
    max-width:1280px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
}

/* Hero reads as a premium commander dossier. The authored tank stays real,
   but identity and statistics remain the brightest, sharpest information. */
body.playerPageActive .playerProfileFinalMockup .playerProfileHero.playerProfileHeroFinal{
  border:1px solid rgba(193,213,217,.22)!important;
  border-radius:15px!important;
  background-color:#081215!important;
  box-shadow:
    0 32px 72px -25px rgba(0,0,0,.92),
    0 13px 29px -16px rgba(0,0,0,.79),
    0 0 0 1px rgba(255,255,255,.015) inset,
    inset 0 1px 0 rgba(255,255,255,.060),
    inset 0 -32px 58px rgba(0,0,0,.25),
    0 0 44px rgba(125,165,175,.025)!important;
}
body.playerPageActive .playerProfileFinalMockup .playerProfileHero::before{
  width:286px!important;
  height:2px!important;
  background:linear-gradient(90deg,#a9e51b 0%,rgba(169,229,27,.47) 48%,transparent 100%)!important;
  box-shadow:0 0 16px rgba(169,229,27,.22)!important;
}
body.playerPageActive .playerProfileFinalMockup .playerProfileHero::after{
  background:
    radial-gradient(ellipse 38% 66% at 83% 30%,rgba(244,190,96,.115),rgba(185,139,61,.035) 43%,transparent 76%),
    radial-gradient(ellipse 34% 58% at 65% 65%,rgba(164,205,74,.033),transparent 72%),
    linear-gradient(180deg,rgba(255,255,255,.022),transparent 20%,transparent 68%,rgba(0,0,0,.30))!important;
}
body.playerPageActive .playerProfileFinalMockup .playerProfileHeroBg{
  background-position:center 45%!important;
  filter:saturate(1.01) contrast(1.08) brightness(.89) sepia(.025)!important;
  transform:scale(1.018)!important;
}
body.playerPageActive .playerProfileFinalMockup .playerProfileHeroShade{
  background:
    linear-gradient(90deg,rgba(3,8,10,.95) 0%,rgba(4,10,12,.84) 27%,rgba(5,12,14,.46) 49%,rgba(5,11,13,.08) 72%,rgba(4,9,11,.25) 100%),
    linear-gradient(180deg,rgba(2,7,9,.045),rgba(2,7,9,.02) 49%,rgba(3,8,10,.82) 100%)!important;
}
body.playerPageActive .playerProfileFinalMockup .playerProfileEyebrow{
  color:#b7c3be!important;
  text-shadow:0 2px 10px rgba(0,0,0,.46)!important;
}
body.playerPageActive .playerProfileFinalMockup .playerProfileNameLine h1{
  color:#f5f8f6!important;
  text-shadow:0 2px 2px rgba(0,0,0,.54),0 14px 34px rgba(0,0,0,.54)!important;
}
body.playerPageActive .playerProfileFinalMockup .playerRegionBadge{
  border-color:rgba(191,213,216,.24)!important;
  background:linear-gradient(180deg,rgba(24,39,43,.82),rgba(9,19,23,.88))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 10px 22px rgba(0,0,0,.23)!important;
}
body.playerPageActive .playerProfileFinalMockup .playerStatStripV323{
  border-color:rgba(146,203,218,.38)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.050),transparent 38%),
    linear-gradient(90deg,rgba(10,28,33,.76),rgba(5,17,22,.79))!important;
  -webkit-backdrop-filter:blur(15px) saturate(1.07)!important;
  backdrop-filter:blur(15px) saturate(1.07)!important;
  box-shadow:0 13px 28px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.075),inset 0 -1px 0 rgba(0,0,0,.24)!important;
}
body.playerPageActive .playerProfileFinalMockup .playerProfileFacts span{
  color:#d5ded9!important;
  text-shadow:0 3px 10px rgba(0,0,0,.36)!important;
}
body.playerPageActive .playerProfileFinalMockup .playerProfileHeroMain>p{color:#a9b5b0!important}
body.playerPageActive .playerProfileFinalMockup .playerHeroAction{
  border-color:rgba(192,213,216,.21)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.040),transparent 42%),
    rgba(7,17,20,.72)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  backdrop-filter:blur(12px)!important;
  box-shadow:0 11px 24px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
body.playerPageActive .playerProfileFinalMockup .playerHeroActionPrimary{
  border-color:rgba(186,235,57,.50)!important;
  background:linear-gradient(180deg,rgba(143,198,31,.88),rgba(77,115,12,.91))!important;
  color:#f5ffd7!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),inset 0 -2px 0 rgba(42,71,4,.65),0 12px 25px rgba(0,0,0,.24),0 0 18px rgba(169,229,27,.075)!important;
}

/* Mastery remains ceremonial gold; best battle is an elevated HUD card rather
   than a flat panel pasted onto the hero art. */
body.playerPageActive .playerProfileFinalMockup .playerHeroMasteryFinal{
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.55))!important;
}
body.playerPageActive .playerProfileFinalMockup .playerHeroMasteryFinal>img{
  filter:brightness(1.07) saturate(1.06) contrast(1.03) drop-shadow(0 9px 15px rgba(0,0,0,.52)) drop-shadow(0 0 16px rgba(238,183,67,.13))!important;
}
body.playerPageActive .playerProfileFinalMockup .playerHeroBestCard{
  border-color:rgba(181,192,156,.48)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),transparent 27%),
    linear-gradient(145deg,rgba(16,28,28,.81),rgba(5,13,16,.91))!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.07)!important;
  backdrop-filter:blur(18px) saturate(1.07)!important;
  box-shadow:0 24px 51px rgba(0,0,0,.47),0 8px 18px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.11),inset 0 -1px 0 rgba(0,0,0,.24)!important;
}
body.playerPageActive .playerProfileFinalMockup .playerHeroBestCard::before{
  background:
    radial-gradient(circle at 8% 0,rgba(169,229,27,.13),transparent 34%),
    radial-gradient(circle at 96% 0,rgba(239,183,77,.075),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.055),transparent 25%)!important;
}
body.playerPageActive .playerProfileFinalMockup .playerHeroBestTitle{color:#c9f14d!important}
body.playerPageActive .playerProfileFinalMockup .playerHeroBestDamage strong{
  color:#b8e834!important;
  text-shadow:0 0 18px rgba(169,229,27,.14),0 3px 9px rgba(0,0,0,.48)!important;
}

/* Five KPIs form one deep glass instrument rail. Lime marks achievement, not
   selection; separators and contact shadow provide the missing volume. */
body.playerPageActive .playerProfileFinalMockup .playerProfileKpisFinal{
  border-color:rgba(190,211,214,.20)!important;
  background:
    radial-gradient(ellipse 50% 90% at 50% 0,rgba(94,129,135,.060),transparent 73%),
    linear-gradient(180deg,rgba(18,33,37,.88),rgba(6,16,20,.95))!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.06)!important;
  backdrop-filter:blur(18px) saturate(1.06)!important;
  box-shadow:0 21px 42px rgba(0,0,0,.30),0 7px 15px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.070),inset 0 -18px 28px rgba(0,0,0,.15)!important;
}
body.playerPageActive .playerProfileFinalMockup .playerProfileKpisFinal>div{
  background:linear-gradient(180deg,rgba(255,255,255,.015),transparent 68%)!important;
}
body.playerPageActive .playerProfileFinalMockup .playerProfileKpisFinal>div>span{
  border-color:rgba(179,207,211,.16)!important;
  background:radial-gradient(circle at 48% 36%,rgba(169,229,27,.050),rgba(255,255,255,.010) 67%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 7px 15px rgba(0,0,0,.18)!important;
}
body.playerPageActive .playerProfileFinalMockup .playerProfileKpisFinal>div:not(:last-child)::after{
  background:linear-gradient(180deg,transparent,rgba(199,217,220,.17) 24%,rgba(199,217,220,.11) 72%,transparent)!important;
}
body.playerPageActive .playerProfileFinalMockup .playerProfileKpisFinal>div.best-damage{
  background:linear-gradient(180deg,rgba(112,161,20,.095),rgba(55,82,12,.018) 66%,transparent)!important;
}
body.playerPageActive .playerProfileFinalMockup .playerProfileKpisFinal strong{
  text-shadow:0 5px 13px rgba(0,0,0,.35)!important;
}

/* Archive is intentionally calmer than the hero. The existing newest-first
   grid is untouched; soft top light and card contact shadows make sparse and
   full archives feel equally deliberate. */
body.playerPageActive .playerProfileFinalMockup .playerReplaySectionFinal{
  margin-top:16px!important;
  border:1px solid rgba(182,204,209,.17)!important;
  outline:0!important;
  border-radius:10px!important;
  background:
    radial-gradient(ellipse 68% 260px at 50% 0,rgba(84,119,128,.060),transparent 77%),
    linear-gradient(145deg,rgba(14,28,33,.955),rgba(5,14,18,.98) 70%)!important;
  box-shadow:0 29px 62px -25px rgba(0,0,0,.88),0 11px 23px -14px rgba(0,0,0,.73),inset 0 1px 0 rgba(255,255,255,.042)!important;
}
body.playerPageActive .playerProfileFinalMockup .playerReplaySection::before{
  height:230px!important;
  background:
    radial-gradient(ellipse 44% 170px at 14% 0,rgba(169,229,27,.025),transparent 74%),
    linear-gradient(180deg,rgba(91,126,134,.030),transparent 78%)!important;
}
body.playerPageActive .playerProfileFinalMockup .playerReplayHeader{
  padding-bottom:12px!important;
  border-bottom:1px solid rgba(190,211,215,.095)!important;
}
body.playerPageActive .playerProfileFinalMockup .playerReplayEyebrow{color:#97a6a7!important}
body.playerPageActive .playerProfileFinalMockup .playerReplayHeader h2{
  color:#eef4f2!important;
  text-shadow:0 7px 17px rgba(0,0,0,.33)!important;
}
body.playerPageActive .playerProfileFinalMockup .playerReplayGrid .replayCard{
  border-color:rgba(132,156,162,.30)!important;
  box-shadow:0 16px 31px rgba(0,0,0,.30),0 5px 11px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.025)!important;
  transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease!important;
}
body.playerPageActive .playerProfileFinalMockup .playerReplayGrid .replayCard:hover,
body.playerPageActive .playerProfileFinalMockup .playerReplayGrid .replayCard:focus-within{
  transform:translateY(-3px)!important;
  border-color:rgba(169,229,27,.35)!important;
  box-shadow:0 22px 39px rgba(0,0,0,.37),0 0 19px rgba(169,229,27,.035),inset 0 1px 0 rgba(255,255,255,.045)!important;
}

/* Mobile keeps the cinematic hierarchy without expensive live blurs. */
@media(max-width:820px){
  body.playerPageActive{
    background-color:#060d11!important;
    background-image:
      linear-gradient(90deg,rgba(2,6,8,.45),transparent 28%,transparent 72%,rgba(2,6,8,.48)),
      radial-gradient(ellipse 105vw 430px at 50% 275px,rgba(101,129,137,.075),transparent 79%),
      radial-gradient(ellipse 70vw 330px at 84% 210px,rgba(148,116,54,.043),transparent 78%),
      linear-gradient(180deg,#050a0d,#08141a 420px,#071218 100%)!important;
    background-position:center top!important;
    background-repeat:no-repeat!important;
    background-attachment:scroll!important;
    background-size:auto!important;
  }
  body.playerPageActive .noise{opacity:.015!important}
  body.playerPageActive .playerProfileFinalMockup .playerProfileHero.playerProfileHeroFinal{border-radius:11px!important}
  body.playerPageActive .playerProfileFinalMockup .playerStatStripV323,
  body.playerPageActive .playerProfileFinalMockup .playerHeroAction,
  body.playerPageActive .playerProfileFinalMockup .playerHeroBestCard,
  body.playerPageActive .playerProfileFinalMockup .playerProfileKpisFinal{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  body.playerPageActive .playerProfileFinalMockup .playerReplaySectionFinal{
    border-radius:8px!important;
    box-shadow:0 19px 39px -20px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.028)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.playerPageActive .playerProfileFinalMockup .playerReplayGrid .replayCard,
  body.playerPageActive .playerProfileFinalMockup .playerReplayGrid .replayCard:hover,
  body.playerPageActive .playerProfileFinalMockup .playerReplayGrid .replayCard:focus-within{
    transition:none!important;
    transform:none!important;
  }
}

/* ========================================================================
   v0.3.5.362 — ABOUT FERMANIHUB BRAND STORY + PLATFORM VISION
   Scope: /about only. Narrative platform story, real live counters, product
   ecosystem and Fermani Marks Pro presentation. Other routes stay untouched.
   ======================================================================== */
body.aboutPageActive{
  min-height:100vh!important;
  background-color:#050a0d!important;
  background-image:
    linear-gradient(90deg,rgba(1,5,7,.78),rgba(3,8,11,.34) 12%,rgba(5,12,16,.04) 31%,rgba(5,12,16,.04) 69%,rgba(2,7,10,.38) 89%,rgba(1,5,7,.80)),
    radial-gradient(ellipse 76vw 720px at 50% 330px,rgba(92,125,135,.105),rgba(54,79,88,.035) 48%,transparent 79%),
    radial-gradient(ellipse 42vw 520px at 78% 830px,rgba(144,114,52,.052),transparent 78%),
    linear-gradient(180deg,#04090c 0,#071116 240px,#09161b 820px,#071217 1700px,#050d12 100%)!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
  background-attachment:scroll!important;
  background-size:auto!important;
}
body.aboutPageActive .noise{opacity:.021!important}
body.aboutPageActive #app{padding-bottom:34px!important}
body.aboutPageActive .aboutHero,
body.aboutPageActive .aboutStory,
body.aboutPageActive .aboutJourneyV362,
body.aboutPageActive .aboutCapabilities,
body.aboutPageActive .aboutProV362,
body.aboutPageActive .aboutToolsV362,
body.aboutPageActive .aboutRoadmapV362,
body.aboutPageActive .aboutCreator,
body.aboutPageActive .aboutTrustV362,
body.aboutPageActive .aboutCooperation,
body.aboutPageActive .aboutLegal{
  width:min(1280px,calc(100% - 40px))!important;
  max-width:1280px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* First viewport: the platform promise on the left, live proof on the right. */
body.aboutPageActive .aboutHeroV362{
  min-height:472px!important;
  margin-top:0!important;
  overflow:hidden!important;
  border:1px solid rgba(187,210,215,.21)!important;
  border-top:0!important;
  border-radius:0 0 15px 15px!important;
  background:#061014!important;
  box-shadow:0 34px 76px -27px rgba(0,0,0,.92),0 13px 29px -16px rgba(0,0,0,.76),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body.aboutPageActive .aboutHeroV362 .aboutHeroBackdrop{
  background:
    linear-gradient(90deg,rgba(3,8,10,.96) 0%,rgba(3,9,11,.84) 38%,rgba(4,10,12,.31) 67%,rgba(3,8,10,.43) 100%),
    linear-gradient(180deg,rgba(2,7,9,.03),transparent 47%,rgba(3,8,10,.78) 100%),
    url('/assets/home_hero_user_battle.jpg') center 43%/cover no-repeat!important;
  filter:saturate(1.06) contrast(1.07) brightness(.93)!important;
  transform:scale(1.012)!important;
}
body.aboutPageActive .aboutHeroV362:before{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  left:50px!important;
  top:0!important;
  width:290px!important;
  height:2px!important;
  background:linear-gradient(90deg,#a9e51b,rgba(169,229,27,.42) 53%,transparent)!important;
  box-shadow:0 0 18px rgba(169,229,27,.20)!important;
}
body.aboutPageActive .aboutHeroV362:after{
  inset:auto -70px -165px 45%!important;
  height:350px!important;
  background:radial-gradient(ellipse,rgba(169,229,27,.070),rgba(170,138,61,.025) 45%,transparent 72%)!important;
}
body.aboutPageActive .aboutHeroV362 .aboutHeroInner{
  min-height:472px!important;
  grid-template-columns:minmax(0,1.38fr) minmax(360px,.62fr)!important;
  gap:52px!important;
  padding:58px 52px!important;
}
body.aboutPageActive .aboutEyebrow,
body.aboutPageActive .aboutSectionKicker{
  color:#a9b7b2!important;
  font-size:12px!important;
  letter-spacing:.17em!important;
}
body.aboutPageActive .aboutHeroV362 .aboutHeroCopy h1{
  max-width:790px!important;
  margin:17px 0 19px!important;
  color:#f3f7f5!important;
  font-size:clamp(44px,4.1vw,66px)!important;
  line-height:.96!important;
  letter-spacing:-.052em!important;
  text-shadow:0 2px 2px rgba(0,0,0,.48),0 17px 36px rgba(0,0,0,.40)!important;
}
body.aboutPageActive .aboutHeroV362 .aboutHeroCopy h1 span{
  color:#a9e51b!important;
  text-shadow:0 0 24px rgba(169,229,27,.12),0 14px 32px rgba(0,0,0,.42)!important;
}
body.aboutPageActive .aboutHeroV362 .aboutHeroCopy h1 span:after{content:none!important}
body.aboutPageActive .aboutHeroV362 .aboutHeroCopy p{
  max-width:690px!important;
  color:#b1bdb8!important;
  font-size:16px!important;
  line-height:1.62!important;
  text-shadow:0 3px 12px rgba(0,0,0,.42)!important;
}
body.aboutPageActive .aboutHeroV362 .aboutHeroActions{gap:10px!important;margin-top:25px!important}
body.aboutPageActive .aboutHeroV362 .aboutHeroActions .button{min-height:44px!important;padding:0 20px!important;font-size:12px!important}

body.aboutPageActive .aboutPlatformPanelV362{
  width:100%!important;
  min-height:292px!important;
  display:block!important;
  padding:22px!important;
  border:1px solid rgba(188,211,216,.24)!important;
  border-radius:11px!important;
  background:
    radial-gradient(circle at 88% 0,rgba(169,229,27,.080),transparent 34%),
    linear-gradient(145deg,rgba(17,31,35,.79),rgba(5,14,18,.90))!important;
  -webkit-backdrop-filter:blur(17px) saturate(1.08)!important;
  backdrop-filter:blur(17px) saturate(1.08)!important;
  box-shadow:0 25px 52px rgba(0,0,0,.40),0 7px 17px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.085)!important;
}
body.aboutPageActive .aboutPlatformBrandV362{display:flex;align-items:center;gap:16px;padding-bottom:17px;border-bottom:1px solid rgba(194,214,218,.11)}
body.aboutPageActive .aboutPlatformBrandV362 img{width:58px!important;height:auto!important;filter:drop-shadow(0 8px 15px rgba(0,0,0,.46))!important}
body.aboutPageActive .aboutPlatformBrandV362>div{display:grid;gap:4px}
body.aboutPageActive .aboutPlatformBrandV362 strong{color:#f1f5f3!important;font-size:24px!important;letter-spacing:-.035em!important}
body.aboutPageActive .aboutPlatformBrandV362 strong span{color:#a9e51b!important}
body.aboutPageActive .aboutPlatformBrandV362 small{color:#899895!important;font-size:10px!important;line-height:1.4!important;letter-spacing:.10em!important}
body.aboutPageActive .aboutPlatformLiveV362{display:flex;align-items:center;gap:8px;margin:15px 0 13px;color:#a7b4b0;font-size:10px;font-weight:800;letter-spacing:.09em}
body.aboutPageActive .aboutPlatformLiveV362 i{width:8px;height:8px;border-radius:50%;background:#a9e51b;box-shadow:0 0 12px rgba(169,229,27,.55)}
body.aboutPageActive .aboutPlatformStatsV362{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body.aboutPageActive .aboutPlatformStatsV362>a,
body.aboutPageActive .aboutPlatformStatsV362>div{min-height:72px;display:grid;align-content:center;padding:10px 12px;border:1px solid rgba(189,211,215,.12);border-radius:7px;background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(5,14,18,.42));text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.028)}
body.aboutPageActive .aboutPlatformStatsV362 b{color:#eff5f2;font-size:22px;line-height:1;font-weight:900}
body.aboutPageActive .aboutPlatformStatsV362 small{margin-top:5px;color:#81918d;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
body.aboutPageActive .aboutPlatformStatsV362>a:hover{border-color:rgba(169,229,27,.29);background:rgba(169,229,27,.045)}

/* Story and journey: readable editorial copy followed by a compact data flow. */
body.aboutPageActive .aboutStory{
  margin-top:18px!important;
  padding:34px 36px!important;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)!important;
  gap:60px!important;
  border:1px solid rgba(183,205,209,.17)!important;
  border-radius:10px!important;
  background:linear-gradient(145deg,rgba(15,29,34,.95),rgba(6,15,19,.98))!important;
  box-shadow:0 24px 55px -25px rgba(0,0,0,.83),inset 0 1px 0 rgba(255,255,255,.038)!important;
}
body.aboutPageActive .aboutStory h2,
body.aboutPageActive .aboutSectionHeadV362 h2,
body.aboutPageActive .aboutProCopyV362 h2,
body.aboutPageActive .aboutCreator h2,
body.aboutPageActive .aboutTrustV362 h2,
body.aboutPageActive .aboutCooperation h2{
  margin:11px 0 0!important;
  color:#eef4f1!important;
  font-size:clamp(28px,2.5vw,38px)!important;
  line-height:1.06!important;
  letter-spacing:-.042em!important;
  text-transform:uppercase!important;
}
body.aboutPageActive .aboutStoryCopy{gap:14px!important}
body.aboutPageActive .aboutStoryCopy p,
body.aboutPageActive .aboutSectionHeadV362>p,
body.aboutPageActive .aboutProCopyV362>p,
body.aboutPageActive .aboutCreatorIdentity p,
body.aboutPageActive .aboutCooperationCopy>p{
  color:#a9b6b1!important;
  font-size:16px!important;
  line-height:1.68!important;
}
body.aboutPageActive .aboutJourneyV362,
body.aboutPageActive .aboutToolsV362,
body.aboutPageActive .aboutRoadmapV362,
body.aboutPageActive .aboutTrustV362{
  margin-top:16px!important;
  padding:30px!important;
  border:1px solid rgba(182,204,209,.16)!important;
  border-radius:10px!important;
  background:linear-gradient(145deg,rgba(14,28,33,.94),rgba(5,14,18,.98))!important;
  box-shadow:0 25px 55px -27px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.034)!important;
}
body.aboutPageActive .aboutSectionHeadV362{max-width:850px}
body.aboutPageActive .aboutSectionHeadV362>p{margin:12px 0 0!important}
body.aboutPageActive .aboutJourneyStepsV362{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:24px}
body.aboutPageActive .aboutJourneyStepsV362 article{position:relative;min-height:190px;padding:20px 18px;border:1px solid rgba(184,207,211,.13);border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.027),rgba(5,14,18,.38));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
body.aboutPageActive .aboutJourneyStepsV362 article:not(:last-child):after{content:"";position:absolute;z-index:2;right:-11px;top:50%;width:12px;height:1px;background:linear-gradient(90deg,rgba(169,229,27,.65),rgba(169,229,27,.12))}
body.aboutPageActive .aboutJourneyStepsV362 article>b{position:absolute;right:14px;top:13px;color:rgba(173,197,201,.18);font-size:24px}
body.aboutPageActive .aboutJourneyStepsV362 article>span{width:38px;height:38px;display:grid;place-items:center;color:#b9d1c8}
body.aboutPageActive .aboutJourneyStepsV362 .aboutFeatureGlyph{width:27px;height:27px}
body.aboutPageActive .aboutJourneyStepsV362 h3{margin:14px 0 8px;color:#e7efeb;font-size:14px;line-height:1.25;text-transform:uppercase;letter-spacing:.035em}
body.aboutPageActive .aboutJourneyStepsV362 p{margin:0;color:#899995;font-size:14px;line-height:1.55}

/* Capabilities use controlled semantic accents instead of identical boxes. */
body.aboutPageActive .aboutCapabilities{gap:10px!important;margin-top:12px!important}
body.aboutPageActive .aboutCapabilityCard{--about-accent:169,229,27;min-height:190px!important;padding:22px 20px!important;border-color:rgba(var(--about-accent),.18)!important;border-radius:8px!important;background:linear-gradient(180deg,rgba(var(--about-accent),.038),rgba(6,15,19,.92))!important;box-shadow:0 18px 39px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.033)!important}
body.aboutPageActive .aboutCapability-analysis{--about-accent:92,184,221}
body.aboutPageActive .aboutCapability-players{--about-accent:224,178,70}
body.aboutPageActive .aboutCapability-video{--about-accent:211,86,82}
body.aboutPageActive .aboutCapabilityCard:after{background:radial-gradient(circle,rgba(var(--about-accent),.10),transparent 69%)!important}
body.aboutPageActive .aboutCapabilityIcon{border-color:rgba(var(--about-accent),.24)!important;background:rgba(var(--about-accent),.050)!important;color:rgb(var(--about-accent))!important}
body.aboutPageActive .aboutCapabilities h3{color:#edf3f0!important;font-size:14px!important;line-height:1.3!important}
body.aboutPageActive .aboutCapabilities p{color:#8f9e99!important;font-size:14px!important;line-height:1.55!important}
body.aboutPageActive .aboutCapabilityCard:hover{transform:translateY(-3px)!important;border-color:rgba(var(--about-accent),.37)!important;box-shadow:0 24px 45px rgba(0,0,0,.31),0 0 24px rgba(var(--about-accent),.035),inset 0 1px 0 rgba(255,255,255,.04)!important}

/* =====================================================================
   v0.3.5.363 — FERMANI MARKS PRO PRODUCT + LICENSE CENTER
   ===================================================================== */
body.marksPageActive{background:#050b0e!important}
body.marksPageActive:before{content:"";position:fixed;inset:58px 0 0;pointer-events:none;background:radial-gradient(ellipse 60% 42% at 50% 12%,rgba(91,129,133,.13),transparent 72%),radial-gradient(ellipse 35% 30% at 72% 36%,rgba(141,194,34,.045),transparent 75%),linear-gradient(90deg,#04090c 0%,#091217 22%,#0b161b 50%,#081116 78%,#04090c 100%);z-index:-2}
.marksPageV363{width:min(1380px,calc(100% - 36px));margin:18px auto 48px;color:#e9efef}
.marksHeroV363{position:relative;min-height:470px;border:1px solid rgba(150,177,179,.25);border-radius:10px;overflow:hidden;background:url('/assets/about_fermani_marks_pro.jpg') 70% 50%/cover no-repeat;box-shadow:0 30px 70px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.05)}
.marksHeroV363:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,9,11,.97) 0%,rgba(5,13,15,.88) 35%,rgba(5,10,12,.24) 67%,rgba(4,8,10,.56) 100%),linear-gradient(0deg,rgba(2,7,9,.82),transparent 48%)}
.marksHeroShade{position:absolute;inset:0;box-shadow:inset 0 0 90px rgba(0,0,0,.72);z-index:1}
.marksHeroCopy{position:relative;z-index:2;width:min(610px,60%);padding:72px 56px}
.marksHeroCopy>span,.marksAccountHead>span{display:block;color:#a9e51c;font:700 10px/1.2 var(--font-condensed);letter-spacing:.2em;margin-bottom:14px}
.marksHeroCopy h1{margin:0;color:#f8fbfa;font:800 clamp(42px,5vw,72px)/.94 var(--font-condensed);letter-spacing:-.025em;text-shadow:0 5px 22px #000}
.marksHeroCopy p{max-width:570px;margin:22px 0 28px;color:#c2cdce;font-size:15px;line-height:1.6}
.marksHeroCopy>div{display:flex;gap:10px}.marksHeroCopy .button{min-height:46px;padding:0 22px}
.marksHeroBadge{position:absolute;right:38px;bottom:34px;z-index:3;padding:18px 20px;border:1px solid rgba(169,229,28,.35);border-radius:7px;background:rgba(4,10,11,.83);box-shadow:0 18px 38px #000,inset 0 1px rgba(255,255,255,.05);backdrop-filter:blur(12px)}
.marksHeroBadge b{display:block;font:800 23px/1 var(--font-condensed);letter-spacing:.04em}.marksHeroBadge em{color:#a9e51c;font-style:normal}.marksHeroBadge small{display:block;margin-top:9px;color:#849194;font:700 9px var(--font-condensed);letter-spacing:.12em}
.marksCompareV363{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.marksPlan{position:relative;min-height:385px;padding:30px;border:1px solid rgba(147,174,177,.22);border-radius:8px;background:linear-gradient(145deg,rgba(23,37,42,.96),rgba(7,15,18,.98));box-shadow:0 18px 38px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.04)}
.marksPlan.marksPro{border-color:rgba(169,229,28,.31);background:radial-gradient(circle at 90% 0,rgba(169,229,28,.09),transparent 38%),linear-gradient(145deg,rgba(25,39,38,.98),rgba(7,15,15,.98))}
.marksPlan header{display:flex;align-items:flex-start;gap:18px;padding-bottom:22px;border-bottom:1px solid rgba(180,200,201,.13)}.marksPlan header>span{color:#526166;font:800 34px var(--font-condensed)}.marksPro header>span{color:#9bce23}.marksPlan h2{margin:0;font:800 32px var(--font-condensed);letter-spacing:.03em}.marksPlan header p{margin:6px 0 0;color:#8e9b9d;font-size:12px}.marksPlan ul{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin:24px 0 28px;padding:0;list-style:none}.marksPlan li{display:flex;gap:9px;color:#c3cecf;font-size:12px}.marksPlan li i{color:#a9e51c;font-style:normal}.marksPlan>.button{min-height:43px}
.marksAccountV363{display:grid;grid-template-columns:minmax(260px,.65fr) 1.35fr;gap:32px;align-items:center;margin-top:14px;padding:34px;border:1px solid rgba(146,174,176,.22);border-radius:8px;background:linear-gradient(120deg,rgba(16,29,33,.98),rgba(7,15,18,.98));box-shadow:0 18px 42px rgba(0,0,0,.24)}
.marksAccountHead h2{margin:0;font:800 30px/1 var(--font-condensed)}.marksAuthEmpty p,.marksCheckout p{margin:0 0 16px;color:#9da9ab;line-height:1.55}.marksLicenseActive>strong,.marksCheckout>strong{display:block;margin-bottom:10px;font:800 18px var(--font-condensed);letter-spacing:.04em}.marksLicenseActive>strong{color:#b5ef2d}.marksLicenseActive>strong i{display:inline-block;width:9px;height:9px;margin-right:9px;border-radius:50%;background:#a9e51c;box-shadow:0 0 14px #a9e51c}.marksLicenseActive p{color:#97a5a7}.marksLicenseActive>div,.marksProviders,.marksOrderResult>div{display:flex;flex-wrap:wrap;gap:8px}.marksAccountV363 .button{min-height:41px;padding:0 16px}.marksAccountV363 .button.subtle{border-color:rgba(255,255,255,.12);color:#879497}.marksOrderResult{margin-top:18px;padding:18px;border:1px solid rgba(169,229,28,.25);border-radius:6px;background:#07100e}.marksOrderResult small,.marksOrderResult strong,.marksOrderResult p,.marksOrderResult em{display:block}.marksOrderResult small{color:#7f8c8e;font:700 9px var(--font-condensed);letter-spacing:.15em}.marksOrderResult strong{margin:5px 0;color:#b5ef2d;font:800 28px var(--font-condensed);letter-spacing:.08em}.marksOrderResult p{margin:0 0 12px;color:#b8c4c5}.marksOrderResult em{margin-top:12px;color:#879496;font-size:11px;font-style:normal}
.marksSalesPending{display:inline-flex;min-height:40px;align-items:center;padding:0 15px;border:1px solid rgba(218,176,63,.24);border-radius:5px;color:#d4ad45;background:rgba(218,176,63,.045);font:700 10px var(--font-condensed);letter-spacing:.1em}
.marksTrustV363{display:grid;grid-template-columns:repeat(4,1fr);margin-top:12px;border:1px solid rgba(146,174,176,.17);border-radius:6px;background:#071014}.marksTrustV363 span{padding:16px;text-align:center;border-right:1px solid rgba(146,174,176,.13);color:#9eabad;font:700 10px var(--font-condensed);letter-spacing:.12em}.marksTrustV363 span:last-child{border:0}
@media(max-width:900px){.marksHeroV363{min-height:520px;background-position:62% 50%}.marksHeroCopy{width:auto;padding:54px 28px}.marksHeroBadge{right:20px;bottom:20px}.marksCompareV363,.marksAccountV363{grid-template-columns:1fr}.marksPlan ul{grid-template-columns:1fr}.marksTrustV363{grid-template-columns:1fr 1fr}.marksTrustV363 span:nth-child(2){border-right:0}}
@media(max-width:560px){.marksPageV363{width:calc(100% - 18px);margin-top:9px}.marksHeroV363{min-height:600px}.marksHeroCopy{padding:38px 20px}.marksHeroCopy h1{font-size:43px}.marksHeroCopy>div{flex-direction:column}.marksHeroBadge{left:20px;right:auto}.marksPlan,.marksAccountV363{padding:22px}.marksLicenseActive>div,.marksProviders{flex-direction:column}.marksAccountV363 .button{width:100%}.marksTrustV363{grid-template-columns:1fr}}

/* =====================================================================
   v0.3.5.366 — FERMANI MARKS PRO FULL PRODUCT STORY + FREE VS PRO
   ===================================================================== */
.marksPageV366{--marks-lime:#a9e51c;--marks-gold:#d8ad45;--marks-blue:#62b9d5}
.marksHeroV366{min-height:540px;background-position:69% 48%}
.marksHeroV366:after{background:linear-gradient(90deg,rgba(3,9,11,.98) 0%,rgba(5,13,15,.91) 36%,rgba(5,10,12,.20) 68%,rgba(4,8,10,.58) 100%),linear-gradient(0deg,rgba(2,7,9,.88),transparent 52%)}
.marksHeroV366 .marksHeroCopy{width:min(690px,62%);padding-top:68px}
.marksHeroV366 .marksHeroCopy h1{font-size:clamp(46px,5.2vw,76px)}
.marksHeroV366 .marksHeroCopy h1 em{display:block;color:var(--marks-lime);font-style:normal}
.marksHeroV366 .marksHeroCopy>strong{display:block;max-width:625px;margin-top:18px;color:#f0f5f2;font:800 18px/1.25 var(--font-condensed);letter-spacing:.035em;text-shadow:0 3px 18px #000}
.marksHeroV366 .marksHeroCopy p{max-width:630px;margin-top:15px;color:#aebbbd}
.marksInsightV366{display:grid;grid-template-columns:190px 1fr;gap:30px;align-items:center;margin-top:14px;padding:26px 32px;border:1px solid rgba(145,176,179,.20);border-radius:8px;background:linear-gradient(120deg,rgba(13,28,32,.97),rgba(6,15,18,.98));box-shadow:0 18px 42px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.035)}
.marksInsightV366>span,.marksSectionHeadV366>span,.marksEditionStoryV366 article>span,.marksFinalCtaV366>div>span{color:var(--marks-lime);font:800 10px/1.2 var(--font-condensed);letter-spacing:.19em}
.marksInsightV366 p{margin:0;color:#d2dcda;font:700 clamp(17px,1.7vw,23px)/1.4 var(--font-condensed)}
.marksModesV366,.marksCompareTableV366,.marksProofV366{margin-top:14px;padding:34px;border:1px solid rgba(145,176,179,.20);border-radius:8px;background:linear-gradient(145deg,rgba(14,29,34,.97),rgba(5,14,18,.99));box-shadow:0 22px 48px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.035)}
.marksSectionHeadV366{max-width:900px}
.marksSectionHeadV366 h2{margin:9px 0 0;color:#f0f5f3;font:800 clamp(28px,3vw,42px)/1 var(--font-condensed);letter-spacing:-.015em}
.marksSectionHeadV366 p{max-width:820px;margin:13px 0 0;color:#8f9da0;font-size:14px;line-height:1.65}
.marksModesGridV366{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px;margin-top:28px}
.marksModeCard{--mode-accent:169,229,28;grid-column:span 2;position:relative;display:flex;min-height:330px;flex-direction:column;padding:23px 21px 20px;overflow:hidden;border:1px solid rgba(var(--mode-accent),.18);border-radius:8px;background:radial-gradient(circle at 100% 0,rgba(var(--mode-accent),.08),transparent 38%),linear-gradient(180deg,rgba(24,39,43,.95),rgba(7,16,19,.98));box-shadow:0 18px 38px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.035)}
.marksModeCard:nth-child(4),.marksModeCard:nth-child(5){grid-column:span 3;min-height:305px}
.marksMode-session{--mode-accent:87,182,211}.marksMode-records{--mode-accent:216,173,69}.marksMode-goals{--mode-accent:169,229,28}.marksMode-info{--mode-accent:153,174,180}
.marksModeCard:before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,rgba(var(--mode-accent),.9),rgba(var(--mode-accent),0))}
.marksModeCard header{display:flex;gap:14px;padding-bottom:17px;border-bottom:1px solid rgba(188,208,210,.12)}
.marksModeCard header>span{min-width:34px;color:rgba(var(--mode-accent),.7);font:800 25px/1 var(--font-condensed)}
.marksModeCard h3{margin:0;color:#eef3f1;font:800 24px/1 var(--font-condensed);letter-spacing:.045em}
.marksModeCard header p{margin:6px 0 0;color:#89989a;font-size:11px;line-height:1.35}
.marksModeCard ul{display:grid;gap:9px;margin:18px 0;padding:0;list-style:none}
.marksModeCard li{display:flex;gap:9px;color:#b9c5c5;font-size:12px;line-height:1.35}
.marksModeCard li i{flex:0 0 5px;width:5px;height:5px;margin-top:5px;border-radius:50%;background:rgb(var(--mode-accent));box-shadow:0 0 10px rgba(var(--mode-accent),.4)}
.marksModeCard>strong{display:block;margin-top:auto;padding-top:15px;border-top:1px solid rgba(var(--mode-accent),.13);color:rgb(var(--mode-accent));font:700 12px/1.45 var(--font-condensed)}
.marksCompareTableV366{position:relative;overflow:hidden}
.marksCompareTableV366:after{content:"";position:absolute;pointer-events:none;right:-110px;top:-180px;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,rgba(169,229,28,.055),transparent 68%)}
.marksTableScrollV366{position:relative;z-index:1;margin-top:27px;overflow-x:auto;border:1px solid rgba(158,184,186,.18);border-radius:7px;background:rgba(3,10,12,.54)}
.marksTableScrollV366 table{width:100%;min-width:660px;border-collapse:collapse}
.marksTableScrollV366 th,.marksTableScrollV366 td{padding:12px 18px;border-bottom:1px solid rgba(158,184,186,.10)}
.marksTableScrollV366 thead th{color:#aebabc;background:rgba(25,41,46,.82);font:800 11px var(--font-condensed);letter-spacing:.12em;text-align:center}
.marksTableScrollV366 thead th:first-child{text-align:left}.marksTableScrollV366 thead th:last-child{color:var(--marks-lime);background:rgba(104,145,14,.11)}
.marksTableScrollV366 tbody th{color:#bac5c6;font-size:12px;font-weight:600;text-align:left}.marksTableScrollV366 tbody td{width:120px;text-align:center}.marksTableScrollV366 tbody tr:last-child>*{border-bottom:0}
.marksTableScrollV366 tbody tr:hover{background:rgba(255,255,255,.022)}.marksTableScrollV366 tbody .marksProOnly{background:linear-gradient(90deg,transparent,rgba(169,229,28,.025))}
.marksCompareState{display:inline-grid;width:24px;height:24px;place-items:center;border-radius:50%;font:800 13px var(--font-condensed)}
.marksCompareState.isYes{color:#c5f04f;border:1px solid rgba(169,229,28,.28);background:rgba(169,229,28,.09);box-shadow:0 0 15px rgba(169,229,28,.045)}.marksCompareState.isNo{color:#68767a;border:1px solid rgba(139,159,163,.14);background:rgba(139,159,163,.035)}
.marksEditionStoryV366{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.marksEditionStoryV366 article{position:relative;display:flex;min-height:315px;flex-direction:column;padding:31px;border:1px solid rgba(145,176,179,.20);border-radius:8px;background:linear-gradient(145deg,rgba(19,34,39,.97),rgba(6,15,18,.99));box-shadow:0 20px 44px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.035)}
.marksEditionStoryV366 .marksEditionPro{border-color:rgba(169,229,28,.29);background:radial-gradient(circle at 100% 0,rgba(169,229,28,.09),transparent 40%),linear-gradient(145deg,rgba(20,37,36,.98),rgba(6,15,16,.99))}
.marksEditionStoryV366 h2{max-width:530px;margin:12px 0;color:#edf3f1;font:800 28px/1.08 var(--font-condensed)}
.marksEditionStoryV366 p{max-width:590px;margin:0;color:#929fa1;font-size:13px;line-height:1.65}.marksEditionStoryV366 article>strong{display:block;margin:18px 0;color:#d8e1df;font:700 14px/1.4 var(--font-condensed)}
.marksEditionStoryV366 .marksEditionPro>strong{color:#c5ef55}.marksEditionStoryV366 .button{align-self:flex-start;margin-top:auto;min-height:43px}
.marksProofV366{border-color:rgba(216,173,69,.22);background:radial-gradient(ellipse 55% 65% at 78% 20%,rgba(216,173,69,.07),transparent 70%),linear-gradient(145deg,rgba(22,31,31,.98),rgba(7,14,17,.99))}
.marksProofV366 .marksSectionHeadV366>span{color:var(--marks-gold)}
.marksProofStatsV366{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:25px}
.marksProofStatsV366>div{padding:18px 14px;border:1px solid rgba(179,196,196,.14);border-radius:6px;background:rgba(5,12,14,.58);text-align:center}.marksProofStatsV366 strong{display:block;color:#e9efed;font:800 25px/1 var(--font-condensed)}.marksProofStatsV366 small{display:block;margin-top:8px;color:#758487;font:700 9px var(--font-condensed);letter-spacing:.1em}.marksProofStatsV366 .isPositive strong{color:var(--marks-lime)}
.marksProofV366 blockquote{margin:19px 0 0;padding:18px 22px;border-left:2px solid var(--marks-gold);background:rgba(216,173,69,.035);color:#d9dfdd;font:700 16px/1.55 var(--font-condensed)}
.marksFinalCtaV366{display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center;margin-top:14px;padding:38px 36px;border:1px solid rgba(169,229,28,.30);border-radius:8px;background:radial-gradient(ellipse 46% 90% at 86% 50%,rgba(169,229,28,.11),transparent 72%),linear-gradient(120deg,rgba(14,30,31,.99),rgba(5,14,16,.99));box-shadow:0 24px 52px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.04)}
.marksFinalCtaV366 h2{max-width:880px;margin:11px 0;color:#f0f5f2;font:800 clamp(30px,3.4vw,48px)/.98 var(--font-condensed)}.marksFinalCtaV366 p{max-width:850px;margin:16px 0;color:#9ba8aa;font-size:13px;line-height:1.6}.marksFinalCtaV366>.button{min-height:50px;padding:0 26px}
.marksFinalLinesV366{display:flex;gap:10px;flex-wrap:wrap}.marksFinalLinesV366 strong{padding:9px 12px;border:1px solid rgba(155,177,180,.14);border-radius:5px;color:#aab6b7;background:rgba(3,10,12,.36);font:700 11px var(--font-condensed)}.marksFinalLinesV366 strong:last-child{color:#c6ef58;border-color:rgba(169,229,28,.22);background:rgba(169,229,28,.045)}
@media(max-width:1050px){.marksModesGridV366{grid-template-columns:1fr 1fr}.marksModeCard,.marksModeCard:nth-child(4),.marksModeCard:nth-child(5){grid-column:auto}.marksModeCard:last-child{grid-column:1/-1}.marksProofStatsV366{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.marksHeroV366 .marksHeroCopy{width:auto}.marksInsightV366{grid-template-columns:1fr;gap:9px}.marksEditionStoryV366{grid-template-columns:1fr}.marksFinalCtaV366{grid-template-columns:1fr}.marksFinalCtaV366>.button{justify-self:start}}
@media(max-width:620px){.marksHeroV366{min-height:650px}.marksHeroV366 .marksHeroCopy{padding:34px 20px}.marksHeroV366 .marksHeroCopy h1{font-size:42px}.marksHeroV366 .marksHeroCopy>strong{font-size:15px}.marksInsightV366,.marksModesV366,.marksCompareTableV366,.marksProofV366,.marksFinalCtaV366{padding:23px 19px}.marksModesGridV366{grid-template-columns:1fr}.marksModeCard:last-child{grid-column:auto}.marksProofStatsV366{grid-template-columns:repeat(2,1fr)}.marksEditionStoryV366 article{min-height:0;padding:24px 20px}.marksFinalCtaV366>.button{width:100%}.marksFinalLinesV366{flex-direction:column}.marksTableScrollV366 th,.marksTableScrollV366 td{padding:11px 13px}}

/* Fermani Marks Pro is the page's signature product moment. */
body.aboutPageActive .aboutProV362{
  display:grid!important;
  grid-template-columns:minmax(0,1.22fr) minmax(400px,.78fr)!important;
  gap:0!important;
  min-height:490px!important;
  margin-top:18px!important;
  overflow:hidden!important;
  border:1px solid rgba(172,213,87,.23)!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,rgba(16,31,35,.97),rgba(5,14,18,.99))!important;
  box-shadow:0 34px 72px -28px rgba(0,0,0,.88),0 0 42px rgba(169,229,27,.025),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
body.aboutPageActive .aboutProVisualV362{position:relative;min-height:490px;overflow:hidden;background:#050b0e}
body.aboutPageActive .aboutProVisualV362 img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:49% center;filter:saturate(1.05) contrast(1.06) brightness(.84);transform:scale(1.012)}
body.aboutPageActive .aboutProVisualShadeV362{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,10,13,.07),rgba(4,10,13,.02) 62%,rgba(4,10,13,.76) 100%),linear-gradient(180deg,rgba(2,7,9,.03),transparent 58%,rgba(3,9,12,.70) 100%)}
body.aboutPageActive .aboutProBadgeV362{position:absolute;left:22px;top:21px;padding:8px 11px;border:1px solid rgba(169,229,27,.43);border-radius:5px;background:rgba(5,13,16,.78);color:#c9f24f;font-size:11px;font-weight:900;letter-spacing:.10em;box-shadow:0 10px 22px rgba(0,0,0,.28),0 0 18px rgba(169,229,27,.075);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body.aboutPageActive .aboutProCopyV362{position:relative;display:flex;flex-direction:column;justify-content:center;padding:38px 38px 38px 34px}
body.aboutPageActive .aboutProCopyV362:before{content:"";position:absolute;left:0;top:38px;bottom:38px;width:1px;background:linear-gradient(180deg,transparent,rgba(169,229,27,.42),transparent)}
body.aboutPageActive .aboutProCopyV362 h2{font-size:36px!important}
body.aboutPageActive .aboutProCopyV362>p{margin:15px 0 0!important}
body.aboutPageActive .aboutProFeatureGridV362{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:22px}
body.aboutPageActive .aboutProFeatureGridV362 span{position:relative;min-height:42px;display:flex;align-items:center;padding:9px 10px 9px 28px;border:1px solid rgba(187,209,213,.12);border-radius:6px;background:rgba(255,255,255,.018);color:#b7c4bf;font-size:13px;line-height:1.35}
body.aboutPageActive .aboutProFeatureGridV362 span:before{content:"";position:absolute;left:11px;width:7px;height:7px;border-radius:50%;background:#a9e51b;box-shadow:0 0 9px rgba(169,229,27,.35)}
body.aboutPageActive .aboutProButtonV362{align-self:flex-start;min-height:43px!important;margin-top:22px!important;padding:0 18px!important;font-size:11px!important}

/* Future tools and public direction stay concrete without pretending dates. */
body.aboutPageActive .aboutToolGridV362{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:23px}
body.aboutPageActive .aboutToolGridV362 article{position:relative;min-height:118px;padding:20px;border:1px solid rgba(183,204,209,.13);border-radius:8px;background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(5,14,18,.36))}
body.aboutPageActive .aboutToolGridV362 article>span{position:absolute;right:15px;bottom:8px;color:rgba(175,196,199,.11);font-size:48px;font-weight:900}
body.aboutPageActive .aboutToolGridV362 em{display:inline-block;color:#a9e51b;font-size:9px;font-style:normal;font-weight:900;letter-spacing:.13em}
body.aboutPageActive .aboutToolGridV362 h3{max-width:82%;margin:19px 0 0;color:#e4ece8;font-size:15px;line-height:1.35;text-transform:uppercase}
body.aboutPageActive .aboutRoadmapV362{position:relative;overflow:hidden;background:radial-gradient(ellipse 60% 230px at 80% 0,rgba(214,164,65,.045),transparent 75%),linear-gradient(145deg,rgba(14,28,33,.94),rgba(5,14,18,.98))!important}
body.aboutPageActive .aboutRoadmapGridV362{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:22px}
body.aboutPageActive .aboutRoadmapGridV362 span{min-height:52px;display:flex;align-items:center;padding:11px 14px;border-left:2px solid rgba(169,229,27,.54);background:linear-gradient(90deg,rgba(169,229,27,.045),rgba(255,255,255,.010));color:#b8c5c0;font-size:11px;font-weight:900;letter-spacing:.065em}

/* Creator, trust and final action complete the human side of the platform. */
body.aboutPageActive .aboutCreator{
  margin-top:16px!important;
  padding:30px!important;
  border:1px solid rgba(182,204,209,.17)!important;
  border-radius:10px!important;
  background:linear-gradient(145deg,rgba(14,28,33,.95),rgba(5,14,18,.98))!important;
  box-shadow:0 25px 55px -27px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.034)!important;
}
body.aboutPageActive .aboutCreatorMark{border-color:rgba(169,229,27,.22)!important;background:radial-gradient(circle at 50% 30%,rgba(169,229,27,.075),transparent 64%),#081216!important}
body.aboutPageActive .aboutSocialLink{background:linear-gradient(145deg,rgba(13,26,30,.96),rgba(5,14,18,.98))!important}
body.aboutPageActive .aboutTrustGridV362{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:24px}
body.aboutPageActive .aboutTrustGridV362 article{display:grid;grid-template-columns:36px minmax(0,1fr);gap:13px;min-height:150px;padding:20px;border:1px solid rgba(182,204,209,.13);border-radius:8px;background:rgba(255,255,255,.016)}
body.aboutPageActive .aboutTrustGridV362 article>b{width:32px;height:32px;display:grid;place-items:center;border:1px solid rgba(169,229,27,.25);border-radius:50%;color:#b9e449;font-size:10px}
body.aboutPageActive .aboutTrustGridV362 h3{margin:3px 0 8px;color:#e8efec;font-size:14px;text-transform:uppercase;letter-spacing:.035em}
body.aboutPageActive .aboutTrustGridV362 p{margin:0;color:#909f9a;font-size:14px;line-height:1.58}
body.aboutPageActive .aboutTrustLegalV362{margin:17px 0 0;padding-top:15px;border-top:1px solid rgba(183,204,209,.10);color:#71817d;font-size:12px;line-height:1.55;text-align:center}
body.aboutPageActive .aboutCooperation{
  margin-top:16px!important;
  padding:34px!important;
  border-color:rgba(169,229,27,.23)!important;
  border-radius:10px!important;
  background:linear-gradient(125deg,rgba(17,33,35,.98),rgba(5,14,18,.99))!important;
  box-shadow:0 27px 59px -26px rgba(0,0,0,.86),0 0 34px rgba(169,229,27,.025),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
body.aboutPageActive .aboutFinalActionsV362{display:flex;flex-direction:column;gap:9px;min-width:205px}
body.aboutPageActive .aboutFinalActionsV362 .button{width:100%;min-height:44px!important;font-size:11px!important}
body.aboutPageActive .aboutCoopTags span{font-size:10px!important}
body.aboutPageActive .aboutLegal p{color:#5f706d!important;font-size:10px!important;letter-spacing:.11em!important}

@media(max-width:1120px){
  body.aboutPageActive .aboutHeroV362 .aboutHeroInner{grid-template-columns:1fr!important;gap:27px!important}
  body.aboutPageActive .aboutPlatformPanelV362{max-width:620px!important;justify-self:start!important}
  body.aboutPageActive .aboutJourneyStepsV362{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.aboutPageActive .aboutJourneyStepsV362 article:not(:last-child):after{display:none!important}
  body.aboutPageActive .aboutProV362{grid-template-columns:1fr!important}
  body.aboutPageActive .aboutProVisualV362{min-height:440px!important}
  body.aboutPageActive .aboutProCopyV362:before{left:34px;right:34px;top:0;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,transparent,rgba(169,229,27,.42),transparent)}
}
@media(max-width:820px){
  body.aboutPageActive .aboutStory{grid-template-columns:1fr!important;gap:19px!important}
  body.aboutPageActive .aboutCapabilities{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.aboutPageActive .aboutToolGridV362,
  body.aboutPageActive .aboutRoadmapGridV362,
  body.aboutPageActive .aboutTrustGridV362{grid-template-columns:1fr!important}
  body.aboutPageActive .aboutCreator{grid-template-columns:1fr!important}
  body.aboutPageActive .aboutSocialGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.aboutPageActive .aboutCooperation{grid-template-columns:1fr!important}
  body.aboutPageActive .aboutFinalActionsV362{flex-direction:row;min-width:0}
  body.aboutPageActive .aboutPlatformPanelV362,
  body.aboutPageActive .aboutProBadgeV362{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media(max-width:650px){
  body.aboutPageActive{
    background-image:linear-gradient(90deg,rgba(2,6,8,.44),transparent 28%,transparent 72%,rgba(2,6,8,.46)),radial-gradient(ellipse 105vw 430px at 50% 280px,rgba(95,126,136,.075),transparent 79%),linear-gradient(180deg,#050a0d,#08141a 520px,#071218 100%)!important;
  }
  body.aboutPageActive .noise{opacity:.014!important}
  body.aboutPageActive .aboutHero,
  body.aboutPageActive .aboutStory,
  body.aboutPageActive .aboutJourneyV362,
  body.aboutPageActive .aboutCapabilities,
  body.aboutPageActive .aboutProV362,
  body.aboutPageActive .aboutToolsV362,
  body.aboutPageActive .aboutRoadmapV362,
  body.aboutPageActive .aboutCreator,
  body.aboutPageActive .aboutTrustV362,
  body.aboutPageActive .aboutCooperation,
  body.aboutPageActive .aboutLegal{width:calc(100% - 24px)!important}
  body.aboutPageActive .aboutHeroV362 .aboutHeroInner{padding:38px 22px 28px!important}
  body.aboutPageActive .aboutHeroV362:before{left:22px!important;width:190px!important}
  body.aboutPageActive .aboutHeroV362 .aboutHeroCopy h1{font-size:39px!important}
  body.aboutPageActive .aboutHeroV362 .aboutHeroCopy p{font-size:15px!important}
  body.aboutPageActive .aboutHeroActions{flex-direction:column!important}
  body.aboutPageActive .aboutHeroActions .button{width:100%!important}
  body.aboutPageActive .aboutPlatformPanelV362{padding:17px!important}
  body.aboutPageActive .aboutPlatformBrandV362 strong{font-size:21px!important}
  body.aboutPageActive .aboutStory,
  body.aboutPageActive .aboutJourneyV362,
  body.aboutPageActive .aboutToolsV362,
  body.aboutPageActive .aboutRoadmapV362,
  body.aboutPageActive .aboutCreator,
  body.aboutPageActive .aboutTrustV362,
  body.aboutPageActive .aboutCooperation{padding:23px 18px!important}
  body.aboutPageActive .aboutJourneyStepsV362,
  body.aboutPageActive .aboutCapabilities{grid-template-columns:1fr!important}
  body.aboutPageActive .aboutJourneyStepsV362 article{min-height:0!important}
  body.aboutPageActive .aboutProVisualV362{min-height:270px!important}
  body.aboutPageActive .aboutProCopyV362{padding:28px 19px 25px!important}
  body.aboutPageActive .aboutProCopyV362:before{left:19px;right:19px}
  body.aboutPageActive .aboutProCopyV362 h2{font-size:29px!important}
  body.aboutPageActive .aboutProFeatureGridV362{grid-template-columns:1fr!important}
  body.aboutPageActive .aboutSocialGrid{grid-template-columns:1fr!important}
  body.aboutPageActive .aboutFinalActionsV362{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  body.aboutPageActive .aboutCapabilityCard,
  body.aboutPageActive .aboutSocialLink{transition:none!important;transform:none!important}
}

/* ========================================================================
   v0.3.5.390 — ABOUT PAGE CONTENT REBUILD
   Scope: /about only. Removes repeated roadmap/tool claims, presents the
   finished three-mark product, and gives every Fermani WoT channel one role.
   ======================================================================== */
body.aboutPageActive .aboutHeroV390 .aboutHeroCopy h1{max-width:880px!important}
body.aboutPageActive .aboutFlowV390{margin-top:16px!important}
body.aboutPageActive .aboutFlowV390 .aboutSectionHeadV362{max-width:930px}
body.aboutPageActive .aboutFlowV390 .aboutJourneyStepsV362 article{min-height:205px}
body.aboutPageActive .aboutFlowV390 .aboutJourneyStepsV362 h3{max-width:86%}

body.aboutPageActive .aboutProV390{grid-template-columns:minmax(0,1.08fr) minmax(460px,.92fr)!important}
body.aboutPageActive .aboutProV390 .aboutProVisualV362 img{object-position:48% center;filter:saturate(1.04) contrast(1.07) brightness(.89)}
body.aboutPageActive .aboutProV390 .aboutProFeatureGridV362 span:last-child{grid-column:1/-1}
body.aboutPageActive .aboutProPrivacyV390{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;margin-top:10px;padding:11px 12px;border:1px solid rgba(225,183,72,.24);border-radius:6px;background:linear-gradient(90deg,rgba(225,183,72,.075),rgba(225,183,72,.018));color:#aebbb7;font-size:12px;line-height:1.42}
body.aboutPageActive .aboutProPrivacyV390 b{padding:5px 7px;border:1px solid rgba(225,183,72,.34);border-radius:4px;color:#e0b648;font-size:10px;letter-spacing:.09em}

body.aboutPageActive .aboutCreatorV390{display:grid!important;grid-template-columns:minmax(330px,.82fr) minmax(0,1.18fr)!important;grid-template-rows:auto 1fr;gap:18px 28px!important;align-items:start!important}
body.aboutPageActive .aboutCreatorV390 .aboutCreatorIdentity{grid-row:1/3;align-self:center}
body.aboutPageActive .aboutCreatorV390 .aboutCreatorIdentity p{max-width:520px!important}
body.aboutPageActive .aboutSocialHeadingV390{display:grid;gap:7px;padding-bottom:2px}
body.aboutPageActive .aboutSocialHeadingV390 p{margin:0;color:#84938e;font-size:12px;line-height:1.5}
body.aboutPageActive .aboutCreatorV390 .aboutSocialGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
body.aboutPageActive .aboutCreatorV390 .aboutSocialLink{min-height:76px!important}
body.aboutPageActive .aboutSocial-email{--social-brand:#e1b748;--social-rgb:225,183,72}
body.aboutPageActive .aboutSocial-telegramChat{--social-brand:#77c8ef;--social-rgb:119,200,239}

body.aboutPageActive .aboutTrustV362{margin-top:16px!important}
body.aboutPageActive .aboutTrustGridV362 article{min-height:168px}
body.aboutPageActive .aboutCooperation{margin-top:16px!important}

@media(max-width:1120px){
  body.aboutPageActive .aboutProV390{grid-template-columns:1fr!important}
  body.aboutPageActive .aboutCreatorV390{grid-template-columns:1fr!important;grid-template-rows:auto!important}
  body.aboutPageActive .aboutCreatorV390 .aboutCreatorIdentity{grid-row:auto}
  body.aboutPageActive .aboutCreatorV390 .aboutSocialGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:820px){
  body.aboutPageActive .aboutCreatorV390 .aboutSocialGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:650px){
  body.aboutPageActive .aboutFlowV390 .aboutJourneyStepsV362 article{min-height:0}
  body.aboutPageActive .aboutProPrivacyV390{grid-template-columns:1fr}
  body.aboutPageActive .aboutCreatorV390 .aboutCreatorIdentity{grid-template-columns:54px minmax(0,1fr)!important}
  body.aboutPageActive .aboutCreatorV390 .aboutSocialGrid{grid-template-columns:1fr!important}
  body.aboutPageActive .aboutCreatorV390 .aboutSocialLink{min-height:70px!important}
}

/* ========================================================================
   v0.3.5.391 — PUBLIC FOOTER + REAL SVG LANGUAGE FLAGS
   ======================================================================== */
.rhLanguageToggle{min-width:132px!important;justify-content:flex-start!important;padding:0 12px!important;gap:8px!important;letter-spacing:0!important}
.rhLanguageToggle>b{min-width:0;overflow:hidden;color:#e2e8e5;font-size:11px;line-height:1;text-overflow:ellipsis;white-space:nowrap}
.rhLanguageToggle>span{display:none;color:#dce2df;font:800 10px/1 var(--approved-font);letter-spacing:.08em}
.rhLanguageToggle>em{margin-left:auto}
.rhLanguageFlag{width:20px!important;height:14px!important;flex-basis:20px!important;border-color:rgba(255,255,255,.38)!important;border-radius:2px!important;background-color:#0a0f11!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;box-shadow:0 1px 4px rgba(0,0,0,.48),inset 0 0 0 1px rgba(0,0,0,.13)!important}
.rhLanguageFlag-uk{background-image:url('/assets/ui/flags/uk.svg')!important}
.rhLanguageFlag-ru{background-image:url('/assets/ui/flags/ru.svg')!important}
.rhLanguageFlag-en{background-image:url('/assets/ui/flags/en.svg')!important}
.rhLanguageFlag-pl{background-image:url('/assets/ui/flags/pl.svg')!important}
.rhLanguageMenu{width:206px!important}
.rhLanguageMenu button{grid-template-columns:23px 29px 1fr 16px!important;min-height:42px!important}
.rhLanguageMenu button span{font-size:12px!important}

body>.siteFooterV391,body.homePageActive>.siteFooterV391{display:block!important;width:min(1410px,calc(100% - 40px))!important;max-width:1410px!important;margin:42px auto 0!important;padding:0!important;border:1px solid rgba(183,204,198,.13)!important;border-radius:10px 10px 0 0!important;background:linear-gradient(145deg,rgba(13,24,23,.97),rgba(5,12,13,.99))!important;color:#7f8e88!important;box-shadow:0 -18px 48px rgba(0,0,0,.15),inset 0 1px rgba(255,255,255,.025)!important;font-size:11px!important}
.siteFooterMainV391{display:grid;grid-template-columns:minmax(300px,1.15fr) auto minmax(280px,.85fr);gap:34px;align-items:center;padding:30px 32px}
.siteFooterBrandV391{min-width:0;display:flex;align-items:center;gap:14px;color:#edf3ef;text-decoration:none}
.siteFooterBrandV391>img{width:40px;height:auto;opacity:.92;filter:drop-shadow(0 6px 12px rgba(0,0,0,.32))}
.siteFooterBrandV391>span{min-width:0;display:grid;gap:6px}
.siteFooterBrandV391 strong{color:#eef3f0!important;font-size:18px;letter-spacing:.01em}.siteFooterBrandV391 strong span{color:#a9e51b}
.siteFooterBrandV391 small{max-width:420px;color:#788781;font-size:10px;line-height:1.45}
.siteFooterNavV391{display:flex!important;gap:19px!important;align-items:center!important}
.siteFooterNavV391 a{color:#a1aea8!important;font-size:10px!important;font-weight:850!important;letter-spacing:.06em!important;text-transform:uppercase!important;text-decoration:none!important}
.siteFooterNavV391 a:hover{color:#c9ed6c!important}
.siteFooterLinksV391{display:grid;grid-template-columns:1fr;gap:7px;justify-self:end}
.siteFooterLinksV391 a{display:flex;align-items:center;gap:8px;color:#9caaa4;text-decoration:none;font-size:10px;line-height:1.2}.siteFooterLinksV391 a:hover{color:#d7e1dc}
.siteFooterLinksV391 img{width:14px;height:14px;object-fit:contain;opacity:.72;filter:grayscale(.18)}
.siteFooterBottomV391{display:grid;grid-template-columns:auto minmax(260px,1fr) auto;gap:24px;align-items:center;padding:14px 32px;border-top:1px solid rgba(183,204,198,.10);background:rgba(3,9,10,.38);color:#5f7069;font-size:9px;line-height:1.45}
.siteFooterBottomV391 span:nth-child(2){text-align:center}.siteFooterBottomV391>b{color:#9ecf31!important;font-size:9px;letter-spacing:.05em}

@media(max-width:1220px){
  .rhLanguageToggle{min-width:68px!important}
  .rhLanguageToggle>b{display:none}
  .rhLanguageToggle>span{display:inline}
  .siteFooterMainV391{grid-template-columns:1fr auto;gap:24px}.siteFooterNavV391{justify-self:end}.siteFooterLinksV391{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));justify-self:stretch;padding-top:18px;border-top:1px solid rgba(183,204,198,.08)}
}
@media(max-width:760px){
  body>.siteFooterV391,body.homePageActive>.siteFooterV391{width:calc(100% - 24px)!important;margin-top:28px!important}
  .siteFooterMainV391{grid-template-columns:1fr;padding:24px 20px}.siteFooterNavV391{justify-self:start;flex-wrap:wrap}.siteFooterLinksV391{grid-column:auto;grid-template-columns:1fr}.siteFooterBottomV391{grid-template-columns:1fr;gap:7px;padding:14px 20px}.siteFooterBottomV391 span:nth-child(2){text-align:left}
}


/* =====================================================================
   v0.3.5.371 — ACCOUNT + MARKS PRO ENTRY FOUNDATION
   ===================================================================== */
body.accountPageActive{background:radial-gradient(circle at 50% -10%,rgba(73,104,67,.14),transparent 35%),linear-gradient(180deg,#080c0b 0%,#0b1110 58%,#080c0b 100%)}
.accountPageV371{width:min(1380px,calc(100% - 36px));margin:18px auto 52px;color:#e8eeee}
.accountHeroV371{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:26px;align-items:center;min-height:230px;padding:38px 42px;overflow:hidden;border:1px solid rgba(185,205,197,.16);border-radius:12px;background:linear-gradient(118deg,rgba(21,31,29,.98),rgba(9,16,15,.98) 62%,rgba(26,37,27,.96));box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035)}
.accountHeroV371::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(181,232,70,.42),transparent)}
.accountHeroGlowV371{position:absolute;width:420px;height:420px;right:-150px;top:-240px;border-radius:50%;background:radial-gradient(circle,rgba(169,229,28,.12),rgba(169,229,28,0) 68%);pointer-events:none}
.accountAvatarV371{position:relative;z-index:1;display:grid;place-items:center;width:104px;height:104px;border:1px solid rgba(185,205,197,.22);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.018));box-shadow:0 15px 36px rgba(0,0,0,.26);overflow:hidden}
.accountAvatarV371>img{width:100%;height:100%;object-fit:cover}.accountAvatarV371>span{font:900 34px/1 var(--font-condensed);letter-spacing:.04em;color:#eef5ef}.accountAvatarV371>i{position:absolute;right:7px;bottom:7px;display:grid;place-items:center;width:29px;height:20px;border-radius:5px;background:#181f1c;color:#b8ee35;border:1px solid rgba(184,238,53,.34);font:900 9px/1 var(--font-condensed);font-style:normal;letter-spacing:.08em}
.accountHeroCopyV371{position:relative;z-index:1;min-width:0}.accountHeroCopyV371>span,.accountCardV371 header>span,.accountPrivacyV371>span,.accountLoginV371>span{display:block;color:#a9e51c;font:800 10px/1.1 var(--font-condensed);letter-spacing:.18em}.accountHeroCopyV371 h1{margin:8px 0 9px;font:900 clamp(34px,4vw,58px)/.95 var(--font-condensed);letter-spacing:-.025em;color:#f1f5f3}.accountHeroCopyV371>p{max-width:760px;margin:0;color:#9ba8a3;font-size:14px;line-height:1.58}
.accountIdentityV371{display:flex;align-items:baseline;gap:12px;margin-top:18px}.accountIdentityV371 strong{font:800 18px/1 var(--font-condensed);color:#dfe9e3}.accountIdentityV371 small{color:#75817c;font:700 10px/1 var(--font-condensed);letter-spacing:.08em}
.accountMetaV371{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;min-width:300px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:rgba(5,10,9,.38);overflow:hidden}.accountMetaV371>div{padding:18px 20px}.accountMetaV371>div+div{border-left:1px solid rgba(255,255,255,.07)}.accountMetaV371 span{display:block;margin-bottom:6px;color:#75817c;font:700 9px/1 var(--font-condensed);letter-spacing:.11em;text-transform:uppercase}.accountMetaV371 strong{font:800 14px/1.1 var(--font-condensed);color:#d8e1dc}
.accountGridV371{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.accountCardV371{position:relative;display:flex;min-height:330px;flex-direction:column;padding:31px;border:1px solid rgba(177,199,190,.14);border-radius:11px;background:linear-gradient(145deg,rgba(20,29,27,.97),rgba(8,14,13,.98));box-shadow:0 20px 44px rgba(0,0,0,.18);overflow:hidden}.accountCardV371::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,rgba(169,229,28,.7),rgba(169,229,28,0) 62%);opacity:.52}.accountProCardV371::before{background:linear-gradient(90deg,rgba(227,190,91,.82),rgba(227,190,91,0) 62%)}
.accountCardV371 header{position:relative;z-index:1}.accountProCardV371 header>span{color:#dfbd67}.accountCardV371 header h2{margin:8px 0 0;font:850 29px/1 var(--font-condensed);color:#edf2ef}.accountCardStateV371,.accountStatusV371{position:relative;z-index:1;margin-top:28px;padding:20px;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:rgba(4,9,8,.28)}.accountCardStateV371.isReady,.accountStatusV371.isActive{border-color:rgba(169,229,28,.18);background:linear-gradient(120deg,rgba(60,79,37,.13),rgba(4,9,8,.3))}.accountCardStateV371>strong,.accountStatusV371>strong{display:block;color:#e1e8e4;font:800 18px/1.1 var(--font-condensed)}.accountCardStateV371.isReady>strong,.accountStatusV371.isActive>strong{color:#b6ec3d}.accountCardStateV371 p,.accountStatusV371>span{display:block;margin:9px 0 0;color:#8f9c97;font-size:12px;line-height:1.55}.accountCardStateV371 small{display:block;margin-top:13px;color:#7e8a85;font:700 10px/1 var(--font-condensed);letter-spacing:.06em}.accountCardStateV371 small b{color:#d9e4de;font-size:13px}.accountStatusV371.isActive{padding-left:42px}.accountStatusV371.isActive>i{position:absolute;left:20px;top:23px;width:9px;height:9px;border-radius:50%;background:#a9e51c;box-shadow:0 0 13px rgba(169,229,28,.8)}
.accountCardV371 footer{position:relative;z-index:1;margin-top:auto;padding-top:24px}.accountCardV371 footer .button{min-height:42px;padding:0 18px}.accountProCardV371 footer .button{border-color:rgba(223,189,103,.24);color:#e1c77f}
.accountPrivacyV371{display:flex;gap:19px;align-items:flex-start;margin-top:16px;padding:20px 24px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:rgba(13,20,18,.72)}.accountPrivacyV371>span{flex:0 0 auto;margin-top:3px}.accountPrivacyV371>p{margin:0;color:#7f8d87;font-size:12px;line-height:1.55}
.accountLoginV371{display:flex;min-height:520px;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px;border:1px solid rgba(185,205,197,.14);border-radius:12px;background:linear-gradient(145deg,rgba(19,28,26,.98),rgba(7,13,12,.98));box-shadow:0 24px 70px rgba(0,0,0,.25)}.accountWgMarkV371{display:grid;place-items:center;width:74px;height:54px;margin:24px 0 16px;border:1px solid rgba(169,229,28,.24);border-radius:10px;background:rgba(169,229,28,.055);color:#b6eb3d;font:900 20px/1 var(--font-condensed);letter-spacing:.08em}.accountLoginV371 h1{margin:0;font:900 42px/1 var(--font-condensed)}.accountLoginV371 p{max-width:620px;margin:15px 0 25px;color:#909d98;line-height:1.6}.accountLoginV371 .button{min-height:44px;padding:0 22px}
@media(max-width:1050px){.accountHeroV371{grid-template-columns:auto 1fr}.accountMetaV371{grid-column:1/-1;width:100%}.accountGridV371{grid-template-columns:1fr}}
@media(max-width:620px){.accountPageV371{width:calc(100% - 18px);margin-top:9px}.accountHeroV371{grid-template-columns:1fr;padding:26px 22px}.accountAvatarV371{width:82px;height:82px;border-radius:18px}.accountHeroCopyV371 h1{font-size:38px}.accountIdentityV371{align-items:flex-start;flex-direction:column;gap:6px}.accountMetaV371{grid-template-columns:1fr;min-width:0}.accountMetaV371>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.07)}.accountCardV371{padding:24px;min-height:300px}.accountCardV371 header h2{font-size:25px}.accountCardV371 footer .button{width:100%}.accountPrivacyV371{flex-direction:column;gap:8px}.accountLoginV371{min-height:450px;padding:34px 22px}.accountLoginV371 h1{font-size:35px}}


/* =====================================================================
   v0.3.5.372 — PRIVATE /me/marks + PRO STATUS
   Owner-only Marks PRO shell. No fake analytics and no public record mixing.
   ===================================================================== */
.marksPrivatePageV372{width:min(1380px,calc(100% - 36px));margin:18px auto 52px;color:#e9eeeb}
.marksPrivateHeroV372{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;min-height:240px;padding:40px 42px;overflow:hidden;border:1px solid rgba(222,190,104,.18);border-radius:12px;background:linear-gradient(118deg,rgba(25,28,24,.98),rgba(9,14,13,.99) 60%,rgba(37,31,17,.96));box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035)}
.marksPrivateHeroV372::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(226,191,94,.6),transparent)}
.marksPrivateHeroGlowV372{position:absolute;width:520px;height:520px;right:-170px;top:-320px;border-radius:50%;background:radial-gradient(circle,rgba(222,184,74,.16),rgba(222,184,74,0) 68%);pointer-events:none}.marksPrivateHeroV372>div:not(.marksPrivateHeroGlowV372){position:relative;z-index:1;max-width:800px}.marksPrivateHeroV372>div>span,.marksPrivateModulesV372 header>span,.marksPrivateSyncV372 span,.marksPrivateLoginV372>span{display:block;color:#dfbd67;font:800 10px/1.1 var(--font-condensed);letter-spacing:.18em}.marksPrivateHeroV372 h1{margin:9px 0 11px;font:900 clamp(39px,5vw,68px)/.92 var(--font-condensed);letter-spacing:-.025em;color:#f2f1eb}.marksPrivateHeroV372 p{max-width:760px;margin:0;color:#9b9f99;font-size:14px;line-height:1.6}.marksPrivateHeroV372>.button{position:relative;z-index:1;flex:0 0 auto}
.marksPrivateStatusV372{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:17px;margin-top:16px;padding:22px 26px;border:1px solid rgba(169,229,28,.2);border-radius:10px;background:linear-gradient(118deg,rgba(55,73,34,.17),rgba(8,14,12,.9));box-shadow:0 16px 40px rgba(0,0,0,.16)}.marksPrivateStatusV372>i{width:11px;height:11px;border-radius:50%;background:#a9e51c;box-shadow:0 0 16px rgba(169,229,28,.78)}.marksPrivateStatusV372 strong{display:block;color:#b9ee41;font:850 20px/1 var(--font-condensed)}.marksPrivateStatusV372 span{display:block;margin-top:6px;color:#7f8d87;font:700 10px/1.2 var(--font-condensed);letter-spacing:.07em}.marksPrivateExpiryV372{text-align:right}.marksPrivateExpiryV372 b{display:block;color:#e7e8df;font:800 14px/1.1 var(--font-condensed)}.marksPrivateExpiryV372 small{display:block;margin-top:6px;color:#98a39d;font:700 10px/1 var(--font-condensed);letter-spacing:.05em}
.marksPrivateInactiveV372{margin-top:16px;padding:34px;border:1px solid rgba(222,190,104,.16);border-radius:11px;background:linear-gradient(135deg,rgba(28,27,21,.95),rgba(9,14,13,.98))}.marksPrivateInactiveV372>span{color:#d8b85f;font:850 11px/1 var(--font-condensed);letter-spacing:.15em}.marksPrivateInactiveV372 h2{max-width:760px;margin:12px 0 24px;color:#dfe3df;font:750 19px/1.45 var(--font-condensed)}.marksPrivateInactiveV372>div{display:flex;gap:10px;flex-wrap:wrap}
.marksPrivateSyncV372{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:16px;padding:28px 31px;border:1px solid rgba(255,255,255,.075);border-radius:10px;background:rgba(12,19,17,.87)}.marksPrivateSyncV372 h2{margin:8px 0 8px;font:850 27px/1 var(--font-condensed);color:#edf0ed}.marksPrivateSyncV372 p{max-width:830px;margin:0;color:#89968f;font-size:12px;line-height:1.6}.marksPrivateSyncV372>strong{flex:0 0 auto;padding:11px 14px;border:1px solid rgba(223,189,103,.2);border-radius:7px;color:#ddc178;background:rgba(223,189,103,.045);font:850 10px/1 var(--font-condensed);letter-spacing:.12em}
.marksPrivateModulesV372{margin-top:16px;padding:30px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:linear-gradient(145deg,rgba(18,26,24,.96),rgba(8,13,12,.98))}.marksPrivateModulesV372 header{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;margin-bottom:22px}.marksPrivateModulesV372 header>p{max-width:690px;margin:0;color:#7f8b86;font-size:12px;line-height:1.55;text-align:right}.marksPrivateModulesV372>div{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.marksPrivateModulesV372 article{position:relative;min-height:165px;padding:22px;border:1px solid rgba(255,255,255,.065);border-radius:8px;background:rgba(4,9,8,.27);overflow:hidden}.marksPrivateModulesV372 article>span{color:#69736f;font:800 10px/1 var(--font-condensed);letter-spacing:.12em}.marksPrivateModulesV372 h3{margin:23px 0 8px;font:850 23px/1 var(--font-condensed);color:#dfe5e1}.marksPrivateModulesV372 article>p{margin:0;color:#7f8b86;font-size:11px;line-height:1.5}.marksPrivateModulesV372 article>em{position:absolute;right:14px;top:14px;color:#5f6965;font:800 8px/1 var(--font-condensed);font-style:normal;letter-spacing:.14em}
.marksPrivateRuleV372{display:flex;align-items:flex-start;gap:18px;margin-top:16px;padding:20px 24px;border:1px solid rgba(255,255,255,.065);border-radius:9px;background:rgba(10,16,14,.75)}.marksPrivateRuleV372 b{flex:0 0 auto;color:#a9e51c;font:800 10px/1.1 var(--font-condensed);letter-spacing:.13em}.marksPrivateRuleV372 p{margin:0;color:#7f8b86;font-size:12px;line-height:1.5}
.marksPrivateLoginV372{display:flex;min-height:540px;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px;border:1px solid rgba(222,190,104,.15);border-radius:12px;background:linear-gradient(145deg,rgba(24,25,20,.98),rgba(7,12,11,.99));box-shadow:0 24px 70px rgba(0,0,0,.25)}.marksPrivateLockV372{display:grid;place-items:center;width:78px;height:58px;margin:25px 0 17px;border:1px solid rgba(222,190,104,.25);border-radius:10px;background:rgba(222,190,104,.055);color:#e1c16a;font:900 20px/1 var(--font-condensed)}.marksPrivateLoginV372 h1{margin:0;font:900 42px/1 var(--font-condensed)}.marksPrivateLoginV372 p{max-width:620px;margin:15px 0 25px;color:#909993;line-height:1.6}
@media(max-width:1050px){.marksPrivateModulesV372>div{grid-template-columns:1fr 1fr}.marksPrivateHeroV372{align-items:flex-start;flex-direction:column}.marksPrivateStatusV372{grid-template-columns:auto 1fr}.marksPrivateExpiryV372{grid-column:2;text-align:left}.marksPrivateModulesV372 header{flex-direction:column;gap:10px}.marksPrivateModulesV372 header>p{text-align:left}}
@media(max-width:620px){.marksPrivatePageV372{width:calc(100% - 18px);margin-top:9px}.marksPrivateHeroV372{padding:28px 22px;min-height:260px}.marksPrivateHeroV372 h1{font-size:43px}.marksPrivateHeroV372>.button{width:100%}.marksPrivateStatusV372{padding:20px;grid-template-columns:auto 1fr}.marksPrivateInactiveV372{padding:25px 22px}.marksPrivateInactiveV372 .button{width:100%}.marksPrivateSyncV372{align-items:flex-start;flex-direction:column;padding:24px 22px}.marksPrivateModulesV372{padding:24px 20px}.marksPrivateModulesV372>div{grid-template-columns:1fr}.marksPrivateRuleV372{flex-direction:column;gap:8px}.marksPrivateLoginV372{min-height:460px;padding:36px 22px}.marksPrivateLoginV372 h1{font-size:35px}}

/* =====================================================================
   v0.3.5.372 — ACCOUNT VISUAL POLISH + MARKS PRO PRIVATE SHELL POLISH
   Keeps .371 account architecture, removes technical footer strip,
   compacts the hero and aligns the private PRO area with FermaniHUB UI.
   ===================================================================== */
body.accountPageActive{
  background:
    radial-gradient(circle at 50% -8%,rgba(107,144,78,.14),transparent 34%),
    radial-gradient(circle at 84% 22%,rgba(214,175,74,.055),transparent 27%),
    linear-gradient(180deg,#07100f 0%,#091211 48%,#070d0c 100%)!important;
}
.accountPagePolishV372{width:min(1380px,calc(100% - 36px));margin-top:18px}
.accountPagePolishV372 .accountHeroV371{
  grid-template-columns:92px minmax(0,1fr) minmax(420px,500px);
  gap:24px;
  min-height:188px;
  padding:28px 34px;
  border-color:rgba(180,205,194,.17);
  background:
    linear-gradient(110deg,rgba(20,31,28,.985) 0%,rgba(10,17,16,.985) 58%,rgba(28,38,25,.97) 100%);
  box-shadow:0 22px 58px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.04);
}
.accountPagePolishV372 .accountHeroV371::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 0 58%,rgba(169,229,28,.025) 75%,rgba(220,180,71,.025) 100%)}
.accountPagePolishV372 .accountHeroGlowV371{width:500px;height:500px;right:-180px;top:-320px;background:radial-gradient(circle,rgba(169,229,28,.105),rgba(169,229,28,0) 67%)}
.accountPagePolishV372 .accountAvatarV371{width:88px;height:88px;border-radius:20px;border-color:rgba(201,218,211,.22);box-shadow:0 12px 30px rgba(0,0,0,.29)}
.accountPagePolishV372 .accountAvatarV371>i{right:5px;bottom:5px;width:28px;height:19px}
.accountPagePolishV372 .accountHeroCopyV371 h1{margin:6px 0 7px;font-size:clamp(32px,3.1vw,48px)}
.accountPagePolishV372 .accountHeroCopyV371>p{max-width:680px;font-size:12px;line-height:1.52;color:#94a19c}
.accountPagePolishV372 .accountIdentityV371{margin-top:13px;gap:10px}.accountPagePolishV372 .accountIdentityV371 strong{font-size:16px}
.accountMetaPolishV372{grid-template-columns:.72fr 1.14fr 1.14fr;min-width:0;width:100%;border-color:rgba(255,255,255,.075);background:rgba(3,9,8,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.accountMetaPolishV372>div{min-width:0;padding:18px 17px}.accountMetaPolishV372>div+div{border-left:1px solid rgba(255,255,255,.07)}
.accountMetaPolishV372 span{margin-bottom:7px;font-size:8px;line-height:1.15;white-space:nowrap;color:#75827d}.accountMetaPolishV372 strong{font-size:13px;white-space:nowrap;color:#e1e7e3}
.accountPagePolishV372 .accountGridV371{gap:14px;margin-top:14px}
.accountPagePolishV372 .accountCardV371{min-height:284px;padding:26px 28px;border-color:rgba(180,202,194,.145);background:linear-gradient(145deg,rgba(19,29,26,.975),rgba(8,14,13,.985));box-shadow:0 18px 42px rgba(0,0,0,.20)}
.accountPagePolishV372 .accountProCardV371{background:linear-gradient(145deg,rgba(25,28,22,.98),rgba(9,14,13,.985))}
.accountPagePolishV372 .accountCardV371 header>div{display:flex;align-items:center;gap:10px}.accountPagePolishV372 .accountCardV371 header>div>span:not(.accountCardIconV372){display:block;color:#a9e51c;font:800 9px/1.1 var(--font-condensed);letter-spacing:.18em}.accountPagePolishV372 .accountProCardV371 header>div>span:not(.accountCardIconV372){color:#dfbd67}
.accountCardIconV372{display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(169,229,28,.19);border-radius:7px;background:rgba(169,229,28,.04);color:#a9e51c;flex:0 0 auto}.accountCardIconV372.pro{border-color:rgba(223,189,103,.20);background:rgba(223,189,103,.045);color:#dfbd67}.accountCardIconV372 svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.accountPagePolishV372 .accountCardV371 header h2{margin-top:10px;font-size:26px}.accountPagePolishV372 .accountCardStateV371,.accountPagePolishV372 .accountStatusV371{margin-top:20px;padding:17px 18px}.accountPagePolishV372 .accountCardStateV371>strong,.accountPagePolishV372 .accountStatusV371>strong{font-size:16px}.accountPagePolishV372 .accountCardStateV371 p,.accountPagePolishV372 .accountStatusV371>span{margin-top:7px;font-size:11px;line-height:1.48}.accountPagePolishV372 .accountCardStateV371 small{margin-top:10px}
.accountProPrivacyV372{position:relative;z-index:1;display:flex;align-items:flex-start;gap:11px;margin-top:10px;padding:12px 14px;border-top:1px solid rgba(223,189,103,.085);background:linear-gradient(90deg,rgba(223,189,103,.018),transparent)}.accountProPrivacyV372 b{flex:0 0 auto;color:#bfa35e;font:800 8px/1.15 var(--font-condensed);letter-spacing:.12em}.accountProPrivacyV372 p{margin:0;color:#77827d;font-size:10px;line-height:1.45}
.accountPagePolishV372 .accountCardV371 footer{padding-top:18px}.accountPagePolishV372 .accountCardV371 footer .button{min-height:38px;padding:0 17px;font-size:9px}.accountPagePolishV372 .accountProCardV371 footer .button{background:linear-gradient(180deg,rgba(223,189,103,.055),rgba(223,189,103,.018));border-color:rgba(223,189,103,.25);color:#e2c777}

body.marksPrivatePageActive{
  background:
    radial-gradient(circle at 52% -9%,rgba(150,127,58,.14),transparent 34%),
    radial-gradient(circle at 82% 18%,rgba(169,229,28,.05),transparent 26%),
    linear-gradient(180deg,#0a0f0e 0%,#0b1110 52%,#080d0c 100%)!important;
}
.marksPrivatePolishV372 .marksPrivateHeroV372{min-height:205px;padding:32px 36px;border-color:rgba(222,190,104,.20);background:linear-gradient(112deg,rgba(27,28,23,.99),rgba(10,15,14,.99) 58%,rgba(38,31,17,.97));box-shadow:0 22px 62px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.04)}
.marksPrivatePolishV372 .marksPrivateHeroV372::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 0 57%,rgba(226,191,94,.025) 74%,rgba(169,229,28,.025) 100%)}
.marksPrivatePolishV372 .marksPrivateHeroV372 h1{font-size:clamp(38px,4.2vw,60px)}.marksPrivatePolishV372 .marksPrivateHeroV372 p{font-size:12px;max-width:720px}.marksPrivatePolishV372 .marksPrivateHeroV372>.button{min-height:38px;font-size:9px}
.marksPrivatePolishV372 .marksPrivateInactiveV372{margin-top:14px;padding:26px 28px}.marksPrivatePolishV372 .marksPrivateInactiveV372 h2{margin:10px 0 19px;font-size:17px;line-height:1.42}.marksPrivatePolishV372 .marksPrivateInactiveV372 .button{min-height:38px;font-size:9px}
.marksPrivatePolishV372 .marksPrivateStatusV372{margin-top:14px;padding:19px 23px}
.marksPrivateTabsV372{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:10px;overflow:hidden;border:1px solid rgba(218,190,116,.13);border-radius:9px;background:linear-gradient(180deg,rgba(16,22,19,.93),rgba(8,13,12,.95));box-shadow:0 11px 28px rgba(0,0,0,.13)}.marksPrivateTabsV372>span{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 12px;border-right:1px solid rgba(255,255,255,.055);color:#cbd2ce;font:800 10px/1 var(--font-condensed);letter-spacing:.055em}.marksPrivateTabsV372>span:last-child{border-right:0}.marksPrivateTabsV372>span::after{content:"";position:absolute;left:22%;right:22%;bottom:0;height:1px;background:transparent}.marksPrivateTabsV372>span.isFirst{color:#e2c66f;background:linear-gradient(180deg,rgba(223,189,103,.045),rgba(223,189,103,.012))}.marksPrivateTabsV372>span.isFirst::after{background:linear-gradient(90deg,transparent,#dfbd67,transparent)}.marksPrivateTabsV372 i{color:#66716c;font:700 6px/1 var(--font-condensed);font-style:normal;letter-spacing:.11em}
.marksPrivatePolishV372 .marksPrivateSyncV372{margin-top:10px;padding:24px 27px}.marksPrivatePolishV372 .marksPrivateSyncV372 h2{font-size:24px}.marksPrivatePolishV372 .marksPrivateModulesV372{margin-top:10px;padding:26px}.marksPrivatePolishV372 .marksPrivateModulesV372>div{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.marksPrivatePolishV372 .marksPrivateModulesV372 article{min-height:148px;padding:19px}.marksPrivatePolishV372 .marksPrivateModulesV372 h3{margin:20px 0 7px;font-size:20px}.marksPrivatePolishV372 .marksPrivateModulesV372 article>p{font-size:10px}.marksPrivatePolishV372 .marksPrivateRuleV372{margin-top:10px;padding:17px 21px}

@media(max-width:1180px){
  .accountPagePolishV372 .accountHeroV371{grid-template-columns:88px minmax(0,1fr)}
  .accountMetaPolishV372{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}
  .marksPrivatePolishV372 .marksPrivateModulesV372>div{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
  .accountPagePolishV372 .accountGridV371{grid-template-columns:1fr}
  .marksPrivateTabsV372{grid-template-columns:1fr 1fr}.marksPrivateTabsV372>span{border-bottom:1px solid rgba(255,255,255,.05)}
  .marksPrivatePolishV372 .marksPrivateModulesV372>div{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .accountPagePolishV372 .accountHeroV371{grid-template-columns:1fr;padding:24px 20px}.accountPagePolishV372 .accountAvatarV371{width:78px;height:78px}.accountMetaPolishV372{grid-template-columns:1fr}.accountMetaPolishV372>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.07)}.accountMetaPolishV372 span,.accountMetaPolishV372 strong{white-space:normal}.accountProPrivacyV372{flex-direction:column;gap:6px}
  .marksPrivateTabsV372{grid-template-columns:1fr}.marksPrivatePolishV372 .marksPrivateModulesV372>div{grid-template-columns:1fr}
}

/* v0.3.5.372 FIX3 — private account cinema. Deliberately scoped, last in cascade. */
body.accountPageActive{
  background:radial-gradient(ellipse 70% 650px at 48% 180px,rgba(52,77,88,.26),transparent 85%),linear-gradient(180deg,#071015,#0c161c 520px,#070e12 1100px);
}
.privateCinemaFix3{
  --font-condensed:var(--approved-font,"Segoe UI",Arial,sans-serif);
  --private-gold:#dfbd76;
  width:min(1380px,calc(100% - 40px));margin:24px auto 64px;
  font-family:var(--approved-ui,"Segoe UI",Arial,sans-serif);
}
.privateCinemaFix3 svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.privateCinemaFix3 .rhGlobalBrandWord>span{display:inline!important;margin:0!important;padding:0!important}
.privateCinemaFix3 .privateNavFix3{display:flex;gap:26px;margin:0 0 18px;padding:0;border-bottom:1px solid #ffffff12}
.privateCinemaFix3 .privateNavFix3 a{padding:0 0 13px;font-size:14px;line-height:1.4;letter-spacing:.025em;color:#9caaaF;text-transform:none;border-bottom:2px solid transparent}
.privateCinemaFix3 .privateNavFix3 a[aria-current]{color:#e7f2df;border-color:#a9e51b}
.privateCinemaFix3 .privateNavFix3 a:hover{color:#d6edab}
.privateCinemaFix3 a:focus-visible{outline:2px solid #b4e750;outline-offset:5px}
.privateCinemaFix3 .accountHeroV371{
  grid-template-columns:110px minmax(0,1fr) 330px;gap:24px;min-height:300px;padding:38px 40px;
  background:linear-gradient(90deg,rgba(8,17,21,.98),rgba(8,17,21,.88) 42%,rgba(8,17,21,.45)),linear-gradient(0deg,#0a151b,transparent 75%),url('/assets/about_fermani_marks_pro.jpg') 70% 43%/cover;
  border-color:#adc7d426;box-shadow:0 18px 45px #0005,inset 0 1px #ffffff0a;
}
.privateCinemaFix3 .accountHeroV371::before{background:radial-gradient(ellipse at 20% 20%,#60899c15,transparent 65%)}
.privateCinemaFix3 .accountAvatarV371{width:110px;height:110px;border-radius:22px;border:1px solid #cfe1e43d;box-shadow:0 14px 28px #0006,0 0 0 6px #ffffff04}
.privateCinemaFix3 .accountHeroCopyV371>span{font-size:12px;letter-spacing:.18em;line-height:1.4}
.privateCinemaFix3 .accountHeroCopyV371 h1{font-size:clamp(32px,3.4vw,52px);line-height:1.12;margin:8px 0 10px;overflow-wrap:anywhere;letter-spacing:-.015em}
.privateCinemaFix3 .accountHeroCopyV371>p{font-size:16px;line-height:1.55;color:#b3c0c6;max-width:670px}
.privateCinemaFix3 .accountIdentityV371{flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:18px}
.privateCinemaFix3 .accountIdentityV371 small{font-size:12px;line-height:1.5;color:#a3b4bc;letter-spacing:.035em;overflow-wrap:anywhere}
.privateVerifiedFix3{display:inline-flex;align-items:center;gap:7px;color:#b6d19a;font-size:12px}
.privateCinemaFix3 .privateVerifiedFix3 svg{width:15px;height:15px}
.privateCinemaFix3 .accountMetaPolishV372{grid-column:auto;display:grid;grid-template-columns:1fr;width:100%;border:1px solid #b0c5d122;border-radius:9px;background:#08131ac9;box-shadow:0 12px 25px #0003}
.privateCinemaFix3 .accountMetaPolishV372>div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;min-width:0}
.privateCinemaFix3 .accountMetaPolishV372>div+div{border-left:0;border-top:1px solid #ffffff0e}
.privateCinemaFix3 .accountMetaPolishV372>div:first-child{padding-left:20px}
.privateCinemaFix3 .accountMetaPolishV372 span{margin:0;font-size:12px;line-height:1.4;letter-spacing:.03em;color:#98aeb8;white-space:normal;word-break:normal;overflow-wrap:normal;text-transform:none}
.privateCinemaFix3 .accountMetaPolishV372 strong{display:block;font-size:18px;line-height:1.4;white-space:normal;color:#e5eded;font-variant-numeric:tabular-nums}
.privateCinemaFix3 .accountGridV371{gap:18px;margin-top:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
.privateCinemaFix3 .accountCardV371{padding:26px 28px;min-height:0;border-color:#abc1ce29;background:radial-gradient(ellipse at 0 0,#8caf7c13,transparent 65%),linear-gradient(145deg,#1a292f,#0d181e 85%);box-shadow:0 16px 35px #0004,inset 0 1px #ffffff08}
.privateCinemaFix3 .accountProCardV371{background:radial-gradient(ellipse at 100% 0,#bb95391b,transparent 65%),linear-gradient(145deg,#202a2b,#10191d 85%)}
.privateCinemaFix3 .accountCardV371 header>div>span:not(.accountCardIconV372){font-size:12px;letter-spacing:.1em;line-height:1.4}
.privateCinemaFix3 .accountCardIconV372{width:38px;height:38px;border-radius:9px}
.privateCinemaFix3 .accountCardIconV372 svg{width:23px;height:23px}
.privateEditionFix3{margin-left:auto;font-size:12px;padding:5px 9px;border:1px solid #a9e51b2b;border-radius:5px;color:#b9d0a1}
.privateCinemaFix3 .accountCardV371 header h2{font-size:28px;line-height:1.2;margin-top:16px}
.privateCinemaFix3 .accountCardStateV371,.privateCinemaFix3 .accountStatusV371{margin-top:20px;padding:0 0 0 15px;border:0;border-left:2px solid #6d7d855e;border-radius:0;background:none}
.privateCinemaFix3 .accountCardStateV371.isReady{border-left-color:#a9e51b80}
.privateCinemaFix3 .accountCardStateV371>strong,.privateCinemaFix3 .accountStatusV371>strong{font-size:18px;line-height:1.4}
.privateCinemaFix3 .accountStatusV371.isActive{padding-left:22px;border-left-color:#dfbd7666}
.privateCinemaFix3 .accountStatusV371.isActive>i{left:7px;top:9px;width:6px;height:6px}
.privateCinemaFix3 .accountCardStateV371 p,.privateCinemaFix3 .accountStatusV371>span{font-size:14px;line-height:1.55;color:#abb9bf;margin-top:8px}
.privateCinemaFix3 .accountProPrivacyV372{padding:12px 0 0;margin-top:14px;display:block;background:none}
.privateCinemaFix3 .accountProPrivacyV372 b{display:none}
.privateCinemaFix3 .accountProPrivacyV372 p{color:#92a3aa;font-size:12px;line-height:1.5}
.privateCinemaFix3 .accountCardV371 footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;text-align:left;width:auto;max-width:none;margin:24px 0 0;padding:20px 0 0;border-top:1px solid #ffffff0e;background:none}
.privateCinemaFix3 .accountCardV371 footer .button,.privateCinemaFix3 .button{font-size:12px;line-height:1.35;min-height:44px;padding:12px 18px;letter-spacing:.03em;white-space:normal}
.privateReplayCountFix3{display:flex;align-items:center;gap:10px;color:#a5b6bf;font-size:12px}
.privateReplayCountFix3 b{font-size:28px;line-height:1;color:#edf4f1;font-variant-numeric:tabular-nums}
.privateTextLinkFix3{color:#c6b384;font-size:12px;text-decoration:none}
.privateTextLinkFix3:hover{text-decoration:underline}
.privateCinemaFix3 .marksPrivateHeroV372{
  min-height:320px;padding:38px 40px;align-items:center;border-color:#d8c19a30;
  background:linear-gradient(90deg,#091318f5 0%,#0a151add 43%,#07111566),linear-gradient(0deg,#0a151bdd,transparent 65%),url('/assets/about_fermani_marks_pro.jpg') 70% 43%/cover;
}
.privateCinemaFix3 .marksPrivateHeroV372>div:not(.marksPrivateHeroGlowV372){max-width:740px}
.privateCinemaFix3 .marksPrivateHeroV372>div>span{font-size:12px;line-height:1.4}
.privateCinemaFix3 .marksPrivateHeroV372 h1{font-size:clamp(40px,4.5vw,64px);line-height:1.04;margin:14px 0 16px;letter-spacing:-.025em}
.privateCinemaFix3 .marksPrivateHeroV372 h1 em{font-style:normal;color:#dfbd76}
.privateCinemaFix3 .marksPrivateHeroV372 p{font-size:16px;line-height:1.6;color:#b2c0c6;max-width:590px}
.privateOwnerFix3{display:flex;align-items:center;flex-wrap:wrap;gap:9px 14px;margin-top:22px;font-size:14px}
.privateOwnerFix3 svg{width:17px;height:17px;color:#c5ab72}
.privateOwnerFix3 span{font-size:12px;color:#9fb1ba;overflow-wrap:anywhere}
.privateCinemaFix3 .marksPrivateHeroV372 .privateHeroBadgeFix3{display:grid;justify-items:start;gap:12px;align-self:flex-end;min-width:210px;padding:23px;border:1px solid #ddc08235;border-radius:9px;background:linear-gradient(145deg,#1c292bec,#0a1519ef);box-shadow:0 12px 30px #0005}
.privateCinemaFix3 .privateHeroBadgeFix3 svg{width:26px;height:26px;color:#dfbd76}
.privateCinemaFix3 .privateHeroBadgeFix3>span{font-size:12px;color:#b3bec0;letter-spacing:.08em}
.privateHeroBadgeFix3>strong{font-size:14px;color:#dfbd76;line-height:1.4}
.privateHeroBadgeFix3>strong.isActive{color:#b9e962}
.privateCinemaFix3 .marksPrivateInactiveV372{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:center;padding:26px 30px;margin-top:20px;background:linear-gradient(115deg,#222c2b,#111d23);border-color:#dfbd762b}
.privateCinemaFix3 .marksPrivateInactiveV372>span{font-size:12px;line-height:1.4}
.privateCinemaFix3 .marksPrivateInactiveV372 h2{grid-column:1;margin:8px 0 0;font-size:18px;line-height:1.5;font-weight:500;max-width:740px;color:#c3cdd0}
.privateCinemaFix3 .marksPrivateInactiveV372>div{grid-column:2;grid-row:1/3}
.privateCinemaFix3 .marksPrivateInactiveV372>div>a:last-child{display:none}
.privateCinemaFix3 .marksPrivateStatusV372{padding:24px 30px;margin-top:20px;background:linear-gradient(110deg,#1b2d28,#101c22)}
.privateCinemaFix3 .marksPrivateStatusV372 strong{font-size:22px;line-height:1.3}
.privateCinemaFix3 .marksPrivateStatusV372 span,.privateCinemaFix3 .marksPrivateExpiryV372 small{font-size:12px;line-height:1.5;letter-spacing:0}
.privateCinemaFix3 .marksPrivateExpiryV372 b{font-size:16px;line-height:1.4}
.privateCinemaFix3 .marksPrivateModulesV372{padding:0;margin-top:32px;border:0;background:none}
.privateCinemaFix3 .marksPrivateModulesV372 header{align-items:flex-end;margin-bottom:18px;gap:26px}
.privateCinemaFix3 .marksPrivateModulesV372 header>div>span{font-size:12px;color:#d1b576}
.privateCinemaFix3 .marksPrivateModulesV372 header h2{font-size:26px;line-height:1.3;margin:8px 0 0;color:#e9eeee}
.privateCinemaFix3 .marksPrivateModulesV372 header>p{font-size:12px;line-height:1.6;max-width:510px;text-align:left;color:#97aab3}
.privateCinemaFix3 .marksPrivateModulesV372>div{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.privateCinemaFix3 .marksPrivateModulesV372 article{padding:22px 20px;min-height:185px;border-color:#b0c6d125;background:linear-gradient(145deg,#1a2b32,#101b21);box-shadow:0 10px 22px #0003,inset 0 1px #ffffff08}
.privateModuleFix3>div{display:flex;align-items:center;justify-content:space-between;color:#abc681}
.privateModuleFix3>div>span{color:#6d858f;font-size:12px;font-variant-numeric:tabular-nums}
.privateCinemaFix3 .module-session>div{color:#7bbfca}
.privateCinemaFix3 .module-records>div{color:#dfbd76}
.privateCinemaFix3 .module-info>div{color:#a5b7c4}
.privateCinemaFix3 .marksPrivateModulesV372 h3{margin:20px 0 10px;font-size:23px;line-height:1.2}
.privateCinemaFix3 .marksPrivateModulesV372 article>p{font-size:14px;line-height:1.5;color:#a0b3bd}
.privateCinemaFix3 .marksPrivateSyncV372{padding:26px 30px;background:#122027;border-color:#a2b9c322;margin-top:16px}
.privateCinemaFix3 .marksPrivateSyncV372 span{font-size:12px}
.privateCinemaFix3 .marksPrivateSyncV372 h2{font-size:26px;line-height:1.3}
.privateCinemaFix3 .marksPrivateSyncV372 p{font-size:14px;line-height:1.6;color:#a4b5be}
.privateCinemaFix3 .marksPrivateSyncV372>strong{display:flex;align-items:center;gap:9px;font-size:12px;line-height:1.4}
.privateCinemaFix3 .marksPrivateRuleV372{align-items:center;gap:12px;padding:18px 0;border:0;background:none}
.privateCinemaFix3 .marksPrivateRuleV372 svg{width:17px;height:17px;color:#83979c}
.privateCinemaFix3 .marksPrivateRuleV372 p{font-size:12px;line-height:1.5;color:#8ea1aa}
@media(max-width:1100px){
  .privateCinemaFix3 .accountHeroV371{grid-template-columns:110px minmax(0,1fr);padding-bottom:0}
  .privateCinemaFix3 .accountMetaPolishV372{grid-column:1/-1;grid-template-columns:.7fr 1.15fr 1.15fr;border:0;border-top:1px solid #ffffff18;border-radius:0;background:none;box-shadow:none}
  .privateCinemaFix3 .accountMetaPolishV372>div{display:block;padding:20px}
  .privateCinemaFix3 .accountMetaPolishV372>div:first-child{padding-left:0}
  .privateCinemaFix3 .accountMetaPolishV372>div+div{border-top:0;border-left:1px solid #ffffff0e}
  .privateCinemaFix3 .accountMetaPolishV372 span{margin-bottom:7px}
  .privateCinemaFix3 .marksPrivateModulesV372>div{grid-template-columns:repeat(3,minmax(0,1fr))}
  .privateCinemaFix3 .marksPrivateHeroV372{flex-direction:row;align-items:center}
  .privateCinemaFix3 .marksPrivateHeroV372 .privateHeroBadgeFix3{min-width:180px;max-width:230px}
  .privateCinemaFix3 .accountGridV371{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .privateCinemaFix3{width:calc(100% - 24px);margin-top:16px}
  .privateCinemaFix3 .accountHeroV371{padding:26px 24px 0;grid-template-columns:72px minmax(0,1fr);gap:20px 16px}
  .privateCinemaFix3 .accountAvatarV371{width:72px;height:72px;border-radius:16px}
  .privateCinemaFix3 .accountHeroCopyV371 h1{font-size:30px}
  .privateCinemaFix3 .accountHeroCopyV371>p{font-size:14px}
  .privateCinemaFix3 .accountIdentityV371{gap:8px}
  .privateCinemaFix3 .accountMetaPolishV372>div{padding:17px 12px}
  .privateCinemaFix3 .accountMetaPolishV372 strong{font-size:15px}
  .privateCinemaFix3 .accountGridV371{grid-template-columns:1fr}
  .privateCinemaFix3 .accountCardV371{padding:24px}
  .privateCinemaFix3 .marksPrivateHeroV372{padding:28px 24px;flex-direction:column;align-items:flex-start;gap:24px;background-position:63% center}
  .privateCinemaFix3 .marksPrivateHeroV372 .privateHeroBadgeFix3{align-self:stretch;max-width:none;min-width:0;display:flex;align-items:center;flex-wrap:wrap;padding:16px}
  .privateCinemaFix3 .marksPrivateHeroV372 h1{font-size:44px}
  .privateCinemaFix3 .marksPrivateModulesV372>div{grid-template-columns:repeat(2,minmax(0,1fr))}
  .privateCinemaFix3 .marksPrivateModulesV372 header{align-items:flex-start;flex-direction:column;gap:12px}
  .privateCinemaFix3 .marksPrivateInactiveV372{grid-template-columns:1fr;padding:24px;gap:0}
  .privateCinemaFix3 .marksPrivateInactiveV372>div{grid-column:1;grid-row:auto;margin-top:20px}
  .privateCinemaFix3 .marksPrivateSyncV372{flex-direction:column;align-items:flex-start}
}
@media(max-width:480px){
  .privateCinemaFix3 .privateNavFix3{gap:20px}
  .privateCinemaFix3 .privateNavFix3 a{font-size:13px}
  .privateCinemaFix3 .accountHeroV371{grid-template-columns:1fr}
  .privateCinemaFix3 .accountMetaPolishV372{grid-template-columns:1fr}
  .privateCinemaFix3 .accountMetaPolishV372>div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-left:0}
  .privateCinemaFix3 .accountMetaPolishV372 span{margin:0}
  .privateCinemaFix3 .accountMetaPolishV372 strong{text-align:right}
  .privateCinemaFix3 .accountMetaPolishV372>div+div{border-top:1px solid #ffffff12}
  .privateCinemaFix3 .accountCardV371 footer .button{width:auto}
  .privateCinemaFix3 .marksPrivateModulesV372>div{grid-template-columns:1fr}
  .privateCinemaFix3 .marksPrivateModulesV372 article{min-height:0}
  .privateCinemaFix3 .marksPrivateRuleV372{flex-direction:row;align-items:flex-start}
}
/* Give the existing signed-out screens the same valid font token, without touching global typography. */
.accountPageV371:not(.privateCinemaFix3),.marksPrivatePageV372:not(.privateCinemaFix3){--font-condensed:var(--approved-font,"Segoe UI",Arial,sans-serif)}

/* v0.3.5.387 — real, owner-only Fermani Marks PRO web analytics. */
.marksLiveShellRC20{margin-top:22px;padding:28px;border:1px solid #afc7d429;border-radius:12px;background:radial-gradient(ellipse at 0 0,#a9e51a0d,transparent 43%),linear-gradient(145deg,#14242c,#09151b 82%);box-shadow:0 22px 50px #0004}.marksLiveShellRC20>header{display:flex;align-items:end;justify-content:space-between;gap:26px;padding-bottom:20px;border-bottom:1px solid #ffffff10}.marksLiveShellRC20>header span,.marksLiveTankRailRC20>strong,.marksLiveChartCardRC20 span,.marksLiveGoalRC20>span,.marksLiveDayRC20 header span,.marksLiveRecordsRC20 header span{color:#b8dd71;font-size:11px;font-weight:800;letter-spacing:.13em}.marksLiveShellRC20 h2{margin:8px 0 7px;color:#edf4ef;font:800 29px/1.15 var(--approved-font,"Arial Narrow",sans-serif)}.marksLiveShellRC20>header p{max-width:650px;margin:0;color:#a6b7bf;font-size:13px;line-height:1.55}.marksLiveShellRC20>header small{flex:0 0 auto;color:#82949d;font-size:11px;text-align:right}.marksLiveTankRailRC20{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:start;padding:18px 0}.marksLiveTankRailRC20>strong{padding-top:12px;color:#c6d1d2}.marksLiveTankRailRC20>div{display:flex;gap:8px;overflow:auto;padding-bottom:3px}.marksLiveTankRC20{min-width:155px;padding:11px 13px;border:1px solid #ffffff12;border-radius:8px;text-align:left;color:#cbd6d7;background:#0b171dc9;cursor:pointer;transition:.18s}.marksLiveTankRC20 b{display:block;overflow:hidden;color:#edf2ee;font-size:13px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.marksLiveTankRC20 span{display:block;margin-top:5px;color:#839aa5;font-size:11px}.marksLiveTankRC20:hover{border-color:#b8dd7160}.marksLiveTankRC20.isActive{border-color:#b7de70a0;background:linear-gradient(145deg,#22392c,#13242a);box-shadow:inset 3px 0 #a9e51c}.marksLiveTankRC20.isActive span{color:#c8e88d}.marksLiveDetailRC20{min-height:280px}.marksLiveLoadingRC20,.marksLiveErrorRC20{display:grid;min-height:250px;place-items:center;border:1px dashed #b6cad221;border-radius:9px;color:#9cb5c0;font-size:12px;letter-spacing:.08em}.marksLiveErrorRC20{color:#e8adad}.marksLiveOverviewRC20{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:12px}.marksLiveChartCardRC20,.marksLiveGoalRC20,.marksLiveDayRC20,.marksLiveRecordsRC20{border:1px solid #b7cad625;border-radius:9px;background:linear-gradient(145deg,#172a32,#0c181e);box-shadow:inset 0 1px #ffffff08}.marksLiveChartCardRC20{padding:20px}.marksLiveChartCardRC20 h3{margin:7px 0 5px;color:#f0f3ed;font:800 25px/1.15 var(--approved-font,"Arial Narrow",sans-serif)}.marksLiveChartCardRC20 p{margin:0;color:#91a7b0;font-size:11px}.marksLiveChartRC20{display:block;width:100%;height:154px;margin:12px 0 2px;overflow:visible}.marksLiveChartRC20 .marksLiveChartGridRC20{fill:none;stroke:#d6e3e71a;stroke-width:1}.marksLiveChartRC20 polyline{fill:none;stroke:#c978ef;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px #c978ef66)}.marksLiveChartRC20 circle{fill:#e1a6fb;stroke:#202c35;stroke-width:2}.marksLiveEmptyChartRC20{display:grid;min-height:150px;place-items:center;color:#6f8088}.marksLiveChartCardRC20 footer{display:flex;justify-content:space-between;gap:14px;color:#a8b7bd;font-size:11px}.marksLiveChartCardRC20 footer b{color:#c6ed83;font-size:13px}.marksLiveGoalRC20{padding:22px}.marksLiveGoalRC20>strong{display:block;margin:20px 0 18px;color:#dbeea8;font:800 38px/1 var(--approved-font,"Arial Narrow",sans-serif)}.marksLiveGoalRC20>div{height:8px;overflow:hidden;border-radius:8px;background:#040b0f}.marksLiveGoalRC20>div i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#70b43e,#c7e76f)}.marksLiveGoalRC20 p{margin:16px 0 0;color:#9eb1b8;font-size:12px}.marksLiveGoalRC20 p b{float:right;color:#e5c576}.marksLiveDayRC20{margin-top:12px;padding:20px}.marksLiveDayRC20 header,.marksLiveRecordsRC20 header{display:flex;align-items:center;justify-content:space-between;gap:16px}.marksLiveDayRC20 h3{margin:7px 0 0;color:#eaf0ed;font:800 21px/1 var(--approved-font,"Arial Narrow",sans-serif)}.marksLiveDayRC20 select{min-width:128px;padding:9px 28px 9px 11px;border:1px solid #c3d3d535;border-radius:6px;color:#e9f1eb;background:#0b151a}.marksLiveMetricGridRC20{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:17px}.marksLiveMetricRC20{padding:13px;border:1px solid #ffffff0c;border-radius:7px;background:#081319a8}.marksLiveMetricRC20 span{display:block;color:#93a6ad;font-size:9px;font-weight:700;line-height:1.35}.marksLiveMetricRC20 strong{display:block;margin-top:8px;color:#edf4ef;font:800 20px/1 var(--approved-font,"Arial Narrow",sans-serif);font-variant-numeric:tabular-nums}.marksLiveMetricRC20.lime strong{color:#bce86c}.marksLiveMetricRC20.blue strong{color:#8ed5e5}.marksLiveMetricRC20.gold strong{color:#e7c46f}.marksLiveMetricRC20.red strong{color:#ee9c9c}.marksLiveDayCaptionRC20{margin:14px 0 0;color:#9aadb4;font-size:12px}.marksLiveRecordsRC20{margin-top:12px;padding:20px}.marksLiveRecordsRC20 header strong{color:#e4c474;font-size:12px}.marksLiveRecordsRC20 ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:16px 0 0;padding:0;list-style:none}.marksLiveRecordsRC20 li{display:grid;gap:5px;padding:11px;border:1px solid #ffffff0c;border-radius:7px;background:#0a151ac7}.marksLiveRecordsRC20 li b{color:#d9bd69;font-size:10px}.marksLiveRecordsRC20 li span{color:#92a4ab;font-size:10px}.marksLiveRecordsRC20 li strong{color:#edf2ed;font:800 19px/1 var(--approved-font,"Arial Narrow",sans-serif)}.marksLiveWaitingRC20 h2{font-size:18px!important;line-height:1.5!important}
@media(max-width:900px){.marksLiveOverviewRC20{grid-template-columns:1fr}.marksLiveMetricGridRC20{grid-template-columns:repeat(3,minmax(0,1fr))}.marksLiveRecordsRC20 ol{grid-template-columns:repeat(3,minmax(0,1fr))}.marksLiveShellRC20>header{align-items:start;flex-direction:column}.marksLiveShellRC20>header small{text-align:left}.marksLiveTankRailRC20{grid-template-columns:1fr}.marksLiveTankRailRC20>strong{padding-top:0}}
@media(max-width:560px){.marksLiveShellRC20{padding:19px}.marksLiveMetricGridRC20,.marksLiveRecordsRC20 ol{grid-template-columns:repeat(2,minmax(0,1fr))}.marksLiveShellRC20 h2{font-size:24px}.marksLiveChartCardRC20{padding:16px}.marksLiveGoalRC20{padding:18px}}

/* v0.3.5.372 FIX4 — approved private-page polish only. */
.privateCinemaFix3 .accountGridV371{align-items:stretch}
.privateCinemaFix3 .accountCardV371 footer{
  margin-top:auto;
  margin-left:0!important;
  margin-right:0!important;
  width:100%;
  max-width:none!important;
  flex-direction:row;
}
.privateCinemaFix3 .accountProPrivacyV372{margin-bottom:24px}
.privateCinemaFix3 .accountHeroV371::before,
.privateCinemaFix3 .marksPrivateHeroV372::before{
  /* The source is a garage screenshot. Attenuate its HUD, not the live page UI. */
  background:
    linear-gradient(180deg,rgba(5,12,16,.50),rgba(5,12,16,.08) 50%,rgba(5,12,16,.45)),
    radial-gradient(ellipse 75% 110% at 32% 48%,rgba(5,12,16,.62),transparent 100%);
  pointer-events:none;
}

/* v0.3.5.372 FIX5 — public /marks screenshot gallery; originals stay unchanged. */
.marksGalleryFix5,.marksGalleryDialogFix5{font-family:var(--approved-ui,"Segoe UI",Arial,sans-serif);color:#e5edf0;box-sizing:border-box}
.marksGalleryFix5{margin:16px 0;padding:26px;border:1px solid #2a3c42;border-radius:10px;background:linear-gradient(145deg,#14232b,#0a1318 75%)}
.marksGalleryHeadingFix5>span,.marksLanguagesFix5>div>span{color:#b6d86a;font-size:11px;font-weight:700;letter-spacing:1.5px}
.marksGalleryHeadingFix5 h2{margin:10px 0;font:700 28px/1.15 var(--approved-font,"Arial Narrow",sans-serif)}
.marksGalleryHeadingFix5 p,.marksLanguagesFix5 p{color:#aebdc2;font-size:13px;line-height:1.65;margin:8px 0 0}
.marksGalleryGridFix5{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:22px}
.marksGalleryCardFix5{display:flex;grid-column:span 2;flex-direction:column;width:100%;min-width:0;margin:0;padding:0;overflow:hidden;text-align:left;color:inherit;font:inherit;background:#0b171d;border:1px solid #34464e;border-radius:8px;cursor:pointer;box-shadow:0 8px 20px #0003;transition:border-color .18s,box-shadow .18s}
.marksGalleryStageFix5{display:flex;position:relative;isolation:isolate;align-items:center;justify-content:center;overflow:hidden;width:100%;height:296px;background:#060d10}
.marksGalleryBackdropFix5{position:absolute;inset:-9%;z-index:-1;width:118%;height:118%;max-width:none;object-fit:cover;filter:blur(25px) brightness(.18) saturate(.78);transform:scale(1.05);pointer-events:none}
.marksGalleryCropFix5{display:block;position:relative;flex:none;height:264px;max-width:94%;overflow:hidden;border:1px solid rgba(193,220,155,.2);background:#070d10;filter:drop-shadow(0 12px 20px #000c)}
.marksGalleryCropFix5>img{display:block;position:absolute;height:auto;max-width:none;object-fit:initial}
.marksGalleryStageFix5.is-native .marksGalleryCropFix5{height:246px}
.marksGalleryCardFix5.is-primary-feature{grid-column:span 3}
.marksGalleryCardFix5.is-primary-feature>.marksGalleryStageFix5{height:320px}
.marksGalleryCardFix5.is-primary-feature>.marksGalleryTextFix5{padding:22px}
.marksGalleryStageFix5.is-large.is-battle .marksGalleryCropFix5{height:min(calc(68dvh - 24px),390px)}
.marksGalleryTextFix5{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:8px;padding:18px;width:100%;box-sizing:border-box}
.marksGalleryTagFix5{font-size:10px;letter-spacing:1.4px;color:#c7b477;font-weight:700}
.marksGalleryTextFix5>strong{font:700 22px/1.15 var(--approved-font,"Arial Narrow",sans-serif)}
.marksGalleryCaptionFix5{font-size:12px;line-height:1.6;color:#aebec5}
.marksGalleryOpenFix5{margin-top:auto;padding-top:8px;font-size:11px;font-weight:700;color:#bcdd80}
.marksGalleryNoteFix5{font-size:11px;line-height:1.6;color:#95a7af;margin:15px 0 24px}
.marksLanguagesFix5{display:flex;align-items:center;gap:24px;padding-top:22px;border-top:1px solid #34444a}
.marksLanguagesFix5>div:first-child{flex:1;min-width:0}
.marksLanguagesFix5 h3{margin:8px 0;font:700 23px/1.2 var(--approved-font,"Arial Narrow",sans-serif)}
.marksLanguageTagsFix5{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.marksLanguageTagsFix5>span{padding:9px 12px;border:1px solid #465041;border-radius:5px;background:#acda3910;font-size:12px;white-space:nowrap}
.marksGalleryDialogFix5{position:fixed;inset:0;margin:auto;width:min(900px,calc(100% - 24px));max-width:none;max-height:calc(100dvh - 24px);padding:18px;border:1px solid #4a6066;border-radius:10px;background:#0b151b;box-shadow:0 20px 100px #000b;overflow:auto}
.marksGalleryDialogFix5::backdrop{background:rgba(2,7,10,.9)}
.marksGalleryDialogHeadFix5{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.marksGalleryDialogHeadFix5 h2{margin:0;font:700 26px/1.2 var(--approved-font,"Arial Narrow",sans-serif)}
.marksGalleryDialogFix5 button{min-width:44px;min-height:44px;padding:6px 12px;color:#e4eccf;background:#1b2b32;border:1px solid #455b60;border-radius:5px;cursor:pointer;font:24px/1 var(--approved-ui,"Segoe UI",sans-serif)}
.marksGalleryStageFix5.is-large{height:min(70dvh,680px);border-radius:6px}
.marksGalleryStageFix5.is-large .marksGalleryCropFix5{height:min(calc(70dvh - 28px),570px);max-width:97%}
.marksGalleryStageFix5.is-large.is-native .marksGalleryCropFix5{height:min(calc(70dvh - 28px),485px)}
.marksGalleryDialogNavFix5{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:14px}
.marksGalleryDialogNavFix5>span{min-width:44px;text-align:center;font-size:13px;color:#c5d792}
.marksGalleryDialogFix5>p{font-size:13px;line-height:1.6;color:#b3c1c7;margin:12px 0 0;text-align:center}
.marksGalleryCardFix5:focus-visible,.marksGalleryDialogFix5 button:focus-visible{outline:2px solid #b4e631;outline-offset:3px}
@media(hover:hover){.marksGalleryCardFix5:hover{border-color:#92a968;box-shadow:0 10px 28px #0005}.marksGalleryDialogFix5 button:hover{background:#2d403a}}
@media(max-width:900px){.marksGalleryGridFix5{grid-template-columns:repeat(2,minmax(0,1fr))}.marksGalleryCardFix5,.marksGalleryCardFix5.is-primary-feature{grid-column:span 1}.marksLanguagesFix5{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.marksGalleryFix5{padding:16px}.marksGalleryGridFix5{grid-template-columns:minmax(0,1fr)}.marksGalleryCardFix5,.marksGalleryCardFix5.is-primary-feature{grid-column:span 1}.marksGalleryBackdropFix5{filter:blur(15px) brightness(.2) saturate(.78)}.marksGalleryDialogFix5{padding:12px}.marksGalleryStageFix5.is-large .marksGalleryCropFix5{height:min(calc(70dvh - 28px),170vw,570px)}.marksGalleryStageFix5.is-large.is-native .marksGalleryCropFix5{height:min(calc(70dvh - 28px),126vw,485px)}}
@media(prefers-reduced-motion:reduce){.marksGalleryCardFix5{transition:none}}

/* ========================================================================
   v0.3.5.383 — TEAM INSPECTOR IN OPPOSITE TEAM SLOT
   Desktop comparison mode: the selected player's details use the other
   team card's exact slot, so the source row remains visible while reading.
   ======================================================================== */
@media(min-width:1051px){
  .battleTeamsPaneV247 .teamCardV247.teamMemberInspectorHostV383{
    display:flex!important;
    min-height:100%!important;
    overflow:hidden!important;
    border-color:rgba(191,226,91,.31)!important;
    background:linear-gradient(145deg,#10211f,#081315 68%,#071012)!important;
    box-shadow:0 18px 42px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.045)!important;
    animation:teamMemberInlineInV383 .18s cubic-bezier(.2,.75,.25,1) both!important;
  }
  .teamMemberInlineInspectorV383{
    position:relative!important;
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    min-width:0!important;
    min-height:100%!important;
    overflow:hidden!important;
    color:#edf3ef!important;
  }
  .teamMemberInlineInspectorV383 .teamMemberDrawerHeadV379{
    min-height:146px!important;
    padding-right:122px!important;
  }
  .teamMemberInlineBackV383{
    position:absolute!important;
    z-index:5!important;
    top:11px!important;
    right:12px!important;
    min-width:88px!important;
    height:30px!important;
    padding:0 10px!important;
    border:1px solid rgba(214,232,201,.18)!important;
    border-radius:5px!important;
    background:rgba(4,12,13,.68)!important;
    color:#d9e5d9!important;
    font:800 10px/1 var(--approved-font)!important;
    letter-spacing:.04em!important;
    text-transform:uppercase!important;
    cursor:pointer!important;
  }
  .teamMemberInlineBackV383:hover,
  .teamMemberInlineBackV383:focus-visible{
    outline:0!important;
    border-color:rgba(191,239,81,.68)!important;
    color:#c8f156!important;
    box-shadow:0 0 15px rgba(178,235,55,.10)!important;
  }
  .teamMemberInlineInspectorV383 .teamMemberPrimaryStatsV379{padding:16px 18px!important}
  .teamMemberInlineInspectorV383 .teamMemberCombatV379,
  .teamMemberInlineInspectorV383 .teamMemberAwardsV379{padding:17px 18px!important}
  .teamMemberInlineInspectorV383 .teamMemberMedalsV379{gap:9px!important}
  .teamMemberInlineInspectorV383 .teamMemberMedalV379{width:88px!important;min-height:92px!important}
  .teamMemberInlineInspectorV383 .teamMemberDrawerFootV379{margin-top:auto!important}
}
@keyframes teamMemberInlineInV383{from{opacity:.35;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.battleTeamsPaneV247 .teamCardV247.teamMemberInspectorHostV383{animation:none!important}}

/* v0.3.5.373 FIX4 — Fermani Marks PRO store pricing + safe order-code checkout */
.marksCheckoutFix4>p{max-width:760px}
.marksStoreFix4{display:grid;gap:16px;margin-top:20px}
.marksStoreLabelFix4,.marksCurrencyHeadFix4>span{color:#d7bd75;font:800 10px/1 var(--font-condensed);letter-spacing:.14em}
.marksPlanGridFix4{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.marksPlanCardFix4{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"label price" "sub price" "save save";gap:4px 14px;min-height:94px;padding:16px 18px;text-align:left;border:1px solid rgba(255,255,255,.11);border-radius:8px;background:linear-gradient(145deg,rgba(24,34,36,.93),rgba(10,17,20,.96));color:#dfe7e9;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.025);transition:border-color .15s ease,transform .15s ease,background .15s ease}
.marksPlanCardFix4:hover{transform:translateY(-1px);border-color:rgba(221,192,118,.32)}
.marksPlanCardFix4.is-active{border-color:rgba(181,239,45,.48);background:linear-gradient(145deg,rgba(31,47,38,.96),rgba(10,21,17,.98));box-shadow:inset 0 0 0 1px rgba(181,239,45,.07),0 10px 24px rgba(0,0,0,.14)}
.marksPlanCardFix4>span{grid-area:label;font:800 15px/1.2 var(--font-condensed);letter-spacing:.04em}.marksPlanCardFix4>strong{grid-area:price;align-self:center;color:#eef4f2;font:800 25.3px/1 var(--font-condensed)}.marksPlanCardFix4>small{grid-area:sub;color:#839396;font-size:11px}.marksPlanCardFix4>em{grid-area:save;width:max-content;margin-top:5px;padding:4px 7px;border-radius:4px;background:rgba(181,239,45,.08);color:#b5ef2d;font:800 9px/1 var(--font-condensed);font-style:normal;letter-spacing:.06em}
.marksCurrencyHeadFix4{display:flex;align-items:center;justify-content:space-between;gap:14px}.marksCurrencyGridFix4{display:flex;gap:6px}.marksCurrencyFix4{min-width:52px;height:34px;padding:0 10px;border:1px solid rgba(255,255,255,.11);border-radius:6px;background:#10191c;color:#9aa8ab;font:800 10px/1 var(--font-condensed);letter-spacing:.06em;cursor:pointer}.marksCurrencyFix4:hover:not(:disabled){border-color:rgba(221,192,118,.32);color:#d8e1e2}.marksCurrencyFix4.is-active{border-color:rgba(221,192,118,.48);background:#241f15;color:#e4c879}.marksCurrencyFix4:disabled{opacity:.32;cursor:not-allowed}
.marksExactFix4{display:grid;grid-template-columns:1fr auto;grid-template-areas:"label amount" "source amount";align-items:center;gap:4px 18px;padding:16px 18px;border:1px solid rgba(221,192,118,.18);border-radius:8px;background:linear-gradient(110deg,rgba(34,31,23,.76),rgba(14,20,21,.88))}.marksExactFix4 small{grid-area:label;color:#b4bfc0;font:800 10px/1 var(--font-condensed);letter-spacing:.11em}.marksExactFix4 strong{grid-area:amount;color:#e4c879;font:900 28.6px/1 var(--font-condensed)}.marksExactFix4 span{grid-area:source;color:#768589;font-size:10px}
.marksManualRenewFix4{margin:0!important;padding:0 2px;color:#87979a!important;font-size:11px;line-height:1.55!important}.marksPayProviderFix4{justify-content:center}.marksSalesPending{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid rgba(255,255,255,.09);border-radius:6px;color:#79878a;font:800 9px/1 var(--font-condensed);letter-spacing:.1em}
.marksOrderResult .marksOrderAmountFix4{display:grid;gap:4px;margin:0 0 14px;padding:12px 14px;border:1px solid rgba(221,192,118,.18);border-radius:6px;background:rgba(221,192,118,.04)}.marksOrderResult .marksOrderAmountFix4 b{color:#e4c879;font:900 25.3px/1 var(--font-condensed)}.marksOrderResult .marksCodeOnlyFix4{margin:7px 0 14px;padding:10px 12px;border-left:2px solid #b5ef2d;background:rgba(181,239,45,.045);color:#c6d0d1;font-size:12px;line-height:1.55}.marksOrderResult>strong{user-select:all}
@media(max-width:980px) and (min-width:701px){.marksPlanGridFix4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.marksPlanGridFix4{grid-template-columns:1fr}.marksCurrencyHeadFix4{align-items:flex-start;flex-direction:column}.marksCurrencyGridFix4{width:100%;display:grid;grid-template-columns:repeat(4,1fr)}.marksCurrencyFix4{width:100%}.marksExactFix4{grid-template-columns:1fr;grid-template-areas:"label" "amount" "source"}.marksExactFix4 strong{margin:2px 0 3px}.marksProviders .marksPayProviderFix4{width:100%}}

/* v0.3.5.373 FIX4 FIX1 — public PRO pricing always visible */
.marksPublicPricingFix1{margin:30px 0;padding:24px;border-radius:22px}
.marksPublicPricingFix1 .marksStoreFix4{margin:0}

/* v0.3.5.373 FIX6 — STREAM STORE PAUSE */
.marksStorePausedFix6{position:relative;overflow:hidden;display:grid;gap:10px;justify-items:center;text-align:center;padding:22px 20px;border:1px solid rgba(255,190,73,.35);border-radius:18px;background:linear-gradient(180deg,rgba(49,37,20,.86),rgba(25,26,31,.92));box-shadow:0 18px 48px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)}
.marksStorePausedFix6:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0,rgba(255,178,48,.16),transparent 58%);pointer-events:none}
.marksStorePausedLiveFix6{position:relative;font-size:11px;font-weight:900;letter-spacing:.18em;color:#ffbd51}
.marksStorePausedFix6>strong{position:relative;font-size:19px;letter-spacing:.055em;color:#fff}
.marksStorePausedFix6>p{position:relative;margin:0;max-width:640px;color:rgba(255,255,255,.74);line-height:1.5}
.marksStorePausedFix6>div{position:relative;display:flex;align-items:baseline;gap:12px;padding-top:2px}
.marksStorePausedFix6>div small{font-size:11px;font-weight:800;letter-spacing:.12em;color:rgba(255,255,255,.56)}
.marksStorePausedFix6>div b{font-variant-numeric:tabular-nums;font-size:28px;letter-spacing:.08em;color:#ffd47d;text-shadow:0 0 18px rgba(255,181,65,.2)}
.marksStorePausedFix6>em{position:relative;font-style:normal;font-size:12px;color:rgba(255,255,255,.48)}
.marksStoreAdminFix6{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:18px 0 10px;padding:16px 18px;border:1px solid rgba(86,163,255,.28);border-radius:18px;background:linear-gradient(135deg,rgba(16,29,46,.94),rgba(22,25,31,.94));box-shadow:0 14px 38px rgba(0,0,0,.18)}
.marksStoreAdminFix6>div{display:grid;gap:4px}
.marksStoreAdminFix6 span{font-size:10px;font-weight:900;letter-spacing:.16em;color:#79b9ff}
.marksStoreAdminFix6 strong{font-size:17px;color:#fff;letter-spacing:.04em}
.marksStoreAdminFix6 small{color:rgba(255,255,255,.58);line-height:1.4}
.marksStoreAdminFix6 .button{white-space:nowrap;min-width:248px}
@media(max-width:720px){.marksStoreAdminFix6{align-items:stretch;flex-direction:column}.marksStoreAdminFix6 .button{width:100%;min-width:0}.marksStorePausedFix6>div{flex-direction:column;align-items:center;gap:4px}}

/* FIX20 — owner-only real FREE/PRO metrics and persistent manual store state. */
.adminAnalyticsMetricFix18.is-free,.adminAnalyticsMetricFix18.is-pro{min-height:176px}
.adminAnalyticsPeriodsFix20{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:12px}
.adminAnalyticsPeriodsFix20>span{display:grid;gap:4px;padding:7px 5px;border:1px solid rgba(207,225,215,.08);border-radius:4px;color:#77857e;font:700 7.5px/1 var(--approved-font);text-align:center;text-transform:uppercase}
.adminAnalyticsPeriodsFix20 b{color:#dbe4df;font-size:10px}
.adminAnalyticsPurchaseMetaFix20{display:flex;justify-content:space-between;gap:8px;margin-top:9px;color:#7e8c85;font:700 7.5px/1.2 var(--approved-font);text-transform:uppercase}
.adminAnalyticsPurchaseMetaFix20 b{margin-left:4px;color:#ebca55;font-size:9px}
.adminAnalyticsRecentFix20{margin-top:12px;padding:12px;border:1px solid rgba(215,181,61,.12);border-radius:6px;background:rgba(215,181,61,.025)}
.adminAnalyticsRecentFix20>strong{display:block;margin-bottom:8px;color:#ebca55;font:850 8px/1 var(--approved-font);letter-spacing:.08em}
.adminAnalyticsRecentFix20>div{display:grid;grid-template-columns:90px 1fr auto;gap:12px;align-items:center;min-height:30px;border-top:1px solid rgba(207,225,215,.06);color:#87948e;font-size:8.5px}
.adminAnalyticsRecentFix20>div b{color:#d8e0dc}.adminAnalyticsRecentFix20>div em{color:#ebca55;font-style:normal;font-weight:850}
@media(max-width:620px){.adminAnalyticsMetricFix18.is-free,.adminAnalyticsMetricFix18.is-pro{min-height:168px}.adminAnalyticsRecentFix20>div{grid-template-columns:68px 1fr}.adminAnalyticsRecentFix20>div em{grid-column:2}}


/* =====================================================================
   v0.3.5.373 FIX7 — ALL REPLAY MEDALS / DENSE HERO RAIL
   Complete battle-page award rendering. No nine-medal truncation.
   Density changes only when 10+ genuine visible awards exist.
   ===================================================================== */
.approvedAwardsRail.manyAwards,
.approvedAwardsRail.denseAwards{
  width:max-content!important;
  max-width:820px!important;
  gap:0!important;
  overflow:visible!important;
}
.approvedAwardsRail.manyAwards .approvedAward{width:58px!important;height:88px!important;margin-right:-4px!important}
.approvedAwardsRail.manyAwards .approvedAwardIcon{width:58px!important;height:64px!important}
.approvedAwardsRail.manyAwards .approvedAward.mastery{width:76px!important;height:90px!important}
.approvedAwardsRail.manyAwards .approvedAward.mastery .approvedAwardIcon{width:76px!important;height:76px!important}
.approvedAwardsRail.manyAwards .approvedAward.tier-epic{width:62px!important}
.approvedAwardsRail.manyAwards .approvedAward.tier-epic .approvedAwardIcon{width:64px!important;height:68px!important}
.approvedAwardsRail.manyAwards .approvedAward.tier-legendary{width:68px!important}
.approvedAwardsRail.manyAwards .approvedAward.tier-legendary .approvedAwardIcon{width:70px!important;height:72px!important}
.approvedAwardsRail.manyAwards .approvedAward.tier-trailing{width:50px!important}
.approvedAwardsRail.manyAwards .approvedAward.tier-trailing .approvedAwardIcon{width:50px!important;height:56px!important}

.approvedAwardsRail.denseAwards .approvedAward{width:49px!important;height:84px!important;margin-right:-5px!important}
.approvedAwardsRail.denseAwards .approvedAwardIcon{width:49px!important;height:56px!important}
.approvedAwardsRail.denseAwards .approvedAward.mastery{width:70px!important;height:88px!important;margin-right:-2px!important}
.approvedAwardsRail.denseAwards .approvedAward.mastery .approvedAwardIcon{width:70px!important;height:70px!important}
.approvedAwardsRail.denseAwards .approvedAward.tier-epic{width:56px!important}
.approvedAwardsRail.denseAwards .approvedAward.tier-epic .approvedAwardIcon{width:58px!important;height:62px!important}
.approvedAwardsRail.denseAwards .approvedAward.tier-legendary{width:62px!important}
.approvedAwardsRail.denseAwards .approvedAward.tier-legendary .approvedAwardIcon{width:64px!important;height:68px!important}
.approvedAwardsRail.denseAwards .approvedAward.tier-trailing{width:44px!important}
.approvedAwardsRail.denseAwards .approvedAward.tier-trailing .approvedAwardIcon{width:44px!important;height:50px!important}

@media(max-width:850px){
  .approvedAwardsRail.manyAwards,
  .approvedAwardsRail.denseAwards{overflow-x:auto!important;overflow-y:hidden!important;max-width:100%!important;width:100%!important}
}

/* =====================================================================
   v0.3.5.373 FIX9 — HERO MAIN MEDALS CURRENT +15% SIZE ONLY
   Scope lock:
   - battle hero only
   - only main/major awards
   - only when FIX7 density mode is active (10+ visible awards)
   - minor / trailing micro medals keep FIX7 size unchanged
   ===================================================================== */
@media (min-width:851px){
  .cinematicReplayPage .approvedAwardsRailV301.manyAwards .approvedAward.awardMajor .approvedAwardIcon,
  .cinematicReplayPage .approvedAwardsRailV301.denseAwards .approvedAward.awardMajor .approvedAwardIcon{
    transform:scale(1.242)!important;
    transform-origin:center bottom!important;
  }

  /* Gun-mark badge is a major award too, but it uses realGunMarksRow
     instead of approvedAwardIcon. Keep it optically equal to the main medals. */
  .cinematicReplayPage .approvedAwardsRailV301.manyAwards .approvedAward.awardMajor .realGunMarksRow,
  .cinematicReplayPage .approvedAwardsRailV301.denseAwards .approvedAward.awardMajor .realGunMarksRow{
    transform:scale(1.242)!important;
    transform-origin:center bottom!important;
  }
}

/* === v0.3.5.373 FIX11 — PRO PAYMENT SUCCESS + DOWNLOAD + INSTALL UX === */
.marksProReadyFix11{position:relative;overflow:hidden;border:1px solid rgba(169,229,28,.24);border-radius:12px;background:linear-gradient(135deg,rgba(17,35,31,.98),rgba(8,17,20,.98));box-shadow:0 22px 54px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.035)}
.marksProReadyFix11:before{content:"";position:absolute;right:-120px;top:-170px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(169,229,28,.12),rgba(169,229,28,0) 68%);pointer-events:none}
.marksProReadyFix11.isConfirmed{border-color:rgba(169,229,28,.42);box-shadow:0 24px 64px rgba(0,0,0,.34),0 0 34px rgba(169,229,28,.07)}
.marksProReadyTopFix11{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:28px;padding:27px 29px 22px}
.marksProReadySignalFix11{display:flex;min-width:0;gap:17px;align-items:flex-start}.marksProReadySignalFix11>i{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:rgba(169,229,28,.12);border:1px solid rgba(169,229,28,.38);color:#c8f46a;font:900 21px/1 var(--font-condensed);box-shadow:0 0 22px rgba(169,229,28,.09)}
.marksProReadySignalFix11 span{display:block;margin-bottom:7px;color:#b9ef42;font:850 11px/1.1 var(--font-condensed);letter-spacing:.14em}.marksProReadySignalFix11 h2{margin:0;color:#f1f3ee;font:900 clamp(25px,3vw,36px)/1 var(--font-condensed);letter-spacing:-.015em}.marksProReadySignalFix11 p{max-width:720px;margin:9px 0 0;color:#9aaba6;font-size:13px;line-height:1.55}
.marksProVersionFix11{position:relative;z-index:1;flex:0 0 auto;min-width:175px;padding:12px 14px;border:1px solid rgba(223,189,103,.18);border-radius:8px;background:rgba(223,189,103,.045);text-align:right}.marksProVersionFix11 small{display:block;color:#a99b74;font:800 9px/1.2 var(--font-condensed);letter-spacing:.12em}.marksProVersionFix11 strong{display:block;margin-top:6px;color:#e2c777;font:900 19px/1 var(--font-condensed)}
.marksProReadyActionsFix11{position:relative;z-index:1;display:flex;align-items:center;gap:16px;padding:0 29px 25px}.marksProDownloadFix11{min-height:48px!important;padding:0 22px!important;font-weight:900!important}.marksProReadyActionsFix11>span{max-width:500px;color:#7f918b;font-size:11px;line-height:1.45}
.marksInstallFix11{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.065);padding:24px 29px 27px;background:rgba(4,10,11,.27)}.marksInstallFix11 header{display:flex;align-items:center;gap:10px;margin-bottom:16px}.marksInstallFix11 header>span{display:grid;place-items:center;width:27px;height:27px;border-radius:6px;background:rgba(223,189,103,.08);border:1px solid rgba(223,189,103,.17);color:#dec175;font:850 10px/1 var(--font-condensed)}.marksInstallFix11 h3{margin:0;color:#eef1ec;font:850 19px/1 var(--font-condensed);letter-spacing:.035em}.marksInstallFix11 ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0;padding:0;list-style:none}.marksInstallFix11 li{display:flex;align-items:flex-start;gap:11px;min-height:57px;padding:12px 13px;border:1px solid rgba(255,255,255,.055);border-radius:7px;background:rgba(255,255,255,.018)}.marksInstallFix11 li>b{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:#192922;color:#b9ef42;font:850 10px/1 var(--font-condensed)}.marksInstallFix11 li>span{color:#a7b4b0;font-size:12px;line-height:1.45}.marksInstallFix11 code{display:block;margin-top:7px;padding:7px 9px;border-radius:5px;background:#080f11;border:1px solid rgba(169,229,28,.13);color:#c9e890;font:700 12px/1.25 ui-monospace,SFMono-Regular,Consolas,monospace;word-break:break-all}
.marksAccountV363:has(.marksProReadyFix11){grid-template-columns:minmax(220px,.42fr) minmax(0,1.58fr);align-items:start}.marksAccountV363 .marksProReadyFix11{width:100%}
.marksPrivatePageV372>.marksProReadyFix11.isPrivate{margin-top:16px}.privateCinemaFix3>.marksProReadyFix11{background:linear-gradient(135deg,#132720,#0e1c22)}
@media(max-width:900px){.marksProReadyTopFix11{flex-direction:column}.marksProVersionFix11{text-align:left;min-width:0}.marksProReadyActionsFix11{align-items:flex-start;flex-direction:column}.marksInstallFix11 ol{grid-template-columns:1fr}.marksAccountV363:has(.marksProReadyFix11){grid-template-columns:1fr}}
@media(max-width:560px){.marksProReadyTopFix11,.marksInstallFix11{padding-left:20px;padding-right:20px}.marksProReadyActionsFix11{padding-left:20px;padding-right:20px}.marksProReadySignalFix11{gap:12px}.marksProReadySignalFix11>i{width:36px;height:36px;flex-basis:36px}.marksProDownloadFix11{width:100%}.marksProReadyActionsFix11>span{font-size:10px}}
/* === /FIX11 === */


/* === v0.3.5.374 — VIDEO LOCAL COMMENTS + PUBLIC VIDEO PERFORMANCE === */
.videoSiteCommentsV374.battleCommentsV319{
  width:100%!important;
  max-width:none!important;
  margin:18px 0 0!important;
  border-color:rgba(169,229,27,.14)!important;
  background:linear-gradient(180deg,rgba(17,24,27,.96),rgba(9,14,16,.98))!important;
  box-shadow:0 18px 46px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.025)!important;
}
.videoSiteCommentsV374 .battleCommentsHeadV319{
  border-bottom-color:rgba(255,255,255,.065)!important;
}
.videoSiteCommentsV374 .battleCommentsHeadV319 h2,
.videoSiteCommentsV374 .battleCommentsHeadV319 strong{
  color:#eef4e9!important;
}
.videoSiteCommentsV374 .battleCommentComposerV319,
.videoSiteCommentsV374 .battleCommentRowV319{
  border-color:rgba(255,255,255,.06)!important;
  background:rgba(255,255,255,.018)!important;
}
.videoSiteCommentsV374 .battleCommentComposerV319 textarea,
.videoSiteCommentsV374 .battleCommentInlineEditV319 textarea{
  border-color:rgba(169,229,27,.13)!important;
  background:#0a1113!important;
  color:#e8eee8!important;
}
.videoSiteCommentsV374 .battleCommentComposerV319 textarea:focus,
.videoSiteCommentsV374 .battleCommentInlineEditV319 textarea:focus{
  border-color:rgba(169,229,27,.42)!important;
  box-shadow:0 0 0 3px rgba(169,229,27,.06)!important;
}
.videoDetailCommentAction{
  appearance:none;
  cursor:pointer;
  font:inherit;
  border-color:rgba(169,229,27,.34)!important;
  color:#eaf3e2!important;
  background:linear-gradient(180deg,rgba(88,126,15,.82),rgba(54,82,8,.9))!important;
}
.videoDetailCommentAction:hover{
  border-color:rgba(190,239,67,.7)!important;
  background:linear-gradient(180deg,rgba(112,157,21,.95),rgba(67,101,10,.96))!important;
}
.videoDetailCommentAction .battleCommentActionGlyphV319{flex:0 0 auto}
.videoDetailCommentAction>[data-video-comments-count]{
  display:inline-grid;
  place-items:center;
  min-width:22px;
  height:20px;
  margin-left:2px;
  padding:0 6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:#d8efaa;
  font:850 10px/1 var(--font-condensed);
}
@media(max-width:760px){
  .videoSiteCommentsV374.battleCommentsV319{margin-top:12px!important}
  .videoDetailCommentAction>[data-video-comments-count]{min-width:20px;height:18px}
}
/* === /v0.3.5.374 === */

/* v0.3.5.377 — real YouTube views background sync + EN auto-dub marker + payment label spacing */
.videoAutoDubBadgeV377{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  gap:4px;
  min-height:16px;
  padding:2px 6px 2px 4px;
  border:1px solid rgba(171,229,42,.28);
  border-radius:4px;
  background:linear-gradient(180deg,rgba(143,198,27,.12),rgba(73,104,15,.055));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  color:#c7ee67;
  font:800 7.5px/1 var(--font-condensed);
  letter-spacing:.055em;
  white-space:nowrap;
  vertical-align:middle;
}
.videoAutoDubBadgeV377>i{
  display:inline-grid;
  place-items:center;
  min-width:18px;
  height:12px;
  padding:0 3px;
  border-radius:2px;
  background:rgba(169,229,28,.92);
  color:#101806;
  font:900 7px/1 var(--font-condensed);
  font-style:normal;
  letter-spacing:.025em;
}
.videoAutoDubBadgeV377> b{font:inherit;color:inherit}
.videoCardStatsRow .videoAutoDubBadgeV377{margin-right:3px}
.videoFeaturedStatsRow .videoAutoDubBadgeV377{margin-right:2px}
.videoDetailRelatedMeta .videoAutoDubBadgeV377{display:inline-flex!important;margin-right:6px!important;vertical-align:middle}
.videoDetailTitleDubV377{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.videoDetailTitleDubV377 h1{margin-right:0!important}
.videoDetailTitleDubV377 .videoAutoDubBadgeV377{min-height:19px;padding:3px 7px 3px 5px;font-size:8px}
.videoDetailTitleDubV377 .videoAutoDubBadgeV377>i{height:13px;font-size:7.5px}
.marksPayProviderFix4{gap:5px!important}
.marksPayProviderFix4 .marksPayLeadV377,
.marksPayProviderFix4 .marksPaySepV377,
.marksPayProviderFix4>span:last-child{display:inline-block;white-space:nowrap}
@media(max-width:560px){
  .videoDetailTitleDubV377{gap:6px}
  .videoAutoDubBadgeV377{font-size:7px}
}

/* ========================================================================
   v0.3.5.378 — REPLAY BADGE, VIDEO HERO + LIVE PULSE CLARITY
   Scoped UI polish only: no API, data, account, payment, or mod changes.
   ======================================================================== */

/* The narrow record chip used a 1:1 line box, which clipped tall glyphs at
   the top on some rendered fonts. Keep the compact badge, but give its text
   a real vertical line box. */
.approvedReplaysMockup .cardRecordSignalsV316 .verifiedRecordBadgeV316>b{
  display:block!important;
  line-height:1.22!important;
  padding-top:1px!important;
  padding-bottom:0!important;
}

/* On wide screens the featured card is the natural lower edge of the video
   hero. Reducing the empty grass below it makes the first video row arrive
   sooner without crowding either the title or the card. */
@media(min-width:1281px){
  .videoHubHeroApproved{
    height:340px!important;
    min-height:340px!important;
    background-position:center 43%!important;
  }
  .videoHubHeroCopyApproved{padding-top:46px!important}
}
@media(min-width:981px) and (max-width:1280px){
  .videoHubHeroApproved{
    height:380px!important;
    min-height:380px!important;
    background-position:center 44%!important;
  }
  .videoHubHeroCopyApproved{padding-top:50px!important}
}

/* A record event now says who overtook whom. Its value becomes a dedicated
   second line, so player names and the old → new result do not compete. */
@media(min-width:1181px){
  body.homePageActive .homeLivePulseV328{
    min-height:94px!important;
    padding-top:10px!important;
    padding-bottom:10px!important;
  }
  body.homePageActive .homePulseLeadV328,
  body.homePageActive .homePulseTrackV328,
  body.homePageActive .homePulseStatusV328{height:72px!important}
  body.homePageActive .homePulseItemV328{height:72px!important}
  body.homePageActive .homePulseItemBodyV328{gap:5px!important}
  body.homePageActive .homePulseEventLabelV328{font-size:8px!important}
  body.homePageActive .homePulseEventTextV328{font-size:10.6px!important}
}
body.homePageActive .homePulseItemV328.type-record_broken .homePulseEventTextV328{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:3px!important;
  white-space:normal!important;
  overflow:hidden!important;
}
body.homePageActive .homePulseRecordActorsV378{
  width:100%;
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:4px;
  white-space:nowrap;
}
body.homePageActive .homePulseRecordActorsV378 .homePulseActorV329,
body.homePageActive .homePulsePreviousActorV378{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.homePageActive .homePulseRecordActorsV378 .homePulseActorV329{flex:1 1 44%}
body.homePageActive .homePulsePreviousActorV378{flex:1 1 44%;color:#d9e0dc;font-weight:850}
body.homePageActive .homePulseRecordActionV378{
  flex:0 0 auto;
  color:#f3ce62;
  font-size:.83em;
  font-weight:1000;
  letter-spacing:.045em;
}
body.homePageActive .homePulseRecordValueV378{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  white-space:nowrap;
}
body.homePageActive .homePulseRecordMetricV378{color:#c9d4ce;font-size:.86em;font-weight:850}
@media(max-width:1180px){
  body.homePageActive .homePulseItemV328.type-record_broken .homePulseEventTextV328{gap:2px!important}
}

/* ========================================================================
   v0.3.5.379 — TEAM PLAYER INSPECTION + MISSING LEGACY TANK ART FALLBACK
   A row stays a compact scoreboard item, but is now a clear launch point for
   a focused, per-player battle card. The drawer never changes the teams grid.
   ======================================================================== */
.battleTeamsPaneV247 .teamRowV247.teamDetailTriggerV379{
  cursor:pointer!important;
  transition:filter .16s ease,box-shadow .16s ease!important;
}
.battleTeamsPaneV247 .teamRowV247.teamDetailTriggerV379:hover,
.battleTeamsPaneV247 .teamRowV247.teamDetailTriggerV379:focus-visible{
  filter:brightness(1.16)!important;
  outline:none!important;
  box-shadow:inset 3px 0 0 #b5f12d,inset 0 0 0 1px rgba(202,244,89,.34),0 0 16px rgba(0,0,0,.16)!important;
  z-index:2!important;
}
.battleTeamsPaneV247 .teamRowV247.teamDetailTriggerV379:focus-visible .teamVehicleV247>strong{
  color:#d5f580!important;
}
body.teamMemberDrawerOpenV379{overflow:hidden!important}
.teamMemberDrawerBackdropV379{
  position:fixed!important;
  z-index:1400!important;
  inset:0!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:stretch!important;
  padding:18px!important;
  background:rgba(2,6,7,.70)!important;
  backdrop-filter:blur(5px)!important;
  animation:teamMemberDrawerFadeV379 .16s ease both!important;
}
.teamMemberDrawerV379{
  position:relative!important;
  width:min(478px,calc(100vw - 36px))!important;
  min-height:0!important;
  overflow:auto!important;
  border:1px solid rgba(176,211,86,.34)!important;
  border-radius:10px!important;
  background:linear-gradient(155deg,#10211f 0%,#091315 55%,#071013 100%)!important;
  box-shadow:-24px 0 56px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.055)!important;
  color:#edf3ef!important;
  font-family:var(--approved-font)!important;
  animation:teamMemberDrawerInV379 .20s cubic-bezier(.2,.75,.25,1) both!important;
}
.teamMemberDrawerCloseV379{
  position:absolute!important;
  z-index:3!important;
  top:12px!important;
  right:12px!important;
  width:30px!important;
  height:30px!important;
  border:1px solid rgba(229,239,234,.17)!important;
  border-radius:5px!important;
  background:rgba(5,13,14,.72)!important;
  color:#dce8e1!important;
  font:700 24px/24px Arial,sans-serif!important;
  cursor:pointer!important;
}
.teamMemberDrawerCloseV379:hover{border-color:rgba(194,239,67,.64)!important;color:#c8f156!important}
.teamMemberDrawerHeadV379{
  position:relative!important;
  min-height:138px!important;
  display:grid!important;
  grid-template-columns:132px minmax(0,1fr)!important;
  align-items:center!important;
  gap:14px!important;
  padding:18px 55px 18px 21px!important;
  overflow:hidden!important;
  border-bottom:1px solid rgba(176,207,190,.14)!important;
  background:radial-gradient(circle at 11% 50%,rgba(178,239,44,.13),transparent 34%),linear-gradient(110deg,rgba(20,39,35,.96),rgba(8,17,19,.90))!important;
}
.teamMemberDrawerHeadV379.destroyed{background:radial-gradient(circle at 11% 50%,rgba(243,78,69,.15),transparent 34%),linear-gradient(110deg,rgba(47,18,22,.96),rgba(9,16,18,.90))!important}
.teamMemberDrawerHeadV379:after{
  content:""!important;
  position:absolute!important;
  right:-22px!important;
  bottom:-62px!important;
  width:240px!important;
  height:180px!important;
  border-radius:50%!important;
  border:1px solid rgba(174,234,53,.12)!important;
  box-shadow:0 0 0 30px rgba(174,234,53,.025),0 0 0 60px rgba(174,234,53,.018)!important;
  pointer-events:none!important;
}
.teamMemberDrawerTankV379{position:relative!important;z-index:1!important;width:132px!important;height:88px!important;display:grid!important;place-items:center!important}
.teamMemberDrawerTankImageV379{width:128px!important;height:82px!important;max-width:128px!important;max-height:82px!important;object-fit:contain!important;filter:brightness(1.18) contrast(1.08) drop-shadow(0 9px 9px rgba(0,0,0,.58))!important}
.teamMemberDrawerIdentityV379{position:relative!important;z-index:1!important;min-width:0!important;display:flex!important;flex-direction:column!important;gap:5px!important}
.teamMemberDrawerIdentityV379>span,.teamMemberSectionTitleV379{color:#b8e750!important;font-size:10px!important;font-weight:850!important;letter-spacing:.115em!important;text-transform:uppercase!important}
.teamMemberDrawerIdentityV379 h3{margin:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#f2f6f3!important;font-size:26px!important;line-height:1!important;font-weight:800!important}
.teamMemberDrawerIdentityV379 h3 i{color:#b6c6bf!important;font-size:13px!important;font-style:normal!important;font-weight:650!important}
.teamMemberDrawerIdentityV379 strong{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#bfcac4!important;font-size:14px!important;font-weight:650!important}
.teamMemberDrawerHeadV379>em{position:absolute!important;z-index:2!important;right:21px!important;bottom:15px!important;margin:0!important;color:#b8ec4d!important;font-size:10px!important;font-style:normal!important;font-weight:850!important;letter-spacing:.065em!important;text-transform:uppercase!important}
.teamMemberDrawerHeadV379.destroyed>em{color:#ff8a80!important}
.teamMemberPrimaryStatsV379,.teamMemberCombatGridV379{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
.teamMemberPrimaryStatsV379{padding:15px 18px!important;border-bottom:1px solid rgba(176,207,190,.10)!important;background:rgba(4,12,13,.30)!important}
.teamMemberStatV379{min-width:0!important;padding:9px 9px 8px!important;border:1px solid rgba(182,202,194,.12)!important;border-radius:5px!important;background:linear-gradient(150deg,rgba(24,44,41,.62),rgba(8,19,20,.65))!important}
.teamMemberStatV379>span{display:flex!important;align-items:center!important;gap:5px!important;min-width:0!important;color:#98aaa2!important}
.teamMemberStatIconV379{width:13px!important;height:13px!important;flex:0 0 13px!important;color:#bddf66!important;opacity:.92!important}
.teamMemberStatV379 small{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:8px!important;font-weight:720!important;letter-spacing:.025em!important;text-transform:uppercase!important}
.teamMemberStatV379 strong{display:block!important;margin-top:7px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#f1f5f2!important;font-size:18px!important;line-height:1!important;font-weight:800!important;font-variant-numeric:tabular-nums!important}
.teamMemberCombatV379,.teamMemberAwardsV379{padding:16px 18px!important;border-bottom:1px solid rgba(176,207,190,.10)!important}
.teamMemberCombatGridV379{margin-top:10px!important}
.teamMemberCombatGridV379 .teamMemberStatV379{padding:8px!important;background:rgba(7,17,18,.52)!important}
.teamMemberCombatGridV379 .teamMemberStatV379 strong{font-size:15px!important}
.teamMemberMedalsV379{display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin-top:11px!important}
.teamMemberMedalV379{width:84px!important;min-height:88px!important;padding:8px 5px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;border:1px solid rgba(213,176,58,.23)!important;border-radius:5px!important;background:linear-gradient(150deg,rgba(67,53,17,.27),rgba(11,19,18,.72))!important;text-align:center!important}
.teamMemberMedalV379 img{width:42px!important;height:42px!important;object-fit:contain!important;filter:drop-shadow(0 3px 4px rgba(0,0,0,.48))!important}
.teamMemberMedalV379 b{display:-webkit-box!important;overflow:hidden!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;color:#e7e2c8!important;font-size:9px!important;line-height:1.1!important;font-weight:730!important}
.teamMemberAwardsEmptyV379{margin:10px 0 0!important;color:#899790!important;font-size:12px!important;line-height:1.42!important}
.teamMemberDrawerFootV379{min-height:50px!important;padding:0 18px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;color:#b8c7bf!important;background:#071112!important;font-size:11px!important;font-weight:650!important}
.teamMemberDrawerFootV379 small{color:#708078!important;font-size:9px!important;font-weight:650!important;white-space:nowrap!important}
@keyframes teamMemberDrawerFadeV379{from{opacity:0}to{opacity:1}}
@keyframes teamMemberDrawerInV379{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:620px){
  .teamMemberDrawerBackdropV379{padding:8px!important;align-items:flex-end!important}
  .teamMemberDrawerV379{width:100%!important;max-height:calc(100vh - 16px)!important}
  .teamMemberDrawerHeadV379{grid-template-columns:104px minmax(0,1fr)!important;padding-left:14px!important}
  .teamMemberDrawerTankV379{width:104px!important}.teamMemberDrawerTankImageV379{width:104px!important}
  .teamMemberDrawerIdentityV379 h3{font-size:21px!important}
  .teamMemberPrimaryStatsV379,.teamMemberCombatGridV379{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ========================================================================
   v0.3.5.384 — TEAMS CALM STATUS SYSTEM
   Neutral score rows; a slim rail and a compact destroyed mark carry state.
   ======================================================================== */
body.battlePageActive .battleTeamsPaneV247 .teamCardV247{
  border-color:rgba(159,181,188,.25)!important;
  background:linear-gradient(145deg,rgba(27,43,49,.96),rgba(9,20,25,.985))!important;
}
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.ally{border-color:rgba(135,173,145,.30)!important}
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.enemy{border-color:rgba(181,142,143,.28)!important}
body.battlePageActive .battleTeamsPaneV247 .teamHeadV247{
  background:linear-gradient(180deg,rgba(31,47,54,.96),rgba(16,29,35,.98))!important;
}
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.ally .teamTitleV247 h3,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.ally .teamResultV247{color:#b8e76d!important;text-shadow:none!important}
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.enemy .teamTitleV247 h3,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.enemy .teamResultV247{color:#f08b84!important;text-shadow:none!important}
body.battlePageActive .battleTeamsPaneV247 .teamColumnsV247{
  background:rgba(8,20,25,.82)!important;
  border-bottom-color:rgba(202,218,221,.13)!important;
}
body.battlePageActive .battleTeamsPaneV247 .teamBodyV247{background:#101f27!important}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateUnknown,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateAlive,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateAlive,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateDestroyed,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateDestroyed,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.rank-1,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.rank-2,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.rank-3,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateAlive.rank-1,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateAlive.rank-2,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateAlive.rank-3,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateAlive.rank-1,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateAlive.rank-2,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateAlive.rank-3,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateDestroyed.rank-1,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateDestroyed.rank-2,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateDestroyed.rank-3,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateDestroyed.rank-1,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateDestroyed.rank-2,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateDestroyed.rank-3{
  background:rgba(22,36,44,.93)!important;
  box-shadow:none!important;
}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247:nth-child(even){background:rgba(27,43,52,.94)!important}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247{
  border-top-color:rgba(201,217,220,.105)!important;
  padding-left:18px!important;
  overflow:visible!important;
  filter:none!important;
}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247:before{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  left:0!important;
  top:0!important;
  bottom:0!important;
  width:4px!important;
  background:#718088!important;
  opacity:.58!important;
}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateAlive:before{background:#9bce66!important;opacity:.95!important}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateDestroyed:before{background:#e27770!important;opacity:.95!important}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateDestroyed .teamPlayerTextV247,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateDestroyed .teamVehicleV247,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateDestroyed .teamNumV247{opacity:.84!important}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateDestroyed .teamTankImgV247{
  filter:brightness(.89) contrast(1.04) saturate(.76) drop-shadow(0 5px 5px rgba(0,0,0,.43))!important;
  opacity:.91!important;
}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.owner,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.owner.rank-1,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.owner.rank-2,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.owner.rank-3{
  background:linear-gradient(90deg,rgba(116,164,48,.19),rgba(31,52,42,.94) 43%,rgba(22,36,44,.93))!important;
  box-shadow:inset 0 0 0 1px rgba(174,234,56,.84),inset 0 0 18px rgba(156,224,40,.055)!important;
  opacity:1!important;
}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.owner:before{background:#b6ee37!important;opacity:1!important}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.owner.stateDestroyed:before{background:#b6ee37!important}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247:hover,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.teamDetailTriggerV379:hover,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.teamDetailTriggerV379:focus-visible{
  filter:none!important;
  background:rgba(40,58,67,.98)!important;
  box-shadow:inset 0 0 0 1px rgba(215,232,235,.24),inset 0 0 17px rgba(255,255,255,.020)!important;
}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.owner:hover,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.owner.teamDetailTriggerV379:hover{box-shadow:inset 0 0 0 1px rgba(183,238,57,.90),inset 0 0 17px rgba(183,238,57,.065)!important}
body.battlePageActive .battleTeamsPaneV247 .teamTankImgV247{
  filter:brightness(1.05) contrast(1.06) saturate(.88) drop-shadow(0 5px 5px rgba(0,0,0,.40))!important;
}
body.battlePageActive .battleTeamsPaneV247 .teamTopTrophyV247{filter:drop-shadow(0 3px 4px rgba(0,0,0,.32))!important}
body.battlePageActive .battleTeamsPaneV247 .teamLifeMarkV384{
  position:relative!important;
  width:15px!important;
  height:15px!important;
  flex:0 0 15px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  border:1px solid rgba(236,145,138,.64)!important;
  background:rgba(165,63,58,.13)!important;
}
body.battlePageActive .battleTeamsPaneV247 .teamLifeMarkV384 i,
body.battlePageActive .battleTeamsPaneV247 .teamLifeMarkV384 i:after{
  position:absolute!important;
  width:8px!important;
  height:1.5px!important;
  border-radius:2px!important;
  background:#f2b0aa!important;
  content:""!important;
}
body.battlePageActive .battleTeamsPaneV247 .teamLifeMarkV384 i{transform:rotate(45deg)!important}
body.battlePageActive .battleTeamsPaneV247 .teamLifeMarkV384 i:after{transform:rotate(90deg)!important;transform-origin:center!important}
@media(max-width:1050px){
  body.battlePageActive .battleTeamsPaneV247 .teamRowV247{padding-left:14px!important}
}

/* v0.3.5.385: improve vehicle readability without returning coloured glows. */
body.battlePageActive .battleTeamsPaneV247 .teamTankImgV247{
  filter:brightness(1.26) contrast(1.10) saturate(1.04) drop-shadow(0 4px 4px rgba(0,0,0,.36))!important;
  opacity:1!important;
}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateDestroyed .teamTankImgV247{
  filter:brightness(1.11) contrast(1.08) saturate(.90) drop-shadow(0 4px 4px rgba(0,0,0,.38))!important;
  opacity:.93!important;
}

/* Current battle and garage screenshots: show the mod sharply at a useful size,
   with the untouched screenshot only as an unobtrusive blurred surround. */
.marksGalleryStageFix5.is-large.is-native{height:min(76dvh,720px)!important;background:#030708!important}
.marksGalleryStageFix5.is-large.is-native .marksGalleryBackdropFix5{
  inset:-14%!important;width:128%!important;height:128%!important;
  filter:blur(42px) brightness(.24) saturate(.80)!important;
  transform:scale(1.13)!important;
}
.marksGalleryStageFix5.is-large.is-native .marksGalleryCropFix5{
  height:min(calc(76dvh - 28px),650px)!important;
  max-width:95%!important;
  border-color:rgba(192,222,226,.30)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.64)!important;
}
@media(max-width:560px){
  .marksGalleryStageFix5.is-large.is-native{height:min(72dvh,680px)!important}
  .marksGalleryStageFix5.is-large.is-native .marksGalleryCropFix5{height:min(calc(72dvh - 26px),172vw,610px)!important;max-width:97%!important}
  .marksGalleryStageFix5.is-large.is-native .marksGalleryBackdropFix5{filter:blur(27px) brightness(.25) saturate(.80)!important}
}

/* v0.3.5.388 — readable private PRO analytics. */
.marksLiveShellRC20{
  background:radial-gradient(circle at 10% 0,rgba(171,224,49,.085),transparent 31%),linear-gradient(145deg,#142831,#09161c 78%)!important;
}
.marksLiveTankRC20{min-width:172px!important;padding:13px 15px!important}
.marksLiveTankRC20 b{font-size:14px!important}
.marksLiveTankRC20 span{font-size:12px!important;font-variant-numeric:tabular-nums}
.marksLiveOverviewRC20{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
.marksLiveChartCardRC20{padding:22px!important;background:linear-gradient(145deg,#172c35,#09171d)!important}
.marksLiveChartHeaderRC21{display:flex;align-items:flex-start;justify-content:space-between;gap:22px}
.marksLiveChartHeaderRC21>b{padding:7px 10px;border:1px solid rgba(198,226,120,.28);border-radius:5px;color:#d5e8a0;background:rgba(167,213,52,.08);font-size:10px;letter-spacing:.12em;white-space:nowrap}
.marksLiveChartCardRC20 h3{font-size:28px!important}
.marksLiveChartCardRC20 p{font-size:12px!important;color:#a6b8be!important}
.marksLiveChartFrameRC21{margin-top:17px;padding:10px 12px 8px;border:1px solid rgba(201,222,226,.13);border-radius:10px;background:linear-gradient(180deg,rgba(3,13,18,.88),rgba(6,18,24,.64));box-shadow:inset 0 1px rgba(255,255,255,.025)}
.marksLiveChartRC20{display:block!important;width:100%!important;height:auto!important;min-height:270px!important;margin:0!important;overflow:visible!important}
.marksLivePlotBgRC21{fill:rgba(7,22,29,.62);stroke:rgba(201,222,226,.08);stroke-width:1}
.marksLiveChartTickRC21 line{stroke:rgba(181,205,211,.18);stroke-width:1;stroke-dasharray:4 7}
.marksLiveChartTickRC21 text,.marksLiveChartXTickRC21 text{fill:#9eb0b5;font-family:Arial,sans-serif!important;font-size:11px!important;font-weight:500!important;letter-spacing:0!important;text-shadow:none!important;filter:none!important}
.marksLiveChartXTickRC21 line{stroke:rgba(205,224,229,.055);stroke-width:1}
.marksLiveChartAreaRC21{fill:url(#marksLiveAreaGradientRC21);stroke:none}
.marksLiveChartSegmentRC21{fill:none;stroke-width:3.4;stroke-linecap:round;filter:none!important}
.marksLiveChartSegmentRC21.isGain{stroke:#8fc65a;color:#8fc65a}
.marksLiveChartSegmentRC21.isDrop{stroke:#d97872;color:#d97872}
.marksLiveChartSegmentRC21.isFlat{stroke:#c1a75f;color:#c1a75f}
.marksLiveChartPointRC21{stroke:#07141a;stroke-width:3;cursor:help;transition:r .15s,filter .15s}
.marksLiveChartPointRC21.isStart{fill:#d1dcde}.marksLiveChartPointRC21.isGain{fill:#9bd066}.marksLiveChartPointRC21.isDrop{fill:#df8882}.marksLiveChartPointRC21.isFlat{fill:#cbb36c}
.marksLiveChartPointRC21:hover,.marksLiveChartPointRC21:focus{r:7;outline:none;filter:drop-shadow(0 0 4px rgba(225,239,230,.34))}
.marksLiveChartPointRC21.isLast{stroke:#f2f7e9;stroke-width:3}
.marksLiveChartLastRC21 rect{fill:#263a31;stroke:#8fc65a;stroke-width:1;filter:drop-shadow(0 3px 7px rgba(0,0,0,.42))}
.marksLiveChartLastRC21 text{fill:#e8f2e9;font-family:Arial,sans-serif!important;font-size:11px!important;font-weight:700!important;letter-spacing:0!important;text-shadow:none!important;filter:none!important}
.marksLiveChartLegendRC21{display:flex;align-items:center;gap:18px;padding:5px 7px 2px;color:#9cb0b7;font-size:10px;font-weight:750;letter-spacing:.07em}
.marksLiveChartLegendRC21 span{display:flex;align-items:center;gap:6px;color:#a8b9be!important;font-size:10px!important;letter-spacing:.07em!important}
.marksLiveChartLegendRC21 i{width:17px;height:3px;border-radius:4px}.marksLiveChartLegendRC21 i.gain{background:#8fc65a}.marksLiveChartLegendRC21 i.drop{background:#d97872}.marksLiveChartLegendRC21 i.flat{background:#c1a75f}
.marksLiveChartLegendRC21 b{margin-left:auto;color:#d2dee0;font-size:10px;letter-spacing:.1em}
.marksLiveChartSummaryRC21{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px!important;margin-top:13px}
.marksLiveChartSummaryRC21 article{padding:12px 14px;border:1px solid rgba(255,255,255,.07);border-radius:7px;background:rgba(5,15,20,.58)}
.marksLiveChartSummaryRC21 span{display:block!important;color:#8fa3ab!important;font-size:9px!important;font-weight:800!important;letter-spacing:.09em!important}
.marksLiveChartSummaryRC21 strong{display:block;margin-top:7px;color:#eff5f0;font:850 20px/1 var(--approved-font,"Arial Narrow",sans-serif);font-variant-numeric:tabular-nums}
.marksLiveChartSummaryRC21 article.isGain strong,.marksLiveDaySummaryRC21 article.isGain strong{color:#b8ec58}
.marksLiveChartSummaryRC21 article.isDrop strong,.marksLiveDaySummaryRC21 article.isDrop strong{color:#ef8b84}
.marksLiveGoalRC20{display:grid!important;grid-template-columns:190px minmax(0,1fr) 135px;align-items:center;gap:22px;min-height:80px!important;padding:15px 21px!important;overflow:visible!important;background:linear-gradient(90deg,#152a27,#0c1b21)!important}
.marksLiveGoalHeadingRC21{display:block!important;height:auto!important;min-height:46px!important;overflow:visible!important}
.marksLiveGoalHeadingRC21>span{display:block!important;color:#a9cb70!important;font-size:9px!important;font-weight:800!important;line-height:1.2!important;letter-spacing:.12em!important}
.marksLiveGoalHeadingRC21>strong{display:block!important;margin:7px 0 0!important;color:#d9e9b0!important;font-size:27px!important;line-height:1!important;text-shadow:none!important}
.marksLiveGoalRC20>div:not(.marksLiveGoalHeadingRC21){height:10px!important}
.marksLiveGoalRC20 p{margin:0!important;color:#a6b5ba!important;text-align:right;white-space:nowrap}
.marksLiveGoalRC20 p b{color:#d4b96c!important}
.marksLiveDayRC20{padding:22px!important}
.marksLiveDayRC20 h3{font-size:23px!important}
.marksLiveDayRC20 select{min-width:190px!important;font-weight:700}
.marksLiveDaySummaryRC21{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:8px;margin-top:18px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.marksLiveDaySummaryRC21>i{display:grid;place-items:center;color:#8ea1a8;font-style:normal;font-size:20px}
.marksLiveDaySummaryRC21 article{padding:13px 15px;border:1px solid rgba(255,255,255,.08);border-radius:7px;background:rgba(6,17,22,.64)}
.marksLiveDaySummaryRC21 span{display:block;color:#8fa3ab;font-size:9px;font-weight:800;letter-spacing:.09em}
.marksLiveDaySummaryRC21 strong{display:block;margin-top:7px;color:#eef5ef;font:850 22px/1 var(--approved-font,"Arial Narrow",sans-serif);font-variant-numeric:tabular-nums}
.marksLiveMetricGridRC20{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:9px!important}
.marksLiveMetricRC20{min-height:74px;padding:14px!important}
.marksLiveMetricRC20 span{font-size:10px!important;letter-spacing:.04em}
.marksLiveMetricRC20 strong{font-size:22px!important}
.marksLiveDayCaptionRC20{margin-top:13px!important;color:#82979f!important}
@media(max-width:850px){
  .marksLiveShellRC20{padding:19px!important}
  .marksLiveTankRailRC20{grid-template-columns:1fr!important}
  .marksLiveChartRC20{min-height:220px!important}
  .marksLiveChartSummaryRC21{grid-template-columns:repeat(3,minmax(0,1fr))}
  .marksLiveGoalRC20{grid-template-columns:1fr!important;gap:11px!important}
  .marksLiveGoalRC20 p{text-align:left}
  .marksLiveMetricGridRC20{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){
  .marksLiveChartHeaderRC21{display:block}.marksLiveChartHeaderRC21>b{display:inline-block;margin-top:12px}
  .marksLiveChartFrameRC21{margin-left:-10px;margin-right:-10px;padding:7px 2px}
  .marksLiveChartRC20{min-height:190px!important}
  .marksLiveChartLegendRC21{flex-wrap:wrap;gap:9px 14px}.marksLiveChartLegendRC21 b{width:100%;margin-left:0}
  .marksLiveChartSummaryRC21{grid-template-columns:repeat(2,minmax(0,1fr))}
  .marksLiveDayRC20 header{align-items:flex-start;flex-direction:column}.marksLiveDayRC20 select{width:100%;min-width:0!important}
  .marksLiveDaySummaryRC21{grid-template-columns:1fr 20px 1fr}.marksLiveDaySummaryRC21 article:nth-of-type(3),.marksLiveDaySummaryRC21 article:nth-of-type(4){grid-column:auto/span 1}.marksLiveDaySummaryRC21 article:nth-of-type(3){grid-column:1/2}.marksLiveDaySummaryRC21 article:nth-of-type(4){grid-column:3/4}
  .marksLiveMetricGridRC20{grid-template-columns:1fr!important}
}

/* =====================================================================
   v0.3.5.395 — APPROVED PAGE HEADERS + COMPOSED MARKS GALLERY
   Visual-only overlay. Keep this block isolated from application logic.
   ===================================================================== */

/* Public /marks: keep the approved render visible and readable. */
.marksHeroV363.marksHeroV366 {
  min-height: 500px;
  isolation: isolate;
  background:
    linear-gradient(90deg,
      rgba(5, 13, 18, 0.97) 0%,
      rgba(5, 13, 18, 0.91) 30%,
      rgba(5, 13, 18, 0.58) 47%,
      rgba(5, 13, 18, 0.16) 68%,
      rgba(5, 13, 18, 0.03) 100%),
    url('/assets/marks_hero_v395.png') right center / auto 110% no-repeat,
    #071116;
}

.marksHeroV363.marksHeroV366::after {
  background:
    linear-gradient(180deg,
      rgba(5, 13, 18, 0.05) 0%,
      rgba(5, 13, 18, 0.02) 52%,
      rgba(5, 13, 18, 0.42) 100%),
    linear-gradient(90deg,
      rgba(5, 13, 18, 0.28) 0%,
      transparent 52%,
      rgba(6, 16, 20, 0.03) 100%);
}

/* The supplied hero already contains the complete PRO interface. */
.marksHeroV363.marksHeroV366 .marksHeroBadge {
  display: none !important;
}

/* /me: supplied wide tank render with a controlled cinematic shade. */
.privateCinemaFix3 .accountHeroV371 {
  background:
    linear-gradient(90deg,
      rgba(5, 13, 17, 0.91) 0%,
      rgba(5, 13, 17, 0.79) 34%,
      rgba(5, 13, 17, 0.47) 66%,
      rgba(5, 13, 17, 0.31) 100%),
    linear-gradient(0deg,
      rgba(3, 9, 12, 0.60) 0%,
      rgba(3, 9, 12, 0.06) 64%,
      rgba(3, 9, 12, 0.18) 100%),
    url('/assets/account_hero_v395.png') center / cover no-repeat;
}

/* /me/marks: same approved Marks PRO render, slightly darker for private data. */
.privateCinemaFix3 .marksPrivateHeroV372 {
  isolation: isolate;
  background:
    linear-gradient(90deg,
      rgba(5, 13, 18, 0.97) 0%,
      rgba(5, 13, 18, 0.90) 32%,
      rgba(5, 13, 18, 0.58) 51%,
      rgba(5, 13, 18, 0.24) 74%,
      rgba(5, 13, 18, 0.12) 100%),
    linear-gradient(0deg,
      rgba(4, 11, 15, 0.46) 0%,
      transparent 62%),
    url('/assets/marks_hero_v395.png') right center / auto 112% no-repeat,
    #081318;
}

/* Gallery: supplied files are finished 16:9 compositions. */
.marksGalleryStageFix5.is-battle,
.marksGalleryStageFix5.is-garage,
.marksGalleryStageFix5.is-history,
.marksGalleryStageFix5.is-history-day,
.marksGalleryStageFix5.is-session,
.marksGalleryStageFix5.is-records,
.marksGalleryStageFix5.is-goals,
.marksGalleryStageFix5.is-info {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 1672 / 941;
  background: #071014 !important;
}

.marksGalleryStageFix5 .marksGalleryBackdropFix5 {
  display: none !important;
}

.marksGalleryStageFix5 .marksGalleryCropFix5 {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1672 / 941;
  transform: none !important;
  overflow: hidden;
  border: 0 !important;
  filter: none !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.marksGalleryStageFix5 .marksGalleryCropFix5 img {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  transform: none !important;
  object-fit: contain !important;
  opacity: 0 !important;
}

.marksGalleryStageFix5.is-battle .marksGalleryCropFix5 {
  background-image: url('/assets/marks-gallery/v395_battle.png') !important;
}

.marksGalleryStageFix5.is-garage .marksGalleryCropFix5 {
  background-image: url('/assets/marks-gallery/v395_garage.png') !important;
}

.marksGalleryStageFix5.is-history:not(.is-history-day) .marksGalleryCropFix5 {
  background-image: url('/assets/marks-gallery/v395_history_today.png') !important;
}

.marksGalleryStageFix5.is-history-day .marksGalleryCropFix5 {
  background-image: url('/assets/marks-gallery/v395_history_day.png') !important;
}

.marksGalleryStageFix5.is-session .marksGalleryCropFix5 {
  background-image: url('/assets/marks-gallery/v395_session.png') !important;
}

.marksGalleryStageFix5.is-records .marksGalleryCropFix5 {
  background-image: url('/assets/marks-gallery/v395_records.png') !important;
}

.marksGalleryStageFix5.is-goals .marksGalleryCropFix5 {
  background-image: url('/assets/marks-gallery/v395_goals.png') !important;
}

.marksGalleryStageFix5.is-info .marksGalleryCropFix5 {
  background-image: url('/assets/marks-gallery/v395_info.png') !important;
}

/* Full-screen viewer: show the complete PNG at maximum useful size. */
.marksGalleryDialogFix5 {
  width: min(1540px, calc(100vw - 32px)) !important;
  max-width: 1540px !important;
}

.marksGalleryDialogFix5 .marksGalleryStageFix5,
.marksGalleryModalFix5 .marksGalleryStageFix5 {
  width: 100% !important;
  height: min(74dvh, 840px) !important;
  aspect-ratio: auto;
}

.marksGalleryDialogFix5 .marksGalleryCropFix5,
.marksGalleryModalFix5 .marksGalleryCropFix5 {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto;
  background-size: contain !important;
}

@media (max-width: 900px) {
  .marksHeroV363.marksHeroV366,
  .privateCinemaFix3 .marksPrivateHeroV372 {
    min-height: 440px;
    background-position: right center;
    background-size: auto 104%;
  }

  .privateCinemaFix3 .accountHeroV371 {
    background-position: 48% center;
  }
}

@media (max-width: 760px) {
  .marksHeroV363.marksHeroV366,
  .privateCinemaFix3 .marksPrivateHeroV372 {
    min-height: 430px;
    background:
      linear-gradient(180deg,
        rgba(5, 13, 18, 0.82) 0%,
        rgba(5, 13, 18, 0.54) 45%,
        rgba(5, 13, 18, 0.91) 100%),
      url('/assets/marks_hero_v395.png') 66% center / cover no-repeat,
      #071116;
  }

  .privateCinemaFix3 .accountHeroV371 {
    background:
      linear-gradient(180deg,
        rgba(5, 13, 17, 0.57) 0%,
        rgba(5, 13, 17, 0.42) 48%,
        rgba(5, 13, 17, 0.90) 100%),
      url('/assets/account_hero_v395.png') 42% center / cover no-repeat;
  }

  .marksGalleryDialogFix5 {
    width: calc(100vw - 18px) !important;
  }

  .marksGalleryDialogFix5 .marksGalleryStageFix5,
  .marksGalleryModalFix5 .marksGalleryStageFix5 {
    height: min(66dvh, 660px) !important;
  }
}

@media (max-width: 560px) {
  .marksHeroV363.marksHeroV366,
  .privateCinemaFix3 .marksPrivateHeroV372 {
    min-height: 410px;
    background-position: 62% center;
  }

  .privateCinemaFix3 .accountHeroV371 {
    background-position: 39% center;
  }
}

/* === /v0.3.5.395 === */

/* =====================================================================
   v0.3.5.398 — PRIVATE MARKS PRO PREMIUM VISUAL
   Visual-only overlay, intentionally scoped to /me/marks.
   ===================================================================== */

.marksPrivatePageV372.privateMarksPremiumV398 {
  --marks-violet: #9b6cff;
  --marks-violet-light: #c6a7ff;
  --marks-violet-deep: #6f3ed8;
  --marks-red: #ff6675;
  --marks-red-light: #ff9aa5;
  --marks-gold: #d9b85f;
  --marks-panel: rgba(8, 20, 27, 0.92);
  --marks-line: rgba(190, 215, 224, 0.12);
  width: min(1460px, calc(100% - 36px));
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveShellRC20 {
  position: relative;
  isolation: isolate;
  margin-top: 24px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(174, 204, 215, 0.18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 5% 0%, rgba(155, 108, 255, 0.14), transparent 31%),
    radial-gradient(circle at 95% 8%, rgba(169, 229, 28, 0.075), transparent 26%),
    linear-gradient(145deg, rgba(17, 38, 48, 0.98), rgba(5, 14, 20, 0.99) 76%);
  box-shadow: 0 28px 75px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.045);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveShellRC20::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(196, 220, 228, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196, 220, 228, 0.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, #000, transparent 42%);
  content: "";
  pointer-events: none;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveShellRC20 > header {
  align-items: center;
  padding: 2px 2px 23px;
  border-bottom-color: rgba(194, 217, 225, 0.11);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveShellRC20 > header span,
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveTankRailRC20 > strong,
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartCardRC20 span,
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDayRC20 header span,
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveRecordsRC20 header span {
  color: #b8e162;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveShellRC20 h2 {
  margin-top: 9px;
  font-size: clamp(27px, 2.2vw, 34px);
  letter-spacing: -0.018em;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveShellRC20 > header small {
  padding: 8px 11px;
  border: 1px solid rgba(184, 225, 98, 0.13);
  border-radius: 999px;
  color: #9eb0b7;
  background: rgba(5, 14, 19, 0.44);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveTankRailRC20 {
  grid-template-columns: 154px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 2px 21px;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveTankRailRC20 > strong {
  padding-top: 15px;
  color: #b9c9ce;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveTankRailRC20 > div {
  gap: 11px;
  padding: 2px 2px 8px;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveTankRC20 {
  position: relative;
  min-width: 188px !important;
  padding: 15px 17px 14px !important;
  overflow: hidden;
  border: 1px solid rgba(186, 211, 220, 0.12);
  border-radius: 11px;
  background:
    linear-gradient(135deg, rgba(21, 39, 49, 0.96), rgba(6, 16, 22, 0.94)),
    #09151b;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14), inset 0 1px rgba(255, 255, 255, 0.025);
  transform: translateY(0);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveTankRC20::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  opacity: 0;
  background: linear-gradient(180deg, var(--marks-violet-light), var(--marks-violet));
  box-shadow: 0 0 18px rgba(155, 108, 255, 0.6);
  content: "";
  transition: opacity 180ms ease;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveTankRC20::after {
  position: absolute;
  top: -45%;
  left: -65%;
  width: 45%;
  height: 190%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(218, 205, 255, 0.12), transparent);
  content: "";
  transform: rotate(16deg);
  transition: left 420ms ease, opacity 160ms ease;
  pointer-events: none;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveTankRC20:hover {
  border-color: rgba(176, 143, 255, 0.46);
  background: linear-gradient(135deg, rgba(45, 34, 70, 0.92), rgba(8, 19, 27, 0.96));
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(155, 108, 255, 0.08);
  transform: translateY(-4px);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveTankRC20:hover::after {
  left: 122%;
  opacity: 1;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveTankRC20.isActive {
  border-color: rgba(183, 151, 255, 0.72);
  background:
    radial-gradient(circle at 84% 0%, rgba(155, 108, 255, 0.25), transparent 47%),
    linear-gradient(140deg, rgba(40, 31, 61, 0.98), rgba(12, 25, 32, 0.98));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.27), 0 0 28px rgba(119, 70, 219, 0.12), inset 0 1px rgba(255, 255, 255, 0.055);
  animation: marksTankSelectedV398 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveTankRC20.isActive::before {
  opacity: 1;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveTankRC20 b {
  font-size: 15px !important;
  letter-spacing: 0.005em;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveTankRC20 span {
  margin-top: 7px;
  color: #91a5ad;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveTankRC20.isActive span {
  color: var(--marks-violet-light);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartCardRC20,
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveGoalRC20,
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDayRC20,
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveRecordsRC20 {
  border-color: var(--marks-line);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(18, 39, 49, 0.96), rgba(6, 16, 22, 0.98));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), inset 0 1px rgba(255, 255, 255, 0.035);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartCardRC20 {
  padding: 26px !important;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartCardRC20 h3 {
  margin-top: 8px;
  font-size: clamp(28px, 2.35vw, 35px) !important;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartHeaderRC21 > b {
  padding: 8px 12px;
  border-color: rgba(172, 139, 255, 0.34);
  border-radius: 999px;
  color: #d7c7ff;
  background: rgba(155, 108, 255, 0.09);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartFrameRC21 {
  margin-top: 19px;
  padding: 12px 14px 10px;
  border-color: rgba(177, 204, 214, 0.11);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 15%, rgba(155, 108, 255, 0.055), transparent 54%),
    linear-gradient(180deg, rgba(2, 10, 15, 0.92), rgba(5, 17, 23, 0.82));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025), 0 14px 30px rgba(0, 0, 0, 0.15);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartRC20 {
  min-height: 310px !important;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLivePlotBgRC21 {
  fill: rgba(5, 17, 24, 0.62);
  stroke: rgba(194, 218, 226, 0.09);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartTickRC21 line {
  stroke: rgba(183, 205, 213, 0.14);
  stroke-dasharray: 5 8;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartXTickRC21 line {
  stroke: rgba(190, 211, 219, 0.052);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartTickRC21 text {
  fill: #b9c7cc;
  font-size: 10.5px !important;
  font-weight: 700 !important;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartXTickRC21 text {
  fill: #879aa2;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.035em !important;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartSegmentRC21 {
  stroke-width: 3.8;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartSegmentRC21.isGain {
  stroke: var(--marks-violet);
  filter: drop-shadow(0 0 3px rgba(155, 108, 255, 0.42)) !important;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartSegmentRC21.isDrop {
  stroke: var(--marks-red);
  filter: drop-shadow(0 0 3px rgba(255, 102, 117, 0.34)) !important;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartSegmentRC21.isFlat {
  stroke: var(--marks-gold);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartPointRC21 {
  stroke: #07131a;
  stroke-width: 3.2;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartPointRC21.isGain {
  fill: #b48dff;
  color: var(--marks-violet);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartPointRC21.isDrop {
  fill: #ff7e8b;
  color: var(--marks-red);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartPointRC21.isFlat {
  fill: #dfc36e;
  color: var(--marks-gold);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartPointRC21:hover,
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartPointRC21:focus {
  filter: drop-shadow(0 0 7px currentColor) !important;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartPointRC21.isLast {
  stroke: #f5f1ff;
  stroke-width: 3.5;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartLastRC21 rect {
  fill: rgba(40, 27, 66, 0.96);
  stroke: #a982ff;
  filter: drop-shadow(0 5px 12px rgba(64, 31, 126, 0.48));
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartLastRC21 text {
  fill: #f3edff;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartLegendRC21 {
  gap: 22px;
  padding: 7px 9px 3px;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartLegendRC21 i.gain {
  background: var(--marks-violet);
  box-shadow: 0 0 7px rgba(155, 108, 255, 0.48);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartLegendRC21 i.drop {
  background: var(--marks-red);
  box-shadow: 0 0 7px rgba(255, 102, 117, 0.35);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartLegendRC21 i.flat {
  background: var(--marks-gold);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartSummaryRC21 {
  gap: 10px !important;
  margin-top: 16px;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartSummaryRC21 article {
  position: relative;
  padding: 14px 16px;
  overflow: hidden;
  border-color: rgba(196, 219, 226, 0.095);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(10, 25, 32, 0.88), rgba(4, 13, 18, 0.82));
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartSummaryRC21 article::after {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  opacity: 0.24;
  background: linear-gradient(90deg, transparent, #9fb2b8, transparent);
  content: "";
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartSummaryRC21 article.isGain::after {
  opacity: 0.72;
  background: linear-gradient(90deg, transparent, var(--marks-violet), transparent);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartSummaryRC21 article.isDrop::after {
  opacity: 0.72;
  background: linear-gradient(90deg, transparent, var(--marks-red), transparent);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartSummaryRC21 article.isGain strong,
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDaySummaryRC21 article.isGain strong {
  color: var(--marks-violet-light);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartSummaryRC21 article.isDrop strong,
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDaySummaryRC21 article.isDrop strong {
  color: var(--marks-red-light);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveGoalRC20 {
  grid-template-columns: 190px minmax(320px, 1fr) 158px;
  gap: 24px;
  min-height: 100px !important;
  padding: 17px 21px !important;
  background:
    radial-gradient(circle at 72% 0%, rgba(155, 108, 255, 0.12), transparent 38%),
    linear-gradient(100deg, rgba(15, 36, 39, 0.98), rgba(9, 20, 29, 0.98)) !important;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveGoalHeadingRC21 {
  padding: 10px 14px;
  border: 1px solid rgba(178, 208, 216, 0.1);
  border-radius: 9px;
  background: rgba(2, 11, 16, 0.66);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveGoalHeadingRC21 > span {
  color: #b8e162 !important;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveGoalHeadingRC21 > strong {
  color: #f2effb !important;
  font-size: 30px !important;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveGoalRC20 > .marksGoalTrackV398 {
  position: relative;
  height: 39px !important;
  overflow: visible !important;
  border-radius: 0;
  background: transparent;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksGoalTrackV398::before {
  position: absolute;
  top: 4px;
  right: 0;
  left: 0;
  height: 11px;
  border: 1px solid rgba(188, 213, 221, 0.1);
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 64.8%, rgba(220, 229, 233, 0.28) 65%, transparent 65.2%),
    linear-gradient(90deg, transparent 84.8%, rgba(220, 229, 233, 0.28) 85%, transparent 85.2%),
    linear-gradient(90deg, transparent 94.75%, rgba(220, 229, 233, 0.5) 95%, transparent 95.25%),
    #030b10;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.62);
  content: "";
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveGoalRC20 > .marksGoalTrackV398 > i {
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 0;
  display: block;
  height: 11px;
  min-width: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7041db 0%, var(--marks-violet) 52%, #c8aaff 100%);
  box-shadow: 0 0 16px rgba(155, 108, 255, 0.42), inset 0 1px rgba(255, 255, 255, 0.35);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveGoalRC20 > .marksGoalTrackV398 > i::after {
  position: absolute;
  top: 50%;
  right: -6px;
  width: 13px;
  height: 13px;
  border: 3px solid #f2edff;
  border-radius: 50%;
  background: var(--marks-violet);
  box-shadow: 0 0 0 3px rgba(155, 108, 255, 0.18), 0 0 15px rgba(155, 108, 255, 0.72);
  content: "";
  transform: translateY(-50%);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksGoalTicksV398 {
  position: absolute;
  inset: 23px 0 auto;
  display: block;
  height: 12px;
  color: #71858d;
  font: 700 8px/1 Arial, sans-serif;
  letter-spacing: 0.03em;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksGoalTicksV398 b {
  position: absolute;
  font: inherit;
  transform: translateX(-50%);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksGoalTicksV398 b:nth-child(1) { left: 65%; }
.marksPrivatePageV372.privateMarksPremiumV398 .marksGoalTicksV398 b:nth-child(2) { left: 85%; }
.marksPrivatePageV372.privateMarksPremiumV398 .marksGoalTicksV398 b:nth-child(3) { left: 95%; color: #b9a5ea; }
.marksPrivatePageV372.privateMarksPremiumV398 .marksGoalTicksV398 b:nth-child(4) { right: 0; transform: none; }

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveGoalRC20 > p {
  display: grid;
  gap: 5px;
  justify-items: end;
  padding: 9px 12px;
  border: 1px solid rgba(155, 108, 255, 0.18);
  border-radius: 9px;
  color: #91a5ad !important;
  background: rgba(16, 14, 28, 0.55);
  text-align: right;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveGoalRC20 > p span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveGoalRC20 > p b {
  float: none !important;
  color: var(--marks-violet-light) !important;
  font: 850 20px/1 var(--approved-font, "Arial Narrow", sans-serif);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDayRC20 {
  position: relative;
  margin-top: 14px;
  padding: 25px !important;
  overflow: hidden;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDayRC20::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  opacity: 0.72;
  background: linear-gradient(90deg, #a9e51c 0%, var(--marks-violet) 52%, transparent 88%);
  content: "";
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDayRC20 > header {
  padding-bottom: 17px;
  border-bottom: 1px solid rgba(193, 216, 224, 0.09);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDayRC20 h3 {
  margin-top: 8px;
  font-size: 27px !important;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDayRC20 select {
  min-width: 214px !important;
  padding: 11px 34px 11px 13px;
  border-color: rgba(177, 145, 255, 0.28);
  border-radius: 9px;
  background-color: rgba(5, 14, 20, 0.82);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035), 0 8px 18px rgba(0, 0, 0, 0.16);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDaySummaryRC21 {
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 10px;
  margin-top: 19px;
  padding-bottom: 18px;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDaySummaryRC21 > i {
  position: relative;
  z-index: 0;
  color: #c4aff5;
  font-size: 20px;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDaySummaryRC21 > i::before {
  position: absolute;
  z-index: -1;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(155, 108, 255, 0.2);
  border-radius: 50%;
  background: rgba(155, 108, 255, 0.075);
  content: "";
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDaySummaryRC21 article {
  position: relative;
  padding: 15px 17px;
  overflow: hidden;
  border-color: rgba(191, 216, 224, 0.1);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(9, 24, 31, 0.9), rgba(4, 13, 18, 0.84));
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDaySummaryRC21 article:nth-of-type(2) {
  border-color: rgba(155, 108, 255, 0.27);
  background: linear-gradient(145deg, rgba(35, 27, 55, 0.72), rgba(5, 15, 21, 0.88));
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDaySummaryRC21 article strong {
  font-size: 24px;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveMetricGridRC20 {
  gap: 11px !important;
  margin-top: 19px;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveMetricRC20 {
  position: relative;
  min-height: 82px;
  padding: 16px !important;
  overflow: hidden;
  border-color: rgba(192, 215, 223, 0.085);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(8, 22, 29, 0.88), rgba(3, 12, 17, 0.8));
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveMetricRC20::after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  opacity: 0.36;
  background: linear-gradient(90deg, transparent, #91a7af, transparent);
  content: "";
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveMetricRC20:hover {
  border-color: rgba(181, 149, 255, 0.22);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveMetricRC20.blue strong {
  color: #8fdded;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveMetricRC20.gold strong {
  color: #edc869;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveMetricRC20.lime strong {
  color: var(--marks-violet-light);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveMetricRC20.red strong {
  color: var(--marks-red-light);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveMetricRC20.blue::after { background: linear-gradient(90deg, transparent, #65c7dc, transparent); }
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveMetricRC20.gold::after { background: linear-gradient(90deg, transparent, #d9b85f, transparent); }
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveMetricRC20.lime::after { background: linear-gradient(90deg, transparent, var(--marks-violet), transparent); }
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveMetricRC20.red::after { background: linear-gradient(90deg, transparent, var(--marks-red), transparent); }

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDayCaptionRC20 {
  display: inline-flex;
  margin-top: 15px !important;
  padding: 7px 10px;
  border: 1px solid rgba(190, 214, 222, 0.08);
  border-radius: 999px;
  color: #8fa2aa !important;
  background: rgba(3, 12, 17, 0.44);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveRecordsRC20 {
  margin-top: 14px;
  padding: 22px;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveRecordsRC20 header strong {
  color: #e1c26d;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveRecordsRC20 ol {
  gap: 10px;
  margin-top: 18px;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveRecordsRC20 li {
  position: relative;
  padding: 14px;
  overflow: hidden;
  border-color: rgba(191, 215, 223, 0.085);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(10, 24, 31, 0.9), rgba(4, 13, 18, 0.84));
  transition: transform 170ms ease, border-color 170ms ease;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveRecordsRC20 li:hover {
  border-color: rgba(217, 184, 95, 0.25);
  transform: translateY(-2px);
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveRecordsRC20 li b {
  color: #dcbc62;
}

@keyframes marksTankSelectedV398 {
  0% { transform: translateY(0) scale(0.985); }
  55% { transform: translateY(-3px) scale(1.012); }
  100% { transform: translateY(0) scale(1); }
}

@media (max-width: 980px) {
  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveTankRailRC20 {
    grid-template-columns: 1fr;
  }

  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveTankRailRC20 > strong {
    padding-top: 0;
  }

  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveGoalRC20 {
    grid-template-columns: 170px minmax(230px, 1fr) 145px;
    gap: 16px;
  }
}

@media (max-width: 850px) {
  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveShellRC20 {
    padding: 21px !important;
  }

  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartRC20 {
    min-height: 245px !important;
  }

  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveGoalRC20 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveGoalRC20 > p {
    justify-items: start;
    text-align: left;
  }

  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDaySummaryRC21 {
    grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
  }

  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDaySummaryRC21 article:nth-of-type(3) {
    grid-column: 1 / 2;
  }

  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDaySummaryRC21 article:nth-of-type(4) {
    grid-column: 3 / 4;
  }
}

@media (max-width: 560px) {
  .marksPrivatePageV372.privateMarksPremiumV398 {
    width: calc(100% - 18px);
  }

  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveShellRC20 {
    border-radius: 12px;
  }

  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveTankRC20 {
    min-width: 166px !important;
  }

  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartCardRC20,
  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDayRC20 {
    padding: 17px !important;
  }

  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartFrameRC21 {
    margin-right: -8px;
    margin-left: -8px;
    padding: 5px 0 8px;
    overflow-x: auto;
  }

  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartRC20 {
    width: 760px !important;
    min-height: 270px !important;
  }

  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartSummaryRC21 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDayRC20 select {
    width: 100%;
    min-width: 0 !important;
  }

  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveMetricGridRC20,
  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveRecordsRC20 ol {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveTankRC20,
  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveTankRC20::after,
  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveMetricRC20,
  .marksPrivatePageV372.privateMarksPremiumV398 .marksLiveRecordsRC20 li {
    animation: none !important;
    transition: none !important;
  }
}

/* === /v0.3.5.398 === */

/* v0.3.5.398 FIX1 — chart labels: remove inherited SVG outline. */
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartRC20 text {
  stroke: none !important;
  stroke-width: 0 !important;
  paint-order: normal !important;
  text-shadow: none !important;
  filter: none !important;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartTickRC21 text {
  fill: #aebdc2 !important;
  font-weight: 600 !important;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartXTickRC21 text {
  fill: #9baab0 !important;
  font-weight: 600 !important;
}

.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartLastRC21 text {
  fill: #f3edff !important;
  font-weight: 700 !important;
}

/* === /v0.3.5.398 FIX1 === */

/* v0.3.5.398 FIX2 — approved artwork swap for Replays and Video headers only. */
.videoHubHeroApproved {
  background-image: url('/assets/video_hub_hero_cinema_v399.png') !important;
}

/* === /v0.3.5.398 FIX2 === */

/* ========================================================================
   v0.3.5.398 FIX3 — FOOTER SOCIALS + TWO DECORATIVE LOCKS REMOVED
   Scope: footer presentation and the two approved account identity rows only.
   ======================================================================== */
.siteFooterCommunityV399 {
  display: grid;
  justify-self: end;
  gap: 12px;
}

.siteFooterSocialV399 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 9px;
}

.siteFooterSocialV399 a {
  --social-icon: url('/assets/ui/social/telegram.svg');
  --social-color: #229ed9;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(216, 231, 225, .15);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(24, 38, 39, .92), rgba(7, 15, 17, .98));
  box-shadow: 0 8px 20px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.siteFooterSocialV399 a > span {
  width: 18px;
  height: 18px;
  background: var(--social-color);
  -webkit-mask: var(--social-icon) center / contain no-repeat;
  mask: var(--social-icon) center / contain no-repeat;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .32));
}

.siteFooterSocialV399 a:hover {
  transform: translateY(-2px);
  border-color: rgba(215, 232, 225, .34);
  box-shadow: 0 11px 25px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.siteFooterSocialV399 .isYouTube { --social-icon: url('/assets/ui/social/youtube.svg'); --social-color: #ff0000; }
.siteFooterSocialV399 .isTwitch { --social-icon: url('/assets/ui/social/twitch.svg'); --social-color: #9146ff; }
.siteFooterSocialV399 .isTelegram { --social-icon: url('/assets/ui/social/telegram.svg'); --social-color: #229ed9; }
.siteFooterSocialV399 .isInstagram { --social-icon: url('/assets/ui/social/instagram.svg'); --social-color: linear-gradient(135deg, #feda75 4%, #fa7e1e 27%, #d62976 53%, #962fbf 75%, #4f5bd5 100%); }

.siteFooterContactIconV399 {
  display: inline-block;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background: #d5e0dc;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .32));
}

.siteFooterContactIconV399.isTelegram {
  background: #48b9ed;
  -webkit-mask-image: url('/assets/ui/social/telegram.svg');
  mask-image: url('/assets/ui/social/telegram.svg');
}

.siteFooterContactIconV399.isEmail {
  background: #dbe5e1;
  -webkit-mask-image: url('/assets/ui/social/email.svg');
  mask-image: url('/assets/ui/social/email.svg');
}

.siteFooterCopyrightV399 {
  display: grid;
  gap: 5px;
}

.siteFooterCopyrightV399 small {
  color: #84938d;
  font-size: 9px;
  line-height: 1.35;
}

.siteFooterCopyrightV399 small b {
  color: #b5d75a;
  font-weight: 850;
}

@media (max-width: 1220px) {
  .siteFooterCommunityV399 {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-self: stretch;
    gap: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(183, 204, 198, .08);
  }

  .siteFooterCommunityV399 .siteFooterLinksV391 {
    grid-column: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-self: stretch;
    padding-top: 0;
    border-top: 0;
  }
}

@media (max-width: 760px) {
  .siteFooterCommunityV399 {
    grid-column: auto;
    grid-template-columns: 1fr;
    justify-self: stretch;
    gap: 14px;
  }

  .siteFooterCommunityV399 .siteFooterLinksV391 {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .siteFooterSocialV399 a { transition: none; }
}

/* === /v0.3.5.398 FIX3 === */

/* ========================================================================
   v0.3.5.398 FIX4 — VERIFIED SCOUTING KPI ON REPLAY CARDS
   Keep the approved three-column card geometry. Assistance replaces base XP
   so scouting replays are identifiable directly in the replay catalogue.
   ======================================================================== */
.replaysDiscoveryPage.approvedReplaysMockup .cardHudIconAssist {
  color: #70e1d2 !important;
}

html body .replaysDiscoveryPage.approvedReplaysMockup
  .cardHudIconAssist img.cardPremiumKpiIcon.uiAssetIcon {
  width: 24px !important;
  height: 24px !important;
  filter: drop-shadow(0 0 7px rgba(74, 211, 193, .18))
          drop-shadow(0 4px 6px rgba(0, 0, 0, .42)) !important;
}

.replaysDiscoveryPage.approvedReplaysMockup
  .statsRow.cardHudStats .assistStat .cardHudValue strong {
  color: #d8fff8 !important;
}

.replaysDiscoveryPage.approvedReplaysMockup
  .statsRow.cardHudStats .assistStat .cardHudValue small {
  color: #8ecbc2 !important;
}

/* === /v0.3.5.398 FIX4 === */

/* ========================================================================
   v0.3.5.398 FIX6 — MEANINGFUL LIVE PULSE + VIDEO EVENT + READABILITY
   Keep the approved Pulse height. Remove upload noise, add a compact YouTube
   event, enlarge typography, and make the live lead plate unmistakable.
   ======================================================================== */
body.homePageActive .homePulseLeadV328 {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  padding: 0 12px 0 15px !important;
  gap: 12px !important;
  border: 1px solid rgba(190, 235, 73, .34) !important;
  background:
    radial-gradient(circle at 17% 50%, rgba(169, 229, 27, .16), transparent 40%),
    linear-gradient(180deg, rgba(43, 62, 52, .99), rgba(18, 34, 30, .998)) !important;
  box-shadow:
    inset 3px 0 0 #a9e51b,
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -1px 0 rgba(0, 0, 0, .48),
    0 9px 16px -10px rgba(0, 0, 0, .82),
    0 0 18px rgba(169, 229, 27, .075) !important;
}

body.homePageActive .homePulseLeadV328::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  background: linear-gradient(110deg, transparent 18%, rgba(203, 247, 91, .075) 46%, transparent 68%) !important;
  transform: translateX(-70%) !important;
  animation: homePulseLeadSheenV398 5.5s ease-in-out infinite !important;
  pointer-events: none !important;
}

body.homePageActive .homePulseLeadV328::after {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  width: 78px !important;
  height: 78px !important;
  left: -34px !important;
  top: 50% !important;
  border-radius: 50% !important;
  transform: translateY(-50%) !important;
  background: radial-gradient(circle, rgba(169, 229, 27, .14), transparent 68%) !important;
  pointer-events: none !important;
}

body.homePageActive .homePulseLiveDotV328 {
  flex-basis: 12px !important;
  width: 12px !important;
  height: 12px !important;
  background: #b9f52b !important;
  box-shadow: 0 0 8px rgba(185, 245, 43, .95), 0 0 20px rgba(169, 229, 27, .48) !important;
}

body.homePageActive .homePulseLeadV328 > span:last-child { gap: 5px !important; }
body.homePageActive .homePulseLeadV328 strong {
  color: #fff !important;
  font-size: 14.5px !important;
  line-height: 1 !important;
  letter-spacing: .045em !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .60), 0 0 12px rgba(169, 229, 27, .13) !important;
}
body.homePageActive .homePulseLeadV328 small {
  color: #c1cfbf !important;
  font-size: 8.2px !important;
  line-height: 1.1 !important;
  letter-spacing: .065em !important;
}

body.homePageActive .homePulseItemV328 {
  padding-left: 10px !important;
  padding-right: 20px !important;
}
body.homePageActive .homePulseItemBodyV328 { gap: 4px !important; }
body.homePageActive .homePulseEventLabelV328 {
  min-height: 12px !important;
  padding-top: 1px !important;
  font-size: 9.1px !important;
  line-height: 1.16 !important;
  letter-spacing: .045em !important;
}
body.homePageActive .homePulseEventTextV328 {
  min-height: 14px !important;
  font-size: 12px !important;
  line-height: 1.12 !important;
}
body.homePageActive .homePulseTimeV331 {
  min-height: 9px !important;
  margin-top: 0 !important;
  color: #c2ceca !important;
  font-size: 7.8px !important;
  line-height: 1.05 !important;
}
body.homePageActive .homePulseOpenV328 {
  position: absolute !important;
  right: 7px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: .38 !important;
}
body.homePageActive .homePulseItemV328:hover .homePulseOpenV328,
body.homePageActive .homePulseItemV328:focus-visible .homePulseOpenV328 {
  opacity: 1 !important;
  transform: translate(2px, -50%) !important;
}

body.homePageActive .homePulseItemV328.type-video_published {
  --pulse-accent: rgba(255, 40, 69, .92);
  --pulse-accent-soft: rgba(255, 40, 69, .14);
}
body.homePageActive .homePulseItemV328.type-video_published .homePulseEventLabelV328 {
  color: #ff7084 !important;
}
body.homePageActive .homePulseVideoActionV398 {
  color: #ffd8de !important;
  font-weight: 950 !important;
}
body.homePageActive .homePulseVideoIconV398 {
  flex: 0 0 25px !important;
  width: 25px !important;
  height: 25px !important;
  display: inline-block !important;
  background: #ff263f !important;
  mask: url('/assets/ui/social/youtube.svg') center / contain no-repeat !important;
  -webkit-mask: url('/assets/ui/social/youtube.svg') center / contain no-repeat !important;
  filter: drop-shadow(0 0 8px rgba(255, 38, 63, .42)) !important;
}

@keyframes homePulseLeadSheenV398 {
  0%, 68% { transform: translateX(-70%); opacity: 0; }
  76% { opacity: .75; }
  94%, 100% { transform: translateX(85%); opacity: 0; }
}

@media (min-width: 1181px) {
  body.homePageActive .homeLivePulseV328 { min-height: 94px !important; }
  body.homePageActive .homePulseLeadV328,
  body.homePageActive .homePulseTrackV328,
  body.homePageActive .homePulseStatusV328 { height: 72px !important; min-height: 72px !important; }
  body.homePageActive .homePulseItemV328 { height: 72px !important; min-height: 72px !important; }
}

@media (min-width: 761px) and (max-width: 1180px) {
  body.homePageActive .homePulseLeadV328 strong { font-size: 13px !important; }
  body.homePageActive .homePulseLeadV328 small { font-size: 7.5px !important; }
  body.homePageActive .homePulseEventLabelV328 { font-size: 8.7px !important; }
  body.homePageActive .homePulseEventTextV328 { font-size: 11.4px !important; }
  body.homePageActive .homePulseTimeV331 { font-size: 7.2px !important; }
}

@media (max-width: 760px) {
  body.homePageActive .homePulseLeadV328 { padding: 0 9px 0 12px !important; gap: 9px !important; }
  body.homePageActive .homePulseLeadV328 strong { font-size: 11.5px !important; }
  body.homePageActive .homePulseLeadV328 small { font-size: 6.8px !important; }
  body.homePageActive .homePulseEventLabelV328 { font-size: 8px !important; }
  body.homePageActive .homePulseEventTextV328 { font-size: 10.7px !important; }
  body.homePageActive .homePulseTimeV331 { display: none !important; }
  body.homePageActive .homePulseVideoIconV398 { flex-basis: 22px !important; width: 22px !important; height: 22px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.homePageActive .homePulseLeadV328::before { animation: none !important; opacity: 0 !important; }
}

/* === /v0.3.5.398 FIX6 === */

/* ========================================================================
   v0.3.5.398 FIX7 — HOME HUB HERO + COMPACT FOOTER + RESILIENT BOOT
   ======================================================================== */

/* HOME only: approved connected-HUB artwork. Other page headers are untouched. */
body.homePageActive .homeHero .heroBackdrop,
body.homePageActive .homeApprovedHero .heroBackdrop {
  inset: 0 !important;
  background-image: url('/assets/home_hero_hub_v398_fix7.webp') !important;
  background-size: cover !important;
  background-position: center 50% !important;
  filter: saturate(.94) contrast(1.05) brightness(.79) !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Initial page launch: the user's mark stays still while the mechanism moves. */
.bootV400 {
  box-sizing: border-box !important;
  min-height: calc(100vh - 190px) !important;
  padding: 70px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 17px !important;
  color: #aab7b1 !important;
  text-align: center !important;
}
.bootMarkV400 {
  position: relative !important;
  width: 148px !important;
  height: 148px !important;
  display: grid !important;
  place-items: center !important;
}
.bootGearV400 {
  position: absolute !important;
  inset: 0 !important;
  width: 148px !important;
  height: 148px !important;
  opacity: .68 !important;
  filter: drop-shadow(0 0 15px rgba(169, 229, 27, .19)) !important;
  animation: fermaniBootGearV400 5.8s linear infinite !important;
}
.bootLogoV400 {
  position: relative !important;
  z-index: 2 !important;
  width: 94px !important;
  height: 94px !important;
  object-fit: contain !important;
  border-radius: 5px !important;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .58)) !important;
  animation: fermaniBootLogoV400 1.8s ease-in-out infinite alternate !important;
}
.bootV400 > strong {
  color: #dbe5e0 !important;
  font: 850 13px/1.2 var(--approved-font) !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
}
.bootLineV400 {
  width: 156px !important;
  height: 2px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(180, 199, 190, .10) !important;
}
.bootLineV400 > i {
  display: block !important;
  width: 46% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, transparent, #a9e51b, #e4f7b6, transparent) !important;
  box-shadow: 0 0 11px rgba(169, 229, 27, .42) !important;
  animation: fermaniBootLineV400 1.35s ease-in-out infinite !important;
}
@keyframes fermaniBootGearV400 { to { transform: rotate(360deg); } }
@keyframes fermaniBootLogoV400 { from { transform: scale(.985); filter: drop-shadow(0 10px 16px rgba(0,0,0,.54)); } to { transform: scale(1.025); filter: drop-shadow(0 14px 23px rgba(0,0,0,.65)); } }
@keyframes fermaniBootLineV400 { from { transform: translateX(-110%); } to { transform: translateX(235%); } }

/* One quiet footer strip. The navigation already exists in the header. */
body > .siteFooterV400,
body.homePageActive > .siteFooterV400 {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 42px 0 0 !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-top: 1px solid rgba(183, 204, 198, .12) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(8, 17, 17, .54), rgba(3, 9, 10, .92)) !important;
  color: #85938d !important;
  box-shadow: none !important;
  font-size: 10px !important;
}
.siteFooterPrimaryV400,
.siteFooterLegalV400 {
  width: min(1410px, 100%) !important;
  margin: 0 auto !important;
}
.siteFooterPrimaryV400 {
  min-height: 62px !important;
  padding: 11px 0 !important;
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) auto minmax(320px, 1fr) !important;
  align-items: center !important;
  gap: 24px !important;
}
.siteFooterProjectV400 {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  color: #78867f !important;
  line-height: 1.35 !important;
}
.siteFooterProjectV400 span + span {
  padding-left: 18px !important;
  border-left: 1px solid rgba(183, 204, 198, .12) !important;
}
.siteFooterProjectV400 a {
  color: #b9e94a !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}
.siteFooterProjectV400 a:hover { color: #d9fa8a !important; }
.siteFooterSocialV400 { justify-content: center !important; }
.siteFooterSocialV400 a {
  width: 31px !important;
  height: 31px !important;
  border-color: rgba(210, 226, 220, .15) !important;
  background: rgba(13, 25, 24, .72) !important;
}
.siteFooterSocialV400 a > span { width: 17px !important; height: 17px !important; }
.siteFooterSocialV400 .isEmail { --social-icon: url('/assets/ui/social/email.svg'); --social-color: #dbe5e1; }
.siteFooterContactsV400 {
  min-width: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 14px !important;
}
.siteFooterContactsV400 a {
  color: #98a7a0 !important;
  font-size: 9px !important;
  font-weight: 720 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.siteFooterContactsV400 a:hover { color: #d8e2dd !important; }
.siteFooterLegalV400 {
  min-height: 31px !important;
  padding: 8px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  border-top: 1px solid rgba(183, 204, 198, .08) !important;
  color: #5f6e68 !important;
  font-size: 8px !important;
  line-height: 1.35 !important;
}
.siteFooterLegalV400 b {
  flex: 0 0 auto !important;
  color: #98c92c !important;
  font-size: 8px !important;
  letter-spacing: .055em !important;
}

@media (max-width: 1100px) {
  .siteFooterPrimaryV400 { grid-template-columns: minmax(260px, 1fr) auto !important; }
  .siteFooterContactsV400 { grid-column: 1 / -1 !important; justify-content: center !important; }
  .siteFooterProjectV400 { justify-content: flex-start !important; }
}
@media (max-width: 720px) {
  body > .siteFooterV400,
  body.homePageActive > .siteFooterV400 { margin-top: 28px !important; padding: 0 16px !important; }
  .siteFooterPrimaryV400 { grid-template-columns: 1fr !important; gap: 12px !important; padding: 17px 0 !important; }
  .siteFooterProjectV400 { flex-direction: column !important; align-items: center !important; gap: 5px !important; text-align: center !important; }
  .siteFooterProjectV400 span + span { padding-left: 0 !important; border-left: 0 !important; }
  .siteFooterSocialV400 { justify-content: center !important; }
  .siteFooterContactsV400 { grid-column: auto !important; justify-content: center !important; flex-wrap: wrap !important; gap: 8px 13px !important; }
  .siteFooterLegalV400 { align-items: flex-start !important; font-size: 7.5px !important; }
  .bootV400 { min-height: calc(100vh - 230px) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .bootGearV400 { animation-duration: 20s !important; }
  .bootLogoV400 { animation: none !important; }
}

/* === /v0.3.5.398 FIX7 === */

/* ========================================================================
   v0.3.5.398 FIX8 — REAL ASSET MANIFEST + PREMIUM LOADER LAYERING
   The moving mechanism is strictly behind the Fermani_WoT mark.
   ======================================================================== */
.bootMarkV401 {
  position: relative !important;
  isolation: isolate !important;
  width: 154px !important;
  height: 154px !important;
}
.bootGearV400 { display: none !important; }
.bootOrbitV401 {
  position: absolute !important;
  z-index: 0 !important;
  display: block !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
.bootOrbitOuterV401 {
  inset: 3px !important;
  border: 1px solid rgba(191, 214, 203, .16) !important;
  box-shadow: inset 0 0 18px rgba(169, 229, 27, .035), 0 0 24px rgba(0, 0, 0, .26) !important;
}
.bootOrbitOuterV401::before {
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  border: 2px solid transparent !important;
  border-top-color: #b4ec34 !important;
  border-right-color: rgba(180, 236, 52, .28) !important;
  border-radius: 50% !important;
  filter: drop-shadow(0 0 6px rgba(169, 229, 27, .34)) !important;
  animation: fermaniBootOrbitV401 2.8s linear infinite !important;
}
.bootOrbitOuterV401::after {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  right: 27px !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #dffb94 !important;
  box-shadow: 0 0 9px rgba(185, 239, 64, .88) !important;
}
.bootOrbitInnerV401 {
  inset: 15px !important;
  border: 1px dashed rgba(202, 222, 212, .17) !important;
  animation: fermaniBootOrbitReverseV401 8s linear infinite !important;
}
.bootGlowV401 {
  position: absolute !important;
  z-index: 1 !important;
  width: 112px !important;
  height: 112px !important;
  border: 1px solid rgba(190, 211, 201, .12) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, #14201e 0%, #0d1716 62%, #091110 100%) !important;
  box-shadow: 0 0 26px rgba(0, 0, 0, .58), 0 0 34px rgba(169, 229, 27, .055) !important;
  pointer-events: none !important;
}
.bootLogoV401 {
  position: relative !important;
  z-index: 3 !important;
  width: 92px !important;
  height: 92px !important;
  border-radius: 4px !important;
  animation: fermaniBootLogoV401 1.9s ease-in-out infinite alternate !important;
}
@keyframes fermaniBootOrbitV401 { to { transform: rotate(360deg); } }
@keyframes fermaniBootOrbitReverseV401 { to { transform: rotate(-360deg); } }
@keyframes fermaniBootLogoV401 {
  from { transform: scale(.992); filter: drop-shadow(0 10px 15px rgba(0,0,0,.54)); }
  to { transform: scale(1.018); filter: drop-shadow(0 13px 21px rgba(0,0,0,.66)); }
}
@media (prefers-reduced-motion: reduce) {
  .bootOrbitOuterV401::before,
  .bootOrbitInnerV401 { animation-duration: 18s !important; }
  .bootLogoV401 { animation: none !important; }
}

/* === /v0.3.5.398 FIX8 === */

/* ========================================================================
   v0.3.5.398 FIX9 — HOME RECORD CARD 15% SCALE
   Desktop only. The whole card scales as one unit and stays anchored right,
   revealing more of the approved HOME hero artwork without layout drift.
   ======================================================================== */
@media (min-width: 901px) {
  body.homePageActive .homeApprovedHero .approvedTopBattle {
    justify-self: end !important;
    transform: scale(.85) !important;
    transform-origin: top right !important;
  }
}

/* === /v0.3.5.398 FIX9 === */

/* ========================================================================
   v0.3.5.398 FIX10 — BATTLE LIFE STATUS + HERO IDENTITY CLEANUP
   Replay ownership is gold. Vehicle survival is green/red and never gets
   overwritten by the owner highlight. Hero result is shown once; the player
   nickname is reduced by exactly 20% from the established desktop sizes.
   ======================================================================== */
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateAlive,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateAlive,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateAlive,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateAlive.rank-1,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateAlive.rank-2,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateAlive.rank-3 {
  background: linear-gradient(90deg, rgba(65, 112, 68, .22), rgba(25, 46, 43, .95) 43%, rgba(22, 36, 44, .94)) !important;
}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateDestroyed,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateDestroyed,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateDestroyed,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateDestroyed.rank-1,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateDestroyed.rank-2,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateDestroyed.rank-3 {
  background: linear-gradient(90deg, rgba(124, 48, 48, .25), rgba(49, 34, 39, .96) 43%, rgba(22, 34, 42, .94)) !important;
}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateAlive::before,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.owner.stateAlive::before {
  width: 5px !important;
  background: #93d765 !important;
  box-shadow: 0 0 9px rgba(147, 215, 101, .32) !important;
  opacity: 1 !important;
}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateDestroyed::before,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.owner.stateDestroyed::before {
  width: 5px !important;
  background: #ef766f !important;
  box-shadow: 0 0 9px rgba(239, 118, 111, .30) !important;
  opacity: 1 !important;
}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.owner,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.owner.rank-1,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.owner.rank-2,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.owner.rank-3 {
  box-shadow: inset 0 0 0 1px rgba(227, 184, 69, .78), inset 0 0 18px rgba(227, 184, 69, .045) !important;
  opacity: 1 !important;
}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.owner.stateAlive {
  background: linear-gradient(90deg, rgba(75, 123, 68, .28), rgba(35, 52, 43, .96) 43%, rgba(22, 36, 44, .94)) !important;
}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.owner.stateDestroyed {
  background: linear-gradient(90deg, rgba(145, 52, 49, .31), rgba(55, 35, 38, .97) 43%, rgba(22, 34, 42, .94)) !important;
}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.owner .teamPlayerTextV247 em {
  border: 1px solid rgba(244, 205, 101, .42) !important;
  background: rgba(115, 79, 17, .72) !important;
  color: #ffe49a !important;
  box-shadow: 0 0 8px rgba(226, 178, 57, .10) !important;
}
body.battlePageActive .battleTeamsPaneV247 .teamLifeMarkV384 {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  border-radius: 5px !important;
}
body.battlePageActive .battleTeamsPaneV247 .teamLifeMarkV384.alive {
  border-color: rgba(145, 213, 99, .72) !important;
  background: rgba(69, 125, 62, .30) !important;
  box-shadow: inset 0 0 7px rgba(145, 213, 99, .08), 0 0 7px rgba(145, 213, 99, .10) !important;
}
body.battlePageActive .battleTeamsPaneV247 .teamLifeMarkV384.destroyed {
  border-color: rgba(239, 118, 111, .74) !important;
  background: rgba(151, 55, 53, .30) !important;
  box-shadow: inset 0 0 7px rgba(239, 118, 111, .07), 0 0 7px rgba(239, 118, 111, .09) !important;
}
body.battlePageActive .battleTeamsPaneV247 .teamLifeMarkV384 i,
body.battlePageActive .battleTeamsPaneV247 .teamLifeMarkV384 i::after {
  content: "" !important;
  position: absolute !important;
}
body.battlePageActive .battleTeamsPaneV247 .teamLifeMarkV384.destroyed i,
body.battlePageActive .battleTeamsPaneV247 .teamLifeMarkV384.destroyed i::after {
  width: 9px !important;
  height: 1.5px !important;
  border-radius: 2px !important;
  background: #ffc1bc !important;
}
body.battlePageActive .battleTeamsPaneV247 .teamLifeMarkV384.destroyed i { transform: rotate(45deg) !important; }
body.battlePageActive .battleTeamsPaneV247 .teamLifeMarkV384.destroyed i::after { transform: rotate(90deg) !important; transform-origin: center !important; }
body.battlePageActive .battleTeamsPaneV247 .teamLifeMarkV384.alive i {
  width: 8px !important;
  height: 4px !important;
  border: 0 solid #d9ffc0 !important;
  border-width: 0 0 2px 2px !important;
  border-radius: 0 !important;
  background: transparent !important;
  transform: translateY(-1px) rotate(-45deg) !important;
}
body.battlePageActive .battleTeamsPaneV247 .teamLifeMarkV384.alive i::after { content: none !important; display: none !important; }
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateDestroyed .teamPlayerTextV247,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateDestroyed .teamVehicleV247,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateDestroyed .teamNumV247 {
  opacity: .70 !important;
}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateDestroyed .teamTankImgV247 {
  filter: grayscale(.72) brightness(.88) contrast(1.08) saturate(.42) drop-shadow(0 4px 4px rgba(0,0,0,.42)) !important;
  opacity: .76 !important;
}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateAlive .teamTankImgV247 {
  filter: brightness(1.24) contrast(1.10) saturate(1.04) drop-shadow(0 4px 4px rgba(0,0,0,.36)) !important;
  opacity: 1 !important;
}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateAlive:hover,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateAlive:focus-visible {
  background: linear-gradient(90deg, rgba(75, 126, 76, .31), rgba(39, 61, 56, .98) 43%, rgba(29, 45, 53, .98)) !important;
}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateDestroyed:hover,
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateDestroyed:focus-visible {
  background: linear-gradient(90deg, rgba(149, 57, 55, .34), rgba(66, 41, 45, .98) 43%, rgba(29, 43, 51, .98)) !important;
}

/* 52 / 46 / 38 px established sizes reduced by exactly 20%. */
body.battlePageActive .approvedTankTitle.approvedIdentityTitle > .approvedPlayerName,
body.battlePageActive .approvedTankTitle.approvedIdentityTitle > strong {
  font-size: 41.6px !important;
}
@media (max-width: 1280px) {
  body.battlePageActive .approvedTankTitle.approvedIdentityTitle > .approvedPlayerName,
  body.battlePageActive .approvedTankTitle.approvedIdentityTitle > strong { font-size: 36.8px !important; }
}
@media (max-width: 850px) {
  body.battlePageActive .approvedTankTitle.approvedIdentityTitle > .approvedPlayerName,
  body.battlePageActive .approvedTankTitle.approvedIdentityTitle > strong { font-size: 30.4px !important; }
}

/* === /v0.3.5.398 FIX10 === */

/* ========================================================================
   v0.3.5.398 FIX11 — SURVIVAL STATE OVERRIDES LEADER RANK
   Rank keeps its trophy only. Every destroyed row uses one red state surface,
   including the top three and replay owner. Every survivor uses the same calm
   steel surface and bright green status mark as the surviving Leopard 1.
   ======================================================================== */
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateDestroyed,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateDestroyed,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateDestroyed.rank-1,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateDestroyed.rank-2,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateDestroyed.rank-3,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateDestroyed.rank-1,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateDestroyed.rank-2,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateDestroyed.rank-3,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.owner.stateDestroyed,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.owner.stateDestroyed {
  background: linear-gradient(90deg, rgba(126, 47, 48, .34), rgba(58, 38, 43, .97) 43%, rgba(29, 40, 47, .96)) !important;
}
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateAlive,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateAlive,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateAlive.rank-1,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateAlive.rank-2,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.stateAlive.rank-3,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateAlive.rank-1,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateAlive.rank-2,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.stateAlive.rank-3,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.ally .teamRowV247.owner.stateAlive,
body.battlePageActive .battleTeamsPaneV247 .teamCardV247.enemy .teamRowV247.owner.stateAlive {
  background: linear-gradient(90deg, rgba(31, 52, 55, .98), rgba(24, 41, 48, .97) 45%, rgba(22, 36, 44, .95)) !important;
}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateAlive .teamLifeMarkV384.alive {
  border-color: rgba(153, 226, 105, .88) !important;
  background: rgba(63, 128, 57, .40) !important;
  box-shadow: inset 0 0 8px rgba(177, 239, 132, .13), 0 0 8px rgba(145, 220, 91, .16) !important;
}
body.battlePageActive .battleTeamsPaneV247 .teamRowV247.stateAlive .teamLifeMarkV384.alive i {
  border-color: #e8ffdc !important;
  filter: drop-shadow(0 0 3px rgba(197, 255, 162, .36)) !important;
}

/* === /v0.3.5.398 FIX11 === */

/* ========================================================================
   v0.3.5.398 FIX12 — FOOTER BRAND WORDMARK GAP
   The footer section separator must apply only between its two outer text
   blocks, never between the generated FERMANI and HUB wordmark fragments.
   ======================================================================== */
.siteFooterProjectV400 .rhGlobalBrandWord > .rhGlobalBrandHub {
  padding-left: 0 !important;
  border-left: 0 !important;
}

/* === /v0.3.5.398 FIX12 === */

/* ========================================================================
   v0.3.5.398 FIX13 — BATTLE HERO KPI READABILITY
   Large-screen typography only. Improve the labels circled in the approved
   battle-page review and gently lift their values without changing any panel
   geometry, data, animation, parser behavior or mobile layout.
   ======================================================================== */
@media (min-width: 1251px) {
  body.battlePageActive .cinematicReplayPage .approvedHeroMetric strong {
    font-size: 27px !important;
  }
  body.battlePageActive .cinematicReplayPage .approvedHeroMetric small {
    margin-top: 4px !important;
    color: #c5cfca !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
  }
  body.battlePageActive .cinematicReplayPage .approvedEconomy > strong {
    font-size: 32px !important;
  }
  body.battlePageActive .cinematicReplayPage .approvedEconomy > small {
    margin-top: 5px !important;
    color: #b8c3be !important;
    font-size: 10px !important;
    font-weight: 680 !important;
    line-height: 1.05 !important;
  }
  body.battlePageActive .cinematicReplayPage .approvedSubMetricsV266 strong {
    font-size: 19px !important;
  }
  body.battlePageActive .cinematicReplayPage .approvedSubMetricsV266 small {
    color: #c0cac5 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
  }
}

/* === /v0.3.5.398 FIX13 === */

/* ========================================================================
   v0.3.5.398 FIX15 — HOME ROLLING LEADERBOARDS
   Compact period selector in the existing title row. The metric labels are
   ten percent larger without increasing the leaderboard panel height.
   ======================================================================== */
body.homePageActive .todayLeaderboardPanel .panelTitle {
  gap: 6px !important;
}
body.homePageActive .homeLeaderboardPeriodTabs {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  margin-left: auto;
  padding: 2px;
  border: 1px solid rgba(215, 226, 229, .13);
  border-radius: 6px;
  background: rgba(9, 17, 20, .64);
}
body.homePageActive .homeLeaderboardPeriodTab {
  height: 19px;
  min-width: 0;
  padding: 0 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #96a3a4;
  font: 850 6.8px/1 var(--approved-font);
  letter-spacing: .025em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
body.homePageActive .homeLeaderboardPeriodTab:hover {
  color: #e8efeb;
  background: rgba(255, 255, 255, .035);
}
body.homePageActive .homeLeaderboardPeriodTab.active {
  color: #efffd6;
  background: linear-gradient(180deg, rgba(169, 229, 27, .19), rgba(99, 139, 18, .09));
  box-shadow: inset 0 0 0 1px rgba(169, 229, 27, .25);
}
body.homePageActive .todayLeaderboardPanel .homePanelHeaderAction {
  margin-left: 0 !important;
  flex: 0 0 auto;
}
@media (min-width: 561px) {
  body.homePageActive .todayLeaderboardTab { font-size: 8.3px !important; }
}
@media (max-width: 560px) {
  body.homePageActive .todayLeaderboardPanel .panelTitle { gap: 3px !important; }
  body.homePageActive .homeLeaderboardPeriodTab { padding: 0 4px; font-size: 6.2px; }
  body.homePageActive .todayLeaderboardTab { font-size: 7.4px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.homePageActive .homeLeaderboardPeriodTab { transition: none !important; }
}

/* === /v0.3.5.398 FIX15 === */

/* ========================================================================
   v0.3.5.398 FIX16 — HOME HERO COMPACT CROP
   Crop only the low-value bottom air on extra-wide desktop screens. Keep the
   page canvas, dashboard cards, artwork composition and responsive layouts.
   ======================================================================== */
@media (min-width: 1600px) {
  body.homePageActive .homeApprovedHero {
    height: 404px !important;
    min-height: 404px !important;
  }
}

/* === /v0.3.5.398 FIX16 === */

/* ========================================================================
   v0.3.5.402 FIX22 — REPLAY STORIES + CRAWLABLE PUBLIC CONTENT
   Story text uses existing card geometry; no replay card is made taller.
   ======================================================================== */
.seoServerFallback{width:min(1120px,calc(100% - 40px));margin:46px auto 80px;padding:42px;border:1px solid rgba(168,229,26,.24);border-radius:10px;background:linear-gradient(145deg,#142126,#071014);box-shadow:0 25px 70px rgba(0,0,0,.35)}
.seoServerFallback .seoServerEyebrow{margin:0 0 12px;color:#a8e51a;font-size:11px;font-weight:900;letter-spacing:.14em}
.seoServerFallback h1{margin:0;color:#f3f6f4;font-size:clamp(34px,5vw,64px);line-height:1}
.seoServerFallback>p:not(.seoServerEyebrow){max-width:820px;margin:20px 0;color:#aebbb7;font-size:16px;line-height:1.65}
.seoServerFallback nav{display:flex;gap:10px;margin-top:24px}.seoServerFallback a{text-decoration:none}
.approvedReplaysMockup .cardImageOverlay.hasReplayStory strong{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:3px!important;max-width:100%!important}
.approvedReplaysMockup .cardImageOverlay.hasReplayStory .cardHeaderTank{display:block!important;color:#f5f7f6!important;font-size:11px!important;line-height:1.12!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.approvedReplaysMockup .cardImageOverlay.hasReplayStory .cardHeaderMap{display:block!important;color:#95a39e!important;font-size:7.5px!important;line-height:1.1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.latestReplayRow{text-decoration:none;color:inherit}
.replayStoryBlockV402,.replayStoryEditorV402{margin:12px 0 0;border:1px solid rgba(190,210,214,.18);border-radius:9px;background:linear-gradient(145deg,rgba(18,31,36,.96),rgba(7,16,20,.985));box-shadow:0 24px 52px -28px rgba(0,0,0,.88),inset 0 1px 0 rgba(255,255,255,.035)}
.replayStoryBlockV402{display:grid;grid-template-columns:minmax(260px,.65fr) minmax(0,1.35fr);gap:32px;padding:24px 28px;border-left:3px solid rgba(168,229,26,.68)}
.replayStoryBlockV402 span,.replayStoryEditorHeadV402 span{display:block;color:#a8e51a;font-size:9px;font-weight:900;letter-spacing:.14em}
.replayStoryBlockV402 h2,.replayStoryEditorHeadV402 h2{margin:7px 0 0;color:#f4f7f5;font-size:25px;line-height:1.08}
.replayStoryBlockV402 p{margin:0;color:#b7c2bf;font-size:14px;line-height:1.65;overflow-wrap:anywhere}
.replayStoryEditorV402{padding:24px 28px}.replayStoryEditorV402[hidden]{display:none!important}
.replayStoryEditorHeadV402{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.replayStoryCloseV402{border:0;background:transparent;color:#91a09b;font-size:26px;cursor:pointer}
.replayStoryEditorV402 label{display:block;margin-top:12px}.replayStoryEditorV402 label b{display:block;margin-bottom:7px;color:#dbe2df;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.replayStoryEditorV402 input,.replayStoryEditorV402 textarea{box-sizing:border-box;width:100%;border:1px solid rgba(177,199,202,.22);border-radius:6px;outline:0;background:#071116;color:#eef3f0;padding:11px 13px;font-family:inherit;font-size:14px;font-weight:600;line-height:1.45;resize:vertical}
.replayStoryEditorV402 input:focus,.replayStoryEditorV402 textarea:focus{border-color:rgba(168,229,26,.58);box-shadow:0 0 0 3px rgba(168,229,26,.07)}
.replayStoryEditorV402>small{display:block;margin-top:7px;color:#71817d;font-size:10px}
.replayStoryEditorActionsV402{display:flex;align-items:center;gap:9px;margin-top:17px}.replayStoryEditorActionsV402 .button{text-decoration:none}.replayStoryEditorActionsV402 em{margin-left:auto;color:#92a09c;font-size:11px;font-style:normal}.replayStoryEditorActionsV402 em.ok{color:#a8e51a}.replayStoryEditorActionsV402 em.error{color:#ff7d82}
.approvedStoryGlyphV402{color:#a8e51a;font-size:18px;font-style:normal;line-height:1}
.uploadEdgeHost .replayStoryEditorV402{margin-top:15px}.uploadEdgeHost .replayStoryEditorV402.isUploadV402{background:linear-gradient(145deg,rgba(18,31,36,.98),rgba(7,16,20,.99))}
@media(max-width:760px){.seoServerFallback{padding:26px 20px}.replayStoryBlockV402{grid-template-columns:1fr;gap:12px;padding:20px}.replayStoryEditorV402{padding:20px}.replayStoryEditorActionsV402{align-items:stretch;flex-direction:column}.replayStoryEditorActionsV402 em{margin-left:0}.approvedStoryActionV402 span{display:none!important}}

/* === /v0.3.5.402 FIX22 === */

/* ========================================================================
   v0.3.5.402 FIX22.1 — STORY BELOW REPORT + FIXED CARD TITLE GEOMETRY
   ======================================================================== */
.replayStoryCommentsZoneV402Fix1{min-width:0;margin-top:14px}
.replayStoryCommentsZoneV402Fix1:empty{display:none}
.replayStoryCommentsZoneV402Fix1 .replayStoryBlockV402,
.replayStoryCommentsZoneV402Fix1 .replayStoryEditorV402{margin-top:0;margin-bottom:12px}
.approvedReplaysMockup .cardImageOverlay.hasReplayStory .cardHeaderTank{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* === /v0.3.5.402 FIX22.1 === */

/* ========================================================================
   v0.3.5.402 FIX22.2 — COMPACT REPLAY CARD TITLE SLOT
   Reuses existing lower-card air. Outer card and artwork geometry stay fixed.
   ======================================================================== */
.replaysDiscoveryPage.approvedReplaysMockup .replayCard.hasReplayStoryTitleV402Fix2 .statsRow.cardHudStats{
  min-height:50px!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replayCard.hasReplayStoryTitleV402Fix2 .statsRow.cardHudStats .cardHudStat{
  min-height:50px!important;
  padding-top:4px!important;
  padding-bottom:4px!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replayCard.hasReplayStoryTitleV402Fix2 .cardAwards{
  box-sizing:border-box!important;
  min-height:26px!important;
  height:26px!important;
  padding:2px 8px!important;
  gap:3px!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replayCard.hasReplayStoryTitleV402Fix2 .cardAwards .cardAwardIcon,
.replaysDiscoveryPage.approvedReplaysMockup .replayCard.hasReplayStoryTitleV402Fix2 .cardAwards .cardAwardIcon img{
  width:20px!important;
  height:20px!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .cardStoryTitleV402Fix2{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
  height:26px!important;
  min-height:26px!important;
  padding:0 10px 0 12px!important;
  overflow:hidden!important;
  background:
    linear-gradient(90deg,rgba(169,229,27,.09),transparent 46%),
    linear-gradient(180deg,#2a373d 0%,#202c31 100%)!important;
  border-top:1px solid rgba(221,231,234,.10)!important;
  border-bottom:1px solid rgba(4,8,10,.66)!important;
  box-shadow:inset 2px 0 0 rgba(169,229,27,.62),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .cardStoryTitleV402Fix2 span{
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  color:#edf2ef!important;
  font-family:var(--approved-font)!important;
  font-size:10.5px!important;
  font-weight:760!important;
  line-height:1!important;
  letter-spacing:.005em!important;
  white-space:nowrap!important;
  text-overflow:clip!important;
  text-shadow:0 1px 4px rgba(0,0,0,.72)!important;
}
.replaysDiscoveryPage.approvedReplaysMockup .replayCard.hasReplayStoryTitleV402Fix2 .cardFoot{
  box-sizing:border-box!important;
  min-height:35px!important;
  height:35px!important;
}

/* === /v0.3.5.402 FIX22.2 === */

/* ========================================================================
   v0.3.5.403 FIX23 — HOME LATEST DENSITY + OWNER ANALYTICS READABILITY
   Frontend-only. Existing card/panel dimensions and all counter logic stay.
   ======================================================================== */

/* HOME / Latest replays: use the existing 84px row instead of enlarging it. */
@media (min-width:1501px){
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV403{
    grid-template-columns:148px minmax(0,1fr) 176px 92px!important;
  }
}
@media (min-width:1051px) and (max-width:1500px){
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV403{
    grid-template-columns:138px minmax(0,1fr) 166px 84px!important;
  }
}
@media (min-width:1051px){
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV403 .latestArtV304 img{
    width:99%!important;
    height:106%!important;
    max-width:none!important;
    bottom:-8px!important;
  }
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV403 .latestBodyV304{
    padding:7px 9px 5px!important;
  }
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV403 .latestBodyV304>strong{
    font-size:13.6px!important;
    line-height:1.08!important;
    letter-spacing:.006em!important;
  }
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV403 .latestMetaV304{
    margin:4px 0 4px!important;
    font-size:9.35px!important;
  }
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV403 .latestMetaV304 .outcome{
    font-size:8.65px!important;
  }
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV403 .latestAwardsV304{
    min-height:26px!important;
    height:26px!important;
    max-height:26px!important;
    gap:4px!important;
  }
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV403 .latestAwardsV304 .cardAwardIcon,
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV403 .latestAwardsV304 img{
    width:25px!important;
    height:25px!important;
    max-width:25px!important;
    max-height:25px!important;
    flex-basis:25px!important;
  }
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV403 .latestStatsV304{
    padding:7px 5px!important;
  }
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV403 .latestStatsV304 b{
    font-size:15.5px!important;
  }
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV403 .latestStatsV304 span{
    margin-top:5px!important;
    font-size:7.15px!important;
    letter-spacing:.045em!important;
  }
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV403 .latestOpenV305{
    height:31px!important;
    margin:0 7px!important;
    font-size:7.5px!important;
  }
}
@media (min-width:1051px) and (max-width:1500px){
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV403 .latestBodyV304>strong{font-size:12.8px!important}
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV403 .latestMetaV304{font-size:8.75px!important}
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV403 .latestMetaV304 .outcome{font-size:8.15px!important}
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV403 .latestStatsV304 b{font-size:14.5px!important}
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV403 .latestStatsV304 span{font-size:6.75px!important}
  body.homePageActive .approvedHomeDashboard .latestPanel .latestReplayRowV403 .latestOpenV305{height:29px!important;font-size:7px!important;margin:0 6px!important}
}

/* Admin analytics: compact primary metrics with a real 4-column table. */
.adminAnalyticsFix18{
  padding:16px!important;
}
.adminAnalyticsHeadFix18{
  align-items:center!important;
  margin-bottom:12px!important;
}
.adminAnalyticsHeadFix18>div>span{
  font-size:8.5px!important;
}
.adminAnalyticsHeadFix18 h2{
  margin-top:7px!important;
  font-size:25px!important;
}
.adminAnalyticsHeadFix18>small{
  font-size:10px!important;
}
.adminAnalyticsGridV403{
  gap:8px!important;
}
.adminAnalyticsGridV403 .adminAnalyticsMetricFix18,
.adminAnalyticsGridV403 .adminAnalyticsMetricFix18.is-free,
.adminAnalyticsGridV403 .adminAnalyticsMetricFix18.is-pro{
  box-sizing:border-box!important;
  min-height:166px!important;
  height:166px!important;
  padding:11px 13px!important;
}
.adminAnalyticsGridV403 .adminAnalyticsMetricFix18.is-online,
.adminAnalyticsGridV403 .adminAnalyticsMetricFix18.is-visits{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  padding-bottom:18px!important;
}
.adminAnalyticsGridV403 .adminAnalyticsMetricFix18>span{
  color:#a5b2ac!important;
  font-size:10px!important;
  line-height:1.22!important;
}
.adminAnalyticsGridV403 .adminAnalyticsMetricFix18>strong{
  margin-top:6px!important;
  font-size:36px!important;
  line-height:.95!important;
}
.adminAnalyticsGridV403 .adminAnalyticsMetricFix18>small{
  margin-top:5px!important;
  color:#87958e!important;
  font-size:10px!important;
  line-height:1.3!important;
}
.adminAnalyticsGridV403 .adminAnalyticsPeriodsFix20{
  gap:5px!important;
  margin-top:7px!important;
}
.adminAnalyticsGridV403 .adminAnalyticsPeriodsFix20>span{
  min-height:32px!important;
  box-sizing:border-box!important;
  align-content:center!important;
  gap:3px!important;
  padding:5px 4px!important;
  color:#829089!important;
  font-size:7.4px!important;
}
.adminAnalyticsGridV403 .adminAnalyticsPeriodsFix20 b{
  color:#e7eeea!important;
  font-size:11.5px!important;
}
.adminAnalyticsGridV403 .adminAnalyticsPurchaseMetaFix20{
  display:grid!important;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr)!important;
  gap:8px!important;
  margin-top:5px!important;
  color:#87958e!important;
  font-size:6.8px!important;
}
.adminAnalyticsGridV403 .adminAnalyticsPurchaseMetaFix20>span{
  display:grid!important;
  min-width:0!important;
  gap:3px!important;
}
.adminAnalyticsGridV403 .adminAnalyticsPurchaseMetaFix20>span:last-child{
  text-align:right!important;
}
.adminAnalyticsGridV403 .adminAnalyticsPurchaseMetaFix20 b{
  min-width:0!important;
  margin:0!important;
  overflow:hidden!important;
  color:#f1d36a!important;
  font-size:9.5px!important;
  line-height:1.05!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.adminAnalyticsDetailsV403{
  display:grid!important;
  grid-template-columns:minmax(0,2.05fr) minmax(280px,1fr)!important;
  align-items:start!important;
  gap:10px!important;
  margin-top:10px!important;
}
.adminAnalyticsHistoryPanelV403,
.adminAnalyticsRecentV403{
  min-width:0!important;
  overflow:hidden!important;
  border:1px solid rgba(207,225,215,.10)!important;
  border-radius:6px!important;
  background:linear-gradient(180deg,rgba(18,29,26,.75),rgba(7,14,13,.78))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
}
.adminAnalyticsPanelHeadV403,
.adminAnalyticsRecentV403>strong{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  min-height:36px!important;
  margin:0!important;
  padding:0 12px!important;
  border-bottom:1px solid rgba(207,225,215,.08)!important;
  background:rgba(255,255,255,.025)!important;
  color:#b9ec45!important;
  font:850 9px/1 var(--approved-font)!important;
  letter-spacing:.075em!important;
}
.adminAnalyticsHistoryV403{
  margin:0!important;
  border:0!important;
  border-radius:0!important;
}
.adminAnalyticsHistoryV403>div{
  min-height:32px!important;
  grid-template-columns:minmax(90px,1.1fr) minmax(110px,1.25fr) minmax(64px,.72fr) minmax(64px,.72fr)!important;
  padding:0 12px!important;
  color:#c1cbc6!important;
  font-size:10.5px!important;
  text-align:center!important;
}
.adminAnalyticsHistoryV403>div:nth-child(odd):not(:first-child){
  background:rgba(255,255,255,.012)!important;
}
.adminAnalyticsHistoryV403>div:hover:not(:first-child){
  background:rgba(169,229,27,.035)!important;
}
.adminAnalyticsHistoryV403>div:first-child{
  min-height:34px!important;
  grid-template-columns:minmax(90px,1.1fr) minmax(110px,1.25fr) minmax(64px,.72fr) minmax(64px,.72fr)!important;
  color:#8e9c95!important;
  font-size:8px!important;
}
.adminAnalyticsHistoryV403>div>*:first-child{
  text-align:left!important;
}
.adminAnalyticsHistoryV403>div:not(:first-child)>span{
  font-variant-numeric:tabular-nums!important;
  font-weight:800!important;
}
.adminAnalyticsRecentV403{
  align-self:start!important;
  margin:0!important;
  padding:0!important;
  border-color:rgba(215,181,61,.16)!important;
  background:linear-gradient(180deg,rgba(39,34,18,.25),rgba(9,15,13,.82))!important;
}
.adminAnalyticsRecentV403>strong{
  color:#ebca55!important;
}
.adminAnalyticsRecentV403>div{
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr) auto!important;
  gap:9px!important;
  min-height:45px!important;
  padding:6px 11px!important;
  border-top:1px solid rgba(207,225,215,.065)!important;
  color:#95a29c!important;
  font-size:9.5px!important;
}
.adminAnalyticsRecentV403>div:first-of-type{
  border-top:0!important;
}
.adminAnalyticsRecentV403>div>b{
  min-width:0!important;
  overflow:hidden!important;
  color:#e3e9e6!important;
  font-size:10.5px!important;
  line-height:1.1!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.adminAnalyticsRecentV403>div>b>small{
  display:block!important;
  margin-top:4px!important;
  color:#7d8b84!important;
  font-size:7.5px!important;
}
.adminAnalyticsRecentV403>div>em{
  color:#f1cf55!important;
  font-size:10.5px!important;
  white-space:nowrap!important;
}
.adminAnalyticsRecentV403>p{
  margin:0!important;
  padding:22px 13px!important;
  color:#7f8d86!important;
  font-size:10px!important;
}
@media(max-width:1050px){
  .adminAnalyticsDetailsV403{grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr)!important}
  .adminAnalyticsGridV403 .adminAnalyticsMetricFix18>strong{font-size:35px!important}
}
@media(max-width:820px){
  .adminAnalyticsDetailsV403{grid-template-columns:1fr!important}
  .adminAnalyticsRecentV403{width:100%!important}
}
@media(max-width:620px){
  .adminAnalyticsFix18{padding:12px!important}
  .adminAnalyticsHeadFix18{align-items:flex-start!important;margin-bottom:10px!important}
  .adminAnalyticsGridV403{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .adminAnalyticsGridV403 .adminAnalyticsMetricFix18,
  .adminAnalyticsGridV403 .adminAnalyticsMetricFix18.is-online,
  .adminAnalyticsGridV403 .adminAnalyticsMetricFix18.is-visits{min-height:140px!important;height:140px!important;padding:11px!important}
  .adminAnalyticsGridV403 .adminAnalyticsMetricFix18.is-free,
  .adminAnalyticsGridV403 .adminAnalyticsMetricFix18.is-pro{min-height:164px!important;height:164px!important;padding:11px!important}
  .adminAnalyticsGridV403 .adminAnalyticsMetricFix18>span{font-size:8.5px!important}
  .adminAnalyticsGridV403 .adminAnalyticsMetricFix18>strong{font-size:32px!important}
  .adminAnalyticsGridV403 .adminAnalyticsMetricFix18>small{font-size:8.5px!important}
  .adminAnalyticsGridV403 .adminAnalyticsPurchaseMetaFix20{grid-template-columns:1fr!important}
  .adminAnalyticsGridV403 .adminAnalyticsPurchaseMetaFix20>span:last-child{text-align:left!important}
  .adminAnalyticsHistoryV403{overflow-x:auto!important}
  .adminAnalyticsHistoryV403>div{min-width:440px!important}
  .adminAnalyticsRecentV403>div{grid-template-columns:54px minmax(0,1fr) auto!important}
}

/* === /v0.3.5.403 FIX23 === */
/* ========================================================================
   FIX28 — World of Tanks community layer, LIVE and vehicle dossiers.
   Uses FermaniHUB's own visual language and local game-derived UI assets;
   no official World of Tanks logo is used as project branding.
   ======================================================================== */
.rhBrandStackV408{display:flex;flex-direction:column;justify-content:center;line-height:1}
.rhBrandStackV408>small{margin-top:5px;color:#7e8b87;font:700 7px/1.1 var(--font-condensed,Arial Narrow,sans-serif);letter-spacing:.17em;white-space:nowrap}
.approvedNav .navLiveV408{gap:7px}
.approvedNav .navLiveV408 i{width:7px;height:7px;border-radius:50%;background:#718078;box-shadow:0 0 0 3px rgba(113,128,120,.12)}
.approvedNav .navLiveV408.active i,.livePageActive .approvedNav .navLiveV408 i{background:#97e600;box-shadow:0 0 12px rgba(151,230,0,.72)}
.approvedTopbar:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent 4%,rgba(151,230,0,.28) 24%,rgba(125,144,137,.32) 50%,rgba(151,230,0,.16) 77%,transparent 96%);pointer-events:none}
body.livePageActive,body.tankPageActive{background-color:#07100f;background-image:radial-gradient(circle at 18% 4%,rgba(75,105,91,.12),transparent 32%),linear-gradient(rgba(105,126,116,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(105,126,116,.025) 1px,transparent 1px);background-size:auto,68px 68px,68px 68px}
.livePageV408,.tankPageV408{width:min(1500px,calc(100% - 56px));margin:26px auto 70px}
.liveHeroV408{position:relative;min-height:210px;padding:38px 42px;border:1px solid #34443f;border-radius:13px;overflow:hidden;background:linear-gradient(90deg,rgba(5,14,12,.97) 0%,rgba(8,20,17,.90) 47%,rgba(7,13,12,.58) 100%),url('/assets/home_hero_hub_v398_fix7.webp') center 44%/cover no-repeat;box-shadow:0 20px 65px rgba(0,0,0,.34)}
.liveHeroV408:before,.tankHeroV408:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 55%,rgba(151,230,0,.045) 55.2% 55.8%,transparent 56%),repeating-linear-gradient(90deg,transparent 0 118px,rgba(157,184,171,.027) 119px 120px)}
.liveHeroV408>div:first-child{position:relative;z-index:2;max-width:760px}
.liveHeroV408 p,.tankHeroV408>p{margin:0 0 17px;color:#a6ec25;font:800 11px/1 var(--font-condensed,Arial Narrow,sans-serif);letter-spacing:.24em}
.liveHeroV408 h1,.tankHeroV408 h1{margin:14px 0 5px;color:#f5f8f6;font:900 clamp(34px,4.7vw,68px)/.95 var(--font-condensed,Arial Narrow,sans-serif);letter-spacing:-.025em;text-transform:uppercase;text-shadow:0 4px 24px rgba(0,0,0,.55)}
.liveHeroV408 small{display:block;color:#aab7b1;font:650 15px/1.45 system-ui,sans-serif}
.liveHeroV408 time{display:inline-flex;margin-top:18px;padding:9px 13px;border:1px solid rgba(218,180,56,.42);background:rgba(31,28,13,.72);color:#edc94f;font:800 12px/1 var(--font-condensed,Arial Narrow,sans-serif);letter-spacing:.08em}
.liveStateV408{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid #43524d;background:rgba(7,13,12,.76);color:#b1bcb7;font:900 11px/1 var(--font-condensed,Arial Narrow,sans-serif);letter-spacing:.15em}
.liveStateV408 i{width:8px;height:8px;border-radius:50%;background:#75827c}
.liveStateV408.state-live{border-color:rgba(151,230,0,.58);color:#b5ff36}.liveStateV408.state-live i{background:#97e600;box-shadow:0 0 13px #97e600;animation:livePulseV408 1.65s ease-out infinite}
.liveStateV408.state-scheduled{border-color:rgba(235,191,53,.55);color:#eec944}.liveStateV408.state-scheduled i{background:#e4ba31}
@keyframes livePulseV408{0%{box-shadow:0 0 0 0 rgba(151,230,0,.55)}70%{box-shadow:0 0 0 8px rgba(151,230,0,0)}100%{box-shadow:0 0 0 0 rgba(151,230,0,0)}}
.liveArmorMarkV408{position:absolute!important;right:48px;top:32px!important;z-index:1!important;width:136px;height:136px;display:grid!important;place-items:center;border:1px solid rgba(161,190,176,.23);border-radius:50%;color:rgba(178,205,192,.19);font:900 35px/1 var(--font-condensed,Arial Narrow,sans-serif);letter-spacing:.08em;transform:rotate(-8deg)}
.liveArmorMarkV408:before,.liveArmorMarkV408:after{content:"";position:absolute;inset:17px;border:1px dashed rgba(151,230,0,.20);border-radius:50%}.liveArmorMarkV408:after{inset:49%;border:none;width:190px;height:1px;background:rgba(151,230,0,.15);transform:translate(-50%,-50%)}
.liveStageV408{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:12px;margin-top:13px}
.liveStageV408:not(:has(.liveChatV408)){grid-template-columns:1fr}
.livePlayerV408,.liveChatV408{min-height:0;border:1px solid #34443f;border-radius:10px;background:#030706;overflow:hidden;box-shadow:0 13px 36px rgba(0,0,0,.28)}
.livePlayerV408{aspect-ratio:16/9}.livePlayerV408 iframe{width:100%;height:100%;border:0;display:block}
.liveChatV408{display:flex;flex-direction:column}.liveChatV408 h2{height:46px;margin:0;padding:0 17px;display:flex;align-items:center;border-bottom:1px solid #2d3b37;color:#dce3df;font:850 12px/1 var(--font-condensed,Arial Narrow,sans-serif);letter-spacing:.13em}.liveChatV408 iframe{flex:1;width:100%;border:0;background:#fff}
.liveOfflineVisualV408{height:100%;min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center;background:radial-gradient(circle,rgba(54,88,68,.20),transparent 38%),linear-gradient(145deg,#07100e,#0b1513)}
.liveOfflineVisualV408 strong{margin-top:20px;color:#e9eeeb;font:900 clamp(26px,4vw,48px)/1 var(--font-condensed,Arial Narrow,sans-serif);letter-spacing:.05em}.liveOfflineVisualV408 p{max-width:560px;color:#85938c;font:600 14px/1.55 system-ui,sans-serif}.liveOfflineVisualV408 .button{margin-top:12px}
.liveReticleV408{position:relative;width:86px;height:86px;border:2px solid rgba(151,230,0,.52);border-radius:50%;box-shadow:0 0 38px rgba(151,230,0,.08)}.liveReticleV408:before,.liveReticleV408:after{content:"";position:absolute;background:#97e600}.liveReticleV408:before{width:126px;height:1px;left:-22px;top:41px}.liveReticleV408:after{height:126px;width:1px;top:-22px;left:41px}
.liveMetricsV408{display:grid;grid-template-columns:1.25fr repeat(4,1fr);margin-top:12px;border:1px solid #34443f;border-radius:9px;background:linear-gradient(180deg,#14211e,#0a1210);overflow:hidden}
.liveMetricV408{min-width:0;padding:17px 20px;border-right:1px solid #2d3b37}.liveMetricV408:last-child{border:0}.liveMetricV408 span{display:block;overflow:hidden;text-overflow:ellipsis;color:#7f8d86;font:800 9px/1.2 var(--font-condensed,Arial Narrow,sans-serif);letter-spacing:.12em;white-space:nowrap}.liveMetricV408 strong{display:block;margin-top:6px;overflow:hidden;text-overflow:ellipsis;color:#edf2ef;font:900 25px/1 var(--font-condensed,Arial Narrow,sans-serif);white-space:nowrap}.liveMetricV408:nth-child(2) strong,.liveMetricV408:nth-child(3) strong{color:#a8ed2f}
.liveSectionTitleV408{display:flex;justify-content:space-between;align-items:center;margin:30px 0 14px;padding-bottom:11px;border-bottom:1px solid #36443f}.liveSectionTitleV408 span{color:#eef3f0;font:900 16px/1 var(--font-condensed,Arial Narrow,sans-serif);letter-spacing:.11em}.liveSectionTitleV408 a{color:#a5e82f;font:800 11px/1 var(--font-condensed,Arial Narrow,sans-serif);letter-spacing:.08em}
.liveReplayGridV408,.tankReplayGridV408{grid-template-columns:repeat(3,minmax(0,1fr))}
.liveAdminV408{margin-top:12px;border:1px solid rgba(151,230,0,.28);border-radius:8px;background:#0b1512}.liveAdminV408 summary{cursor:pointer;padding:15px 18px;color:#9fe620;font:900 11px/1 var(--font-condensed,Arial Narrow,sans-serif);letter-spacing:.15em}.liveAdminV408 form{display:grid;grid-template-columns:130px 1.5fr 1.5fr 1.5fr 1fr 1fr auto;gap:8px;padding:0 16px 16px}.liveAdminV408 label{color:#76847e;font:800 8px/1 var(--font-condensed,Arial Narrow,sans-serif);letter-spacing:.1em}.liveAdminV408 input,.liveAdminV408 select{width:100%;height:38px;margin-top:6px;padding:0 10px;border:1px solid #33433d;border-radius:4px;background:#07100e;color:#dfe6e2}.liveAdminV408 button{align-self:end;height:38px}
.tankHeroV408{position:relative;min-height:230px;padding:40px;border:1px solid #34443f;border-radius:12px;overflow:hidden;background:linear-gradient(90deg,rgba(5,13,11,.97),rgba(10,25,20,.85)),url('/assets/replays_hero_archive_v399.png') center/cover}
.tankHeroV408>div{position:relative;z-index:2;display:flex;gap:9px;margin-top:27px}.tankHeroV408 .liveMetricV408{min-width:190px;border:1px solid #36463f;background:rgba(7,14,12,.68)}
.tankReplayGridV408{margin-top:18px}
@media(max-width:1120px){.approvedNav .navLiveV408 i{display:none}.rhBrandStackV408>small{display:none}.liveStageV408{grid-template-columns:1fr}.liveChatV408{min-height:520px}.liveMetricsV408{grid-template-columns:repeat(3,1fr)}.liveMetricV408:nth-child(3){border-right:0}.liveReplayGridV408,.tankReplayGridV408{grid-template-columns:repeat(2,minmax(0,1fr))}.liveAdminV408 form{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.livePageV408,.tankPageV408{width:calc(100% - 20px);margin-top:12px}.liveHeroV408,.tankHeroV408{padding:26px 22px;min-height:190px}.liveArmorMarkV408{display:none!important}.liveStageV408{margin-top:8px}.liveOfflineVisualV408{min-height:260px}.liveMetricsV408{grid-template-columns:repeat(2,1fr)}.liveMetricV408{padding:14px}.liveMetricV408:nth-child(2n){border-right:0}.liveMetricV408 strong{font-size:21px}.liveReplayGridV408,.tankReplayGridV408{grid-template-columns:1fr}.tankHeroV408>div{display:grid;grid-template-columns:1fr}.tankHeroV408 .liveMetricV408{min-width:0}.liveAdminV408 form{grid-template-columns:1fr}}
.tankDossierLinkV408{color:inherit;text-decoration:none;border-bottom:1px solid rgba(151,230,0,.28)}.tankDossierLinkV408:hover{color:#a9e51b;border-bottom-color:#a9e51b}

/* =====================================================================
   v0.3.5.409 — FIX29 LIVE METRICS + REPLAY CARDS
   Reuse the approved replay-card skin inside /live without inheriting the
   /replays page shell geometry. The catalog page itself remains unchanged.
   ===================================================================== */
.replayCardScopeV409.replaysDiscoveryPage.approvedReplaysMockup{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  position:static!important;
  isolation:auto!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.replayCardScopeV409.replaysDiscoveryPage.approvedReplaysMockup::before,
.replayCardScopeV409.replaysDiscoveryPage.approvedReplaysMockup::after{display:none!important;content:none!important}
.replayCardScopeV409 .liveReplayGridV408,
.replayCardScopeV409 .tankReplayGridV408{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
}
@media(max-width:1120px){.replayCardScopeV409 .liveReplayGridV408,.replayCardScopeV409 .tankReplayGridV408{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:720px){.replayCardScopeV409 .liveReplayGridV408,.replayCardScopeV409 .tankReplayGridV408{grid-template-columns:1fr!important;gap:12px!important}}

/* === PUBLIC MARKS INSTALL RC23 — visible to every /marks visitor === */
.marksPublicInstallRC23{position:relative;overflow:hidden;margin:0;border:1px solid rgba(169,229,28,.18);border-radius:10px;background:linear-gradient(135deg,rgba(17,31,29,.97),rgba(8,16,19,.98));box-shadow:0 18px 46px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.03)}
.marksPublicInstallRC23:before{content:"";position:absolute;right:-90px;top:-150px;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,rgba(169,229,28,.10),transparent 69%);pointer-events:none}
.marksPublicInstallHeadRC23{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:25px 29px 21px}
.marksPublicInstallHeadRC23>div:first-child{min-width:0}.marksPublicInstallHeadRC23 span{display:block;margin-bottom:8px;color:#b9ef42;font:850 10px/1.1 var(--font-condensed);letter-spacing:.14em}.marksPublicInstallHeadRC23 h2{margin:0;color:#f1f4ef;font:900 clamp(24px,3vw,34px)/1 var(--font-condensed);letter-spacing:.01em}.marksPublicInstallHeadRC23 p{max-width:760px;margin:10px 0 0;color:#9eaea9;font-size:13px;line-height:1.52}
.marksPublicInstallVersionRC23{flex:0 0 auto;min-width:190px;padding:12px 14px;border:1px solid rgba(223,189,103,.18);border-radius:8px;background:rgba(223,189,103,.045);text-align:right}.marksPublicInstallVersionRC23 small{display:block;color:#a99b74;font:800 9px/1.2 var(--font-condensed);letter-spacing:.12em}.marksPublicInstallVersionRC23 strong{display:block;margin-top:6px;color:#e2c777;font:900 19px/1 var(--font-condensed)}
.marksPublicInstallRC23>.marksInstallFix11{border-top-color:rgba(255,255,255,.065)}
@media(max-width:760px){.marksPublicInstallHeadRC23{flex-direction:column;padding-left:20px;padding-right:20px}.marksPublicInstallVersionRC23{min-width:0;text-align:left}}
/* === /PUBLIC MARKS INSTALL RC23 === */

/* MARKS CHART CONTROLS FIX31: only the existing private PRO chart. */
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartHeaderRC21 .marksLiveChartControlsFix31{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:0 0 auto}
.marksPrivatePageV372.privateMarksPremiumV398 .marksLivePeriodFix31{display:flex;flex-wrap:wrap;gap:4px}
.marksPrivatePageV372.privateMarksPremiumV398 .marksLivePeriodFix31 button,.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDayPickerFix31 button{border:1px solid rgba(198,226,120,.28);border-radius:5px;color:#d5e8a0;background:rgba(167,213,52,.08);font-size:10px;font-weight:800;letter-spacing:.05em;padding:7px 9px;cursor:pointer}
.marksPrivatePageV372.privateMarksPremiumV398 .marksLivePeriodFix31 button.isActive{background:#a8d543;color:#132017}
.marksPrivatePageV372.privateMarksPremiumV398 .marksLivePeriodFix31 button:focus-visible,.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDayPickerFix31 :focus-visible,.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveRangeFix31 input:focus-visible{outline:2px solid #c6ee82;outline-offset:2px}
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDayPickerFix31{display:flex;align-items:center;gap:6px;max-width:100%}
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDayPickerFix31 button:disabled{opacity:.35;cursor:default}
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDayPickerFix31 select{min-width:0;max-width:220px;padding:6px 10px;border:1px solid rgba(198,226,120,.28);border-radius:5px;color:#e9f1e3;background:#142630;font-size:11px}
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveRangeLabelFix31{margin:10px 0 0;color:#adbdc0;font-size:11px;font-weight:700}
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveRangeFix31{display:flex;align-items:center;gap:13px;margin-top:9px;color:#aabec2;font-size:10px;font-weight:800;letter-spacing:.07em}
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveRangeFix31 input{min-width:80px;flex:1;accent-color:#a8d543;cursor:pointer}
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveRangeFix31 small{white-space:nowrap;color:#e9f1e3;font-size:11px}
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDayDividerFix31{stroke:rgba(201,222,226,.27);stroke-width:1;stroke-dasharray:3 5}
.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveDayDateFix31{fill:#a8b9be;font:10px Arial,sans-serif}
@media(max-width:850px){.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartHeaderRC21{flex-direction:column;gap:12px}.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartHeaderRC21 .marksLiveChartControlsFix31{align-items:flex-start;max-width:100%}}
@media(max-width:560px){.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveRangeFix31{flex-wrap:wrap}.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveRangeFix31 input{order:2;flex-basis:100%}.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartFrameRC21{overflow-x:auto}.marksPrivatePageV372.privateMarksPremiumV398 .marksLiveChartRC20{min-width:700px}}

/* FIX35: allow longer localized headlines to expand the approved home hero.
   The 404px desktop crop previously hid the bottom half of five KPI tiles in
   English and Polish. Preserve the original minimum height and art treatment. */
@media (min-width:981px) {
  :is(html[lang="en"],html[lang="pl"],html[lang="de"],html[lang="cs"]) body.homePageActive .homeApprovedHero {
    height:auto!important;
    min-height:404px!important;
  }
  :is(html[lang="en"],html[lang="pl"],html[lang="de"],html[lang="cs"]) body.homePageActive .homeApprovedHero .heroInner {
    padding-bottom:20px!important;
  }
}

/* FIX37: normalize only the two exact WoT client renders in battle team rows.
   Their PNG canvases contain substantially more transparent padding than
   neighboring vehicle art. Keep the source assets and row geometry intact. */
body.battlePageActive .battleTeamsPaneV247 .teamTankImgV247[src$="/renders/germany-G48_E-25.png"]{
  transform:scale(1.8)!important;
  transform-origin:center center!important;
}
body.battlePageActive .battleTeamsPaneV247 .teamTankImgV247[src$="/renders/usa-A80_T26_E4_SuperPershing.png"]{
  transform:scale(1.35)!important;
  transform-origin:center center!important;
}

/* FIX38 DE/CS language flags */
.rhLanguageFlag-de{background-image:url(/assets/ui/flags/de.svg)!important}
.rhLanguageFlag-cs{background-image:url(/assets/ui/flags/cs.svg)!important}


/* FIX41: owner-only PRO buyer ledger; no public counters changed. */
.adminProBuyersFix41{margin-top:12px;padding:15px;border:1px solid rgba(184,215,150,.2);border-radius:8px;background:#0b1718;color:#dfe8e3}
.adminProBuyersFix41 header{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:12px;flex-wrap:wrap}
.adminProBuyersFix41 header strong{font-size:15px;letter-spacing:.04em}
.adminProBuyersFix41 header small{color:#9fafaa;font-size:12px}
.adminProBuyersFix41 table{width:100%;border-collapse:collapse;text-align:left;min-width:690px}
.adminProBuyersFix41 th,.adminProBuyersFix41 td{padding:10px 8px;border-top:1px solid rgba(205,225,218,.12);font-size:12px;vertical-align:top}
.adminProBuyersFix41 th{color:#a5b9b2;font-size:10px;letter-spacing:.04em}
.adminProBuyersFix41 td b{display:block;color:#e9efe9;font-size:13px}
.adminProBuyersFix41 td small{display:block;color:#8ca59c;margin-top:3px;font-size:10px}
.adminProBuyersFix41 td .active{color:#a9dd5d}.adminProBuyersFix41 td .expired{color:#e9a36d}
.adminProBuyersScrollFix41{overflow-x:auto;max-height:520px;overflow-y:auto}

/* FIX43: keep only video and region totals in public platform panels. */
body.homePageActive .homeApprovedHero .heroMetrics{
  width:min(332px,100%)!important;
  max-width:332px!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
@media(max-width:700px){
  body.homePageActive .homeApprovedHero .heroMetrics{width:100%!important;max-width:332px!important}
}
body.replaysPageActive .replaysMockupV335 .replaysHeroMockupV335 .replaysHomeMetricsV343{
  width:350px!important;
  grid-template-columns:142px 200px!important;
}
@media(min-width:721px) and (max-width:1040px){
  body.replaysPageActive .replaysMockupV335 .replaysHeroMockupV335 .replaysHomeMetricsV343{
    width:auto!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)!important;
  }
}
@media(max-width:720px){
  body.replaysPageActive .replaysMockupV335 .replaysHeroMockupV335 .replaysHomeMetricsV343{
    width:100%!important;
    grid-template-columns:1fr!important;
  }
}

/* FIX43: subtle accent for MOD and activity-based animation for LIVE. */
html body .approvedTopbar .approvedNav > a.navMarksFeaturedFix43,
html body.replaysPageActive .approvedTopbar .approvedNav > a.navMarksFeaturedFix43{
  color:#d4ed96!important;
  background:rgba(169,229,27,.075)!important;
  box-shadow:inset 0 0 0 1px rgba(169,229,27,.24)!important;
  border-radius:5px!important;
  padding:6px 9px!important;
}
html body .approvedTopbar .approvedNav > a.navMarksFeaturedFix43:hover,
html body .approvedTopbar .approvedNav > a.navMarksFeaturedFix43:focus-visible{
  color:#f3ffd9!important;
  background:rgba(169,229,27,.15)!important;
  box-shadow:inset 0 0 0 1px rgba(169,229,27,.55),0 0 12px rgba(169,229,27,.12)!important;
}
html body .approvedTopbar .approvedNav > a.navLiveV408.isBroadcasting{
  color:#d6ff87!important;
  text-shadow:0 0 10px rgba(151,230,0,.45)!important;
}
.approvedTopbar .approvedNav .navLiveV408:not(.isBroadcasting) i{
  background:#718078!important;
  box-shadow:0 0 0 3px rgba(113,128,120,.12)!important;
}
.approvedTopbar .approvedNav .navLiveV408.isBroadcasting i{
  display:inline-block!important;
  background:#a9ec28!important;
  animation:headerLivePulseFix43 1.8s ease-in-out infinite;
}
@keyframes headerLivePulseFix43{
  0%,100%{box-shadow:0 0 0 2px rgba(169,236,40,.20),0 0 6px rgba(169,236,40,.35)}
  50%{box-shadow:0 0 0 6px rgba(169,236,40,0),0 0 17px rgba(169,236,40,.85)}
}
@media(prefers-reduced-motion:reduce){
  .approvedTopbar .approvedNav .navLiveV408.isBroadcasting i{animation:none!important}
}
/* FERMANI_PRO_RC25_SCREENSHOTS_20261005 */
.marksProGalleryHeadRC25{margin:32px 0 14px;padding-top:24px;border-top:1px solid #40504a}
.marksProGalleryHeadRC25 h3{margin:0;color:#e5d29a;font:800 clamp(21px,2.7vw,29px)/1.15 var(--font-condensed)}
.marksProGalleryHeadRC25 p{margin:9px 0 0;color:#a8b7b0;font-size:14px;line-height:1.55}
.marksProRC25Grid>.marksGalleryCardFix5{grid-column:span 3}
.marksProRC25Battle{grid-template-columns:minmax(0,1fr);max-width:780px}
.marksProRC25Battle>.marksGalleryCardFix5{grid-column:span 1}
.marksGalleryStageFix5.is-pro-rc25{height:340px!important;min-height:0!important;aspect-ratio:auto!important;padding:18px;box-sizing:border-box;background:#101412!important}
.marksGalleryStageFix5.is-pro-rc25 .marksGalleryBackdropFix5{display:block!important;opacity:.5;filter:blur(18px) brightness(.6) saturate(.7)!important;pointer-events:none}
.marksGalleryStageFix5.is-pro-rc25 .marksGalleryCropFix5{position:relative!important;inset:auto!important;width:min(100%,calc(304px * var(--pro-crop-ratio)))!important;height:auto!important;aspect-ratio:var(--pro-crop-ratio)!important;max-height:none!important;transform:none!important;flex:none;overflow:hidden;background:none!important;box-shadow:0 6px 26px #0007}
.marksGalleryStageFix5.is-pro-rc25 .marksGalleryCropFix5 img{position:absolute!important;inset:auto!important;width:var(--pro-image-width)!important;height:auto!important;left:var(--pro-image-left)!important;top:var(--pro-image-top)!important;opacity:1!important;object-fit:initial!important;transform:none!important}
.marksGalleryStageFix5.is-pro-rc25.is-large{height:min(74dvh,840px)!important;padding:18px!important}
.marksGalleryStageFix5.is-pro-rc25.is-large .marksGalleryCropFix5{width:min(100%,calc((min(74dvh,840px) - 36px) * var(--pro-crop-ratio)))!important}
.marksProReleaseRC25{margin-top:30px;padding:23px 26px;border:1px solid #8a775747;border-radius:10px;background:linear-gradient(125deg,#2e2519b8,#101a18e8);box-shadow:inset 0 1px #fff1,0 10px 25px #0002;color:#d9e1dc}
.marksProReleaseRC25 header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.marksProReleaseRC25 header span{color:#d3bc85;font:750 11px/1.3 var(--font-condensed);letter-spacing:.1em}
.marksProReleaseRC25 h3{margin:7px 0 0;font:850 26px/1.15 var(--font-condensed);color:#f1f0e6}
.marksProReleaseRC25 time{color:#aab6af;font-size:12px;white-space:nowrap}
.marksProReleaseRC25 ul{margin:18px 0 0;padding-left:19px;display:grid;gap:9px;font-size:14px;line-height:1.6}
.marksProReleaseRC25 li::marker{color:#dcc17e}
@media(max-width:900px){.marksProRC25Grid>.marksGalleryCardFix5{grid-column:span 1}}
@media(max-width:560px){.marksProReleaseRC25{padding:20px 18px}.marksProReleaseRC25 header{align-items:flex-start;flex-direction:column;gap:8px}.marksGalleryStageFix5.is-pro-rc25.is-large{height:min(66dvh,660px)!important;padding:12px!important}.marksGalleryStageFix5.is-pro-rc25.is-large .marksGalleryCropFix5{width:min(100%,calc((min(66dvh,660px) - 24px) * var(--pro-crop-ratio)))!important}.marksProGalleryHeadRC25{margin-top:26px}}
/* FERMANI_MARKS_COMPACT_REAL_SCREENSHOTS_20261008 */
.marksPageV363.marksCompactOct8{--oct-gold:#dcb86b;--oct-green:#b7e748;--oct-line:#32413e;display:flex;flex-direction:column;gap:18px;max-width:1240px;margin:22px auto 42px;color:#e9eee9}
.marksCompactOct8 *, .marksCompactOct8 *::before,.marksCompactOct8 *::after{box-sizing:border-box}
.marksCompactOct8 h1,.marksCompactOct8 h2,.marksCompactOct8 h3,.marksCompactOct8 p{margin:0}
.marksCompactOct8 .button{min-height:43px;padding:12px 20px;font-size:13px;line-height:1.3;display:inline-flex;align-items:center;justify-content:center;white-space:normal}
.marksCompactOct8 .button.primary{background:linear-gradient(140deg,#b8df34,#688e15);box-shadow:0 4px 18px #91be2225;border:1px solid #a2c82e;color:#fff}
.marksCompactOct8 a{color:#c5df97}
.marksHeroOct8{position:relative;display:grid;grid-template-columns:1fr .92fr;min-height:488px;overflow:hidden;border:1px solid #3e514a;border-radius:18px;background:#111d20 url('/assets/marks-gallery/marks_oct8_hero_background.webp') center/cover;box-shadow:0 20px 70px #0003,inset 0 1px #c6d7bf22}
.marksHeroOct8::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,14,16,.95),rgba(9,18,20,.68) 46%,rgba(11,22,23,.06) 78%);pointer-events:none}
.marksHeroTextOct8{position:relative;z-index:1;padding:48px 0 40px 44px;align-self:center}
.marksEyebrowOct8{font-size:11px;font-weight:700;letter-spacing:2.2px;color:#c2df8b}
.marksHeroTextOct8 h1{font-family:Arial,sans-serif;line-height:1.02;font-size:clamp(44px,5vw,64px);letter-spacing:-1.8px;font-weight:800;margin:20px 0}
.marksHeroTextOct8 h1 em{display:block;color:#bae446;font-style:normal}
.marksHeroTextOct8>strong{display:block;max-width:450px;font-size:18px;line-height:1.5;font-weight:650;color:#eff5ec}
.marksHeroTextOct8>p{margin-top:12px;max-width:450px;color:#afc0c0;font-size:14px;line-height:1.6}
.marksHeroChipsOct8{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.marksHeroChipsOct8 span{padding:6px 9px;border:1px solid #52655080;border-radius:5px;color:#cde1c0;font-size:10px;font-weight:700;letter-spacing:.3px;background:#101b1880}
.marksHeroActionsOct8{display:flex;flex-wrap:wrap;gap:10px}
.marksHeroTextOct8>small{display:block;margin-top:17px;font-size:11px;color:#94a4a2;line-height:1.5}
.marksHeroVisualOct8{position:relative;z-index:1;min-width:0;border:0;background:transparent;cursor:zoom-in;padding:24px 24px 18px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#c4dab8}
.marksHeroVisualOct8 img{display:block;width:auto;height:440px;max-width:100%;object-fit:contain;filter:drop-shadow(0 0 15px #afe34b33) drop-shadow(12px 8px 18px #9a57ca33)}
.marksHeroVisualOct8>span{font-size:10px;letter-spacing:1px;margin-top:8px}
.marksReleaseOct8{border:1px solid #6a603b66;border-radius:10px;background:linear-gradient(110deg,#29291e,#15211e);overflow:hidden}
.marksReleaseOct8 summary{display:flex;align-items:center;gap:14px;padding:13px 18px;cursor:pointer;list-style:none;font-size:12px}
.marksReleaseOct8 summary::-webkit-details-marker,.marksCompactDetailsOct8 summary::-webkit-details-marker,.marksRenewOct8 summary::-webkit-details-marker{display:none}
.marksReleaseSignalOct8{font-size:10px;font-weight:800;color:#15220c;background:#b3d75c;border-radius:4px;padding:5px 7px;white-space:nowrap}
.marksReleaseOct8 summary strong{font-size:13px;color:#edf1d8}
.marksReleaseOct8 summary>span:nth-of-type(2){color:#c3c4a4;font-size:11px}
.marksReleaseOct8 time{margin-left:auto;color:#95a08e;font-size:11px;white-space:nowrap}
.marksReleaseOct8 summary b,.marksCompactDetailsOct8 summary b,.marksRenewOct8 summary b{color:#cbd8a3;font-size:19px;font-weight:400}
.marksReleaseOct8[open] summary b,.marksCompactDetailsOct8 details[open] summary b,.marksRenewOct8[open] summary b{transform:rotate(45deg)}
.marksReleaseOct8>div{padding:0 20px 13px;font-size:13px;line-height:1.7;color:#c5d1bc}
.marksReleaseOct8 ul{margin:0;padding-left:17px}
.marksEditionsOct8{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.marksEditionOct8{display:flex;flex-direction:column;min-width:0;border:1px solid #344848;border-radius:13px;background:linear-gradient(155deg,#15252a,#0c171a);overflow:hidden;padding:21px}
.marksEditionOct8.is-pro{border-color:#74644188;background:linear-gradient(145deg,#282923,#101b1b)}
.marksEditionOct8 header{display:flex;align-items:center;justify-content:space-between;gap:15px}
.marksEditionOct8 header div>span{display:block;color:#9bab9e;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;line-height:1.5}
.marksEditionOct8 header h2{font-family:Arial,sans-serif;font-size:26px;margin-top:4px;letter-spacing:.5px;color:#f6f8f0}
.marksEditionOct8 header h2 small{font-family:inherit;font-size:12px;letter-spacing:0;color:#98ad9d;margin-left:7px;font-weight:400}
.marksEditionOct8 header>b{color:#c1de8d;font-size:10px;border:1px solid #556641;padding:7px 9px;border-radius:20px;text-align:center;max-width:130px}
.marksEditionOct8.is-pro header>b{color:#e6c787;border-color:#786541}
.marksEditionOct8>p{font-size:13px;line-height:1.6;color:#b0bfbc;margin:12px 0 16px;min-height:40px}
.marksEditionImagesOct8{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;align-items:stretch;height:206px}
.marksEditionImagesOct8.is-pro-mini{grid-template-columns:1fr}
.marksPhotoOct8{position:relative;display:block;padding:0;border:1px solid #56695870;border-radius:8px;background:#172526;overflow:hidden;cursor:zoom-in;color:#dce4bc;min-width:0;max-width:100%}
.marksPhotoOct8 img{display:block;width:100%;height:100%;object-fit:contain}
.marksPhotoOct8>span{position:absolute;bottom:9px;right:9px;width:26px;height:26px;display:grid;place-items:center;border:1px solid #a9bb9066;border-radius:5px;background:#0b171ba8;backdrop-filter:blur(5px);font:16px Arial,sans-serif}
.marksEditionImagesOct8.is-pro-mini .marksPhotoOct8 img{object-fit:contain;object-position:center}
.marksEditionOct8 ul{list-style:none;margin:16px 0 20px;padding:0;color:#c8d3c8;display:grid;gap:7px;font-size:12px;line-height:1.5}
.marksEditionOct8 li::before{content:"·";color:#b6d978;margin-right:8px;font-weight:800}
.marksEditionOct8 footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.marksEditionOct8 footer>span,.marksEditionOct8 footer>a:not(.button){font-size:11px;line-height:1.5;color:#a4b79b;max-width:180px}
.marksTourOct8{border:1px solid #3e5147;border-radius:14px;background:linear-gradient(135deg,#142329,#131b18);overflow:hidden;scroll-margin-top:90px}
.marksTourOct8>header{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:22px 25px 18px}
.marksTourOct8>header span{font-size:10px;letter-spacing:1.7px;font-weight:700;color:#c8b878;text-transform:uppercase}
.marksTourOct8>header h2{font-size:23px;margin-top:5px;font-weight:650;color:#f1f3e6}
.marksTourOct8>header p{font-size:12px;color:#9fb1aa;line-height:1.6;max-width:330px}
.marksTourTabsOct8{display:flex;gap:7px;padding:0 25px 17px;flex-wrap:wrap;border-bottom:1px solid #4c614d44}
.marksTourTabsOct8 button{flex:1;min-width:100px;border:1px solid #42554c;background:#152322;color:#a8b8b0;border-radius:6px;min-height:39px;padding:9px 12px;font-family:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.marksTourTabsOct8 button[aria-selected=true]{color:#eaf4cb;border-color:#9fae6077;background:linear-gradient(125deg,#38442c,#293522);box-shadow:inset 0 -2px #b1d259}
.marksTourBodyOct8{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);min-height:540px;align-items:center}
.marksTourBodyOct8>[data-marks-tour-image]{padding:22px;background:radial-gradient(ellipse at center,#38504c55,transparent 67%);height:560px;min-width:0;display:flex;align-items:center;justify-content:center}
.marksTourBodyOct8 .is-tour{height:100%;max-width:100%;width:auto;border:0;box-shadow:0 15px 35px #0005;border-radius:10px;aspect-ratio:1080/1200}
.marksTourBodyOct8 .is-tour img{object-fit:contain}
.marksTourBodyOct8 aside{padding:25px 35px 25px 15px;max-width:430px}
.marksTourBodyOct8 aside>span{font:12px Arial,sans-serif;letter-spacing:2px;color:#c0b573}
.marksTourBodyOct8 aside h3{font-size:30px;line-height:1.22;font-weight:650;margin:15px 0;color:#f2f5e7}
.marksTourBodyOct8 aside p{font-size:15px;line-height:1.75;color:#b6c5b7;margin-bottom:24px}
.marksTourBodyOct8 aside small{display:block;font-size:11px;line-height:1.6;color:#839990;margin-top:18px}
.marksCompactDetailsOct8{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.marksCompactDetailsOct8 details,.marksRenewOct8{min-width:0;border:1px solid #354941;border-radius:9px;background:#111e20;overflow:hidden}
.marksCompactDetailsOct8 summary,.marksRenewOct8 summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;padding:15px 18px;list-style:none;font-size:13px;font-weight:600;color:#d6e0cc}
.marksCompactDetailsOct8 .marksTableScrollV366{padding:0 16px 16px}
.marksCompactDetailsOct8 table{width:100%;border-collapse:collapse;font-size:12px}
.marksCompactDetailsOct8 th,.marksCompactDetailsOct8 td{border-bottom:1px solid #3b504033;padding:9px 7px}
.marksCompactDetailsOct8 th{text-align:left;font-weight:500}
.marksCompactDetailsOct8 td{text-align:center;color:#c3df8e}
.marksCompactDetailsOct8 .marksPublicInstallRC23{margin:0;padding:12px 18px 18px;border:0;background:transparent;box-shadow:none}
.marksCompactDetailsOct8 .marksPublicInstallHeadRC23,.marksCompactDetailsOct8 .marksInstallFix11>header{display:none}
.marksCompactDetailsOct8 .marksInstallFix11{margin:0;background:transparent;border:0;padding:0;box-shadow:none}
.marksCompactDetailsOct8 .marksInstallFix11 li{font-size:12px;line-height:1.5}
.marksBuyOct8{border:1px solid #3c5241;border-radius:12px;background:linear-gradient(120deg,#172a24,#122024);padding:24px}
.marksBuyOct8>header{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.marksBuyOct8>header>span{font-size:12px;font-weight:700;color:#d7c38d;letter-spacing:2px}
.marksBuyOct8 h2{font-size:23px;color:#f1f4e5}
.marksBuyOct8>header p{font-size:12px;color:#9dafaa;line-height:1.6;margin-left:auto;max-width:440px}
.marksCompactOct8 .marksCheckout{margin:0;padding:0;border:0;background:transparent;box-shadow:none}
.marksCompactOct8 .marksPlanGridFix4{gap:10px}
.marksCompactOct8 .marksPlanCardFix4{padding:15px 17px;min-height:118px}
.marksCompactOct8 .marksExactFix4{margin-top:14px;padding:13px 16px}
.marksCompactOct8 .marksProviders{margin-top:14px}
.marksCompactOct8 .marksStoreAdminFix6{margin-top:0}
.marksRenewOct8>.marksCheckout,.marksRenewOct8>.marksStoreAdminFix6{margin:0 20px 20px}
.marksCompactOct8 .marksAccountV363{margin:0;padding:22px;border-radius:12px;border:1px solid #5b724e;background:#16251e}
.marksFooterOct8{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;color:#829c92;font-size:11px;line-height:1.6;padding:0 5px}
.marksGalleryDialogFix5:has(.marksGalleryExactOct8){max-width:1100px;width:min(95vw,1100px);max-height:95dvh;padding:16px;overflow:auto}
.marksGalleryExactOct8{display:flex!important;justify-content:center;align-items:center;height:auto!important;background:radial-gradient(ellipse at center,#3c4944,#101b1d)!important;overflow:hidden;border-radius:7px}
.marksGalleryExactOct8 img{display:block;width:auto;max-width:100%;height:auto;max-height:73dvh;object-fit:contain}
.marksGalleryExactOct8.is-large{height:auto!important;min-height:0!important}
.marksGalleryDialogFix5:has(.marksGalleryExactOct8)>p{margin-top:8px}
.marksCompactOct8 button:focus-visible,.marksCompactOct8 summary:focus-visible,.marksCompactOct8 a:focus-visible{outline:2px solid #c4e786;outline-offset:3px}
@media(hover:hover){.marksPhotoOct8:hover{border-color:#8aab77;box-shadow:0 0 22px #9ccd4020}.marksTourTabsOct8 button:hover{color:#eff3e0;border-color:#7a936b}}
@media(max-width:1000px){.marksHeroTextOct8{padding:34px 0 32px 28px}.marksHeroTextOct8>strong{font-size:16px}.marksHeroOct8{min-height:445px}.marksHeroVisualOct8 img{height:400px}.marksTourTabsOct8 button{min-width:80px}.marksEditionOct8{padding:17px}.marksTourBodyOct8 aside{padding-right:25px}.marksTourBodyOct8 aside h3{font-size:25px}}
@media(max-width:760px){.marksPageV363.marksCompactOct8{margin:12px 0 28px;gap:14px}.marksHeroOct8{grid-template-columns:1fr;min-height:0}.marksHeroOct8::before{background:linear-gradient(180deg,#091316e8,#11212888 55%,#101d2244)}.marksHeroTextOct8{padding:30px 25px 10px}.marksHeroTextOct8 h1{font-size:48px;margin:15px 0}.marksHeroTextOct8>strong{max-width:100%}.marksHeroVisualOct8{padding:10px 20px 17px}.marksHeroVisualOct8 img{height:300px}.marksHeroChipsOct8{margin:16px 0}.marksEditionsOct8{grid-template-columns:1fr}.marksEditionImagesOct8{height:220px}.marksEditionOct8>p{min-height:0}.marksReleaseOct8 summary{flex-wrap:wrap;gap:8px;padding:12px}.marksReleaseOct8 summary strong{flex:1}.marksReleaseOct8 summary>span:nth-of-type(2){order:4;flex-basis:100%;margin-left:1px}.marksReleaseOct8 time{font-size:10px}.marksTourOct8>header{padding:18px;align-items:flex-start;flex-direction:column;gap:10px}.marksTourOct8>header p{max-width:none}.marksTourTabsOct8{padding:0 18px 14px;gap:6px}.marksTourTabsOct8 button{flex:1 0 28%;min-width:0;padding:9px 7px;font-size:11px}.marksTourBodyOct8{grid-template-columns:1fr;min-height:0}.marksTourBodyOct8>[data-marks-tour-image]{height:465px;padding:16px}.marksTourBodyOct8 aside{padding:8px 22px 24px;max-width:none}.marksTourBodyOct8 aside h3{font-size:23px;margin:10px 0}.marksTourBodyOct8 aside p{font-size:13px;margin-bottom:15px;line-height:1.6}.marksTourBodyOct8 aside small{margin-top:12px}.marksCompactDetailsOct8{grid-template-columns:1fr;gap:10px}.marksBuyOct8{padding:18px}.marksBuyOct8>header{gap:10px}.marksBuyOct8>header p{margin-left:0;flex-basis:100%}.marksCompactOct8 .marksPlanCardFix4{padding:13px 10px}.marksGalleryExactOct8 img{max-height:70dvh}.marksGalleryDialogFix5:has(.marksGalleryExactOct8){padding:10px;width:97vw}.marksFooterOct8{font-size:10px}.marksCompactOct8 .marksAccountV363{padding:16px}}
@media(max-width:390px){.marksHeroTextOct8{padding:25px 20px 10px}.marksHeroTextOct8 h1{font-size:43px}.marksHeroActionsOct8 .button{flex:1;padding:11px 10px;font-size:12px}.marksEditionOct8 header>b{max-width:115px}.marksEditionOct8 footer .button{padding:11px 12px;font-size:12px}.marksEditionImagesOct8{height:195px}.marksTourBodyOct8>[data-marks-tour-image]{height:420px}}
@media(prefers-reduced-motion:reduce){.marksCompactOct8 *{scroll-behavior:auto!important;transition:none!important}}
/* FERMANI_MARKS_EXECUTOR_REDESIGN_REV2_20261008 */
.marksPageV363.marksRedesignR2{--approved-font:"Segoe UI",Arial,sans-serif;--approved-ui:"Segoe UI",Arial,sans-serif;--marks-window-height:560px;--marks-scene:url('/assets/marks-gallery/marks_executor_scene.webp');max-width:1440px;margin:0 auto 38px;gap:22px;font-family:"Segoe UI",Arial,sans-serif!important;color:#eef1ed}
.marksRedesignR2 h1,.marksRedesignR2 h2,.marksRedesignR2 h3,.marksRedesignR2 p,.marksRedesignR2 button,.marksRedesignR2 a,.marksRedesignR2 summary,.marksRedesignR2 li,.marksRedesignR2 span{font-family:"Segoe UI",Arial,sans-serif!important;letter-spacing:normal}
.marksRedesignR2 .button{min-height:46px;padding:13px 23px;font-size:13px;font-weight:700;letter-spacing:.025em;border-radius:5px;border-color:#647157;background:#111a16c9;white-space:normal}
.marksRedesignR2 .button.primary{background:linear-gradient(120deg,#b4dd39,#92bc25);border-color:#b4dd39;box-shadow:0 4px 20px #82ad1320;color:#0c1707}
.marksRedesignR2 .marksHeroOct8{min-height:650px;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);border:0;border-radius:0;box-shadow:none;background:#182025 var(--marks-scene) center/cover;overflow:hidden}
.marksRedesignR2 .marksHeroOct8::before{background:linear-gradient(90deg,#070c0eea,#070c0ea6 36%,#070c0e12 68%),linear-gradient(0deg,#070b0ae5,transparent 25%)}
.marksRedesignR2 .marksHeroTextOct8{padding:55px 0 55px 48px;align-self:center;max-width:650px}
.marksRedesignR2 .marksEyebrowOct8{font-size:11px;font-weight:700;letter-spacing:2px;color:#c5ec69}
.marksRedesignR2 .marksHeroTextOct8 h1{font-size:clamp(48px,5.7vw,84px);line-height:.98;font-weight:800;letter-spacing:-2px;margin:20px 0}
.marksRedesignR2 .marksHeroTextOct8 h1 em{color:#b9e445}
.marksRedesignR2 .marksHeroTextOct8>strong{font-size:20px;line-height:1.5;max-width:540px;font-weight:650}
.marksRedesignR2 .marksHeroTextOct8>p{font-size:15px;line-height:1.6;color:#c6cfcc;max-width:500px}
.marksRedesignR2 .marksHeroActionsOct8{margin-top:28px;gap:12px}
.marksRedesignR2 .marksHeroVisualOct8{justify-content:center;align-items:flex-end;padding:35px 16px 35px 0;min-width:0}
.marksRedesignR2 .marksHeroVisualOct8 img{height:var(--marks-window-height);width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 10px 24px #0007)}
.marksRedesignR2 .marksReleaseOct8{background:#0d1514;border:0;border-top:1px solid #39483d;border-bottom:1px solid #39483d;border-radius:0;margin-top:-22px}
.marksRedesignR2 .marksReleaseOct8 summary{padding:14px 20px;gap:18px;min-height:52px;font-size:12px}
.marksRedesignR2 .marksReleaseSignalOct8{background:transparent;padding:0;color:#b8dc66;font-size:10px}
.marksRedesignR2 .marksReleaseOct8>div{padding:4px 20px 18px;font-size:13px}
.marksRedesignR2 .marksTourOct8{background:none;border:0;border-radius:0;overflow:visible;scroll-margin-top:90px}
.marksRedesignR2 .marksTourOct8>header{padding:8px 0 20px;align-items:center;gap:25px}
.marksRedesignR2 .marksTourOct8>header h2{font-size:29px;line-height:1.25;font-weight:700;margin:0}
.marksRedesignR2 .marksTourOct8>header>span{font-size:12px;color:#95a79d;letter-spacing:0;font-weight:400;text-transform:none}
.marksRedesignR2 .marksTourTabsOct8{padding:0;gap:4px;flex-wrap:wrap;border-bottom:1px solid #37433a;margin-bottom:15px}
.marksRedesignR2 .marksTourTabsOct8 button{min-width:0;min-height:48px;flex:1 1 120px;background:none;border:0;border-bottom:2px solid transparent;border-radius:0;font-size:13px;padding:12px 9px;font-weight:600;white-space:normal;color:#a9b9ad}
.marksRedesignR2 .marksTourTabsOct8 button[aria-selected=true]{background:none;box-shadow:none;border-color:#b3dc37;color:#f0f6e5}
.marksRedesignR2 .marksTourBodyOct8{display:block;min-height:0;border:1px solid #37473f;border-radius:8px;overflow:hidden;background:#101916}
.marksRedesignR2 .marksTourBodyOct8>[data-marks-tour-image]{height:calc(var(--marks-window-height) + 80px);padding:0;display:block;background:var(--marks-scene) center/cover;position:relative}
.marksRedesignR2 .marksPhotoOct8{background:var(--marks-scene) center/cover;border:0;border-radius:6px;box-shadow:none;width:100%;max-width:100%;overflow:hidden}
.marksRedesignR2 .marksTourBodyOct8 .is-tour{height:100%;width:100%;max-width:100%;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;display:flex;align-items:center;justify-content:flex-end;padding:0 18px}
.marksRedesignR2 .marksTourBodyOct8 .is-tour img{height:var(--marks-window-height);width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 10px 24px #0006)}
.marksRedesignR2 .marksPhotoOct8>span{bottom:13px;right:15px;color:#e9eddd;background:#101a17bb;border:1px solid #73866960}
.marksRedesignR2 .marksTourBodyOct8 aside{padding:19px 22px;max-width:none;display:flex;align-items:center;gap:24px}
.marksRedesignR2 .marksTourBodyOct8 aside>div{min-width:160px;max-width:330px}
.marksRedesignR2 .marksTourBodyOct8 aside span{font-size:10px;color:#a6bb83;letter-spacing:1px}
.marksRedesignR2 .marksTourBodyOct8 aside h3{font-size:18px;font-weight:650;line-height:1.35;margin:4px 0 0}
.marksRedesignR2 .marksTourBodyOct8 aside p{flex:1;font-size:13px;line-height:1.6;color:#b3c0b8;margin:0;max-width:620px}
.marksRedesignR2 .marksTourBodyOct8 aside .button{flex-shrink:0;font-size:11px;max-width:220px;padding:11px 15px;min-height:40px}
.marksRedesignR2 .marksEditionsSectionR2>h2{font-size:24px;font-weight:650;margin:4px 0 18px}
.marksRedesignR2 .marksEditionsOct8{gap:16px}
.marksRedesignR2 .marksEditionOct8,.marksRedesignR2 .marksEditionOct8.is-pro{padding:20px;background:#111b1a;border:1px solid #33443b;border-radius:8px;box-shadow:none}
.marksRedesignR2 .marksEditionOct8 header{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;gap:12px}
.marksRedesignR2 .marksEditionOct8 header h3{margin:0;font-size:24px;line-height:1.25;color:#b9dd68;font-weight:750}
.marksRedesignR2 .marksEditionOct8 header h3 small{font-size:11px;color:#98a59c;font-weight:400;margin-left:8px}
.marksRedesignR2 .marksEditionOct8 header>span{font-size:11px;color:#a5b4a6}
.marksRedesignR2 .marksEditionContentR2{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:20px}
.marksRedesignR2 .marksMiniSceneR2{min-width:0;position:relative;border-radius:5px;overflow:hidden;background:var(--marks-scene) center/cover}
.marksRedesignR2 .marksMiniSceneR2 .marksPhotoOct8{height:220px;display:flex;align-items:center;justify-content:center}
.marksRedesignR2 .marksMiniSceneR2 img{height:165px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 5px 8px #0007)}
.marksRedesignR2 .marksMiniSceneR2 .marksPhotoOct8>span{right:7px;bottom:40px;width:23px;height:23px;font-size:14px}
.marksRedesignR2 .is-pro .marksMiniSceneR2 .marksPhotoOct8>span{bottom:9px}
.marksRedesignR2 .marksFreeModesR2{position:absolute;bottom:0;left:0;right:0;display:flex;background:#0b1411cf}
.marksRedesignR2 .marksFreeModesR2 button{flex:1;min-width:0;border:0;border-bottom:2px solid transparent;background:none;color:#b6c5b7;font-size:11px;padding:9px 5px;cursor:pointer}
.marksRedesignR2 .marksFreeModesR2 button[aria-pressed=true]{color:#e4f1d2;border-color:#b2d95b}
.marksRedesignR2 .marksEditionTextR2{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0}
.marksRedesignR2 .marksEditionTextR2>p{font-size:13px;line-height:1.5;color:#d5ddd5;margin:0 0 7px}
.marksRedesignR2 .marksEditionTextR2 ul{font-size:12px;gap:7px;margin:7px 0 18px;line-height:1.5;color:#a8bbac}
.marksRedesignR2 .marksEditionTextR2 .button{margin-top:auto;min-height:42px;font-size:11px;padding:12px 15px;max-width:100%}
.marksRedesignR2 .marksCompactDetailsOct8{gap:14px}
.marksRedesignR2 .marksCompactDetailsOct8 details,.marksRedesignR2 .marksBuyOct8{background:#0e1815;border-color:#35483b;border-radius:6px}
.marksRedesignR2 .marksBuyOct8{padding:0}
.marksRedesignR2 .marksBuyOct8 summary{padding:17px 20px;gap:16px;font-size:14px;font-weight:600}
.marksRedesignR2 .marksBuyOct8 summary>span{color:#c2dd83;font-size:11px;letter-spacing:1.3px}
.marksRedesignR2 .marksBuyOct8 summary>strong{font-size:14px;font-weight:600;margin-right:auto}
.marksRedesignR2 .marksBuyOct8>.marksCheckout,.marksRedesignR2 .marksBuyOct8>.marksStoreAdminFix6{margin:0 20px 20px}
.marksRedesignR2 .marksFooterOct8{padding:0;font-size:10px}
.marksGalleryDialogFix5:has(.marksGalleryExactOct8){font-family:"Segoe UI",Arial,sans-serif!important}
@media(max-width:1100px){.marksPageV363.marksRedesignR2{--marks-window-height:480px}.marksRedesignR2 .marksHeroOct8{min-height:580px}.marksRedesignR2 .marksHeroTextOct8{padding-left:28px}.marksRedesignR2 .marksHeroTextOct8 h1{font-size:64px}.marksRedesignR2 .marksHeroTextOct8>strong{font-size:18px}.marksRedesignR2 .marksEditionContentR2{gap:13px}.marksRedesignR2 .marksMiniSceneR2 .marksPhotoOct8{height:205px}.marksRedesignR2 .marksTourBodyOct8 aside{gap:15px}}
@media(max-width:760px){.marksPageV363.marksRedesignR2{--marks-window-height:430px;gap:18px;margin:0 0 28px}.marksRedesignR2 .marksHeroOct8{min-height:0;grid-template-columns:1fr;background-position:44% center}.marksRedesignR2 .marksHeroOct8::before{background:linear-gradient(180deg,#080e10e6,#080e1070 46%,#080e1010 72%,#080e10a6)}.marksRedesignR2 .marksHeroTextOct8{padding:32px 24px 5px;max-width:none}.marksRedesignR2 .marksHeroTextOct8 h1{font-size:55px;letter-spacing:-1px;margin:15px 0}.marksRedesignR2 .marksHeroTextOct8>strong{font-size:17px}.marksRedesignR2 .marksHeroTextOct8>p{font-size:13px;margin-top:8px}.marksRedesignR2 .marksHeroActionsOct8{margin-top:18px}.marksRedesignR2 .marksHeroVisualOct8{padding:20px 0 25px;align-items:center}.marksRedesignR2 .marksReleaseOct8{margin-top:-18px}.marksRedesignR2 .marksReleaseOct8 summary{font-size:11px;gap:8px;padding:12px}.marksRedesignR2 .marksTourOct8>header{padding:2px 0 13px;gap:8px;align-items:flex-start}.marksRedesignR2 .marksTourOct8>header h2{font-size:23px}.marksRedesignR2 .marksTourOct8>header>span{font-size:10px}.marksRedesignR2 .marksTourTabsOct8{gap:0;margin-bottom:12px}.marksRedesignR2 .marksTourTabsOct8 button{flex:1 0 32%;font-size:11px;padding:10px 5px;min-height:40px}.marksRedesignR2 .marksTourBodyOct8>[data-marks-tour-image]{height:calc(var(--marks-window-height) + 40px);background-position:42% center}.marksRedesignR2 .marksTourBodyOct8 .is-tour{justify-content:center;padding:0}.marksRedesignR2 .marksTourBodyOct8 aside{padding:15px;flex-wrap:wrap;gap:10px}.marksRedesignR2 .marksTourBodyOct8 aside>div{min-width:0;max-width:none;width:100%}.marksRedesignR2 .marksTourBodyOct8 aside p{flex-basis:100%;font-size:12px}.marksRedesignR2 .marksTourBodyOct8 aside h3{font-size:17px}.marksRedesignR2 .marksEditionOct8{padding:15px}.marksRedesignR2 .marksEditionContentR2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:13px}.marksRedesignR2 .marksMiniSceneR2 .marksPhotoOct8{height:210px}.marksRedesignR2 .marksMiniSceneR2 img{height:145px}.marksRedesignR2 .marksEditionTextR2>p,.marksRedesignR2 .marksEditionTextR2 ul{font-size:11px}.marksRedesignR2 .marksEditionTextR2 .button{font-size:10px;padding:11px 9px}.marksRedesignR2 .marksBuyOct8>.marksCheckout,.marksRedesignR2 .marksBuyOct8>.marksStoreAdminFix6{margin:0 12px 16px}.marksRedesignR2 .marksBuyOct8 summary{padding:15px}.marksRedesignR2 .marksFooterOct8{font-size:9px}}
@media(max-width:390px){.marksPageV363.marksRedesignR2{--marks-window-height:400px}.marksRedesignR2 .marksHeroTextOct8{padding:26px 18px 5px}.marksRedesignR2 .marksHeroTextOct8 h1{font-size:48px}.marksRedesignR2 .marksHeroActionsOct8 .button{padding:12px 9px;font-size:11px}.marksRedesignR2 .marksHeroTextOct8>strong{font-size:16px}.marksRedesignR2 .marksMiniSceneR2 img{height:130px}.marksRedesignR2 .marksMiniSceneR2 .marksPhotoOct8{height:205px}.marksRedesignR2 .marksEditionContentR2{gap:10px}}

/* FERMANI_MARKS_HERO_CAROUSEL_R3_20261008 — marks page only. */
.marksPageV363.marksRedesignR2.marksRedesignR3,
html:has(#fhSharedHeader) .marksPageV363.marksRedesignR2.marksRedesignR3{
  display:grid;gap:20px;width:100%;max-width:1440px;min-width:0;margin:0 auto 36px;
  padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  background:none!important;color:#eff3ef;container:marksR3 / inline-size;
  --marks-gold:#e1bd73;--marks-lime:#badd49;
}
.marksRedesignR3 *{box-sizing:border-box}
.marksRedesignR3 .button{font:700 14px/1.3 "Segoe UI",Arial,sans-serif!important;letter-spacing:0!important;text-transform:none!important;min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 19px;text-align:center;text-decoration:none}
.marksRedesignR3 .button:focus-visible,.marksRedesignR3 button:focus-visible,.marksRedesignR3 summary:focus-visible{outline:2px solid #d6ee8a;outline-offset:4px}
.marksRedesignR3 .marksProActionR3,.marksRedesignR3 .marksPayProviderFix4{
  background:linear-gradient(120deg,#edce8b,#d2a84e)!important;border:1px solid #e2c482!important;
  box-shadow:0 4px 18px #d7b05b1c;color:#211a0d!important;text-shadow:none!important;
}
.marksRedesignR3 .marksProActionR3:hover,.marksRedesignR3 .marksPayProviderFix4:hover{background:linear-gradient(120deg,#f6dfa7,#e5bd67)!important;color:#211a0d!important}
.marksRedesignR3 .marksPayProviderFix4 *{color:#211a0d!important;font-family:"Segoe UI",Arial,sans-serif!important;font-size:14px!important;font-weight:700!important;letter-spacing:0!important;line-height:1.4!important;text-shadow:none!important;text-transform:none!important}
.marksRedesignR3 .marksPayProviderFix4 .marksPaySepV377{opacity:.5}
.marksRedesignR3 .marksHeroR3{position:relative;isolation:isolate;overflow:hidden;border:1px solid #5061537a;border-radius:14px;background:#1a2426;box-shadow:0 16px 40px #0003;scroll-margin-top:100px}
.marksRedesignR3 .marksHeroSceneR3{position:absolute;z-index:-2;inset:0;background:var(--marks-scene) 46% center/cover no-repeat;filter:brightness(1.05) saturate(1.04)}
.marksRedesignR3 .marksHeroR3::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#071013e8,rgba(7,16,19,.7) 28%,rgba(7,16,19,.1) 58%,rgba(7,16,19,.2)),linear-gradient(0deg,#091014cc,transparent 44%);pointer-events:none}
.marksRedesignR3 .marksHeroMainR3{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);align-items:center;gap:10px;padding:34px 22px 32px 32px;min-width:0}
.marksRedesignR3 .marksHeroTextR3{min-width:0;position:relative;z-index:1;padding:8px 0}
.marksRedesignR3 .marksEyebrowR3{display:block;color:#d0ed88;font-size:11px;font-weight:700;letter-spacing:1.8px;line-height:1.6}
.marksRedesignR3 .marksHeroTextR3 h1{font-size:clamp(42px,4vw,68px);font-size:clamp(42px,4.8cqw,72px);line-height:.98;font-weight:800;letter-spacing:-1.8px;margin:18px 0;color:#fff;overflow-wrap:normal}
.marksRedesignR3 .marksHeroTextR3 h1 em{display:block;font-style:normal;color:#c2e958;letter-spacing:-1.4px}
.marksRedesignR3 .marksHeroTaglineR3{font-size:17px;font-weight:650;line-height:1.5;color:#edf2eb;max-width:370px;margin:0}
.marksRedesignR3 .marksHeroCaptionR3{margin-top:42px;min-height:150px;max-width:365px}
.marksRedesignR3 .marksHeroLabelR3{color:#e0bf80;font-size:11px;letter-spacing:.07em;font-weight:700;line-height:1.5}
.marksRedesignR3 .marksHeroCaptionR3 h2{font-size:24px;font-weight:700;line-height:1.2;margin:8px 0 12px;color:#fff}
.marksRedesignR3 .marksHeroCaptionR3 p{font-size:14px;line-height:1.65;color:#d0dcda;margin:0}
.marksRedesignR3 .marksHeroActionsR3{display:flex;flex-wrap:wrap;gap:10px;margin-top:23px}
.marksRedesignR3 .marksHeroActionsR3 .button{font-size:13px!important;padding:12px 14px}
.marksRedesignR3 .marksHeroAuthenticR3{display:block;color:#b4c2ba;font-size:11px;margin-top:16px;line-height:1.4}
.marksRedesignR3 .marksHeroPairR3{display:grid;grid-template-columns:minmax(0,230fr) minmax(0,550fr);gap:12px;align-items:center;min-width:0;max-width:792px;aspect-ratio:792/704;width:100%;margin:auto}
.marksRedesignR3 .marksHeroMiniR3,.marksRedesignR3 .marksHeroLargeR3{min-width:0;width:100%}
.marksRedesignR3 .marksHeroPairR3 .marksPhotoOct8{position:relative;display:block;aspect-ratio:auto;height:auto;min-height:0;width:100%;max-width:100%;padding:0;background:none;border:0;border-radius:0;overflow:visible;transform:none;box-shadow:none}
.marksRedesignR3 .marksHeroPairR3 .marksPhotoOct8 img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 8px 12px #0008)}
.marksRedesignR3 .marksHeroPairR3 .marksPhotoOct8>span{position:absolute;width:24px;height:24px;right:4px;bottom:6px;display:grid;place-items:center;border-radius:5px;background:#11201bd9;color:#eef7d9;font-size:15px;border:1px solid #8eac694f;opacity:0;transition:opacity .15s}
.marksRedesignR3 .marksHeroPairR3 .marksPhotoOct8:hover>span,.marksRedesignR3 .marksHeroPairR3 .marksPhotoOct8:focus-visible>span{opacity:1}
.marksRedesignR3 .marksHeroRibbonR3{display:flex;align-items:center;gap:14px;padding:14px 23px;background:linear-gradient(100deg,#111d22ed,#15201eea);border-top:1px solid #768d7163;backdrop-filter:blur(12px)}
.marksRedesignR3 .marksHeroArrowR3{display:grid;place-items:center;flex:none;width:38px;height:38px;padding:0;border:1px solid #7181746e;border-radius:50%;background:#0b161ab3;color:#f1f3e8;font:400 30px/1 Arial,sans-serif!important;cursor:pointer}
.marksRedesignR3 .marksHeroTabsR3{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;flex:1;min-width:0}
.marksRedesignR3 .marksHeroTabsR3 button{position:relative;border:0;border-radius:0;background:none;box-shadow:none;color:#b9c8c9;font-size:12px;font-weight:700;padding:13px 4px 16px;min-width:0;line-height:1.3;cursor:pointer;overflow-wrap:anywhere}
.marksRedesignR3 .marksHeroTabsR3 button[aria-selected=true]{color:#d8f28a}
.marksRedesignR3 .marksHeroTabsR3 button::after{content:"";height:2px;position:absolute;left:5px;right:5px;bottom:5px;background:#4e66564a}
.marksRedesignR3 .marksHeroTabsR3 button[aria-selected=true]::after{background:#badd49;box-shadow:0 0 8px #badd494d}
.marksRedesignR3 .marksHeroTabsR3 button i{display:none;position:absolute;z-index:1;height:2px;left:5px;right:5px;bottom:5px;transform:scaleX(0);transform-origin:left;background:#fff7cf}
.marksRedesignR3 .marksHeroR3.is-playing .marksHeroTabsR3 button[aria-selected=true] i{display:block;animation:marksCarouselFillR3 4s linear forwards}
.marksRedesignR3 .marksHeroPlaybackR3{display:flex;align-items:center;justify-content:center;gap:7px;flex:none;min-width:65px;min-height:38px;padding:7px;border:1px solid #697c6a6e;border-radius:7px;background:#0b1718b3;color:#bacbbb;font-size:11px;cursor:pointer}
.marksRedesignR3 .marksHeroPlaybackR3 [data-marks-playback-icon]{font-size:16px;color:#f3f7e9}
@keyframes marksCarouselFillR3{to{transform:scaleX(1)}}
.marksRedesignR3 .marksReleaseOct8.marksReleaseR3{position:relative;margin:0;border:1px solid #a48e4e79;border-radius:12px;background:linear-gradient(105deg,#142127,#1d2827 60%,#32291b);overflow:hidden}
.marksRedesignR3 .marksReleaseR3::after{content:"";position:absolute;inset:-50% -15%;background:linear-gradient(110deg,transparent 43%,#f5d98b24 48%,#fff9da48 50%,#f5d98b24 52%,transparent 57%);transform:translateX(-130%);animation:marksReleaseLightR3 1.6s ease-out .4s 1 forwards;pointer-events:none}
@keyframes marksReleaseLightR3{to{transform:translateX(130%)}}
.marksRedesignR3 .marksReleaseR3 summary{display:grid;grid-template-columns:auto minmax(0,1.1fr) minmax(0,.8fr) auto;align-items:center;gap:20px;min-height:100px;padding:21px 24px;list-style:none;cursor:pointer}
.marksRedesignR3 .marksReleaseR3 summary::-webkit-details-marker{display:none}
.marksRedesignR3 .marksReleaseBadgeR3{padding:7px 11px;border-radius:20px;background:#c9e95a;color:#152014;font-size:10px;font-weight:800;line-height:1.3}
.marksRedesignR3 .marksReleaseTextR3{display:grid;gap:8px;min-width:0}
.marksRedesignR3 .marksReleaseTextR3>strong{font-size:clamp(19px,2.1cqw,27px);font-weight:750;line-height:1.2;color:#f4f5ee}
.marksRedesignR3 .marksReleaseTextR3>span{font-size:12px;font-weight:600;letter-spacing:.035em;color:#b9c9c8}
.marksRedesignR3 .marksReleaseBriefR3{font-size:13px;line-height:1.55;color:#d1d7d0;border-left:1px solid #a3a47d50;padding-left:20px}
.marksRedesignR3 .marksReleaseMoreR3{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;color:#f0e8d4}
.marksRedesignR3 .marksReleaseMoreR3 b{font-size:23px;line-height:1;transition:transform .2s}
.marksRedesignR3 .marksReleaseR3[open] .marksReleaseMoreR3 b{transform:rotate(45deg)}
.marksRedesignR3 .marksReleaseR3>div{padding:0 24px 20px;border-top:1px solid #b8bb8250;margin:0 24px}
.marksRedesignR3 .marksReleaseR3 ul{margin:16px 0 0;padding-left:20px;color:#ced9d0;font-size:14px;line-height:1.7;display:grid;gap:7px}
.marksRedesignR3 .marksEditionsSectionR2>h2,html:has(#fhSharedHeader) .marksRedesignR3 .marksEditionsSectionR2>h2{color:#eef2ea!important;font-size:24px;margin:5px 0 16px}
.marksRedesignR3 .marksEditionsOct8{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.marksRedesignR3 .marksEditionOct8{padding:22px;border:1px solid #5268657d;border-radius:12px;background:linear-gradient(140deg,#1a2a32,#102027);min-width:0}
.marksRedesignR3 .marksEditionOct8.is-pro{border-color:#967e467a;background:linear-gradient(140deg,#2a2c25,#1d2828);padding:22px;border-radius:12px}
.marksRedesignR3 .marksEditionOct8 header h3{font-size:25px;color:#d2e88c}
.marksRedesignR3 .marksEditionOct8.is-pro header h3{color:#ecd295}
.marksRedesignR3 .marksEditionOct8 header h3 small{color:#b3c1bc;font-size:12px}
.marksRedesignR3 .marksEditionOct8 header>span{color:#c1cdc0;font-size:12px}
.marksRedesignR3 .marksEditionContentR2{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:18px}
.marksRedesignR3 .marksMiniSceneR2 .marksPhotoOct8{height:190px}
.marksRedesignR3 .marksMiniSceneR2 img{height:145px;max-width:100%}
.marksRedesignR3 .marksEditionTextR2>p,.marksRedesignR3 .marksProEditionBodyR3>p{font-size:14px;line-height:1.6;color:#eef0e3;margin:0 0 8px}
.marksRedesignR3 .marksEditionTextR2 ul,.marksRedesignR3 .marksProEditionBodyR3 ul{font-size:13px;line-height:1.65;color:#c1d0c8;margin:7px 0 20px;padding-left:17px;display:grid;gap:6px}
.marksRedesignR3 .marksProEditionBodyR3{display:flex;flex-direction:column;min-height:190px}
.marksRedesignR3 .marksProEditionActionR3{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:auto}
.marksRedesignR3 .marksEditionPriceR3{display:grid;gap:3px}
.marksRedesignR3 .marksEditionPriceR3 strong{font-size:25px;color:#f8f0db;font-weight:750;line-height:1.25}
.marksRedesignR3 .marksEditionPriceR3 small{font-size:12px;color:#cfbd8e}
.marksRedesignR3 .marksEditionTextR2 .button{font-size:12px!important;padding:11px 14px;min-height:44px}
.marksRedesignR3 .marksBuyOct8{border:1px solid #7582605e;border-radius:12px;background:linear-gradient(120deg,#182629,#152121)}
.marksRedesignR3 .marksBuyOct8 summary>strong{font-size:17px;color:#eef2e6}
.marksRedesignR3 .marksBuyOct8 summary>span{color:#e5c37e;font-size:13px}
.marksRedesignR3 .marksCompactDetailsOct8 details{background:#142226;border-color:#4f676455}
.marksRedesignR3 .marksCompactDetailsOct8 summary{font-size:14px;color:#d9e6df}
.marksRedesignR3 .marksCheckout .marksStoreLabelFix4,.marksRedesignR3 .marksCheckout .marksCurrencyHeadFix4>span{font-size:12px;color:#c7d3c4;letter-spacing:.05em}
.marksRedesignR3 .marksPlanCardFix4{font-family:"Segoe UI",Arial,sans-serif!important;letter-spacing:0!important;text-shadow:none!important}
.marksRedesignR3 .marksPlanCardFix4>span{font-size:13px!important;color:#eff0e4!important;font-weight:700;letter-spacing:0!important}
.marksRedesignR3 .marksPlanCardFix4>strong{font-size:26px!important;line-height:1.3!important;color:#f5f2db!important;font-family:"Segoe UI",Arial,sans-serif!important;letter-spacing:0!important}
.marksRedesignR3 .marksPlanCardFix4>small,.marksRedesignR3 .marksPlanCardFix4>em{font-size:12px!important;line-height:1.5;color:#d0d5c2!important;text-shadow:none!important}
.marksRedesignR3 .marksPlanCardFix4.is-active{border-color:#d2b66b!important;background:linear-gradient(130deg,#3a3c27,#252f2b)!important;box-shadow:inset 0 1px #ece0b126,0 4px 14px #0002!important}
.marksRedesignR3 .marksCurrencyFix4{font:700 13px/1.3 "Segoe UI",Arial,sans-serif!important;color:#c9d4ca!important;letter-spacing:0!important}
.marksRedesignR3 .marksCurrencyFix4.is-active{color:#ffedbe!important;background:#3a3927!important;border-color:#ae9658!important}
.marksRedesignR3 .marksProviders{display:flex;flex-wrap:wrap;gap:12px}
.marksRedesignR3 .marksProviders .button{min-width:0;white-space:normal;flex:1 1 220px}
.marksRedesignR3 .marksManualRenewFix4{font-size:13px;line-height:1.6;color:#c5d2c7}
.marksRedesignR3 .marksOrderResult:not([hidden]){display:grid;gap:16px;padding:24px;margin-top:22px;background:linear-gradient(125deg,#14262a,#102023);border:1px solid #a4c36791;border-radius:12px}
.marksRedesignR3 .marksOrderCodeR3{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px;background:#0a191bd9;border:1px solid #94b66362;border-radius:10px}
.marksRedesignR3 .marksOrderCodeR3>div{display:grid;gap:9px;min-width:0}
.marksRedesignR3 .marksOrderCodeR3 small{color:#becab5;font-size:12px;font-weight:700;letter-spacing:.05em}
.marksRedesignR3 .marksOrderCodeR3 strong{font:750 clamp(26px,3.2cqw,38px)/1.2 Consolas,"Liberation Mono",monospace!important;color:#d4ef8b!important;letter-spacing:.035em!important;overflow-wrap:anywhere;text-shadow:0 1px 8px #b5d37a1a;user-select:all}
.marksRedesignR3 .marksCodeOnlyFix4{margin:0;font-size:15px!important;line-height:1.7;color:#f0f3e5!important;max-width:850px}
.marksRedesignR3 .marksPaymentGuideThumbR3{display:flex;align-items:center;gap:17px;justify-self:start;text-align:left;width:100%;max-width:540px;padding:10px 14px 10px 10px;border:1px solid #78967359;border-radius:9px;background:#1b303168;color:#eef2e5;cursor:pointer}
.marksRedesignR3 .marksPaymentGuideThumbR3 img{display:block;width:145px;max-width:36%;height:auto;border-radius:6px;flex:none}
.marksRedesignR3 .marksPaymentGuideThumbR3>span{display:grid;gap:8px;min-width:0}
.marksRedesignR3 .marksPaymentGuideThumbR3 strong{font-size:15px;color:#eef2e5;line-height:1.4;font-weight:700}
.marksRedesignR3 .marksPaymentGuideThumbR3 small{font-size:12px;color:#c9e498;line-height:1.4}
.marksRedesignR3 .marksPaymentWarningR3{font-size:13px;line-height:1.6;color:#d4c599;margin:0;border-left:2px solid #c9b16e;padding-left:13px}
.marksRedesignR3 .marksOrderActionsR3{display:flex;flex-wrap:wrap;gap:12px}
.marksRedesignR3 .marksOrderResult>em{font-size:12px;line-height:1.5;color:#b3c8bc;font-style:normal}
.marksRedesignR3 .marksFooterOct8,html:has(#fhSharedHeader) .marksRedesignR3 .marksFooterOct8{color:#a8bbb3!important;font-size:11px;line-height:1.6}
dialog.marksPaymentGuideDialogR3{width:min(940px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;background:#102026;border:1px solid #8eab654f;border-radius:12px;padding:16px;color:#eef2e9;box-shadow:0 24px 80px #0009;font-family:"Segoe UI",Arial,sans-serif}
dialog.marksPaymentGuideDialogR3::backdrop{background:#030a0bd6;backdrop-filter:blur(5px)}
.marksPaymentGuideDialogR3 header{display:flex;align-items:center;gap:16px;justify-content:space-between;margin-bottom:14px}
.marksPaymentGuideDialogR3 h2{margin:0;color:#eef2e9;font:700 20px/1.4 "Segoe UI",Arial,sans-serif}
.marksPaymentGuideDialogR3 [data-guide-close]{display:grid;place-items:center;width:40px;height:40px;flex:none;color:#eff2e6;background:#1f3433;border:1px solid #81936c77;border-radius:7px;font:400 28px/1 Arial,sans-serif;cursor:pointer}
.marksPaymentGuideDialogR3>img{display:block;width:100%;height:auto;max-height:72dvh;object-fit:contain;border-radius:8px}
.marksPaymentGuideDialogR3>p{color:#c7d6c5;font-size:13px;line-height:1.6;margin:14px 2px 0}
.marksPaymentGuideDialogR3 button:focus-visible{outline:2px solid #cfeb8f;outline-offset:3px}
@container marksR3 (max-width:1000px){
 .marksRedesignR3 .marksHeroMainR3{grid-template-columns:minmax(0,.33fr) minmax(0,.67fr);padding:28px 14px 25px 25px;gap:6px}
 .marksRedesignR3 .marksHeroTextR3 h1{font-size:clamp(34px,4.8cqw,48px);letter-spacing:-1px}
 .marksRedesignR3 .marksHeroTaglineR3{font-size:15px}
 .marksRedesignR3 .marksHeroCaptionR3{margin-top:27px;min-height:155px}
 .marksRedesignR3 .marksHeroCaptionR3 h2{font-size:21px}
 .marksRedesignR3 .marksHeroCaptionR3 p{font-size:13px}
 .marksRedesignR3 .marksHeroActionsR3{gap:8px}
 .marksRedesignR3 .marksHeroActionsR3 .button{font-size:12px!important;padding:10px 12px}
 .marksRedesignR3 .marksReleaseR3 summary{grid-template-columns:auto minmax(0,1fr) auto;gap:16px;padding:19px}
 .marksRedesignR3 .marksReleaseBriefR3{display:none}
 .marksRedesignR3 .marksEditionContentR2{gap:12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .marksRedesignR3 .marksEditionOct8{padding:18px}
 .marksRedesignR3 .marksEditionOct8.is-pro{padding:18px}
}
@container marksR3 (max-width:740px){
 .marksRedesignR3 .marksHeroMainR3{grid-template-columns:1fr;padding:28px 22px 18px;gap:18px}
 .marksRedesignR3 .marksHeroTextR3{padding:0}
 .marksRedesignR3 .marksHeroTextR3 h1{font-size:clamp(40px,8.5cqw,62px);margin:13px 0}
 .marksRedesignR3 .marksHeroCaptionR3{margin-top:23px;min-height:115px;max-width:none}
 .marksRedesignR3 .marksHeroTaglineR3{max-width:none}
 .marksRedesignR3 .marksHeroPairR3{width:100%;max-width:590px;gap:8px}
 .marksRedesignR3 .marksHeroActionsR3{margin-top:17px}
 .marksRedesignR3 .marksHeroR3::before{background:linear-gradient(180deg,#091419e8,#091419ba 32%,#09141924 66%,#09141972)}
 .marksRedesignR3 .marksHeroRibbonR3{gap:9px;padding:11px 13px;flex-wrap:wrap}
 .marksRedesignR3 .marksHeroTabsR3{flex:1 1 100%;order:-1;gap:4px}
 .marksRedesignR3 .marksHeroTabsR3 button{font-size:11px;padding:11px 2px 14px}
 .marksRedesignR3 .marksHeroPlaybackR3{margin-left:auto}
 .marksRedesignR3 .marksReleaseR3 summary{grid-template-columns:1fr auto;padding:18px;gap:12px}
 .marksRedesignR3 .marksReleaseBadgeR3{justify-self:start;grid-column:1 / -1}
 .marksRedesignR3 .marksReleaseTextR3>strong{font-size:21px}
 .marksRedesignR3 .marksReleaseTextR3>span{font-size:11px}
 .marksRedesignR3 .marksReleaseMoreR3{font-size:11px;gap:8px}
 .marksRedesignR3 .marksReleaseR3>div{margin:0 17px;padding:0 0 17px}
 .marksRedesignR3 .marksEditionsOct8{grid-template-columns:1fr}
 .marksRedesignR3 .marksProEditionBodyR3{min-height:145px}
 .marksRedesignR3 .marksOrderCodeR3{align-items:flex-start;flex-wrap:wrap;padding:16px}
 .marksRedesignR3 .marksOrderResult:not([hidden]){padding:16px}
 .marksRedesignR3 .marksPlanCardFix4>strong{font-size:22px!important}
}
@media(max-width:400px){.marksRedesignR3 .marksHeroTabsR3{grid-template-columns:repeat(3,minmax(0,1fr))}.marksRedesignR3 .marksHeroMainR3{padding:23px 16px 15px}.marksRedesignR3 .marksHeroPairR3{gap:6px}.marksRedesignR3 .marksPaymentGuideThumbR3{gap:12px}.marksRedesignR3 .marksPaymentGuideThumbR3 strong{font-size:13px}}
@media(prefers-reduced-motion:reduce){.marksRedesignR3 .marksReleaseR3::after{animation:none;display:none}.marksRedesignR3 .marksHeroR3.is-playing .marksHeroTabsR3 button i{animation:none;display:none}.marksRedesignR3 *{scroll-behavior:auto!important;transition:none!important}}

/* FERMANI_MARKS_PREMIUM_R4_20261009 — strictly bounded to the Marks product page. */
.marksPageV363.marksRedesignR4,
html:has(#fhSharedHeader) .marksPageV363.marksRedesignR2.marksRedesignR4{
 --marks-r4-blue:#bce0ef;--marks-r4-gold:#eac076;--marks-r4-lime:#c9ef43;
 background:linear-gradient(135deg,#081318,#091419 70%,#151913)!important;
 border:1px solid #26363c!important;border-radius:16px!important;padding:20px!important;
 color:#edf2f0!important;font-family:"Segoe UI",Arial,sans-serif!important;max-width:1430px;
 margin-inline:auto;min-width:0;box-shadow:0 20px 60px #0003!important;
 display:grid;gap:24px;isolation:isolate;
}
.marksRedesignR4 *{box-sizing:border-box}
.marksRedesignR4 .marksHeroR4{position:relative;border:1px solid #59717a58;border-radius:14px;overflow:hidden;background:#101c22;min-height:680px;isolation:isolate;margin:0;container-type:inline-size}
.marksRedesignR4 .marksHeroSceneR3{position:absolute;z-index:-2;inset:0;background:url('/assets/marks-gallery/marks_r4_original_scene.webp') 46% 50%/cover no-repeat;filter:brightness(.9) saturate(1.08)}
.marksRedesignR4 .marksHeroR4::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(90deg,#07151bed 0%,#07151bab 24%,#07151b24 52%,#07151b52),linear-gradient(0deg,#061115e6,transparent 32%,#07131835)}
.marksRedesignR4 .marksHeroMainR3{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.25fr);align-items:center;gap:22px;padding:32px 26px 12px;min-height:594px}
.marksRedesignR4 .marksHeroTextR3{min-width:0;padding:10px 0 0;position:relative;z-index:2;max-width:460px}
.marksRedesignR4 .marksEyebrowR3{display:block;color:#d6e7e5;font-size:11px;line-height:1.6;letter-spacing:.12em;font-weight:650;margin-bottom:17px}
.marksRedesignR4 #marksHeroTitleR3{font:800 clamp(46px,5.65cqw,78px)/.98 "Segoe UI",Arial,sans-serif!important;letter-spacing:-.055em;color:#f8fbf4!important;text-shadow:0 4px 24px #0006;margin:0 0 22px}
.marksRedesignR4 #marksHeroTitleR3 em{display:block;font-style:normal;color:#cdef85!important;font-weight:800;letter-spacing:-.045em}
.marksRedesignR4 .marksHeroTaglineR3{color:#fff9e7;font-size:clamp(18px,1.9cqw,25px);font-weight:650;line-height:1.3;letter-spacing:-.018em;margin:0 0 12px;text-wrap:balance}
.marksRedesignR4 .marksHeroLeadR4{color:#d0dbde;font-size:15px;line-height:1.6;max-width:390px;margin:0 0 20px}
.marksRedesignR4 .marksHeroCaptionR3{padding:16px 18px;border:1px solid #aebfb338;border-left:2px solid #ceb46b;background:linear-gradient(100deg,#091319bd,#121c2059);border-radius:9px;backdrop-filter:blur(7px);margin:0 0 20px;min-height:170px}
.marksRedesignR4 .marksHeroLabelR3{display:flex;gap:12px;align-items:center;color:#e6c780;font-size:10px;font-weight:750;letter-spacing:.12em;margin-bottom:9px}
.marksRedesignR4 .marksHeroLabelR3 span{color:#d0d7d9;font-size:10px;letter-spacing:.04em}
.marksRedesignR4 .marksHeroCaptionR3 h2{color:#f8f9ee!important;font:700 clamp(18px,1.85cqw,24px)/1.3 "Segoe UI",Arial,sans-serif!important;margin:0 0 9px;letter-spacing:-.01em}
.marksRedesignR4 .marksHeroCaptionR3 p{color:#d5e0dc;font-size:13px;line-height:1.55;margin:0}
.marksRedesignR4 .marksHeroEvidenceR4{margin-top:11px;font-size:11px;line-height:1.5;font-weight:650;color:#d5e5b7;font-variant-numeric:tabular-nums}
.marksRedesignR4 .marksHeroPairR3{display:block;position:relative;width:100%;max-width:620px;min-width:0;margin:0 auto;align-self:start;padding:0;filter:drop-shadow(0 10px 24px #0005)}
.marksRedesignR4 .marksHeroLargeR3{width:100%;max-width:none;min-width:0;padding:0;background:none;box-shadow:none;border:0}
.marksRedesignR4 .marksPhotoOct8.is-hero-pair{display:block;width:100%;height:auto;aspect-ratio:570/566;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;overflow:visible;border-radius:0}
.marksRedesignR4 .marksPhotoOct8.is-hero-pair>span{right:44px;bottom:15px;opacity:0;transition:opacity .2s}
.marksRedesignR4 .marksPhotoOct8.is-hero-pair:hover>span,.marksRedesignR4 .marksPhotoOct8.is-hero-pair:focus-visible>span{opacity:1}
.marksRedesignR4 .marksNativeSvgR4{display:block;width:100%;height:auto;overflow:visible}
.marksRedesignR4 .marksNativeSvgR4 image{image-rendering:auto}
.marksRedesignR4 .marksPairHintR4{position:absolute;left:34%;right:7%;bottom:-11px;text-align:center;color:#c9d4d0;font-size:10px;line-height:1.4;letter-spacing:.025em;text-shadow:0 1px 4px #000}
.marksRedesignR4 .marksHeroActionsR3{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.marksRedesignR4 .button{font:700 13px/1.35 "Segoe UI",Arial,sans-serif!important;letter-spacing:0!important;text-transform:none!important;text-shadow:none!important;min-height:43px;padding:11px 17px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.marksRedesignR4 .button.primary{color:#14200b!important;background:linear-gradient(115deg,#d8f75d,#bce639)!important;border:1px solid #c4ea46!important;box-shadow:inset 0 1px #f8ffd68c,0 5px 20px #a8d83c14!important}
.marksRedesignR4 .button.marksProActionR3{color:#231b0c!important;background:linear-gradient(110deg,#f1d58e,#e7b45a)!important;border:1px solid #e8bd6b!important;box-shadow:inset 0 1px #fff1b88c,0 5px 22px #e0b36d18!important;position:relative;overflow:hidden}
.marksRedesignR4 .button:hover{filter:brightness(1.07);transform:translateY(-1px)}
.marksRedesignR4 .button:disabled{transform:none;filter:none;opacity:.6}
.marksRedesignR4 .button.marksProActionR3::after{content:"";position:absolute;inset:-100% -40%;background:linear-gradient(110deg,transparent 44%,#fff7dc85 50%,transparent 56%);transform:translateX(-130%);animation:marksActionSheenR4 11s ease-in-out 6s infinite;pointer-events:none}
@keyframes marksActionSheenR4{0%,83%{transform:translateX(-130%)}94%,100%{transform:translateX(130%)}}
.marksRedesignR4 .marksHeroAuthenticR3{display:block;font-size:10px;line-height:1.6;color:#c3d0cd;letter-spacing:.015em}
.marksRedesignR4 .marksHeroRibbonR3{margin:16px 20px 18px;min-height:58px;padding:8px 11px;background:linear-gradient(110deg,#09181be6,#14262acd);border:1px solid #6d827347;border-radius:10px;display:flex;gap:10px;align-items:center;backdrop-filter:blur(8px)}
.marksRedesignR4 .marksHeroTabsR3{display:flex;flex:1;min-width:0;gap:4px}
.marksRedesignR4 .marksHeroTabsR3 button{flex:1;min-width:0;font:650 12px/1.2 "Segoe UI",Arial,sans-serif;color:#d3dcd6;padding:12px 7px 15px;border:0;border-radius:5px;position:relative;cursor:pointer;background:none;white-space:normal;overflow-wrap:anywhere}
.marksRedesignR4 .marksHeroTabsR3 button[aria-selected=true]{color:#e6f3ca;background:#bcd2710f}
.marksRedesignR4 .marksHeroTabsR3 button::after{bottom:7px;background:#6888773d}
.marksRedesignR4 .marksHeroArrowR3,.marksRedesignR4 .marksHeroPlaybackR3{color:#e4eddf;font-family:"Segoe UI",Arial,sans-serif;border-color:#71847447;background:#102024}
.marksRedesignR4 .marksHeroPlaybackR3{font-size:10px;min-width:61px}
.marksRedesignR4 .marksHeroArrowR3{font-size:24px;min-width:30px}
.marksRedesignR4 .marksReleaseOct8.marksReleaseR3{background:linear-gradient(90deg,#07131bf5 0%,#07131bcc 48%,#1118177d 75%,#241d14a8),url('/assets/marks-gallery/marks_r4_original_scene.webp') 82% 56%/cover, url('/assets/marks-gallery/marks_r4_pro_texture.png') center/cover;border-color:#86744c87;box-shadow:inset 0 1px #fff5d411,0 8px 22px #0002}
.marksRedesignR4 .marksReleaseR3 summary{min-height:100px;gap:20px;padding:20px 24px;position:relative;z-index:1;grid-template-columns:auto minmax(0,1.2fr) minmax(0,.8fr) auto}
.marksRedesignR4 .marksReleaseTextR3>strong{font-size:clamp(20px,2.35cqw,30px)!important;font-weight:750;color:#f9faf6}
.marksRedesignR4 .marksReleaseBriefR3{color:#e5e5dd;font-size:13px;text-shadow:0 1px 5px #000}
.marksRedesignR4 .marksReleaseBadgeR3{background:#c9ee47;color:#15200c;box-shadow:0 0 19px #bbe7441c}
.marksRedesignR4 .marksReleaseR3::after{animation:marksReleaseLightR3 1.3s ease-out 1.2s 1 forwards}
.marksRedesignR4 .marksEditionsSectionR2{margin:0}
html:has(#fhSharedHeader) .marksPageV363.marksRedesignR2.marksRedesignR4 .marksEditionsSectionR2>h2,.marksRedesignR4 .marksEditionsSectionR2>h2{color:#f2f5ec!important;font-size:25px!important;margin:0 0 16px!important;font-weight:700}
.marksRedesignR4 .marksEditionsOct8{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.marksRedesignR4 .marksEditionOct8{display:flex;flex-direction:column;position:relative;padding:24px;border:1px solid #668ca259;border-radius:12px;overflow:hidden;background:linear-gradient(90deg,#07131ccb,#07131c82),url('/assets/marks-gallery/marks_r4_free_texture.png') center/cover;box-shadow:inset 0 1px #d7effb13,0 8px 22px #0002}
.marksRedesignR4 .marksEditionOct8.is-pro{background:linear-gradient(90deg,#110f0ec9,#13120f85),url('/assets/marks-gallery/marks_r4_pro_texture.png') center/cover;border-color:#bc88494d;padding:24px;border-radius:12px;box-shadow:inset 0 1px #ffe5a51a,0 8px 22px #0002}
.marksRedesignR4 .marksEditionOct8 header{display:flex;align-items:flex-start;gap:14px;padding:0;margin:0 0 21px;background:none;border:0;min-width:0}
.marksRedesignR4 .marksEditionIconR4{width:33px;height:33px;flex:none;color:#b8d3e6;margin-top:1px;filter:drop-shadow(0 2px 8px #91d0ea25)}
.marksRedesignR4 .is-pro .marksEditionIconR4{color:#e7bc72;filter:drop-shadow(0 2px 9px #e7bc7233)}
.marksRedesignR4 .marksEditionOct8 header h3{margin:0 0 7px;font-size:clamp(15px,1.85cqw,23px);line-height:1.3;color:#f0f4f0;letter-spacing:-.015em}
.marksRedesignR4 .marksEditionOct8 header h3 em{font-style:normal;color:#c9ed69;white-space:nowrap}
.marksRedesignR4 .marksEditionOct8.is-pro header h3{color:#f6f2e7}
.marksRedesignR4 .marksEditionOct8.is-pro header h3 em{color:#eec578}
.marksRedesignR4 .marksEditionOct8 header p{font-size:12px;line-height:1.5;color:#d8e1df;margin:0 0 5px}
.marksRedesignR4 .marksEditionOct8 header small{font-size:10px;line-height:1.4;letter-spacing:.06em;color:#aabac0;font-variant-numeric:tabular-nums}
.marksRedesignR4 .marksEditionBodyR4{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(150px,1fr);gap:20px;align-items:center}
.marksRedesignR4 .marksEditionBodyR4 ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.marksRedesignR4 .marksEditionBodyR4 li{display:flex;align-items:flex-start;gap:10px;color:#dce5df;font-size:12px;line-height:1.5}
.marksRedesignR4 .marksEditionBodyR4 li i{font-style:normal;color:#a9cbd9;font-size:14px;flex:none;line-height:1.3}
.marksRedesignR4 .is-pro .marksEditionBodyR4 li i{color:#e3c785}
.marksRedesignR4 .marksEditionActionR4{border-left:1px solid #a7b8ab32;padding-left:20px;display:flex;flex-direction:column;gap:12px;text-align:center;align-items:center}
.marksRedesignR4 .marksEditionActionR4>strong{font-size:18px;line-height:1.3;color:#f8f8ef}
.marksRedesignR4 .marksEditionActionR4 .button{width:100%;min-width:0;font-size:12px!important;padding:11px 12px;min-height:43px}
.marksRedesignR4 .marksEditionPriceR3{display:block;line-height:1.45}
.marksRedesignR4 .marksEditionPriceR3 strong{font-size:24px;color:#faf2dc;white-space:nowrap}
.marksRedesignR4 .marksEditionPriceR3 small{display:block;font-size:11px;color:#edc679;margin-top:3px}
.marksRedesignR4 .marksFreePreviewR4{display:grid;grid-template-columns:90px auto 1fr;align-items:center;gap:12px;margin-top:17px;padding-top:13px;border-top:1px solid #859fa72b}
.marksRedesignR4 .marksFreePreviewR4 .marksPhotoOct8{height:83px;min-height:0;border:0;background:transparent!important;box-shadow:none;padding:0!important;overflow:visible;border-radius:0;width:90px}
.marksRedesignR4 .marksFreePreviewR4 .marksPhotoOct8>img{width:90px;height:83px;object-fit:contain}
.marksRedesignR4 .marksFreePreviewR4 .marksPhotoOct8>span{font-size:11px;right:0;bottom:0}
.marksRedesignR4 .marksFreeModesR2{display:flex;flex-direction:column;gap:6px;justify-content:center;margin:0}
.marksRedesignR4 .marksFreeModesR2 button{font:600 10px/1.3 "Segoe UI",Arial,sans-serif;min-height:26px;min-width:55px;color:#c8d9df;border:1px solid #7893a533;border-radius:5px;background:#0c202799;padding:5px 7px;cursor:pointer}
.marksRedesignR4 .marksFreeModesR2 button[aria-pressed=true]{color:#e3f0cf;border-color:#a8c97370;background:#7896511c}
.marksRedesignR4 .marksFreePreviewR4 p{font-size:11px;line-height:1.6;color:#b7ccc8;margin:0;text-align:right}
.marksRedesignR4 .marksEditionTourLinkR4{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:18px;border-top:1px solid #b294522b;color:#eac988;font-size:12px;font-weight:650;text-decoration:none;min-height:54px}
.marksRedesignR4 .marksEditionTourLinkR4:hover{color:#fff0bc}
.marksRedesignR4 .marksCompareR4{margin:0;background:linear-gradient(125deg,#111e25,#0c171c);border:1px solid #57738445;border-radius:12px;overflow:hidden;box-shadow:inset 0 1px #bce2ee0b}
.marksRedesignR4 .marksCompareR4>summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:23px 25px;cursor:pointer;list-style:none}
.marksRedesignR4 .marksCompareR4>summary::-webkit-details-marker{display:none}
.marksRedesignR4 .marksCompareR4>summary span{display:grid;gap:8px}
.marksRedesignR4 .marksCompareR4>summary strong{font-size:23px;line-height:1.3;color:#f2f5e9}
.marksRedesignR4 .marksCompareR4>summary small{font-size:13px;line-height:1.5;color:#c9d6d4;max-width:900px}
.marksRedesignR4 .marksCompareR4>summary b{font-size:26px;line-height:1;color:#c9debb;transition:transform .2s}
.marksRedesignR4 .marksCompareR4[open]>summary b{transform:rotate(45deg)}
.marksRedesignR4 .marksCompareGridR4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:0 24px 15px}
.marksRedesignR4 .marksCompareGroupR4{min-width:0;padding:19px;border:1px solid #7c9ca330;border-radius:9px;background:linear-gradient(130deg,#061218cc,#12202779),url('/assets/marks-gallery/marks_r4_free_texture.png') center/cover}
.marksRedesignR4 .marksCompareGroupR4:not(:first-child){background:linear-gradient(130deg,#0b1418de,#152023be),url('/assets/marks-gallery/marks_r4_pro_texture.png') center/cover}
.marksRedesignR4 .marksCompareGroupR4 h3{margin:0 0 7px;font-size:17px;line-height:1.35;color:#ead295}
.marksRedesignR4 .marksCompareGroupR4:first-child h3{color:#c3dce5}
.marksRedesignR4 .marksCompareGroupR4>p{margin:0 0 13px;font-size:12px;line-height:1.5;color:#b8cbc7}
.marksRedesignR4 .marksCompareGroupR4 table{width:100%;border-collapse:collapse;table-layout:fixed;background:none}
.marksRedesignR4 .marksCompareGroupR4 thead th{font-size:10px;font-weight:750;letter-spacing:.04em;color:#b8cdc8;border-bottom:1px solid #80989333;padding:9px 4px;background:none}
.marksRedesignR4 .marksCompareGroupR4 th:first-child{width:calc(100% - 100px);text-align:left}
.marksRedesignR4 .marksCompareGroupR4 th:not(:first-child){width:50px;text-align:center}
.marksRedesignR4 .marksCompareGroupR4 td{font-size:15px;text-align:center;color:#c8eab8;font-weight:650;border-bottom:1px solid #7a959b19;padding:10px 4px;background:none}
.marksRedesignR4 .marksCompareGroupR4 tbody th{font-size:12px;line-height:1.45;font-weight:500;color:#d8e3df;border-bottom:1px solid #7a959b19;padding:10px 4px;background:none;overflow-wrap:anywhere}
.marksRedesignR4 .marksCompareGroupR4 td:last-child{color:#ecc87f;background:#d9be6c08}
.marksRedesignR4 .marksCompareGroupR4 tr:last-child :is(th,td){border-bottom:0}
.marksRedesignR4 .marksCompareNoteR4{padding:0 25px 21px;margin:0;font-size:11px;line-height:1.65;color:#b8c7c6}
.marksRedesignR4 .marksCompactDetailsOct8{margin:0;display:block}
.marksRedesignR4 .marksCompactDetailsOct8:empty{display:none}
.marksRedesignR4 .marksCompactDetailsOct8 summary{font-size:14px;color:#edf3e7}
.marksRedesignR4 .marksBuyOct8{margin:0;background:linear-gradient(120deg,#102027e8,#151913d6),url('/assets/marks-gallery/marks_r4_pro_texture.png') center/cover;border-color:#af8b453d;box-shadow:inset 0 1px #eddda414}
.marksRedesignR4 .marksBuyOct8>summary{padding:22px 24px}
.marksRedesignR4 .marksBuyOct8>summary>strong{color:#f5f1df!important;font-size:20px!important}
.marksRedesignR4 .marksCheckout{background:none}
.marksRedesignR4 .marksPlanGridFix4{gap:13px}
.marksRedesignR4 .marksPlanCardFix4{background:#0a151ec9!important;border-color:#63839247!important;border-radius:9px}
.marksRedesignR4 .marksPlanCardFix4.is-active{background:linear-gradient(120deg,#a2792924,#0c1b1bc9)!important;border-color:#d8b97499!important}
.marksRedesignR4 .marksPayProviderFix4,.marksRedesignR4 .marksPayProviderFix4 :is(b,span){font-family:"Segoe UI",Arial,sans-serif!important;font-size:13px!important;font-weight:650!important;letter-spacing:0!important;line-height:1.45!important;text-shadow:none!important;text-transform:none!important;color:#17220d!important}
.marksRedesignR4 .marksPayProviderFix4 b{font-weight:800!important}
.marksRedesignR4 .marksPayProviderFix4 .marksPayLeadV377{font-size:11px!important;opacity:.86}
.marksRedesignR4 .marksOrderCodeR3 strong{font-size:clamp(28px,3.4cqw,40px)!important}
html:has(#fhSharedHeader) .marksPageV363.marksRedesignR2.marksRedesignR4 .marksFooterOct8,.marksRedesignR4 .marksFooterOct8{font-size:11px;line-height:1.6;color:#b8c9c5!important;gap:10px;padding:0 4px}
.marksRedesignR4 :is(button,a,summary):focus-visible{outline:2px solid #e6cc8c!important;outline-offset:4px!important}
.marksNativeStageR4{position:relative!important;display:grid!important;place-items:center;overflow:hidden!important;min-height:400px;background:#09141b!important;border-radius:10px;isolation:isolate}
.marksNativeStageR4 .marksNativeBackdropR4{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;filter:blur(7px) brightness(.55)!important;transform:scale(1.04)!important;opacity:.8}
.marksNativeStageR4 .marksNativeModalForegroundR4{position:relative;z-index:1;display:block;width:min(100%,690px);padding:20px 12px}
.marksNativeStageR4 .marksModalNativeR4{display:block;width:100%;background:none;border:0}
.marksNativeStageR4 .marksModalNativeR4>span{display:none}
.marksNativeStageR4 .marksNativeSvgR4{display:block;width:100%;height:auto;filter:drop-shadow(0 9px 22px #0006)}
.marksNativeStageR4:has(svg[viewBox="0 0 180 166"]) .marksNativeModalForegroundR4{max-width:360px}
@container(max-width:1000px){.marksRedesignR4 .marksHeroMainR3{grid-template-columns:minmax(250px,.8fr) minmax(0,1.2fr);padding:25px 20px 15px;min-height:540px}.marksRedesignR4 .marksHeroR4{min-height:620px}.marksRedesignR4 .marksHeroCaptionR3{min-height:182px}.marksRedesignR4 .marksHeroLeadR4{font-size:13px}}
@media(max-width:1150px){.marksRedesignR4 .marksEditionBodyR4{grid-template-columns:minmax(0,1fr);gap:16px}.marksRedesignR4 .marksEditionActionR4{border-left:0;border-top:1px solid #a7b8ab32;padding:15px 0 0;flex-direction:row;justify-content:space-between}.marksRedesignR4 .marksEditionActionR4 .button{width:auto}.marksRedesignR4 .marksFreePreviewR4{margin-top:15px}}
@media(max-width:850px){.marksRedesignR4 .marksHeroMainR3{grid-template-columns:1fr;gap:17px;padding:25px 20px 20px;min-height:0}.marksRedesignR4 .marksHeroTextR3{max-width:none;padding:0}.marksRedesignR4 #marksHeroTitleR3{font-size:58px!important}.marksRedesignR4 #marksHeroTitleR3 em{display:inline}.marksRedesignR4 .marksHeroLeadR4{max-width:none}.marksRedesignR4 .marksHeroCaptionR3{min-height:0;margin-bottom:16px}.marksRedesignR4 .marksHeroPairR3{max-width:570px}.marksRedesignR4 .marksHeroSceneR3{background-position:50% 65%}.marksRedesignR4 .marksHeroR4::before{background:linear-gradient(180deg,#07151bd9,#07151b55 50%,#07151b7d)}.marksRedesignR4 .marksHeroRibbonR3{gap:7px;margin:10px 12px 14px;padding:7px}.marksRedesignR4 .marksHeroTabsR3{overflow-x:auto;scrollbar-width:thin;flex-wrap:nowrap;gap:5px}.marksRedesignR4 .marksHeroTabsR3 button{min-width:74px;flex:0 0 auto;padding-inline:9px;white-space:nowrap}.marksRedesignR4 .marksHeroPlaybackR3{min-width:34px}.marksRedesignR4 .marksHeroPlaybackR3>span:last-child{display:none}.marksRedesignR4 .marksReleaseR3 summary{grid-template-columns:auto 1fr auto;gap:12px;padding:17px}.marksRedesignR4 .marksReleaseBriefR3{display:none}.marksRedesignR4 .marksReleaseTextR3>strong{font-size:21px!important}.marksRedesignR4 .marksReleaseMoreR3{font-size:11px}.marksRedesignR4 .marksReleaseBadgeR3{font-size:9px}.marksRedesignR4 .marksEditionOct8{padding:19px}.marksRedesignR4 .marksEditionOct8.is-pro{padding:19px}.marksRedesignR4 .marksEditionOct8 header h3{font-size:19px}.marksRedesignR4 .marksCompareGridR4{padding-inline:17px;gap:12px}.marksRedesignR4 .marksCompareGroupR4{padding:14px}.marksRedesignR4 .marksCompareR4>summary{padding:20px 18px}}
@media(max-width:650px){.marksPageV363.marksRedesignR4,html:has(#fhSharedHeader) .marksPageV363.marksRedesignR2.marksRedesignR4{padding:12px!important;gap:17px;border-radius:12px!important}.marksRedesignR4 .marksEditionsOct8,.marksRedesignR4 .marksCompareGridR4{grid-template-columns:1fr}.marksRedesignR4 #marksHeroTitleR3{font-size:45px!important}.marksRedesignR4 #marksHeroTitleR3 em{display:block}.marksRedesignR4 .marksHeroTaglineR3{font-size:21px}.marksRedesignR4 .marksHeroCaptionR3 h2{font-size:21px!important}.marksRedesignR4 .marksHeroCaptionR3 p{font-size:13px}.marksRedesignR4 .marksHeroMainR3{padding:24px 16px 20px}.marksRedesignR4 .marksHeroTextR3{padding:0}.marksRedesignR4 .marksHeroActionsR3 .button{flex:1 1 130px;font-size:12px!important}.marksRedesignR4 .marksPairHintR4{font-size:8px;bottom:-8px}.marksRedesignR4 .marksReleaseBadgeR3{max-width:90px}.marksRedesignR4 .marksReleaseR3 summary{grid-template-columns:1fr auto;gap:13px}.marksRedesignR4 .marksReleaseBadgeR3{grid-column:1/-1;justify-self:start}.marksRedesignR4 .marksReleaseTextR3>strong{font-size:21px!important}.marksRedesignR4 .marksReleaseMoreR3{font-size:11px}.marksRedesignR4 .marksCompareR4>summary strong{font-size:22px}.marksRedesignR4 .marksCompareGroupR4 tbody th{font-size:13px}.marksRedesignR4 .marksCompareGroupR4 th:first-child{width:calc(100% - 80px)}.marksRedesignR4 .marksCompareGroupR4 th:not(:first-child){width:40px}.marksRedesignR4 .marksCompareGroupR4 td{font-size:16px}.marksRedesignR4 .marksFooterOct8{flex-wrap:wrap}.marksNativeStageR4{min-height:220px}.marksNativeStageR4 .marksNativeModalForegroundR4{padding:14px 7px}}
@media(prefers-reduced-motion:reduce){.marksRedesignR4 *,.marksRedesignR4 *::before,.marksRedesignR4 *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Verified against the current shared and legacy styles: explicit resets for card interiors. */
.marksRedesignR4 .marksEditionOct8 header{justify-content:flex-start;text-align:left}
.marksRedesignR4 .marksEditionOct8 header>div{flex:1;min-width:0;text-align:left}
.marksRedesignR4 .marksEditionOct8 header :is(h3,p,small){text-align:left}
.marksRedesignR4 .marksEditionBodyR4 li::before{content:none!important;display:none!important}
.marksRedesignR4 .marksFreePreviewR4 .marksFreeModesR2{position:static!important;inset:auto!important;width:auto!important;padding:0!important;background:none!important;border:0!important;z-index:auto!important}
.marksRedesignR4 .marksReleaseR3::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(154deg,transparent 62%,#e9b85848 62.2%,#f9d68033 62.5%,transparent 63%),radial-gradient(ellipse at 93% 9%,#edc25c2e,transparent 42%);opacity:.75}
.marksRedesignR4 .marksProviders{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;align-items:stretch}
.marksRedesignR4 .marksProviders .button{flex:initial!important;min-height:48px;height:auto!important;width:100%;flex-wrap:wrap}
.marksRedesignR4 .button.primary.marksPayProviderFix4{background:linear-gradient(115deg,#f1d590,#e5b762)!important;color:#231b0c!important;border-color:#dfb86f!important;box-shadow:inset 0 1px #fff4c373,0 5px 18px #bca25b14!important}
.marksNativeStageR4{grid-template-columns:minmax(0,1fr)!important;justify-content:stretch!important}
.marksNativeStageR4 .marksNativeModalForegroundR4{justify-self:center;max-width:100%;width:min(100%,690px)}

/* FERMANI_MARKS_CHECKOUT_R5_20261009 — Marks checkout only. */
.marksRedesignR4 [data-marks-order-result]{scroll-margin-top:130px}