/* Camera Master（ガラス：空の上に半透明の面を重ねる。最近のiOSの質感）
   ホームと練習の2画面。並び・動き・色をこの1ファイルに持つ */

:root {
  --sys: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;
  --rounded: ui-rounded, var(--sys);
  --emoji-font: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --rise: .6s;                 /* 絵が引いて映る長さ（.3s 遅れて始まり、押してから .9s で終わる）。app.js の RISE_MS と合わせる */

  --ink: #0F2A4A;
  --ink-2: rgba(15, 42, 74, .6);
  --ink-3: rgba(15, 42, 74, .2);
  --track: rgba(15, 42, 74, .12);
  --blue: #0A66EA;
  --white: #FFFFFF;
  --navy-1: #0E2A52;           /* ランダム出題のカード */
  --navy-2: #1A4A86;
  --sky-1: #4F93E2;
  --sky-2: #7DB5EE;
  --sky-3: #B8DAF6;
  --sky-4: #E7F2FB;
  --sun: rgba(255, 244, 220, .75);
  --frame: #DFE2E7;            /* PCで開いた時の外側 */
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
/* どの画面でもスクロールしない（1画面に収める） */
html, body { height: 100%; overflow: hidden; }
body {
  display: flex;
  flex-direction: column;
  font-family: var(--sys);
  background: var(--frame);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

.device { position: relative; flex: 1 1 auto; min-height: 0; }

/* PCで開いた時は、スマホの大きさの枠に入れて見せる */
@media (min-width: 640px) {
  body { align-items: center; justify-content: center; }
  .device {
    flex: none;
    width: 390px;
    height: min(800px, calc(100% - 60px));
    border-radius: 46px;
    overflow: hidden;
    box-shadow: 0 0 0 9px #141416, 0 34px 70px -24px rgba(0, 0, 0, .5);
  }
}

/* ---------- 土台：空と雲 ---------- */

.app {
  --cyc-give: 3.4s;
  --cyc-keep: 2.4s;
  --cyc-make: 3.6s;
  --cyc-take: 3.2s;
  --cyc-help: 3.4s;
  --cyc-let: 3.6s;
  --cyc-save: 3.6s;
  position: relative;
  isolation: isolate;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(80% 45% at 88% -5%, var(--sun), rgba(255, 244, 220, 0) 70%),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 36%, var(--sky-3) 70%, var(--sky-4) 100%);
}

/* 雲。地上（目のカメラ）では近くて大きく、空に上がると引いて小さくなる */
.app-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.cloud {
  position: absolute;
  border-radius: 50%;
  background: var(--white);
  filter: blur(26px);
  transition: transform .9s cubic-bezier(.3, .6, .25, 1);
  animation: cm-drift 38s ease-in-out infinite alternate;
}
/* ゆっくり流れる（地上⇔空の引きは transform、流れは translate で別々に動かす） */
@keyframes cm-drift { to { translate: 36px 0; } }
.c1 { width: 280px; height: 110px; left: -90px; top: 22%; opacity: .7; }
.c2 { width: 230px; height: 96px; right: -80px; top: 50%; opacity: .5; animation-duration: 46s; animation-direction: alternate-reverse; }
.c3 { width: 420px; height: 170px; left: -40px; bottom: -80px; opacity: .9; animation-duration: 52s; }
.app[data-cam="eye"] .c1 { transform: translate(-40px, -110px) scale(1.4); }
.app[data-cam="eye"] .c2 { transform: translate(40px, -90px) scale(1.4); }
.app[data-cam="eye"] .c3 { transform: translate(0, -60px) scale(1.3); }

/* ガラスの面 */
.stage,
.slots,
.listen,
.hint-btn,
.back,
.weapon,
.btn.secondary {
  background: linear-gradient(160deg, rgba(255, 255, 255, .44), rgba(255, 255, 255, .14));
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 0 0 1px rgba(255, 255, 255, .36),
    0 18px 36px -22px rgba(14, 54, 110, .55);
}

/* ホームと練習は同じ場所に重ね、横に少しずらして切り替える */
.view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 0 20px calc(14px + env(safe-area-inset-bottom));
  transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s;
}
.app[data-view="home"] .view-practice,
.app[data-view="practice"] .view-home {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .45s var(--ease), visibility 0s .45s;
}
.app[data-view="home"] .view-practice { transform: translateX(32px); }
.app[data-view="practice"] .view-home { transform: translateX(-32px); }

/* ---------- 円の進み具合（言えた数 / 問題数） ---------- */

