/* Redesign: inner screens (hero select, decks, statistics, rules, legal, waiting room) and the end screen.
   One backdrop — the menu tavern art, blurred and dark — and content in walnut panels with a thin gold rim. */

/* ---------- backdrop ---------- */
#scene::before { content: ''; position: absolute; inset: -30px; z-index: 0; opacity: 0; transition: opacity .4s;
  background: url('../assets/ui/menu_art.webp') 70% center / cover no-repeat; filter: blur(10px) brightness(.42) saturate(.85); }
#app:has(#heroes.active, #picker.active, #builder.active, #stats.active, #rules.active, #legal.active) #scene::before { opacity: 1; }
#app:has(#heroes.active, #picker.active, #builder.active, #stats.active, #rules.active, #legal.active) .scene-slices,
#app:has(#heroes.active, #picker.active, #builder.active, #stats.active, #rules.active, #legal.active) .scene-velvet { opacity: 0; }

/* ---------- content panels ---------- */
.stats-box, .rules-box, .picker-box, .legal-box, .bld { position: relative; margin-top: calc(18px + env(safe-area-inset-top)) !important; margin-bottom: 24px !important; border-radius: 12px;
  padding-left: 26px !important; padding-right: 26px !important;
  background: linear-gradient(rgba(36, 22, 12, .9), rgba(18, 11, 6, .93)); box-shadow: var(--k-rim), 0 24px 60px rgba(0, 0, 0, .6); }
