/* ========================================================================
   BOMBARERA V89 — SURVIVAL / CLEAN CINEMATIC LANDING
   Readability-first redesign. One hero, one CTA, compact transparent fighter.
   ======================================================================== */

#screenSurvival{
  --sv89-pink:#ff4f87;
  --sv89-orange:#ff9252;
  --sv89-violet:#b15cff;
  --sv89-cyan:#63e7ff;
  --sv89-gold:#ffd76b;
  --sv89-text:#f7f9ff;
  --sv89-muted:#c2cee0;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 12% 12%,rgba(255,68,111,.08),transparent 31%),
    radial-gradient(circle at 88% 18%,rgba(121,87,255,.10),transparent 35%),
    linear-gradient(180deg,#07111f,#050d18 72%)!important;
}

/* compact section bar, but never micro-sized */
#screenSurvival .survival-v89__header{
  box-sizing:border-box!important;
  width:100%!important;
  min-height:58px!important;
  height:58px!important;
  flex:0 0 58px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
  margin:0 0 10px!important;
  padding:7px 18px!important;
  overflow:hidden!important;
  background:linear-gradient(90deg,rgba(10,31,52,.98),rgba(8,23,43,.98) 55%,rgba(22,18,53,.98))!important;
  border-bottom:1px solid rgba(98,214,255,.15)!important;
}
#screenSurvival .survival-v89__header .campaign-header__spacer{display:none!important}
#screenSurvival .survival-v89__back{
  min-width:94px!important;height:40px!important;min-height:40px!important;
  padding:0 13px!important;border-radius:11px!important;font-size:13px!important;
}
#screenSurvival .survival-v89__identity{justify-self:start!important;display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important}
#screenSurvival .survival-v89__section-icon,
#screenSurvival .survival-v89__section-icon.ui-icon{
  width:40px!important;height:40px!important;min-width:40px!important;flex:0 0 40px!important;
  padding:9px!important;border-radius:12px!important;color:#ff688d!important;
  background:linear-gradient(145deg,rgba(255,77,126,.22),rgba(148,83,255,.16))!important;
  border:1px solid rgba(255,105,151,.28)!important;
}
#screenSurvival .survival-v89__section-copy{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important}
#screenSurvival .survival-v89__section-copy .campaign-header__title{font-size:17px!important;line-height:1!important;letter-spacing:.01em!important}
#screenSurvival .survival-v89__section-copy .mode-header__meta{
  padding:0!important;border:0!important;background:none!important;
  color:#75ddff!important;font-size:11px!important;line-height:1.15!important;letter-spacing:.045em!important;
}
#screenSurvival .survival-v89__header-status{
  justify-self:end!important;display:flex!important;align-items:center!important;gap:8px!important;
  min-height:38px!important;padding:6px 11px!important;border-radius:11px!important;
  background:rgba(5,17,31,.56)!important;border:1px solid rgba(117,205,255,.16)!important;
}
#screenSurvival .survival-v89__header-status small{display:block;color:#8fa4bf;font-size:10px!important;line-height:1!important;letter-spacing:.08em!important}
#screenSurvival .survival-v89__header-status strong{display:block;margin-top:2px;color:#fff;font-size:12px!important;line-height:1!important;letter-spacing:.05em!important}
#screenSurvival .survival-v89__header-pulse{width:8px;height:8px;border-radius:50%;background:var(--sv89-pink);box-shadow:0 0 0 5px rgba(255,79,135,.10),0 0 18px rgba(255,79,135,.55)}

/* landing shell */
#screenSurvival .survival-content.survival-v89{
  box-sizing:border-box!important;
  flex:1 1 auto!important;
  width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;
  margin:0!important;padding:0 16px 10px!important;overflow:hidden!important;
}
#screenSurvival .survival-content.survival-v89 .survival-start{
  width:100%!important;max-width:none!important;height:100%!important;min-height:0!important;
  margin:0!important;padding:0!important;overflow:hidden!important;
}
#screenSurvival .survival-v89__shell{width:min(1600px,100%)!important;height:100%!important;min-height:0!important;margin:0 auto!important}