.ring {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
}
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4.5; }
.ring .track { stroke: var(--track); }
.ring .bar {
  stroke: var(--blue);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1s var(--ease) .25s, opacity .2s;
}
/* まだ1問も言えていない時は、円の線を出さない（点が残って見えるため） */
.ring.is-zero .bar { opacity: 0; }
.ring-num {
  position: relative;
  font-family: var(--rounded);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ring-num small { font-size: .72em; font-weight: 600; color: var(--ink-2); }

/* ---------- ホーム ---------- */

/* ロゴ：アイコンと名前を横に並べて、真ん中に置く */
.home-head { display: flex; justify-content: center; padding-top: 40px; }
/* 大きさは画面の幅に合わせて決める（細いスマホでも1行に収まり、はみ出さない）。アイコンも文字に合わせて伸び縮みする */
.logo {
  display: inline-flex;
  align-items: center;
  gap: .36em;
  font-size: clamp(24px, 8.6vw, 35px);
}
.logo-mark {
  flex: none;
  width: 1.62em;
  height: 1.62em;
  filter: drop-shadow(0 10px 16px rgba(8, 30, 70, .35));
}
.logo-word {
  font-family: var(--rounded);
  font-size: 1em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--ink);
  white-space: nowrap;
  /* 紺 → 青のグラデーション（アイコンと同じ色の流れ）。縁に細い光を入れて、空の上でも文字が沈まないようにする */
  background: linear-gradient(100deg, #0B2350 0%, #1546B8 48%, #2F7BFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .55)) drop-shadow(0 6px 14px rgba(14, 54, 110, .22));
}
.logo-word b { font-weight: inherit; }
/* 開いた瞬間、アイコンの中のカメラの枠がピントを合わせるように締まる */
.logo-vf { transform-origin: 32px 32px; }
.app.intro .logo-vf { animation: cm-focus .9s var(--ease) both; animation-delay: .15s; }

/* 武器の棚は、名前とランダム出題の間の真ん中に置く */
.armory { margin-block: auto; padding-bottom: 6px; }
.shelf { display: grid; gap: 10px; margin-bottom: 12px; }
.shelf:last-child { margin-bottom: 0; }
.shelf-video { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shelf-more { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

.weapon {
  min-width: 0;
  height: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px 6px 14px;
  border-radius: 24px;
  transition: transform .15s var(--ease);
}
.weapon:active { transform: scale(.96); }
.weapon-verb {
  font-family: var(--rounded);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
}
.shelf-more .weapon { height: 108px; padding: 14px 4px 12px; border-radius: 20px; }
.shelf-more .weapon-verb { font-size: 18px; }
.shelf-more .ring { width: 44px; height: 44px; }
.shelf-more .ring-num { font-size: 13px; }
/* まだ問題が無い武器 */
.weapon:disabled { cursor: default; }
.weapon:disabled .weapon-verb { color: var(--ink-2); }
.weapon:disabled .ring-num { font-family: var(--sys); font-size: 10px; font-weight: 600; color: var(--ink-2); }

/* ランダム出題：全部まぜ。同じガラスの質感のまま、夜の濃い青で別格に見せる */
.boss {
  flex: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 18px 22px;
  border-radius: 26px;
  text-align: left;
  color: var(--white);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(140, 190, 255, .38), rgba(140, 190, 255, 0) 55%),
    linear-gradient(135deg, var(--navy-1) 0%, var(--navy-2) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    0 22px 40px -18px rgba(8, 30, 70, .75);
  transition: transform .15s var(--ease);
}
.boss:active { transform: scale(.98); }
.boss-text { flex: 1; min-width: 0; }
.boss-title { display: block; font-size: 22px; font-weight: 800; letter-spacing: .04em; }
.boss-sub { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.boss .ring .track { stroke: rgba(255, 255, 255, .18); }
.boss .ring .bar { stroke: var(--white); }
.boss .ring-num small { color: rgba(255, 255, 255, .7); }

/* 開いた瞬間：上から順に、短く浮かび上がる */
.app.intro .home-anim,
.app.intro .weapon {
  animation: cm-pop-in .6s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}
@keyframes cm-pop-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }

/* ---------- 練習：上のバー ---------- */

.top {
  flex: none;
  height: 56px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
.back {
  justify-self: start;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.back svg { width: 18px; height: 18px; }
/* 真ん中：押すと問題の一覧が出る */
.mode {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px 0 14px;
  border-radius: 18px;
  white-space: nowrap;
  transition: background-color .2s;
}
.mode:active { background: rgba(255, 255, 255, .3); }
.mode-chev { width: 16px; height: 16px; color: var(--ink-2); margin-left: -2px; }
.mode-name { font-family: var(--rounded); font-size: 17px; font-weight: 700; }
.count {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.count .of { margin: 0 .2em; opacity: .6; }

/* ヒント：押した時だけ、絵を言葉にした一文を出す */
.hint-btn {
  justify-self: end;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  transition: opacity .3s, background-color .2s, color .2s;
}
.hint-btn[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.app:not([data-step="sky"]):not([data-step="answer"]) .hint-btn { opacity: 0; visibility: hidden; }

/* ---------- 練習：カメラの枠（目のカメラ → 空のカメラ） ---------- */

.main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 22px 12px;   /* 上のバーとの間を少し空けて、枠を少し下げる */
}

/* 枠は動かさない。中身だけが、日本語から空からの絵に変わる */
.stage {
  --ay: 51%;          /* モノと自分の高さ */
  --tok: 80px;        /* モノ・自分の大きさ */
  --x-thing: 21%;     /* モノの横位置 */
  --x-me: 79%;        /* 自分の横位置 */
  --line: calc(var(--ay) - 18px); /* モノと自分の真ん中の高さ。板もこの線を軸に傾ける */
  position: relative;
  flex: 1 1 auto;
  min-height: 150px;
  max-height: 390px;   /* 画面に余裕があれば少し縦長に */
  border-radius: 34px;
  overflow: hidden;
}

/* 目のカメラ｜空のカメラ の切り替え（iOS の切り替えスイッチの形） */
.cam-switch {
  position: absolute;
  z-index: 6;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: 999px;
  background: rgba(15, 42, 74, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.cam-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 2px 8px -2px rgba(14, 54, 110, .35);
  transition: transform .35s var(--ease);
}
.app[data-cam="sky"] .cam-thumb { transform: translateX(100%); }
.cam-opt {
  position: relative;
  z-index: 1;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--ink-2);
  transition: color .2s;
}
.cam-opt[aria-pressed="true"] { color: var(--ink); }

/* 目のカメラ：日本語のお題。空に上がると、遠ざかって消える */
.ground-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 40px 20px 28px;
  transition: opacity .3s var(--ease), transform .5s var(--ease), filter .4s;
}
.app:not([data-cam="eye"]) .ground-layer {
  opacity: 0;
  transform: scale(.86);
  filter: blur(5px);
  pointer-events: none;
}
.prompt {
  text-align: center;
  font-size: clamp(22px, 6.4vw, 26px);
  font-weight: 700;
  line-height: 1.55;
}
/* 「、」の後ろでだけ改行させる（入りきらない時は中でも折り返す） */
.prompt .ph { display: inline-block; max-width: 100%; word-break: auto-phrase; }

/* 空のカメラ：近すぎて見えない所から、引いて全体が映る */
.sky-layer {
  position: absolute;
  inset: 0;
  transform-origin: 50% 46%;
  transition: transform var(--rise) var(--ease) .3s, opacity .35s var(--ease) .3s;
}
.app[data-cam="eye"] .sky-layer { opacity: 0; transform: scale(1.5); transition-delay: 0s; }

/* 横位置は答えの3列（1 : 0.4 : 1。中身が長い所は広がる）の真ん中あたり */
.actor {
  position: absolute;
  z-index: 2;
  top: var(--line);
  width: var(--tok);
  height: var(--tok);
  transform: translate(-50%, -50%) translateX(0) scale(1);
  transition: transform .5s var(--ease), opacity .4s var(--ease);
}
.thing { left: var(--x-thing); }
.me { left: var(--x-me); }
/* 引いた瞬間、少し遅れて自分も映る */
.app[data-cam="eye"] .me { opacity: 0; transform: translate(-50%, -50%) translateX(18px) scale(.86); }
.app:not([data-cam="eye"]) .me { transition-delay: .5s; }

.tok {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(165deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .58));
  box-shadow:
    inset 0 1px 0 var(--white),
    inset 0 -6px 14px rgba(120, 170, 230, .18),
    0 12px 26px -12px rgba(14, 54, 110, .5);
}
.thing .tok { border-radius: 25px; }
.me .tok { border-radius: 50%; }
.emo { font-family: var(--emoji-font); font-style: normal; line-height: 1; }
.tok .emo { font-size: 44px; }
.face { position: absolute; inset: 0; display: grid; place-items: center; }
.fb { opacity: 0; }
/* 板の上に立っている影 */
.actor::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: calc(100% - 7px);
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(14, 54, 110, .34), rgba(14, 54, 110, 0));
}

.lbl {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  line-height: 1.35;
  font-size: 15px;
  font-weight: 600;
}
.who, .st { display: block; }
/* 下の文字は .lbl の大きさに合わせて縮む（板からはみ出す時は app.js が .lbl を小さくする） */
.who { font-size: .8em; color: var(--ink-2); }
.st { font-size: 1em; font-weight: 700; opacity: 0; }

.badge {
  position: absolute;
  z-index: 2;
  top: -8px;
  right: -8px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 6px 14px -4px rgba(14, 54, 110, .45);
  opacity: 0;
}
.badge .emo { font-size: 18px; }
/* let の鍵（閉→開）。バッジと同じ場所に重ねる */
.lock {
  position: absolute;
  z-index: 3;
  top: -10px;
  right: -10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: none;
  place-items: center;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 6px 14px -4px rgba(14, 54, 110, .45);
}
.lock .emo { grid-area: 1 / 1; font-size: 19px; }
.lk-o { opacity: 0; }
.app[data-verb="let"] .lock { display: grid; }
/* save の守り（自分を包むガラスの泡） */
.shield {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: calc(100% + 26px);
  height: calc(100% + 26px);
  margin: calc((100% + 26px) / -2) 0 0 calc((100% + 26px) / -2);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .95);
  background: radial-gradient(circle, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .5) 100%);
  box-shadow: 0 0 16px rgba(255, 255, 255, .85);
  opacity: 0;
  pointer-events: none;
}
/* help の光（モノの足もとから自分の足もとへ滑って、下から持ち上げる） */
.lift {
  width: 70px;
  height: 18px;
  margin: calc(var(--tok) / 2 - 12px) 0 0 -35px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--white), rgba(255, 255, 255, .7) 45%, rgba(255, 255, 255, 0));
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, .95));
  opacity: 0;
}
.aura, .burst {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
.aura {
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  margin: calc((100% + 48px) / -2) 0 0 calc((100% + 48px) / -2);
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .45) 42%, rgba(255, 255, 255, 0) 70%);
}
.burst {
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  margin: calc((100% + 12px) / -2) 0 0 calc((100% + 12px) / -2);
  border: 2px solid var(--white);
  box-shadow: 0 0 18px rgba(255, 255, 255, .9), inset 0 0 12px rgba(255, 255, 255, .7);
}

