@charset "UTF-8";
:root {
  --ink:#213b43; --muted:#596d61; --paper:#fbf8ee; --cream:#f1eddf;
  --line:#d5ddcc; --teal:#317d76; --gold:#ac8043;
  --serif:"Yu Mincho","Hiragino Mincho ProN",serif;
  --sans:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--cream); color:var(--ink); font:500 15px/1.8 var(--sans); }
button,input { font:inherit; }
button { color:inherit; cursor:pointer; border:0; transition:background .15s; }
button:disabled { opacity:.45; cursor:default; }
button:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:var(--serif); }
h1:focus,h2:focus { outline:none; }
.shell { max-width:1200px; margin:auto; padding:0 36px 28px; }
.topbar { height:64px; display:flex; align-items:center; justify-content:space-between; }
.text-button { background:transparent; padding:8px 12px; min-height:44px; border-radius:6px; font-size:13px; }
.text-button:hover { background:#e2e8d8; }
.primary,.secondary { min-height:52px; padding:13px 20px; border-radius:7px; font-weight:700; }
.primary { background:var(--teal); color:#fff9e9; border:1px solid var(--teal); }
.primary:hover { background:#236860; }
.secondary { background:var(--paper); border:1px solid var(--line); }
.secondary:not(:disabled):hover { background:#e9eedf; }
.title-screen { display:grid; grid-template-columns:1fr 1.1fr; gap:36px; align-items:center; min-height:660px; }
.game-title { font-size:41px; line-height:1.6; letter-spacing:.04em; white-space:nowrap; margin:0 0 36px; }
.title-number { color:var(--teal); font:98px/1 Georgia,serif; letter-spacing:-.04em; }
.title-after { font-size:32px; margin-left:6px; }
.hero-word { position:relative; z-index:0; }
.hero-word::after { content:""; position:absolute; left:0; right:0; height:9px; bottom:1px; z-index:-1; background:#e6c58a; }
.title-buttons { display:grid; gap:12px; max-width:320px; }
.title-links { margin:12px 0; }
.version { font-size:12px; color:var(--muted); margin:12px 0 0; }
.title-art { position:relative; height:520px; overflow:hidden; border-radius:170px 170px 12px 12px; border:7px solid var(--paper); outline:1px solid var(--line); box-shadow:0 14px 35px #2c554410; }
.title-art .landscape { position:absolute; inset:0; }
.landscape { width:100%; height:100%; display:block; }
.character { width:100%; height:100%; display:block; overflow:visible; }
.title-hero { position:absolute; left:23%; bottom:40px; width:175px; height:227px; transform:rotate(-5deg); animation:bob 4s infinite; }
.title-mage { position:absolute; left:4%; bottom:57px; width:136px; height:176px; transform:rotate(-7deg); }
.title-demon { position:absolute; right:9%; bottom:174px; width:130px; height:174px; transform:rotate(5deg); }
.title-slime { position:absolute; right:8%; bottom:20px; width:122px; height:155px; }
.quest-heading { margin:12px 0 22px; }
.quest-heading h1 { margin:0; font-size:25px; letter-spacing:.03em; }
.quest-heading b { font:38px Georgia,serif; color:var(--teal); }
.game-layout { display:grid; grid-template-columns:.9fr 1.2fr; align-items:start; gap:25px; }
.stage { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--paper); }
.stage-location { padding:8px 15px; font-size:13px; }
.stage-art { height:270px; position:relative; overflow:hidden; }
.stage-art .landscape { position:absolute; inset:0; }
.stage-player { position:absolute; left:20%; bottom:17px; width:111px; height:147px; z-index:3; animation:bob 4s infinite; }
.stage-enemy { position:absolute; right:12%; bottom:19px; width:120px; height:156px; z-index:3; animation:bob 4s .7s infinite; }
.stage-companion { position:absolute; width:69px; height:91px; bottom:30px; z-index:2; }
.companion-0 { left:3%; }.companion-1 { left:35%; }.companion-2 { left:46%; }
.companion-3 { left:13%; bottom:47px; }
.enemy-status { position:absolute; top:37px; right:11%; border-radius:6px; background:#fcf8e5e0; padding:5px 10px; text-align:center; font-size:12px; z-index:5; }
.enemy-dots { display:flex; justify-content:center; gap:4px; margin:5px 0 2px; }
.enemy-dots i { width:12px; height:4px; border-radius:2px; background:#d2c8b7; }
.enemy-dots .filled { background:#b77960; }
.final-stage .stage-location { background:#273d45; color:#f0ead7; }
.player-status { display:flex; align-items:center; gap:13px; padding:10px 15px; font-size:13px; }
.player-status>span { white-space:nowrap; }
.player-status strong { font:22px Georgia,serif; }
.hp-track { height:7px; flex:1; min-width:20px; background:#e3e8d6; border-radius:8px; overflow:hidden; }
.hp-track i { display:block; height:100%; background:#78a891; transition:width .2s; }
.hp-track .low { background:#b76d5b; }
.buff { color:#7e5b2e; font-size:12px; }
.helpers { margin-top:12px; border:1px solid var(--line); background:var(--paper); border-radius:8px; }
.support-heading { margin:0; padding:10px 15px; font-size:14px; font-weight:400; }
summary { min-height:48px; padding:10px 15px; cursor:pointer; font-size:14px; }
.support-content { padding:0 12px 12px; }
.party-grid { display:grid; gap:8px; margin-bottom:10px; }
.party-button { display:flex; align-items:center; text-align:left; gap:10px; min-height:66px; padding:6px 10px; background:#edf1e4; border:1px solid var(--line); border-radius:6px; }
.party-button:hover:not(:disabled) { background:#dfe9d8; }
.party-avatar { width:37px; height:50px; overflow:hidden; flex-shrink:0; }
.party-button b { display:block; font-size:13px; }
.party-button small { display:block; font-size:12px; color:var(--muted); }
.party-button>span { margin-left:auto; font:20px Georgia,serif; color:#866437; }
.item-row { display:grid; gap:8px; }
.item-button { display:flex; justify-content:space-between; gap:12px; align-items:center; text-align:left; min-height:48px; padding:9px 12px; background:#edf1e4; border:1px solid var(--line); border-radius:6px; font-size:13px; }
.item-button:hover:not(:disabled) { background:#dfe9d8; }
.item-button>span { white-space:nowrap; }
.item-button b { color:var(--teal); }
.item-button small { color:var(--muted); font-size:12px; }
.support-note { font-size:12px; color:var(--muted); margin:12px 0 0; }
.question-card { padding:28px; background:var(--paper); border:1px solid var(--line); border-radius:10px; min-height:420px; display:flex; flex-direction:column; }
.category { display:table; align-self:start; margin-bottom:17px; font-size:12px; color:#40664f; background:#e7eddd; padding:2px 9px; border-radius:4px; }
.question-meta { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.answer-timer { color:var(--teal); font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.answer-timer.urgent { color:#a03d32; }
.question { font:700 23px/1.8 var(--sans); margin:0 0 25px; overflow-wrap:anywhere; }
.question-frame { position:relative; padding:15px 17px; margin-bottom:25px; }
.question-frame .question { margin:0; }
.question-fuse { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.question-fuse rect { width:calc(100% - 4px); height:calc(100% - 4px); fill:none; stroke-width:3; }
.fuse-track { stroke:var(--line); }
.fuse-progress { stroke:var(--teal); stroke-dasharray:100 100; stroke-dashoffset:var(--fuse-offset); }
.question-frame.urgent .fuse-progress { stroke:#a03d32; }
.choices,.reflection-options { display:grid; gap:10px; }
.choice { display:flex; align-items:center; gap:12px; text-align:left; background:#fffdf7; border:1px solid #cdd7c6; border-radius:7px; padding:12px 14px; min-height:57px; font-size:16px; line-height:1.6; overflow-wrap:anywhere; }
.choice:not(:disabled):hover { border-color:#4b9182; background:#edf2e3; box-shadow:0 0 0 1px #4b9182; }
.choice-key { display:grid; place-items:center; width:26px; height:26px; flex-shrink:0; font:14px Georgia,serif; border-radius:4px; color:#496951; background:#edf0e5; }
.choice.eliminated { border-style:dashed; background:#eeefe5; }
.story-card h2,.gameover-card h2 { margin:0 0 23px; font-size:27px; line-height:1.7; }
.speaker { color:var(--teal); font-size:13px; margin-bottom:12px; }
.dialogue { font:19px/2 var(--serif); white-space:pre-line; overflow-wrap:anywhere; margin-bottom:24px; }
.next { width:100%; margin-top:auto; }
.feedback-card h2 { font-size:27px; margin-bottom:22px; color:var(--teal); }
.feedback-card.incorrect h2 { color:#975349; }
.answer-text { font-size:22px; font-weight:700; overflow-wrap:anywhere; margin-bottom:19px; }
.explanation { font-size:16px; line-height:1.9; overflow-wrap:anywhere; margin-bottom:30px; }
.hint-panel { color:#6c4e24; padding:12px; border-radius:5px; background:#f3e7c9; font-size:14px; margin-bottom:20px; }
.reflection-card { background:#263b44; color:#f1ebd6; border-color:#61756f; }
.reflection-card .category { background:#465c57; color:#f4dfae; }
.reflection-card h2 { font-size:31px; line-height:1.8; margin:4px 0 18px; }
.reflection-card .muted { color:#c1d1c3; }
.reflection-options .choice { background:#344b51; color:#f4edd8; border-color:#71857b; }
.reflection-options .choice:hover { background:#45635e; }
.ending-card { background:#f8f2df; }
.gameover-card>p:first-of-type { font-size:15px; }
.save-warning { font-size:13px; color:#975349; margin-top:20px; }
.combat-number { position:absolute; top:95px; right:17%; font:700 23px Georgia,serif; z-index:5; animation:float-up .65s; pointer-events:none; }
.combat-number.positive { color:#fff0a5; text-shadow:1px 2px #38524b; }
.combat-number.negative { left:17%; right:auto; color:#9b4535; text-shadow:0 1px #fff9; }
.attack .stage-player { animation:slash .5s; }.hurt .stage-player { animation:shake .4s; }.attack .stage-enemy { animation:shake .4s .15s; }
.muted { font-size:13px; line-height:1.9; color:var(--muted); }
.result-screen { max-width:760px; margin:20px auto 0; }
.result-banner { display:flex; gap:20px; align-items:center; background:#e3e9d8; border:1px solid #cad9bf; padding:20px; border-radius:10px; }
.result-portrait { width:85px; height:113px; flex-shrink:0; }
.result-banner h1 { font-size:27px; margin:0 0 12px; }
.result-title { font-size:17px; color:var(--teal); margin:0; }
.result-rate { margin-left:auto; font:42px Georgia,serif; color:var(--teal); white-space:nowrap; }
.result-rate small { font-size:16px; }
.result-numbers { display:grid; grid-template-columns:repeat(3,1fr); margin:22px 0; text-align:center; }
.result-numbers>div { padding:10px 5px; border-right:1px solid var(--line); }
.result-numbers>div:last-child { border:0; }
.result-numbers span { display:block; font-size:13px; color:var(--muted); }
.result-numbers b { display:block; font:23px Georgia,var(--serif); margin-top:6px; }
.reflection-result { background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:20px; }
.reflection-result h2 { font-size:23px; margin:0; }
.result-details { margin:14px 0; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
.result-details>p { margin:15px; font-size:13px; }
.stats-bars { padding:4px 15px; }
.stat-row { display:grid; grid-template-columns:100px 1fr 83px; gap:10px; align-items:center; padding:8px 0; font-size:13px; }
.stat-row b { font-size:13px; text-align:right; }
.stat-row small { font-size:11px; font-weight:400; color:var(--muted); }
.stat-track { height:7px; background:#e3e8da; border-radius:6px; overflow:hidden; }
.stat-track i { display:block; height:100%; background:#719a82; }
.result-buttons { display:grid; gap:12px; margin-top:22px; }
dialog { width:min(590px,92vw); max-height:85vh; padding:26px; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:12px; box-shadow:0 20px 80px #152e4430; }
dialog::backdrop { background:#1d383c88; backdrop-filter:blur(3px); }
dialog h2 { font-size:24px; margin-bottom:22px; }
dialog p,dialog li { font-size:14px; line-height:1.9; }
dialog form { margin-top:22px; text-align:right; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:15px; font-size:14px; min-height:48px; margin:8px 0; }
.setting-row input[type=range] { width:160px; accent-color:var(--teal); }
.setting-row input[type=checkbox] { width:22px; height:22px; accent-color:var(--teal); }
.save-settings { border-top:1px solid var(--line); margin:15px 0; }
.save-settings summary { padding-left:0; }
.import-label { display:block; margin-top:17px; font-size:14px; }
.import-label input { display:block; max-width:100%; margin:8px 0; font-size:13px; }
.settings-links { display:flex; gap:12px; }
.review-question { border-top:1px solid var(--line); padding-top:17px; margin-top:18px; }
.review-question h3 { font-size:16px; margin:8px 0; }.review-question small { color:var(--teal); }
#toast { position:fixed; z-index:20; bottom:23px; left:50%; transform:translateX(-50%); max-width:calc(100vw - 30px); width:max-content; background:#273f42; color:#fff9e8; padding:12px 17px; border-radius:7px; font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s; }
#toast.show { opacity:1; }
@keyframes bob { 0%,100% {translate:0 0} 50% {translate:0 -4px} }
@keyframes slash { 0%,100% {translate:0 0} 40% {translate:30px -4px;rotate:7deg} }
@keyframes shake { 0%,100% {translate:0} 25% {translate:-6px} 50% {translate:6px} 75% {translate:-4px} }
@keyframes float-up { 0% {translate:0 15px;opacity:0} 100% {translate:0 0;opacity:1} }
.reduce-motion * { animation:none!important; transition:none!important; }
@media(prefers-reduced-motion:reduce) { * {animation:none!important;transition:none!important} }
@media(max-width:1000px) {
  .shell {padding:0 24px 24px}.game-title {font-size:34px}.title-number {font-size:84px}.title-after {font-size:27px}
  .title-art {height:470px}.title-hero {width:144px}.title-mage {width:110px}.title-demon {width:108px}.title-slime {width:100px}
  .game-layout {gap:18px}.stage-art {height:245px}.stage-player {left:16%;width:100px;height:130px}.stage-enemy {right:10%;width:108px;height:140px}
  .question-card {padding:24px}.question {font-size:21px}
}
@media(max-width:760px) {
  .shell {padding:0 16px 20px}.topbar {height:48px}.title-screen {grid-template-columns:1fr;gap:25px;min-height:0;padding:18px 0 0}
  .title-copy {text-align:center}.game-title {font-size:34px;margin-bottom:24px}.title-number {font-size:82px}.title-after {font-size:27px}
  .title-buttons {margin:auto;max-width:350px}.title-links {margin:8px 0}.version {margin:0}
  .title-art {height:295px;max-width:440px;width:100%;margin:auto;border-width:5px;border-radius:110px 110px 10px 10px}
  .title-hero {left:24%;bottom:10px;width:123px;height:160px}.title-mage {left:5%;bottom:26px;width:98px;height:125px}
  .title-demon {right:11%;bottom:89px;width:94px;height:122px}.title-slime {right:7%;bottom:0;width:85px;height:105px}
  .quest-heading {margin:6px 0 14px}.quest-heading h1 {font-size:21px}.quest-heading b {font-size:31px}
  .game-layout {grid-template-columns:1fr;gap:12px}.adventure-column {display:contents}.stage {order:1}.question-card {order:2}.helpers {order:3;margin:0}
  .stage-art {height:125px}.stage-location {padding:5px 12px;font-size:12px}.stage-player {left:24%;width:69px;height:92px;bottom:6px}
  .stage-enemy {right:19%;width:76px;height:100px;bottom:6px}.stage-companion {width:43px;height:56px;bottom:13px}
  .enemy-status {top:9px;right:15%;font-size:11px;padding:3px 8px}.enemy-dots i {width:9px}.player-status {padding:7px 12px;font-size:12px}.player-status strong {font-size:20px}
  .question-card {min-height:0;padding:21px}.category {margin-bottom:12px}.question {font-size:20px;line-height:1.7;margin-bottom:19px}
  .question-frame {padding:12px 14px;margin-bottom:19px}
  .choice {font-size:16px;min-height:49px;padding:9px 12px}.choices {gap:8px}.story-card h2 {font-size:23px;margin-bottom:16px}
  .dialogue {font-size:18px}.next {margin-top:15px}.feedback-card h2 {font-size:24px}.answer-text {font-size:21px;margin-bottom:14px}.explanation {margin-bottom:10px}
  .reflection-card h2 {font-size:29px}.combat-number {top:53px;font-size:20px}.result-screen {margin:12px auto 0}
  .result-banner {gap:12px;padding:14px}.result-portrait {width:61px;height:83px}.result-banner h1 {font-size:22px;margin-bottom:7px}.result-title {font-size:14px}.result-rate {font-size:31px}
  .result-numbers b {font-size:20px}.result-numbers span {font-size:12px}.reflection-result h2 {font-size:21px}.stat-row {grid-template-columns:95px 1fr 78px;gap:6px;font-size:12px}
  dialog {padding:22px}.setting-row input[type=range] {width:135px}
}
@media(max-width:360px) {
  .shell {padding:0 12px 18px}.game-title {font-size:30px}.title-number {font-size:75px}.quest-heading h1 {font-size:19px}.quest-heading b {font-size:29px}
  .question-card {padding:18px}.question {font-size:19px}.result-banner {gap:8px}.result-portrait {width:47px;height:64px}.result-rate {font-size:27px}
  .result-banner h1 {font-size:20px}.result-title {font-size:13px}.item-button {display:block}.item-button small {display:block;margin-top:3px}
}
@media(min-width:761px) and (max-height:500px) {
  .topbar {height:44px}.quest-heading {margin:4px 0 12px}.quest-heading h1 {font-size:21px}.quest-heading b {font-size:29px}
  .stage-art {height:175px}.stage-player,.stage-enemy {height:108px;width:83px}.enemy-status {top:19px}
  .question-card {min-height:0;padding:20px}.question {font-size:18px;margin-bottom:16px}.choice {min-height:44px;padding:7px 12px}.choices {gap:8px}
}