* {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      background: #f5efe6;
      color: #111;
      font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      display: block;
      width: 100%;
      -webkit-touch-callout: none;
      -webkit-user-drag: none;
      user-select: none;
      pointer-events: none;
    }

    /* リンク・ボタン内の画像はクリックを通す */
    a img, button img {
      pointer-events: auto;
    }

    .mock-shell {
      width: 100%;
      max-width: 430px;
      min-height: 100vh;
      margin: 0 auto;
      background: #f4efe3;
      overflow: hidden;
      position: relative;
    }

    :root {
      --base: #faf6f1;
      --paper: #ffffff;
      --ink: #2c2420;
      --muted: #8a8078;
      --line: rgba(44,36,32,.1);
      --accent: #c4a688;
      --soft: rgba(44,36,32,.07);
    }

    .mock-shell {
      width: 100%;
      max-width: 430px;
      min-height: 100vh;
      margin: 0 auto;
      background: #faf6f1;
      overflow: hidden;
      position: relative;
    }

    /* =========================
       HERO
    ========================= */

    .creative-hero {
      position: relative;
      overflow: hidden;
      border-radius: 0 0 40px 40px;
      margin-bottom: 32px;
    }

    .creative-nav {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 22px 18px;
    }

    .creative-logo {
      display: inline-flex;
      align-items: center;
    }

    .creative-logo__img {
      height: 28px;
      width: auto;
      display: block;
      filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.3));
    }

    .creative-logo::before { display: none; }

    .creative-login {
      padding: 9px 18px;
      border: none;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      color: var(--ink);
      background: #fff;
      box-shadow: 0 2px 12px rgba(0,0,0,.18);
      letter-spacing: .01em;
      transition: transform .15s, box-shadow .15s;
    }

    .creative-login:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 18px rgba(0,0,0,.25);
    }
    }

    .hero-visual {
      position: relative;
      width: 100%;
    }

    .hero-img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
    }

    .hero-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 60px 18px 28px;
      background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 60%, transparent 100%);
    }

    .hero-kicker {
      display: inline-block;
      margin-bottom: 10px;
      padding: 5px 9px;
      background: var(--lime);
      border: 1.5px solid rgba(0,0,0,.25);
      font-size: 10px;
      font-weight: 1000;
      letter-spacing: .1em;
      color: var(--ink);
    }

    .hero-title {
      margin: 0 0 6px;
      font-size: 46px;
      line-height: .95;
      letter-spacing: -.07em;
      font-weight: 1000;
      color: #fff;
    }

    .hero-title .thin {
      display: block;
      font-weight: 700;
      letter-spacing: -.065em;
    }

    .hero-lead {
      margin: 10px 0 0;
      font-size: 12px;
      line-height: 1.8;
      color: rgba(255,255,255,.72);
      font-weight: 700;
    }

    .hero-actions {
      display: grid;
      gap: 10px;
      margin-top: 20px;
    }

    .main-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 54px;
      padding: 0 18px;
      background: #fff;
      color: var(--ink);
      border: none;
      font-size: 16px;
      font-weight: 1000;
      letter-spacing: -.02em;
    }

    .main-btn::after {
      content: "→";
      font-size: 20px;
    }

    .sub-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 0 18px;
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255,255,255,.5);
      font-size: 14px;
      font-weight: 900;
      letter-spacing: -.01em;
    }

    .sub-note {
      text-align: center;
      color: rgba(255,255,255,.5);
      font-size: 10px;
      font-weight: 800;
    }

    /* =========================
       ABOUT STRIP
    ========================= */

    .about-strip {
      margin: 40px 18px 40px;
      border-radius: 26px;
      overflow: hidden;
      background-color: #1a1410;
      background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
      background-size: 18px 18px;
      padding: 0 0 40px;
    }

    /* ── イメージヒーロー ── */
    .about-hero {
      position: relative;
      overflow: hidden;
      margin: 20px 18px 0;
      border-radius: 18px;
    }

    .about-hero__img {
      width: 100%;
      height: 260px;
      background: url('/images/img_2.jpg') center / cover no-repeat;
    }

    .about-hero__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(20,14,10,.52) 0%,
        rgba(20,14,10,.1) 48%,
        transparent 65%
      );
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 22px 20px;
    }

    .about-hero__label {
      display: inline-block;
      margin-bottom: 8px;
      padding: 3px 12px;
      background: rgba(255,255,255,.22);
      border: 1px solid rgba(255,255,255,.4);
      border-radius: 999px;
      backdrop-filter: blur(8px);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .22em;
      color: rgba(255,255,255,.95);
      align-self: flex-start;
    }

    .about-hero__headline {
      margin: 0;
      font-size: 26px;
      font-weight: 800;
      line-height: 1.3;
      letter-spacing: -.03em;
      color: #fff;
      text-shadow: 0 2px 16px rgba(0,0,0,.25);
    }

    /* ── フィーチャーリスト ── */
    .about-features-new {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin: 0;
      padding: 0 24px;
      background: none;
      background-image: none;
    }

    .about-feature-new {
      display: flex;
      flex-direction: column;
      padding: 22px 0;
      border-bottom: 1px solid rgba(255,255,255,.07);
      position: relative;
      overflow: hidden;
    }

    .about-feature-new:last-child {
      border-bottom: none;
    }

    /* 大きい装飾ナンバー（背景） */
    .about-feature-new::before {
      content: attr(data-num);
      position: absolute;
      right: -8px; top: 50%;
      transform: translateY(-50%);
      font-size: 96px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -.06em;
      color: rgba(255,255,255,.04);
      pointer-events: none;
      z-index: 0;
    }

    .about-feature-new__num {
      display: block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .2em;
      color: var(--accent);
      margin-bottom: 9px;
      position: relative;
      z-index: 1;
    }

    .about-feature-new__body {
      flex: none;
      position: relative;
      z-index: 1;
    }

    .about-feature-new__title {
      margin: 0 0 8px;
      font-size: 20px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -.035em;
      line-height: 1.2;
    }

    .about-feature-new__desc {
      margin: 0;
      font-size: 13px;
      color: rgba(255,255,255,.68);
      font-weight: 400;
      line-height: 1.8;
    }

    /* ── コピー ── */
    .about-strip__copy {
      text-align: left;
      padding: 24px 24px 0;
      border-top: 1px solid rgba(255,255,255,.07);
      margin-top: 8px;
    }

    .about-strip__title {
      margin: 0 0 14px;
      font-size: 28px;
      line-height: 1.25;
      letter-spacing: -.04em;
      font-weight: 800;
      color: #fff;
    }

    .about-strip__title em {
      font-style: normal;
      color: var(--accent);
    }

    .about-strip__text {
      margin: 0;
      color: rgba(255,255,255,.65);
      font-size: 13px;
      line-height: 1.9;
      font-weight: 400;
    }

    /* 旧クラスは非表示 */
    .about-strip__eyebrow,
    .about-strip__features,
    .about-feature { display: none; }

    .mini-tags {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin-top: 20px;
    }

    .mini-tags span {
      padding: 6px 14px;
      background: var(--base);
      color: var(--muted);
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .06em;
    }

    .mini-tags span:nth-child(2) {
      background: var(--ink);
      color: #fff;
    }

    .mini-tags span:nth-child(4) {
      background: var(--accent);
      color: #fff;
    }

    /* =========================
       SECTIONS
    ========================= */

    .section {
      padding: 40px 20px 44px;
      position: relative;
    }

    .section--cream {
      background: var(--base);
    }

    .section--paper {
      background: var(--paper);
    }

    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 16px;
      margin-bottom: 20px;
    }

    .section-kicker {
      display: inline-block;
      margin-bottom: 6px;
      color: var(--accent);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .14em;
    }

    .section-title {
      margin: 0;
      font-size: 26px;
      line-height: 1.15;
      letter-spacing: -.04em;
      font-weight: 700;
      color: var(--ink);
    }

    .section-more {
      flex: 0 0 auto;
      padding: 7px 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
      background: var(--paper);
      color: var(--ink);
    }

    /* picked */

    .picked-strip {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding: 4px 0 16px;
      scroll-snap-type: x mandatory;
    }

    .picked-strip::-webkit-scrollbar { display: none; }

    .picked-card {
      flex: 0 0 54%;
      scroll-snap-align: start;
      border-radius: 18px;
      overflow: hidden;
      position: relative;
      box-shadow: 0 8px 28px rgba(44,36,32,.18);
      display: block;
    }

    .picked-card__img {
      aspect-ratio: 8 / 16;
      overflow: hidden;
      position: relative;
    }

    .picked-card__img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    /* 下部グラデーション */
    .picked-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.2) 45%,
        transparent 65%);
      pointer-events: none;
    }

    /* ランクバッジ（左上） */
    .picked-card__meta {
      position: absolute;
      top: 10px; left: 10px;
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 5px 10px 5px 8px;
      border-radius: 10px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
      color: #fff;
      background: rgba(0,0,0,.45);
      backdrop-filter: blur(6px);
      z-index: 2;
    }

    /* 1位：ゴールド */
    .picked-card:nth-child(1) .picked-card__meta {
      background: linear-gradient(135deg, #b8860b, #ffd700);
      color: #3a2800;
      box-shadow: 0 2px 12px rgba(255,200,0,.5);
    }
    /* 2位：シルバー */
    .picked-card:nth-child(2) .picked-card__meta {
      background: linear-gradient(135deg, #888, #c8c8c8);
      color: #222;
      box-shadow: 0 2px 10px rgba(180,180,180,.4);
    }
    /* 3位：ブロンズ */
    .picked-card:nth-child(3) .picked-card__meta {
      background: linear-gradient(135deg, #8b4513, #cd7f32);
      color: #fff;
      box-shadow: 0 2px 10px rgba(180,100,30,.4);
    }

    .picked-card__rank {
      font-size: 16px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -.02em;
    }

    .picked-card__meta-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0;
    }

    /* 下部情報 */
    .picked-card__info {
      position: absolute;
      bottom: 14px; left: 14px; right: 14px;
      z-index: 2;
    }

    .picked-card__info-title {
      margin: 0 0 3px;
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -.02em;
    }

    .picked-card__info-sub {
      margin: 0;
      font-size: 10px;
      color: rgba(255,255,255,.6);
      letter-spacing: .04em;
    }

    /* new drops */

    .drop-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .drop-card {
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      background: var(--paper);
      padding: 4px;
      box-shadow: 0 2px 10px rgba(44,36,32,.08);
    }

    .drop-card__img {
      aspect-ratio: 8 / 16;
      border-radius: 7px;
      overflow: hidden;
    }

    .drop-card__img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    .drop-card:nth-child(2n) {
      transform: translateY(10px);
    }

    .drop-card::after {
      content: "NEW";
      position: absolute;
      right: 6px;
      top: 6px;
      padding: 3px 6px;
      background: var(--accent);
      color: #fff;
      border-radius: 999px;
      font-size: 8px;
      font-weight: 600;
      letter-spacing: .04em;
    }

    /* mood */

    .mood-board {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    .mood-card {
      aspect-ratio: 8 / 16;
      position: relative;
      overflow: hidden;
      border-radius: 18px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      box-shadow: 0 6px 20px rgba(44,36,32,.14);
    }

    .mood-card__img {
      position: absolute;
      inset: 0;
      overflow: hidden;
      transition: transform .4s ease;
    }

    .mood-card__img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    .mood-card:active .mood-card__img {
      transform: scale(1.05);
    }

    /* グラデーションオーバーレイ */
    .mood-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.2)  50%,
        transparent 75%
      );
      pointer-events: none;
    }

    /* カテゴリ名 + ボタンのコンテナ */
    .mood-card__body {
      position: relative;
      z-index: 2;
      padding: 14px 14px 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .mood-card__name {
      font-size: 20px;
      font-weight: 600;
      color: #fff;
      letter-spacing: -.02em;
      line-height: 1.1;
    }

    .mood-card__tag {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 9px 0;
      background: var(--accent);
      border: none;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      color: #fff;
    }

    /* how to */

    .how-section {
      padding: 0 !important;
      overflow: hidden;
      border-radius: 0;
    }

    .how-hero {
      position: relative;
      height: 240px;
      overflow: hidden;
    }

    .how-hero__img {
      position: absolute;
      inset: 0;
      background: url('/images/mig_3.jpg') center / cover no-repeat;
    }

    .how-hero__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(10,8,6,.78) 0%,
        rgba(10,8,6,.2) 50%,
        transparent 70%
      );
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 22px 24px;
    }

    .how-hero__kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .26em;
      color: #fff;
      opacity: .85;
    }

    .how-hero__kicker::before {
      content: "";
      display: inline-block;
      width: 20px;
      height: 1.5px;
      background: #fff;
      opacity: .7;
    }

    .how-hero__title {
      margin: 0;
      font-size: 24px;
      font-weight: 500;
      line-height: 1.45;
      letter-spacing: .01em;
      color: #fff;
    }

    .how-hero__title strong {
      display: block;
      font-size: 34px;
      font-weight: 800;
      letter-spacing: -.04em;
      line-height: 1.1;
    }

    .how-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 24px 20px 32px;
      background: var(--paper);
    }

    .how-item {
      display: flex;
      align-items: flex-start;
      gap: 0;
      padding: 0;
      background: var(--base);
      border-radius: 18px;
      overflow: hidden;
      position: relative;
    }

    .how-item--last { padding-bottom: 0; }
    .how-item + .how-item::before { display: none; }

    /* 左の番号カラム */
    .how-step-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
      width: 68px;
      padding: 20px 0;
      background: var(--ink);
      gap: 0;
    }

    .how-num {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.25);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 900;
      color: #fff;
      letter-spacing: -.02em;
    }

    .how-connector { display: none; }

    .how-body {
      flex: 1;
      padding: 18px 18px 18px 16px;
    }

    .how-title {
      margin: 0 0 6px;
      font-size: 16px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.025em;
    }

    .how-text {
      margin: 0;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.75;
      font-weight: 400;
    }

    /* final */

    .final-cta {
      position: relative;
      min-height: 420px;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      padding: 0;
    }

    /* 背景画像 */
    .final-bg {
      position: absolute;
      inset: 0;
      background: url('/images/img_6.jpg') center / cover no-repeat;
      z-index: 0;
      transform-origin: center;
      animation: finalBgBreath 10s ease-in-out infinite alternate;
    }

    @keyframes finalBgBreath {
      from { transform: scale(1); }
      to   { transform: scale(1.05); }
    }

    /* オーバーレイ */
    .final-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(to top,
          rgba(6,4,10,.95) 0%,
          rgba(6,4,10,.7)  40%,
          rgba(6,4,10,.3)  70%,
          rgba(6,4,10,.1)  100%
        );
    }

    .final-particles {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
    }

    /* ひし形スパークル */
    .final-pt {
      position: absolute;
      width: 10px; height: 10px;
      background: rgba(255,255,255,.9);
      transform: rotate(45deg);
      border-radius: 2px;
      box-shadow: 0 0 8px 3px rgba(255,255,255,.5);
    }

    .final-pt--1 { top: 10%; left: 8%;   animation: finalPt 3.0s .0s  ease-in-out infinite; }
    .final-pt--2 { top: 18%; right: 11%; animation: finalPt 2.6s .7s  ease-in-out infinite; }
    .final-pt--3 { top: 38%; left: 5%;   animation: finalPt 3.4s 1.4s ease-in-out infinite; }
    .final-pt--4 { top: 30%; right: 7%;  animation: finalPt 2.8s 0.3s ease-in-out infinite; }
    .final-pt--5 { top: 55%; left: 42%;  animation: finalPt 3.8s 1.9s ease-in-out infinite; }
    .final-pt--6 { top: 65%; right: 18%; animation: finalPt 3.2s 1.0s ease-in-out infinite; }
    .final-pt--7 { top: 25%; left: 32%;  animation: finalPt 4.0s 2.3s ease-in-out infinite; }
    .final-pt--8 { top: 48%; right: 28%; animation: finalPt 2.4s 0.6s ease-in-out infinite; }

    @keyframes finalPt {
      0%   { opacity: 0; transform: rotate(45deg) scale(.3); }
      25%  { opacity: 1; transform: rotate(45deg) scale(1.3); }
      60%  { opacity: .7; transform: rotate(45deg) scale(1); }
      100% { opacity: 0; transform: rotate(45deg) scale(.2); }
    }

    /* グローイングドット */
    .final-dot {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      animation: finalDot 4s ease-in-out infinite alternate;
    }

    .final-dot--1 {
      width: 7px; height: 7px;
      top: 14%; left: 22%;
      background: rgba(255,230,120,1);
      box-shadow: 0 0 14px 5px rgba(255,200,80,.65);
      animation-delay: .5s;
    }

    .final-dot--2 {
      width: 9px; height: 9px;
      top: 32%; right: 20%;
      background: rgba(255,180,255,1);
      box-shadow: 0 0 18px 7px rgba(220,100,255,.55);
      animation-delay: 1.5s;
    }

    .final-dot--3 {
      width: 6px; height: 6px;
      top: 52%; left: 18%;
      background: rgba(140,210,255,1);
      box-shadow: 0 0 14px 5px rgba(80,180,255,.55);
      animation-delay: 2.5s;
    }

    @keyframes finalDot {
      from { opacity: .35; transform: scale(.7); }
      to   { opacity: 1;   transform: scale(1.5); }
    }

    /* コンテンツ */
    .final-content {
      position: relative;
      z-index: 3;
      width: 100%;
      padding: 0 24px 48px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .final-label {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .28em;
      color: rgba(255,255,255,.6);
    }

    .final-label__line {
      flex: 1;
      height: 1px;
      background: rgba(255,255,255,.25);
      min-width: 24px;
      max-width: 40px;
    }

    .final-title {
      position: relative;
      margin: 0 0 16px;
      font-size: 38px;
      line-height: 1.1;
      letter-spacing: -.04em;
      font-weight: 600;
      color: #fff;
    }

    /* タイトルの光 */
    .final-title::after {
      content: "";
      position: absolute;
      bottom: -8px; left: 0;
      width: 48px; height: 3px;
      border-radius: 2px;
      background: var(--accent);
    }

    .final-text {
      margin: 24px 0 32px;
      color: rgba(255,255,255,.75);
      font-size: 14px;
      line-height: 1.9;
      font-weight: 400;
    }

    .final-btn {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: 64px;
      padding: 0 20px 0 28px;
      background: #fff;
      color: var(--ink);
      border-radius: 18px;
      font-size: 16px;
      font-weight: 800;
      letter-spacing: -.01em;
      overflow: hidden;
      box-shadow:
        0 0 0 4px rgba(255,255,255,.15),
        0 12px 40px rgba(0,0,0,.4);
      transition: transform .2s, box-shadow .2s;
    }

    /* ボタンシマー */
    .final-btn::before {
      content: "";
      position: absolute;
      top: 0; left: -70%;
      width: 45%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(196,166,136,.4), transparent);
      transform: skewX(-20deg);
      animation: finalShimmer 3s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes finalShimmer {
      0%        { left: -70%; opacity: 0; }
      8%        { opacity: 1; }
      55%, 100% { left: 140%; opacity: 0; }
    }

    .final-btn__text {
      position: relative;
      z-index: 1;
    }

    .final-btn__arrow {
      position: relative;
      z-index: 1;
      width: 40px; height: 40px;
      border-radius: 12px;
      background: var(--ink);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }

    .final-btn:hover {
      transform: translateY(-2px);
      box-shadow:
        0 0 0 5px rgba(255,255,255,.2),
        0 16px 50px rgba(0,0,0,.5);
    }

    .final-note {
      margin: 14px 0 0;
      width: 100%;
      text-align: center;
      font-size: 10.5px;
      color: rgba(255,255,255,.3);
      letter-spacing: .04em;
    }

    .floating-btn {
      position: fixed;
      left: 50%;
      bottom: 14px;
      z-index: 99;
      width: min(390px, calc(100% - 28px));
      transform: translateX(-50%) translateY(80px);
      display: block;
      border-radius: 5rem;
      opacity: 0;
      pointer-events: none;
      transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .35s ease;
    }

    .floating-btn.is-visible {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    .floating-btn .space-btn {
      width: 100%;
      box-shadow: 0 8px 32px rgba(0,0,0,.4);
    }

    /* ===== FOOTER ===== */
    .aift-footer {
      background: #faf8f5;
      border-top: 1px solid var(--line);
      overflow: hidden;
    }

    /* 上部アクセントライン */
    .aift-footer::before {
      content: "";
      display: block;
      height: 3px;
      background: linear-gradient(90deg, #c4a688 0%, #e8c4a0 40%, #c4a688 100%);
    }

    .aift-wrap {
      display: flex;
      flex-direction: column;
      padding: 36px 24px 0;
    }

    /* ── ブランド ── */
    .aift-brand {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding-bottom: 28px;
      border-bottom: 1px solid var(--line);
    }

    .aift-brand__name { display: none; }

    .aift-brand__logo {
      height: 32px;
      width: auto;
      display: block;
      margin-bottom: 5px;
      filter: brightness(0) saturate(100%);
    }

    .aift-brand__catch {
      margin: 0;
      font-size: 11px;
      color: var(--muted);
      font-weight: 400;
      letter-spacing: .05em;
    }

    .aift-brand__badge {
      flex-shrink: 0;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .22em;
      color: var(--muted);
      align-self: flex-start;
      margin-top: 4px;
    }

    /* ── ナビリスト ── */
    .aift-nav {
      padding: 12px 0 24px;
      border-bottom: 1px solid var(--line);
    }

    .aift-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .aift-item {
      display: flex;
    }

    .aift-link {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 11px 0;
      font-size: 12.5px;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: .01em;
      transition: color .15s;
      width: 100%;
    }

    .aift-link::before {
      content: "";
      width: 4px; height: 4px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
      opacity: .6;
    }

    .aift-link:hover {
      color: var(--ink);
    }

    /* ── ボトムバー ── */
    .aift-legal {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px 12px;
      padding: 20px 0 14px;
    }

    .aift-legal__link {
      font-size: 10.5px;
      color: var(--muted);
      font-weight: 400;
      transition: color .15s;
    }

    .aift-legal__link:hover { color: var(--ink); }

    .aift-legal__sep {
      color: var(--line);
      font-size: 10px;
    }

    .aift-copy {
      font-size: 10px;
      color: rgba(44,36,32,.28);
      letter-spacing: .06em;
      text-align: center;
      padding: 14px 24px 28px;
      border-top: 1px solid var(--line);
    }
      border-top: 1px solid rgba(255,255,255,.07);
      padding-top: 20px;
    }

    @media (min-width: 431px) {
      .mock-shell {
        min-height: auto;
      }
    }
    /* =========================
   CANVAS SCOPE
========================= */

.scope-section {
  position: relative;
  padding: 0 0 50px;
  background: #16141a;
  color: #fff;
  overflow: hidden;
  border-radius: 40px 40px 0 0;
}

.scope-head {
  position: relative;
  margin-bottom: 0;
  overflow: hidden;
}

.scope-img-wrap {
  position: relative;
  width: 100%;
}

.scope-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,.52);
}