/* カメラの枠（動画と同じ、四隅の白いカギ形）。空に上がる時、ピントが合うように締まる */
.vf { position: absolute; inset: 12px; z-index: 5; pointer-events: none; }
.vf i {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid var(--white);
  filter: drop-shadow(0 1px 2px rgba(14, 54, 110, .3));
}
.vf i:nth-child(1) { left: 0; top: 0; border-width: 2.5px 0 0 2.5px; border-top-left-radius: 9px; }
.vf i:nth-child(2) { right: 0; top: 0; border-width: 2.5px 2.5px 0 0; border-top-right-radius: 9px; }
.vf i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2.5px 2.5px; border-bottom-left-radius: 9px; }
.vf i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2.5px 2.5px 0; border-bottom-right-radius: 9px; }
.app.rising .vf { animation: cm-focus .8s var(--ease); }
@keyframes cm-focus {
  0% { transform: scale(1.06); opacity: .4; }
  55% { transform: scale(.985); opacity: 1; }
  100% { transform: none; }
}

/* 空に浮かぶ一枚の板（動画の街と同じ見せ方）。モノと自分はこの上に立つ */
.world {
  position: absolute;
  inset: 0;
  perspective: 1800px;
  perspective-origin: 50% var(--line);
  pointer-events: none;
}
/* 板の大きさは、モノ・自分・下の文字（2行）が全部乗るように、真ん中の線から測って決める
   （52度傾けると縦は約0.616倍に見えるので、その分だけ長くとる） */
