/* 英会話日和 — 60〜80歳の方でも迷わず使える基準（app-senior-friendly / app-one-screen）2026-10-01
   字：16（最小）/18（本文）/20/24/28 の5段。押す所：56px以上（大事なボタン64px）。すき間8px以上。
   1画面に1つのこと。入りきらないときは画面を分ける（スクロールさせない）。 */
:root{--paper:#fbf4e6;--card:#fffdf6;--ink:#26332e;--ink2:#435248;--green:#3d6a52;--mint:#dfe9d3;--line:#d3dac4;--warm:#6b4a26;--btn:#e3ead6;color-scheme:only light}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{height:100vh;height:100dvh;background:var(--paper);color:var(--ink);font-family:'Yu Gothic','YuGothic','Hiragino Sans',Meiryo,system-ui,sans-serif;font-weight:500;font-size:18px;line-height:1.6;display:flex;flex-direction:column;padding:max(8px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));font-feature-settings:"palt"}
button,select{font:inherit;color:inherit}
button{cursor:pointer;border:2px solid transparent;border-radius:16px;min-height:56px;min-width:56px;background:var(--btn);padding:8px 16px;touch-action:manipulation;font-weight:700;font-size:18px;line-height:1.35;color:var(--ink)}
button:disabled{background:#ece9df;color:#555b52;border:2px dashed #c9c6b8;box-shadow:none!important;cursor:default}
button:focus-visible,select:focus-visible{outline:4px solid #a8662f;outline-offset:2px}
button:active:not(:disabled){transform:translateY(2px)}
h1,h2,p{margin:0}
h1{font-size:24px;line-height:1.4}
small{font-size:16px}
[lang=en]{font-family:Georgia,'Times New Roman',serif;font-weight:500}
.primary{background:var(--green)!important;color:#fff!important;box-shadow:0 3px 0 #2a4d3a;min-height:64px;font-size:20px}
.wide{width:100%;flex:none}
.button-icon{font-size:22px;line-height:1.1;display:block}
.anim-off,.anim-off::before,.anim-off::after{animation-play-state:paused!important}
/* motion-pause.js（画面の外・タブを離れたら動きを止める）が付けるクラス。前は index.html の中に書いてあったが CSP で止まるので外へ出した */
@media(prefers-reduced-motion:reduce){.anim-watch,.anim-watch::before,.anim-watch::after{animation-play-state:paused!important}}

/* ── 上の帯（ホーム・お話・くり返す・ごほうび の4画面だけ） ── */
header{flex:none;display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--line);max-width:1000px;width:100%;margin:0 auto}
#home{background:none;padding:0 4px;text-align:left;font-size:20px;letter-spacing:.02em;display:flex;flex-direction:column;justify-content:center;min-width:0}
#home>b{font-weight:700;white-space:nowrap}
#home>b>span{color:#9a6c24}
#home small{display:none;font-size:16px;font-weight:500;color:var(--ink2);letter-spacing:0}
.header-actions{display:flex;align-items:center;gap:8px;flex:none}
.header-actions button{background:#f1ecdc;padding:4px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-width:64px}
.header-actions button>span{font-size:20px;line-height:1.1}
.header-actions button small{font-size:16px;line-height:1.3;white-space:nowrap}
.header-actions button[hidden]{display:none}

/* ── 中身 ── */
#app{flex:1;min-height:0;overflow:hidden;width:100%;max-width:760px;margin:0 auto;padding:10px 0 8px;display:flex}
#app>section{width:100%;min-height:0;display:flex;flex-direction:column;gap:10px}

/* ── 下の帯 ── */
#nav{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;border-top:1px solid var(--line);padding-top:8px;width:100%;max-width:760px;margin:0 auto}
#nav:empty{display:none}
#nav button{background:none;color:var(--ink2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-width:0;min-height:60px;padding:4px 2px;font-size:16px;border-radius:14px}
#nav button[aria-current=page]{background:var(--mint);color:var(--green);border-color:#b9cca7}
#nav .button-icon{font-size:22px}
body.sub header{display:none}
body.sub #nav{display:none}

/* ── お知らせ（空のときは場所をとらない） ── */
#status{flex:none;font-size:18px;line-height:1.5;text-align:center;margin:0 auto 6px;color:var(--warm);font-weight:700;max-width:760px;width:100%}
#status:empty{display:none}

/* ── 共通の部品 ── */
.topbar{flex:none;display:flex;align-items:center;gap:10px}
.topbar .back{flex:none;background:#f1ecdc;display:flex;align-items:center;gap:4px;padding:6px 14px 6px 10px}
.topbar .back span{font-size:22px;line-height:1}
.topbar-title{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.topbar-title strong{font-size:20px}
.topbar-title small{color:var(--ink2);font-weight:700}
.topbar .star{flex:none;background:#f6ecd2;color:#6d4b12;display:flex;flex-direction:column;align-items:center;padding:4px 8px;min-width:72px}
.topbar .star span{font-size:22px;line-height:1.1}
.topbar .star small{line-height:1.3}
.section-heading{flex:none}
.section-heading h1{font-size:24px}
.section-heading p,.lead{font-size:18px;color:var(--ink2);flex:none}
.tag{font-size:16px;font-weight:700;color:var(--green)}
.hint{font-size:18px;text-align:center;color:var(--ink2);flex:none}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}
.pager>span{font-size:18px;font-weight:700}
.pager button{display:flex;align-items:center;gap:6px;min-width:110px;justify-content:center}
.pager button[data-action=next],.pager button[data-action=help-next]{flex-direction:row-reverse}
.pager .button-icon{font-size:20px}
.pager.solo{justify-content:center}

/* ── ホーム ── */
.home-layout{display:grid!important;grid-template-rows:auto minmax(0,1fr) auto;gap:10px}
.hero{display:flex;flex-direction:column;min-height:0;gap:6px}
.hero h1{font-size:28px;line-height:1.35;position:relative;flex:none}
.hero h1 em{font-style:normal;color:var(--green)}
.title-line{display:block;position:relative;width:max-content;max-width:100%;animation:title-rise .6s ease-out both}
.title-highlight{animation-delay:.15s}
.title-highlight em{position:relative;z-index:1}
.title-highlight:after{content:'';position:absolute;left:1%;right:5%;height:.24em;bottom:.11em;background:#e6dba4;border-radius:50%;transform:scaleX(0) rotate(-2deg);transform-origin:left;animation:underline-draw .8s .6s ease-out forwards}
.title-highlight i{font-style:normal;font-size:.55em;position:absolute;right:-.9em;top:-.25em;color:#b58a3f}
.friends{position:relative;flex:1;min-height:0;display:flex;align-items:flex-end;justify-content:center;gap:40px;border-bottom:3px solid #b7c7a4;background:radial-gradient(ellipse at 50% 100%,#ecdfb780,transparent 68%);border-radius:45% 45% 10% 10%}
.friends img{height:min(100%,150px);width:100px;object-fit:contain;object-position:bottom;transform-origin:bottom}
.friends .nana{animation:nana-sway 3.2s ease-in-out infinite}
.friends .banard{animation:banard-hop 3.8s ease-in-out infinite}
.hello{position:absolute;top:4px;background:#fff;border:1px solid #e0dfcf;border-radius:14px;padding:2px 10px;font-family:Georgia,serif;font-size:18px;color:var(--ink);white-space:nowrap}
.hello-nana{left:0;transform:rotate(-3deg)}
.hello-banard{right:0;transform:rotate(3deg)}
.daily{display:flex;flex-direction:column;gap:10px;min-height:0}
.routine{width:100%;display:flex;gap:12px;text-align:left;align-items:center;padding:10px 14px;border-radius:20px;box-shadow:0 4px 0 #d8cca9;min-height:88px;background:#f6e6bc;border:2px solid #e2d19f;animation:card-enter .5s .1s both}
.routine.evening{background:#e1e7ee;box-shadow:0 4px 0 #c5d0dc;border-color:#cad5e0;animation-delay:.2s}
.routine-art{font-size:36px;color:#8a611b;width:44px;text-align:center;flex:none}
.evening .routine-art{color:#4d6378}
.routine-text{flex:1;min-width:0;display:flex;flex-direction:column}
.routine strong{font-size:20px;line-height:1.35}
.routine em{font-style:normal;font-size:16px;font-weight:500;color:var(--ink2);line-height:1.4}
.routine b{font-size:24px;font-weight:400;flex:none}
.daily-foot{text-align:center;font-size:16px;color:var(--ink2);font-weight:700}

/* ── 章えらび ── */
.chapter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(64px,1fr);gap:8px;flex:1;min-height:0}
.chapter-tile{min-height:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;background:var(--card);border:2px solid #dfe4d2;box-shadow:0 3px 0 #e2dfcb;padding:6px 12px;gap:0}
.chapter-tile small{color:var(--ink2);line-height:1.35}
.chapter-tile strong{font-size:18px;line-height:1.35}

/* ── 場面えらび・くり返す ── */
.lesson-grid{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));grid-auto-rows:minmax(88px,1fr);gap:8px;flex:1;min-height:0;align-content:start}
.lesson-grid.cols-3{--cols:3}
.lesson-grid.cols-4{--cols:4}
.lesson-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6px 8px;background:var(--card);border:2px solid #e0ddc9;box-shadow:0 3px 0 #e4dfcb;min-height:0;gap:0}
.lesson-tile .tile-icon{font-size:26px;line-height:1.2}
.lesson-tile strong{font-size:18px;line-height:1.35}
.lesson-tile small{color:var(--ink2);line-height:1.35}
.empty{grid-column:1/-1;text-align:center;align-self:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.empty h2{font-size:20px}
.empty p{font-size:18px;color:var(--ink2)}

/* ── 場面の導入 ── */
.scene-stage{flex:1;min-height:60px;position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;border-radius:24px;background:linear-gradient(#e3eedc,#faf2dc 70%,#f3e4c4);border:1px solid #dbe5d2}
.scene-stage:after{content:'';position:absolute;bottom:14%;left:0;right:0;border-bottom:4px solid #b5c89f}
.scene-friends{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-end;gap:48px;height:100%;width:100%;padding-top:8px}
.scene-friends img{height:min(80%,240px);width:130px;object-fit:contain;object-position:bottom;transform-origin:bottom}
.scene-friends img:first-child{animation:nana-sway 3.2s ease-in-out infinite}
.scene-friends img:last-child{animation:banard-hop 3.8s ease-in-out infinite}
.scene-caption{flex:none;text-align:center}
.scene-caption h1{font-size:24px}
.scene-caption p{font-size:18px;line-height:1.6}
.scene-bottom{flex:none;display:flex;flex-direction:column;align-items:center;background:var(--card);border:2px solid #e1e5d4;border-radius:18px;padding:6px 12px;text-align:center}
.scene-bottom small{color:var(--ink2);font-weight:700}
.scene-bottom b{font-size:22px;line-height:1.5;font-weight:500}

/* ── 練習 ── */
.study-progress{flex:none;display:flex;flex-direction:column;gap:4px}
.study-progress p{font-size:18px;font-weight:700;color:var(--green);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.step-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.step-bar i{height:6px;border-radius:6px;background:#dcdccb}
.step-bar i.on{background:#5f8a67}
.study-body{flex:1;min-height:0;display:flex;gap:20px}
.coach{display:none}
.study-card{flex:1;min-width:0;min-height:0;border:2px solid #e1e3ce;border-radius:22px;background:var(--card);padding:12px 14px;display:flex;flex-direction:column;justify-content:center;gap:10px;overflow:hidden}
.study-card h2{font-family:Georgia,'Times New Roman',serif;font-size:28px;font-weight:500;line-height:1.5;overflow-wrap:anywhere;text-align:center}
.study-card h2.japanese{font-family:inherit;font-size:24px;font-weight:700}
.translation{font-size:20px;text-align:center;font-weight:700;color:var(--ink2)}
.explanation{font-size:18px;line-height:1.6}
.note{background:#f5efdd;border-radius:14px;padding:8px 12px;font-size:18px;line-height:1.6;color:#4d4225}
.audio-buttons{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.audio-buttons button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:4px 4px;font-size:16px;min-width:0;min-height:64px}
.audio-buttons button:first-child{background:#d7e5c6}
.study-footer{flex:none;display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.study-footer>button{display:flex;gap:6px;align-items:center;justify-content:center;min-height:64px}
.study-footer .button-icon{font-size:20px}
.flip-card{background:#eef1e3;border:2px dashed #9fb487;font-size:20px;min-height:64px}
.flip-card[lang=en]{font-size:22px}
.quiz{display:flex;flex-direction:column;gap:8px}
.quiz-q{font-size:18px;font-weight:700;text-align:center}
.quiz button{font-size:20px;text-align:left;background:#f6f1e5;border-color:#e0d8c2;min-height:56px}
.quiz>p[role=status]{font-size:18px;min-height:29px;color:var(--warm);text-align:center;font-weight:700}
.dialogue{display:flex;flex-direction:column;gap:8px}
.dialogue>div{background:#eef3e5;border-radius:16px;padding:6px 12px}
.dialogue>div+div{background:#f8ecdf}
.dialogue small{color:var(--ink2);font-weight:700;display:block;line-height:1.35}
.line{background:none;border:0;text-align:left;font-size:22px;line-height:1.5;padding:2px 0;display:block;width:100%;min-height:56px}
.line span{font-size:18px;color:var(--green)}
.dialogue p{font-size:18px;line-height:1.5;color:var(--ink2)}
.dialogue p.reply{font-size:20px;line-height:1.4;color:var(--ink);font-weight:700}
.dialogue p.reply[lang=en]{font-weight:500}

/* ── 練習おわり ── */
.completion-body{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px}
.completion-star{font-size:40px;color:#a7843a;line-height:1;animation:sparkle 2.4s ease-in-out infinite}
.completion h1{font-size:28px}
.en-line{font-size:24px;color:#3f6a3f}
.mini-friends{flex:1;min-height:0;max-height:140px;display:flex;justify-content:center;gap:40px}
.mini-friends img{height:100%;width:80px;object-fit:contain;object-position:bottom;animation:bob 4s infinite}
.completion-body>p{font-size:18px;color:var(--ink2)}
.completion-actions{flex:none;display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.completion-actions button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:64px}

/* ── ごほうび ── */
.reward-hero{flex:none;display:flex;align-items:center;gap:14px;padding:10px 14px;background:linear-gradient(110deg,#f8e9bd,#fff9e8);border:2px solid #e6d5a8;border-radius:20px}
.reward-hero>span{font-size:44px;line-height:1}
.reward-hero small{display:block;color:#5b4a1f;font-weight:700}
.reward-hero strong{display:block;font-size:24px;line-height:1.3}
.reward-hero p{font-size:18px;color:var(--ink2);line-height:1.5}
.reward-stats{flex:none;font-size:18px;font-weight:700;color:var(--ink2);text-align:center;line-height:1.6}
.reward-actions{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(72px,104px);gap:10px;align-content:center}
.reward-actions button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:var(--card);border:2px solid #d9dfc9;box-shadow:0 3px 0 #e2e0cf;min-height:72px;max-height:110px}
.reward-actions button span{font-size:28px;line-height:1.1}
.reward-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(60px,1fr);gap:8px}
.reward-stamp{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--card);border:2px solid #e1e2d2;border-radius:16px;text-align:center;min-height:0;padding:4px 8px}
.reward-stamp span{font-size:30px;line-height:1}
.reward-stamp small{font-weight:700;line-height:1.35}
.reward-stamp.locked{background:#eeeee5;color:#4d5149;border-style:dashed}

/* ── 今日の問題 ── */
.mission-scene{flex:none;display:flex;align-items:center;gap:12px;padding:6px 12px;border-radius:18px;background:linear-gradient(110deg,#eff3e5,#f8e8d8);border:1px solid #dfe5d6}
.mission-art{flex:none;display:flex;align-items:center;gap:2px}
.mission-art img{height:56px;width:38px;object-fit:contain}
.mission-art span{font-size:26px}
.mission-scene small{font-weight:700;color:var(--ink2);display:block;line-height:1.35}
.mission-scene p{font-size:18px;line-height:1.5}
.mission-lead,.adventure-prompt{flex:none;display:flex;align-items:center;gap:10px;background:var(--card);border:2px solid #e1e3d1;border-radius:16px;padding:6px 8px 6px 12px}
.mission-lead>div,.adventure-prompt>div{flex:1;min-width:0}
.mission-lead small,.adventure-prompt small{display:block;color:var(--ink2);font-weight:700;line-height:1.35}
.mission-lead strong,.adventure-prompt strong{display:block;font-size:22px;line-height:1.5;font-weight:500}
.adventure-prompt p{font-size:18px;color:var(--ink2);line-height:1.45}
.listen-btn{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-width:64px;padding:4px 6px;background:#d7e5c6;font-size:16px}
.listen-btn span{font-size:20px;line-height:1.1}
.mission-choices{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;justify-content:center}
.mission-choices .q{font-size:18px;font-weight:700;text-align:center}
.mission-choices button{display:flex;align-items:center;gap:10px;text-align:left;min-height:60px;background:var(--card);border:2px solid #d9dfca;border-radius:16px;padding:6px 12px;font-size:20px;line-height:1.5;box-shadow:0 3px 0 #e5e4d4}
.mission-choices button span{font:700 18px system-ui,sans-serif;background:#dbe8d0;color:#2f5540;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none}
.mission-choices button:disabled{text-decoration:line-through}
.mission-choices .miss{font-size:18px;text-align:center;color:var(--warm);font-weight:700;line-height:1.45}
.mission-result{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;border-radius:20px;background:#fff9e7;border:2px solid #eadfbf;padding:10px 14px}
.mission-result>span{font-size:40px;line-height:1}
.mission-result strong{font-size:20px}
.mission-result p{font-size:24px;line-height:1.5}
.mission-result small{font-size:18px;line-height:1.6;color:var(--ink2)}

/* ── アルバム ── */
.album-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(80px,1fr);gap:8px;flex:1;min-height:0}
.album-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;text-align:center;background:var(--card);border:2px solid #e1e2d2;box-shadow:0 3px 0 #e5e2d1;padding:4px 8px;min-height:0}
.album-tile small{color:var(--ink2);line-height:1.35}
.album-tile strong{font-size:18px;line-height:1.35}
.album-tile em{font-size:16px;font-style:normal;color:#5b4a1f;line-height:1.35}
.album-tile.unlocked{background:#f3f6e6}
.album-tile.gold{background:linear-gradient(135deg,#fff6d2,#f8e9b9);border-color:#d6bd6e}
.album-tile.locked{background:#f1efe6;border-style:dashed}
.postcard-art{flex:1;min-height:60px;position:relative;display:flex;align-items:flex-end;justify-content:center;border-radius:22px;background:radial-gradient(circle at 50% 75%,#f6d9b8,#e5f0de 73%);border:4px solid #fffdf2;box-shadow:0 4px 0 #dbdfce;overflow:hidden}
.postcard-art div{display:flex;align-items:flex-end;gap:40px;height:80%}
.postcard-art img{height:100%;width:100px;object-fit:contain;object-position:bottom;transform-origin:bottom}
.postcard-art img:first-child{animation:nana-sway 3.2s infinite}
.postcard-art img:last-child{animation:banard-hop 3.8s infinite}
.postcard-art.postcard-locked img{filter:grayscale(1);opacity:.45}
.postcard-spark{position:absolute;top:8%;font-size:30px;color:#9c8446}
.postcard-copy{text-align:center;flex:none;display:flex;flex-direction:column;gap:4px;align-items:center}
.postcard-copy p{font-size:18px;line-height:1.6}
.postcard-copy progress{width:min(100%,400px);height:12px;accent-color:#5f8a67}

/* ── 選べるお話 ── */
.adventure-grid{display:grid;grid-auto-rows:minmax(0,1fr);gap:10px;flex:1;min-height:0}
.adventure-tile{display:flex;align-items:center;gap:12px;text-align:left;background:var(--card);border:2px solid #d9dfcf;box-shadow:0 3px 0 #e2e2d2;padding:6px 12px;min-height:0}
.adventure-tile.rain{background:linear-gradient(110deg,#eaf0f5,#fffdf8)}
.adventure-tile.festival{background:linear-gradient(110deg,#fcebd7,#fffdf8)}
.adventure-tile.sea{background:linear-gradient(110deg,#e3f1ec,#fffdf8)}
.adventure-tile>span{font-size:36px;flex:none}
.adventure-tile>div{flex:1;min-width:0;display:flex;flex-direction:column}
.adventure-tile small{color:var(--ink2);line-height:1.35}
.adventure-tile strong{font-size:20px;line-height:1.3}
.adventure-tile p{font-size:18px;font-weight:500;line-height:1.45;color:var(--ink2)}
.adventure-tile b{font-size:24px;font-weight:400;flex:none}
.ending-trail{font-size:18px;letter-spacing:4px;line-height:1.3;color:#5d7560}
.adventure-page.rain{--adventure-bg:#e7eff6;--adventure-accent:#7c9db8}
.adventure-page.festival{--adventure-bg:#faead8;--adventure-accent:#d49772}
.adventure-page.sea{--adventure-bg:#e1f1ec;--adventure-accent:#6aafa5}
.adventure-art{flex:1;min-height:50px;max-height:150px;display:flex;align-items:flex-end;justify-content:center;gap:30px;border-radius:20px;background:radial-gradient(ellipse at 50% 95%,#f8f6e6,var(--adventure-bg));border-bottom:4px solid var(--adventure-accent);overflow:hidden}
.adventure-art img{height:90%;width:80px;object-fit:contain;object-position:bottom;transform-origin:bottom}
.adventure-art img:first-child{animation:nana-sway 3.2s infinite}
.adventure-art img:last-child{animation:banard-hop 3.8s infinite}
.adventure-art span{font-size:36px;align-self:center}
.adventure-choices{flex:none;display:flex;flex-direction:column;gap:10px}
.adventure-choices button{display:flex;flex-direction:column;text-align:left;background:var(--card);border:2px solid #d9dfcb;box-shadow:0 3px 0 #e1e4d4;padding:6px 14px;min-height:64px}
.adventure-choices button span{font-size:20px;line-height:1.5}
.adventure-choices button small{font-weight:500;color:var(--ink2);line-height:1.4}
.adventure-dialogue{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;justify-content:center}
.adventure-dialogue>div{display:flex;align-items:center;gap:10px;border-radius:16px;background:var(--card);border:2px solid #dfe4d2;padding:6px 8px 6px 12px}
.adventure-dialogue>div+div{background:#f6efe3}
.adventure-dialogue>div>div{flex:1;min-width:0}
.adventure-dialogue small{display:block;color:var(--ink2);font-weight:700;line-height:1.35}
.adventure-dialogue strong{display:block;font-size:22px;line-height:1.5;font-weight:500}
.adventure-dialogue p{font-size:18px;line-height:1.45;color:var(--ink2)}
.adventure-note{flex:none;border-radius:14px;background:#eef3e7;padding:6px 12px;font-size:18px;line-height:1.55;color:#34463a}
.adventure-ending-art{flex:1;min-height:60px;position:relative;display:flex;justify-content:center;align-items:flex-end;border-radius:22px;background:radial-gradient(circle at 50% 80%,#fff9de,var(--adventure-bg));border:4px solid #fffdf7;box-shadow:0 4px 0 #dce2d6;overflow:hidden}
.adventure-ending-art>span{position:absolute;top:6%;font-size:36px}
.adventure-ending-art div{display:flex;align-items:flex-end;gap:40px;height:75%}
.adventure-ending-art img{height:100%;width:90px;object-fit:contain;object-position:bottom;transform-origin:bottom}
.adventure-ending-art img:first-child{animation:nana-sway 3.2s infinite}
.adventure-ending-art img:last-child{animation:banard-hop 3.8s infinite}
.adventure-ending-copy{text-align:center;flex:none;display:flex;flex-direction:column;gap:2px}
.adventure-ending-copy h1{font-size:24px}
.adventure-ending-copy p[lang=en]{font-size:22px}
.adventure-ending-copy p:last-child{font-size:18px;line-height:1.55;color:var(--ink2)}
.adventure-actions{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;flex:none}
.adventure-actions button{min-height:64px}

/* ── 使い方（ダイアログ） ── */
dialog{border:2px solid #d5d4bd;border-radius:22px;background:#fffdf5;color:var(--ink);max-width:520px;width:calc(100% - 32px);padding:16px 18px;max-height:calc(100dvh - 32px);overflow:hidden}
dialog[open]{display:flex;flex-direction:column;gap:10px}
dialog::backdrop{background:#273f3680}
#dialog-content{display:flex;flex-direction:column;gap:10px}
dialog small,dialog label{font-size:16px;font-weight:700;color:var(--ink2)}
dialog h2{font-size:24px;line-height:1.35}
dialog p{font-size:18px;line-height:1.7}
dialog select{width:100%;min-height:56px;padding:8px;font-size:18px;border:2px solid #c9ccb8;border-radius:12px;background:#fff}
#close-dialog{display:block;width:100%;background:#3d6a52;color:#fff;min-height:64px}

/* ── 動き ── */
@keyframes bob{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-5px)}}
@keyframes title-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes underline-draw{to{transform:scaleX(1) rotate(-2deg)}}
@keyframes sparkle{0%,100%{opacity:.7;transform:scale(.9) rotate(-10deg)}45%{opacity:1;transform:scale(1.1) rotate(12deg)}}
@keyframes nana-sway{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-5px)}}
@keyframes banard-hop{0%,100%{transform:rotate(3deg) translateY(0)}36%{transform:rotate(-4deg) translateY(-8px)}55%{transform:rotate(2deg) translateY(-2px)}}
@keyframes card-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.title-highlight:after{transform:scaleX(1) rotate(-2deg)}}

/* 押す物が4つ並ぶ所は、せまい画面では2つずつ2段に（「自分の声」が折り返さないように） */
@media(max-width:420px){.audio-buttons:has(>:nth-child(4)){grid-auto-flow:row;grid-template-columns:1fr 1fr}.audio-buttons:has(>:nth-child(4)) button{flex-direction:row;gap:6px;min-height:56px}}

/* ── 高さが足りない画面（iPhone SE など）：絵を小さく。ボタンと字は小さくしない ── */
@media(max-height:760px){
 .friends img{height:min(100%,120px);width:80px}
 .scene-friends img{height:min(88%,130px)}
 .mission-art img{height:48px;width:32px}
 .dialogue.flipped>div:first-child{display:none}
}
@media(max-height:700px){
 .hello{display:none}
 .mission-scene .mission-art{display:none}
 .study-card{gap:8px;padding:10px 12px}
 #app{padding:6px 0 4px}
 #app>section{gap:8px}
 #status{margin-bottom:4px}
}

/* ── 広い画面（iPad・パソコン） ── */
@media(min-width:700px){
 #home small{display:block}
 .chapter-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .album-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .reward-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .reward-actions{grid-template-columns:repeat(4,minmax(0,1fr))}
 .reward-stamp{flex-direction:column;gap:2px}
 .adventure-actions,.completion-actions,.study-footer{max-width:560px;width:100%;margin:0 auto}
 .wide{max-width:560px;align-self:center}
}
@media(min-width:900px) and (min-height:700px){
 .coach{display:flex;flex-direction:column;align-items:center;justify-content:center;width:200px;flex:none;gap:12px}
 .coach .speech{background:#fff;border-radius:20px;padding:12px;text-align:center;font-size:18px;line-height:1.6;box-shadow:0 4px 0 #e7e3ce}
 .coach img{height:150px;width:110px;object-fit:contain;animation:bob 4s infinite}
}

/* ── 横向きのスマホ（高さ500px以下）：左右に並べる ── */
@media(orientation:landscape) and (max-height:500px){
 body{padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}
 header{padding-bottom:4px}
 #home small{display:none}
 #app{padding:6px 0 4px;max-width:none}
 #nav{padding-top:4px;max-width:none}
 #nav button{min-height:56px;flex-direction:row;gap:6px}
 .home-layout{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr)}
 .hero h1{font-size:24px}
 .hello{display:none}
 .daily{justify-content:center}
 .routine{min-height:72px;padding:6px 12px}
 .chapter-grid,.lesson-grid,.album-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 /* 練習：左に中身、右に「もどる・しおり・何番目・前へ・次へ」を縦に */
 .study{display:grid!important;grid-template-columns:minmax(0,1fr) 230px;grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"card top" "card prog" "card ." "card foot";column-gap:12px;row-gap:8px}
 .study>.topbar{grid-area:top;flex-wrap:wrap;row-gap:4px;justify-content:space-between}
 .study>.topbar .topbar-title{order:3;flex-basis:100%}
 .study-progress{grid-area:prog}
 .study-body{grid-area:card}
 .study-footer{grid-area:foot;grid-template-columns:1fr;gap:8px}
 .study-card{justify-content:center;gap:8px}
 /* 今日の問題：左に場面、右に答え */
 .mission-page{display:grid!important;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto minmax(0,1fr) auto;column-gap:12px;row-gap:8px}
 .mission-page>.topbar{grid-column:1;grid-row:1}
 .mission-scene{grid-column:1;grid-row:2}
 .mission-lead{grid-column:1;grid-row:3}
 .mission-choices{grid-column:2;grid-row:1/-1}
 .mission-result{grid-column:2;grid-row:1/5}
 .mission-page>.primary{grid-column:2;grid-row:5}
 .mission-result{gap:2px;padding:6px 12px}
 .mission-result>span{font-size:28px}
 .mission-page:has(.mission-result) .mission-scene{display:none}
 /* 選べるお話：左右に分ける */
 .adventure-page{display:grid!important;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr) auto;column-gap:12px;row-gap:8px;max-width:none}
 .adventure-page>.topbar{grid-column:1/-1}
 .adventure-prompt{grid-column:1;grid-row:2;align-self:center}
 .adventure-page>.hint{grid-column:1;grid-row:3}
 .adventure-choices{grid-column:2;grid-row:2/4;justify-content:center}
 .adventure-dialogue{grid-column:1;grid-row:2/4}
 .adventure-note{grid-column:2;grid-row:2;align-self:center}
 .adventure-continue{grid-column:2;grid-row:3}
 .adventure-ending-art{grid-column:1;grid-row:2/4}
 .adventure-ending-copy{grid-column:2;grid-row:2;align-self:center}
 .adventure-actions{grid-column:2;grid-row:3}
 /* 使い方：左に説明、右に選ぶ所とボタン */
 dialog{max-width:800px;padding:12px 16px}
 #dialog-content{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:8px;align-items:start}
 #dialog-content>small,#dialog-content>h2,#dialog-content>p{grid-column:1}
 #dialog-content>label,#dialog-content>select,#dialog-content>button,#dialog-content>.pager{grid-column:2}
 #dialog-content>label{grid-row:1}
 #dialog-content>select{grid-row:2}
 #dialog-content>button{grid-row:3}
 #dialog-content>.pager{grid-row:4}
 #dialog-content:not(:has(select))>.pager{grid-row:1/4;align-self:end}
 .scene-page{display:grid!important;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr) auto auto}
 .scene-page .topbar{grid-column:1/-1}
 .scene-page .scene-stage{grid-row:2/5}
 .reward-actions{grid-template-columns:repeat(4,minmax(0,1fr))}
 .reward-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .mission-scene .mission-art{display:none}
 .adventure-art{display:none}
 .dialogue.flipped>div:first-child{display:none}
}