/* Speaking Booster（朝日の空に、半透明の面を重ねる）
   ホームと練習の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);
  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-turn: cubic-bezier(.6, .04, .22, 1);   /* カードが裏返る */

  /* 朝日の空：上の珊瑚色 → 杏 → 琥珀 → 地平線のうすい光 */
  --dawn-1: #FF7A52;
  --dawn-2: #FF9B67;
  --dawn-3: #FFC48D;
  --dawn-4: #FFE7D1;

  --ink: #3A170D;
  --ink-2: rgba(58, 23, 13, .62);
  --ink-3: rgba(58, 23, 13, .2);
  --track: rgba(58, 23, 13, .12);
  --coral: #D23F1E;                       /* 押すボタン・進み具合・中学英語で言える */
  --coral-tint: rgba(210, 63, 30, .1);
  --glow: 255, 186, 56;                   /* 難しい言葉の光（rgb） */
  --easy-line: rgba(255, 110, 70, .32);   /* やさしい言葉の下線 */
  --ember-1: #561A0E;                     /* ランダム出題のカード */
  --ember-2: #922F17;
  --paper: #FFFFFF;                       /* お題のカード（表） */
  --paper-2: #FFF4EA;
  --back-1: #FFF7EF;                      /* お題のカード（裏） */
  --back-2: #FFE6D3;
  --white: #FFFFFF;
  --shade: 120, 38, 10;                   /* 影の色（rgb） */
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
/* どの画面でもスクロールしない（1画面に収める） */
/* 地の色は空のいちばん上の色。iPhone の Safari は画面上の帯（時刻の所）をこの色で塗るので、空とつながって見える */
html, body { height: 100%; overflow: hidden; background: var(--dawn-1); }
body {
  display: flex;
  flex-direction: column;
  font-family: var(--sys);
  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(--ink); outline-offset: 3px; }

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

/* ---------- 土台：朝日の空 ---------- */

.app {
  position: relative;
  isolation: isolate;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, var(--dawn-1) 0%, var(--dawn-2) 30%, var(--dawn-3) 64%, var(--dawn-4) 100%);
}
.app-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
/* 地平線から昇る朝日（ぼんやりした光の玉）。開いた瞬間に少しだけ昇る */
.sun {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: max(140vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% 64%;
  background: radial-gradient(closest-side, rgba(255, 252, 238, .95), rgba(255, 240, 204, .72) 36%, rgba(255, 226, 178, 0));
}
.app.intro .sun { animation: sb-sunrise 1.8s var(--ease) both; }
@keyframes sb-sunrise { from { translate: -50% 80%; opacity: .5; } }

/* ガラスの面 */
.weapon,
.listen,
.hint-btn,
.guide-btn,
.back,
.btn.secondary,
.rv-hard {
  background: linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .18));
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 0 0 1px rgba(255, 255, 255, .38),
    0 18px 36px -22px rgba(var(--shade), .55);
}

/* ホームと練習は同じ場所に重ね、横に少しずらして切り替える */
.view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* 画面の端の欠け（ホームに置いた時の時刻の所・横向きのノッチ）には物を置かない */
  padding:
    env(safe-area-inset-top)
    max(20px, env(safe-area-inset-right))
    calc(14px + env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  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(--coral);
  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: 44px; }
/* 大きさは画面の幅に合わせて決める（細いスマホでも1行に収まり、はみ出さない） */
.logo {
  display: inline-flex;
  align-items: center;
  gap: .34em;
  font-size: clamp(22px, 7.4vw, 31px);
}
.logo-mark {
  flex: none;
  width: 1.7em;
  height: 1.7em;
  filter: drop-shadow(0 10px 16px rgba(var(--shade), .35));
}
.logo-word {
  font-family: var(--rounded);
  font-size: 1em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.015em;
  white-space: nowrap;
  color: var(--ink);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .45));
}
.logo-word b { font-weight: inherit; color: var(--white); filter: drop-shadow(0 2px 6px rgba(var(--shade), .35)); }
/* 開いた瞬間、アイコンの中の棒が下から伸びる（話せる量が上がっていく） */
.logo-bars rect { transform-box: fill-box; transform-origin: 50% 100%; }
.app.intro .logo-bars rect { animation: sb-bar .7s var(--ease) both; }
.app.intro .logo-bars rect:nth-child(1) { animation-delay: .2s; }
.app.intro .logo-bars rect:nth-child(2) { animation-delay: .3s; }
.app.intro .logo-bars rect:nth-child(3) { animation-delay: .4s; }
@keyframes sb-bar { from { transform: scaleY(.2); } }