.scope-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.scope-img-badge,
.scope-img-num {
  display: none;
}

.scope-text-block {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px 18px;
}

.scope-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.scope-kicker-new {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
}

.scope-eyebrow-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.25);
}

.scope-title {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.04em;
  font-weight: 700;
  color: #fff;
}

.scope-title em {
  display: none;
}

.scope-text {
  margin: 0;
  color: rgba(255,255,255,.9);
  font-size: 12px;
  line-height: 1.8;
  font-weight: 500;
  border-left: none;
  padding-left: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* ══════════════════════════════════
   SCOPE WINDOW SCENE — Mysterious
   ══════════════════════════════════ */
.scope-windowScene {
  position: relative;
  z-index: 2;
  padding: 0;
  background: linear-gradient(175deg, #0d0b1c 0%, #0a0816 50%, #100d20 100%);
  overflow: hidden;
}

/* 上部から降り注ぐ淡い光 */
.scope-windowScene::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 260px; height: 55%;
  background: linear-gradient(to bottom,
    rgba(140,110,220,.18) 0%,
    rgba(100,80,180,.06) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: mistBreath 7s ease-in-out infinite alternate;
}

@keyframes mistBreath {
  from { opacity: .5; transform: translateX(-50%) scaleX(.85); }
  to   { opacity: 1;  transform: translateX(-50%) scaleX(1.15); }
}

/* 底部の霧 */
.scope-windowScene::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to top, rgba(80,50,160,.2) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* ゲームタイトルエリア */
.scope-title-area {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: linear-gradient(to bottom,
    rgba(10,8,22,.55) 0%,
    rgba(10,8,22,.2) 50%,
    rgba(10,8,22,.55) 100%);
  pointer-events: none;
}

.scope-title-kicker {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3em;
  color: rgba(255,255,255,.75);
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,.8);
}

.scope-title-main {
  margin: 0 0 10px;
  font-size: clamp(38px, 14vw, 64px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.03em;
  color: #fff;
  text-shadow:
    0 0 30px rgba(160,130,255,.5),
    0 0 80px rgba(120,90,220,.25);
  animation: titleGlow 4s ease-in-out infinite alternate;
}

.scope-title-sub {
  margin: 0;
  font-size: 11px;
  color: rgba(255,255,255,.75);
  letter-spacing: .08em;
  text-shadow: 0 1px 8px rgba(0,0,0,.8);
}

/* ── 微細な塵のような粒子 ── */
.scope-starfield {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(200,190,255,.55) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 12%, rgba(180,170,255,.5)  0 1px, transparent 1.5px),
    radial-gradient(circle at 44% 7%,  rgba(220,210,255,.45) 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% 24%, rgba(200,190,255,.6)  0 1px, transparent 1.5px),
    radial-gradient(circle at 24% 42%, rgba(170,160,240,.5)  0 1px, transparent 1.5px),
    radial-gradient(circle at 91% 37%, rgba(190,180,255,.45) 0 1px, transparent 1.5px),
    radial-gradient(circle at 56% 54%, rgba(200,190,255,.4)  0 1px, transparent 1.5px),
    radial-gradient(circle at 7%  70%, rgba(180,170,240,.5)  0 1px, transparent 1.5px),
    radial-gradient(circle at 77% 65%, rgba(170,160,230,.45) 0 1px, transparent 1.5px),
    radial-gradient(circle at 34% 82%, rgba(200,190,255,.5)  0 1px, transparent 1.5px),
    radial-gradient(circle at 60% 88%, rgba(180,170,240,.4)  0 1px, transparent 1.5px),
    radial-gradient(circle at 50% 95%, rgba(160,150,220,.45) 0 1px, transparent 1.5px);
  animation: dustDrift 5s ease-in-out infinite alternate;
}

@keyframes dustDrift {
  from { opacity: .4; }
  to   { opacity: .9; }
}

/* ── 霧のオーブ ── */
.scope-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(55px);
}

