@charset "utf-8";

@font-face{font-family:"Pretendard";src:url("../fonts/Pretendard-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Pretendard";src:url("../fonts/Pretendard-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Pretendard";src:url("../fonts/Pretendard-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Pretendard";src:url("../fonts/Pretendard-Black.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"BlackHanSans";src:url("../fonts/BlackHanSans-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DoHyeon";src:url("../fonts/DoHyeon-400.woff2") format("woff2");font-weight:400;font-display:swap}

@layer reset, tokens, base, layout, sections, components, motion, responsive;

/* the whole sheet is organized around named grid areas + design tokens */

@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body,h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote{margin:0}
  ul[class],ol[class]{list-style:none;padding:0}
  a{color:inherit;text-decoration:none}
  img,svg{display:block;max-width:100%}
  button,input,select,textarea{font:inherit;color:inherit}
  button{background:none;border:0;cursor:pointer}
  :focus-visible{outline:3px solid var(--toxic);outline-offset:3px;border-radius:4px}
  [hidden]{display:none!important}
}

@layer tokens{
  :root{
    --night:#0f1410; --night-2:#141b15; --panel:#182018; --panel-2:#1e281d;
    --toxic:#6cff5a; --toxic-dim:#4fbf42; --danger:#ff3b3b; --amber:#ffb020;
    --ash:#b8c0b4; --ink:#eef2ec; --line:rgba(184,192,180,.16); --line-2:rgba(184,192,180,.28);
    --glow:0 0 0 1px rgba(108,255,90,.35),0 0 34px -8px rgba(108,255,90,.45);
    --shadow:0 20px 50px -24px rgba(0,0,0,.8);
    --disp:"BlackHanSans",system-ui,sans-serif;
    --hud:"DoHyeon",system-ui,sans-serif;
    --body:"Pretendard",system-ui,-apple-system,"Segoe UI",sans-serif;
    --wrap:1180px; --gutter:clamp(16px,5vw,40px); --radius:18px;
    --hdr:64px;
  }
}

@layer base{
  html{scroll-behavior:smooth}
  body{
    font-family:var(--body);color:var(--ink);background:var(--night);
    line-height:1.6;letter-spacing:-.01em;
    -webkit-font-smoothing:antialiased;
    background-image:
      radial-gradient(1200px 500px at 80% -10%,rgba(108,255,90,.10),transparent 60%),
      radial-gradient(900px 480px at -10% 20%,rgba(255,176,32,.06),transparent 55%);
    background-attachment:fixed;
  }
  h1,h2,h3{line-height:1.08;letter-spacing:-.02em;font-weight:900}
  .display{font-family:var(--disp);font-weight:400;letter-spacing:.005em;line-height:1}
  strong{color:var(--toxic)}
  ::selection{background:var(--toxic);color:var(--night)}
  .skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--toxic);color:var(--night);
    padding:10px 16px;border-radius:10px;font-weight:700;transition:top .18s}
  .skip:focus{top:12px}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* -------- page shell: header / main / footer as named rows -------- */
@layer layout{
  .shell{
    min-height:100dvh;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr auto;
    grid-template-areas:"masthead" "stage" "colophon";
  }
  .masthead{grid-area:masthead}
  .stage{grid-area:stage}
  .colophon{grid-area:colophon}

  .wrap{width:min(var(--wrap),100%-2*var(--gutter));margin-inline:auto}
  section{padding-block:clamp(56px,8vw,104px)}
  .lede{max-width:60ch;color:var(--ash);font-size:clamp(1rem,.6vw+.9rem,1.12rem)}
}

/* -------- masthead (sticky) -------- */
@layer components{
  .masthead{position:sticky;top:0;z-index:90;
    background:color-mix(in srgb,var(--night) 72%,transparent);
    backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .25s,background .25s}
  .masthead[data-stuck="true"]{border-bottom-color:var(--line);background:color-mix(in srgb,var(--night) 90%,transparent)}
  .nav{height:var(--hdr);display:grid;grid-template-areas:"brand links cta";
    grid-template-columns:auto 1fr auto;align-items:center;gap:18px}
  .brand{grid-area:brand;display:flex;align-items:center;gap:10px;font-family:var(--disp);
    font-size:1.35rem;letter-spacing:.04em}
  .brand svg{width:30px;height:30px;filter:drop-shadow(0 0 10px rgba(108,255,90,.5))}
  .brand b{color:var(--toxic)}
  .navlinks{grid-area:links;display:flex;gap:6px;justify-self:center}
  .navlinks a{padding:8px 14px;border-radius:999px;color:var(--ash);font-weight:500;font-size:.94rem;transition:color .18s,background .18s}
  .navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--ink);background:rgba(184,192,180,.08)}
  .navcta{grid-area:cta;display:flex;align-items:center;gap:10px}
  .burger{grid-area:cta;display:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:12px;color:var(--ink);place-items:center}
  .burger svg{width:22px;height:22px}

  .btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;border-radius:12px;
    padding:12px 20px;transition:transform .12s,box-shadow .2s,background .2s;white-space:nowrap}
  .btn svg{width:19px;height:19px}
  .btn:active{transform:translateY(1px)}
  .btn--go{background:var(--toxic);color:#08210a;box-shadow:var(--glow)}
  .btn--go:hover{box-shadow:0 0 0 1px var(--toxic),0 0 42px -6px rgba(108,255,90,.7)}
  .btn--ghost{border:1px solid var(--line-2);color:var(--ink)}
  .btn--ghost:hover{border-color:var(--toxic);color:var(--toxic)}
  .btn--danger{background:var(--danger);color:#fff}
  .btn--sm{padding:9px 14px;font-size:.9rem}

  /* mobile drawer, toggled by FSM data-state */
  .drawer{position:fixed;inset:var(--hdr) 0 0;z-index:80;background:var(--night-2);
    padding:24px var(--gutter);display:grid;gap:6px;align-content:start;
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;border-top:1px solid var(--line)}
  .drawer a{padding:15px 8px;font-size:1.15rem;font-weight:700;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
  .drawer a svg{width:20px;height:20px;color:var(--toxic)}
  .drawer .btn{margin-top:16px;justify-content:center}
  body[data-menu="open"] .drawer{opacity:1;transform:none;pointer-events:auto}
  body[data-menu="open"]{overflow:hidden}

  /* pills / tags */
  .kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--hud);
    font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--toxic);
    padding:6px 14px;border:1px solid rgba(108,255,90,.3);border-radius:999px;background:rgba(108,255,90,.06)}
  .kicker--amber{color:var(--amber);border-color:rgba(255,176,32,.3);background:rgba(255,176,32,.06)}
  .kicker--danger{color:var(--danger);border-color:rgba(255,59,59,.3);background:rgba(255,59,59,.07)}
  .tag{font-family:var(--hud);font-size:.78rem;letter-spacing:.05em;color:var(--ash);
    border:1px solid var(--line);border-radius:8px;padding:4px 10px}

  .panel{background:linear-gradient(180deg,var(--panel),var(--night-2));
    border:1px solid var(--line);border-radius:var(--radius)}

  /* rating stars */
  .rating{display:inline-flex;align-items:center;gap:10px}
  .stars{display:inline-flex;color:var(--amber)}
  .stars svg{width:18px;height:18px}
  .rating b{font-family:var(--hud);font-size:1.05rem}
  .rating span{color:var(--ash);font-size:.86rem}

  /* live counter chip */
  .live{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(108,255,90,.28);
    background:rgba(108,255,90,.05);border-radius:999px;padding:8px 16px;font-weight:600;font-size:.94rem}
  .live>svg{width:18px;height:18px;color:var(--toxic);flex:none}
  .live .dot{width:9px;height:9px;border-radius:50%;background:var(--toxic);box-shadow:0 0 0 0 rgba(108,255,90,.6);animation:pulse 1.8s infinite;flex:none}
  .live b{font-family:var(--hud);color:var(--toxic);font-size:1.15rem;font-variant-numeric:tabular-nums}

  .store-badges{display:flex;gap:12px;flex-wrap:wrap}
  .store-badges img{height:50px;width:auto;border-radius:10px;transition:transform .15s,filter .2s}
  .store-badges a:hover img{transform:translateY(-2px);filter:brightness(1.1)}
}