/* One composition instead of stacked strips/cards. */
#screenSurvival .survival-v89__hero{
  position:relative;
  box-sizing:border-box;
  width:100%;height:100%;min-height:470px;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(210px,20vw,300px);
  align-items:stretch;
  overflow:hidden;
  isolation:isolate;
  border-radius:25px;
  border:1px solid rgba(112,207,255,.22);
  background:#071525;
  box-shadow:0 24px 58px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.06);
}
#screenSurvival .survival-v89__hero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,13,24,.98) 0%,rgba(6,16,30,.93) 42%,rgba(8,18,34,.62) 67%,rgba(7,14,27,.46) 100%),
    linear-gradient(180deg,rgba(5,12,23,.04),rgba(5,12,23,.56));
}
#screenSurvival .survival-v89__hero::after{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:5;
  background:linear-gradient(90deg,var(--sv89-pink),var(--sv89-orange),var(--sv89-violet),var(--sv89-cyan));
  box-shadow:0 0 24px rgba(255,80,139,.34);
}
#screenSurvival .survival-v89__hero-art{
  position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:url('/assets/menu/generated/survival-card-bg-v14.webp') center 44% / cover no-repeat;
  filter:saturate(1.12) contrast(1.04);
  transform:scale(1.01);
}
#screenSurvival .survival-v89__hero-glow{
  position:absolute;left:-90px;bottom:-150px;width:460px;height:390px;z-index:-1;pointer-events:none;
  border-radius:50%;background:rgba(255,62,115,.12);filter:blur(70px);
}

#screenSurvival .survival-v89__copy{
  align-self:center;
  min-width:0;
  padding:clamp(34px,5vh,66px) 24px clamp(32px,5vh,62px) clamp(34px,4vw,66px);
  position:relative;z-index:2;
}
#screenSurvival .survival-v89__eyebrow{
  width:max-content;max-width:100%;display:inline-flex;align-items:center;gap:8px;
  min-height:32px;padding:6px 12px;border-radius:999px;
  color:#ffeaf1;background:linear-gradient(90deg,rgba(255,69,116,.17),rgba(173,83,255,.10));
  border:1px solid rgba(255,101,145,.28);
  font-size:12px!important;font-weight:900;letter-spacing:.075em;
}
#screenSurvival .survival-v89__eyebrow .ui-icon{width:16px;height:16px;color:#ff718f}
#screenSurvival .survival-v89__title{
  max-width:850px;margin:18px 0 14px!important;
  color:#fff!important;font-size:clamp(2.75rem,3.75vw,4.25rem)!important;line-height:.98!important;
  letter-spacing:-.035em!important;font-weight:900!important;text-wrap:balance;
  text-shadow:0 5px 30px rgba(0,0,0,.32)!important;
}
#screenSurvival .survival-v89__title span{
  color:transparent;background:linear-gradient(90deg,#ff6386 0%,#ff9b57 42%,#ff5fc9 72%,#a87aff 100%);
  -webkit-background-clip:text;background-clip:text;
}
#screenSurvival .survival-v89__lead{
  max-width:790px;margin:0!important;color:var(--sv89-muted)!important;
  font-size:clamp(15px,1.02vw,17px)!important;line-height:1.58!important;font-weight:550!important;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}
#screenSurvival .survival-v89__lead strong{color:#fff;font-weight:750}
#screenSurvival .survival-v89__lead .is-pink{color:#ff86a7}
#screenSurvival .survival-v89__lead .is-cyan{color:#84eaff}
#screenSurvival .survival-v89__lead .is-gold{color:#ffe08b}

#screenSurvival .survival-v89__features{
  display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;
}
#screenSurvival .survival-v89__feature{
  display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:7px 11px;border-radius:11px;
  color:#e7eef9;background:rgba(5,16,30,.58);border:1px solid rgba(126,205,255,.14);backdrop-filter:blur(8px);
  font-size:12px;font-weight:800;white-space:nowrap;
}
#screenSurvival .survival-v89__feature .ui-icon{width:17px;height:17px;color:var(--sv89-cyan)}
#screenSurvival .survival-v89__feature:nth-child(2) .ui-icon{color:#c17bff}
#screenSurvival .survival-v89__feature:nth-child(3) .ui-icon{color:var(--sv89-gold)}