.board {
  --back: calc((var(--tok) / 2 + 20px) / .616);
  --front: calc((var(--tok) / 2 + 66px) / .616);
  position: absolute;
  left: 5%;
  right: 5%;
  top: calc(var(--line) - var(--back));
  height: calc(var(--back) + var(--front));
  border-radius: 30px;
  transform: rotateX(52deg);
  transform-origin: 50% var(--back);
  background:
    radial-gradient(110% 80% at 25% 15%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #F3F9FF 0%, #D3E6FA 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .95),
    0 18px 0 #7BB0EA,
    0 70px 60px -24px rgba(14, 54, 110, .4);
}
.world-cloud {
  position: absolute;
  border-radius: 50%;
  background: var(--white);
  filter: blur(12px);
  opacity: .85;
}
.wc1 { width: 130px; height: 46px; left: -40px; bottom: 14%; }
.wc2 { width: 150px; height: 52px; right: -50px; top: 14%; opacity: .7; }
.wc3 { width: 110px; height: 38px; right: 8%; bottom: -2%; opacity: .8; }

/* take の道（モノから行き先まで） */
.road {
  display: none;
  position: absolute;
  z-index: 1;
  left: var(--x-thing);
  width: calc(var(--x-me) - var(--x-thing));
  top: var(--line);
  height: 18px;
  margin-top: -9px;
  border-radius: 9px;
  background: rgba(15, 42, 74, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.road::after {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .95) 0 8px, transparent 8px 16px);
}
.app[data-verb="take"] .road { display: block; }

/* 上がっている間、雲が上から下へ流れる（押してから .9s 以内） */
.rise-fx { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.rise-fx i {
  position: absolute;
  top: -40%;
  left: var(--x);
  width: var(--w);
  height: calc(var(--w) * .42);
  border-radius: 50%;
  background: var(--white);
  filter: blur(10px);
  opacity: 0;
}
.rise-fx i:nth-child(1) { --x: -14%; --w: 230px; --d: 0s; }
.rise-fx i:nth-child(2) { --x: 44%; --w: 260px; --d: .04s; }
.rise-fx i:nth-child(3) { --x: 14%; --w: 190px; --d: .1s; }
.rise-fx i:nth-child(4) { --x: 60%; --w: 180px; --d: .16s; }
.rise-fx i:nth-child(5) { --x: -8%; --w: 210px; --d: .22s; }
.app.rising .rise-fx i { animation: cm-stream .62s cubic-bezier(.4, 0, .7, 1) both; animation-delay: var(--d); }
@keyframes cm-stream {
  0% { opacity: 0; transform: translateY(0) scaleY(1.5); }
  22% { opacity: .95; }
  75% { opacity: .75; }
  100% { opacity: 0; transform: translateY(560px) scaleY(1.9); }
}

/* 動画の問題：空に上がる映像を枠の中で流す。端はガラスに溶けるようにぼかす */
.film {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 124%;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 76%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 76%, transparent 100%);
  transition: opacity .15s;
}
.app.film-on:not([data-cam="eye"]) .film { opacity: 1; }
.app.film-on .sky-layer,
.app.film-wait .sky-layer { visibility: hidden; }
/* 映像が動き出すまでは、日本語のお題を出したままにする */
.app.film-wait .ground-layer { opacity: 1; transform: none; filter: none; }

/* 真ん中の動き（動詞の働き）。空に上がり終わってから動き出す */
.flow {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.app.live .flow { opacity: 1; }
.carrier, .wave, .beam, .lift {
  position: absolute;
  left: var(--x-thing);
  top: var(--line);
  display: none;
}
.carrier { width: 0; height: 0; }
.carrier-in {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translate(-50%, -50%);
}
.orb {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 34% 28%, var(--white) 0%, rgba(255, 255, 255, .8) 34%, rgba(255, 255, 255, .3) 72%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .9),
    0 0 28px rgba(255, 255, 255, .85),
    0 10px 20px -8px rgba(14, 54, 110, .45);
}
.orb .emo { font-size: 28px; }
.carrier-lbl {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.app[data-verb="take"] .carrier-lbl { display: block; }
.app[data-verb="take"] .who { font-size: 1em; font-weight: 700; color: var(--ink); }
.wave {
  width: 28px;
  height: 52px;
  border-radius: 50%;
  border-right: 3px solid var(--white);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .95));
  opacity: 0;
  transform: translate(-50%, -50%);
}
.beam {
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--white));
  box-shadow: 0 0 14px rgba(255, 255, 255, .95);
  opacity: 0;
  transform: translate(-50%, -50%);
}

/* give：モノが、人に、何かを渡す（1つ飛んでいって、届く） */
.app.live[data-verb="give"] .carrier { display: block; animation: cm-give-x var(--cyc-give) infinite; }
.app.live[data-verb="give"] .carrier-in { animation: cm-give-y var(--cyc-give) infinite; }
.app.live[data-verb="give"] .me .tok { animation: cm-recv-give var(--cyc-give) infinite; }
.app.live[data-verb="give"] .badge { animation: cm-badge var(--cyc-give) infinite; }
.app.live[data-verb="give"] .st { animation: cm-st-give var(--cyc-give) infinite; }

@keyframes cm-give-x {
  0%, 14% { transform: translateX(var(--tr, 40px)); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  56%, 100% { transform: translateX(var(--dx)); }
}
@keyframes cm-give-y {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.3); animation-timing-function: cubic-bezier(.2, .9, .3, 1.25); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  14%  { opacity: 1; transform: translate(-50%, -50%) scale(1); animation-timing-function: cubic-bezier(.25, .6, .4, 1); }
  35%  { transform: translate(-50%, calc(-50% - 50px)) scale(1); animation-timing-function: cubic-bezier(.6, 0, .75, .45); }
  53%  { opacity: 1; transform: translate(-50%, -50%) scale(.8); }
  59%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
}
@keyframes cm-recv-give {
  0%, 54% { transform: scale(1); }
  59% { transform: scale(1.08); }
  68%, 100% { transform: scale(1); }
}
@keyframes cm-badge {
  0%, 55% { opacity: 0; transform: scale(.3); }
  61% { opacity: 1; transform: scale(1.15); }
  67%, 90% { opacity: 1; transform: scale(1); }
  97%, 100% { opacity: 0; transform: scale(.8); }
}
@keyframes cm-st-give {
  0%, 56% { opacity: 0; transform: translateY(4px); }
  63%, 90% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; }
}

