:root{
  --ink:#1f2a3a; --sub:#6b7688; --bg:#f4f6f9; --card:#fff; --line:#e3e7ee;
  --blue:#2f6df6; --teal:#0fa885; --green:#12b886; --orange:#e0800a;
  --shadow:0 2px 10px rgba(31,42,58,.07);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:"Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%; touch-action:manipulation;
  padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right))
          calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
}
.wrap{max-width:900px;margin:0 auto}

/* ---- 上の帯：タイトルと進み具合 ---- */
.top{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.ttl{font-size:18px;font-weight:900;letter-spacing:.02em}
.ttl small{display:block;font-size:11.5px;font-weight:800;color:var(--sub);letter-spacing:.08em;margin-top:1px}
.count{margin-left:auto;font-size:19px;font-weight:900;color:var(--teal);font-variant-numeric:tabular-nums}
.back{
  border:2px solid var(--line); background:#fff; color:var(--sub); border-radius:999px;
  padding:8px 12px; font-size:12.5px; font-weight:900; text-decoration:none; white-space:nowrap;
}
.dots{display:flex;gap:5px;margin-bottom:11px}
.dots i{flex:1;height:6px;border-radius:99px;background:#dde3ec;transition:background .15s}
.dots i.done{background:#9fd9c8}
.dots i.now{background:var(--teal)}

/* ---- Part切替 ---- */
.parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:9px}
.parts button{
  border:2px solid var(--line);background:#fff;color:var(--sub);border-radius:13px;
  padding:8px 6px;font-family:inherit;font-size:14px;font-weight:900;cursor:pointer;
}
.parts button.on{border-color:var(--teal);background:#eafaf4;color:#0a6e57}
.parts button small{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;margin-top:1px;opacity:.85}

/* ---- 3段タブ ---- */
.stages{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-bottom:11px}
.stages button{
  border:2px solid var(--line); background:var(--card); border-radius:13px;
  padding:9px 4px 8px; font-family:inherit; color:var(--sub);
  font-size:14.5px; font-weight:900; line-height:1.25; cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.stages button .en{font-size:9.5px;font-weight:800;letter-spacing:.06em;opacity:.8}
.stages button .ic{font-size:19px;line-height:1}
.stages button.on{color:#fff;border-color:transparent}
.stages button.on.s1{background:linear-gradient(120deg,#2f6df6,#5b8dfa)}
.stages button.on.s2{background:linear-gradient(120deg,#0fbf9f,#2f9df6)}
.stages button.on.s3{background:linear-gradient(120deg,#e0800a,#f0a63c)}

/* ---- 絵 ---- */
.scene{
  position:relative; width:100%; aspect-ratio:1672/941; background:#e7ecf3;
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
  max-height:56vh; margin:0 auto;
}
.scene img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.scene .num{
  position:absolute;left:10px;top:10px;background:rgba(31,42,58,.62);color:#fff;
  font-size:13px;font-weight:900;padding:4px 11px;border-radius:99px;letter-spacing:.04em;
}
/* 2026-10-11：背景色を必ず入れる。透明だと、読み込み中に **前の絵が透けて見えて**
   「英文は次の文／絵は前の文」というずれが起きる（実機で発生した不具合）。 */
.scene .load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:#e7ecf3;font-size:14px;font-weight:800;color:var(--sub);letter-spacing:.04em}

/* ---- 英文 ---- */
.line{
  min-height:88px; display:flex; align-items:center; justify-content:center;
  background:var(--card); border:2px solid var(--line); border-radius:14px;
  margin-top:11px; padding:13px 16px; text-align:center;
}
.line .en{font-size:25px;font-weight:900;line-height:1.38;letter-spacing:.005em}
.line .hid{font-size:15.5px;font-weight:800;color:#b3bcc9;letter-spacing:.03em}
.line.reveal{border-color:#ffd79a;background:#fffaf0}

/* ---- ボタン ---- */
.row{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:9px;margin-top:11px}
.btn{
  border:none;border-radius:14px;font-family:inherit;font-weight:900;cursor:pointer;
  min-height:62px;font-size:17px;color:#fff;display:flex;align-items:center;justify-content:center;gap:6px;
  box-shadow:var(--shadow);
}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.32;box-shadow:none}
.btn.nav{background:#8795a8}
.btn.rep{background:linear-gradient(120deg,#0fa885,#19c79e);font-size:19px}
.btn.rep.playing{background:linear-gradient(120deg,#0b7f66,#0fa885)}
/* 👀 は .row（グリッド）の外にあるので、**width:100% を自分で持つ**。
   button は display:flex にしても中身の幅までしか広がらず、左に小さく出てしまう（2026-10-11 実測）。 */
.btn.look{
  width:100%;background:#fff;color:var(--orange);border:2px solid #ffd79a;
  min-height:54px;font-size:16px;box-shadow:none;margin-top:8px;
}
/* ---- お手本の音が鳴らせないときの警告 ----
   合成音声で代用せず、**はっきり出す**。出ていても Scene の練習は続けられる。 */
.warn{
  display:none;margin-top:10px;background:#fff4f4;border:2px solid #f3b4b4;border-radius:13px;
  padding:11px 14px;text-align:center;
}
.warn.on{display:block}
.warn .w1{font-size:16px;font-weight:900;color:#c0392b;letter-spacing:.01em}
.warn .w2{font-size:14px;font-weight:800;color:#8c3b32;line-height:1.7;margin-top:3px}
.foot{margin-top:13px;font-size:12px;font-weight:700;color:var(--sub);line-height:1.75;text-align:center}
.goal{
  margin-top:11px;background:#eafaf4;border:2px solid #bfe9d8;border-radius:13px;
  padding:11px 14px;font-size:14px;font-weight:800;color:#0a6e57;line-height:1.65;text-align:center;
}

/* ---- iPad 横向き・大きい画面 ---- */
@media (min-width:760px){
  .ttl{font-size:21px}
  .line .en{font-size:31px}
  .btn{min-height:68px;font-size:19px}
  .btn.rep{font-size:21px}
  .scene{max-height:50vh}
}
/* ---- iPad 横向き（高さが足りない）----
   2026-10-11 実測：1024×768 だと 🔊 と 👀 が画面の下に押し出され、
   子どもがスクロールしないと押せなかった。**1画面に収める**ことを優先して詰める。 */
@media (orientation:landscape) and (max-height:850px){
  body{padding-top:calc(6px + env(safe-area-inset-top))}
  .top{margin-bottom:6px}
  .ttl{font-size:16px}
  .ttl small{font-size:10px}
  .dots{margin-bottom:7px}
  .parts{margin-bottom:7px}
  .parts button{padding:6px 4px;font-size:13px}
  .stages{margin-bottom:7px}
  .stages button{padding:6px 4px 5px;font-size:13px}
  .stages button .ic{font-size:16px}
  .scene{max-height:38vh}
  .line{min-height:62px;margin-top:7px;padding:9px 14px}
  .line .en{font-size:23px}
  .row{margin-top:7px}
  .btn{min-height:52px;font-size:16px}
  .btn.rep{font-size:18px}
  .btn.look{min-height:44px;font-size:15px;margin-top:6px}
  .goal{margin-top:7px;padding:8px 12px;font-size:13px}
  .foot{margin-top:7px;font-size:11px}
}
/* ---- せまい縦 ---- */
@media (max-height:620px){
  .scene{max-height:42vh}
  .line{min-height:70px}
  .line .en{font-size:21px}
  .btn{min-height:54px}
}

/* Keep Part1 frame geometry. Parts2/3 retain a centered 3:2 artwork area inside it. */
.scene .artwork{position:relative;height:100%;aspect-ratio:3/2;max-width:100%;margin:0 auto;overflow:hidden}
.scene .sprite{position:absolute;inset:0;background-size:400% 400%;background-repeat:no-repeat}
.scene .sprite[hidden],.scene img[hidden],.scene .load[hidden],[hidden]{display:none!important}
.line:empty::before{content:"えいごは かくれています";font-size:15.5px;color:#b3bcc9}
#line:not(:has(.en)){font-size:25px;font-weight:900;line-height:1.38}
@media(min-width:760px){#line:not(:has(.en)){font-size:31px}}
@media(orientation:landscape) and (max-height:850px){#line:not(:has(.en)){font-size:23px}}
@media(max-height:620px){#line:not(:has(.en)){font-size:21px}}
.status:empty{display:none}.status{margin-top:10px;padding:11px 14px;border:2px solid #f3b4b4;border-radius:13px;color:#8c3b32;background:#fff4f4;text-align:center}
button:focus-visible,a:focus-visible{outline:3px solid #dc9300;outline-offset:3px}
.parts button{min-height:48px}.parts button[aria-current="page"]{border-color:var(--teal);background:#eafaf4;color:#0a6e57}
.stages button[aria-pressed="true"]{color:#fff;border-color:transparent}
.stages button.s1[aria-pressed="true"]{background:linear-gradient(120deg,#2f6df6,#5b8dfa)}
.stages button.s2[aria-pressed="true"]{background:linear-gradient(120deg,#0fbf9f,#2f9df6)}
.stages button.s3[aria-pressed="true"]{background:linear-gradient(120deg,#e0800a,#f0a63c)}
@media(max-width:420px){.top{gap:6px}.ttl{font-size:16px}.ttl small{font-size:9px}.count{font-size:17px}.back{font-size:11px;padding:8px}.parts button{font-size:12px}.stages button{font-size:12px}.stages button .en{font-size:8px}}

/* Keep the Part1 text/control baseline even when a sentence wraps. */
.line{height:88px;min-height:0}
@media(orientation:landscape) and (max-height:850px){.line{height:62px}}
@media(max-height:620px){.line{height:70px}}