/* ワザの棚は、名前とランダム出題の間の真ん中に置く */
.armory { margin-block: auto; display: flex; flex-direction: column; gap: 14px; padding-bottom: 6px; }

.weapon {
  min-width: 0;
  width: 100%;
  min-height: 148px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 18px 20px 24px;
  border-radius: 28px;
  text-align: left;
  transition: transform .15s var(--ease);
}
.weapon:active { transform: scale(.98); }
.weapon-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.weapon-no {
  font-family: var(--rounded);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--coral);
}
.weapon-name { margin-top: 4px; font-size: 27px; font-weight: 800; line-height: 1.3; letter-spacing: .01em; }
.weapon-gist { margin-top: 6px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ink-2); }
/* まだ問題が無いワザ */
.weapon:disabled { cursor: default; }
.weapon:disabled .weapon-name { 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(255, 170, 110, .34), rgba(255, 170, 110, 0) 55%),
    linear-gradient(135deg, var(--ember-1) 0%, var(--ember-2) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    0 22px 40px -18px rgba(70, 18, 6, .7);
  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, .74); }
.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: sb-pop-in .6s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes sb-pop-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }

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

.top {
  flex: none;
  height: 56px;
  display: grid;
  /* 左右は中身の幅を必ず取り、狭い時は真ん中（名前）だけが縮む＝ヒントが外にはみ出さない */
  grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
  align-items: center;
  gap: 8px;
}
/* 左：戻る＋説明 */
.top-left { justify-self: start; display: flex; align-items: center; gap: 8px; }
.back {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.back svg { width: 18px; height: 18px; }
/* 真ん中：押すと問題の一覧が出る */
.mode {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  height: 44px;
  padding: 0 10px 0 14px;
  border-radius: 22px;
  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 { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 17px; font-weight: 800; }
.count, .mode-chev { flex: none; }
@media (max-width: 400px) {
  .top { gap: 6px; }
  .top-left { gap: 6px; }
  .hint-btn, .guide-btn { padding: 0 12px; }
  .mode { padding: 0 6px 0 10px; gap: 6px; }
}
@media (max-width: 370px) {
  .mode-name { font-size: 15px; }
  .count { font-size: 12px; }
  .hint-btn, .guide-btn { padding: 0 10px; }
}
.count {
  font-family: var(--rounded);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.count .of { margin: 0 .2em; opacity: .6; }

/* ヒント：お題の時だけ。押した時だけ、手がかりの一言を出す */
.hint-btn,
.guide-btn {
  height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: opacity .3s, background-color .2s, color .2s;
}
.hint-btn { justify-self: end; }
.hint-btn[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.app:not([data-step="ask"]) .hint-btn { opacity: 0; visibility: hidden; }

/* ---------- 練習：お題のカード ---------- */

.main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 16px 6px;
}

/* カードは動かさない。中身の言葉だけが変わる（ワザ2はカードごと裏返る） */
.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 170px;
  max-height: 380px;
  perspective: 1600px;
}
.card { position: absolute; inset: 0; }
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 22px 36px;
  border-radius: 30px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: linear-gradient(172deg, var(--paper) 0%, var(--paper-2) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .9),
    0 28px 52px -30px rgba(var(--shade), .65),
    0 4px 14px -8px rgba(var(--shade), .25);
}
.face-front { transform: rotateY(0deg); }
.face-back {
  transform: rotateY(180deg);
  background: linear-gradient(172deg, var(--back-1) 0%, var(--back-2) 100%);
  visibility: hidden;
}
/* 裏返る途中（真横になる .37s）で、見えなくなる面の中身を確実に消す
   （Safari は、ぼかし等のついた中身だけ裏から透けることがあるため）。.37s は sb-flip の速さの曲線で半分回る時 */
.app.is-flipped .face-front { visibility: hidden; transition: visibility 0s .37s; }
.app.is-flipped .face-back { visibility: visible; transition: visibility 0s .37s; }

/* ワザ2：くるっと裏返る（1回だけ。回る途中で少し浮いて、少し小さくなる）
   回転は1本の動きにする（途中に区切りを入れると、真横で一瞬止まって見えるため） */
.app.is-flipped .card-inner { transform: rotateY(180deg); }
.app.flip-anim .card-inner { animation: sb-flip .86s var(--ease-turn) both, sb-lift .86s ease-in-out both; }
@keyframes sb-flip { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } }
@keyframes sb-lift { 50% { translate: 0 -10px; scale: .94; } }