#screenSurvival .survival-v89__actions{
  display:grid!important;grid-template-columns:minmax(280px,390px) 170px!important;align-items:stretch!important;
  gap:10px!important;max-width:570px!important;margin-top:24px!important;
}
#screenSurvival .survival-v89__start{
  min-height:62px!important;height:62px!important;display:grid!important;
  grid-template-columns:24px minmax(0,1fr) 20px!important;align-items:center!important;gap:10px!important;
  padding:9px 15px!important;border-radius:16px!important;text-align:left!important;color:#fff!important;
  border:1px solid rgba(255,155,182,.34)!important;
  background:linear-gradient(110deg,#ff3d69,#ff4d83 46%,#b854e8 100%)!important;
  box-shadow:0 14px 32px rgba(255,48,105,.24),inset 0 1px 0 rgba(255,255,255,.17)!important;
}
#screenSurvival .survival-v89__start > .ui-icon{width:22px;height:22px}
#screenSurvival .survival-v89__start > span:nth-child(2){display:flex;flex-direction:column;gap:3px}
#screenSurvival .survival-v89__start small{font-size:10px!important;line-height:1!important;color:rgba(255,255,255,.75);font-weight:800;letter-spacing:.075em}
#screenSurvival .survival-v89__start strong{font-size:15px!important;line-height:1.1!important;color:#fff;font-weight:900;letter-spacing:.02em}
#screenSurvival .survival-v89__start-arrow{font-style:normal;font-size:28px;line-height:1;color:#fff;opacity:.9}
#screenSurvival .survival-v89__record{
  min-height:62px!important;height:62px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;
  padding:8px 13px!important;border-radius:16px!important;background:rgba(5,16,30,.68)!important;
  border:1px solid rgba(255,215,107,.22)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
#screenSurvival .survival-v89__record .survival-record__label{color:#d9ba66!important;font-size:10px!important;line-height:1!important;letter-spacing:.065em!important}
#screenSurvival .survival-v89__record strong{display:flex;align-items:baseline;gap:4px;margin:4px 0 0!important;color:#fff!important;font-size:22px!important;line-height:1!important}
#screenSurvival .survival-v89__record strong small{color:var(--sv89-gold);font-size:10px!important}
#screenSurvival .survival-v89__record em{margin-top:2px;color:#91a3bb;font-size:10px!important;font-style:normal;font-weight:650}

/* Fighter is intentionally NOT a card. It sits directly on the artwork. */
#screenSurvival .survival-v89__fighter{
  position:relative;z-index:3;align-self:center;justify-self:center;
  width:min(250px,100%);min-height:0!important;margin:0!important;padding:0!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  overflow:visible!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;
}
#screenSurvival .survival-v89__fighter::before{display:none!important}
#screenSurvival .survival-v89__fighter-label{
  position:static!important;margin-bottom:3px!important;color:#8eeaff!important;
  display:inline-flex!important;align-items:center!important;gap:6px!important;font-size:11px!important;font-weight:900!important;letter-spacing:.07em!important;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}
#screenSurvival .survival-v89__fighter-label .ui-icon{width:14px;height:14px}
#screenSurvival .survival-v89__fighter-stage{
  position:relative;width:180px!important;height:185px!important;min-height:185px!important;margin:0!important;
  display:grid!important;place-items:center!important;
}
#screenSurvival .survival-v89__fighter-stage::after{
  content:"";position:absolute;left:22%;right:22%;bottom:7px;height:16px;border-radius:50%;
  background:rgba(0,0,0,.55);filter:blur(7px);z-index:0;
}
#screenSurvival .survival-v89__fighter-glow{
  position:absolute;left:50%;top:49%;width:145px;height:145px;transform:translate(-50%,-50%);border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(81,225,255,.20),rgba(160,87,255,.08) 48%,transparent 72%);filter:blur(14px);
}
#screenSurvival .survival-v89__fighter canvas{
  position:relative;z-index:2;width:145px!important;height:auto!important;max-height:170px!important;
  filter:drop-shadow(0 12px 12px rgba(0,0,0,.34));
}
#screenSurvival .survival-v89__equipped{
  position:relative;z-index:3;width:auto!important;min-height:0!important;margin:-7px 0 0!important;
  display:flex!important;justify-content:center!important;
}
#screenSurvival .survival-v89__equipped .survival-skin-pill{
  min-height:28px!important;padding:4px 9px!important;border-radius:999px!important;
  background:rgba(4,14,27,.64)!important;border:1px solid rgba(119,214,255,.20)!important;
  box-shadow:0 5px 14px rgba(0,0,0,.18)!important;backdrop-filter:blur(8px);
}
#screenSurvival .survival-v89__equipped .survival-skin-pill b{display:none!important}
#screenSurvival .survival-v89__equipped .survival-skin-pill em{font-size:12px!important;font-style:normal!important;font-weight:850!important;color:#f5fbff!important}
#screenSurvival .survival-v89__wardrobe{
  width:auto!important;min-height:0!important;height:auto!important;margin-top:9px!important;padding:3px 2px!important;
  display:inline-flex!important;align-items:center!important;gap:6px!important;
  color:#8fe8ff!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  font-size:12px!important;font-weight:800!important;letter-spacing:.01em!important;text-decoration:none!important;
}
#screenSurvival .survival-v89__wardrobe .ui-icon{width:14px;height:14px}
#screenSurvival .survival-v89__wardrobe:hover{color:#fff!important;transform:translateY(-1px)}