.scope-orb--1 {
  width: 220px; height: 220px;
  top: -60px; left: -55px;
  background: radial-gradient(circle, rgba(100,70,200,.45) 0%, transparent 70%);
  animation: orbDrift1 10s ease-in-out infinite alternate;
}

.scope-orb--2 {
  width: 170px; height: 170px;
  top: 30px; right: -45px;
  background: radial-gradient(circle, rgba(60,100,200,.35) 0%, transparent 70%);
  animation: orbDrift2 12s ease-in-out infinite alternate;
}

.scope-orb--3 {
  width: 140px; height: 140px;
  bottom: 30px; left: 22%;
  background: radial-gradient(circle, rgba(140,60,200,.3) 0%, transparent 70%);
  animation: orbDrift3 8s ease-in-out infinite alternate;
}

@keyframes orbDrift1 {
  from { transform: translate(0, 0); }
  to   { transform: translate(38px, 55px); }
}
@keyframes orbDrift2 {
  from { transform: translate(0, 0); }
  to   { transform: translate(-28px, 60px); }
}
@keyframes orbDrift3 {
  from { transform: translate(0, 0); }
  to   { transform: translate(42px, -32px); }
}

/* ── ラベルエリア（削除済み） ── */
.scope-window-label,
.scope-window-tag,
.scope-window-title,
.scope-window-desc,
.scope-game-title-area,
.scope-push-start { display: none; }