/* keep：モノが、人を、ある状態のまま保つ（届き続けて、ずっと同じ） */
.app.live[data-verb="keep"] .wave { display: block; animation: cm-wave var(--cyc-keep) linear infinite; }
.app.live[data-verb="keep"] .w2 { animation-delay: calc(var(--cyc-keep) / -3); }
.app.live[data-verb="keep"] .w3 { animation-delay: calc(var(--cyc-keep) / -1.5); }
.app.live[data-verb="keep"] .aura { opacity: 1; animation: cm-breathe var(--cyc-keep) ease-in-out infinite; }
.app.live[data-verb="keep"] .st { opacity: 1; transition: opacity .4s; }

@keyframes cm-wave {
  0%   { opacity: 0; transform: translate(-50%, -50%) translateX(calc(var(--tr, 40px) + 4px)) scale(.55); }
  18%  { opacity: 1; }
  78%  { opacity: .75; }
  100% { opacity: 0; transform: translate(-50%, -50%) translateX(calc(var(--dx) - var(--tok) / 2 - 14px)) scale(1.1); }
}
@keyframes cm-breathe {
  0%, 100% { opacity: .75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* make：モノが、人を、ある状態に変える（届いた瞬間に、顔が変わる） */
.app.live[data-verb="make"] .beam { display: block; animation: cm-beam var(--cyc-make) infinite; }
.app.live[data-verb="make"] .fa { animation: cm-before var(--cyc-make) infinite; }
.app.live[data-verb="make"] .fb { animation: cm-after var(--cyc-make) infinite; }
.app.live[data-verb="make"] .burst { animation: cm-burst var(--cyc-make) ease-out infinite; }
.app.live[data-verb="make"] .st { animation: cm-st-make var(--cyc-make) infinite; }
.app.live[data-verb="make"] .me .tok { animation: cm-recv-make var(--cyc-make) infinite; }

@keyframes cm-beam {
  0%, 14% { opacity: 0; transform: translate(-50%, -50%) translateX(calc(var(--tr, 40px) + 22px)) scaleX(.2); animation-timing-function: cubic-bezier(.55, 0, .9, .5); }
  18% { opacity: 1; }
  36% { opacity: 1; transform: translate(-50%, -50%) translateX(calc(var(--dx) - var(--tok) / 2 - 26px)) scaleX(1); }
  40%, 100% { opacity: 0; transform: translate(-50%, -50%) translateX(calc(var(--dx) - var(--tok) / 2 - 20px)) scaleX(.3); }
}
@keyframes cm-before {
  0%, 37% { opacity: 1; transform: scale(1); }
  40%, 93% { opacity: 0; transform: scale(.7); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes cm-after {
  0%, 37% { opacity: 0; transform: scale(.6); }
  41% { opacity: 1; transform: scale(1.22); }
  48% { transform: scale(.95); }
  54%, 88% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(.9); }
}
@keyframes cm-burst {
  0%, 37% { opacity: 0; transform: scale(.7); }
  39% { opacity: 1; transform: scale(.85); }
  60%, 100% { opacity: 0; transform: scale(1.9); }
}
@keyframes cm-st-make {
  0%, 40% { opacity: 0; transform: translateY(4px); }
  48%, 88% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; }
}
@keyframes cm-recv-make {
  0%, 37% { transform: scale(1); }
  41% { transform: scale(1.06); }
  50%, 100% { transform: scale(1); }
}

/* take：モノが、人を、ある場所へ連れて行く（自分が道に乗って、行き先まで動く） */
.app.live[data-verb="take"] .carrier { display: block; animation: cm-take-x var(--cyc-take) infinite; }
.app.live[data-verb="take"] .carrier-in { animation: cm-take-y var(--cyc-take) infinite; }
.app.live[data-verb="take"] .me .tok { animation: cm-recv-take var(--cyc-take) infinite; }

@keyframes cm-take-x {
  0%, 12% { transform: translateX(calc(var(--tr, 40px) + 24px)); animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
  60%, 100% { transform: translateX(calc(var(--dx) - var(--tok) / 2 - 30px)); }
}
@keyframes cm-take-y {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4); animation-timing-function: cubic-bezier(.2, .9, .3, 1.25); }
  10%  { opacity: 1; transform: translate(-50%, -50%) scale(.82); }
  86%  { opacity: 1; transform: translate(-50%, -50%) scale(.82); }
  96%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
}
@keyframes cm-recv-take {
  0%, 58% { transform: scale(1); }
  63% { transform: scale(1.06); }
  72%, 100% { transform: scale(1); }
}

/* help：モノが、人を下から支えて、何かができるようにする（光が足もとに滑りこみ、自分が持ち上がる） */
.app.live[data-verb="help"] .lift { display: block; animation: cm-lift var(--cyc-help) infinite; }
.app.live[data-verb="help"] .me .tok { animation: cm-boost var(--cyc-help) infinite; }
.app.live[data-verb="help"] .badge { animation: cm-badge-help var(--cyc-help) infinite; }
.app.live[data-verb="help"] .st { animation: cm-st-help var(--cyc-help) infinite; }

@keyframes cm-lift {
  0% { opacity: 0; transform: translateX(0) scale(.4, .6); }
  10% { opacity: 1; transform: translateX(0) scale(1); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  44% { opacity: 1; transform: translateX(var(--dx)) scale(1); }
  52% { transform: translateX(var(--dx)) scale(1.5, 1.3); }
  88% { opacity: 1; transform: translateX(var(--dx)) scale(1.4, 1.2); }
  96%, 100% { opacity: 0; transform: translateX(var(--dx)) scale(1.2, 1); }
}
@keyframes cm-boost {
  0%, 46% { transform: translateY(0); }
  54% { transform: translateY(-20px); animation-timing-function: cubic-bezier(.3, .7, .4, 1); }
  62%, 88% { transform: translateY(-14px); }
  96%, 100% { transform: translateY(0); }
}
@keyframes cm-badge-help {
  0%, 52% { opacity: 0; transform: translateY(0) scale(.3); }
  58% { opacity: 1; transform: translateY(-14px) scale(1.15); }
  64%, 88% { opacity: 1; transform: translateY(-14px) scale(1); }
  96%, 100% { opacity: 0; transform: translateY(0) scale(.8); }
}
@keyframes cm-st-help {
  0%, 56% { opacity: 0; transform: translateY(4px); }
  63%, 90% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; }
}

/* let：モノが、人に、何かをさせてくれる（光が届くと鍵が開き、できることが出てくる） */
.app.live[data-verb="let"] .beam { display: block; animation: cm-beam var(--cyc-let) infinite; }
.app.live[data-verb="let"] .lock { animation: cm-lock var(--cyc-let) infinite; }
.app.live[data-verb="let"] .lk-c { animation: cm-lock-c var(--cyc-let) infinite; }
.app.live[data-verb="let"] .lk-o { animation: cm-lock-o var(--cyc-let) infinite; }
.app.live[data-verb="let"] .badge { animation: cm-badge-let var(--cyc-let) infinite; }
.app.live[data-verb="let"] .me .tok { animation: cm-recv-let var(--cyc-let) infinite; }
.app.live[data-verb="let"] .st { animation: cm-st-let var(--cyc-let) infinite; }

@keyframes cm-lock {
  0%, 36% { opacity: 1; transform: none; }
  38% { transform: rotate(-14deg); }
  40% { transform: rotate(12deg); }
  42% { transform: rotate(0); }
  47% { opacity: 1; transform: scale(1.12); }
  53%, 92% { opacity: 0; transform: scale(.4); }
  98%, 100% { opacity: 1; transform: none; }
}
@keyframes cm-lock-c { 0%, 41% { opacity: 1; } 43%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cm-lock-o { 0%, 41% { opacity: 0; } 43%, 50% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes cm-badge-let {
  0%, 51% { opacity: 0; transform: scale(.3); }
  57% { opacity: 1; transform: scale(1.2); }
  63%, 90% { opacity: 1; transform: scale(1); }
  97%, 100% { opacity: 0; transform: scale(.8); }
}
@keyframes cm-recv-let {
  0%, 52% { transform: scale(1); }
  57% { transform: scale(1.07); }
  66%, 100% { transform: scale(1); }
}
@keyframes cm-st-let {
  0%, 55% { opacity: 0; transform: translateY(4px); }
  62%, 90% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; }
}

/* save：モノが、人の何かを守ってくれる（離れていきかけた物を、泡で包んで取り戻す） */
.app.live[data-verb="save"] .beam { display: block; animation: cm-beam var(--cyc-save) infinite; }
.app.live[data-verb="save"] .shield { animation: cm-shield var(--cyc-save) infinite; }
.app.live[data-verb="save"] .badge { animation: cm-badge-save var(--cyc-save) infinite; }
.app.live[data-verb="save"] .st { animation: cm-st-save var(--cyc-save) infinite; }

@keyframes cm-shield {
  0%, 36% { opacity: 0; transform: scale(.6); }
  41% { opacity: 1; transform: scale(1.08); }
  47%, 88% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(1.05); }
}
@keyframes cm-badge-save {
  0% { opacity: 0; transform: scale(.4); }
  6%, 12% { opacity: 1; transform: none; }
  34% { opacity: .5; transform: translate(6px, -34px) rotate(14deg); animation-timing-function: cubic-bezier(.3, .7, .4, 1); }
  44% { opacity: 1; transform: translate(0, 2px) scale(1.15); }
  50%, 90% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: scale(.8); }
}
@keyframes cm-st-save {
  0%, 46% { opacity: 0; transform: translateY(4px); }
  53%, 90% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; }
}