/* カードの左上の小さな札：お題 → 変えた後 */
.eyebrow { position: absolute; top: 16px; left: 18px; display: grid; }
.eb {
  grid-area: 1 / 1;
  justify-self: start;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: opacity .3s var(--ease);
}
.eb-ask { color: var(--ink-2); background: rgba(58, 23, 13, .06); }
.eb-after,
.face-back .eb { color: var(--white); background: var(--coral); }
.eb-after { opacity: 0; }
.app[data-waza="1"]:not([data-step="ask"]) .eb-ask { opacity: 0; }
.app[data-waza="1"]:not([data-step="ask"]) .eb-after { opacity: 1; transition-delay: .3s; }

/* 変えた後も残す、元のお題（小さく。下に矢印）。場所は最初から空けておく＝変わる時に文字がガタつかない */
.was {
  width: 100%;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-2);
  text-align: center;
  word-break: auto-phrase;
  text-wrap: balance;
  visibility: hidden;
  opacity: 0;
}
.was::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: 7px auto 0;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
}
.was .was-hard { color: var(--ink); background: linear-gradient(transparent 62%, rgba(var(--glow), .55) 62%); }
.app[data-waza="1"]:not([data-step="ask"]) .face-front .was { visibility: visible; opacity: 1; transition: opacity .45s var(--ease) .9s, visibility 0s; }
.face-back .was { visibility: visible; opacity: 1; }

/* お題の日本語（幅はカードいっぱい＝入りきるかを app.js が測る） */
.say {
  width: 100%;
  font-size: var(--say-size, var(--say-base, clamp(22px, 6.6vw, 27px)));
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .02em;
  text-align: center;
  word-break: auto-phrase;
  text-wrap: balance;
}

/* 光る言葉（難しい）：朝日が当たったように光る */
.hard,
.easy {
  position: relative;
  isolation: isolate;
  display: inline-block;
  white-space: nowrap;
}
.hard { text-shadow: 0 0 .5em rgba(var(--glow), .5); }
.hard::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: .16em -.32em .08em;
  border-radius: .7em;
  background: radial-gradient(closest-side, rgba(var(--glow), .95), rgba(var(--glow), .5) 62%, rgba(var(--glow), 0));
  filter: blur(3px);
  transition: opacity .3s ease;
}
/* やさしい言葉：下に線を引く（変わった後に、左から引かれる） */
.easy::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.08em;
  right: -.08em;
  bottom: .22em;
  height: .42em;
  border-radius: .2em;
  background: var(--easy-line);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ワザ1：光る言葉の場所（mid）に、やさしい言葉を見えないまま重ねておく */
.say .mid { position: relative; display: inline-block; vertical-align: top; white-space: nowrap; }
.say .layer { position: relative; display: inline-block; white-space: nowrap; }
.say .layer.new { position: absolute; left: 50%; top: 0; translate: -50% 0; visibility: hidden; }
.say .seg { display: inline-block; }
.ch { display: inline-block; transform-origin: 50% 70%; }

/* 動いている間：2つの言葉を同じ場所に重ねる。前後の言葉は、元の場所から変わった後の場所へ滑る */
.say.morph-move :is(.seg, .mid) { transition: transform .62s var(--ease) .06s; }
.say.morphing .seg.fresh { animation: sb-fade .4s ease .3s both; }
@keyframes sb-fade { from { opacity: 0; } }
.say.morphing .layer { position: absolute; left: 50%; top: 0; translate: -50% 0; }
.say.morphing .layer.new { visibility: visible; }
.say.morphing .ch {
  transition: transform .42s var(--ease), opacity .34s ease, filter .34s ease;
  transition-delay: calc(var(--i, 0) * var(--step, 30ms));
}
/* ほどける：1文字ずつ小さくなり、少し散って消える */
.say.morph-out .old .ch { opacity: 0; transform: translate(var(--dx, 0), .5em) scale(.3); filter: blur(2px); }
.say.morph-out .hard::before { opacity: 0; }
/* 現れる：小さい所から、1文字ずつ（出る前の形を、ふだんの形にしておく＝動き出す時にちらつかない） */
.say .new .ch { opacity: 0; transform: translateY(-.3em) scale(.55); }
.say.morph-in .new .ch,
.say.is-changed .new .ch { opacity: 1; transform: none; }
.say.morph-in .easy::after { transform: none; transition: transform .5s var(--ease) .45s; }
/* 変わった後 */
.say.is-changed .layer.old { display: none; }
.say.is-changed .layer.new { position: relative; left: auto; top: auto; translate: none; visibility: visible; }
.say.is-changed .easy::after { transform: none; }