/* ── ゲームタイトル・stats CSS（削除済み） ── */
.scope-game-header, .scope-game-badge, .scope-game-new,
.scope-game-stats, .scope-game-stat { display: none; }

@keyframes tagGlow { from {} to {} }
@keyframes titleGlow { from {} to {} }
@keyframes logoGlow { from {} to {} }
@keyframes pushBlink { from {} to {} }
@keyframes newBlink { from {} to {} }

/* ── コーナーブラケット ── */
.scope-game-corner {
  position: absolute;
  width: 22px; height: 22px;
  z-index: 10;
  pointer-events: none;
}

.scope-game-corner--tl { top: -3px; left: -3px;
  border-top: 2.5px solid #e8600a; border-left: 2.5px solid #e8600a; }
.scope-game-corner--tr { top: -3px; right: -3px;
  border-top: 2.5px solid #e8600a; border-right: 2.5px solid #e8600a; }
.scope-game-corner--bl { bottom: -3px; left: -3px;
  border-bottom: 2.5px solid #e8600a; border-left: 2.5px solid #e8600a; }
.scope-game-corner--br { bottom: -3px; right: -3px;
  border-bottom: 2.5px solid #e8600a; border-right: 2.5px solid #e8600a; }

/* ── PUSH START ── */
.scope-push-start {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-bottom: 32px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  color: rgba(180,110,30,.7);
  animation: pushBlink 1.1s ease-in-out infinite alternate;
}

@keyframes pushBlink {
  from { opacity: .35; }
  to   { opacity: 1; }
}

/* ── ポータルラッパー ── */
.scope-window-portal {
  position: relative;
  z-index: 1;
  margin: 32px 20px 0;
}

.scope-window-ring {
  position: absolute;
  inset: -10px;
  border-radius: 28px;
  pointer-events: none;
  z-index: 0;
}

.scope-window-ring--1 {
  border: 1px solid rgba(140,110,230,.4);
  box-shadow: 0 0 28px rgba(120,90,220,.4), inset 0 0 18px rgba(120,90,220,.12);
  animation: ringPulse1 4s ease-in-out infinite alternate;
}

.scope-window-ring--2 {
  inset: -22px;
  border-radius: 36px;
  border: 1px solid rgba(100,80,200,.18);
  box-shadow: 0 0 55px rgba(100,80,220,.25);
  animation: ringPulse2 6s ease-in-out infinite alternate;
}

@keyframes ringPulse1 {
  from { opacity: .4; box-shadow: 0 0 16px rgba(120,90,220,.3), inset 0 0 10px rgba(120,90,220,.08); }
  to   { opacity: 1;  box-shadow: 0 0 42px rgba(150,110,255,.55), inset 0 0 22px rgba(150,110,255,.18); }
}
@keyframes ringPulse2 {
  from { opacity: .25; }
  to   { opacity: .75; }
}

/* コーナーブラケット（控えめに） */
.scope-game-corner {
  position: absolute;
  width: 18px; height: 18px;
  z-index: 10;
  pointer-events: none;
}

.scope-game-corner--tl { top: -2px; left: -2px;
  border-top: 1.5px solid rgba(160,130,255,.5); border-left: 1.5px solid rgba(160,130,255,.5); }
.scope-game-corner--tr { top: -2px; right: -2px;
  border-top: 1.5px solid rgba(160,130,255,.5); border-right: 1.5px solid rgba(160,130,255,.5); }
.scope-game-corner--bl { bottom: -2px; left: -2px;
  border-bottom: 1.5px solid rgba(160,130,255,.5); border-left: 1.5px solid rgba(160,130,255,.5); }
.scope-game-corner--br { bottom: -2px; right: -2px;
  border-bottom: 1.5px solid rgba(160,130,255,.5); border-right: 1.5px solid rgba(160,130,255,.5); }

/* ── 窓 ── */
.scope-window {
  position: relative;
  z-index: 1;
  height: 340px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(150,120,255,.3),
    0 0 35px rgba(120,90,220,.45),
    0 0 80px rgba(100,70,200,.2),
    0 24px 70px rgba(0,0,0,.8);
}

/* 窓縁の闇 */
.scope-window::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background:
    linear-gradient(to right,  rgba(4,3,14,.7) 0%, transparent 22%),
    linear-gradient(to left,   rgba(4,3,14,.7) 0%, transparent 22%),
    linear-gradient(to bottom, rgba(4,3,14,.45) 0%, transparent 18%),
    linear-gradient(to top,    rgba(0,0,0,.35)  0%, transparent 14%);
}

/* 神秘の光柱 */
.scope-window::after {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 80%;
  z-index: 3;
  background: linear-gradient(to bottom,
    rgba(190,170,255,.16) 0%,
    rgba(170,150,240,.05) 40%,
    transparent 70%);
  pointer-events: none;
  animation: lightBeam 6s ease-in-out infinite alternate;
}

@keyframes lightBeam {
  from { opacity: .5; }
  to   { opacity: 1; }
}

.scope-window__sky {
  position: absolute;
  inset: 0;
  background-image: url('/images/mado.jpg');
  background-size: cover;
  background-position: center;
  animation: skyBreath 9s ease-in-out infinite alternate;
}

@keyframes skyBreath {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}

.scope-window__sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%,
    rgba(180,160,220,.2) 0%,
    rgba(100,80,160,.08) 50%,
    transparent 70%);
  animation: mysticPulse 4s ease-in-out infinite;
}

.scope-window__sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.22) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 20%, rgba(255,255,255,.26) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 65%, rgba(255,255,255,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 75%, rgba(255,255,255,.14) 0 1px, transparent 2px),
    radial-gradient(circle at 85% 55%, rgba(255,255,255,.22) 0 1px, transparent 2px),
    radial-gradient(circle at 10% 60%, rgba(255,255,255,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 65% 40%, rgba(200,180,255,.24) 0 2px, transparent 3px);
  animation: starTwinkle 3s ease-in-out infinite alternate;
}

