/* ============================================================
   柔術を鍛える大人のAI JIU-JITSUトレーニング
   デザインシステム: tohoku-v2 (脳トレSwitch) 参照
   紙テクスチャ白背景 / 赤アクセント / 丸角カード / 極太タイポ
   ============================================================ */
:root {
  --paper: #f3f1ec;
  --paper-line: rgba(60, 50, 40, .05);
  --ink: #2e2c29;
  --ink-2: #6b6862;
  --ink-3: #a3a09a;
  --red: #e8503c;
  --red-deep: #cf3a27;
  --sun: #f05a4a;      /* 日曜 */
  --sat: #4a78d0;      /* 土曜 */
  --today: #b3e690;    /* 今日セル */
  --white: #ffffff;
  --card-r: 26px;
  --pill-r: 999px;
  --shadow-card: 0 10px 30px -12px rgba(50, 40, 30, .25);
  --shadow-pill: 0 4px 14px -6px rgba(50, 40, 30, .3);
  --dur: 220ms;
  --ease: cubic-bezier(.25, .9, .3, 1.15);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  background:
    repeating-linear-gradient(0deg, var(--paper-line) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, var(--paper-line) 0 1px, transparent 1px 26px),
    var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 16px; line-height: 1.6;
  touch-action: manipulation;
  overscroll-behavior-y: none;
}
button { font-family: inherit; }
::selection { background: rgba(232, 80, 60, .18); }

/* ---- ステージ(画面) ---- */
#stage { max-width: 560px; margin: 0 auto; min-height: 100dvh; position: relative; }
.screen {
  min-height: 100dvh; display: flex; flex-direction: column;
  animation: screen-in var(--dur) ease-out;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}
@keyframes screen-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.screen.pop-in { animation: pop-in var(--dur) ease-out; }
@keyframes pop-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }

/* ---- トップバー ---- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--paper) 88%, white);
  border-bottom: 1px solid rgba(60,50,40,.08);
}
.topbar .tb-title {
  position: absolute; left: 0; right: 0; text-align: center;
  font-weight: 800; font-size: 17px; pointer-events: none; color: var(--ink);
}
.btn-back {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; color: var(--red); font-size: 19px; font-weight: 700;
  cursor: pointer; padding: 4px 6px; z-index: 2;
}
.btn-back .chev {
  width: 34px; height: 34px; border-radius: 50%; background: #e7e4de;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-back .chev svg { display: block; }
.btn-back:active { opacity: .6; }
.user-chip {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: none; cursor: pointer; z-index: 2;
  font-size: 17px; font-weight: 600; color: var(--ink);
}
.user-chip .avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(60,50,40,.12);
  overflow: hidden; display: flex; align-items: flex-end; justify-content: center;
}
.user-chip .avatar img { width: 86%; height: auto; transform: translateY(6%); }

/* ---- 汎用 ---- */
.wrap { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.grow { flex: 1; }
.center { text-align: center; }
.note { color: var(--ink-2); font-size: 14px; }
.small { font-size: 13px; }
.red { color: var(--red); }

/* ---- ピルボタン ---- */
.pill {
  display: block; width: min(340px, 86%); margin: 0 auto;
  padding: 15px 20px; border-radius: var(--pill-r);
  background: var(--white); color: var(--ink);
  border: 1px solid rgba(60,50,40,.22);
  font-size: 19px; font-weight: 700; text-align: center; cursor: pointer;
  box-shadow: var(--shadow-pill);
  transition: transform 120ms ease;
}
.pill:active { transform: scale(.96); }
.pill.ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.85); box-shadow: none; }
.pill.on-dark { border-color: transparent; }
.pill.slim { padding: 11px 18px; font-size: 16px; width: auto; display: inline-block; }
.pill.danger { color: var(--red); }
.pill:disabled { opacity: .45; pointer-events: none; }