/* laptop / 1366-class: preserve readability; reduce whitespace, not type */
@media (min-width:901px) and (max-width:1366px){
  #screenSurvival .survival-v89__hero{grid-template-columns:minmax(0,1fr) 220px!important;border-radius:21px}
  #screenSurvival .survival-v89__copy{padding-left:34px;padding-right:18px}
  #screenSurvival .survival-v89__title{font-size:clamp(2.45rem,3.65vw,3.3rem)!important}
  #screenSurvival .survival-v89__lead{font-size:14px!important;line-height:1.52!important;max-width:700px}
  #screenSurvival .survival-v89__features{margin-top:16px}
  #screenSurvival .survival-v89__actions{margin-top:18px!important}
  #screenSurvival .survival-v89__fighter-stage{width:160px!important;height:165px!important;min-height:165px!important}
  #screenSurvival .survival-v89__fighter canvas{width:132px!important;max-height:150px!important}
}

@media (min-width:901px) and (max-height:760px){
  #screenSurvival .survival-v89__header{height:54px!important;min-height:54px!important;flex-basis:54px!important;margin-bottom:7px!important}
  #screenSurvival .survival-content.survival-v89{padding-bottom:7px!important}
  #screenSurvival .survival-v89__hero{min-height:430px!important}
  #screenSurvival .survival-v89__copy{padding-top:24px;padding-bottom:24px}
  #screenSurvival .survival-v89__eyebrow{min-height:29px;font-size:11px!important}
  #screenSurvival .survival-v89__title{margin:12px 0 10px!important;font-size:clamp(2.3rem,3.25vw,3.15rem)!important}
  #screenSurvival .survival-v89__lead{font-size:14px!important;line-height:1.48!important}
  #screenSurvival .survival-v89__features{margin-top:13px}
  #screenSurvival .survival-v89__feature{min-height:34px;font-size:11px}
  #screenSurvival .survival-v89__actions{margin-top:15px!important}
  #screenSurvival .survival-v89__start,#screenSurvival .survival-v89__record{height:56px!important;min-height:56px!important}
  #screenSurvival .survival-v89__fighter-stage{height:155px!important;min-height:155px!important}
  #screenSurvival .survival-v89__fighter canvas{width:130px!important;max-height:145px!important}
}