@keyframes mysticPulse {
  0%, 100% { opacity: .6; }
  50%       { opacity: 1; }
}

@keyframes starTwinkle {
  0%   { opacity: .5; transform: scale(1); }
  100% { opacity: 1;  transform: scale(1.04); }
}

.scope-window__mountain { display: none; }

/* 窓枠クロスバー */
.scope-window__frame {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(to right,
      transparent calc(50% - 1.5px),
      rgba(220,200,255,.35) calc(50% - 1.5px) calc(50% + 1.5px),
      transparent calc(50% + 1.5px)
    ),
    linear-gradient(to bottom,
      transparent calc(42% - 1.5px),
      rgba(220,200,255,.35) calc(42% - 1.5px) calc(42% + 1.5px),
      transparent calc(42% + 1.5px)
    );
  box-shadow: inset 0 0 60px rgba(0,0,0,.45);
}

/* ソナーパルス */
.scope-window-peek {
  position: absolute;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  z-index: 7;
  width: 36px; height: 36px;
  pointer-events: none;
}

.scope-window-peek::before,
.scope-window-peek::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,220,140,.8);
  animation: sonarPulse 2.4s ease-out infinite;
}

.scope-window-peek::after {
  animation-delay: 1.2s;
}

@keyframes sonarPulse {
  0%   { transform: scale(.3); opacity: .9; }
  100% { transform: scale(3);  opacity: 0; }
}

.scope-window__scopeIcon,
.scope-window__scopeIcon::before,
.scope-window__scopeIcon::after { display: none; }

/* キャプション */
.scope-caption { display: none; }

/* ── キラキラスパークル ── */
.scope-sparkles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.scope-sparkle {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 3px rgba(255,255,255,.7), 0 0 14px 6px rgba(210,190,255,.35);
}

/* 各スパークル位置・サイズ・遅延 */
.scope-sparkle--1 { top: 12%; left: 8%; width: 5px; height: 5px;
  animation: sparklePop 3.2s ease-in-out .0s infinite; }
.scope-sparkle--2 { top: 18%; right: 10%; width: 8px; height: 8px;
  animation: sparklePop 2.8s ease-in-out .6s infinite; }
.scope-sparkle--3 { top: 52%; left: 5%; width: 4px; height: 4px;
  animation: sparklePop 3.6s ease-in-out 1.1s infinite; }
.scope-sparkle--4 { top: 48%; right: 6%; width: 6px; height: 6px;
  animation: sparklePop 3.0s ease-in-out 1.8s infinite; }
.scope-sparkle--5 { top: 72%; left: 14%; width: 5px; height: 5px;
  animation: sparklePop 2.6s ease-in-out .4s infinite; }
.scope-sparkle--6 { top: 68%; right: 15%; width: 7px; height: 7px;
  animation: sparklePop 3.4s ease-in-out 2.2s infinite; }
.scope-sparkle--7 { top: 32%; left: 50%; width: 4px; height: 4px;
  animation: sparklePop 4.0s ease-in-out .9s infinite; }

@keyframes sparklePop {
  0%   { opacity: 0; transform: scale(0.3); }
  25%  { opacity: 1; transform: scale(1.3); }
  55%  { opacity: .8; transform: scale(1); }
  85%  { opacity: .3; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(0.2); }
}

/* ── スタートボタン ── */
.scope-startBtn {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 40px);
  margin: 28px 20px 0;
  min-height: 68px;
  padding: 0 28px;
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 40%, #6d28d9 70%, #5b21b6 100%);
  color: #fff;
  border: none;
  border-radius: 18px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: .04em;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  box-shadow:
    0 0 0 3px rgba(167,139,250,.35),
    0 0 0 8px rgba(167,139,250,.1),
    0 10px 48px rgba(109,40,217,.7),
    0 4px 16px rgba(109,40,217,.5),
    inset 0 1px 0 rgba(255,255,255,.25);
  animation: btnShine 3s ease-in-out infinite;
}

/* シマー光沢 */
.scope-startBtn::before {
  content: "";
  position: absolute;
  top: 0; left: -70%;
  width: 45%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.35) 50%,
    transparent 100%);
  transform: skewX(-20deg);
  animation: btnSweep 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes btnSweep {
  0%        { left: -70%; opacity: 0; }
  8%        { opacity: 1; }
  55%, 100% { left: 140%; opacity: 0; }
}

/* 上部ハイライト */
.scope-startBtn::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(to bottom,
    rgba(255,255,255,.18) 0%,
    transparent 100%);
  pointer-events: none;
}

.scope-startBtn__icon { display: none; }

.scope-startBtn:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 0 0 4px rgba(167,139,250,.5),
    0 0 0 12px rgba(167,139,250,.12),
    0 16px 56px rgba(109,40,217,.8),
    0 6px 20px rgba(109,40,217,.6),
    inset 0 1px 0 rgba(255,255,255,.3);
}

.scope-startBtn:active {
  transform: translateY(1px) scale(.99);
}

@keyframes btnShine {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(167,139,250,.35), 0 0 0 8px rgba(167,139,250,.1),
      0 10px 48px rgba(109,40,217,.7), 0 4px 16px rgba(109,40,217,.5),
      inset 0 1px 0 rgba(255,255,255,.25);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(167,139,250,.55), 0 0 0 12px rgba(167,139,250,.15),
      0 14px 60px rgba(109,40,217,.85), 0 6px 20px rgba(109,40,217,.6),
      inset 0 1px 0 rgba(255,255,255,.25);
  }
}

/* ボタン下のサブテキスト */
.scope-btn-sub {
  position: relative;
  z-index: 1;
  margin: 12px 0 32px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  letter-spacing: .1em;
  text-shadow: 0 0 12px rgba(180,150,255,.6);
}

/* 全画面スコープ */
/* ── バン演出 ── */
.scope-bang {
  position: absolute;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  display: none;
}

.scope-bang.is-active {
  display: block;
}

/* 白フラッシュ */
.scope-bang::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  animation: bangFlash .65s ease-out forwards;
}

/* 衝撃波リング */
.scope-bang::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 60px; height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.95);
  box-shadow:
    0 0 0 0 rgba(255,255,255,.6),
    inset 0 0 20px rgba(255,255,255,.4);
  animation: bangShock .8s cubic-bezier(.2,.6,.4,1) forwards;
}

@keyframes bangFlash {
  0%   { opacity: .95; }
  30%  { opacity: .4; }
  100% { opacity: 0; }
}

@keyframes bangShock {
  0%   { transform: scale(0.4); opacity: 1;
         box-shadow: 0 0 0 0 rgba(255,255,255,.7), 0 0 40px rgba(255,255,255,.5); }
  60%  { opacity: .7; }
  100% { transform: scale(8); opacity: 0;
         box-shadow: 0 0 0 20px rgba(255,255,255,0), 0 0 80px rgba(255,255,255,0); }
}

