/* ==========================================
   LUMINA Color Oracle - Style Sheet (Complete Re-tuned Master Edition)
   ========================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

body, html {
    width: 100vw; height: 100dvh; height: -webkit-fill-available;
    overflow: hidden; background: #020305;
    /* 最優先にTrajan系を配置し、日本語はそれにシンクロする気品高い明朝・セリフ系ハイブリッドへ */
    font-family: "Trajan", "Trajan Pro", "Cinzel", "Optima", "Georgia", "Hina Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

.hidden { display: none !important; }

/* 1層：最背面宇宙背景層 */
.cc-master-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, #0B0F19 0%, #020305 100%);
    z-index: 1;
}
.twinkle-star {
    position: absolute; background-color: #fff; border-radius: 50%;
    animation: twinkle 3s infinite alternate;
}
@keyframes twinkle { 0% { opacity: 0.2; transform: scale(0.8); } 100% { opacity: 0.8; transform: scale(1.2); } }

.shooting-star {
    position: absolute; width: 120px; height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, transparent 100%);
    box-shadow: 0 0 5px rgba(255,255,255,0.8);
    pointer-events: none; z-index: 10;
}

/* 2層：演出用背景レイヤーA */
#base-beige-action {
    position: fixed; top: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 480px; /* ★修正：PC・タブレットで見やすいよう450pxから480pxへ拡張 */
    height: 100%; background-color: #f4eee1; z-index: 2; opacity: 0;
    transition: opacity 2.0s ease-in-out;
}
#base-beige-action.show { opacity: 1 !important; }

/* 3層：色変更背景レイヤーB */
#dynamic-gradient-layer {
    position: fixed; top: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 480px; /* ★修正：PC・タブレットで見やすいよう450pxから480pxへ拡張 */
    height: 100%; z-index: 3; pointer-events: none;
    background-color: #f4eee1;
    transition: clip-path 1.2s cubic-bezier(0.25, 1, 0.2, 1), opacity 0.5s ease;
    clip-path: circle(100% at center);
}
#dynamic-gradient-layer.circle-contract {
    clip-path: circle(0px at center) !important;
    transition: clip-path 1.2s cubic-bezier(0.25, 1, 0.2, 1) !important;
}

/* 4層：マスク画像層 */
#mask-container {
    position: fixed; top: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 480px; /* ★修正：PC・タブレットで見やすいよう450pxから480pxへ拡張 */
    height: 100%; z-index: 4; display: flex; justify-content: center; align-items: center;
    pointer-events: none; opacity: 0; transition: opacity 0.4s ease-in-out;
}
#mask-image { width: 100%; height: 100%; object-fit: contain; }

/* 5層：メイン操作コンテナ */
#app-container {
    position: relative; margin: 0 auto; z-index: 5;
    height: 100dvh; width: 100%; 
    max-width: 480px; /* ★修正：PCやタブレットの大画面でも、美しくゆとりある見やすさを誇る480px幅へリサイズ */
    display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
    padding: 3dvh 20px 10px 20px; background: transparent;
}
#app-container.reversed-active { background-color: rgba(11, 15, 25, 0.96) !important; }

.view {
    width: 100%; height: 100%; display: flex; flex-direction: column; 
    justify-content: space-between; align-items: center; min-height: 0; flex: 1;
}

/* 左下の数理呪文インジケータ（完全に左下へ固定） */
#top-math-formula {
    width: 100%; text-align: left; font-family: "Courier New", Courier, monospace;
    font-size: 7.5pt; font-weight: 300; color: #718096; letter-spacing: 0.5px;
    padding: 10px 0 2px 4px; pointer-events: none; z-index: 50; transition: color 0.5s;
    margin-top: auto; flex-shrink: 0;
}
#app-container.reversed-active #top-math-formula { color: #a0aec0; }