.stats-box h3, .rules-box h3, .legal-box h3, .bld-h3 { font-family: var(--k-font) !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 1.2px; color: var(--k-gold) !important; }
.rules-box, .legal-box { color: #eadcbc; }
@media (max-width: 760px) {
  .stats-box, .rules-box, .picker-box, .legal-box, .bld { margin-left: 8px !important; margin-right: 8px !important; padding-left: 14px !important; padding-right: 14px !important; }
}

/* tables, numbers, tabs */
.st-table { border-collapse: separate; border-spacing: 0; }
.st-table th { font-family: var(--k-font); text-transform: uppercase; letter-spacing: .8px; color: var(--k-gold) !important; border-bottom: 1px solid rgba(232, 184, 90, .45) !important; }
.st-table td { border-bottom: 1px solid rgba(232, 184, 90, .12) !important; }
.st-table tr:hover td { background: rgba(232, 184, 90, .06); }
.kpi { border-radius: 9px !important; border: none !important; background: linear-gradient(rgba(60, 36, 18, .8), rgba(26, 15, 8, .9)) !important;
  box-shadow: inset 0 0 0 1px rgba(232, 184, 90, .55), inset 0 0 0 3px #160c06, 0 6px 14px rgba(0, 0, 0, .45) !important; }
.kpi b { color: var(--k-gold-hi) !important; font-family: var(--k-font); }
.kpi.win b { color: #9fe8ae !important; } .kpi.loss b { color: #ff9a84 !important; }
.st-tabs .btn.primary, .bld-tabs .btn.primary { animation: none; }
.pf-acc, .pf-daily, .menu-daily { border: none !important; box-shadow: inset 0 0 0 1px rgba(232, 184, 90, .5), inset 0 0 0 3px #160c06 !important; background: rgba(20, 12, 6, .7) !important; }
.pf-ava { box-shadow: 0 0 0 2px #160c06, 0 0 0 4px var(--k-gold), 0 10px 20px rgba(0, 0, 0, .6) !important; }

/* ---------- hero select ---------- */
.hs-title, .hero-select h2 { font-family: var(--k-font) !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 2px; color: var(--k-gold-hi) !important; text-shadow: 0 3px 0 rgba(0, 0, 0, .6) !important; }
.hs-step, .hs-step.s1 { border-radius: 20px !important; background: linear-gradient(rgba(255, 255, 255, .14), rgba(0, 0, 0, .25)), var(--k-red) !important;
  box-shadow: inset 0 0 0 1.5px var(--k-gold), inset 0 0 0 3.5px #160c06 !important; }
.hs-main { border-radius: 14px; padding: 18px 22px; background: linear-gradient(rgba(36, 22, 12, .85), rgba(18, 11, 6, .9)); box-shadow: var(--k-rim), 0 24px 60px rgba(0, 0, 0, .55); }
.hs-portrait.art { border-radius: 12px !important; box-shadow: 0 0 0 2px #160c06, 0 0 0 4px var(--k-gold), 0 24px 50px rgba(0, 0, 0, .7) !important; }
.hs-port-name { background: linear-gradient(rgba(255, 255, 255, .13), rgba(0, 0, 0, .22)), var(--k-red) !important; box-shadow: inset 0 0 0 1.5px var(--k-gold), 0 0 0 3px #160c06 !important; }
.hs-medal .m { box-shadow: 0 0 0 2px #160c06, 0 0 0 3.5px rgba(232, 184, 90, .7), 0 6px 14px rgba(0, 0, 0, .6) !important; border: none !important; }
.hs-medal.on .m, .hs-medal.sel .m, .hs-medal[aria-pressed="true"] .m { box-shadow: 0 0 0 2px #160c06, 0 0 0 4px var(--k-gold-hi), 0 0 22px rgba(255, 215, 120, .6) !important; }
.hs-go { font-family: var(--k-font) !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 2px; color: #3a1206 !important; border: none !important; border-radius: 8px !important;
  background: linear-gradient(#fff0b0, #f0c25e 45%, #c98a2a 55%, #e9b24e) !important;
  box-shadow: inset 0 0 0 1.5px #fff6d0, inset 0 0 0 4px #9a611c, inset 0 0 0 5px #ffe39a, 0 0 26px rgba(240, 190, 90, .45), 0 8px 20px rgba(0, 0, 0, .6) !important; animation: plq-glow 2.6s ease-in-out infinite !important; }

/* ---------- decks ---------- */
.bld-tile, .bcard2 { border-radius: 10px !important; box-shadow: inset 0 0 0 1px rgba(232, 184, 90, .5), inset 0 0 0 3px #160c06, 0 8px 18px rgba(0, 0, 0, .5) !important; border: none !important; }
.bld-tile:hover, .bcard2:hover { box-shadow: inset 0 0 0 1.5px var(--k-gold-hi), inset 0 0 0 3px #160c06, 0 0 20px rgba(232, 184, 90, .35), 0 8px 18px rgba(0, 0, 0, .5) !important; }
.bld-title { font-family: var(--k-font) !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 2px; color: var(--k-gold-hi) !important; }

/* ---------- end screen ---------- */
.over2 .ov-title { font-family: var(--k-font) !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 4px; }
.over2 .ov-port, .over2 .ov-pic { box-shadow: 0 0 0 2px #160c06, 0 0 0 4px var(--k-gold), 0 16px 34px rgba(0, 0, 0, .7) !important; border: none !important; }

/* ---------- phone: the round plate in the game ---------- */
#stage.port .round-box .phases { grid-template-columns: 1fr !important; gap: 2px; }
#stage.port .round-box .ph { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; padding: 1px 4px; }

/* ---------- hero select, wide: the Leader's painting fills the left of the panel and fades into the text (champion-select look) ---------- */
@media (min-width: 761px) {
  .hero-select .hs-main { position: relative; overflow: hidden; display: block; min-height: min(56vh, 540px); padding: 34px 40px 30px 0; }
  .hero-select .hs-portrait.art { position: absolute !important; left: 0; top: 0; bottom: 0; width: 64% !important; height: auto !important; margin: 0 !important; aspect-ratio: auto;
    border-radius: 0 !important; box-shadow: none !important; background-size: cover !important; animation: hs-pan 14s ease-in-out infinite alternate;
    -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 98%); mask-image: linear-gradient(90deg, #000 55%, transparent 98%); }
  .hero-select .hs-portrait.art::after { display: none; }
  .hero-select .hs-port-name { display: none; }
  .hero-select .hs-info { position: relative; z-index: 1; margin-left: 52%; padding: 18px 0 18px 26px; }
  .hero-select .hs-info::before { content: ''; position: absolute; inset: -60px -40px -60px -60px; z-index: -1; background: radial-gradient(ellipse at 60% 50%, rgba(18, 11, 6, .82), rgba(18, 11, 6, 0) 75%); }
  .hero-select .hs-name { font-size: clamp(30px, 3.2vw, 46px) !important; text-shadow: 0 3px 0 rgba(0, 0, 0, .7), 0 0 24px rgba(0, 0, 0, .8); }
}
@keyframes hs-pan { from { transform: scale(1.02); } to { transform: scale(1.08) translateX(-1%); } }

/* ---------- splash: the tavern painting behind the logo, slowly breathing ---------- */
#app:has(#splash.active) #scene::before { opacity: 1; filter: blur(3px) brightness(.5) saturate(.95); animation: splash-pan 22s ease-in-out infinite alternate; }
#app:has(#splash.active) .scene-slices, #app:has(#splash.active) .scene-velvet { opacity: 0; }
@keyframes splash-pan { from { transform: scale(1.02); } to { transform: scale(1.09) translate(-1.2%, -0.6%); } }
#splash .fan-logo-img img { width: min(620px, 84vw); max-height: 30vh; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .9)) drop-shadow(0 0 40px rgba(255, 190, 90, .25)); }
#splash .press { font-family: var(--k-font) !important; font-weight: 800; text-transform: uppercase; letter-spacing: 3px; color: var(--k-gold-hi) !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .8), 0 0 18px rgba(255, 190, 90, .5); animation: splash-press 2.2s ease-in-out infinite; }
@keyframes splash-press { 50% { opacity: .55; } }

/* ---------- round Leader portraits: square face crops (assets/leaders/face), so just fill the circle ---------- */
.hs-medal .m.la, .hs-chosen i.la, .hs-picked-in i.la, .pf-ava, .tour-players i, .mv-ava, .vs-hero.art, .over3 .ov-port,
.card.leader.art .face { background-size: cover !important; background-position: 50% 45% !important; }

/* ---------- end screen in the kit: the title on the painted ribbon, one big gold «Реванш», the rest walnut with a gold rim ---------- */
.over3 .ov-title { position: relative; display: inline-block; padding: .38em 1.6em .5em; letter-spacing: 5px !important; color: #fff3cf !important;
  background: url('../assets/ui/fx_banner.webp') center / 100% 100% no-repeat; text-shadow: 0 3px 0 rgba(60, 10, 4, .9), 0 0 24px rgba(255, 190, 90, .45) !important;
  animation: ov-title-in .7s cubic-bezier(.2, .8, .3, 1) both; }
.over3.lose .ov-title { filter: saturate(.35) brightness(.8); color: #e6dccb !important; }
@keyframes ov-title-in { from { transform: scale(1.6); opacity: 0; } 60% { transform: scale(.95); opacity: 1; } to { transform: scale(1); } }
.over3 .ov-vsword { font-size: 0 !important; height: clamp(60px, 7vw, 100px); margin: 4px auto !important; aspect-ratio: 1.4; background: url('../assets/ui/fx_vs.webp') center / contain no-repeat; opacity: .9; }
.over3 .ov-plate, .over3 .ov-fighter.op .ov-plate { background: linear-gradient(rgba(255, 255, 255, .12), rgba(0, 0, 0, .3)), var(--k-red) !important; box-shadow: inset 0 0 0 1.5px var(--k-gold), inset 0 0 0 3.5px #160c06, 0 8px 18px rgba(0, 0, 0, .6) !important; border: none !important; }
.over3 .ov-fighter.op .ov-plate { background: linear-gradient(rgba(255, 255, 255, .1), rgba(0, 0, 0, .3)), url('../assets/tex/walnut.webp') center / 360px, var(--k-wood-2) !important; }
.over3 .ov-crown { font-family: var(--k-font) !important; color: #3a1206 !important; background: linear-gradient(#fff0b0, #f0c25e 45%, #c98a2a 55%, #e9b24e) !important; box-shadow: inset 0 0 0 1px #fff6d0, 0 0 0 2px #160c06, 0 0 18px rgba(255, 200, 90, .55) !important; border: none !important; }
.over3 .ov-btns { gap: 10px 12px !important; max-width: 820px; margin: 0 auto 12px !important; }
.over3 .ov-btn { border: none !important; border-radius: 8px !important; padding: 10px 20px !important; font: 800 17px var(--k-font) !important; letter-spacing: .8px; text-transform: uppercase; color: var(--k-cream) !important;
  background: linear-gradient(rgba(255, 220, 160, .1), rgba(0, 0, 0, .35)), url('../assets/tex/walnut.webp') center / 360px, var(--k-wood-2) !important;
  box-shadow: inset 0 0 0 1.5px var(--k-gold), inset 0 0 0 3.5px #160c06, 0 6px 14px rgba(0, 0, 0, .55) !important; transition: transform .12s, filter .15s, box-shadow .15s; }
.over3 .ov-btn:hover { transform: translateY(-2px); filter: brightness(1.15); box-shadow: inset 0 0 0 1.5px var(--k-gold-hi), inset 0 0 0 3.5px #160c06, 0 0 20px rgba(232, 184, 90, .4), 0 8px 16px rgba(0, 0, 0, .6) !important; }
.over3 .ov-btn.gold { order: -1; flex-basis: 100%; max-width: 360px; margin: 0 calc(50% - 180px) 4px; padding: 15px 30px !important; font-size: 24px !important; letter-spacing: 3px; color: #3a1206 !important;
  text-shadow: 0 1px 0 rgba(255, 240, 200, .5); background: linear-gradient(#fff0b0, #f0c25e 45%, #c98a2a 55%, #e9b24e) !important;
  box-shadow: inset 0 0 0 1.5px #fff6d0, inset 0 0 0 4px #9a611c, inset 0 0 0 5px #ffe39a, 0 0 26px rgba(240, 190, 90, .5), 0 8px 20px rgba(0, 0, 0, .6) !important; animation: plq-glow 2.6s ease-in-out infinite; }
.over3 .ov-buy { color: rgba(232, 200, 140, .75) !important; }
@media (max-width: 760px) { .over3 .ov-btn.gold { max-width: 260px; margin: 0 calc(50% - 130px) 4px; font-size: 20px !important; } .over3 .ov-btn { font-size: 14px !important; padding: 9px 12px !important; } }

/* ---------- end screen v4: painted crest, round medallions, gold plaque «Реванш», round icon buttons ---------- */
.over4 { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 1.4vh, 16px); padding: 2vh 2vw; overflow-y: auto;
  background: radial-gradient(ellipse at 50% 35%, rgba(60, 30, 10, .55), rgba(6, 3, 2, .94) 70%) !important; }
.over4.lose { background: radial-gradient(ellipse at 50% 35%, rgba(20, 28, 40, .6), rgba(4, 5, 8, .95) 70%) !important; }
.ov4-rays { position: absolute; left: 50%; top: 28%; width: 160vmax; height: 160vmax; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; opacity: .5;
  background: repeating-conic-gradient(from 0deg, rgba(255, 210, 120, .16) 0 6deg, transparent 6deg 18deg); -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 45%); mask-image: radial-gradient(circle, #000 8%, transparent 45%);
  animation: ov4-spin 60s linear infinite; }
.over4.lose .ov4-rays { opacity: .18; filter: grayscale(1); }
@keyframes ov4-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ov4-top, .ov4-duel, .ov4-bottom { position: relative; z-index: 1; }
.ov4-top { display: flex; flex-direction: column; align-items: center; }
.ov4-crest { position: relative; width: min(560px, 80vw); animation: ov4-crest-in .8s cubic-bezier(.2, .8, .3, 1) both; }
.ov4-crest img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .8)); }
.over4.win .ov4-crest img { filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .8)) drop-shadow(0 0 40px rgba(255, 200, 90, .45)); }
.ov4-title { position: absolute; left: 22%; right: 22%; top: 37%; height: 30%; display: grid; place-items: center; white-space: nowrap;
  font: 800 clamp(26px, 4.4vw, 52px)/1 var(--k-font); letter-spacing: .06em; text-transform: uppercase; color: #fff3cf;
  text-shadow: 0 3px 0 rgba(60, 10, 4, .95), 0 0 20px rgba(255, 190, 90, .55); }
.over4.lose .ov4-title { top: 33%; color: #d8dde6; text-shadow: 0 3px 0 rgba(0, 0, 0, .9), 0 0 18px rgba(140, 170, 210, .4); font-size: clamp(24px, 4.4vw, 52px); }
@keyframes ov4-crest-in { from { transform: scale(1.7); opacity: 0; } 60% { transform: scale(.96); opacity: 1; } to { transform: scale(1); } }
.ov4-sub { margin-top: -4px; font: 700 clamp(15px, 1.6vw, 20px) var(--k-font); color: #e8cf98; text-shadow: 0 2px 0 rgba(0, 0, 0, .7); }
.ov4-duel { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 40px); }
.ov4-fighter { position: relative; display: flex; flex-direction: column; align-items: center; animation: ov4-in .7s .2s cubic-bezier(.2, .8, .3, 1) both; }
.ov4-port { width: clamp(110px, 15vw, 190px); aspect-ratio: 1; border-radius: 50%; background: #2a1c12 center 40% / cover;
  box-shadow: 0 0 0 3px #160c06, 0 0 0 7px #e8b85a, 0 0 0 9px #160c06, 0 18px 40px rgba(0, 0, 0, .75); }
.ov4-fighter.won .ov4-port { width: clamp(140px, 19vw, 240px); box-shadow: 0 0 0 3px #160c06, 0 0 0 8px #ffd770, 0 0 0 10px #160c06, 0 0 60px rgba(255, 205, 100, .7), 0 18px 40px rgba(0, 0, 0, .75); }
.ov4-fighter.lost .ov4-port { filter: grayscale(.85) brightness(.55); }
.ov4-glow { position: absolute; left: 50%; top: 40%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255, 210, 110, .5), transparent 65%); animation: ov4-pulse 2.4s ease-in-out infinite; }
@keyframes ov4-pulse { 50% { opacity: .55; transform: translate(-50%, -50%) scale(1.08); } }
.ov4-crown { position: absolute; top: -12px; padding: 3px 14px; border-radius: 5px; font: 800 14px var(--k-font); letter-spacing: 1px; text-transform: uppercase; color: #3a1206;
  background: linear-gradient(#fff0b0, #f0c25e 45%, #c98a2a 55%, #e9b24e); box-shadow: inset 0 0 0 1px #fff6d0, 0 0 0 2px #160c06, 0 0 18px rgba(255, 200, 90, .6); }
.ov4-plate { margin-top: -14px; min-width: 150px; padding: 7px 18px 6px; border-radius: 8px; text-align: center; position: relative;
  background: linear-gradient(rgba(255, 255, 255, .12), rgba(0, 0, 0, .3)), url('../assets/tex/walnut.webp') center / 360px, var(--k-wood-2); box-shadow: inset 0 0 0 1.5px var(--k-gold), inset 0 0 0 3.5px #160c06, 0 8px 18px rgba(0, 0, 0, .6); }
.ov4-fighter.won .ov4-plate { background: linear-gradient(rgba(255, 255, 255, .14), rgba(0, 0, 0, .3)), var(--k-red); }
.ov4-plate b { display: block; font: 800 clamp(16px, 1.8vw, 22px) var(--k-font); text-transform: uppercase; color: #fff4d8; }
.ov4-plate small { font: 600 13px var(--k-font); color: #e8d6ae; }
.ov4-hp { position: absolute; right: 2%; top: 52%; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 900 20px var(--k-font); color: #fff;
  background: radial-gradient(circle at 35% 30%, #ff9a8a, #d0322a 50%, #7a1410); box-shadow: 0 0 0 2px #160c06, 0 0 0 4px #e8b85a, 0 6px 12px rgba(0, 0, 0, .6); text-shadow: 0 2px 0 #3a0a06; }
.ov4-vs img { width: clamp(60px, 8vw, 110px); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .8)); opacity: .9; }
@keyframes ov4-in { from { transform: translateY(30px); opacity: 0; } }
.ov4-bottom { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.4vh, 14px); width: min(760px, 94vw); }
.ov4-bottom .ov-rank { width: 100%; }
.ov4-play { position: relative; width: min(360px, 76vw); aspect-ratio: 3.09; border: none; cursor: pointer; background: url('../assets/ui/btn_gold.webp') center / 100% 100% no-repeat; padding: 0;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .65)) drop-shadow(0 0 18px rgba(255, 200, 90, .35)); transition: transform .12s, filter .15s; animation: ov4-play-glow 2.4s ease-in-out infinite; }
.ov4-play span { position: absolute; inset: 0 14%; display: grid; place-items: center; font: 900 clamp(22px, 2.6vw, 32px) var(--k-font); letter-spacing: .16em; text-transform: uppercase; color: #4a1a04; text-shadow: 0 1px 0 rgba(255, 245, 210, .7); }
.ov4-play:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.1) drop-shadow(0 10px 20px rgba(0, 0, 0, .65)) drop-shadow(0 0 30px rgba(255, 210, 110, .65)); }
@keyframes ov4-play-glow { 50% { filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .65)) drop-shadow(0 0 32px rgba(255, 210, 110, .7)); } }
.ov4-icons { display: flex; justify-content: center; gap: clamp(10px, 2.4vw, 26px); flex-wrap: wrap; }
.ov4-ib { display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 0; }
.ov4-ib-c { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #ffe39a;
  background: radial-gradient(circle at 50% 35%, #4a2c16, #1e120a 75%); box-shadow: inset 0 0 0 2px #e8b85a, inset 0 0 0 4px #160c06, inset 0 0 0 5px rgba(232, 184, 90, .5), 0 6px 14px rgba(0, 0, 0, .65); transition: transform .12s, box-shadow .15s, color .15s; }
.ov4-ib-c svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .7)); }
.ov4-ib-l { font: 700 13px var(--k-font); letter-spacing: .5px; text-transform: uppercase; color: #e8d6ae; text-shadow: 0 1px 0 rgba(0, 0, 0, .8); }
.ov4-ib:hover .ov4-ib-c { transform: translateY(-3px); color: #fff6d0; box-shadow: inset 0 0 0 2px #fff0b0, inset 0 0 0 4px #160c06, inset 0 0 0 5px rgba(255, 230, 160, .7), 0 0 22px rgba(255, 210, 110, .55), 0 8px 16px rgba(0, 0, 0, .65); }
.over4 .ov-buy { position: relative; z-index: 1; font-size: 13px; }
@media (max-height: 760px) { .ov4-crest { width: min(420px, 70vw); } .ov4-port { width: 100px; } .ov4-fighter.won .ov4-port { width: 130px; } }
/* end screen v4: fit any window height (sizes follow vh; top never cut), darker backdrop, health gem on the portrait */
.over4 { justify-content: safe center !important; gap: clamp(4px, 1.1vh, 14px) !important;
  background: radial-gradient(ellipse at 50% 35%, rgba(50, 24, 8, .86), rgba(6, 3, 2, .97) 72%) !important; }
.over4.lose { background: radial-gradient(ellipse at 50% 35%, rgba(18, 24, 34, .88), rgba(4, 5, 8, .97) 72%) !important; }
.ov4-crest { width: min(560px, 80vw, 34vh * 1.63) !important; flex: none; }
.ov4-port { width: clamp(84px, 14vw, 17vh) !important; }
.ov4-fighter.won .ov4-port { width: clamp(104px, 18vw, 22vh) !important; }
.ov4-hp { top: 0 !important; right: -6px !important; width: 40px; height: 40px; font-size: 18px; }
.ov4-play { width: min(340px, 72vw, 11vh * 3.09) !important; flex: none; }
.ov4-ib-c { width: clamp(44px, 6.4vh, 58px); height: clamp(44px, 6.4vh, 58px); }
.over4 .ov-medals { margin: 0 !important; }
.over4 .ov-rank-in { padding: 6px 12px !important; }
@media (max-height: 960px) { .ov4-crest { width: min(560px, 80vw, 25vh * 1.63) !important; } .over4 .ov-buy { display: none; } .ov4-port { width: clamp(76px, 12vw, 14vh) !important; } .ov4-fighter.won .ov4-port { width: clamp(92px, 15vw, 18vh) !important; }
  .over4 .ov-medal .medal { --m: 44px !important; } .ov4-ib-l { font-size: 11px; } }

/* end screen v4.1: the two Leaders' paintings fill the left and right halves (the opponent mirrored, both facing the middle);
   the winner bright, the loser grey; the round medallions give way to the name plates */
.ov4-side { position: absolute; top: 0; bottom: 0; width: 54vw; z-index: 0; background-size: cover; background-repeat: no-repeat; pointer-events: none; }
.ov4-side.me { left: 0; background-position: 30% 22%; -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 98%); mask-image: linear-gradient(90deg, #000 45%, transparent 98%); animation: ov4-side-l 1s cubic-bezier(.2, .8, .3, 1) both; }
.ov4-side.op { right: 0; transform: scaleX(-1); background-position: 30% 22%; -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 98%); mask-image: linear-gradient(90deg, #000 45%, transparent 98%); animation: ov4-side-r 1s cubic-bezier(.2, .8, .3, 1) both; }
.ov4-side.won { filter: brightness(.95) saturate(1.05); }
.ov4-side.lost { filter: grayscale(.9) brightness(.38); }
.ov4-side::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(8, 4, 2, .85)); }
@keyframes ov4-side-l { from { opacity: 0; transform: translateX(-8vw); } }
@keyframes ov4-side-r { from { opacity: 0; transform: scaleX(-1) translateX(-8vw); } }
.over4 { background: radial-gradient(ellipse at 50% 40%, rgba(30, 14, 6, .7), rgba(6, 3, 2, .96) 75%) !important; }
.over4.lose { background: radial-gradient(ellipse at 50% 40%, rgba(14, 18, 26, .72), rgba(4, 5, 8, .96) 75%) !important; }
/* the middle column sits on a soft dark pool so the text stays readable over the paintings */
.ov4-top::before, .ov4-bottom::before { content: ''; position: absolute; inset: -20px -60px; z-index: -1; background: radial-gradient(ellipse, rgba(8, 4, 2, .55), transparent 70%); }
.ov4-port, .ov4-glow { display: none !important; }
.ov4-duel { gap: clamp(16px, 6vw, 120px) !important; margin-top: 2vh; }
.ov4-plate { margin-top: 0 !important; min-width: clamp(170px, 18vw, 260px); padding: 9px 22px 8px !important; }
.ov4-plate b { font-size: clamp(18px, 2.2vw, 28px) !important; }
.ov4-fighter.won .ov4-plate { box-shadow: inset 0 0 0 1.5px #ffe39a, inset 0 0 0 3.5px #160c06, 0 0 30px rgba(255, 205, 100, .55), 0 8px 18px rgba(0, 0, 0, .6) !important; }
.ov4-fighter.lost .ov4-plate { filter: saturate(.4) brightness(.8); }
.ov4-crown { top: -16px !important; }
.ov4-hp { top: -14px !important; right: -16px !important; }
.ov4-vs img { width: clamp(56px, 6vw, 90px) !important; }
@media (max-width: 760px) {
  .ov4-side { width: 100vw; height: 50vh; }
  .ov4-side.me { top: auto; bottom: 0; background-position: 30% 25%; -webkit-mask-image: linear-gradient(0deg, #000 40%, transparent 95%); mask-image: linear-gradient(0deg, #000 40%, transparent 95%); animation: none; }
  .ov4-side.op { bottom: auto; top: 0; transform: none; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 95%); mask-image: linear-gradient(180deg, #000 40%, transparent 95%); animation: none; }
}
@media (max-width: 760px) {
  .ov4-duel { gap: 6px !important; width: 100%; padding: 0 8px; box-sizing: border-box; }
  .ov4-fighter { flex: 1 1 0; min-width: 0; }
  .ov4-plate { min-width: 0 !important; width: 100%; padding: 7px 8px 6px !important; box-sizing: border-box; }
  .ov4-plate b { font-size: 16px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ov4-plate small { font-size: 11px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ov4-hp { width: 32px; height: 32px; font-size: 15px; right: -6px !important; top: -12px !important; }
  .ov4-vs img { width: 44px !important; }
}
/* Profile: avatar and card back */
.pf-looks h3 { margin: 18px 0 8px; }
.lk-avas { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.lk-ava { aspect-ratio: 1; border: none; border-radius: 50%; cursor: pointer; background: center / cover no-repeat, #2a1a0d; box-shadow: 0 0 0 2px #160c06, 0 0 0 3.5px rgba(217, 196, 138, .55); transition: transform .12s, box-shadow .12s; }
.lk-ava:hover { transform: scale(1.08); }
.lk-ava.on { box-shadow: 0 0 0 2px #160c06, 0 0 0 5px #f2cd6b, 0 0 18px rgba(255, 210, 110, .8); }
.lk-backs { display: flex; flex-wrap: wrap; gap: 14px; }
.lk-back { border: none; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #e7d6ae; font: 700 14px var(--k-font); }
.lk-back i { display: block; width: 92px; aspect-ratio: .714; border-radius: 9px; background: center / cover no-repeat; box-shadow: 0 6px 12px rgba(0, 0, 0, .55); transition: transform .12s, box-shadow .12s; }
.lk-back:hover i { transform: translateY(-3px); }
.lk-back.on i { box-shadow: 0 0 0 3px #160c06, 0 0 0 6px #f2cd6b, 0 0 22px rgba(255, 210, 110, .8); }
.lk-back.on span { color: #fff3cf; }
.lk-note { color: #b9a67f; font-size: 14px; margin: 10px 0 0; }
/* Hero select: «Назад / В бой» always in sight at the bottom, the page scrolls under it */
#heroes .hs-bar { position: sticky !important; bottom: 0; z-index: 6; margin: 10px -16px 0 !important; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)) !important;
  background: linear-gradient(rgba(8, 4, 2, 0), rgba(8, 4, 2, .92) 35%, rgba(8, 4, 2, .97)) !important; }