/* ============ HERO — briefing HUD, not a plain 2-col split ============ */
@layer sections{
  .hero{position:relative;overflow:hidden;padding-block:clamp(40px,7vw,84px)}
  .hero__art{position:absolute;inset:0;z-index:0}
  .hero__art img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
  .hero__art::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(15,20,16,.5),rgba(15,20,16,.82) 55%,var(--night)),
    radial-gradient(120% 90% at 15% 30%,transparent,rgba(15,20,16,.7))}
  .hero__grid{position:relative;z-index:1;display:grid;gap:22px;
    grid-template-columns:repeat(12,1fr);
    grid-template-areas:
      "flag flag flag flag flag flag flag flag flag flag flag flag"
      "head head head head head head head hud  hud  hud  hud  hud"
      "sub  sub  sub  sub  sub  sub  sub  hud  hud  hud  hud  hud"
      "act  act  act  act  act  act  act  hud  hud  hud  hud  hud"
      "meta meta meta meta meta meta meta hud  hud  hud  hud  hud";
    align-items:start}
  .hero__flag{grid-area:flag}
  .hero__head{grid-area:head;font-family:var(--disp);font-size:clamp(2.6rem,7vw,5.4rem);
    line-height:.96;letter-spacing:.01em;text-shadow:0 4px 30px rgba(0,0,0,.6)}
  .hero__head em{font-style:normal;color:var(--toxic);text-shadow:0 0 30px rgba(108,255,90,.5)}
  .hero__sub{grid-area:sub;color:var(--ink);font-size:clamp(1.02rem,.6vw+.95rem,1.2rem);max-width:46ch;opacity:.92}
  .hero__act{grid-area:act;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .hero__meta{grid-area:meta;display:flex;gap:22px;flex-wrap:wrap;align-items:center;padding-top:6px}
  /* the HUD card carries store listing bits: badges + rating + QR + live */
  .hero__hud{grid-area:hud;align-self:stretch;display:grid;gap:18px;padding:22px;
    background:linear-gradient(180deg,rgba(24,32,24,.82),rgba(15,20,16,.9));
    border:1px solid var(--line-2);border-radius:20px;backdrop-filter:blur(8px);box-shadow:var(--shadow)}
  .hud__row{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
  .hud__qr{width:104px;height:104px;border-radius:14px;box-shadow:0 0 0 4px rgba(238,242,236,.9)}
  .hud__cap{font-family:var(--hud);font-size:.8rem;color:var(--ash);letter-spacing:.06em}
  .hud__stat{display:grid;gap:2px}
  .hud__stat b{font-family:var(--hud);font-size:1.5rem;color:var(--toxic)}
  .hud__stat span{font-size:.8rem;color:var(--ash)}
  .hud__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid var(--line);padding-top:16px}

  /* section heading block */
  .head-block{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,48px);max-width:66ch}
  .head-block h2{font-size:clamp(1.9rem,3.5vw,3rem)}
  .head-block--center{margin-inline:auto;text-align:center;justify-items:center}

  /* MECHANIC BRIEFING — HUD diagram layout via grid-areas */
  .brief{background:
    linear-gradient(180deg,transparent,rgba(20,27,21,.5)),
    repeating-linear-gradient(90deg,transparent 0 38px,rgba(184,192,180,.04) 38px 39px)}
  .brief__stage{display:grid;gap:20px;
    grid-template-columns:repeat(3,1fr);
    grid-template-areas:
      "tabs tabs tabs"
      "view view panel";
  }
  .brief__tabs{grid-area:tabs;display:flex;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px}
  .brief__tab{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:12px 12px 0 0;
    color:var(--ash);font-weight:700;border:1px solid transparent;position:relative;transition:color .18s,background .18s}
  .brief__tab svg{width:20px;height:20px}
  .brief__tab[aria-selected="true"]{color:var(--toxic);background:rgba(108,255,90,.07);border-color:var(--line);border-bottom-color:transparent}
  .brief__tab[aria-selected="true"]::after{content:"";position:absolute;left:14px;right:14px;bottom:-15px;height:2px;background:var(--toxic);box-shadow:0 0 12px var(--toxic)}
  .brief__view{grid-area:view;position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);min-height:340px;background:#0b0f0b}
  .brief__panel{grid-area:panel;display:grid;align-content:start;gap:16px;padding:26px;
    background:linear-gradient(180deg,var(--panel),var(--night-2));border:1px solid var(--line);border-radius:16px}
  .brief__pane{display:none}
  .brief__pane[data-active="true"]{display:block;animation:fade .4s ease}
  .brief__view .brief__pane{position:absolute;inset:0}
  .brief__pane img{width:100%;height:100%;object-fit:cover}
  .brief__pane figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;
    background:linear-gradient(0deg,rgba(11,15,11,.92),transparent);font-family:var(--hud);letter-spacing:.04em}
  .brief__panel h3{font-size:1.5rem;display:flex;align-items:center;gap:10px}
  .brief__panel h3 svg{width:26px;height:26px;color:var(--toxic)}
  .metric-row{display:grid;gap:10px}
  .metric{display:grid;gap:6px}
  .metric__label{display:flex;justify-content:space-between;font-size:.85rem;color:var(--ash);font-family:var(--hud)}
  .meter{height:9px;border-radius:6px;background:rgba(184,192,180,.14);overflow:hidden}
  .meter>i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--toxic-dim),var(--toxic));width:0;transition:width 1s cubic-bezier(.2,.7,.2,1)}
  .meter[data-tone="danger"]>i{background:linear-gradient(90deg,#a11,var(--danger))}
  .meter[data-tone="amber"]>i{background:linear-gradient(90deg,#a06a00,var(--amber))}

  /* MAP SHOWCASE — offset feature grid, tab-switched zones */
  .maps__switch{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
  .zone-btn{display:flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid var(--line);border-radius:14px;color:var(--ash);font-weight:700;transition:.18s}
  .zone-btn svg{width:20px;height:20px}
  .zone-btn[aria-selected="true"]{color:var(--night);background:var(--toxic);border-color:var(--toxic)}
  .zone{display:none;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch}
  .zone[data-active="true"]{display:grid;animation:fade .4s ease}
  .zone__art{border-radius:18px;overflow:hidden;border:1px solid var(--line);position:relative;min-height:320px}
  .zone__art img{width:100%;height:100%;object-fit:cover}
  .zone__art .tag{position:absolute;top:16px;left:16px;background:rgba(11,15,11,.75);backdrop-filter:blur(4px)}
  .zone__body{display:grid;align-content:center;gap:16px;padding:8px 8px}
  .zone__body h3{font-family:var(--disp);font-size:clamp(1.8rem,3vw,2.6rem)}
  .hazard{display:grid;gap:10px}
  .hazard li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;color:var(--ash)}
  .hazard svg{width:22px;height:22px;color:var(--danger);margin-top:3px}
  .hazard b{color:var(--ink)}

  /* LEADERBOARD — ranked rows (proof, replaces star-review section) */
  .board{display:grid;gap:10px}
  .board__row{display:grid;grid-template-columns:52px 1fr auto auto;gap:16px;align-items:center;
    padding:14px 20px;border:1px solid var(--line);border-radius:14px;background:var(--night-2);transition:border-color .2s,transform .12s}
  .board__row:hover{border-color:var(--line-2);transform:translateX(4px)}
  .board__row--top{border-color:rgba(108,255,90,.4);background:linear-gradient(90deg,rgba(108,255,90,.08),var(--night-2) 40%);box-shadow:var(--glow)}
  .board__rank{font-family:var(--disp);font-size:1.6rem;text-align:center;color:var(--ash)}
  .board__row--top .board__rank{color:var(--toxic)}
  .board__who{display:grid;gap:2px;min-width:0}
  .board__who b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .board__who span{font-size:.82rem;color:var(--ash);display:flex;align-items:center;gap:6px}
  .board__who span svg{width:14px;height:14px}
  .board__dist{font-family:var(--hud);font-size:1.35rem;color:var(--toxic);font-variant-numeric:tabular-nums;text-align:right}
  .board__dist small{display:block;font-size:.7rem;color:var(--ash);letter-spacing:.06em}
  .board__badge{color:var(--amber)}
  .board__badge svg{width:22px;height:22px}
  .board__foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-top:20px;color:var(--ash);font-size:.9rem}

  /* CHARACTER + PET — asymmetric cards */
  .cast{display:grid;gap:20px;grid-template-columns:1.4fr 1fr}
  .cast__card{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);min-height:360px}
  .cast__card img{width:100%;height:100%;object-fit:cover}
  .cast__card figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px;
    background:linear-gradient(0deg,rgba(11,15,11,.94),transparent);display:grid;gap:6px}
  .cast__card h3{font-family:var(--disp);font-size:1.7rem}
  .cast__card p{color:var(--ash);font-size:.95rem;max-width:40ch}

  /* CREW / community */
  .crew{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center;
    background:linear-gradient(120deg,rgba(24,32,24,.7),var(--night-2));border:1px solid var(--line);border-radius:22px;padding:clamp(24px,4vw,46px)}
  .crew__list{display:grid;gap:16px}
  .crew__list li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
  .crew__list svg{width:24px;height:24px;color:var(--toxic);margin-top:3px}
  .crew__list b{display:block;margin-bottom:2px}
  .crew__list span{color:var(--ash);font-size:.92rem}
  .crew__art{border-radius:16px;overflow:hidden;border:1px solid var(--line)}
  .crew__art img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}

  /* CTA */
  .cta-final{position:relative;overflow:hidden;border-radius:26px;border:1px solid rgba(108,255,90,.28);
    background:radial-gradient(120% 140% at 80% -20%,rgba(108,255,90,.16),transparent 55%),linear-gradient(180deg,var(--panel),var(--night-2));
    padding:clamp(32px,5vw,64px);display:grid;gap:22px;justify-items:center;text-align:center}
  .cta-final h2{font-family:var(--disp);font-size:clamp(2rem,5vw,3.6rem)}
  .cta-final .store-badges{justify-content:center}
  .cta-final .live{margin-top:4px}

  /* mode cards (modes.php) */
  .modes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  .mode{display:grid;gap:14px;padding:26px;border:1px solid var(--line);border-radius:18px;
    background:linear-gradient(180deg,var(--panel),var(--night-2));position:relative;overflow:hidden}
  .mode__ico{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:rgba(108,255,90,.1);color:var(--toxic)}
  .mode__ico svg{width:28px;height:28px}
  .mode h3{font-size:1.4rem}
  .mode ul{display:grid;gap:8px;color:var(--ash);font-size:.94rem}
  .mode li{display:grid;grid-template-columns:auto 1fr;gap:8px}
  .mode li svg{width:18px;height:18px;color:var(--toxic-dim);margin-top:4px}
  .mode--boss{border-color:rgba(255,59,59,.32)}
  .mode--boss .mode__ico{background:rgba(255,59,59,.12);color:var(--danger)}

  /* generic gallery of phone mockups (start.php) */
  .shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .shots figure{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--night-2)}
  .shots img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
  .shots figcaption{padding:12px 16px;font-family:var(--hud);font-size:.86rem;color:var(--ash);letter-spacing:.03em}

  /* FAQ */
  .faq{display:grid;gap:12px;max-width:820px}
  .faq details{border:1px solid var(--line);border-radius:14px;background:var(--night-2);overflow:hidden}
  .faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:700;display:flex;justify-content:space-between;gap:16px;align-items:center}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary svg{width:20px;height:20px;color:var(--toxic);transition:transform .2s;flex:none}
  .faq details[open] summary svg{transform:rotate(90deg)}
  .faq p{padding:0 22px 20px;color:var(--ash)}

  /* pre-register form (start.php) FSM: idle/submitting/success */
  .prereg{display:grid;gap:14px;max-width:520px}
  .field{display:grid;gap:7px}
  .field label{font-weight:600;font-size:.92rem}
  .field input,.field select{background:var(--night);border:1px solid var(--line-2);border-radius:12px;padding:13px 15px;transition:border-color .18s}
  .field input:focus{border-color:var(--toxic);outline:none}
  .prereg__msg{display:none;align-items:center;gap:10px;padding:14px 18px;border-radius:12px;font-weight:600}
  .prereg__msg svg{width:22px;height:22px;flex:none}
  form[data-state="success"] .prereg__msg--ok{display:flex;background:rgba(108,255,90,.1);border:1px solid rgba(108,255,90,.35);color:var(--toxic)}
  form[data-state="success"] .field,form[data-state="success"] .prereg__submit{display:none}
  form[data-state="submitting"] .prereg__submit{opacity:.6;pointer-events:none}
  .form-note{font-size:.82rem;color:var(--ash)}
}