/* ワザ2：裏の面のやさしい言葉は、裏返り終わってから線が引かれる */
.app.is-flipped .face-back .easy::after { transform: none; }
.app.flip-anim .face-back .easy::after { transition: transform .5s var(--ease) .8s; }

/* ---------- 練習：答え（英語・聞く・種明かし） ---------- */

.answer {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
}
.en {
  width: 100%;
  min-height: 46px;
  padding: 8px 6px;
  font-family: var(--rounded);
  font-size: var(--ans-size, var(--ans-base, 23px));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.005em;
  text-align: center;
  white-space: nowrap;
  /* 答えを見た時だけ出す（場所は空けておくので、出てもカードは動かない） */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.en .ez { color: var(--coral); }
/* 小さくしても入りきらない時だけ、2行にする */
.en.wrap { white-space: normal; text-wrap: balance; }
.app[data-step="answer"] .en { opacity: 1; transform: none; }

.answer-btns { display: flex; justify-content: center; gap: 8px; }
.listen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 18px 0 14px;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 700;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s, visibility 0s .2s;
}
.app[data-step="answer"] .listen { visibility: visible; opacity: 1; transition: opacity .3s .2s, visibility 0s; }
/* 音声のファイルが無い問題では出さない（場所は空けたまま） */
.app[data-step="answer"] .listen.no-audio { visibility: hidden; opacity: 0; }
.listen svg { width: 20px; height: 20px; color: var(--coral); }
.listen.is-playing .w { animation: sb-pulse .9s ease-in-out infinite; }
@keyframes sb-pulse { 50% { opacity: .25; } }

/* 種明かし：左＝本来言えない難単語（くすんだ色・打ち消し線）⇄ 右＝中学英語で言える（はっきりした色） */
.reveal {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  margin-top: 2px;
}
.rv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-height: 74px;
  padding: 10px 10px 11px;
  border-radius: 18px;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.rv-label { font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.rv-word {
  font-family: var(--rounded);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.rv-hard .rv-label { color: var(--ink-2); }
.rv-gloss { font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--ink-2); }
/* 難単語は正しい英語。間違いに見えないよう取り消し線は引かず、色を薄くして「知らなくていい側」にする */
.rv-hard .rv-word { color: rgba(58, 23, 13, .5); }
.rv-easy {
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px rgba(210, 63, 30, .45), 0 16px 30px -18px rgba(210, 63, 30, .7);
}
.rv-easy .rv-label,
.rv-easy .rv-word { color: var(--coral); }
.rv-arrow { align-self: center; width: 22px; height: 22px; color: var(--ink-2); opacity: 0; transition: opacity .3s; }
.app[data-step="answer"] :is(.rv, .rv-arrow) { opacity: 1; transform: none; }
.app[data-step="answer"] .rv-hard { transition-delay: .3s; }
.app[data-step="answer"] .rv-arrow { transition-delay: .45s; }
.app[data-step="answer"] .rv-easy { transition-delay: .55s; }
.reveal.is-empty { visibility: hidden; }

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

.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: 700; }
.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;
  padding: 0 12px;
  border-radius: 20px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: transform .15s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn.primary {
  background: var(--coral);
  color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 28px -14px rgba(190, 50, 20, .85);
}
#btnOk { flex: 1.4; }
.app[data-step="ask"] .btn[data-show="ask"],
.app[data-step="change"] .btn[data-show="change"],
.app[data-step="answer"] .btn[data-show="answer"] { display: flex; animation: sb-in .28s var(--ease); }
@keyframes sb-in { from { opacity: 0; transform: translateY(6px); } }

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

