:root {
    --bg: #070914; --ink: #F6F7FB; --mute: #9AA3B8; --line: rgba(255,255,255,.1);
    --tai: #E8303A; --mar: #2F7BF6; --gold: #FFD27A;
    --font: "Manrope", system-ui, -apple-system, sans-serif;
    --display: "Unbounded", "Manrope", system-ui, sans-serif;
  }
  * { box-sizing: border-box; margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    min-height: 100vh; overflow-x: hidden;
    background:
      radial-gradient(70vmax 50vmax at 10% -10%, rgba(232,48,58,.28), transparent 60%),
      radial-gradient(70vmax 50vmax at 95% 0%, rgba(47,123,246,.28), transparent 60%),
      radial-gradient(60vmax 40vmax at 50% 110%, rgba(255,210,122,.10), transparent 60%),
      var(--bg);
    background-attachment: fixed;
    color: var(--ink); font-family: var(--font);
    -webkit-tap-highlight-color: transparent;
  }

  /* Конфетти и звёзды — чистый CSS, без картинок */
  .confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
  .confetti i {
    position: absolute; top: -4vh; width: 8px; height: 14px; border-radius: 2px; opacity: .85;
    animation: fall linear infinite;
  }
  @keyframes fall {
    to { transform: translateY(112vh) rotate(540deg); }
  }

  .wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: max(40px, env(safe-area-inset-top)) 24px max(48px, env(safe-area-inset-bottom)); }

  /* Шапка-открытка */
  .hero { text-align: center; padding: 8px 0 34px; }
  .stamp {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px; border-radius: 100px;
    border: 1.5px dashed rgba(255,255,255,.35);
    font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--mute);
  }
  .rings { display: inline-flex; padding: 0 4px; }
  .rings i { width: 16px; height: 16px; border-radius: 50%; border: 3px solid; margin: 0 -2px; }
  .rings i:first-child { border-color: var(--tai); box-shadow: 0 0 12px var(--tai); }
  .rings i:last-child { border-color: var(--mar); box-shadow: 0 0 12px var(--mar); }
  .greet {
    margin-top: 22px;
    font-family: var(--display);
    font-size: clamp(18px, 2.6vw, 26px); font-weight: 500; color: var(--gold);
  }
  h1 {
    margin: 14px auto 16px; max-width: 13em;
    font-family: var(--display);
    font-size: clamp(36px, 6.6vw, 80px); font-weight: 900; line-height: 1.02; letter-spacing: -.03em;
  }
  h1 .gold {
    background: linear-gradient(90deg, #FF6B73, var(--gold) 50%, #6FA5FF);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 24px rgba(255,210,122,.35));
  }
  .lead { font-size: clamp(17px, 2vw, 22px); line-height: 1.45; color: var(--mute); max-width: 32em; margin: 0 auto; }

  /* Видеооткрытки героев */
  .cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
  @media (max-width: 1100px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .cards { grid-template-columns: minmax(0, 1fr); } }
  .card {
    position: relative; display: block; overflow: hidden;
    min-width: 0; container-type: inline-size;
    border-radius: 28px; aspect-ratio: 3 / 4;
    color: inherit; text-decoration: none;
    background: #0d111c;
    box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(0,0,0,.45);
    transition: transform .2s;
  }
  .card[href]:active { transform: scale(.98); }
  @media (hover: hover) { .card[href]:hover { transform: translateY(-4px); } }
  .card video, .card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
  .card .glow { position: absolute; inset: 0; box-shadow: inset 0 0 0 3px rgba(255,255,255,.08); border-radius: inherit; pointer-events: none; }
  .card .plate {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 70px 22px 22px;
    background: linear-gradient(to top, rgba(7,9,20,.95) 30%, rgba(7,9,20,0));
  }
  .card h2 { font-family: var(--display); font-size: clamp(18px, 7cqw, 28px); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
  .card p { margin-top: 6px; font-size: clamp(14px, 4.7cqw, 18px); color: var(--mute); line-height: 1.35; }
  .card .go {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
    padding: 10px 18px; border-radius: 100px;
    background: #fff; color: #0b0d17; font-weight: 800; font-size: 16px;
  }
  .card--soon .go { background: rgba(255,255,255,.14); color: #E6E9F2; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
  .card .live { font-family: var(--display);
    position: absolute; top: 16px; left: 16px;
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px; border-radius: 100px;
    background: rgba(7,9,20,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font-size: 13px; font-weight: 800; letter-spacing: .06em;
  }
  .card .live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FF4D5A; box-shadow: 0 0 8px #FF4D5A; animation: blink 1.4s infinite; }
  @keyframes blink { 50% { opacity: .25; } }

  .foot { margin-top: 40px; text-align: center; color: var(--mute); font-size: 15px; }
  .brand {
    margin: 48px auto 0; padding: 22px 0 0; max-width: 560px;
    border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
    color: var(--mute); font-size: 14px; text-align: center;
  }
  .brand img { height: 30px; width: auto; opacity: .9; }
  .brand a { color: var(--ink); text-decoration: none; font-weight: 700; padding: 6px 14px; border: 1px solid var(--line); border-radius: 100px; }

  @media (max-width: 620px) {
    .cards { gap: 14px; }
    .card { border-radius: 20px; }
    .card .plate { padding: 50px 14px 14px; }
    .card .go { padding: 8px 14px; font-size: 14px; }
    .wrap { padding-left: 16px; padding-right: 16px; }
  }
  @media (prefers-reduced-motion: reduce) { .confetti { display: none; } }

  /* Назад к режимам */
  .back {
    position: fixed; z-index: 5; top: max(16px, env(safe-area-inset-top)); left: 16px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 100px;
    background: rgba(7,9,20,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px;
  }

  /* Режимы на стартовом экране */
  .modes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  @media (max-width: 640px) { .modes { grid-template-columns: 1fr; } }
  .mode {
    position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5;
    border-radius: 32px; color: inherit; text-decoration: none; background: #0d111c;
    box-shadow: 0 0 0 1px var(--line), 0 30px 70px rgba(0,0,0,.5);
    transition: transform .2s;
  }
  .mode:nth-child(1) { transform: rotate(-1deg); }
  .mode:nth-child(2) { transform: rotate(1deg); }
  .mode:active { transform: scale(.98); }
  @media (hover: hover) { .mode:hover { transform: translateY(-4px); } }
  .mode video, .mode img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  .mode .plate { position: absolute; left: 0; right: 0; bottom: 0; padding: 90px 26px 26px; background: linear-gradient(to top, rgba(7,9,20,.96) 35%, rgba(7,9,20,0)); }
  .mode .kicker { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
  .mode h2 { margin-top: 8px; font-family: var(--display); font-size: clamp(26px, 3.6vw, 40px); font-weight: 900; line-height: 1.02; letter-spacing: -.02em; }
  .mode p { margin-top: 10px; font-size: clamp(15px, 1.7vw, 18px); color: var(--mute); line-height: 1.4; }
  .mode .go { display: inline-flex; margin-top: 16px; padding: 12px 20px; border-radius: 100px; background: #fff; color: #0b0d17; font-weight: 800; font-size: 16px; }

  /* Логотип в футере: светлые страницы — тёмный, тёмные — белый */
  .brand .logo-light { display: none; }
  body.mission .brand .logo-dark { display: none; }
  body.mission .brand .logo-light { display: inline; }

  /* ===== Стартовая: нейтральная, светлая, стильная ===== */
  body.start {
    --bg: #F5F1EB; --ink: #16151A; --mute: #6E6A73; --line: rgba(22,21,26,.1); --gold: #9A6B2F;
    background:
      radial-gradient(60vmax 45vmax at 0% 0%, rgba(255,207,186,.55), transparent 60%),
      radial-gradient(60vmax 45vmax at 100% 5%, rgba(200,210,255,.6), transparent 60%),
      radial-gradient(50vmax 40vmax at 50% 105%, rgba(255,236,200,.6), transparent 60%),
      var(--bg);
  }
  .start .pill {
    display: inline-block; padding: 8px 16px; border-radius: 100px;
    background: rgba(255,255,255,.7); border: 1px solid var(--line);
    font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mute);
  }
  .start .greet { color: var(--mute); }
  .start h1 .gold {
    background: linear-gradient(90deg, #FF8A6B, #C77DFF 55%, #6C8CFF);
    -webkit-background-clip: text; background-clip: text; color: transparent; filter: none;
  }
  .start .mode { transform: none; box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(40,30,60,.18); }
  .start .mode h2 { color: #FFFFFF; }
  .start .mode p { color: #E6E9F2; }
  .start .mode .kicker { color: #FFD9A8; }
  .start .brand { border-top-color: var(--line); }

  /* ===== Мир Миядзаки: акварельное небо, бумажные открытки, японская печать ===== */
  body.miyazaki {
    --bg: #EAF3F8; --ink: #22382A; --mute: #4F6355; --line: rgba(34,56,42,.14); --gold: #C2652E;
    --story: "Cormorant Garamond", "Lora", Georgia, serif;
    background: var(--bg);
  }
  body.miyazaki::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: url(media/miyazaki_bg.jpg) center bottom / cover no-repeat;
  }
  .miyazaki .stamp { border: 0; background: rgba(255,253,246,.75); color: var(--mute); letter-spacing: .2em; }
  .miyazaki .greet { font-family: var(--story); font-style: italic; font-weight: 600; font-size: clamp(22px, 3vw, 32px); color: var(--gold); }
  .miyazaki h1 { font-family: var(--story); font-weight: 700; letter-spacing: -.01em; line-height: .98; font-size: clamp(44px, 7.4vw, 92px); }
  .miyazaki h1 .gold {
    background: linear-gradient(90deg, #E3873E, #D1557A 55%, #7C6CD6);
    -webkit-background-clip: text; background-clip: text; color: transparent; filter: none; font-style: italic;
  }
  .miyazaki .lead { color: var(--mute); }
  .miyazaki .card {
    border: 10px solid #FFFDF6; border-radius: 22px; background: #FFFDF6;
    box-shadow: 0 18px 40px rgba(40,70,50,.28);
  }
  .miyazaki .card video, .miyazaki .card img { border-radius: 12px; }
  .miyazaki .card .glow { display: none; }
  .miyazaki .card .plate { padding: 60px 16px 16px; background: linear-gradient(to top, rgba(255,253,246,.97) 40%, rgba(255,253,246,0)); }
  .miyazaki .card h2 { font-family: var(--story); font-weight: 700; font-size: clamp(24px, 10cqw, 34px); color: var(--ink); }
  .miyazaki .card p { color: var(--mute); }
  .miyazaki .card .go { background: #2F5D3A; color: #fff; }
  .miyazaki .card--soon .go { background: rgba(47,93,58,.1); color: #405947; box-shadow: inset 0 0 0 1px rgba(47,93,58,.25); }
  .miyazaki .card .live { background: rgba(255,253,246,.88); color: #2F5D3A; font-family: var(--font); }
  .miyazaki .card .live::before { background: #5DBB63; box-shadow: 0 0 8px #5DBB63; }
  .miyazaki .back, .start .back { background: rgba(255,253,246,.85); color: var(--ink); }
  .miyazaki .foot { color: var(--mute); }
  .miyazaki .brand { background: rgba(255,253,246,.7); border-radius: 22px; border-top: 0; padding: 16px 20px; }
  .miyazaki .confetti i { border-radius: 70% 0 70% 0; width: 12px; height: 12px; opacity: .9; }