/* 遊戲導覽（about.html／app.html）：用遊戲素材拼的場景、一句話文案、小藥丸
   顏色跟 about-apple.css／app-landing.css 同一套：墨 #3E2723、茶 #5D4037、金 #d97706／#fbbf24、和紙 #F9F6F2 */

/* --- 置中的場景區塊：標題＋一句話＋一個場景 --- */
.guide-scene-section {
    position: relative; padding: 100px 20px; background-color: #F9F6F2; overflow: hidden; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.guide-scene-section.alt { background: linear-gradient(135deg, #F5F0EB 0%, #ebe6e0 100%); }
.guide-scene-section .duoduo-header { max-width: 640px; }

/* --- 舞台：一張房間／神社背景，上面用百分比疊素材（同 shugyo 頁的做法） --- */
.guide-stage {
    position: relative; width: 100%; max-width: 820px; overflow: hidden; border-radius: 18px;
    background-size: cover; background-position: center;
    box-shadow: 0 30px 60px -15px rgba(62, 39, 35, .35), 0 0 0 1px rgba(62, 39, 35, .08);
}
.guide-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 65%, rgba(0,0,0,0) 45%, rgba(40, 20, 5, .22) 100%); }
.guide-stage img { position: absolute; width: auto; display: block; }
/* 修行之書：道場房間 1024x637，座標照 css/shugyo-rooms.css 與 js/shugyo-zones.js */
.stage-room { aspect-ratio: 1024 / 637; background-image: url("/images/shugyo/room_dojo_wide.png"); }
.stage-room .gs-scroll  { left: 12.5%; top: 15%; width: 11%; }
.stage-room .gs-mat     { left: 40.5%; bottom: 11%; width: 27%; }
.stage-room .gs-char    { left: 41%; bottom: 16%; width: 26%; z-index: 2; animation: guide-breathe 4.2s ease-in-out infinite; transform-origin: 50% 100%; }
.stage-room .gs-shelf1  { left: 29%; bottom: 71.3%; height: 10%; }
.stage-room .gs-shelf2  { left: 30%; bottom: 60%;   height: 10%; }
.stage-room .gs-shelf3  { left: 29.5%; bottom: 48%; height: 10%; }
.stage-room .gs-floor   { left: 78%; bottom: 14%; height: 20%; }
.stage-room .gs-floor2  { left: 8%;  bottom: 16%; height: 18%; }
.stage-room .gs-hang    { left: 72%; top: 8.5%; height: 16%; }
.stage-room .gs-hang2   { left: 86%; top: 8.5%; height: 16%; }
@keyframes guide-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.012); } }

/* 朵朵的神社：拜殿背景 2752x1536，朵朵在中間揮大幣，三枚繪馬在左邊飄 */
.stage-shrine { aspect-ratio: 16 / 9; background-image: url("/images/shrine/shrine-bg.png"); }
.stage-shrine .gs-duoduo { left: 50%; bottom: 6%; height: 62%; transform: translateX(-50%); z-index: 2; }
.stage-shrine .gs-ema    { left: 9%; bottom: 20%; height: 48%; animation: guide-float 5s ease-in-out infinite; }
.stage-shrine .gs-maga   { right: 8%; top: 10%; height: 13%; filter: drop-shadow(0 0 12px rgba(80, 220, 160, .9)); animation: guide-float 4s ease-in-out infinite reverse; }
@keyframes guide-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* --- 小藥丸：一列最多三顆 --- */
.guide-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.guide-pills span {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 999px;
    background: rgba(255, 255, 255, .7); border: 1px solid rgba(62, 39, 35, .12); color: #3E2723; font-size: .92rem; font-weight: 700;
    backdrop-filter: blur(5px);
}
.guide-pills span img { width: 22px; height: 22px; object-fit: contain; }

/* --- 八隻角色一列（修行之書底下） --- */
.guide-cast { display: flex; justify-content: center; align-items: flex-end; gap: 6px; flex-wrap: wrap; max-width: 820px; }
.guide-cast img { height: 96px; width: auto; transition: transform .2s; filter: drop-shadow(0 6px 10px rgba(62, 39, 35, .25)); }
.guide-cast img:hover { transform: translateY(-6px) scale(1.06); }