/* ---------- 練習の「自分」は、動画のキャラクター ----------
   .app に data-me="char" の時だけ効く（index.html で固定。消すと、元の絵文字の丸に戻る）
   自分の状態は、頭の上の小さな吹き出しに出す */

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.char, .bubble { display: none; }

.app[data-me="char"]:not([data-verb="take"]) .me .tok { visibility: hidden; }
.app[data-me="char"]:not([data-verb="take"]) .me .badge { display: none; }
.app[data-me="char"]:not([data-verb="take"]) .me .char {
  display: block;
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
  width: calc(var(--tok) * .68);
  height: calc(var(--tok) * 1.08);
  margin-left: calc(var(--tok) * -.34);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 8px rgba(14, 54, 110, .25));
}
.app[data-me="char"]:not([data-verb="take"]) .me .bubble {
  display: grid;
  place-items: center;
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(100% + var(--tok) * .08 + 4px);  /* キャラクターの頭のすぐ上 */
  width: 40px;
  height: 34px;
  margin-left: -20px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 6px 14px -4px rgba(14, 54, 110, .4);
  opacity: 0;
}
.bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 0 0 3px 0;
  background: var(--white);
  transform: rotate(45deg);
}
.bubble .emo { position: relative; z-index: 1; grid-area: 1 / 1; font-size: 20px; }
.bb-b { opacity: 0; }

/* keep・make：吹き出しはずっと出ている（make は中身が変わる） */
.app[data-me="char"][data-verb="keep"] .me .bubble,
.app[data-me="char"][data-verb="make"] .me .bubble { opacity: 1; }
.app.live[data-me="char"][data-verb="make"] .bb-a { animation: cm-before var(--cyc-make) infinite; }
.app.live[data-me="char"][data-verb="make"] .bb-b { animation: cm-after var(--cyc-make) infinite; }
.app.live[data-me="char"][data-verb="make"] .me .char { animation: cm-recv-make var(--cyc-make) infinite; }

