:root { --ink:#263442; --muted:#62727c; --paper:#fffdfa; --line:#d8d4ca; --blue:#236d91; --blue-pale:#e8f4f8; --orange:#bf692f; --orange-pale:#fff1e5; --green:#33745b; --green-pale:#eaf5ee; --focus:#155f86; --shadow:0 16px 46px rgb(37 58 66 / .11); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:linear-gradient(145deg,#eef6f5 0%,#f6f2eb 100%); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif; line-height:1.55; }
button { font:inherit; }
button { cursor:pointer; }
.app-shell { width:min(100%, 1020px); margin:0 auto; padding:18px; }
.panel { background:var(--paper); border:1px solid var(--line); border-radius:26px; padding:clamp(18px,4vw,38px); box-shadow:var(--shadow); }
h1 { margin:0; font-size:clamp(1.7rem,6vw,2.5rem); line-height:1.25; }
h2 { margin:0 0 10px; font-size:clamp(1.2rem,4.5vw,1.65rem); }
p { margin:8px 0; }
.lead { font-size:1.06rem; }
.eyebrow { margin:0 0 7px; color:var(--green); font-size:.86rem; font-weight:900; letter-spacing:.08em; }
.setup-panel > .lead { max-width:680px; color:var(--muted); }
.practice-flow { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:24px 0; padding:0; list-style:none; }
.practice-flow li { display:flex; align-items:center; justify-content:center; gap:7px; min-height:48px; padding:8px; border:1px solid var(--line); border-radius:14px; background:#f7f6f2; color:#68777d; font-size:.9rem; font-weight:800; }
.practice-flow li span { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#e2e5e3; color:#506066; font-size:.78rem; }
.practice-flow .flow-done { color:var(--green); background:var(--green-pale); border-color:#a9ccb9; }
.practice-flow .flow-done span { color:white; background:var(--green); }
.practice-flow .flow-current { color:#155372; background:var(--blue-pale); border:2px solid #6ba6c0; }
.practice-flow .flow-current span { color:white; background:var(--blue); }
.setup-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin:26px 0; }
.choice-group { border:1px solid #dcd9d0; border-radius:15px; margin:0; padding:13px; background:#fbfaf7; }
.choice-group legend { font-weight:800; margin-bottom:7px; }
.choice-row { display:flex; flex-wrap:wrap; gap:9px; }
.choice { min-height:48px; padding:9px 15px; border:2px solid #aab7bb; border-radius:13px; background:white; font-weight:750; }
.choice[aria-pressed="true"] { border-color:var(--focus); background:var(--blue-pale); box-shadow:0 0 0 2px #125c8c; }
.primary, .secondary { min-height:50px; border:2px solid; border-radius:13px; padding:10px 18px; font-weight:800; }
.primary { color:white; background:var(--blue); border-color:var(--blue); width:100%; font-size:1.14rem; }
.secondary { color:var(--ink); background:white; border-color:#80939b; }
.primary:focus-visible, .secondary:focus-visible, .choice:focus-visible, .word-card:focus-visible, .slot:focus-visible { outline:4px solid #f0a13d; outline-offset:3px; }
.setup-note { margin:14px 0 0; color:var(--muted); font-size:.92rem; text-align:center; }
.task-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.badge { display:inline-block; padding:4px 9px; background:var(--blue-pale); color:#124e77; border:1px solid #88b7d0; border-radius:999px; font-weight:800; font-size:.9rem; }
.task-count { min-width:62px; padding:7px 10px; border:1px solid var(--line); border-radius:999px; background:#f7f6f2; text-align:center; }
.scene-card, .build-card { margin-top:20px; padding:18px; border:1px solid #d9d6cc; border-radius:20px; background:#fbfaf7; }
.section-heading, .speak-prompt { display:flex; align-items:center; gap:12px; margin-bottom:13px; }
.section-heading h2, .speak-prompt h2 { margin:0; }
.section-heading p, .speak-prompt p { margin:2px 0 0; color:var(--muted); }
.step-number { display:grid; flex:0 0 auto; place-items:center; width:38px; height:38px; border-radius:12px; color:white; background:var(--blue); font-weight:900; font-size:1.12rem; box-shadow:0 5px 12px rgb(35 109 145 / .22); }
.scene-frame { position:relative; overflow:hidden; border:1px solid #cfc9bc; border-radius:18px; background:#f2eee6; box-shadow:0 8px 24px rgb(44 57 60 / .11); }
.scene-image { display:block; width:100%; aspect-ratio:3/2; object-fit:contain; background:#f2eee6; }
.scene-frame-text { display:flex; align-items:center; justify-content:center; min-height:168px; padding:26px 22px 42px; background:#fbf7ef; }
.scene-text { margin:0; color:#2c3f46; font-size:1.16rem; font-weight:800; line-height:1.8; text-align:center; }
.scene-cue { position:absolute; right:12px; bottom:12px; padding:5px 9px; border-radius:999px; background:rgb(255 253 250 / .9); color:#56666d; font-size:.78rem; font-weight:800; box-shadow:0 2px 8px rgb(38 52 66 / .12); }
.instruction { margin:15px 0 10px; font-size:1.05rem; font-weight:700; }
.expand-instruction { padding:14px 16px; border-left:5px solid var(--orange); border-radius:12px; background:var(--orange-pale); }
.expand-instruction > span { color:#8a4b20; font-size:.8rem; font-weight:900; }
.expand-instruction p { margin:8px 0 0; }
.roles { display:flex; flex-wrap:wrap; gap:7px; margin:9px 0; }
.role-chip { border:1px solid #9db9a6; border-radius:999px; background:var(--green-pale); padding:4px 9px; font-size:.91rem; font-weight:700; }
.building { margin:0 0 18px; padding:14px; border:2px dashed #91a5a9; border-radius:16px; background:#f8fbfb; }
.fixed-word-row { display:flex; flex-wrap:wrap; gap:9px; align-items:end; }
.fixed-word { flex:1 1 100px; min-width:100px; padding:8px; border-radius:12px; background:#e9edf0; border:1px solid #aebbc1; text-align:center; font-weight:800; }
.slot-row { display:flex; flex-wrap:wrap; gap:9px; }
.slot { flex:1 1 105px; min-height:61px; padding:7px; border:2px dashed #7c9298; border-radius:13px; background:white; color:#4a626a; font-weight:750; text-align:center; }
.slot.filled { border-style:solid; background:var(--blue-pale); color:#17394a; }
.slot.locked { border-color:var(--green); background:var(--green-pale); }
/* 指の操作でだけ起きること: 文字を長押しすると iOS が選択やコピーのメニューを出し、
   その時点で pointercancel が飛んでドラッグが死ぬ。枠もカードも文字を持つので両方で止める。 */
.slot, .word-card { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.slot.filled:not(.locked) { touch-action:none; }
.slot.error-slot { border:4px solid #b14a2b; background:#fff1e9; }
.slot-label { display:block; font-size:.78rem; }
.slot-feedback { display:block; margin-top:2px; color:#8c321f; font-size:.78rem; font-weight:900; }
.choice-title { margin:0 0 7px; font-weight:800; }
.card-return-zone { margin:0 -7px; padding:3px 7px 7px; border:3px dashed transparent; border-radius:15px; }
.card-return-zone.drop-active { border-color:#4e7d91; background:#e8f5fb; }
.card-bank { display:flex; flex-wrap:wrap; gap:9px; min-height:62px; align-content:flex-start; }
.bank-empty { margin:0; padding:14px 4px; color:#4a626a; font-weight:750; }
.word-card { min-height:54px; padding:9px 14px; border:2px solid #4e7d91; border-radius:13px; background:white; color:#1f3d4a; font-weight:850; box-shadow:0 3px 8px rgb(42 63 70 / .07); touch-action:none; }
.word-card.kind-phrase { border-color:#4b8068; background:#f2faf5; }
.word-card.kind-particle { border-color:#c07842; background:#fff7ee; color:#76421f; }
.word-card.kind-word { border-color:#4e7d91; background:#f4faff; }
/* 共通テーマの body.linest-themed button { touch-action:manipulation } は詳細度0-1-2で、
   .word-card（0-1-0）の touch-action:none を打ち消してしまう。指でカードを滑らせると
   ブラウザがスクロールと判定し pointercancel でドラッグが中断されるため、同じ詳細度で戻す。
   共通テーマ側は他アプリのダブルタップズーム抑止に必要なので触らない。 */
body.linest-themed .word-card { touch-action:none; -webkit-touch-callout:none; }
.word-card.selected { border-width:4px; border-color:#174c70; background:#dff2ff; }
.word-card.hint-focus { border-width:4px; border-color:#a76a0d; background:#fff6cf; }
.word-card.reduced { display:none; }
.selection-note { min-height:27px; margin-top:8px; font-size:.94rem; font-weight:700; }
.controls { display:flex; flex-wrap:wrap; gap:9px; margin-top:21px; }
.controls > button { flex:1 1 130px; }
.status-box, .answer-box { margin-top:14px; padding:11px 13px; border-radius:12px; font-weight:700; }
.status-box { border:2px solid #889da4; background:#f3f6f6; }
.answer-box { border:2px solid var(--green); background:var(--green-pale); font-size:1.12rem; }
.sentence-blocks { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin:7px 0; }
.sentence-blocks span { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:8px 13px; border:2px solid #4d806a; border-radius:12px; background:white; color:#234b3c; font-weight:900; box-shadow:0 3px 8px rgb(44 77 62 / .08); }
.sentence-blocks.compact { justify-content:flex-start; }
.sentence-blocks.compact span { min-height:38px; padding:5px 9px; font-size:.96rem; }
.final-answer { padding:18px; }
.final-answer .sentence-blocks span { min-height:58px; padding:10px 16px; font-size:clamp(1.05rem,4vw,1.3rem); }
.result-mark { font-size:2rem; font-weight:900; color:var(--green); }
.result-actions { display:grid; gap:10px; margin-top:21px; }
.speak-prompt { margin-top:22px; padding:14px; border-radius:16px; background:#f7f6f2; }
.result-panel .practice-flow { margin-top:0; }
.adult { --blue:#355f7c; --blue-pale:#edf2f7; --green:#456c5f; --green-pale:#eef4f1; }
.adult .panel { border-color:#b7c7d4; }
.adult .choice[aria-pressed="true"] { background:#e7eefb; }
@media (max-width: 650px) { .setup-grid { grid-template-columns:1fr; } .practice-flow li { flex-direction:column; gap:3px; font-size:.78rem; } }
@media (max-width: 390px) { .app-shell { padding:9px; } .panel { padding:15px; border-radius:17px; } .task-header { display:block; } .task-count { display:inline-block; margin-top:9px; } .badge { margin-top:7px; } .scene-card, .build-card { padding:11px; border-radius:16px; } .section-heading { align-items:flex-start; } .scene-cue { right:7px; bottom:7px; } .word-card { flex:1 1 auto; } .controls > button { flex-basis:100%; } .sentence-blocks { gap:6px; } }