/* トップ画面（無駄な余白を引き締め、画像をダイナミックに最大化） */
#view-top { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 0; flex: 1; gap: 2.5vh; }
.top-title-area { text-align: center; margin-top: 0; flex-shrink: 0; }
.main-title-text { 
    font-size: 20px; 
    color: #FFF; 
    letter-spacing: 6px; /* Trajanが最も美しく見える気品ある文字間隔に拡張 */
    font-weight: bold; 
    text-transform: uppercase; /* 英語時に自動で美しい大文字に変換 */
}
.sub-title-text { 
    font-size: 14px; 
    color: rgba(244,238,225,0.8); 
    letter-spacing: 3px; 
    margin-top: 8px; 
    font-weight: 500; 
}
.top-matrix-container { 
    width: 90%;          /* 横幅の占有率を85%から95%へ引き上げ */
    
    aspect-ratio: 1 / 1; /* どんな画面でも正円の比率を絶対維持 */
    flex: 0 1 auto; 
    margin: 1vh auto; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}
#top-matrix { width: 100%; height: 100%; object-fit: contain; }
#btn-start { margin-bottom: 0; z-index: 10; position: relative; flex-shrink: 0; }

/* ★修正：一目でタップできることがわかる、美しく格調高い「Logicボタン」スタイル */
.link-logic {
    display: inline-block; font-size: 10pt; color: rgba(244, 238, 225, 0.9) !important;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 6px 24px; border-radius: 20px; cursor: pointer; font-style: italic;
    text-align: center; margin: 8px auto 0 auto; flex-shrink: 0; z-index: 15; position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: all 0.3s ease;
}
.link-logic:hover {
    background: rgba(99, 179, 157, 0.2); border-color: #63b39d; color: #63b39d !important;
}

