/* =====================================================================
   Dead Raid – landing page v2 (loaded after landing.css)
   Same visual language as the game menus (public/menu.css): Rajdhani, flat smoked
   panels, hairline borders, pale khaki highlight with a dot texture, red only for DEAD.
   ===================================================================== */
@font-face { font-family: 'Bender'; src: local('Bender'), local('Bender Bold'); font-weight: 400 700; font-display: swap; }
:root {
  --ui: 'Bender', 'Rajdhani', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --disp: var(--ui); --cond: var(--ui); --body: var(--ui);
  --hl: #d9d29a; --hl2: #efe8b6; --hl-a: rgba(217,210,154,.3);
  --sub: #c4c08c; --lab: #a5a29a;
  --pn: rgba(46,46,44,.42); --pn-h: rgba(78,76,66,.5);
  --bd: rgba(255,255,255,.12); --bd2: rgba(255,255,255,.24);
  --red: #d8392a; --red2: #e04a39; --amber: var(--hl);
  --dots: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.3px) 0 0 / 5px 5px;
}
body { font: 500 17px/1.5 var(--ui); background: #0a0a09; }
::selection { background: var(--hl); color: #111; }
.reveal { transform: translateY(18px); }

/* ---------- brand lockup (emblem + CALL OF / DEAD ZONE) ---------- */
.brand { gap: 12px; font: inherit; letter-spacing: 0; }
.brand-em { width: 40px; height: 40px; margin: 0; background: linear-gradient(160deg, #fbf6d6, var(--hl) 42%, #9d9458 78%, #6f6838); filter: drop-shadow(0 0 10px rgba(217,210,154,.25)); }
.brand-t { display: flex; flex-direction: column; line-height: 1; }
.brand-t small { font: 700 10px/1 var(--ui); letter-spacing: .58em; color: #cfc9b2; margin-bottom: 3px; }
.brand-t b { font: 700 22px/1 var(--ui); letter-spacing: .03em; color: #f4f1ea; white-space: nowrap; }
.brand-t em { font-style: normal; color: var(--red); margin: 0; }
.brand.sm .brand-em { width: 30px; height: 30px; }
.brand.sm .brand-t b { font-size: 18px; } .brand.sm .brand-t small { font-size: 9px; }

/* ---------- buttons ---------- */
.btn { clip-path: none; font: 700 15px/1 var(--ui); letter-spacing: .1em; border-radius: 0; }
.btn.hl { background: var(--hl); border-color: var(--hl); color: #111; }
.btn.hl:hover { background: var(--hl2); border-color: var(--hl2); box-shadow: 0 10px 40px -10px rgba(217,210,154,.6); }
.btn.ghost { background: rgba(20,20,19,.55); border-color: var(--bd2); color: #ece8de; backdrop-filter: blur(10px); }
.btn.ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }
.btn.lg { padding: 17px 28px; font-size: 18px; }
.btn.lg svg { width: 20px; height: 20px; }
#playBtn { animation: none; position: relative; isolation: isolate; }
#playBtn::after { content: ''; position: absolute; inset: -1px; z-index: -1; box-shadow: 0 0 0 0 rgba(217,210,154,.55); animation: hlPulse 2.6s infinite; pointer-events: none; }
@keyframes hlPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,210,154,.45); } 50% { box-shadow: 0 0 0 12px rgba(217,210,154,0); } }

/* ---------- nav (smoked bar, numbered links) ---------- */
#nav { height: 72px; gap: 28px; }
#nav.solid { background: rgba(12,12,11,.86); backdrop-filter: blur(14px); border-color: var(--bd); }
#nav .links { gap: 6px; }
#nav .links a { display: flex; align-items: baseline; gap: 6px; padding: 8px 12px; font: 600 15px/1 var(--ui); letter-spacing: .08em; color: #cfcbc2; }
#nav .links a i { font-style: normal; font-size: 11px; color: #77746d; }
#nav .links a::after { left: 12px; bottom: 2px; height: 2px; background: var(--hl); }
#nav .links a:hover { color: #fff; } #nav .links a:hover::after { right: 12px; }
.who { font: 600 15px/1 var(--ui); }

/* ---------- hero ---------- */
.shade { background: linear-gradient(90deg, rgba(8,8,7,.93) 0%, rgba(8,8,7,.7) 32%, rgba(8,8,7,.18) 62%, transparent 80%), linear-gradient(0deg, #0a0a09 0%, rgba(10,10,9,.6) 18%, transparent 45%), linear-gradient(180deg, rgba(10,10,9,.8) 0%, transparent 18%); }
.cap { background: rgba(14,14,13,.78); border: 1px solid var(--bd); border-left: 2px solid var(--hl); backdrop-filter: blur(12px); }
.cap .tag { font: 700 12px/1 var(--ui); letter-spacing: .18em; color: var(--hl); }
.cap h3 { font: 700 28px/1.05 var(--ui); letter-spacing: .01em; text-transform: uppercase; }
.cap p { font-size: 15px; color: #c9c5bb; }
.hero-copy { max-width: 680px; }
.kicker { font: 700 13px/1 var(--ui); letter-spacing: .18em; color: #cfcbc2; }
.kicker span { background: none; color: var(--hl); border: 1px solid rgba(217,210,154,.5); padding: 5px 9px; }
h1.hero-logo { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); margin: 20px 0 14px; font: inherit; }
.hl-em { position: relative; flex: none; width: clamp(84px, 9vw, 132px); height: clamp(84px, 9vw, 132px); filter: drop-shadow(0 0 22px rgba(217,210,154,.3)) drop-shadow(0 4px 10px rgba(0,0,0,.7)); animation: emIn 1s var(--ease) both; }
.hl-em u { position: absolute; inset: 0; background: linear-gradient(160deg, #fbf6d6 0%, var(--hl) 42%, #9d9458 78%, #6f6838 100%); -webkit-mask: url(ui/logo_emblem.png) center / contain no-repeat; mask: url(ui/logo_emblem.png) center / contain no-repeat; }
@keyframes emIn { from { opacity: 0; transform: scale(.85) rotate(-8deg); } }
.hl-t { display: flex; flex-direction: column; line-height: .9; }
h1 .l1 { display: block; font: 700 clamp(15px, 1.5vw, 22px)/1 var(--ui); letter-spacing: .62em; color: #cfc9b2; margin: 0 0 6px 3px; }
h1 .l2 { display: block; position: relative; font: 700 clamp(56px, 7.4vw, 118px)/.9 var(--ui); letter-spacing: .02em; color: #f4f1ea; text-shadow: 0 3px 0 rgba(0,0,0,.5), 0 0 40px rgba(0,0,0,.6); white-space: nowrap; animation: titleIn 1s var(--ease) both .1s; }
h1 .l2 b { color: var(--red); text-shadow: 0 3px 0 rgba(0,0,0,.5), 0 0 34px rgba(216,57,42,.45); }
h1 .l2::before { display: none; }
h1 .l2::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 3px; clip-path: none; opacity: 1; animation: none; background: linear-gradient(90deg, var(--red) 0 23%, rgba(217,210,154,.8) 23% 100%); }
@keyframes titleIn { from { opacity: 0; letter-spacing: .1em; } }
.hero-tag { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; font: 700 13px/1 var(--ui); letter-spacing: .2em; color: var(--lab); }
.hero-tag b { padding: 4px 9px; color: #111; background: var(--hl); letter-spacing: .16em; }
.lead { font-size: clamp(17px, 1.35vw, 20px); color: #cfcbc2; line-height: 1.5; margin-bottom: 28px; }
.platforms { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 700 12px/1 var(--ui); letter-spacing: .12em; color: #cfcbc2; }
.platforms .pf { padding: 5px 8px; border: 1px solid var(--bd2); background: rgba(14,14,13,.5); }
.platforms em { font-style: normal; color: var(--lab); margin-left: 8px; letter-spacing: .08em; }
.arrow { background: rgba(14,14,13,.7); border-color: var(--bd2); }
.arrow:hover { background: var(--hl); border-color: var(--hl); color: #111; }
.thumb { border-color: var(--bd2); }
.thumb.on { border-color: var(--hl); box-shadow: 0 0 0 1px var(--hl), 0 10px 24px -8px rgba(0,0,0,.8); }
.thumb .bar { background: var(--hl); }
.thumb .lbl { font: 700 10px/1 var(--ui); letter-spacing: .1em; }
.scroll-cue { border-color: rgba(255,255,255,.3); } .scroll-cue i { background: var(--hl); }

/* ---------- stats strip ---------- */
.stats { grid-template-columns: repeat(6, 1fr); background: #0f0f0e; border-color: var(--bd); }
.stat { padding: 30px 14px 28px; border-right-color: var(--bd); display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.stat small { font: 700 11px/1 var(--ui); letter-spacing: .24em; color: #77746d; }
.stat b { font: 700 clamp(42px, 4.4vw, 62px)/1 var(--ui); color: #f4f1ea; }
.stat:nth-child(odd) b { color: var(--hl); }
.stat span { font: 700 13px/1 var(--ui); letter-spacing: .14em; color: #cfcbc2; }
.stat::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px; background: var(--hl); transition: width .4s var(--ease), left .4s var(--ease); }
.stat:hover::after { width: 60%; left: 20%; }

/* ---------- section heads ---------- */
.sec { padding: clamp(72px, 9vw, 120px) clamp(16px, 6vw, 96px); }
.sec.dark { background: #0f0f0e; border-color: var(--bd); }
.sec-h { margin-bottom: 44px; }
.eyebrow { font: 700 13px/1 var(--ui); letter-spacing: .22em; color: var(--hl); gap: 10px; }
.eyebrow::before { width: 24px; background: var(--hl); }
.eyebrow i { font-style: normal; color: #77746d; }
h2 { font: 700 clamp(38px, 4.6vw, 64px)/1 var(--ui); letter-spacing: .01em; text-transform: uppercase; color: #f4f1ea; }
h2 em { color: var(--hl); }
.sec-sub { margin: 12px 0 0; color: var(--lab); font-size: 17px; }

/* ---------- inside the game: tabs + real screenshot ---------- */
.shots { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 22px; align-items: start; }
.shot-tabs { display: flex; flex-direction: column; gap: 2px; }
.shot-tabs button { position: relative; isolation: isolate; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 14px 14px 14px 12px; border: 0; text-align: left; cursor: pointer; color: #cfcbc2; font: inherit; background: rgba(20,20,19,.5); transition: background .2s, color .2s; }
.shot-tabs button i { grid-row: 1 / 3; font-style: normal; font: 600 20px/1 var(--ui); color: #77746d; }
.shot-tabs button b { font: 700 19px/1.1 var(--ui); letter-spacing: .04em; }
.shot-tabs button small { font: 600 13px/1.25 var(--ui); color: var(--lab); }
.shot-tabs button:hover { background: rgba(255,255,255,.07); color: #fff; }
.shot-tabs button.on { color: var(--hl); background: var(--dots), linear-gradient(90deg, rgba(217,210,154,.3), rgba(217,210,154,.06) 75%, rgba(20,20,19,.4)); }
.shot-tabs button.on i { color: var(--hl); }
.shot-tabs button.on::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--hl); box-shadow: 0 0 12px var(--hl); }
.shot-view { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--bd); box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); }
.shot-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.shot-view img.on { opacity: 1; }
.sv-c { position: absolute; width: 18px; height: 18px; border: 2px solid var(--hl); z-index: 2; pointer-events: none; }
.sv-c.tl { left: -6px; top: -6px; border-right: 0; border-bottom: 0; } .sv-c.tr { right: -6px; top: -6px; border-left: 0; border-bottom: 0; }
.sv-c.bl { left: -6px; bottom: -6px; border-right: 0; border-top: 0; } .sv-c.br { right: -6px; bottom: -6px; border-left: 0; border-top: 0; }

/* ---------- feature cards (flat smoked, numbered) ---------- */
.grid { gap: 4px; background: none; border: 0; }
.card { background: var(--pn); border: 1px solid var(--bd); padding: 30px 26px 30px; }
.card:hover { background: var(--pn-h); border-color: var(--bd2); }
.card::before { height: 2px; background: var(--hl); }
.card-n { position: absolute; top: 18px; right: 20px; font: 600 15px/1 var(--ui); color: #6d6a63; }
.card svg { width: 36px; height: 36px; stroke: var(--hl); }
.card h3 { font: 700 23px/1.1 var(--ui); letter-spacing: .03em; color: #f4f1ea; }
.card p { font-size: 16px; color: #c4c0b6; }

/* ---------- classes (Midjourney emblems) ---------- */
.classes { gap: 6px; }
.cls { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 13%, transparent), transparent 55%), var(--pn); border: 1px solid var(--bd); border-top: 2px solid var(--c); padding: 26px 24px 26px; }
.cls:hover { transform: translateY(-4px); }
.cls-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.cls-ic { width: 56px; height: 56px; border: 0; margin: 0; display: block; background: var(--c); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 50%, transparent)); }
.cls-n { font: 600 20px/1 var(--ui); color: #6d6a63; }
.cls h3 { font: 700 34px/1 var(--ui); letter-spacing: .02em; text-transform: uppercase; color: #f4f1ea; }
.abil { font: 700 13px/1 var(--ui); letter-spacing: .14em; color: var(--c); margin: 8px 0 14px; }
.abil::before { content: 'ABILITY · '; color: var(--lab); }
.cls p { font-size: 16px; color: #c4c0b6; }
.cls li { font: 700 12px/1 var(--ui); letter-spacing: .06em; border-color: var(--bd2); color: #d6d2c8; background: rgba(0,0,0,.25); }

/* ---------- squad: steps + friends panel ---------- */
.squad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 28px; align-items: start; }
.steps { grid-template-columns: 1fr; gap: 4px; }
.steps li { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; padding: 22px 22px; border: 1px solid var(--bd); background: var(--pn); }
.steps b { position: static; padding: 0; border: 0; font: 700 40px/1 var(--ui); color: var(--hl); -webkit-text-stroke: 0; }
.steps h3 { margin: 2px 0 6px; font: 700 22px/1.1 var(--ui); letter-spacing: .03em; color: #f4f1ea; }
.steps p { color: #c4c0b6; font-size: 16px; }
.steps kbd { font: 700 13px/1 var(--ui); padding: 1px 6px; color: #111; background: var(--hl); }
.friends { border: 1px solid var(--bd2); background: linear-gradient(180deg, rgba(30,30,28,.9), rgba(14,14,13,.92)); padding: 18px 20px 20px; }
.fr-h { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--bd); }
.fr-h b { font: 700 22px/1 var(--ui); letter-spacing: .04em; color: #fff; padding-left: 8px; border-left: 2px solid #fff; }
.fr-h span { font: 700 12px/1 var(--ui); letter-spacing: .14em; color: var(--lab); text-transform: uppercase; }
.friends ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.friends li { display: flex; align-items: center; gap: 12px; padding: 11px 12px; background: rgba(20,20,19,.5); font: 600 16px/1.2 var(--ui); color: #e2ded5; }
.friends i.ok { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #7fd36a; box-shadow: 0 0 8px #7fd36a; }

/* ---------- final CTA + footer ---------- */
.final { background: linear-gradient(0deg, #0a0a09, rgba(10,10,9,.82) 40%, rgba(10,10,9,.82) 60%, #0a0a09), url(media/slide-railgun.jpg) center/cover fixed; }
.final-em { display: block; width: 86px; height: 86px; margin: 0 auto 18px; background: linear-gradient(160deg, #fbf6d6, var(--hl) 45%, #8f8752); -webkit-mask: url(ui/logo_emblem.png) center / contain no-repeat; mask: url(ui/logo_emblem.png) center / contain no-repeat; filter: drop-shadow(0 0 18px rgba(217,210,154,.3)); }
.final h2 { font-size: clamp(42px, 6vw, 88px); }
.final p { color: #c4c0b6; }
.foot { border-color: var(--bd); font: 600 14px/1 var(--ui); color: var(--lab); }

/* ---------- auth modal in the new style ---------- */
.panel { background: linear-gradient(180deg, rgba(30,30,28,.97), rgba(14,14,13,.98)); border: 1px solid var(--bd2); border-top: 2px solid var(--hl); }
.panel-h .brand-em { width: 44px; height: 44px; }
.panel-h h2 { font-size: 34px; }
.tabs button { font: 700 16px/1 var(--ui); letter-spacing: .1em; }
.tab-ink { background: var(--hl); }
.fld > span { font: 700 12px/1 var(--ui); letter-spacing: .16em; }
.fld input { font: 600 17px/1 var(--ui); background: rgba(0,0,0,.4); border-color: var(--bd2); }
.fld input:focus { border-color: var(--hl); box-shadow: 0 0 0 3px rgba(217,210,154,.15); }
.swap a { color: var(--hl); }
.guest { font: 700 13px/1 var(--ui); }
#toast { font: 700 16px/1.2 var(--ui); border-left-color: var(--hl); background: rgba(20,20,19,.96); }

/* ---------- responsive ---------- */
@media (max-width: 1240px) { .stats { grid-template-columns: repeat(3, 1fr); } .stat:nth-child(3) { border-right: 0; } .stat:nth-child(n+4) { border-top: 1px solid var(--bd); } .squad { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .shots { grid-template-columns: 1fr; } .shot-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .shot-tabs button small { display: none; } .shot-tabs button { grid-template-columns: 26px 1fr; padding: 12px 10px; } }
@media (max-width: 820px) {
  #nav .links { display: none; }
  .hero-copy { bottom: 110px; } h1.hero-logo { margin: 12px 0 10px; } .hero-tag { margin: 18px 0 12px; }
  .lead { font-size: 16px; margin-bottom: 20px; }
  .stats { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(3) { border-right: 1px solid var(--bd); } .stat:nth-child(even) { border-right: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--bd); }
  .shot-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .brand-t b { font-size: 18px; } .brand-t small { font-size: 9px; }
  h1 .l2 { font-size: 46px; } .hl-em { width: 64px; height: 64px; } h1 .l1 { font-size: 13px; letter-spacing: .5em; }
  .platforms em { width: 100%; margin: 6px 0 0; }
  .steps li { grid-template-columns: 44px 1fr; gap: 12px; padding: 16px; } .steps b { font-size: 30px; }
}
/* short landscape phones: keep the hero copy on screen */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: 100svh; }
  .hero-copy { top: 74px; bottom: auto; transform: none; max-width: 60%; }
  h1.hero-logo { margin: 8px 0 6px; } .hl-em { width: 58px; height: 58px; } h1 .l2 { font-size: 42px; } h1 .l1 { font-size: 12px; }
  .hero-tag { margin: 12px 0 8px; } .lead { display: none; } .platforms { display: none; }
  .btn.lg { padding: 12px 18px; font-size: 15px; }
  .sl-ui { bottom: 12px; } .scroll-cue { display: none; }
}
.sec-h { max-width: 1100px; } h2 em { white-space: nowrap; }

/* phones: the brand keeps its full name (an old rule hid the <em>) */
.brand-t em { display: inline !important; }
/* no visible scrollbar (same as the game menus); the page still scrolls */
html { scrollbar-width: none; } html::-webkit-scrollbar { display: none; }
/* big screens (1440p / 4K / 8K): scale the whole page as one piece, like the game menus (--z set in landing.html) */
body { zoom: var(--z, 1); }
.hero { height: calc(100svh / var(--z, 1)); min-height: calc(640px / var(--z, 1)); }
@media (max-width: 520px) { .hero-copy { bottom: 100px; } .platforms { display: none; } .lead { font-size: 15px; margin-bottom: 16px; } .btn.lg { padding: 14px 20px; } .ctas { gap: 8px; } }
/* the logo must never depend on an animation to be visible (stalled timelines, low-power mode): motion only, no fade */
@keyframes emIn { from { transform: scale(.85) rotate(-8deg); } }
@keyframes titleIn { from { letter-spacing: .1em; } }
h1 .l2 { animation: none !important; } h1 .l2::after { top: auto !important; inset: auto 0 -10px 0 !important; }