/* ---------- footer ---------- */
@layer components{
  .colophon{border-top:1px solid var(--line);background:var(--night-2);padding-block:48px 30px}
  .foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
  .foot__brand{display:grid;gap:14px;align-content:start}
  .foot__brand .brand{font-size:1.3rem}
  .foot__brand p{color:var(--ash);font-size:.92rem;max-width:34ch}
  .foot__contact{display:grid;gap:10px;color:var(--ash);font-size:.9rem}
  .foot__contact li{display:flex;gap:10px;align-items:center}
  .foot__contact svg{width:18px;height:18px;color:var(--toxic-dim);flex:none}
  .foot h4{font-family:var(--hud);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);margin-bottom:14px}
  .foot__links{display:grid;gap:9px}
  .foot__links a{color:var(--ash);font-size:.92rem;transition:color .15s}
  .foot__links a:hover{color:var(--toxic)}
  .social{display:flex;gap:10px;margin-top:6px}
  .social a{width:40px;height:40px;border:1px solid var(--line);border-radius:11px;display:grid;place-items:center;color:var(--ash);transition:.18s}
  .social a:hover{color:var(--toxic);border-color:var(--toxic)}
  .social svg{width:20px;height:20px}
  .foot__legal{grid-column:1/-1;border-top:1px solid var(--line);margin-top:30px;padding-top:22px;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--ash);font-size:.84rem;align-items:center}
  .foot__legal .lgroup{display:flex;gap:18px;flex-wrap:wrap}
  .foot__legal button{color:var(--ash);text-decoration:underline;text-underline-offset:3px}
  .foot__legal button:hover{color:var(--toxic)}
  .biz{color:var(--ash);font-size:.78rem;line-height:1.7;opacity:.8;max-width:70ch}
}