/* クイズ・パレット画面 */
.palette-container { width: 88vw; max-width: 300px; aspect-ratio: 1; margin-top: 1vh; flex-shrink: 0; }
.palette-circle-bg { width: 100%; height: 100%; background: transparent !important; padding: 0; }
.color-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4%; width: 100%; height: 100%; }
.color-dot { width: 100%; height: 100%; cursor: pointer; border-radius: 50%; transition: transform 1.2s cubic-bezier(0.25, 1, 0.2, 1), opacity 0.8s ease, border-radius 1.0s ease, clip-path 1.0s ease; }
.color-dot.color-white-outline { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.color-dot.show-small { transform: scale(0.25); border-radius: 50%; clip-path: none; opacity: 1; }
.color-dot.active-large { transform: scale(1); opacity: 1; }
.color-dot.color-white-outline.active-large { box-shadow: 0 0 0 1.5px #cbd5e1, 0 3px 8px rgba(0,0,0,0.12) !important; }

.shape-tear { border-radius: 0 50% 50% 50%; }
.color-dot.shape-tear.active-large { transform: scale(1) rotate(45deg); }
.shape-star { clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%); border-radius: 0; }
.color-dot:hover { transform: scale(1.22) !important; z-index: 5; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.color-dot.shape-tear:hover { transform: scale(1.22) rotate(45deg) !important; }

.quiz-header { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 4px 0; }
.question-box { font-size: 11.5pt; font-weight: bold; color: #222; line-height: 1.5; padding: 0 10px; min-height: 3.0em; display: flex; align-items: center; justify-content: center; }
.status-box { font-size: 9.5pt; color: #666; margin-top: 1px; }
.btn-sub { background: rgba(255, 255, 255, 0.85); color: #333; border: 1px solid #cbd5e1; padding: 5px 18px; font-size: 9.5pt; font-weight: bold; border-radius: 20px; cursor: pointer; margin-top: 4px; }

#gradient-title::placeholder { color: #a0aec0; font-size: 10pt; font-style: italic; }
.quiz-footer { width: 100%; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; margin-bottom: 0.5vh; }
.avatars-container { display: flex; gap: 50px; }
.avatar-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.avatar-circle { width: 38px; height: 38px; background: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 13pt; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.avatar-name { font-size: 8.5pt; font-weight: bold; color: #555; }
#title-input-container { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1vh; margin-bottom: 1vh; z-index: 10; }
#gradient-title { width: 85%; padding: 8px 15px; font-size: 10.5pt; border: 1px solid #ccc; border-radius: 25px; outline: none; text-align: center; }

.btn { background: #63b39d; color: #fff; border: none; padding: 11px 48px; font-size: 13.5pt; font-weight: bold; letter-spacing: 2px; border-radius: 30px; cursor: pointer; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
#lang-selector { position: absolute; top: 2vh; right: 16px; z-index: 20; }
#btn-lang { font-size: 9.5pt; color: #c92a2a; background: rgba(255,255,255,0.85); padding: 4px 10px; border-radius: 20px; cursor: pointer; font-weight: bold; }

/* ─── 宇宙曼荼羅マトリクス ─── */
#result-matrix-wrapper { width: 100%; display: flex; justify-content: center; flex-shrink: 0; margin-top: 0.5vh; margin-bottom: 0.5vh; }
/* ==========================================
   style.css 修正箇所（マトリクス盤面のサイズとはみ出し切れを完全治療）
   ========================================== */
#result-universe-matrix {
    position: relative; 
    width: 74vw; 
    height: 74vw; 
    max-width: 310px;  
    max-height: 310px; 
    border-radius: 50%;
    border: 1px solid rgba(62, 84, 114, 0.3);
    /* ★修正：透過度(rgba)をほぼゼロにし、中央の白っぽいモヤを完全消去。吸い込まれるような深遠で美しい大宇宙の闇を表現しました */
    background: radial-gradient(circle at center, rgba(6, 8, 15, 0.99) 0%, rgba(2, 2, 5, 1.0) 100%);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4), inset 0 0 25px rgba(0,0,0,0.8);
    overflow: visible; 
    transition: border-color 0.8s;
}
#app-container.reversed-active #result-universe-matrix { border-color: rgba(255,213,79,0.4); }

#matrix-grid-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.grid-line { position: absolute; background: rgba(255,255,255,0.06); }

.matrix-axis-label { position: absolute; color: rgba(255,255,255,0.45); font-size: 7.5px; font-weight: bold; text-align: center; pointer-events: none; z-index: 5; font-family: 'Optima', sans-serif; }
.matrix-axis-label span { font-size: 6.5px; color: rgba(255,255,255,0.3); display: block; font-family: sans-serif; margin-top: 1px; }
.matrix-axis-label.top { top: 4px; left: 50%; transform: translateX(-50%); }
.matrix-axis-label.bottom { bottom: 4px; left: 50%; transform: translateX(-50%); }
.matrix-axis-label.left { left: 4px; top: 50%; transform: translateY(-50%); writing-mode: vertical-lr; text-orientation: upright; }
.matrix-axis-label.right { right: 4px; top: 50%; transform: translateY(-50%); writing-mode: vertical-lr; text-orientation: upright; }

#matrix-star-dust-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.dust-star { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0.8; box-shadow: 0 0 5px currentcolor; }

#matrix-svg-constellation { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 8; }
#constellation-polygon { fill: rgba(255, 255, 255, 0.12) !important; stroke: none; transition: fill 0.5s; }
#matrix-svg-constellation line { stroke: rgba(255, 255, 255, 0.85) !important; stroke-width: 0.5; stroke-linecap: round; }

#matrix-celestial-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
.matrix-anchor-star { position: absolute; width: 22px; height: 22px; transform: translate(-50%, -50%); border-radius: 50% !important; box-shadow: 0 4px 12px rgba(0,0,0,0.35); border: 1.0px solid rgba(255,255,255,0.85); clip-path: none !important; z-index: 12; }
.matrix-satellite-star { position: absolute; width: 6px; height: 6px; border-radius: 50%; transform: translate(-50%, -50%); background: #e14383; box-shadow: 0 0 8px #e14383, 0 0 14px rgba(225,67,131,0.6); }

/* ─── 解説結果画面フッター ─── */
#view-result { padding: 0; justify-content: flex-start; gap: 0.5vh; }
.result-interpretation-box { width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding: 2px 4px; -webkit-overflow-scrolling: touch; }
.speech-bubble { background: #fff; border-radius: 14px; padding: 12px 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); border-left: 5px solid #63b39d; transition: background-color 0.5s, color 0.5s; flex-shrink: 0; }
.luna-bubble { border-left-color: #7b79b3; }
.mina-bubble { border-left-color: #f1c40f; }
.bubble-speaker { font-size: 8.5pt; font-weight: bold; margin-bottom: 3px; color: #555; }
.speech-bubble p { font-size: 9.5pt; line-height: 1.55; color: #444; text-align: justify; }

#app-container.reversed-active .speech-bubble { background-color: #1e293b; border-left-color: #e2e8f0; }
#app-container.reversed-active .bubble-speaker { color: #94a3b8; }
#app-container.reversed-active .speech-bubble p { color: #cbd5e1; }

.result-actions-trinity { width: 100%; display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 4px; flex-shrink: 0; }
.btn-trinity-main { background: #63b39d; color: #fff; border: none; padding: 10px 20px; font-size: 10.5pt; font-weight: bold; letter-spacing: 1px; border-radius: 25px; cursor: pointer; flex: 1.3; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.btn-trinity-sub { background: rgba(255, 255, 255, 0.9); color: #333; border: 1px solid #cbd5e1; padding: 10px 10px; font-size: 9.5pt; font-weight: bold; border-radius: 25px; cursor: pointer; flex: 1; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
#app-container.reversed-active .btn-reverse-color { background: #e14383 !important; color: #fff !important; border-color: #e14383 !important; }

/* ─── 選べる4大SNS保存画面デザインマトリクス (Words / Omamori / Gradation / Starry Sky) ─── */
#view-final { position: relative; width: 100%; height: 100%; }

/* 4大デザイン切り替えセレクタータブ */
.final-template-switcher {
    width: 100%; display: flex; justify-content: center; gap: 4px; 
    padding: 8px 4px; background: rgba(255,255,255,0.04); border-radius: 12px; margin-bottom: 1vh; flex-shrink: 0;
}
.btn-switch {
    font-size: 8pt; font-weight: bold; color: rgba(255,255,255,0.6); 
    padding: 5px 10px; border-radius: 20px; cursor: pointer; background: transparent;
    border: 1px solid rgba(255,255,255,0.15); transition: all 0.3s ease;
    font-family: 'Optima', sans-serif;
}
.btn-switch.active {
    background: #ffffff !important; color: #020305 !important; border-color: #ffffff !important;
}

/* 9:16サイズベースカード（外枠） */
#final-layout-container { 
    width: 100%; height: 100%; display: flex; flex-direction: column; 
    justify-content: flex-start; align-items: center; padding: 2vh 16px; 
    /* ★修正：角丸を完全に捨て去り「完全な四角（直角）」にビルドすることで、スクショ時に背景の黒い空が写り込むノイズを100%シャットアウトします */
    border-radius: 0px !important; 
    transition: all 0.5s cubic-bezier(0.25, 1, 0.2, 1);
    flex: 1; min-height: 0; position: relative; overflow: hidden;
}

#omamori-vessel {
    position: relative; width: 44vw; height: 66vw; max-width: 170px; max-height: 255px;
    clip-path: polygon(33% 0%, 67% 0%, 100% 20%, 100% 100%, 0% 100%, 0% 20%);
    box-shadow: 0 12px 35px rgba(0,0,0,0.65); z-index: 10;
    transition: all 0.4s ease;
}
#omamori-vessel::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at center, rgba(255,255,255,0.12) 0%, transparent 85%); mix-blend-mode: overlay; pointer-events: none; }

#final-bottom-data-area { 
    width: 100%; max-width: 380px; display: flex; justify-content: space-between; 
    align-items: flex-end; margin-top: auto; padding: 0; transition: all 0.4s ease;
}

/* Starry Sky（デザイン4）の拡大マトリクス盤面 */
#final-matrix-expand-vessel {
    position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%) scale(0);
    width: 78vw; height: 78vw; max-width: 280px; max-height: 280px;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.2, 1); opacity: 0; z-index: 5;
}
#final-matrix-expand-vessel #cloned-universe-matrix-expand {
    width: 100% !important; height: 100% !important; border-radius: 50% !important;
}

/* Words（デザイン1）専用：全面を埋め尽くす極上の縦長テキストスクショボード */
#final-text-card-board {
    width: 100%; display: none; flex-direction: column; gap: 12px;
    background: transparent; text-align: left; height: 100%; overflow-y: auto;
    padding: 10px 4px 20px 4px; -webkit-overflow-scrolling: touch;
}
#final-text-card-board .speech-bubble {
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-radius: 16px; margin: 0;
}

#final-right-planets-group { display: flex; gap: 8px; align-items: center; transition: all 0.4s ease; }
.mini-planet { width: 6.5vw; height: 6.5vw; max-width: 24px; max-height: 24px; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.35); border: 0.8px solid rgba(255,255,255,0.4); }
#final-left-matrix-clone { display: none !important; }

.final-guide-text { position: absolute; top: 4vh; left: 0; width: 100%; text-align: center; z-index: 20; pointer-events: none; }
.guide-p1 { font-size: 12.5pt; font-weight: bold; color: #f4eee1; letter-spacing: 2px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.guide-p2 { font-size: 10px; color: rgba(244, 238, 225, 0.75); margin-top: 4px; letter-spacing: 1px; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }

/* ──────────────────────────────────────────
   ✦ 4大新テンプレート（Words / Omamori / Gradation / Starry Sky）表示制御
   ────────────────────────────────────────── */

/* 【1. Words：占い結果テキストボード全面型】 */
.tmpl-active-1 { background-color: #ffffff !important; background-image: none !important; }
.tmpl-active-1 #omamori-vessel { display: none !important; }
.tmpl-active-1 #final-bottom-data-area { height: 100%; margin: 0; }
.tmpl-active-1 #final-text-card-board { display: flex !important; } 
.tmpl-active-1 #final-right-planets-group { display: none !important; }
.tmpl-active-1 #final-matrix-expand-vessel { transform: translate(-50%, -50%) scale(0); opacity: 0; }

/* 【2. Omamori：お守りアップ×白背景型】 */
.tmpl-active-2 { 
    background-color: #ffffff !important; 
    background-image: none !important; 
    /* メメインエリアの縦の構造を「完全な中央寄せ」に動的シフト */
    justify-content: center !important; 
}
.tmpl-active-2 #omamori-vessel { 
    /* お守り本体の拡大率をご指示通りの110% (scale(1.1)) に美しく調律 */
    transform: scale(1.1); 
    opacity: 1; 
    display: block; 
    /* 上下の余白を自動均等配分にすることで、上下左右1ミリのズレもない完璧な中央へ鎮座させます */
    margin: auto 0; 
}
.tmpl-active-2 #final-bottom-data-area { display: flex !important; }
.tmpl-active-2 #final-text-card-board { display: none !important; }
.tmpl-active-2 #final-right-planets-group { margin-left: auto; margin-bottom: 10px; } 
.tmpl-active-2 #final-matrix-expand-vessel { transform: translate(-50%, -50%) scale(0); opacity: 0; }

/* 【3. Gradation：全面希望グラデーション×下3つ丸型（お守りなし）】 */
.tmpl-active-3 { background-color: transparent !important; }
.tmpl-active-3 #omamori-vessel { display: none !important; } 
.tmpl-active-3 #final-bottom-data-area { display: flex !important; width: 100%; justify-content: center !important; }
.tmpl-active-3 #final-text-card-board { display: none !important; }
.tmpl-active-3 #final-right-planets-group { margin: 0 auto 3vh auto; transform: scale(1.2); pointer-events: none; } 
.tmpl-active-3 #final-matrix-expand-vessel { transform: translate(-50%, -50%) scale(0); opacity: 0; }

/* 【4. Starry Sky：宇宙星空背景×マトリクス拡大盤面型】 */
.tmpl-active-4 { background-color: rgba(3,3,10,0.96) !important; border: 1px solid rgba(255,255,255,0.08); }
.tmpl-active-4 #omamori-vessel { display: none !important; }
.tmpl-active-4 #final-bottom-data-area { display: none !important; }
.tmpl-active-4 #final-text-card-board { display: none !important; }
.tmpl-active-4 #final-matrix-expand-vessel { transform: translate(-50%, -52%) scale(1.08); opacity: 1; }

/* モーダル */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 200; display: flex; justify-content: center; align-items: center; }
.modal-content { background: #fff; width: 92%; max-width: 440px; max-height: 80%; border-radius: 20px; padding: 22px; position: relative; overflow-y: auto; }
.close-button { position: absolute; top: 10px; right: 16px; font-size: 20pt; cursor: pointer; color: #bbb; }
.modal-logic-title { font-size: 13pt; font-weight: bold; color: #1a3344; margin-bottom: 12px; border-bottom: 2px solid #63b39d; padding-bottom: 5px; }
.modal-logic-section { font-size: 10pt; line-height: 1.55; color: #333; margin-bottom: 15px; text-align: justify; }
.modal-logic-section h4 { font-size: 11pt; color: #111; margin-bottom: 5px; border-left: 3px solid #63b39d; padding-left: 5px; }
.modal-src { font-size: 8.5pt; color: #666; font-style: italic; background: #f8fafc; padding: 6px 10px; border-radius: 6px; border-left: 2px solid #cbd5e1; margin-top: 4px; }


/* ==========================================
   style.css 追記：タイトル入力モード時の全崩壊を完全治療 ＆ 中央集約
   ========================================== */

#view-quiz:has(#palette-container.hidden) {
    justify-content: flex-start !important; /* 上詰めに変更 */
    padding-top: 10dvh !important;          /* 画面上部からの距離（お好みで 10dvh〜20dvh 等に調整） */
    gap: 1.5vh;                             /* パーツ間の隙間を少し引き締め */
}

/* タイトル入力モード時、ヘッダーとフッターのレイウトを完全な中央揃えに固定 */
#view-quiz:has(#palette-container.hidden) .quiz-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* 「このグラデーションに、名前をつけてください」の文字をベストな位置へ少し引き上げ */
#view-quiz:has(#palette-container.hidden) .question-box {
    font-size: 13pt;
    font-weight: bold;
    color: #222;
    margin-bottom: 5px;
}

/* 選び直すボタンを質問文のすぐ下に上品にアライメント */
#view-quiz:has(#palette-container.hidden) #btn-reselect {
    margin-top: 2px;
    margin-bottom: 3vh; /* 入力欄との美しいディスタンス */
}

/* テキストボックスのコンテナを画面の完全なる中央・特等席へジャスト配置 */
#view-quiz:has(#palette-container.hidden) #title-input-container {
    width: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 0;
    margin-bottom: 3vh;
}

/* 入力欄自体の横幅をスマートに引き締め、入力しやすい洗練された佇まいに */
#view-quiz:has(#palette-container.hidden) #gradient-title {
    width: 80%;
    max-width: 280px;
    padding: 12px 20px;
    font-size: 11pt;
    border: 1px solid #ccc;
    border-radius: 25px;
    text-align: center;
    outline: none;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* OKボタンの余白を微調整 */
#view-quiz:has(#palette-container.hidden) #btn-title-submit {
    margin-top: 0;
}

/* LUNA / MINAのアバターコンテナは一番最下段で静かに佇むよう配置 */
#view-quiz:has(#palette-container.hidden) .avatars-container {
    margin-top: 1vh;
}

/* 【追加】イラストのサイズと位置の調整 */
.quiz-illustration-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0;
    margin-bottom: 5px;
    flex-shrink: 0;
}
#quiz-illustration {
    display: block !important;
    width: auto !important; /* 横幅のロックを解除 */
    object-fit: contain !important;
    margin-bottom: 0 !important;
    max-width: 150% !important; /* 画面の左右を突き破って拡大することを許可 */
    
    /* 🔴【最重要】この「28」の数値を大きくする（例: 35dvh や 42dvh など）だけで、100%確実にサイズが変わります */
    height: 32dvh !important; 
}
/* 名前入力モード（パレット非表示時）はイラストをすっきり隠す */
#view-quiz:has(#palette-container.hidden) .quiz-illustration-container {
    display: none !important;
}