/* ---- 大型メニューカード(ホーム) ---- */
.mega-card {
  position: relative; border-radius: var(--card-r); overflow: hidden;
  min-height: 168px; display: flex; flex-direction: column; justify-content: center;
  padding: 20px 22px; cursor: pointer; border: 0; width: 100%;
  box-shadow: var(--shadow-card); color: var(--white); text-align: center;
  transition: transform 140ms ease;
  isolation: isolate;
}
.mega-card:active { transform: scale(.975); }
.mega-card .mc-kicker {
  position: absolute; top: 14px; left: 16px; font-size: 15px; font-weight: 700;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.mega-card .mc-title {
  font-size: 34px; font-weight: 900; letter-spacing: .04em;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.mega-card .mc-sub {
  position: absolute; right: 18px; bottom: 12px; font-weight: 800; font-size: 15px;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.mega-card .mc-sub b { font-size: 30px; font-weight: 900; }
.mega-card .wm {
  position: absolute; z-index: -1; right: -14px; bottom: -34px;
  font-size: 150px; font-weight: 900; opacity: .16; color: #fff;
  pointer-events: none; line-height: 1;
}
.mega-card::after { /* 写真風の粒子 */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(255,255,255,.28), transparent 55%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 3px, transparent 3px 7px);
}
.bg-training { background: linear-gradient(115deg, #6d4434 0%, #9c6a4d 55%, #c59a72 100%); }
.bg-check    { background: linear-gradient(115deg, #45566b 0%, #6e8398 55%, #9db2c4 100%); }
.bg-contest  { background: #0a0c12; }
.bg-contest::after {
  background:
    radial-gradient(90% 130% at 50% 130%, rgba(64, 120, 200, .55), transparent 60%),
    radial-gradient(60% 60% at 50% 115%, rgba(120, 190, 150, .35), transparent 70%);
}
.bg-waza  { background: linear-gradient(115deg, #a8862e 0%, #cfae55 55%, #e7d391 100%); }
.bg-zukan { background: linear-gradient(115deg, #3f6b46 0%, #679a67 55%, #9ec990 100%); }
.bg-log   { background: linear-gradient(115deg, #2e6b5e 0%, #4f9b87 55%, #8ecab4 100%); }
.bg-spar  { background: linear-gradient(115deg, #533a6b 0%, #7c5a9e 55%, #b193cf 100%); }
.bg-video { background: linear-gradient(115deg, #31414f 0%, #55707f 55%, #8aa8b5 100%); }
.bg-chat  { background: linear-gradient(115deg, #8c3a3a 0%, #bd6248 55%, #e0a377 100%); }

/* トレーニングメニューの帯状カード */
.strip-card {
  position: relative; border-radius: 0; overflow: hidden; width: 100%;
  min-height: 200px; padding: 22px 20px; border: 0; cursor: pointer; color: #fff;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 4px; text-align: left; isolation: isolate;
}
.strip-card:active { filter: brightness(1.08); }
.strip-card .sc-title { font-size: 40px; font-weight: 900; text-shadow: 0 2px 10px rgba(0,0,0,.55); letter-spacing: .03em; }
.strip-card .sc-desc { font-size: 18px; font-weight: 700; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.strip-card .sc-stat { margin-top: 14px; font-size: 15px; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.strip-card .wm {
  position: absolute; z-index: -1; right: -8px; bottom: -40px;
  font-size: 170px; font-weight: 900; opacity: .15; color: #fff; line-height: 1;
  pointer-events: none;
}
.strip-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(130% 100% at 85% 10%, rgba(255,255,255,.30), transparent 55%),
    repeating-linear-gradient(105deg, rgba(255,255,255,.05) 0 4px, transparent 4px 9px);
}

/* ---- カレンダー ---- */
.cal-card { background: transparent; padding: 0 12px; }
.cal-head { display: flex; align-items: baseline; padding: 10px 8px 2px; }
.cal-head .cal-month { font-size: 34px; font-weight: 800; }
.cal-head .cal-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--red); font-weight: 700; font-size: 17px; border: 0; background: none; cursor: pointer; }
.cal-right .cal-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--red); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dow { text-align: center; font-size: 14px; font-weight: 700; padding: 6px 0; color: var(--ink-2); }
.cal-dow.sun { color: var(--sun); } .cal-dow.sat { color: var(--sat); }
.cal-cell {
  position: relative; text-align: center; font-size: 26px; font-weight: 800;
  padding: 10px 0 12px; background: rgba(255,255,255,.55);
  box-shadow: inset 0 0 0 .5px rgba(60,50,40,.08);
}
.cal-cell.sun { color: var(--sun); } .cal-cell.sat { color: var(--sat); }
.cal-cell.dim { color: #cdcac2; background: rgba(255,255,255,.3); }
.cal-cell.today { background: var(--today); border-radius: 8px; }
.cal-cell .hanko { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }

/* ハンコ(スタンプ) */
.hanko-mark {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2.5px solid rgba(207, 58, 39, .85); color: rgba(207, 58, 39, .9);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 800; transform: rotate(-8deg);
  background: rgba(255, 245, 242, .25);
}
.hanko-mark.stamp-in { animation: stamp-in 360ms cubic-bezier(.2, 1.6, .4, 1); }
@keyframes stamp-in { 0% { transform: scale(2.2) rotate(-20deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(-8deg); opacity: 1; } }

/* ---- タイトル画面 ---- */
.title-screen { justify-content: space-between; padding-top: max(28px, env(safe-area-inset-top)); }
.title-lockup { padding: 8px 26px 0; }
.title-lab { display: flex; align-items: stretch; gap: 0; margin-bottom: 4px; }
.title-lab .lab-l { border: 2px solid var(--ink); border-right: 0; font-size: 12px; font-weight: 700; padding: 3px 8px; display: flex; align-items: center; }
.title-lab .lab-r { background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 800; padding: 3px 10px; display: flex; align-items: center; gap: 4px; }
.title-lab .lab-r small { font-size: 11px; font-weight: 700; }
.title-big { font-size: 64px; font-weight: 900; line-height: 1.08; letter-spacing: .01em; }
.title-big .t-sm { font-size: 44px; }
.title-band { background: var(--red-deep); color: #fff; font-weight: 900; font-size: 27px; letter-spacing: .18em; padding: 4px 12px; display: inline-block; margin: 6px 0; }
.title-tm { font-size: 12px; vertical-align: super; font-weight: 700; }
.title-prof { flex: 1; min-height: 300px; position: relative; margin: 0 auto; width: min(430px, 92%); }
.title-foot { padding: 10px 0 26px; }

/* 3Dキャラ容器 */
.prof-box { position: relative; width: 100%; height: 100%; }
.prof-box canvas { display: block; width: 100%; height: 100%; }
.prof-box .prof-img { position: absolute; inset: 8%; object-fit: contain; width: 84%; height: 84%; margin: auto; }

/* ---- 会話(ダイアログ)シーン ---- */
.dlg-scene {
  /* #stage と同じ560px枠に収める(参考画像は縦型フレーム内で完結) */
  position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(560px, 100%);
  z-index: 60; display: flex; flex-direction: column;
  animation: fade-in 260ms ease-out; overflow: hidden;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.dlg-bg { position: absolute; inset: -30px; filter: blur(2px); }
.dlg-bg.bg-library {
  background:
    repeating-linear-gradient(90deg, rgba(120,100,90,.16) 0 44px, rgba(150,60,60,.20) 44px 58px, rgba(70,90,130,.20) 58px 74px, rgba(200,190,180,.12) 74px 120px),
    linear-gradient(180deg, #f4f2ee 0%, #e7e2da 60%, #d9d2c8 100%);
}
.dlg-bg.bg-dojo {
  background:
    repeating-linear-gradient(0deg, rgba(110,140,90,.14) 0 34px, rgba(90,120,75,.20) 34px 36px),
    linear-gradient(180deg, #f0ede7 0%, #ddd6c8 55%, #c9bfae 100%);
}
.dlg-bg.bg-night { background: linear-gradient(180deg, #10131c 0%, #232a3d 70%, #38415c 100%); filter: none; }
.dlg-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 20%, rgba(255,255,255,.5), transparent 60%); }
.dlg-bg.bg-night::after { background: radial-gradient(100% 60% at 50% 110%, rgba(90,130,220,.25), transparent 70%); }
/* チュートリアル: 元の画面の上に半透明で重ねる(参考画像の説明シーン) */
.dlg-scene.over-screen .dlg-bg.bg-screen { background: rgba(28,24,20,.45); filter: none; backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
.dlg-scene.over-screen .dlg-bg.bg-screen::after { background: none; }
/* セリフ内の強調(参考画像のオレンジ強調) */
.dlg-hl { color: var(--red); font-weight: 800; font-style: normal; }

.dlg-bubble {
  /* 参考画像準拠: 吹き出しは頭のすぐ上に密着(下端基準で固定し、文章が長い時は上に伸びる) */
  position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 54%;
  background: var(--white); border-radius: 24px; padding: 22px 24px;
  font-size: 23px; font-weight: 600; line-height: 1.7; min-height: 120px;
  box-shadow: 0 12px 40px -14px rgba(40,30,20,.35);
  animation: pop-in 240ms var(--ease);
}
.dlg-bubble::after {
  content: ""; position: absolute; left: 130px; bottom: -16px;
  width: 34px; height: 34px; background: var(--white);
  clip-path: polygon(0 0, 100% 0, 22% 100%);
}
/* 参考画像準拠: 頭部は画面幅の約半分の大きさで左寄り・「次へ」ボタンのすぐ上 */
.dlg-prof { position: absolute; z-index: 1; left: 0; bottom: 8%; width: min(380px, 68%); height: min(440px, 46%); }
.dlg-next { position: absolute; z-index: 3; left: 0; right: 0; bottom: max(28px, env(safe-area-inset-bottom)); }
.dlg-caret { display: inline-block; width: .5em; animation: caret 900ms steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.dlg-top-note { position: absolute; z-index: 2; top: 60px; left: 0; right: 0; text-align: center; font-size: 24px; font-weight: 800; color: var(--ink); text-shadow: 0 1px 0 #fff; }

/* ---- 設定リスト ---- */
.set-list { background: transparent; }
.set-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 26px 18px; background: none; border: 0; border-bottom: 1px solid rgba(60,50,40,.14);
  font-size: 21px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left;
}
.set-row:first-child { border-top: 1px solid rgba(60,50,40,.14); }
.set-row .sr-val { margin-left: auto; color: var(--red); font-weight: 700; font-size: 18px; }
.set-row .sr-chev {
  width: 38px; height: 38px; border-radius: 50%; background: #e7e4de; flex: none;
  display: inline-flex; align-items: center; justify-content: center; color: var(--red);
}
.set-row .sr-val + .sr-chev { margin-left: 8px; }
.set-row .sr-chev:only-child, .set-row .sr-chev.push { margin-left: auto; }
.set-row:active { background: rgba(60,50,40,.05); }

/* ---- 結果画面(レベルチェック) ---- */
.result-screen {
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(90, 120, 160, .35), transparent 60%),
    linear-gradient(180deg, #14181f 0%, #232c38 100%);
  color: #fff;
}
.result-screen .rs-lead { font-size: 27px; font-weight: 800; text-align: center; margin-top: 24px; }
.rs-num { text-align: center; line-height: 1; margin: 6px 0 10px; position: relative; }
.rs-num b { font-size: 170px; font-weight: 900; letter-spacing: -.02em; text-shadow: 0 6px 30px rgba(0,0,0,.5); }
.rs-num span { font-size: 46px; font-weight: 900; }
.rs-belt-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px; border-radius: 999px; background: rgba(255,255,255,.12); font-weight: 800; font-size: 18px; }
.rs-sec-title { font-size: 19px; font-weight: 800; padding: 0 22px; margin-top: 10px; }
.rs-chart-box { border: 1px solid rgba(255,255,255,.5); margin: 8px 18px; padding: 8px; }
.rs-chart-box canvas { display: block; width: 100%; }
.rs-date { text-align: right; padding: 0 22px; font-size: 21px; font-weight: 700; }
.count-up { font-variant-numeric: tabular-nums; }

/* ---- 進行画面(チェック中) ---- */
.prog-screen { justify-content: center; text-align: center; gap: 20px; }
.prog-screen .pg-step { font-size: 17px; font-weight: 700; color: var(--red); letter-spacing: .2em; }
.prog-screen .pg-title { font-size: 33px; font-weight: 900; }
.prog-screen .pg-big { font-size: 92px; font-weight: 900; line-height: 1.1; }
.prog-screen .pg-big small { font-size: 30px; }
.prog-bar { width: min(320px, 80%); height: 10px; border-radius: 99px; background: rgba(60,50,40,.12); margin: 0 auto; overflow: hidden; }
.prog-bar i { display: block; height: 100%; background: var(--red); border-radius: 99px; transition: width 500ms ease; }

/* ---- 大会/ランキング(ダーク) ---- */
.dark-screen { background: linear-gradient(180deg, #0a0c12 0%, #171d2b 100%); color: #fff; }
.laurel-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; }
.laurel { width: 54px; height: 90px; color: #e5b93c; }
.laurel.r { transform: scaleX(-1); }
.contest-title { font-size: 34px; font-weight: 900; text-align: center; line-height: 1.3; }
.contest-count { text-align: center; font-size: 19px; font-weight: 700; margin-top: 8px; }
.rank-row {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.12); font-size: 17px; font-weight: 700;
}
.rank-row .rk-pos { width: 40px; font-size: 24px; font-weight: 900; text-align: center; }
.rank-row .rk-min { margin-left: auto; font-weight: 900; font-size: 20px; }
.rank-row.me { background: rgba(232, 80, 60, .18); border-radius: 12px; }
.belt-dot { width: 16px; height: 16px; border-radius: 4px; display: inline-block; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }

/* ---- ワザ図鑑 ---- */
.chip-row { display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 8px; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 8px 16px; border-radius: 999px; font-size: 15px; font-weight: 700;
  background: var(--white); border: 1px solid rgba(60,50,40,.18); color: var(--ink-2); cursor: pointer;
}
.chip.on { background: var(--red); border-color: var(--red); color: #fff; }
.tech-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 20px; overflow: hidden; border: 0; cursor: pointer; width: 100%;
  min-height: 116px; padding: 14px 16px; color: #fff; text-align: left; isolation: isolate;
  box-shadow: var(--shadow-card); transition: transform 120ms ease;
}
.tech-card:active { transform: scale(.97); }
.tech-card .tc-name { font-size: 23px; font-weight: 900; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.tech-card .tc-sub { font-size: 13px; font-weight: 700; opacity: .95; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.tech-card .tc-stars { position: absolute; top: 10px; right: 12px; font-size: 14px; letter-spacing: 2px; color: #ffd75e; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.tech-card .wm { position: absolute; z-index: -1; right: -6px; bottom: -22px; font-size: 96px; font-weight: 900; opacity: .18; color: #fff; line-height: 1; }
.tech-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.25), transparent 55%); }
.tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px; }

/* 技詳細 */
.tech-hero { position: relative; min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 20px; color: #fff; isolation: isolate; }
.tech-hero .th-name { font-size: 36px; font-weight: 900; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.tech-hero .th-en { font-size: 15px; font-weight: 700; opacity: .9; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.tech-hero .wm { position: absolute; z-index: -1; right: -10px; bottom: -30px; font-size: 150px; font-weight: 900; opacity: .16; line-height: 1; }
.tech-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.25), transparent 55%); }

.paper-card { background: var(--white); border-radius: 20px; padding: 18px; box-shadow: var(--shadow-card); }
.paper-card h3 { font-size: 17px; font-weight: 800; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.paper-card h3 .bar { width: 5px; height: 20px; border-radius: 3px; background: var(--red); display: inline-block; }
.step-li { display: flex; gap: 12px; padding: 8px 0; font-size: 16px; }
.step-li .no { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.point-li { padding: 6px 0 6px 4px; display: flex; gap: 8px; font-size: 15px; }
.point-li::before { content: "●"; color: var(--red); font-size: 11px; margin-top: 6px; }
.point-li.warn::before { content: "▲"; color: #d99a26; }

/* 習得レベル選択 */
.mastery-row { display: flex; gap: 8px; justify-content: space-between; }
.m-btn {
  flex: 1; padding: 12px 2px 9px; border-radius: 14px; border: 1.5px solid rgba(60,50,40,.2);
  background: var(--white); cursor: pointer; text-align: center; color: var(--ink-3);
}
.m-btn b { display: block; font-size: 21px; }
.m-btn small { font-size: 10px; font-weight: 700; }
.m-btn.on { border-color: var(--red); color: var(--red); background: #fdf0ed; }

/* ---- フォーム(ゲーム風) ---- */
.g-label { font-size: 15px; font-weight: 800; color: var(--ink-2); margin: 8px 2px 6px; }
.g-input, .g-select, .g-textarea {
  width: 100%; padding: 14px 16px; border-radius: 16px; border: 1.5px solid rgba(60,50,40,.2);
  background: var(--white); font-size: 17px; font-family: inherit; color: var(--ink);
}
.g-input:focus, .g-select:focus, .g-textarea:focus { outline: 2px solid var(--red); border-color: transparent; }
.opt-row { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  padding: 10px 16px; border-radius: 999px; border: 1.5px solid rgba(60,50,40,.2);
  background: var(--white); font-size: 15px; font-weight: 700; color: var(--ink-2); cursor: pointer;
}
.opt.on { border-color: var(--red); background: #fdf0ed; color: var(--red); }
.stepper { display: flex; align-items: center; gap: 14px; justify-content: center; }
.stepper button { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(60,50,40,.25); background: var(--white); font-size: 26px; font-weight: 800; color: var(--red); cursor: pointer; }
.stepper .stv { font-size: 40px; font-weight: 900; min-width: 120px; text-align: center; }
.stepper .stv small { font-size: 18px; }
.star-row { display: flex; gap: 6px; justify-content: center; font-size: 38px; }
.star-row button { border: 0; background: none; cursor: pointer; color: #d9d5cd; font-size: inherit; }
.star-row button.on { color: #f0b429; }

/* ---- ユーザー選択 ---- */
.user-card {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: var(--white); border: 0; border-radius: 22px; padding: 16px 18px;
  box-shadow: var(--shadow-card); cursor: pointer; text-align: left;
  font-size: 19px; font-weight: 800; color: var(--ink); transition: transform 120ms ease;
}
.user-card:active { transform: scale(.97); }
.user-card .uc-belt { width: 52px; height: 52px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.08); }
.user-card small { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); }

/* ---- チャット ---- */
.chat-log { flex: 1; overflow-y: auto; padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 82%; padding: 12px 16px; border-radius: 20px; font-size: 16px; line-height: 1.65; box-shadow: 0 4px 14px -8px rgba(40,30,20,.3); }
.msg.user { align-self: flex-end; background: var(--red); color: #fff; border-bottom-right-radius: 6px; }
.msg.prof { align-self: flex-start; background: var(--white); border-bottom-left-radius: 6px; white-space: pre-wrap; }
.msg .refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg .refs button { border: 1px solid rgba(60,50,40,.2); background: #faf8f4; border-radius: 99px; padding: 4px 12px; font-size: 13px; font-weight: 700; color: var(--red); cursor: pointer; }
.chat-input { display: flex; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 88%, white); border-top: 1px solid rgba(60,50,40,.1); }
.chat-input input { flex: 1; padding: 13px 18px; border-radius: 999px; border: 1.5px solid rgba(60,50,40,.2); font-size: 16px; font-family: inherit; }
.chat-input button { width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--red); color: #fff; font-size: 20px; cursor: pointer; flex: none; }
.chat-prof-dock { position: sticky; bottom: 0; height: 0; pointer-events: none; z-index: 5; }
.chat-prof-dock .prof-box { position: absolute; bottom: -6px; left: -20px; width: 150px; height: 150px; }

/* ---- モーダル ---- */
.modal-veil { position: fixed; inset: 0; z-index: 70; background: rgba(40, 34, 28, .45); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fade-in 200ms ease-out; }
.modal-card { background: var(--white); border-radius: 26px; width: min(440px, 100%); max-height: 86dvh; overflow-y: auto; padding: 22px; animation: pop-in 220ms var(--ease); }
.modal-card h2 { font-size: 21px; font-weight: 800; text-align: center; margin-bottom: 14px; }

/* ---- トースト ---- */
#toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 700;
  border-radius: 999px; padding: 12px 22px; opacity: 0; pointer-events: none;
  transition: all 240ms ease; z-index: 90; max-width: min(520px, 86vw); text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- ホーム下部アクション ---- */
.home-foot { display: flex; align-items: center; padding: 6px 18px 8px; }
.hf-btn { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; color: var(--red); font-size: 24px; font-weight: 700; cursor: pointer; }
.hf-gear { width: 46px; height: 46px; color: var(--red); }
.hf-prof {
  margin-left: auto; width: 62px; height: 62px; border-radius: 50%; border: 0;
  background: var(--red); cursor: pointer; overflow: hidden; position: relative;
  box-shadow: var(--shadow-pill);
}
.hf-prof img { position: absolute; inset: 6% 0 -12% 0; margin: auto; width: 88%; }
.hf-prof .dot { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ffd75e; border: 2px solid #fff; }
.hf-prof:active { transform: scale(.94); }

/* ---- 動画解析 ---- */
.an-status { display: inline-block; padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 800; }
.an-status.done { background: #e3f4de; color: #3d7a2e; }
.an-status.failed { background: #fbe3df; color: var(--red-deep); }
.an-status.working { background: #fdf3d8; color: #a4781b; }
.frame-thumb { border-radius: 12px; max-width: 130px; }

/* ---- その他 ---- */
.divider { height: 1px; background: rgba(60,50,40,.12); margin: 4px 0; }
.list-plain { display: flex; flex-direction: column; gap: 10px; }
.badge { display: inline-block; background: #efece6; color: var(--ink-2); border-radius: 8px; font-size: 12px; font-weight: 800; padding: 2px 8px; }
.spin { width: 34px; height: 34px; border: 4px solid rgba(60,50,40,.15); border-top-color: var(--red); border-radius: 50%; animation: spin 800ms linear infinite; margin: 30px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }
@media (min-width: 561px) {
  #stage { box-shadow: 0 0 60px -20px rgba(50,40,30,.35); }
  .dlg-scene { box-shadow: 0 0 60px -20px rgba(50,40,30,.35); }
}