/* --- 書庫：卷物攤開當底，忍者狸貓站旁邊 --- */
.guide-library { position: relative; width: 100%; max-width: 820px; }
.guide-library .gl-scroll { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 30px rgba(62, 39, 35, .25)); }
.guide-library .gl-text {
    position: absolute; left: 14%; right: 30%; top: 50%; transform: translateY(-50%);
    font-family: "Noto Serif TC", serif; color: #3E2723; text-align: left;
}
.guide-library .gl-text h3 { font-size: clamp(1.1rem, 2.6vw, 1.7rem); font-weight: 900; margin: 0 0 .3em; letter-spacing: .08em; }
.guide-library .gl-text p { font-size: clamp(.8rem, 1.7vw, 1.05rem); line-height: 1.6; margin: 0; color: #5D4037; font-family: "Noto Sans TC", sans-serif; }
.guide-library .gl-ninja { position: absolute; right: 2%; bottom: -4%; height: 92%; width: auto; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .3)); }

/* --- 繪馬進化：待開光的「開」印 --- */
.ema-layer .ema-seal {
    position: absolute; right: 8%; top: 6%; width: 72px; height: 72px; border-radius: 50%;
    background: #c62828; color: #fff; display: flex; align-items: center; justify-content: center;
    font-family: "Noto Serif TC", serif; font-size: 2rem; font-weight: 900;
    box-shadow: 0 0 0 4px rgba(198, 40, 40, .25), 0 6px 14px rgba(0, 0, 0, .25); transform: rotate(-12deg);
}
.ema-layer.layer-pending img { filter: drop-shadow(0 0 18px rgba(251, 191, 36, .85)); }

/* --- App 頁：五個分頁一列 --- */
.tab-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; max-width: 900px; width: 100%; }
.tab-row div {
    padding: 16px 10px; border-radius: 16px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(62, 39, 35, .1);
    font-family: "Noto Serif TC", serif; font-size: 1.15rem; font-weight: 900; color: #3E2723;
}
.tab-row div small { display: block; font-family: "Noto Sans TC", sans-serif; font-weight: 400; font-size: .8rem; color: #5D4037; margin-top: 4px; }
.tab-row div.home { border-color: #d97706; box-shadow: 0 0 0 3px rgba(251, 191, 36, .25); }

@media (max-width: 768px) {
    .guide-scene-section { padding: 70px 16px; gap: 28px; }
    .guide-stage { border-radius: 12px; }
    .guide-cast img { height: 64px; }
    .guide-library .gl-text { left: 11%; right: 42%; }
    .guide-library .gl-ninja { height: 78%; right: 0; }
    .ema-layer .ema-seal { width: 52px; height: 52px; font-size: 1.4rem; }
    .tab-row { gap: 6px; }
    .tab-row div { padding: 10px 4px; font-size: .95rem; border-radius: 12px; }
    .tab-row div small { display: none; }
}

/* App 頁 道場段：Q北立繪取代手機截圖 */
.feature-visual .guide-art { width: 100%; max-width: 340px; height: auto; filter: drop-shadow(0 16px 30px rgba(62, 39, 35, .25)); }
@media (max-width: 1200px) and (min-width: 901px) { .app-hero-visual .phone-mockup { max-width: 230px; } }

/* App 頁：三張手機並排（開光儀式三步） */
.phone-trio { display: flex; justify-content: center; gap: 18px; max-width: 900px; width: 100%; }
.phone-trio .phone-mockup { max-width: 250px; flex: 1 1 0; }
.phone-trio figure { margin: 0; flex: 1 1 0; text-align: center; max-width: 250px; }
.phone-trio figcaption { margin-top: 10px; font-family: "Noto Serif TC", serif; font-weight: 900; color: #3E2723; font-size: 1.05rem; letter-spacing: .1em; }
@media (max-width: 768px) {
    .phone-trio { gap: 8px; }
    .phone-trio figcaption { font-size: .85rem; }
}