/* ==========================================
   ✦ クイズ画面（吹き出し・イラスト・色番号）最終レイアウト調整
   ========================================== */

/* 1. 手前の要素の基準点を解除し、一番外枠の #app-container を基準にさせる */
#view-quiz {
    justify-content: flex-start !important;
    gap: 10px;
    position: static !important; /* 👈 relativeを解除して浮きを治療 */
}
/* タイトル入力モード時、ヘッダーとフッターのレイウトを完全な中央揃えに固定 */
#view-quiz:has(#palette-container.hidden) .quiz-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* 「このグラデーションに、名前をつけてください」の文字をベストな位置へ少し引き上げ */
#view-quiz:has(#palette-container.hidden) .question-box {
    font-size: 13pt;
    font-weight: bold;
    color: #222;
    margin-bottom: 5px;
}

/* 選び直すボタンを質問文のすぐ下にアライメント */
#view-quiz:has(#palette-container.hidden) #btn-reselect {
    margin-top: 2px;
    margin-bottom: 3vh;
}

/* テキストボックスのコンテナを画面の特等席へジャスト配置 */
#view-quiz:has(#palette-container.hidden) #title-input-container {
    width: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 0;
    margin-bottom: 3vh;
}

/* 入力欄自体の横幅をスマートに引き締め */
#view-quiz:has(#palette-container.hidden) #gradient-title {
    width: 80%;
    max-width: 280px;
    padding: 12px 20px;
    font-size: 11pt;
    border: 1px solid #ccc;
    border-radius: 25px;
    text-align: center;
    outline: none;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