/* give：飛んできた物が、吹き出しに入る */
.app.live[data-me="char"][data-verb="give"] .carrier-in { animation-name: cm-give-y-char; }
.app.live[data-me="char"][data-verb="give"] .me .bubble { animation: cm-badge var(--cyc-give) infinite; }
.app.live[data-me="char"][data-verb="give"] .me .char { animation: cm-recv-give var(--cyc-give) infinite; }
@keyframes cm-give-y-char {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.3); animation-timing-function: cubic-bezier(.2, .9, .3, 1.25); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  14%  { opacity: 1; transform: translate(-50%, -50%) scale(1); animation-timing-function: cubic-bezier(.25, .6, .4, 1); }
  35%  { transform: translate(-50%, calc(-50% - var(--tok) / 2 - 46px)) scale(1); animation-timing-function: cubic-bezier(.6, 0, .75, .45); }
  53%  { opacity: 1; transform: translate(-50%, calc(-50% - var(--tok) / 2 - 21px)) scale(.75); }
  59%, 100% { opacity: 0; transform: translate(-50%, calc(-50% - var(--tok) / 2 - 21px)) scale(.2); }
}

/* help：持ち上がるのはキャラクター。吹き出しも一緒に上がる */
.app.live[data-me="char"][data-verb="help"] .me .char { animation: cm-boost var(--cyc-help) infinite; }
.app.live[data-me="char"][data-verb="help"] .me .bubble { animation: cm-badge-help var(--cyc-help) infinite; }

/* let：鍵は吹き出しの場所に出て、開くと「できること」に変わる */
.app[data-me="char"][data-verb="let"] .me .lock { top: auto; right: auto; left: 50%; bottom: calc(100% + var(--tok) * .08 + 3px); margin-left: -18px; }
.app.live[data-me="char"][data-verb="let"] .me .bubble { animation: cm-badge-let var(--cyc-let) infinite; }
.app.live[data-me="char"][data-verb="let"] .me .char { animation: cm-recv-let var(--cyc-let) infinite; }

/* save：吹き出しの物が離れていきかけて、泡に守られて戻る */
.app.live[data-me="char"][data-verb="save"] .me .bubble { animation: cm-badge-save var(--cyc-save) infinite; }

/* take：右は行き先のまま。道を動くのがキャラクター */
.app[data-me="char"][data-verb="take"] .orb { display: none; }
.app[data-me="char"][data-verb="take"] .char-mini {
  display: block;
  width: 30px;
  height: 48px;
  filter: drop-shadow(0 4px 6px rgba(14, 54, 110, .3));
}

@media (prefers-reduced-motion: reduce) {
  .app[data-me="char"] .me .bubble { opacity: 1; }
  .app.live[data-me="char"][data-verb="make"] .bb-a { opacity: 0; }
  .app.live[data-me="char"][data-verb="make"] .bb-b { opacity: 1; }
}

/* 背の低い画面では、吹き出しが上のスイッチに重ならないよう、絵を少し下げる */
@media (max-height: 720px) {
  .app[data-me="char"] .stage { --ay: 58%; }
}


/* ---------- 練習：空のカメラの時の、小さなお題 ---------- */

/* 主役は絵のまま。忘れた時にだけ目をやる大きさと色にする */
.sub-prompt {
  flex: none;
  min-height: calc(13px * 1.45 * 2);
  margin-top: 10px;
  padding: 0 8px;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
  color: var(--ink-2);
  opacity: 0;
  transition: opacity .2s;
}
.app[data-cam="sky"] .sub-prompt { opacity: 1; transition: opacity .4s .5s; }

/* ---------- 練習：答え（絵の 左・真ん中・右 の真下に、英語が並ぶ） ---------- */

.answer {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  transition: opacity .4s var(--ease) .35s;
}
.app[data-step="ground"] .answer { opacity: 0; transition-delay: 0s; }
.slots {
  --ans-base: 20px;
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  padding: 0 14px;
  border-radius: 22px;
  font-family: var(--rounded);
  font-size: var(--ans-size, var(--ans-base));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.005em;
  text-align: center;
  white-space: nowrap;
  /* 答えを見た時だけ出す（場所は空けておくので、出ても枠は動かない） */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .4s var(--ease);
}
.app[data-step="answer"] .slots { opacity: 1; transform: none; }
.slots .t {
  display: inline-block;
  margin: 0 .14em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.slots .s2 { color: var(--blue); }
/* 小さくしても入りきらない時だけ、2行にする */
.slots.wrap { display: block; white-space: normal; text-wrap: balance; padding-block: 8px; }
.slots.wrap .t { display: inline; }
.app[data-step="answer"] .slots .t { opacity: 1; transform: none; }
.app[data-step="answer"] .slots .s2 { transition-delay: .08s; }
.app[data-step="answer"] .slots .s3 { transition-delay: .16s; }

.listen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px 0 12px;
  border-radius: 19px;
  font-size: 14px;
  font-weight: 600;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s, visibility 0s .2s;
}
.listen:disabled { opacity: .4; }
.app[data-step="answer"] .listen { visibility: visible; opacity: 1; transition: opacity .3s .25s, visibility 0s; }
.listen svg { width: 20px; height: 20px; color: var(--blue); }
.listen.is-playing .w { animation: cm-pulse .9s ease-in-out infinite; }
@keyframes cm-pulse { 50% { opacity: .25; } }

/* ---------- 練習：下の操作 ---------- */

.actions { flex: none; padding-top: 6px; }

/* 一行の案内。ヒントを開いた時だけ、絵を言葉にした一文を出す */
.note {
  display: grid;
  min-height: 22px;
  margin-bottom: 12px;
  text-align: center;
  line-height: 1.5;
}
.note > span { grid-area: 1 / 1; opacity: 0; transition: opacity .25s; }
.note-hint { font-size: 15px; font-weight: 600; }
.app.hint-open .note-hint { opacity: 1; }