/* 画面シェイク */
.scope-game.is-shaking {
  animation: gameShake .55s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes gameShake {
  0%        { transform: translate(0, 0) rotate(0deg); }
  10%       { transform: translate(-6px, -4px) rotate(-.5deg); }
  20%       { transform: translate(7px, 5px) rotate(.5deg); }
  30%       { transform: translate(-8px, 3px) rotate(-.4deg); }
  40%       { transform: translate(6px, -5px) rotate(.4deg); }
  50%       { transform: translate(-5px, 4px) rotate(-.3deg); }
  60%       { transform: translate(4px, -3px) rotate(.3deg); }
  70%       { transform: translate(-3px, 2px) rotate(-.2deg); }
  80%       { transform: translate(2px, -2px) rotate(.1deg); }
  90%       { transform: translate(-1px, 1px) rotate(0deg); }
  100%      { transform: translate(0, 0) rotate(0deg); }
}

.scope-game {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  background: #050505;
  overflow: hidden;
  touch-action: none;
}

.scope-game.is-active {
  display: block;
}

.scope-world {
  position: absolute;
  width: 1800px;
  height: 1800px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
  touch-action: none;
  background-position: center;
  background-size: cover;
  image-rendering: auto;
  background-repeat: no-repeat;
}

.scope-target {
  position: absolute;
  width: 80px;
  height: 160px;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.9);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.3),
    0 0 24px rgba(255,255,255,.55),
    0 0 56px rgba(255,255,255,.2);
  animation: targetPulse 1.4s ease-in-out infinite;
  cursor: none;
}

.scope-target img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

@keyframes targetPulse {
  0%,100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

.scope-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center,
    transparent 0 33%,
    rgba(255,255,255,.85) 33.4% 34.3%,
    rgba(0,0,0,.68) 34.6% 40%,
    rgba(0,0,0,.96) 41% 100%
  );
}

/* 円形の内側ビネット – レンズの縁で暗くなる奥行き感 */
.scope-depth-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(circle at center,
    transparent 0%,
    transparent 22%,
    rgba(0,0,0,.18) 28%,
    rgba(0,0,0,.42) 32%,
    transparent 33.2%
  );
}

/* レンズ反射ハイライト */
.scope-lens-flare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse 18% 10% at 38% 28%,
    rgba(255,255,255,.2) 0%,
    transparent 100%
  );
  animation: flareShift 8s ease-in-out infinite;
}
@keyframes flareShift {
  0%, 100% { opacity: .6; transform: translate(0,0); }
  50%       { opacity: .9; transform: translate(4px, -3px); }
}

/* ダスト（前景の浮遊粒子）*/
.scope-dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.scope-dust::before {
  content: "";
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  /* 円の内側に散らばるドット */
  box-shadow:
    -6vw  -8vh  0 1px rgba(255,255,255,.3),
     8vw  -5vh  0 0px rgba(255,255,255,.25),
    -2vw   6vh  0 1px rgba(255,255,255,.2),
     5vw   9vh  0 0px rgba(255,255,255,.3),
    -10vw  2vh  0 1px rgba(255,255,255,.15),
     12vw  4vh  0 0px rgba(255,255,255,.22),
     0vw  -12vh 0 1px rgba(255,255,255,.18),
    -14vw  7vh  0 0px rgba(255,255,255,.25);
  left: 50%; top: 50%;
  animation: dustDrift 12s ease-in-out infinite;
}
.scope-dust::after {
  content: "";
  position: absolute;
  width: 1px; height: 1px;
  border-radius: 50%;
  background: rgba(200,190,255,.5);
  box-shadow:
     3vw  -10vh 0 1px rgba(200,190,255,.3),
    -7vw   3vh  0 1px rgba(200,190,255,.2),
     9vw   7vh  0 0px rgba(255,255,255,.25),
    -4vw  -4vh  0 1px rgba(200,190,255,.3),
     11vw -2vh  0 0px rgba(255,255,255,.18),
    -12vw  9vh  0 1px rgba(200,190,255,.22);
  left: 50%; top: 50%;
  animation: dustDrift 18s ease-in-out 4s infinite reverse;
}
@keyframes dustDrift {
  0%, 100% { transform: translate(0, 0); }
  25%       { transform: translate(6px, -8px); }
  50%       { transform: translate(-4px, 5px); }
  75%       { transform: translate(8px, 3px); }
}

.scope-crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: min(68vw, 360px);
  height: min(68vw, 360px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}

.scope-crosshair::before,
.scope-crosshair::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,.52);
}

.scope-crosshair::before {
  left: 50%;
  top: 8%;
  width: 1px;
  height: 84%;
  transform: translateX(-50%);
}

.scope-crosshair::after {
  left: 8%;
  top: 50%;
  width: 84%;
  height: 1px;
  transform: translateY(-50%);
}

.scope-ui {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  color: #fff;
  pointer-events: none;
}

.scope-status {
  padding: 8px 11px;
  background: rgba(16,16,16,.72);
  border: 1px solid rgba(255,255,255,.35);
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .04em;
}

.scope-close {
  pointer-events: auto;
  padding: 8px 11px;
  background: #fff;
  color: #101010;
  border: 0;
  font-size: 12px;
  font-weight: 1000;
  cursor: pointer;
}

.scope-hint {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 5;
  transform: translateX(-50%);
  width: calc(100% - 44px);
  max-width: 390px;
  padding: 14px 18px;
  background: rgba(10,10,18,.85);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  pointer-events: none;
  backdrop-filter: blur(10px);
  transition: background .4s, border-color .4s, color .4s;
}

.scope-hint .hint-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  margin-bottom: 4px;
  opacity: .6;
}

.scope-hint .hint-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.scope-hint .hint-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .3;
  transition: opacity .3s, transform .3s;
}