#view-quiz:has(#palette-container.hidden) #btn-title-submit {
    margin-top: 0;
}

#view-quiz:has(#palette-container.hidden) .avatars-container {
    margin-top: 1vh;
}

/* マンガの吹き出しエリア（左右並び・36色のすぐ下に密着） */
.quiz-speech-area {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
    padding: 0 10px;
    margin-top: 5px;
}

/* 共通の吹き出しスタイル（マンガ風） */
.speech-balloon {
    position: relative;
    background: #ffffff;
    color: #1a202c;
    border-radius: 14px;
    padding: 10px 14px;
    flex: 1;
    font-size: 9pt;
    line-height: 1.45;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    font-family: sans-serif;
    font-weight: bold;
}

/* 吹き出しのしっぽ（鋭角でシャープな下向き三角） */
.speech-balloon::after {
    content: '';
    position: absolute;
    bottom: -12px;
    border-width: 12px 5px 0;
    border-style: solid;
    border-color: #ffffff transparent;
    display: block;
    width: 0;
}

/* LUNA（左）の吹き出しを大きく、MINA（右）を小さく比率調整 */
.balloon-left { flex: 1.4 !important; }
.balloon-right { flex: 0.8 !important; }
.balloon-left::after { left: 80px; }
.balloon-right::after { right: 80px; }

.balloon-speaker {
    font-size: 8pt;
    color: #718096;
    margin-bottom: 3px;
    letter-spacing: 0.5px;
}

/* 2. イラストを画面の本当の最下端（底辺）へシンプルに絶対配置 */
.quiz-illustration-container {
    position: absolute !important;
    bottom: 0 !important; /* 👈 外枠のパディングを無視して画面最下部に密着 */
    left: 50% !important;
    transform: translateX(-50%) !important; /* 中央揃え */
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10 !important; /* 文字（50）より下に潜り込ませる */
    pointer-events: none !important;
}

#quiz-illustration {
    width: 100%;
    max-height: 35dvh; /* パレットを潰さない適切なサイズ制限 */
    object-fit: contain;
    display: block;
    
    /* イラストを大きく表示するための拡大率調整（お好みで 1.4 や 1.6 に変更可能） */
    transform: scale(1.5); 
    transform-origin: bottom center; /* 下側を基準に拡大して底離れを防止 */
}
/* 3. 色番号（数理式）は初期状態のまま、イラストの前面に自然に重ねる */
#top-math-formula {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    text-align: left !important;
    background: transparent !important;
    z-index: 50 !important; /* イラスト（10）より前面に重なる */
    pointer-events: none !important;
}