/* ───────────────────────────── */
/* 🌐 Cyber Style for Result Card */
/* ───────────────────────────── */

body { 
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;         /* 可変フォントを使うなら有効 */
  font-weight: 400;                  /* 通常の太さ */
  font-style: normal;
}


.flag {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
}


/* 背景グリッドに流れアニメを追加 */
@keyframes moveGrid {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 70px 70px;
    }
}

.bg-grid {
    position: relative;
    background-image:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 69px,
            rgba(0, 255, 255, 0.2) 69px,
            rgba(0, 255, 255, 0.2) 70px),
        repeating-linear-gradient(90deg,
            transparent,
            transparent 69px,
            rgba(0, 255, 255, 0.2) 69px,
            rgba(0, 255, 255, 0.2) 70px);
    background-size: 70px 70px;
    background-color: #0e0e1a;
    animation: moveGrid 5s linear infinite;
    min-height: 100vh;
}

.bg-grid-p {
    position: relative;
    background-image:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 69px,
            rgb(247, 148, 40, 0.2) 69px,
            rgb(247, 148, 40, 0.2) 70px),
        repeating-linear-gradient(90deg,
            transparent,
            transparent 69px,
            rgb(247, 148, 40, 0.2) 69px,
            rgb(247, 148, 40, 0.2) 70px);
    background-size: 70px 70px;
    background-color: #0e0e1a;
    animation: moveGrid 5s linear infinite;
    min-height: 100vh;
}


/* ネオン文字（光る見出し） */
.glow-neon {
    text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff;
    text-shadow: 0 0 4px #00ffff, 0 0 10px #00ffff;
}

/* ネオン風ボーダー（画像やブロック） */
.neon-border {
    box-shadow: 0 0 6px #00ffff, 0 0 12px #00ffff;
}

/* サイバーパネル本体 */
article[augmented-ui] {
    --aug-tl: 20px;
    --aug-br: 20px;
    background: #121217;
    border-radius: 0;
}

.section-wrapper {
    clip-path: polygon(0% 0%, 35% 0%, 40% 25px, 60% 25px, 65% 0%, 100% 0%,
            100% 100%, 65% 100%, 60% calc(100% - 25px), 40% calc(100% - 25px), 35% 100%, 0% 100%);
}

.shadow-wrapper {
    filter: drop-shadow(0 0 10px #00ffff);
}

.shadow-wrapper-p {
    filter: drop-shadow(0 0 10px rgb(247, 148, 40));
}

/* 質問の枠 */
.clipped-corners {
    clip-path: polygon(
        40px 0,        /* 左上：少し内側から開始 */
        100% 0,        /* 右上 */
        100% calc(100% - 40px),  /* 右下 - オフセット */
        calc(100% - 40px) 100%,  /* 右下：内側へ */
        0 100%,        /* 左下 */
        0 40px         /* 左上：内側へ戻る */
    );
}

/* 改善アドバイスの枠 */
.advice-shadow {
    filter: drop-shadow(0 0 4px var(--shadow-color));
    overflow: visible;
}

.advice-corners {
    clip-path: polygon(
        42px 0, 100% 0,
        100% calc(100% - 42px),
        calc(100% - 42px) 100%,
        0 100%, 0 42px
    );
    background-color: #191e26;
}

/* --- 質問のハイライト / 暗転 --- */
.question {
    transition: transform 200ms ease, filter 200ms ease, opacity 200ms ease;
}
.question.active-question {
    transform: translateY(-2px);
    filter: none;
    opacity: 1;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    border-color: rgba(56, 189, 248, 0.6); /* cyan-ish */
}
.question.dimmed-question {
    transform: none;
    filter: brightness(0.65) saturate(0.85) grayscale(0.05);
    opacity: 0.85;
}

/* フォーカスしやすくするために選択肢ラベルにも効果 */
.question .peer-checked\/q\w+\-5\:bg-green-500,
.question .peer-checked\/q\w+\-4\:bg-green-400,
.question .peer-checked\/q\w+\-3\:bg-gray-400,
.question .peer-checked\/q\w+\-2\:bg-purple-400,
.question .peer-checked\/q\w+\-1\:bg-purple-500 {
    box-shadow: 0 0 0 4px rgba(255,255,255,0.04) inset;
}

/* Orbitron utility: use only where desired (e.g. radar titles) */
.orbitron {
  font-family: 'Orbitron', "Noto Sans JP", "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ───────────────────────────── */
/* Inline styles migrated from layout (responsive card helpers) */
/* ───────────────────────────── */
/* Responsive typography and clamp utilities for card content */
.card-title { font-size: clamp(1.05rem, 3.5vw, 1.125rem); line-height: 1.15; }
.card-desc { font-size: clamp(0.85rem, 3vw, 0.95rem); line-height: 1.3; }

/* Multiline clamp (works on WebKit / Blink) */
.clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* Card visual helper */
.card-rich { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); border: 1px solid rgba(255,255,255,0.04); }

/* Ensure cards stay compact on small screens and tighten spacing */
@media (max-width: 640px) {
  .card-title { font-size: 1rem; }
  .card-desc { font-size: 0.78rem; line-height: 1.18; }
  /* grid gap and vertical rhythm */
  .cards-grid { gap: 0.5rem !important; margin-top: 0.4rem !important; margin-bottom: 0.4rem !important; }
  /* reduce card padding */
  .cards-grid > div { padding: 0.5rem !important; }
  /* thin divider */
  .cards-grid > div .h-0\.5 { height: 1px !important; margin: 0.3rem 0 !important; opacity: .08; }
  /* tighten headings and descriptions */
  .cards-grid > div .card-title { font-size: 0.98rem; }
  .cards-grid > div .card-desc { font-size: 0.76rem; }
  /* ensure single column layout on narrow screens */
  .grid-cols-1.sm\:grid-cols-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}