.sheet { position: absolute; inset: 0; z-index: 20; }
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(70, 20, 6, .3);
  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, .9), rgba(255, 245, 236, .88));
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 -18px 40px -20px rgba(var(--shade), .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-size: 19px; 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: 44px;
  padding: 0 16px;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(58, 23, 13, .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%;
  min-height: 48px;
  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: var(--coral-tint); }
.sheet-list li + li .sheet-row { border-top: 1px solid rgba(58, 23, 13, .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(--coral); 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(--coral);
  background: var(--coral-tint);
}
.sheet-row:not(.is-now) .sheet-now { display: none; }

/* ---------- 練習：ワザの説明（下から出るシート。問題の一覧と同じ面） ---------- */

.guide { position: absolute; inset: 0; z-index: 21; }
.guide.open .sheet-backdrop { opacity: 1; }
.guide.open .sheet-panel { transform: none; }
.guide-panel { max-height: calc(100% - 12px - env(safe-area-inset-top)); padding-inline: 20px; }
/* 中身が入りきらない画面では、ボタンの上だけを動かす（ボタンはいつも見える） */
.guide-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 4px;
}
.guide-body::-webkit-scrollbar { display: none; }
/* 下にまだ続きがある時は、下の端をぼかして知らせる */
.guide-body.more {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
}
.guide-no {
  text-align: center;
  font-family: var(--rounded);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--coral);
}
.guide-title { margin-top: 2px; text-align: center; font-size: 26px; font-weight: 800; letter-spacing: .02em; }
.guide-lead {
  max-width: 22em;
  margin: 10px auto 16px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.75;
  text-wrap: balance;
}
/* 「、」「。」の後ろでだけ改行させる（入りきらない時は中でも折り返す） */
.ph { display: inline-block; max-width: 100%; }
/* 例：お題 → 変えた後 → 英語（上から下へ、矢印でつなぐ） */
.guide-steps {
  list-style: none;
  display: grid;
  gap: 24px;
  padding: 16px 12px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 0 0 1px rgba(58, 23, 13, .06);
}
.gs { position: relative; display: grid; gap: 2px; text-align: center; }
.gs + .gs::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -20px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
}
.gs-label { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.gs-ja { font-size: 19px; font-weight: 700; line-height: 1.65; }
.gs-ja .easy::after { transform: none; }
.gs-en { font-family: var(--rounded); font-size: 19px; font-weight: 700; line-height: 1.4; }
.gs-en .ez { color: var(--coral); }
.guide-go { display: flex; flex: none; width: 100%; margin-top: 12px; }

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

.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: sb-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; }
/* 中の言葉に visibility: visible がある（ワザ1の変わった後）ので、透明にもして確実に隠す */
.app.is-done .view-practice > :not(.done) { visibility: hidden; opacity: 0; }

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

.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 *,
.app.no-trans *::before,
.app.no-trans *::after { transition: none !important; }

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

@media (max-height: 720px) {
  .home-head { padding-top: 26px; }
  .armory { gap: 10px; }
  .weapon { min-height: 106px; padding: 14px 16px 14px 20px; }
  .weapon-name { font-size: 23px; }
  .ring { width: 50px; height: 50px; }
  .boss { padding: 14px 16px 14px 20px; }

  .top { height: 50px; }
  .main { padding-block: 8px 4px; }
  .stage { min-height: 140px; }
  .face { padding: 42px 18px 26px; border-radius: 26px; }
  .eyebrow { top: 13px; left: 15px; }
  .answer { gap: 4px; padding-top: 8px; }
  .en { min-height: 40px; padding-block: 6px; }
  .en { --ans-base: 21px; }
  .rv { min-height: 62px; padding-block: 8px; }
  .rv-word { font-size: 16px; }
  .note { margin-bottom: 8px; }
  .btn { height: 50px; }
  .guide-title { font-size: 23px; }
  .guide-lead { margin: 6px auto 12px; font-size: 14px; }
  .guide-steps { gap: 20px; padding-block: 12px; }
  .gs + .gs::before { top: -17px; }
}
@media (max-height: 600px) {
  .home-head { padding-top: 14px; }
  .logo { font-size: clamp(20px, 6.6vw, 28px); }
  .weapon { min-height: 90px; padding-block: 10px; }
  .weapon-name { font-size: 21px; }
  .weapon-gist { display: none; }
  .ring { width: 44px; height: 44px; }
  .boss-sub { display: none; }
  .stage { min-height: 120px; }
  .rv { min-height: 54px; }
}

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

@media (prefers-reduced-motion: reduce) {
  .app *, .app *::before, .app *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}

/* ---------- PC・タブレット（幅の広い画面）：窓いっぱいの朝日に並べる ---------- */