.scope-hint.is-warm  { border-color: rgba(255,210,60,.4);  color: #ffd23c; }
.scope-hint.is-hot   { border-color: rgba(255,140,40,.5);  color: #ff8c28; }
.scope-hint.is-fire  { border-color: rgba(255,80,100,.6);  color: #ff5064; }

.scope-hint.is-warm .hint-dot:nth-child(-n+2) { opacity: 1; }
.scope-hint.is-hot  .hint-dot:nth-child(-n+3) { opacity: 1; transform: scale(1.3); }
.scope-hint.is-fire .hint-dot { opacity: 1; transform: scale(1.5); animation: dotPulse .6s ease-in-out infinite alternate; }

/* ─ 方向コンパス ─ */
.scope-compass {
  position: absolute;
  left: 50%;
  bottom: 148px;
  z-index: 5;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(6,6,16,.8);
  border: 1.5px solid rgba(255,255,255,.18);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .35s, box-shadow .35s;
}

.scope-compass.is-warm { border-color: rgba(255,210,60,.55); box-shadow: 0 0 14px rgba(255,210,60,.25); }
.scope-compass.is-hot  { border-color: rgba(255,140,40,.65); box-shadow: 0 0 18px rgba(255,140,40,.35); }
.scope-compass.is-fire { border-color: rgba(255,80,100,.85); box-shadow: 0 0 24px rgba(255,80,100,.45); animation: compassPulse .55s ease-in-out infinite alternate; }

@keyframes compassPulse {
  from { box-shadow: 0 0 14px rgba(255,80,100,.35); }
  to   { box-shadow: 0 0 30px rgba(255,80,100,.7); }
}

.scope-compass__label {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(255,255,255,.35);
  pointer-events: none;
}

.scope-compass__arrow {
  width: 28px;
  height: 28px;
  transition: transform .12s ease-out;
  transform-origin: 14px 14px;
  overflow: visible;
}

@keyframes dotPulse {
  from { transform: scale(1.2); }
  to   { transform: scale(1.8); }
}

/* カーテンアニメーション */
.scope-curtain {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  z-index: 20;
  background: #050505;
  transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}

.scope-curtain--left  { left: 0; }
.scope-curtain--right { right: 0; }

.scope-game.is-opened .scope-curtain--left  { transform: translateX(-100%); pointer-events: none; }
.scope-game.is-opened .scope-curtain--right { transform: translateX(100%);  pointer-events: none; }

/* 発見モーダル */
/* ════════════════════════════════
   FOUND MODAL  – clean achievement screen
   ════════════════════════════════ */
.found-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.found-modal.is-active {
  display: flex;
  animation: foundFadeIn .45s cubic-bezier(.22,1,.36,1);
}

@keyframes foundFadeIn {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: 1; transform: scale(1); }
}

/* ぼかし背景 */
.found-bg {
  position: absolute;
  inset: -6%;
  background-size: cover;
  background-position: center;
  filter: blur(28px) brightness(.35) saturate(1.6);
}

/* 暗いベール */
.found-veil {
  position: absolute;
  inset: 0;
  background: rgba(8,6,18,.65);
  pointer-events: none;
}

/* グロウパーティクル */
.found-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.found-particles::before {
  content: "";
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow:
    /* 左側 */
    -8px  120px 0 1px  rgba(255,255,255,.6),
     22px  55px 0 2px  rgba(200,180,255,.7),
    -30px 200px 0 1px  rgba(255,255,255,.5),
     14px 310px 0 2px  rgba(180,210,255,.65),
    /* 右側 */
     88vw  80px 0 1px  rgba(255,255,255,.6),
     76vw 170px 0 2px  rgba(200,180,255,.7),
     92vw 260px 0 1px  rgba(180,210,255,.55),
     70vw 350px 0 2px  rgba(255,255,255,.5),
    /* 中央付近 */
     40vw  30px 0 1px  rgba(255,255,255,.45),
     55vw 420px 0 2px  rgba(200,180,255,.55),
     30vw 480px 0 1px  rgba(255,255,255,.4);
  animation: foundGlow 5s ease-in-out infinite;
}

.found-particles::after {
  content: "";
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(200,185,255,.85);
  box-shadow:
    50vw  90px 0 1px  rgba(255,255,255,.5),
    25vw 150px 0 2px  rgba(200,180,255,.6),
    68vw 220px 0 1px  rgba(255,255,255,.45),
    35vw 300px 0 2px  rgba(180,210,255,.6),
    80vw 130px 0 1px  rgba(255,255,255,.5),
    18vw 380px 0 2px  rgba(200,180,255,.5),
    60vw 460px 0 1px  rgba(255,255,255,.4);
  animation: foundGlow 7s ease-in-out 1.4s infinite;
}

@keyframes foundGlow {
  0%, 100% { opacity: .35; transform: translateY(0); }
  40%       { opacity: 1;   transform: translateY(-10px); }
  70%       { opacity: .6;  transform: translateY(5px); }
}

/* 閉じるボタン */
.found-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: rgba(255,255,255,.8);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  transition: background .2s;
}
.found-close:hover { background: rgba(255,255,255,.2); }

/* メインコンテンツ */
.found-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 28px 56px;
  width: 100%;
}

/* キッカー */
.found-eyebrow {
  margin: 0 0 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .28em;
  color: rgba(255,255,255,.45);
  animation: fadeUp .4s ease .05s both;
}

/* 壁紙画像 */
.found-wallpaper-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.15),
    0 24px 60px rgba(0,0,0,.7),
    0 0 60px rgba(200,180,255,.2),
    0 0 100px rgba(180,160,255,.1);
  animation: wallpaperReveal .5s cubic-bezier(.34,1.4,.64,1) .1s both;
}

.found-wallpaper-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255,255,255,.35) 50%,
    transparent 70%
  );
  transform: translateX(-120%) skewX(-15deg);
  animation: shimmerSweep .9s ease .65s forwards;
}

@keyframes shimmerSweep {
  to { transform: translateX(200%) skewX(-15deg); }
}