/* tablet: keep a two-column hero while there is enough room */
@media (max-width:900px){
  #screenSurvival{overflow-y:auto!important;overflow-x:hidden!important}
  #screenSurvival .survival-v89__header{position:sticky!important;top:0!important;z-index:20!important;height:auto!important;min-height:58px!important;margin-bottom:8px!important;padding:7px 10px!important}
  #screenSurvival .survival-v89__header-status{display:none!important}
  #screenSurvival .survival-content.survival-v89{height:auto!important;min-height:0!important;overflow:visible!important;padding:0 10px 14px!important}
  #screenSurvival .survival-content.survival-v89 .survival-start{height:auto!important;overflow:visible!important}
  #screenSurvival .survival-v89__shell{height:auto!important}
  #screenSurvival .survival-v89__hero{height:auto!important;min-height:560px!important;grid-template-columns:minmax(0,1fr) 180px!important}
  #screenSurvival .survival-v89__copy{padding:34px 12px 34px 28px}
  #screenSurvival .survival-v89__title{font-size:clamp(2.35rem,6vw,3.25rem)!important}
  #screenSurvival .survival-v89__lead{font-size:15px!important}
  #screenSurvival .survival-v89__actions{grid-template-columns:minmax(230px,1fr) 155px!important;max-width:520px!important}
  #screenSurvival .survival-v89__fighter-stage{width:145px!important;height:155px!important;min-height:155px!important}
  #screenSurvival .survival-v89__fighter canvas{width:122px!important;max-height:142px!important}
}

@media (max-width:680px){
  #screenSurvival .survival-v89__header{grid-template-columns:42px minmax(0,1fr)!important;gap:8px!important}
  #screenSurvival .survival-v89__back{min-width:42px!important;width:42px!important;height:40px!important;padding:0!important;font-size:0!important}
  #screenSurvival .survival-v89__section-icon,#screenSurvival .survival-v89__section-icon.ui-icon{width:36px!important;height:36px!important;min-width:36px!important;flex-basis:36px!important;padding:8px!important}
  #screenSurvival .survival-v89__section-copy .campaign-header__title{font-size:15px!important}
  #screenSurvival .survival-v89__section-copy .mode-header__meta{font-size:10px!important;white-space:normal!important}
  #screenSurvival .survival-content.survival-v89{padding-left:7px!important;padding-right:7px!important}
  #screenSurvival .survival-v89__hero{display:flex!important;flex-direction:column!important;min-height:0!important;border-radius:19px!important}
  #screenSurvival .survival-v89__hero::before{background:linear-gradient(180deg,rgba(5,13,24,.96),rgba(6,16,30,.86) 66%,rgba(7,14,27,.76))}
  #screenSurvival .survival-v89__copy{padding:28px 18px 16px!important}
  #screenSurvival .survival-v89__eyebrow{font-size:11px!important}
  #screenSurvival .survival-v89__title{font-size:clamp(2.15rem,10.8vw,3rem)!important;margin:14px 0 12px!important}
  #screenSurvival .survival-v89__lead{font-size:15px!important;line-height:1.52!important}
  #screenSurvival .survival-v89__features{display:grid;grid-template-columns:1fr;margin-top:16px}
  #screenSurvival .survival-v89__feature{width:100%;white-space:normal;font-size:12px}
  #screenSurvival .survival-v89__actions{grid-template-columns:1fr!important;max-width:none!important;margin-top:18px!important}
  #screenSurvival .survival-v89__record{height:54px!important;min-height:54px!important;display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important}
  #screenSurvival .survival-v89__record .survival-record__label{grid-column:1;grid-row:1}
  #screenSurvival .survival-v89__record strong{grid-column:2;grid-row:1 / 3}
  #screenSurvival .survival-v89__record em{grid-column:1;grid-row:2}
  #screenSurvival .survival-v89__fighter{width:100%!important;display:grid!important;grid-template-columns:120px minmax(0,1fr)!important;grid-template-rows:auto auto auto!important;column-gap:10px!important;justify-items:start!important;padding:0 18px 22px!important}
  #screenSurvival .survival-v89__fighter-label{grid-column:2;grid-row:1;align-self:end;margin:0 0 5px!important}
  #screenSurvival .survival-v89__fighter-stage{grid-column:1;grid-row:1 / 4;width:115px!important;height:128px!important;min-height:128px!important}
  #screenSurvival .survival-v89__fighter canvas{width:105px!important;max-height:122px!important}
  #screenSurvival .survival-v89__equipped{grid-column:2;grid-row:2;justify-content:flex-start!important;margin:0!important}
  #screenSurvival .survival-v89__wardrobe{grid-column:2;grid-row:3;margin-top:5px!important}
}

@media (max-width:420px){
  #screenSurvival .survival-v89__copy{padding-left:15px!important;padding-right:15px!important}
  #screenSurvival .survival-v89__title{font-size:2.05rem!important}
  #screenSurvival .survival-v89__lead{font-size:14px!important}
}