@media (min-width: 640px) {
  .view { padding-inline: max(32px, env(safe-area-inset-left)) max(32px, env(safe-area-inset-right)); }

  /* ホーム：ロゴ・棚・ランダム出題を、ひとかたまりで真ん中に置く。ワザは横に2枚 */
  .view-home {
    align-items: center;
    justify-content: center;
    padding-block: max(28px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-bottom));
  }
  .home-head { padding-top: 0; margin-bottom: clamp(28px, 6vh, 56px); }
  .logo { font-size: 42px; }
  .armory,
  .boss { width: min(100%, 760px); }
  .armory {
    flex: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-block: 0;
    padding-bottom: 0;
  }
  .weapon { min-height: clamp(140px, 22vh, 200px); padding: 24px 22px 24px 28px; border-radius: 30px; }
  .weapon-name { font-size: 30px; }
  .weapon-gist { font-size: 14px; }
  .ring { width: 62px; height: 62px; }
  .ring-num { font-size: 16px; }
  .boss { margin-top: clamp(16px, 3vh, 28px); padding: 22px 24px 22px 30px; }
  .boss-title { font-size: 24px; }
  .boss-sub { font-size: 13px; }

  /* 練習：カードの大きさ（--cw）は窓の大きさから決める */
  .view-practice { container-type: size; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .top { height: 64px; }
  .mode-name { font-size: 19px; }
  .count { font-size: 14px; }
  .hint-btn,
  .guide-btn { padding: 0 18px; font-size: 14px; }
  .face { padding: 56px 32px 44px; border-radius: 34px; }
  .eyebrow { top: 20px; left: 24px; }
  .eb { font-size: 13px; }
  .en { --ans-base: 26px; min-height: 54px; }
  .rv-word { font-size: 19px; }
  .rv-label { font-size: 12px; }
  /* 問題の一覧・説明は、窓の真ん中の幅だけ */
  .sheet-panel { width: min(100%, 560px); margin-inline: auto; }
}

/* 横長の窓（ふつうのPC）：左に大きなお題のカード、右に答え・種明かし・ボタン */
@media (min-width: 640px) and (orientation: landscape) {
  .view-practice {
    --cw: clamp(300px, min(100cqw - 540px, (100cqh - 150px) * 1.4), 720px);
    display: grid;
    grid-template-columns: auto minmax(300px, 420px);
    grid-template-rows: auto 1fr auto auto 1fr;
    grid-template-areas:
      "top top"
      "stage ."
      "stage answer"
      "stage actions"
      "stage .";
    justify-content: center;
    column-gap: 56px;
  }
  .top { grid-area: top; }
  /* .main の中身（カード・答え）を、そのまま左右の列に振り分ける */
  .view-practice .main { display: contents; }
  .stage { grid-area: stage; align-self: center; flex: none; width: var(--cw); height: calc(var(--cw) / 1.4); min-height: 0; max-height: none; }
  .say { --say-base: clamp(26px, calc(var(--cw) / 19), 36px); }
  .answer { grid-area: answer; padding-top: 0; }
  .actions { grid-area: actions; padding-top: 24px; }
  /* 次の問題への入れ替え（スマホでは .main ごと消すのと同じ動き） */
  .stage,
  .answer { transition: opacity .25s ease; }
  .app.is-swapping :is(.stage, .answer) { opacity: 0; transition: opacity .18s ease; }
}

/* 縦長の窓（タブレットを縦に持った時など）：スマホと同じ並びのまま、大きくする */
@media (min-width: 640px) and (orientation: portrait) {
  .view-practice { padding-inline: max(32px, calc(50% - 300px)); }
  .stage { max-height: 420px; }
  .say { --say-base: 32px; }
}

/* 背の低い横長の窓（スマホを横にした時など）では詰める */
@media (min-width: 640px) and (max-height: 600px) {
  .view-home { padding-block: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-bottom)); }
  .home-head { margin-bottom: 14px; }
  .logo { font-size: 28px; }
  .weapon { min-height: 96px; padding: 12px 16px 12px 20px; }
  .weapon-name { font-size: 22px; }
  .ring { width: 44px; height: 44px; }
  .ring-num { font-size: 14px; }
  .boss { margin-top: 12px; padding: 12px 16px 12px 22px; }
  .boss-sub { display: none; }

  .view-practice { --cw: clamp(260px, min(100cqw - 440px, (100cqh - 70px) * 1.4), 620px); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .top { height: 50px; }
  .face { padding: 40px 22px 28px; }
  .en { --ans-base: 21px; min-height: 44px; }
  .actions { padding-top: 14px; }
  .btn { height: 48px; }
}

/* マウスで使う時だけ、押せる物の上に来たら少し浮かせる */
@media (hover: hover) and (pointer: fine) {
  .weapon:not(:disabled):hover:not(:active) { transform: translateY(-3px); }
  .boss:hover:not(:active) { transform: translateY(-2px); }
  .btn.primary:hover { filter: brightness(1.08); }
}