/* ---------- legal modal (dialog) ---------- */
@layer components{
  .modal{position:fixed;inset:0;z-index:150;display:none;place-items:center;padding:clamp(12px,4vw,40px)}
  .modal[data-open="true"]{display:grid;animation:fade .2s ease}
  .modal__scrim{position:absolute;inset:0;background:rgba(6,9,6,.78);backdrop-filter:blur(3px)}
  .modal__box{position:relative;width:min(760px,100%);max-height:min(84dvh,760px);display:grid;
    grid-template-rows:auto 1fr;background:var(--panel);border:1px solid var(--line-2);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
  .modal__head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--line)}
  .modal__head h2{font-size:1.25rem;font-family:var(--hud);letter-spacing:.02em}
  .modal__close{width:42px;height:42px;border:1px solid var(--line-2);border-radius:12px;display:grid;place-items:center;color:var(--ink)}
  .modal__close svg{width:22px;height:22px}
  .modal__body{overflow-y:auto;padding:24px;color:var(--ash);font-size:.92rem;line-height:1.75}
  .modal__body h3{color:var(--ink);font-size:1rem;margin:22px 0 8px;font-family:var(--hud);letter-spacing:.02em}
  .modal__body h3:first-child{margin-top:0}
  .modal__body p{margin-bottom:10px}
  .modal__body ul{list-style:disc;padding-left:20px;display:grid;gap:5px;margin-bottom:10px}
  .modal__body table{width:100%;border-collapse:collapse;margin:8px 0 14px;font-size:.86rem}
  .modal__body th,.modal__body td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
  .modal__body th{background:var(--night-2);color:var(--ink)}
}