.btns, .done-btns { display: flex; gap: 10px; }
.btn {
  position: relative;
  display: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 56px;
  border-radius: 20px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .02em;
  transition: transform .15s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn.primary {
  background: var(--blue);
  color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 28px -14px rgba(10, 102, 234, .8);
}
#btnOk { flex: 1.4; }
.app[data-step="ground"] .btn[data-show="ground"],
.app[data-step="sky"] .btn[data-show="sky"],
.app[data-step="answer"] .btn[data-show="answer"] { display: flex; animation: cm-in .28s var(--ease); }
@keyframes cm-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- 練習：問題の一覧（下から出るシート） ---------- */

.sheet { position: absolute; inset: 0; z-index: 20; }
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 30, 70, .28);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 72%;
  display: flex;
  flex-direction: column;
  padding: 8px 16px calc(12px + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(240, 247, 255, .82));
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 -18px 40px -20px rgba(14, 54, 110, .45);
  transform: translateY(100%);
  transition: transform .35s var(--ease);
}
.sheet.open .sheet-backdrop { opacity: 1; }
.sheet.open .sheet-panel { transform: none; }
.sheet-grab {
  align-self: center;
  width: 38px;
  height: 5px;
  margin-bottom: 10px;
  border-radius: 3px;
  background: var(--ink-3);
}
.sheet-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 12px;
  padding: 0 4px 10px;
}
.sheet-title { font-family: var(--rounded); font-size: 20px; font-weight: 800; }
.sheet-sub { grid-column: 1; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.sheet-close {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(15, 42, 74, .07);
}
/* 一覧はシートの中だけで動かす（スクロールの線は出さない） */
.sheet-list {
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
}
.sheet-list::-webkit-scrollbar { display: none; }
.sheet-row {
  width: 100%;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 8px;
  border-radius: 14px;
  text-align: left;
  font-size: 15px;
  line-height: 1.4;
}
.sheet-row:active { background: rgba(10, 102, 234, .08); }
.sheet-list li + li .sheet-row { border-top: 1px solid rgba(15, 42, 74, .07); border-radius: 0; }
.sheet-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1.5px var(--ink-3);
}
.sheet-mark svg { width: 13px; height: 13px; }
.is-said .sheet-mark { background: var(--blue); box-shadow: none; color: var(--white); }
.sheet-ja { min-width: 0; }
.sheet-now {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  color: var(--blue);
  background: rgba(10, 102, 234, .1);
}
.sheet-row:not(.is-now) .sheet-now { display: none; }

/* ---------- 練習：全問おわり ---------- */

.done {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
  text-align: center;
  animation: cm-in .4s var(--ease);
}
.done-btns { flex-direction: column; width: 100%; max-width: 320px; }
.done .btn { display: flex; flex: none; width: 100%; }
.done-title { font-size: 30px; font-weight: 800; line-height: 1.4; }
.app.is-done .view-practice > :not(.done) { visibility: hidden; }

/* ---------- 次の問題への入れ替え ---------- */

.main, .note { transition: opacity .25s ease; }
.app.is-swapping .main,
.app.is-swapping .note { opacity: 0; transition: opacity .18s ease; }
.app.no-trans, .app.no-trans * { transition: none !important; }

/* ---------- 背の低い画面（LINEで開いた小さめのiPhoneなど）では全体を詰める ---------- */

@media (max-height: 720px) {
  .home-head { padding-top: 24px; }
  .shelf { margin-bottom: 10px; }
  .weapon { height: 112px; padding: 14px 6px 12px; }
  .shelf-more .weapon { height: 96px; padding: 12px 4px 10px; }
  .ring { width: 50px; height: 50px; }
  .shelf-more .ring { width: 40px; height: 40px; }
  .boss { padding: 14px 16px 14px 20px; }

  .top { height: 48px; }
  .main { padding-block: 10px 8px; }
  .stage { --tok: 68px; }
  .tok .emo { font-size: 38px; }
  .answer { gap: 6px; padding-top: 6px; }
  .sub-prompt { min-height: 0; height: 19px; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .slots { min-height: 48px; }
  .slots { --ans-base: 18px; }
  .listen { height: 34px; }
  .note { margin-bottom: 8px; }
  .btn { height: 50px; }
}
@media (max-height: 600px) {
  .home-head { padding-top: 14px; }
  .logo { font-size: clamp(22px, 7.6vw, 30px); }
  .shelf { margin-bottom: 8px; }
  .weapon { height: 98px; padding: 12px 6px 10px; }
  .weapon-verb { font-size: 21px; }
  .shelf-more .weapon { height: 86px; }
  .ring { width: 44px; height: 44px; }
  .shelf-more .ring { width: 36px; height: 36px; }
  .boss-sub { display: none; }
}

/* ---------- 動きを減らす設定の端末では、動きの終わりの絵だけ見せる ---------- */

@media (prefers-reduced-motion: reduce) {
  .app *, .app *::before, .app *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .app.live[data-verb="give"] .carrier { display: block; transform: translateX(calc(var(--dx) / 2)); }
  .app.live[data-verb="give"] .carrier-in { opacity: 1; transform: translate(-50%, calc(-50% - 36px)) scale(.9); }
  .app.live[data-verb="give"] .badge,
  .app.live[data-verb="give"] .st,
  .app.live[data-verb="make"] .fb,
  .app.live[data-verb="make"] .st { opacity: 1; }
  .app.live[data-verb="make"] .fa { opacity: 0; }
  .app.live[data-verb="keep"] .w2 { display: block; opacity: .9; transform: translate(-50%, -50%) translateX(calc(var(--dx) / 2)); }
  .app.live[data-verb="take"] .carrier { display: block; transform: translateX(calc(var(--dx) / 2)); }
  .app.live[data-verb="take"] .carrier-in { opacity: 1; transform: translate(-50%, -50%) scale(.82); }
  .app.live[data-verb="help"] .badge,
  .app.live[data-verb="help"] .st,
  .app.live[data-verb="let"] .badge,
  .app.live[data-verb="let"] .st,
  .app.live[data-verb="save"] .badge,
  .app.live[data-verb="save"] .st,
  .app.live[data-verb="save"] .shield { opacity: 1; }
  .app.live[data-verb="let"] .lock { opacity: 0; }
  .app.live[data-verb="help"] .me .tok { transform: translateY(-14px); }
}