:root {
  /* 動画 v3 と同じ色: 淡い灰の地、白いタイル、赤と空色 */
  --paper: #ffffff; --bg: #f4f6f8; --card: #fff; --ink: #24272c; --sub: #6b7280; --line: #e4e8ee;
  --red: #e2463b; --red-d: #b9322a; --ok: #2f8a57; --ok-bg: #e6f4ec; --ng-bg: #fdecea; --blue: #3b8fd6; --sky: #7cc4f0;
  --r: 18px; --shadow: 0 2px 0 rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.05);
  --fj: "Zen Maru Gothic", "Hiragino Sans", sans-serif; --fe: "Nunito", "Helvetica Neue", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 500 16px/1.6 var(--fj); }
body { overscroll-behavior: none; }
button { font: inherit; color: inherit; }
#app { max-width: 480px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }
.screen { flex: 1; display: flex; flex-direction: column; min-height: 100dvh; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }

/* ---- ホーム ---- */
.home-head { padding: 22px 20px 8px; display: flex; align-items: center; gap: 12px; }
.logo { font: 900 26px/1 var(--fj); letter-spacing: .02em; }
.logo small { display: block; font: 700 11px/1.4 var(--fj); color: var(--sub); letter-spacing: .08em; margin-top: 4px; }
.stats { margin-left: auto; display: flex; gap: 8px; }
.stat { background: var(--card); border-radius: 99px; padding: 4px 12px; font: 800 14px var(--fe); box-shadow: var(--shadow); display: flex; align-items: center; gap: 6px; }
.stat i { width: 10px; height: 10px; border-radius: 50%; background: var(--red); display: inline-block; }
.stat.xp i { background: #e8b931; }
.course { padding: 4px 20px 6px; color: var(--sub); font-size: 13px; }
.mute { border: 0; background: none; padding: 6px; cursor: pointer; font-size: 13px; color: var(--sub); }
.part { margin: 18px 16px 0; }
.part h2 { font: 900 17px var(--fj); margin: 0 4px 10px; display: flex; align-items: baseline; gap: 8px; }
.part h2 span { font: 800 12px var(--fe); color: var(--sub); letter-spacing: .06em; }
.nodes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.node { background: var(--card); border: 0; border-radius: 22px; padding: 16px 14px 14px; text-align: left; box-shadow: var(--shadow); cursor: pointer; position: relative; min-height: 112px; display: flex; flex-direction: column; gap: 6px; transition: transform .12s; }
.node:active { transform: scale(.97); }
.node .n { font: 800 12px var(--fe); color: var(--sub); letter-spacing: .06em; }
.node .t { font: 900 16px/1.35 var(--fj); text-wrap: balance; }
.node .ph { font: 700 12px/1.4 var(--fe); color: var(--sub); }
.node.done::after { content: ""; position: absolute; right: 14px; top: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.node.next { outline: 3px solid var(--red); }
.node.locked { opacity: .45; cursor: default; }
.home-foot { padding: 28px 20px 36px; color: var(--sub); font-size: 12px; text-align: center; }

/* ---- レッスン ---- */
.top { display: flex; align-items: center; gap: 12px; padding: 14px 16px 6px; }
.close { border: 0; background: none; font-size: 26px; line-height: 1; color: #9aa3ae; cursor: pointer; padding: 2px 6px; }
.prog { flex: 1; height: 14px; background: var(--line); border-radius: 99px; overflow: hidden; }
.prog i { display: block; height: 100%; width: 0; background: var(--red); border-radius: 99px; transition: width .35s cubic-bezier(.3,1.4,.5,1); }
.hud { display: flex; align-items: center; gap: 8px; padding: 0 18px; min-height: 40px; font: 800 12px var(--fe); color: #9aa3ae; }
.hud .lv.fever { color: #fff; background: var(--red); border-radius: 99px; padding: 1px 9px; letter-spacing: .08em; }
.hud .lost { color: var(--sub); font-size: 12px; }
.cbox { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--red); }
.cbox .cn { font: 800 30px/1 var(--fe); min-width: 1.2em; text-align: right; }
.cbox .cl { font: 800 11px var(--fe); letter-spacing: .08em; }
.cbox.zero { color: #c9ced6; }
.pips { display: flex; gap: 4px; }
.pips i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.pips i.on { background: var(--red); }
.hud.fever .cbox .cn { text-shadow: 0 0 12px rgba(207,59,44,.35); }
.beats { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; }
.beats i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); transition: transform .06s; }
.beats i.cur { background: #c9ced6; }
.beats i.on { background: var(--red); transform: scale(1.5); }
.beats i:first-child.on { transform: scale(1.8); }
.hitbeat { box-shadow: 0 0 0 4px rgba(207,59,44,.25); }
.onbeat { position: fixed; left: 50%; top: 38%; transform: translate(-50%,-50%); font: 900 34px/1 var(--fe); color: var(--red); text-align: center; pointer-events: none; animation: ob .9s ease-out forwards; z-index: 20; }
.onbeat.good { font-size: 26px; color: #d08a1f; }
.onbeat span { display: block; font: 800 13px var(--fe); letter-spacing: .1em; margin-top: 6px; }
@keyframes ob { 0% { transform: translate(-50%,-30%) scale(.6); opacity: 0; } 15% { transform: translate(-50%,-50%) scale(1.1); opacity: 1; } 30% { transform: translate(-50%,-50%) scale(1); } 100% { transform: translate(-50%,-70%); opacity: 0; } }
.milestone { position: fixed; left: 50%; top: 32%; transform: translate(-50%,-50%); background: var(--card); border-radius: 28px; padding: 18px 34px; box-shadow: 0 10px 40px rgba(0,0,0,.12); font: 900 64px/1 var(--fe); color: var(--red); text-align: center; pointer-events: none; animation: ms 1.5s cubic-bezier(.3,1.5,.5,1) forwards; z-index: 21; }
.milestone span { display: block; font: 800 16px var(--fe); letter-spacing: .14em; margin-top: 4px; }
.milestone small { display: block; font: 900 14px var(--fe); letter-spacing: .3em; color: #fff; background: var(--red); border-radius: 99px; padding: 2px 0; margin-bottom: 8px; }
@keyframes ms { 0% { transform: translate(-50%,-50%) scale(.4); opacity: 0; } 18% { transform: translate(-50%,-50%) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%,-56%) scale(.96); opacity: 0; } }
.rbox.best { outline: 3px solid var(--red); }
.stat.cb i { background: var(--ink); border-radius: 3px; }
.qlabel { padding: 6px 20px 2px; font: 900 18px var(--fj); }
.qlabel .new { display: inline-block; font: 800 11px var(--fe); color: #fff; background: var(--red); border-radius: 6px; padding: 1px 7px; margin-right: 8px; vertical-align: 3px; letter-spacing: .06em; }
.scene { margin: 6px 16px 0; border-radius: 28px; background: #fff; overflow: hidden; position: relative; box-shadow: 0 6px 20px rgba(30,40,60,.08); }
.scene canvas { display: block; width: 100%; height: auto; }
.scene .replay { position: absolute; right: 10px; bottom: 10px; border: 0; background: rgba(255,255,255,.9); border-radius: 99px; padding: 5px 12px; font: 800 13px var(--fe); cursor: pointer; box-shadow: var(--shadow); }
.prompt { text-align: center; padding: 12px 16px 2px; font: 800 24px/1.3 var(--fe); text-wrap: balance; min-height: 40px; }
.prompt.ja { font: 900 22px/1.4 var(--fj); }
.prompt .s { color: var(--red); }
.body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px 16px 0; gap: 10px; }
.opts { display: grid; gap: 9px; }
.opts.g2 { grid-template-columns: 1fr 1fr; }
.opt { border: 2px solid var(--line); border-bottom-width: 4px; background: var(--card); border-radius: 16px; padding: 12px 10px; font-weight: 700; font-size: 16px; cursor: pointer; word-break: keep-all; overflow-wrap: anywhere; line-height: 1.35; }
.opt.en { font-family: var(--fe); font-weight: 700; }
.opt.on { border-color: var(--blue); color: var(--blue); background: #eef4fd; }
.opt.ok { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }
.opt.ng { border-color: var(--red); color: var(--red); background: var(--ng-bg); }
.opt:disabled { cursor: default; }
.opt.dim { opacity: .35; }
.tiles { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; min-height: 54px; padding: 6px 0; }
.tiles.ans { border-bottom: 2px solid var(--line); margin-bottom: 4px; justify-content: flex-start; }
.tile { border: 2px solid var(--line); border-bottom-width: 4px; background: var(--card); border-radius: 12px; padding: 7px 12px; font: 700 17px var(--fe); cursor: pointer; }
.tile.ok { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }
.tile.s { border-color: var(--red); color: var(--red); background: var(--ng-bg); }
.foot { padding: 12px 16px 18px; }
.go { width: 100%; border: 0; border-radius: 16px; padding: 14px; font: 900 17px var(--fj); background: var(--red); color: #fff; border-bottom: 4px solid var(--red-d); cursor: pointer; letter-spacing: .04em; }
.go:disabled { background: #e4e8ee; border-color: #d5dae1; color: #fff; cursor: default; }
.go.ok { background: var(--ok); border-color: #2e6b44; }
.sheet { padding: 14px 18px 0; border-radius: 20px 20px 0 0; animation: up .22s cubic-bezier(.3,1.4,.5,1); }
.sheet.ok { background: var(--ok-bg); color: var(--ok); }
.sheet.ng { background: var(--ng-bg); color: var(--red); }
.sheet b { font: 900 20px var(--fj); display: block; }
.sheet .pair { font: 700 15px/1.5 var(--fj); color: var(--ink); margin-top: 2px; }
.sheet .pair .en { font-family: var(--fe); font-weight: 800; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.judge { text-align: center; min-height: 28px; font: 900 18px var(--fe); color: var(--red); }
.tap { font-size: 34px !important; padding: 18px !important; font-family: var(--fe) !important; }
.pairbig { text-align: center; padding: 10px 16px 0; min-height: 86px; }
.pairbig .en { font: 800 24px/1.3 var(--fe); }
.pairbig .ja { font: 700 18px/1.5 var(--fj); color: var(--sub); }

/* ---- 結果 ---- */
.result { align-items: center; justify-content: center; text-align: center; padding: 24px 20px; gap: 6px; }
.result h1 { font: 900 30px var(--fj); margin: 8px 0 0; }
.result canvas { width: 220px; height: 220px; }
.rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin: 18px 0 6px; }
.rbox { background: var(--card); border-radius: 18px; padding: 12px 6px; box-shadow: var(--shadow); }
.rbox .v { font: 800 26px var(--fe); }
.rbox .k { font: 700 12px var(--fj); color: var(--sub); }
.streak { font: 800 15px var(--fj); color: var(--red); margin-top: 6px; }
.result .foot { width: 100%; margin-top: auto; padding: 18px 0; }

.pop { animation: pop .22s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { 50% { transform: scale(1.08); } }
.shake { animation: shake .18s; }
@keyframes shake { 33% { transform: translateX(-5px); } 66% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .pop, .shake, .sheet { animation: none; } }

/* ---- v3: 自動で進むボタン、ホームの目標、チュートリアル、紹介カード、決めパンチ、言ってみる ---- */
.go { position: relative; overflow: hidden; }
.go .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,255,255,.22); }
.go b { position: relative; font: inherit; }
.home .home-head { padding-bottom: 4px; }
.gear { border: 0; background: var(--card); border-radius: 99px; padding: 4px 12px; font: 700 13px var(--fj); color: var(--sub); box-shadow: var(--shadow); cursor: pointer; }
.cta { margin: 12px 16px 0; background: var(--card); border-radius: 24px; padding: 16px; box-shadow: var(--shadow); display: grid; grid-template-columns: 56px 1fr; gap: 6px 14px; align-items: center; }
.cta .ring { width: 56px; height: 56px; transform: rotate(-90deg); }
.cta .ring circle { fill: none; stroke-width: 6; }
.cta .ring .bg { stroke: var(--line); }
.cta .ring .fg { stroke: var(--red); stroke-linecap: round; stroke-dasharray: 113.1; transition: stroke-dashoffset .6s; }
.cta-t small { display: block; font: 700 12px var(--fj); color: var(--sub); }
.cta-t b { font: 900 17px/1.35 var(--fj); text-wrap: balance; }
.cta .cta-go { grid-column: 1 / -1; margin-top: 6px; }
.review { margin: 10px 16px 0; width: calc(100% - 32px); border: 2px solid var(--red); background: var(--card); border-radius: 18px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.review b { font: 900 16px var(--fj); color: var(--red); }
.review span { font: 800 14px var(--fe); color: var(--sub); }
.course { margin-top: 12px; }
.modal { position: fixed; inset: 0; background: rgba(29,26,23,.35); display: flex; align-items: flex-end; justify-content: center; z-index: 30; }
.panel { background: var(--bg); width: 100%; max-width: 480px; border-radius: 24px 24px 0 0; padding: 20px 20px 28px; display: flex; flex-direction: column; gap: 12px; }
.panel h3 { margin: 0 0 4px; font: 900 18px var(--fj); }
.panel .row { display: flex; justify-content: space-between; align-items: center; background: var(--card); border-radius: 14px; padding: 12px 14px; font-weight: 700; gap: 10px; }
.panel .row input { width: 22px; height: 22px; accent-color: var(--red); }
.panel .cal { border: 2px solid var(--line); background: var(--card); border-radius: 99px; padding: 4px 12px; font: 700 13px var(--fj); cursor: pointer; }
.tut { align-items: center; padding: 28px 20px; gap: 14px; text-align: center; }
.tut-head b { font: 900 24px var(--fj); }
.tut-head p { margin: 8px 0 0; color: var(--sub); font-size: 15px; }
.tut-dots { display: flex; gap: 18px; margin-top: 18px; }
.tut-dots i { width: 18px; height: 18px; border-radius: 50%; background: var(--line); transition: transform .06s; }
.tut-dots i.on { background: var(--red); transform: scale(1.5); }
.pad { width: 200px; height: 200px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; font: 900 22px var(--fj); box-shadow: 0 8px 0 #000, var(--shadow); cursor: pointer; margin-top: 14px; touch-action: manipulation; }
.pad:active { transform: translateY(4px); box-shadow: 0 4px 0 #000; }
.tut-count { font: 800 18px var(--fe); color: var(--sub); }
.tut-msg { font-size: 15px; line-height: 1.8; text-align: left; max-width: 340px; }
.tut .go { max-width: 340px; margin-top: auto; }
.new.gray { background: #9aa3ae; }
.stage { flex: 1; display: flex; flex-direction: column; }
.intro { text-align: center; padding: 6px 16px 0; }
.intro .ja { font: 900 22px/1.4 var(--fj); margin-top: 4px; }
.why { font: 700 14px/1.6 var(--fj); color: var(--sub); margin-top: 6px; text-wrap: pretty; }
.sheet .why { color: inherit; opacity: .85; }
.ja.center { text-align: center; font: 700 17px var(--fj); color: var(--sub); }
.pmeaning { text-align: center; padding: 6px 16px 4px; min-height: 64px; }
.pmeaning small { display: block; font: 800 12px var(--fe); color: var(--sub); letter-spacing: .08em; }
.pmeaning b { font: 900 24px/1.35 var(--fj); }
.pmeaning .rating { font-size: 40px; color: var(--red); }
canvas.punch { display: block; width: calc(100% - 32px); margin: 4px 16px 0; border-radius: var(--r); touch-action: manipulation; cursor: pointer; }
.speakcue { text-align: center; font: 900 30px var(--fe); letter-spacing: .08em; color: var(--sub); margin-top: 14px; }
.speakcue.you { color: var(--red); }
.learned { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.learned small { font: 700 12px var(--fj); color: var(--sub); }
.lrow { border: 0; background: var(--card); border-radius: 14px; padding: 9px 14px; display: flex; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; box-shadow: var(--shadow); }
.lrow .en { font: 800 15px var(--fe); }
.lrow .en .s, .prompt .s, .sheet .s { color: var(--red); }
.lrow .ja { font: 700 13px var(--fj); color: var(--sub); }
.result { justify-content: flex-start; }
.result canvas { width: 160px; height: 160px; }
.result h1 { margin-top: 0; }
.stage > .foot { margin-top: auto; }
.nw { white-space: nowrap; }
.go.wait { visibility: hidden; }
.gear { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; }
.gear.flat { background: none; box-shadow: none; color: #9aa3ae; }
.stat.pro { background: var(--ink); color: #fff; letter-spacing: .08em; }
.ptag { font-style: normal; font: 800 10px var(--fe); color: #fff; background: var(--ink); border-radius: 5px; padding: 1px 5px; margin-left: 4px; vertical-align: 1px; letter-spacing: .06em; }
.freeinfo { margin: 8px 20px 0; font-size: 12px; color: var(--sub); }
.link { border: 0; background: none; padding: 0; font: 700 12px var(--fj); color: var(--red); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.panel .small { font-size: 12px; color: var(--sub); font-weight: 500; }
.cal.danger { border-color: var(--red); color: var(--red); }
.pw .panel { gap: 14px; padding-top: 26px; }
.pw-head b { font: 900 26px var(--fj); }
.pw-head b span { font: 900 14px var(--fe); color: #fff; background: var(--red); border-radius: 8px; padding: 2px 8px; vertical-align: 5px; letter-spacing: .08em; }
.pw-head p { margin: 4px 0 0; color: var(--sub); }
.pw-list { margin: 0; padding-left: 1.2em; line-height: 1.9; font-weight: 700; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan { position: relative; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--card); border-radius: 18px; padding: 18px 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.plan.on { border-color: var(--red); }
.plan em { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font: 800 11px var(--fj); font-style: normal; color: #fff; background: var(--red); border-radius: 99px; padding: 1px 10px; white-space: nowrap; }
.plan b { font: 900 17px var(--fj); }
.plan span { font: 700 12px var(--fj); color: var(--sub); }
.pw .demo { margin: -4px 0 0; text-align: center; font-size: 12px; color: var(--sub); }
.pw .later { align-self: center; color: var(--sub); }
.shelf { margin: 18px 16px 0; }
.shelf h2 { font: 900 17px var(--fj); margin: 0 4px 10px; }
.books { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.book { flex: 0 0 150px; min-height: 120px; border: 0; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); padding: 14px; text-align: left; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.book b { font: 900 15px/1.35 var(--fj); text-wrap: balance; }
.book span { font: 700 11px/1.4 var(--fj); color: var(--sub); }
.book em { margin-top: auto; font: 800 12px var(--fj); font-style: normal; color: var(--red); }
.book.mine { border-top: 6px solid var(--red); }
.book.soon { opacity: .5; cursor: default; border-top: 6px solid var(--line); }
.pw-head small { display: block; font: 800 12px var(--fe); color: var(--sub); letter-spacing: .08em; }
.price { display: flex; align-items: baseline; gap: 10px; justify-content: center; }
.price b { font: 900 34px var(--fe); }
.price span { font: 700 13px var(--fj); color: var(--sub); }
.auth { display: flex; flex-direction: column; gap: 10px; }
.auth input { font: 600 16px var(--fe); border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--card); color: var(--ink); }
.auth input:focus { outline: none; border-color: var(--red); }
.auth .err { min-height: 20px; font: 700 13px var(--fj); color: var(--red); }
.pw .swap { align-self: center; }

.shelf h2 span { font: 800 12px var(--fe); color: var(--sub); margin-left: 6px; }
.book.mine { border-top-color: var(--red); outline: 3px solid var(--red); outline-offset: -3px; }
.book { border-top: 6px solid var(--sky); }

/* ---- スマホの 1 画面に収める (2026-10-04 会員テストで、問題画面と答えのシートがはみ出していた) ---- */
.screen.lesson { height: 100dvh; min-height: 0; overflow: hidden; }
.lesson .top { padding: 8px 16px 0; }
.lesson .hud { min-height: 32px; }
.lesson .cbox .cn { font-size: 26px; }
.lesson .qlabel { font-size: 16px; padding: 0 20px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lesson .scene { flex: 0 0 auto; margin: 4px 16px 0; border-radius: 22px; }
.lesson .scene canvas { width: 100%; height: auto; max-height: 30dvh; object-fit: contain; }
.lesson .stage { flex: 1 1 0; min-height: 0; }
.lesson .prompt { padding: 8px 16px 0; font-size: 22px; min-height: 0; }
.lesson .prompt.ja { font-size: 20px; }
.lesson .body { padding: 6px 16px 0; min-height: 0; overflow: hidden; }
.lesson .opt { padding: 10px 8px; font-size: 15px; min-height: 52px; }
.lesson .foot { position: relative; padding: 6px 16px 12px; }
.lesson .beats { margin-bottom: 6px; }
.lesson .sheet { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 5; padding: 14px 18px 10px; box-shadow: 0 -8px 24px rgba(30,40,60,.08); }
.lesson .intro .ja { font-size: 20px; }
.lesson canvas.punch { max-height: 48dvh; object-fit: contain; }
.lesson .pmeaning { min-height: 0; padding: 2px 16px; }
.screen.result { overflow-y: auto; }
.result canvas { width: 120px; height: 120px; }
.result .foot { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0 16px; }
@media (max-height: 600px) {   /* iPhone SE など */
  .lesson .scene canvas { max-height: 24dvh; }
  .lesson .prompt { font-size: 19px; padding-top: 4px; }
  .lesson .opt { min-height: 46px; padding: 8px 6px; font-size: 14px; }
  .lesson .hud { min-height: 26px; }
}

/* 場面は残りの高さいっぱいに広げる (問題と選択肢のあいだの空白をなくし、絵を大きく) */
.lesson .scene { flex: 1 1 0; min-height: 110px; display: flex; }
.lesson .scene canvas { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.lesson .stage { flex: 0 0 auto; }
.lesson .body { flex: 0 0 auto; }
.lesson.noscene .stage { flex: 1 1 0; }
.lesson.noscene canvas.punch { flex: 1 1 0; min-height: 0; width: calc(100% - 32px); max-height: none; }
.scene .replay { top: 10px; right: 10px; bottom: auto; width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
@media (max-height: 600px) { .lesson .scene canvas { max-height: none; } }
.opt { text-wrap: balance; }

/* ---- フレーズ図鑑 ---- */
.zukan-open { margin: 10px 16px 0; width: calc(100% - 32px); border: 0; background: var(--card); border-radius: 20px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; box-shadow: var(--shadow); }
.zukan-open .zi { width: 44px; height: 44px; border-radius: 14px; background: var(--sky); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.zukan-open .zt { flex: 1; display: flex; flex-direction: column; }
.zukan-open b { font: 900 16px var(--fj); }
.zukan-open small { font: 700 12px/1.4 var(--fj); color: var(--sub); }
.zukan-open .zc { font: 900 24px var(--fe); color: #c9ced6; }
.zukan { padding-bottom: 24px; }
.ztop { display: flex; align-items: center; gap: 10px; padding: 12px 16px 6px; position: sticky; top: 0; background: var(--bg); z-index: 3; }
.ztop > div { flex: 1; display: flex; flex-direction: column; }
.ztop small { font: 800 11px var(--fe); color: var(--sub); letter-spacing: .08em; }
.ztop b { font: 900 18px var(--fj); }
.hidebtn { border: 2px solid var(--line); background: var(--card); border-radius: 99px; padding: 6px 12px; font: 800 12px var(--fj); cursor: pointer; }
.hidebtn.on { border-color: var(--red); color: var(--red); }
.zsec { margin: 14px 16px 0; }
.zsec h2 { font: 900 15px var(--fj); margin: 0 4px 8px; }
.zsec h2 span { font: 800 11px var(--fe); color: var(--sub); margin-left: 6px; letter-spacing: .06em; }
.zrow { width: 100%; border: 0; background: var(--card); border-radius: 16px; padding: 12px 14px; margin-bottom: 8px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px; text-align: left; cursor: pointer; box-shadow: var(--shadow); }
.zrow .en { font: 800 16px var(--fe); }
.zrow .en .s { color: var(--red); }
.zrow .ja { font: 700 13px var(--fj); color: var(--sub); grid-row: 2; }
.zrow .ja.hid { color: transparent; background: var(--line); border-radius: 6px; width: 60%; }
.zrow .lv { grid-row: 1 / 3; grid-column: 2; align-self: center; width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
.zrow .lv1 { background: #c6e3f5; } .zrow .lv2 { background: var(--sky); } .zrow .lv3 { background: var(--ok); }
.zrow.locked { opacity: .45; }
.zdetail .top { justify-content: space-between; }
.zdetail .zpos { font: 800 13px var(--fe); color: var(--sub); }
.zbody { padding: 6px 18px 0; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.zbody .prompt { padding: 4px 0 0; }
.zja { border: 0; background: none; font: 900 21px/1.4 var(--fj); color: var(--ink); cursor: pointer; padding: 2px 8px; }
.zja.hid { color: var(--red); font-size: 16px; border: 2px dashed var(--red); border-radius: 12px; padding: 6px 14px; }
.zbody .why.hid, .zbody .traps.hid { visibility: hidden; }
.traps { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.traps small { width: 100%; font: 700 11px var(--fj); color: var(--sub); }
.traps span { font: 700 12px var(--fj); color: var(--sub); background: #eef1f4; border-radius: 99px; padding: 3px 10px; text-decoration: line-through; text-decoration-color: rgba(226,70,59,.6); }
.zctl { display: grid; grid-template-columns: 52px 1fr 1fr 52px; gap: 8px; padding: 12px 16px 16px; }
.zbtn { border: 2px solid var(--line); border-bottom-width: 4px; background: var(--card); border-radius: 16px; padding: 10px 6px; font: 900 15px var(--fj); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--ink); }
.zbtn.prev, .zbtn.next { font: 900 26px var(--fe); padding: 4px; }
.zbtn:disabled { opacity: .3; }
.zbtn.loop.on { border-color: var(--red); color: var(--red); background: var(--ng-bg); }
.ppads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px 16px 0; }
.ppad { border: 0; border-radius: 22px; padding: 16px 0; font: 900 40px/1 var(--fe); color: #fff; cursor: pointer; touch-action: manipulation; border-bottom: 6px solid rgba(0,0,0,.18); }
.ppad.o { background: var(--red); }
.ppad.x { background: var(--sky); }
.ppad:disabled { opacity: .35; }
.lesson.noscene .judge { min-height: 22px; }

/* ---- カードで覚える (主役) ---- */
.deck { margin: 12px 16px 0; background: var(--card); border-radius: 24px; padding: 18px 18px 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.deck-t { display: flex; flex-direction: column; }
.deck-t small { font: 700 12px var(--fj); color: var(--sub); }
.deck-t b { font: 900 22px var(--fj); }
.deck-t span { font: 800 13px var(--fe); color: var(--sub); }
.deck-bar { height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; }
.deck-bar i { display: block; height: 100%; background: var(--ok); border-radius: 99px; }
.deck .zukan-link { align-self: center; color: var(--sub); }
h2.sec { font: 900 15px var(--fj); color: var(--sub); margin: 20px 20px 0; }
.cta .cta-go { background: var(--card); color: var(--ink); border: 2px solid var(--line); border-bottom-width: 4px; }
.cardsc .ccount { font: 800 13px var(--fe); color: var(--sub); min-width: 48px; text-align: right; }
.card3 { flex: 1 1 0; min-height: 0; margin: 8px 16px 0; background: var(--card); border-radius: 28px; box-shadow: 0 10px 30px rgba(30,40,60,.10); display: flex; flex-direction: column; overflow: hidden; cursor: pointer; will-change: transform; transition: transform .2s; touch-action: pan-y; }
.card3 .scene { flex: 1 1 0; min-height: 0; margin: 0; border-radius: 0; box-shadow: none; display: flex; }
.card3 .scene canvas { width: 100%; height: 100%; object-fit: contain; }
.cface { padding: 4px 16px 18px; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.cface .prompt { padding: 4px 0 0; }
.cflip { font: 800 14px var(--fj); color: var(--red); border: 2px dashed var(--red); border-radius: 12px; padding: 6px 14px; }
.cja { font: 900 22px/1.4 var(--fj); }
.card3.back { background: #fbfcfd; }
.card3.turn { transform: scaleX(.02) !important; transition: transform .12s ease-in !important; }
.chint { text-align: center; font: 700 12px var(--fj); color: var(--sub); padding: 8px 0 0; }
.cbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 10px 16px 16px; }
.cbtn { border: 0; border-radius: 18px; padding: 15px 0; font: 900 17px var(--fj); color: #fff; cursor: pointer; border-bottom: 5px solid rgba(0,0,0,.18); }
.cbtn.again { background: var(--sky); }
.cbtn.know { background: var(--ok); }
.cdone { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0 24px; text-align: center; }
.cdone b { font: 900 28px var(--fj); }
.cdone p { margin: 0; color: var(--sub); font-weight: 700; }
.cdone .go { max-width: 320px; }
.cdone .review { width: 100%; max-width: 320px; margin: 0; }
.cdone .review b { font-size: 15px; color: var(--red); }
.books { position: relative; }

/* ---- ホーム v2 (シンプル) ---- */
.home2x { padding-bottom: 28px; }
.h-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 6px; }
.hero { margin: 8px 16px 0; background: var(--card); border-radius: 28px; padding: 12px 16px 14px; box-shadow: 0 10px 30px rgba(30,40,60,.08); display: flex; flex-direction: column; gap: 10px; }
.hero-scene { margin: 0; height: 30dvh; min-height: 170px; border-radius: 20px; box-shadow: none; background: #fff; display: flex; }
.hero-scene canvas { width: 100%; height: 100%; object-fit: contain; }
.hero-t b { display: block; font: 900 22px var(--fj); }
.hero-t span { font: 700 13px var(--fj); color: var(--sub); }
.hero-p { display: flex; align-items: center; gap: 10px; }
.hero-p .deck-bar { flex: 1; }
.hero-p span { font: 800 13px var(--fe); color: var(--sub); white-space: nowrap; }
.hero .list-go { align-self: center; color: var(--sub); font-size: 13px; }
.shelf2 { margin: 22px 16px 0; }
.shelf2 h2 { font: 900 17px var(--fj); margin: 0 4px 10px; }
.shelf2 h2 span { font: 800 12px var(--fe); color: var(--sub); margin-left: 6px; }
.tiles2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ctile { border: 0; background: var(--card); border-radius: 20px; padding: 14px 14px 12px; text-align: left; display: flex; flex-direction: column; gap: 6px; cursor: pointer; box-shadow: var(--shadow); border-top: 6px solid hsl(var(--hue) 70% 62%); min-height: 150px; }
.ctile em { font: 900 12px var(--fe); font-style: normal; color: hsl(var(--hue) 60% 45%); letter-spacing: .06em; }
.ctile b { font: 900 16px/1.35 var(--fj); text-wrap: balance; }
.ctile span { font: 700 12px/1.45 var(--fj); color: var(--sub); flex: 1; }
.ctile .deck-bar { height: 6px; }
.ctile small { font: 800 11px var(--fe); color: var(--sub); }
.ctile.on { outline: 3px solid var(--red); outline-offset: -3px; }
.hfoot { margin: 18px 20px 0; font-size: 12px; color: var(--sub); text-align: center; }

/* ---- カード v2: スワイプ ---- */
.cardsc .cmeta { text-align: center; min-height: 22px; }
.ccombo { font: 900 14px var(--fe); color: var(--red); letter-spacing: .04em; }
.cstack { flex: 1 1 0; min-height: 0; position: relative; margin: 4px 16px 0; display: flex; }
.cstack::before, .cstack::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -8px; height: 40px; background: #fff; border-radius: 28px; box-shadow: 0 6px 16px rgba(30,40,60,.06); z-index: 0; }
.cstack::after { left: 28px; right: 28px; bottom: -16px; opacity: .7; }
.cardsc .card3 { margin: 0; flex: 1; position: relative; z-index: 1; touch-action: none; user-select: none; -webkit-user-select: none; }
.stamp { position: absolute; top: 18px; z-index: 3; font: 900 22px var(--fj); padding: 6px 14px; border-radius: 12px; border: 4px solid currentColor; opacity: 0; pointer-events: none; background: rgba(255,255,255,.9); }
.stamp.ok { left: 18px; color: var(--ok); transform: rotate(-12deg); }
.stamp.ng { right: 18px; color: var(--blue); transform: rotate(12deg); }
.cardsc .chint { display: flex; justify-content: space-between; align-items: center; padding: 22px 16px 16px; font: 700 12px var(--fj); color: var(--sub); }
.chint button { border: 0; background: none; font: 900 15px var(--fj); padding: 8px 4px; cursor: pointer; }
.hint-ng { color: var(--blue); } .hint-ok { color: var(--ok); }

/* ---- ホーム v3: 最新の回 + これまでの回 ---- */
.home3 { padding-bottom: 28px; }
.latest { margin: 8px 16px 0; width: calc(100% - 32px); border: 0; background: var(--card); border-radius: 28px; padding: 14px 16px 16px; box-shadow: 0 10px 30px rgba(30,40,60,.08); display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; }
.latest .badge { align-self: flex-start; font: 900 12px var(--fj); color: #fff; background: var(--red); border-radius: 99px; padding: 2px 12px; }
.latest .lscene { margin: 4px 0; height: 26dvh; min-height: 150px; border-radius: 18px; box-shadow: none; background: #fff; display: flex; }
.latest .lscene canvas { width: 100%; height: 100%; object-fit: contain; }
.latest > b { font: 900 22px var(--fj); }
.latest > small { font: 700 13px var(--fj); color: var(--sub); }
.lprog { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; }
.lprog .deck-bar { flex: 1; }
.lprog em { font: 800 13px var(--fe); font-style: normal; color: var(--sub); white-space: nowrap; }
.latest .lgo { display: block; text-align: center; }
.home3 h2.sec { margin: 24px 20px 8px; color: var(--ink); font-size: 17px; }
.home3 h2.sec span { font: 800 12px var(--fe); color: var(--sub); margin-left: 6px; }
.plist { margin: 0 16px; display: flex; flex-direction: column; gap: 8px; }
.prow { border: 0; background: var(--card); border-radius: 18px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; box-shadow: var(--shadow); }
.prow em { font: 900 13px var(--fe); font-style: normal; color: var(--sub); width: 28px; }
.prow span { flex: 1; display: flex; flex-direction: column; }
.prow b { font: 900 16px var(--fj); }
.prow small { font: 700 12px var(--fj); color: var(--sub); }
.prow .lock { font: 900 11px var(--fj); font-style: normal; color: #fff; background: var(--ink); border-radius: 8px; padding: 3px 8px; }
.prow .pk { font: 800 12px var(--fe); font-style: normal; color: var(--ok); }
.home3 .hfoot { margin: 16px 24px 0; font-size: 12px; color: var(--sub); text-align: center; text-wrap: pretty; }
.cardsc .clist { color: var(--sub); }
/* iPhone の触覚用: 押す部品いっぱいに重ねる透明なスイッチ (見えない・押せる) */
.hx { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; -webkit-appearance: switch; appearance: auto; opacity: 0; z-index: 4; cursor: inherit; }   /* 見た目はスイッチのまま透明に (appearance: none だと iPhone がスイッチと見なさず触覚が出ない) */
.hxp { position: relative; }

/* ---- YouTube の動画へのリンク ---- */
.ytlink { display: block; margin: 10px 16px 0; text-align: center; font: 800 13px var(--fj); color: var(--red); text-decoration: none; padding: 8px; }
.plist { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.prow { min-width: 0; }
.pyt { display: inline-flex; align-items: center; justify-content: center; width: 52px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); color: var(--red); font: 900 18px var(--fe); text-decoration: none; }
.cyt { position: relative; z-index: 5; display: inline-block; margin-top: 4px; font: 800 13px var(--fj); color: var(--red); text-decoration: none; border: 2px solid var(--red); border-radius: 99px; padding: 5px 14px; }
a.go, a.review { text-decoration: none; text-align: center; display: block; box-sizing: border-box; }
a.review { display: flex; }

/* ---- PC・タブレット: スマホの画面の形で真ん中に置く (縦に伸びないよう高さを決める) ---- */
@media (min-width: 600px) {
  html, body { background: #e6eaf0; }
  #app { width: 430px; max-width: 430px; height: min(calc(100dvh - 48px), 880px); min-height: 0; margin: 24px auto; border-radius: 36px; overflow-x: hidden; overflow-y: auto; background: var(--bg); box-shadow: 0 30px 80px rgba(30,40,60,.18); position: relative; display: block; }
  .screen { min-height: 100%; }
  .screen.lesson { height: 100%; min-height: 0; }
  .panel { max-width: 430px; border-radius: 24px; margin-bottom: 24px; }
}
.passbox { background: #f4f6f8; border-radius: 16px; padding: 10px 12px 2px; }
.passbox p { margin: 0 0 6px; }
.pass input { letter-spacing: .08em; }
.joinlink { align-self: center; color: var(--red); }
.panel .row.col { flex-direction: column; align-items: stretch; }
.toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); background: var(--ink); color: #fff; font: 800 14px var(--fj); padding: 10px 18px; border-radius: 99px; z-index: 60; box-shadow: 0 8px 24px rgba(0,0,0,.2); transition: opacity .5s, transform .5s; max-width: calc(100% - 32px); text-align: center; }
.toast.out { opacity: 0; transform: translate(-50%, -10px); }
.stillgo { margin: 10px 16px 0; width: calc(100% - 32px); border: 2px solid var(--blue); background: var(--card); color: var(--blue); border-radius: 16px; padding: 12px; font: 900 15px var(--fj); cursor: pointer; border-bottom-width: 4px; }
.prow .pk s { text-decoration: none; color: var(--blue); }
.ztop .hidebtn { padding: 6px 10px; }
.zempty { margin: 24px; color: var(--sub); text-align: center; font-size: 14px; }

/* ---- 完了画面 v2: 拍に乗って 1 つずつ出る ---- */
.cdone2 { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 20px 12px; text-align: center; }
.cnin { width: 180px; height: 150px; }
.clear { font: 900 44px var(--fj); color: var(--red); transform: scale(0); opacity: 0; letter-spacing: .04em; }
.clear.on { animation: stamp .42s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes stamp { 0% { transform: scale(2.4) rotate(-8deg); opacity: 0; } 60% { transform: scale(.92) rotate(-3deg); opacity: 1; } 100% { transform: scale(1) rotate(-3deg); opacity: 1; } }
.cstats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; width: 100%; max-width: 380px; }
.cst { background: var(--card); border-radius: 18px; padding: 12px 4px 10px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; opacity: 0; transform: translateY(14px) scale(.9); transition: opacity .2s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.cst.on { opacity: 1; transform: none; }
.cst b { font: 900 28px var(--fe); line-height: 1.1; }
.cst span { font: 800 11px var(--fj); color: var(--sub); }
.cst.s1 b { color: var(--ok); } .cst.s2 b { color: var(--red); }
.cring { width: 56px; height: 56px; transform: rotate(-90deg); }
.cring circle { fill: none; stroke-width: 12; }
.cring .bg { stroke: var(--line); } .cring .fg { stroke: var(--ok); stroke-linecap: round; }
.cst.s3 .cpct { position: absolute; top: 28px; font-size: 14px; color: var(--ink); }
.cstreak { font: 900 18px var(--fj); color: var(--red); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .35s cubic-bezier(.3,1.8,.5,1); }
.cstreak.on { opacity: 1; transform: none; }
.cbtn2 { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; pointer-events: none; }
.cbtn2.on { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .clear.on { animation: none; transform: rotate(-3deg); opacity: 1; } }
.joingo { background: var(--red); }
.ytgo2 { background: var(--card); color: var(--ink); border: 2px solid var(--line); border-bottom-width: 4px; }
.joinbox { margin: 18px 16px 0; background: var(--card); border-radius: 22px; padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; text-align: center; }
.joinbox b { font: 900 17px var(--fj); }
.joinbox span { font: 700 13px/1.6 var(--fj); color: var(--sub); text-wrap: pretty; }
.joinbox .passopen { color: var(--sub); }
.cbtn2 .joinlink { color: var(--red); font-size: 13px; }
.joinrow { text-decoration: none; color: var(--red); font-weight: 800; }
.pass .go { background: var(--card); color: var(--ink); border: 2px solid var(--line); border-bottom-width: 4px; }

/* ---- はじめての案内 ---- */
.intro { padding: 28px 20px 16px; gap: 14px; align-items: stretch; }
.intro .logo.big { font-size: 34px; text-align: center; }
.intro .logo.big small { font-size: 13px; margin-top: 8px; }
.intro .iscene { height: 30dvh; min-height: 170px; background: #fff; border-radius: 22px; box-shadow: var(--shadow); display: flex; }
.intro .iscene canvas { width: 100%; height: 100%; object-fit: contain; }
.intro .ilist { margin: 4px 0 0; padding: 0 0 0 2px; list-style: none; text-align: left; display: flex; flex-direction: column; gap: 10px; font: 700 15px/1.6 var(--fj); color: var(--ink); text-wrap: pretty; }
.intro .ilist li { padding-left: 22px; position: relative; }
.intro .ilist li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
.intro .ilist b { color: var(--red); }
.intro .foot { margin-top: auto; padding: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.small.center { text-align: center; font: 700 12px var(--fj); color: var(--sub); margin: 0; }
.panel .small.center { margin: -2px 0 2px; }
.home3 .hfoot.small { font-size: 12px; margin-top: 12px; }
.home3 .plink { color: var(--red); font-weight: 800; }

/* ---- ペルソナ FB (2026-10-06): お試し、今日の 5 枚、表示、SE、文字サイズ ---- */
.panel { max-height: 94dvh; overflow-y: auto; }
.clear { font-size: clamp(30px, 10vw, 44px); white-space: nowrap; }
.ztop > div { min-width: 0; }
.ztop small, .ztop b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ztop b { font-size: 16px; }
.ztop .hidebtn { padding: 6px 8px; font-size: 11px; white-space: nowrap; }
.ztop .close { white-space: nowrap; font-size: 15px; }
.why { font-size: 15px; color: #4b5563; }
.traps small { font-size: 12px; }
.traps span { font-size: 13px; color: #4b5563; }
html.big .prompt { font-size: 27px; } html.big .cja { font-size: 26px; } html.big .why { font-size: 17px; }
html.big .traps span { font-size: 15px; } html.big .traps small { font-size: 13px; } html.big .zrow .ja { font-size: 15px; } html.big .zrow .en { font-size: 18px; }
html.big .ex .exl, html.big .ex .exja, html.big .ex .to { font-size: 15px; }
.card3 .rev { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: var(--sky); color: #123; font: 900 12px var(--fj); border-radius: 99px; padding: 3px 12px; z-index: 3; display: none; }
.card3.again .rev { display: block; }
.latest .lgo small { display: block; font: 700 12px var(--fj); opacity: .9; margin-top: 2px; }
.lall { border: 0; background: none; color: var(--sub); font: 800 13px var(--fj); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; margin: 2px auto 0; }
.prow .lock.trial { background: var(--sky); color: #123; }
.ctomo { font: 800 13px var(--fj); color: var(--sub); opacity: 0; transition: opacity .3s; text-wrap: pretty; }
.ctomo.on { opacity: 1; }
.cbtn2 .joingo2 { text-decoration: none; display: block; width: 100%; text-align: center; }
.cbtn2 .memb2 { color: var(--sub); }
.gear.flat.clist { width: auto; padding: 0 6px; gap: 2px; }
.clist span { font: 800 11px var(--fj); }
.jlinks { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.small.center .link { font-size: 12px; }
.ex { display: flex; flex-direction: column; gap: 3px; align-items: center; margin-top: 4px; }
.ex .to { font: 800 11px var(--fj); border-radius: 99px; padding: 2px 10px; background: #eef1f4; color: #4b5563; }
.ex .to-f { background: #ffe3df; color: #9b2a21; } .ex .to-a { background: #dff3e6; color: #1f5d38; } .ex .to-p { background: #e3eefb; color: #1d4b8a; }
.ex .exl { font: 700 14px/1.4 var(--fe); color: var(--ink); }
.ex .exja { font: 700 12px var(--fj); color: var(--sub); }
.zdetail .ex.hid, .zdetail .why.hid, .zdetail .traps.hid { visibility: hidden; }
.panel > * { flex-shrink: 0; }
.pw-head b { font-size: clamp(20px, 6.2vw, 26px); }
.ztop b { font-size: 15px; }
.pw-head { position: relative; }
.pw-head .close-x { position: absolute; right: 0; top: -6px; font: 900 22px var(--fj); color: var(--sub); text-decoration: none; padding: 4px 8px; }
.joinbox .go { margin-top: 4px; }
.goal .glist { display: flex; flex-direction: column; gap: 8px; }
.gbtn { border: 2px solid var(--line); background: var(--card); border-radius: 18px; padding: 12px 16px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.gbtn b { font: 900 17px var(--fj); } .gbtn small { font: 700 12px var(--fj); color: var(--sub); }
.gbtn.on { border-color: var(--red); background: #fff4f2; }
.goal .logo.big { font-size: 26px; }
.prompt.ja { font: 900 24px/1.4 var(--fj); }
.gear.flat.mute { width: 34px; color: var(--ink); }
.gear.flat.mute.off { color: #c3c9d1; text-decoration: line-through; }
.zbtn { white-space: nowrap; }
html.big .zbtn { font-size: 14px; padding-left: 8px; padding-right: 8px; }
.cmeta { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 20px; min-height: 20px; }
.ctitle { font: 800 12px var(--fj); color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- ホーム 案 B (2026-10-06): 目的の切り替え + 回の棚 + 下に固定の今日の 5 枚 ---- */
.homeB { padding-bottom: 110px; }
.homeB .chips { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding: 4px 16px 6px; scrollbar-width: none; }
.homeB .chips::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 2px solid var(--line); background: var(--card); border-radius: 99px; padding: 5px 12px; font: 800 13px var(--fj); color: var(--ink); cursor: pointer; }
.chip.on { border-color: var(--red); color: var(--red); background: #fff4f2; }
.shelf { display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 0; }
.shelfc { border: 0; background: var(--card); border-radius: 22px; padding: 12px 14px 12px; box-shadow: var(--shadow); text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.shelfc .shd { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.shelfc .shd b { font: 900 17px var(--fj); min-width: 0; }
.shelfc .badge { flex: none; font: 900 11px var(--fj); color: #fff; background: var(--red); border-radius: 99px; padding: 2px 10px; }
.shelfc .badge.b { background: var(--sky); color: #123; } .shelfc .badge.k { background: var(--ink); }
.shelfc .shimg { width: 100%; height: 118px; object-fit: contain; border-radius: 14px; background: #fff; }
.shelfc .deck-bar { height: 8px; }
.shelfc small { font: 700 12px var(--fj); color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; padding: 8px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 70%, rgba(244,246,248,0)); z-index: 5; }
.hbar .go small { display: block; font: 700 12px var(--fj); opacity: .9; margin-top: 2px; }
@media (min-width: 600px) { .hbar { max-width: 430px; } }
.shelfc .shanim { display: flex; height: 150px; }
.shelfc .shanim canvas { width: 100%; height: 100%; object-fit: contain; }
.shelfc .shphr { display: block; text-align: center; min-height: 22px; }
.shelfc .shphr b { font: 800 16px var(--fe); } .shelfc .shphr b .s { color: var(--red); }
.shelfc .shphr em { font: 700 13px var(--fj); color: var(--sub); font-style: normal; margin-left: 4px; }
.shelfc .badge.lock { background: #eef1f4; color: #4b5563; }

/* ---- 広告の札 (2026-10-08) ---- */
.card3.adcard { background: #fbfcfd; }
.card3.adcard .scene { display: none; }
.card3.adcard .cface { flex: 1; justify-content: center; gap: 12px; padding: 18px; }
.adtag { font: 800 12px var(--fj); color: var(--sub); border: 1px solid var(--line); border-radius: 99px; padding: 2px 10px; align-self: center; }
.adslot { width: 100%; max-width: 336px; height: 280px; margin: 0 auto; }
.adhouse { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.adhouse b { font: 900 22px var(--fj); } .adhouse span { font: 700 14px var(--fj); color: var(--sub); }
.adhouse .go { display: block; width: auto; padding: 12px 22px; text-decoration: none; margin-top: 6px; }

/* ---- クリア画面の打点 (2026-10-08) ---- */
.cdone2 { position: relative; }
.cdone2.bump { animation: cbump .5s cubic-bezier(.3,1.8,.5,1); }
@keyframes cbump { 0% { transform: scale(1); } 25% { transform: scale(.965, 1.03); } 55% { transform: scale(1.015, .985); } 100% { transform: none; } }
.cburst { position: absolute; left: 50%; top: 30%; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; border: 6px solid var(--red); opacity: 0; pointer-events: none; }
.cburst.on { animation: cburst .7s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes cburst { 0% { transform: scale(.3); opacity: .55; } 100% { transform: scale(2.6); opacity: 0; border-width: 1px; } }
.cpile { position: relative; width: 64px; height: 44px; margin: -6px auto 2px; }
.cpile i { position: absolute; left: 0; top: 0; width: 64px; height: 42px; border-radius: 9px; background: #fff; border: 2px solid var(--line); box-shadow: 0 3px 8px rgba(30,40,60,.10); transform: translate(0, var(--y)) rotate(var(--r)); animation: cfly .28s cubic-bezier(.2,1.4,.4,1) both; }
.cpile i:last-child { border-color: var(--ok); }
@keyframes cfly { 0% { transform: translate(120px, 160px) rotate(40deg) scale(.6); opacity: 0; } 100% { transform: translate(0, var(--y)) rotate(var(--r)); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cdone2.bump, .cburst.on, .cpile i { animation: none; } }

/* ---- UI 改善 (2026-10-09): 連続日数、区切り、説明の重ね、ゆっくり ---- */
.hstreak { margin: 2px 16px 6px; background: var(--card); border-radius: 16px; padding: 8px 14px; box-shadow: var(--shadow); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.hstreak b { font: 900 16px var(--fj); color: var(--red); } .hstreak span { font: 700 12px var(--fj); color: var(--sub); } .hstreak em { font: 800 12px var(--fj); font-style: normal; color: var(--ok); margin-left: auto; }
.ckpt { position: fixed; inset: 0; background: rgba(244,246,248,.97); z-index: 20; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ckin { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ckin .clear.on { font-size: clamp(30px, 9vw, 40px); }
.cksub { margin: 0; font: 800 14px var(--fj); color: var(--sub); }
.ckad { width: 100%; background: #fbfcfd; border: 1px solid var(--line); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ckad .adslot { height: 250px; }
.ckin .ckgo { width: 100%; }
.coach { position: absolute; inset: 0; z-index: 6; background: rgba(36,39,44,.55); border-radius: 28px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font: 800 18px var(--fj); pointer-events: none; }
.coach b { color: #ffd166; } .coach .cl, .coach .cr { position: absolute; top: 46%; font: 900 15px var(--fj); background: rgba(0,0,0,.35); padding: 6px 10px; border-radius: 12px; }
.coach .cl { left: 10px; color: #9ed0ff; } .coach .cr { right: 10px; color: #9fe3b5; } .coach small { position: absolute; bottom: 18px; font: 700 12px var(--fj); opacity: .85; }
.prompt .slow { border: 1px solid var(--line); background: #fff; border-radius: 99px; font: 800 12px var(--fj); padding: 2px 10px; vertical-align: middle; margin-left: 6px; cursor: pointer; color: var(--ink); }
.a2hs { width: 100%; max-width: 380px; background: var(--card); border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; text-align: center; }
.a2hs b { font: 900 15px var(--fj); } .a2hs span { font: 700 12px var(--fj); color: var(--sub); text-wrap: pretty; }
.panel .row select { font: 700 14px var(--fj); border: 2px solid var(--line); border-radius: 10px; padding: 4px 8px; background: #fff; }
.coach { justify-content: flex-start; padding-top: 32%; }
.coach .cl, .coach .cr { top: 52%; }
.coach small { bottom: auto; top: 64%; }