@layer motion{
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(108,255,90,.55)}70%{box-shadow:0 0 0 10px rgba(108,255,90,0)}100%{box-shadow:0 0 0 0 rgba(108,255,90,0)}}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @keyframes scan{from{background-position:0 0}to{background-position:0 -200px}}
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
    .meter>i{transition:none}
  }
}

@layer responsive{
  @media (max-width:960px){
    .brief__stage{grid-template-columns:1fr;grid-template-areas:"tabs" "view" "panel"}
    .cast{grid-template-columns:1fr}
    .crew{grid-template-columns:1fr}
    .foot{grid-template-columns:1fr 1fr}
    .modes{grid-template-columns:1fr}
    .zone{grid-template-columns:1fr}
    .hero__grid{grid-template-columns:1fr;grid-template-areas:"flag" "head" "sub" "hud" "act" "meta"}
    .hero__hud{max-width:520px}
  }
  @media (max-width:720px){
    .navlinks,.navcta .btn--ghost{display:none}
    .navcta .btn--go{display:none}
    .burger{display:grid}
    .shots{grid-template-columns:1fr 1fr}
    .board__row{grid-template-columns:40px 1fr auto;gap:12px;padding:12px 14px}
    .board__badge{display:none}
    .foot{grid-template-columns:1fr}
    .hud__stats{grid-template-columns:repeat(3,1fr)}
  }
  @media (max-width:460px){
    .shots{grid-template-columns:1fr}
    .hero__meta{gap:14px}
    .store-badges img{height:44px}
  }
}