@keyframes wallpaperReveal {
  from { transform: scale(.72) translateY(40px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

.found-wallpaper {
  display: block;
  width: 150px;
  height: 300px;
  object-fit: cover;
}

/* タイトル */
.found-title {
  margin: 0 0 6px;
  font-size: 46px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.04em;
  line-height: 1;
  text-shadow: 0 2px 20px rgba(255,255,255,.2);
  animation: fadeUp .4s ease .3s both;
}

.found-title__mark {
  color: #fff;
  opacity: .7;
}

/* サブタイトル */
.found-subtitle {
  margin: 0 0 28px;
  font-size: 12px;
  color: rgba(255,255,255,.5);
  letter-spacing: .04em;
  animation: fadeUp .4s ease .38s both;
}

@keyframes fadeUp {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ボタン群 */
.found-actions {
  display: grid;
  gap: 10px;
  width: 100%;
  animation: fadeUp .4s ease .46s both;
}

.found-download {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  background: #fff;
  color: #0d0b1c;
  letter-spacing: -.01em;
  box-shadow: 0 6px 24px rgba(255,255,255,.18);
  transition: opacity .2s;
  text-decoration: none;
}
.found-download:hover { opacity: .9; }

.found-retry {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  color: rgba(255,255,255,.65);
  transition: background .2s;
}
.found-retry:hover { background: rgba(255,255,255,.08); }

    /* =========================
       HERO BUTTON
    ========================= */

    .hero-btn-wrap {
      position: absolute;
      bottom: 36px;
      left: 18px;
      right: 18px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 16px;
      z-index: 10;
    }

    .hero-btn-wrap a {
      display: block;
      width: 100%;
    }

    .uiverse {
      --duration: 7s;
      --easing: linear;
      --c-color-1: rgba(255, 163, 26, 0.7);
      --c-color-2: #1a23ff;
      --c-color-3: #e21bda;
      --c-color-4: rgba(255, 232, 26, 0.7);
      --c-shadow: rgba(255, 223, 87, 0.5);
      --c-shadow-inset-top: rgba(255, 223, 52, 0.9);
      --c-shadow-inset-bottom: rgba(255, 250, 215, 0.8);
      --c-radial-inner: #ffd215;
      --c-radial-outer: #fff172;
      --c-color: #fff;
      -webkit-tap-highlight-color: transparent;
      -webkit-appearance: none;
      outline: none;
      position: relative;
      cursor: pointer;
      border: none;
      display: table;
      border-radius: 24px;
      padding: 0;
      margin: 0;
      text-align: center;
      font-weight: 600;
      font-size: 16px;
      letter-spacing: 0.02em;
      line-height: 1.5;
      color: var(--c-color);
      background: radial-gradient(circle, var(--c-radial-inner), var(--c-radial-outer) 80%);
      box-shadow: 0 0 14px var(--c-shadow);
    }

    .uiverse:before {
      content: "";
      pointer-events: none;
      position: absolute;
      z-index: 3;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      border-radius: 24px;
      box-shadow:
        inset 0 3px 12px var(--c-shadow-inset-top),
        inset 0 -3px 4px var(--c-shadow-inset-bottom);
    }

    .uiverse .wrapper {
      -webkit-mask-image: -webkit-radial-gradient(white, black);
      overflow: hidden;
      border-radius: 24px;
      min-width: 180px;
      padding: 14px 0;
    }

    .uiverse .wrapper span {
      display: inline-block;
      position: relative;
      z-index: 1;
      color: var(--ink);
    }

    .uiverse:hover {
      --duration: 1400ms;
    }

    .uiverse .wrapper .circle {
      position: absolute;
      left: 0;
      top: 0;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      filter: blur(var(--blur, 8px));
      background: var(--background, transparent);
      transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
      animation: var(--animation, none) var(--duration) var(--easing) infinite;
    }

    .uiverse .wrapper .circle.circle-1,
    .uiverse .wrapper .circle.circle-9,
    .uiverse .wrapper .circle.circle-10 { --background: var(--c-color-4); }
    .uiverse .wrapper .circle.circle-3,
    .uiverse .wrapper .circle.circle-4 { --background: var(--c-color-2); --blur: 14px; }
    .uiverse .wrapper .circle.circle-5,
    .uiverse .wrapper .circle.circle-6 { --background: var(--c-color-3); --blur: 16px; }
    .uiverse .wrapper .circle.circle-2,
    .uiverse .wrapper .circle.circle-7,
    .uiverse .wrapper .circle.circle-8,
    .uiverse .wrapper .circle.circle-11,
    .uiverse .wrapper .circle.circle-12 { --background: var(--c-color-1); --blur: 12px; }

    .uiverse .wrapper .circle.circle-1  { --x: 0;    --y: -40px; --animation: circle-1; }
    .uiverse .wrapper .circle.circle-2  { --x: 92px; --y: 8px;   --animation: circle-2; }
    .uiverse .wrapper .circle.circle-3  { --x: -12px;--y: -12px; --animation: circle-3; }
    .uiverse .wrapper .circle.circle-4  { --x: 80px; --y: -12px; --animation: circle-4; }
    .uiverse .wrapper .circle.circle-5  { --x: 12px; --y: -4px;  --animation: circle-5; }
    .uiverse .wrapper .circle.circle-6  { --x: 56px; --y: 16px;  --animation: circle-6; }
    .uiverse .wrapper .circle.circle-7  { --x: 8px;  --y: 28px;  --animation: circle-7; }
    .uiverse .wrapper .circle.circle-8  { --x: 28px; --y: -4px;  --animation: circle-8; }
    .uiverse .wrapper .circle.circle-9  { --x: 20px; --y: -12px; --animation: circle-9; }
    .uiverse .wrapper .circle.circle-10 { --x: 64px; --y: 16px;  --animation: circle-10; }
    .uiverse .wrapper .circle.circle-11 { --x: 4px;  --y: 4px;   --animation: circle-11; }
    .uiverse .wrapper .circle.circle-12 { --blur: 14px; --x: 52px; --y: 4px; --animation: circle-12; }

    @keyframes circle-1  { 33% { transform: translate(0px, 16px) translateZ(0); } 66% { transform: translate(12px, 64px) translateZ(0); } }
    @keyframes circle-2  { 33% { transform: translate(80px, -10px) translateZ(0); } 66% { transform: translate(72px, -48px) translateZ(0); } }
    @keyframes circle-3  { 33% { transform: translate(20px, 12px) translateZ(0); } 66% { transform: translate(12px, 4px) translateZ(0); } }
    @keyframes circle-4  { 33% { transform: translate(76px, -12px) translateZ(0); } 66% { transform: translate(112px, -8px) translateZ(0); } }
    @keyframes circle-5  { 33% { transform: translate(84px, 28px) translateZ(0); } 66% { transform: translate(40px, -32px) translateZ(0); } }
    @keyframes circle-6  { 33% { transform: translate(28px, -16px) translateZ(0); } 66% { transform: translate(76px, -56px) translateZ(0); } }
    @keyframes circle-7  { 33% { transform: translate(8px, 28px) translateZ(0); } 66% { transform: translate(20px, -60px) translateZ(0); } }
    @keyframes circle-8  { 33% { transform: translate(32px, -4px) translateZ(0); } 66% { transform: translate(56px, -20px) translateZ(0); } }
    @keyframes circle-9  { 33% { transform: translate(20px, -12px) translateZ(0); } 66% { transform: translate(80px, -8px) translateZ(0); } }
    @keyframes circle-10 { 33% { transform: translate(68px, 20px) translateZ(0); } 66% { transform: translate(100px, 28px) translateZ(0); } }
    @keyframes circle-11 { 33% { transform: translate(4px, 4px) translateZ(0); } 66% { transform: translate(68px, 20px) translateZ(0); } }
    @keyframes circle-12 { 33% { transform: translate(56px, 0px) translateZ(0); } 66% { transform: translate(60px, -32px) translateZ(0); } }

    /* =========================
       SPACE BUTTON
    ========================= */

    .space-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      overflow: hidden;
      height: 5.5rem;
      background-size: 300% 300%;
      cursor: pointer;
      backdrop-filter: blur(1rem);
      border-radius: 5rem;
      transition: 0.5s;
      animation: gradient_301 5s ease infinite;
      border: double 5px transparent;
      background-image: linear-gradient(#212121, #212121),
        linear-gradient(137.48deg, #ffdb3b 10%, #fe53bb 45%, #8f51ea 67%, #0044ff 87%);
      background-origin: border-box;
      background-clip: content-box, border-box;
      position: relative;
      filter: drop-shadow(0 0 18px rgba(254, 83, 186, 0.5));
    }

    .space-inner {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .space-container-stars {
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 100%;
      overflow: hidden;
      transition: 0.5s;
      backdrop-filter: blur(1rem);
      border-radius: 5rem;
    }

    .space-btn strong {
      z-index: 2;
      font-size: 18px;
      letter-spacing: 2px;
      color: #ffffff;
      text-shadow: 0 0 8px white;
    }

    .space-sub {
      display: block;
      font-size: 13px;
      letter-spacing: .02em;
      color: rgba(255, 255, 255, 0.7);
      font-weight: 500;
    }

    .space-glow {
      position: absolute;
      display: flex;
      width: 100%;
    }

    .space-circle {
      width: 100%;
      height: 30px;
      filter: blur(2rem);
      animation: pulse_3011 4s infinite;
      z-index: -1;
    }

    .space-circle:nth-of-type(1) { background: rgba(254, 83, 186, 0.636); }
    .space-circle:nth-of-type(2) { background: rgba(142, 81, 234, 0.704); }

    .space-btn:hover .space-container-stars {
      z-index: 1;
      background-color: #212121;
    }

    .space-btn:hover { transform: scale(1.04); filter: drop-shadow(0 0 28px rgba(254, 83, 186, 0.75)); }

    .space-btn:active {
      border: double 4px #fe53bb;
      background-origin: border-box;
      background-clip: content-box, border-box;
      animation: none;
    }

    .space-btn:active .space-circle { background: #fe53bb; }

    .space-stars {
      position: relative;
      background: transparent;
      width: 200rem;
      height: 200rem;
    }

    .space-stars::after {
      content: "";
      position: absolute;
      top: -10rem;
      left: -100rem;
      width: 100%;
      height: 100%;
      animation: animStarRotate 90s linear infinite;
      background-image: radial-gradient(#ffffff 1px, transparent 1%);
      background-size: 50px 50px;
    }

    .space-stars::before {
      content: "";
      position: absolute;
      top: 0;
      left: -50%;
      width: 170%;
      height: 500%;
      animation: animStar 60s linear infinite;
      background-image: radial-gradient(#ffffff 1px, transparent 1%);
      background-size: 50px 50px;
      opacity: 0.5;
    }

    @keyframes animStar {
      from { transform: translateY(0); }
      to   { transform: translateY(-135rem); }
    }

    @keyframes animStarRotate {
      from { transform: rotate(360deg); }
      to   { transform: rotate(0); }
    }

    @keyframes gradient_301 {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    @keyframes pulse_3011 {
      0%   { transform: scale(0.75); box-shadow: 0 0 0 0 rgba(0,0,0,0.7); }
      70%  { transform: scale(1);    box-shadow: 0 0 0 10px rgba(0,0,0,0); }
      100% { transform: scale(0.75); box-shadow: 0 0 0 0 rgba(0,0,0,0); }
    }

    /* =========================
       HTA BUTTON
    ========================= */

    .hta-btn {
      position: relative;
      height: 50px;
      width: 180px;
      background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
      border-radius: 25px;
      animation: hta-animate 1.5s linear infinite;
      border: none;
      cursor: pointer;
    }

    .hta-btn,
    .hta-display,
    .hta-msg {
      transition: 0.3s;
    }

    .hta-btn:active .hta-display {
      background: rgba(255, 255, 255, 0.5);
    }

    .hta-btn:active .hta-msg {
      -webkit-text-fill-color: #1b1b1b;
    }

    .hta-btn:hover {
      scale: 1.15;
      animation: hta-animate 0.7s linear infinite;
      transform: translateY(-15px);
    }

    .hta-btn .hta-display,
    .hta-btn span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .hta-btn .hta-display {
      z-index: 1;
      background-color: #1b1b1b;
      height: 42.5px;
      width: 172.5px;
      border-radius: 20px;
      text-align: center;
    }

    .hta-btn .hta-msg {
      line-height: 42.5px;
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 3px;
      background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    @keyframes hta-animate {
      100% { filter: hue-rotate(360deg); }
    }

    .hta-btn span {
      height: 100%;
      width: 100%;
      background: inherit;
      border-radius: 25px;
    }

    .hta-btn span:first-of-type {
      filter: blur(15px);
    }

    .hta-btn span:last-of-type {
      filter: blur(15px);
      transition: 0.3s;
    }

    .hta-btn:hover span:last-of-type {
      width: 110%;
      height: 120%;
    }