*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#f4efe6;color:#2b2622;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-size:16px;line-height:1.8;overflow-x:hidden;-webkit-text-size-adjust:100%}
#app{max-width:480px;margin:0 auto;padding:0 16px 40px}
#bar{position:sticky;top:0;background:#2b2622;color:#f4efe6;margin:0 -16px 16px;padding:8px 16px;font-family:system-ui,sans-serif;font-size:12px;line-height:1.5;display:flex;flex-wrap:wrap;gap:2px 12px;z-index:2}
#bar span{white-space:nowrap}
#bar .lost{opacity:.3}
h1{font-size:19px;margin:8px 0 12px;line-height:1.5}
#body p{margin:0 0 12px;overflow-wrap:anywhere}
#body .note{font-family:system-ui,sans-serif;font-size:13px;color:#7a6a58;border-left:3px solid #c9b99f;padding-left:8px}
#body .big{font-size:18px;font-weight:bold}
#body table{width:100%;border-collapse:collapse;font-family:system-ui,sans-serif;font-size:14px;margin:0 0 12px}
#body td{border-bottom:1px solid #d8ccb8;padding:6px 2px}
#body td:last-child{text-align:right;white-space:nowrap;font-weight:bold}
#opts{margin-top:16px;display:flex;flex-direction:column;gap:8px}
button{display:block;width:100%;text-align:left;font:inherit;font-family:system-ui,sans-serif;font-size:15px;line-height:1.45;padding:11px 12px;border:1px solid #2b2622;border-radius:6px;background:#fffdf8;color:#2b2622;cursor:pointer;overflow-wrap:anywhere}
button:active{background:#e9dfcd}
button .sub{display:block;font-size:12px;color:#7a6a58;margin-top:2px}
button.card{border-left:6px solid #8a5a2b}
button.plain{background:#2b2622;color:#f4efe6}
button.plain .sub{color:#c9b99f}
button:disabled{opacity:.55;cursor:not-allowed;background:#e4dccd;border-style:dashed}
button:disabled .sub{color:#8a2b2b;opacity:1}
/* 増減の演出 */
#body .note.dmg{color:#a3261e;border-left-color:#a3261e;font-weight:bold}
#body .note.heal{color:#2f7d4a;border-left-color:#2f7d4a;font-weight:bold}
#bar .gone{display:inline-block;animation:gone .9s forwards}
#bar .back{display:inline-block;animation:back .9s}
@keyframes gone{0%{opacity:1;color:#ff6b5e;transform:scale(1.9)}60%{opacity:1;color:#ff6b5e;transform:scale(1)}100%{opacity:.3;transform:scale(1)}}
@keyframes back{0%{color:#8fe39a;transform:scale(1.9)}60%{color:#8fe39a;transform:scale(1)}100%{transform:scale(1)}}
#flash{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:4;opacity:0}
#flash.dmg{background:#b3261e;animation:flash .55s}
#flash.heal{background:#3d9a5b;animation:flash .8s}
@keyframes flash{0%{opacity:.3}100%{opacity:0}}
#app.shake{animation:shake .38s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.pop{position:fixed;top:52px;left:50%;transform:translateX(-50%);z-index:5;pointer-events:none;font-family:system-ui,sans-serif;font-size:17px;font-weight:bold;line-height:1.5;text-align:center;white-space:nowrap;padding:8px 16px;border-radius:8px;background:#2b2622;color:#f4efe6;box-shadow:0 4px 14px rgba(0,0,0,.3);animation:pop 1.6s forwards}
.pop .dmg{color:#ff8a7e}
.pop .heal{color:#8fe39a}
.pop .cost{color:#f0c66b}
@keyframes pop{0%{opacity:0;margin-top:14px}12%{opacity:1;margin-top:0}75%{opacity:1;margin-top:0}100%{opacity:0;margin-top:-10px}}
/* 結果 */
#body .score{text-align:center;font-family:system-ui,sans-serif;background:#2b2622;color:#f4efe6;border-radius:10px;padding:14px 12px 12px;margin:4px 0 14px}
#body .score .lab{font-size:12px;color:#c9b99f}
#body .score .num{font-size:56px;font-weight:bold;line-height:1.15}
#body .score .num small{font-size:16px;font-weight:normal;color:#c9b99f}
#body .score .type{font-size:17px;font-weight:bold;margin-top:2px}
#body .score .tnote{font-size:13px;color:#c9b99f;margin-top:2px}
#body td.plus{color:#2f7d4a}
#body td.minus{color:#a3261e}
/* 結果を X へ（2026-11-14・企画開発課の提案） */
#body .share{margin:0 0 14px;font-family:'Helvetica Neue',Arial,sans-serif}
#body .share pre{margin:0 0 8px;padding:10px 12px;font-family:inherit;font-size:13px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;color:#555;background:#f5f7fa;border:1px dashed #c3cfe2;border-radius:10px}
#body .share .row{display:flex;gap:8px}
#body .share .row a,#body .share .row button{flex:1;width:auto;display:block;text-align:center;font-family:inherit;font-size:14px;font-weight:bold;line-height:1.4;padding:12px 10px;border-radius:12px;text-decoration:none;cursor:pointer;animation:none}
#body .share .row a{background:#000;color:#fff;border:2px solid #000;box-shadow:0 4px 12px rgba(0,0,0,.18)}
#body .share .row a:active{transform:translateY(1px)}
#body .share .row button{box-shadow:none}
#body h2{font-family:system-ui,sans-serif;font-size:13px;color:#7a6a58;margin:18px 0 6px;font-weight:bold}
#body .essay{background:#fffdf8;border:1px solid #d8ccb8;border-radius:8px;padding:12px 12px 2px;margin:0 0 14px}
/* 舞台（背景挿絵）と場面の切り替え */
body{background:#1d1916}
#app{background:#f4efe6;min-height:100vh}
#bar{margin-bottom:0}
#stage{position:relative;margin:0 -16px;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(160deg,#6b5a48,#2b2622)}
#stage img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
#stage img.on{opacity:1;animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{0%{transform:scale(1)}100%{transform:scale(1.07) translateY(-1.5%)}}
#shade{position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(to bottom,rgba(29,25,22,0),rgba(29,25,22,.82))}
#stage h1{position:absolute;left:16px;right:16px;bottom:10px;margin:0;color:#fffdf8;font-size:19px;line-height:1.4;text-shadow:0 1px 6px rgba(0,0,0,.7)}
#win{position:relative;margin:-6px -6px 0;padding:14px 12px 4px;background:#fffdf8;border:2px solid #2b2622;border-radius:10px;box-shadow:0 3px 0 #c9b99f}
#body>*, #opts>button{animation:rise .42s ease both}
@keyframes rise{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
#opts.lock{pointer-events:none}
#curtain{position:fixed;top:0;left:0;right:0;bottom:0;z-index:8;background:#1d1916;opacity:0;pointer-events:none;transition:opacity .24s ease;display:flex;align-items:center;justify-content:center}
#curtain.on{opacity:1;pointer-events:auto}
#curtain.out{transition:opacity .45s ease}
#ctitle{color:#f4efe6;font-size:22px;letter-spacing:.12em;text-align:center;padding:0 24px;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease}
#ctitle.on{opacity:1;transform:translateY(0)}
#ctitle:after{content:"";display:block;width:0;height:1px;background:#c9b99f;margin:10px auto 0;transition:width .5s ease .1s}
#ctitle.on:after{width:120px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* 物語を選ぶ画面へ戻る札 */
#home{position:absolute;top:8px;right:10px;font-family:system-ui,sans-serif;font-size:11px;color:#f4efe6;background:rgba(29,25,22,.55);border:1px solid rgba(244,239,230,.5);border-radius:12px;padding:2px 10px;text-decoration:none}

/* 進み具合の棒 */
#prog{flex:0 0 100%;height:5px;border-radius:3px;background:rgba(244,239,230,.22);overflow:hidden;margin-top:4px}
#prog i{display:block;height:100%;border-radius:3px;background:#e0b25a;transition:width .6s ease}

/* ===== てつが君サイト（tetsugakun.com）に寄せる：青系・白いカード・ゴシックの見出しとボタン。
   物語の本文は読みやすい明朝のまま、挿絵は絵本調のまま（2026-11-13 とも様「ゲームをサイトに寄せる」） ===== */
body{background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%) fixed;color:#333}
#app{background:rgba(255,255,255,.92);box-shadow:0 15px 35px rgba(0,0,0,.1)}
#bar{background:#2c3e50;font-family:'Helvetica Neue',Arial,sans-serif}
#prog{background:rgba(255,255,255,.18)}
#prog i{background:linear-gradient(90deg,#3498db,#2ecc71)}
#stage{background:linear-gradient(160deg,#5d7186,#2c3e50)}
#shade{background:linear-gradient(to bottom,rgba(44,62,80,0),rgba(44,62,80,.85))}
#stage h1{font-family:'Helvetica Neue',Arial,sans-serif;font-weight:800;letter-spacing:1px;color:#fff}
#home{font-family:'Helvetica Neue',Arial,sans-serif;background:rgba(44,62,80,.6)}
#win{background:#fff;border:1px solid rgba(52,152,219,.18);border-radius:14px;box-shadow:0 8px 20px rgba(44,62,80,.08)}
#body p{color:#333}
#body .note{font-family:'Helvetica Neue',Arial,sans-serif;color:#7f8c8d;border-left-color:#c3cfe2}
#body .note.dmg{color:#c0392b;border-left-color:#c0392b}
#body .note.heal{color:#27ae60;border-left-color:#27ae60}
#body h2{font-family:'Helvetica Neue',Arial,sans-serif;color:#7f8c8d;letter-spacing:1px}
#body table,#body .score{font-family:'Helvetica Neue',Arial,sans-serif}
#body td{border-bottom-color:#e3e9f0}
#body td.plus{color:#27ae60}
#body td.minus{color:#c0392b}
#body .score{background:linear-gradient(135deg,#34495e,#2c3e50);border-radius:14px}
#body .score .lab,#body .score .num small,#body .score .tnote{color:#c3cfe2}
#body .essay{background:#f5f7fa;border:none;border-left:4px solid #3498db;border-radius:10px}
button{font-family:'Helvetica Neue',Arial,sans-serif;font-weight:bold;color:#2c3e50;background:rgba(255,255,255,.95);border:2px solid #dbe4ee;border-radius:12px;padding:13px 14px;box-shadow:0 4px 6px rgba(0,0,0,.03);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
button:active{background:#3498db;color:#fff;border-color:#3498db;transform:translateY(1px)}
button:active .sub{color:#eaf4fb}
button .sub{font-weight:normal;color:#7f8c8d}
button.card{border-left:6px solid #3498db}
button.plain{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;border:none;box-shadow:0 4px 15px rgba(52,152,219,.3)}
button.plain .sub{color:#eaf4fb}
button:disabled{opacity:.6;background:#eef1f5;border-style:dashed;box-shadow:none}
button:disabled .sub{color:#c0392b}
#curtain{background:#2c3e50}
#ctitle{font-family:'Helvetica Neue',Arial,sans-serif;font-weight:800;color:#fff}
#ctitle:after{background:#3498db;height:2px}
.pop{background:#2c3e50;font-family:'Helvetica Neue',Arial,sans-serif}
#flash.dmg{background:#c0392b}
#flash.heal{background:#2ecc71}
@media (min-width:520px){#app{margin:24px auto;border-radius:16px;overflow:hidden;min-height:0}}

/* 物語を選ぶ画面 */
#hub{max-width:480px;margin:0 auto;padding:26px 16px 40px;min-height:100vh}
#hub h1{font-family:'Helvetica Neue',Arial,sans-serif;font-size:26px;font-weight:800;letter-spacing:2px;color:#2c3e50;margin:0 0 6px;text-align:center}
#hub .lead{font-family:'Helvetica Neue',Arial,sans-serif;font-size:14px;color:#555;line-height:1.6;margin:0 0 20px;text-align:center}
#hub .back{display:block;text-align:center;font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;color:#7f8c8d;margin:18px 0 0;text-decoration:none}
.story{display:block;position:relative;margin:0 0 16px;border:1px solid rgba(255,255,255,.5);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.9);color:#2c3e50;text-decoration:none;box-shadow:0 10px 25px rgba(0,0,0,.08);animation:rise .45s ease both;transition:transform .2s ease,box-shadow .2s ease}
.story:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(52,152,219,.18)}
.story:active{transform:translateY(1px)}
.story .pic{display:block;width:100%;aspect-ratio:16/7;object-fit:cover;background:linear-gradient(160deg,#5d7186,#2c3e50)}
.story .tx{padding:12px 14px 14px;font-family:'Helvetica Neue',Arial,sans-serif}
.story .no{font-size:11px;color:#7f8c8d;letter-spacing:1px}
.story .ti{font-size:18px;font-weight:800;line-height:1.4}
.story .de{font-size:13px;color:#555;margin-top:2px}
.story .rec{font-size:12px;margin-top:6px;color:#27ae60;font-weight:bold}
.story .go{position:absolute;right:10px;top:10px;font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:bold;background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;border-radius:12px;padding:3px 14px;box-shadow:0 4px 10px rgba(52,152,219,.3)}
.story.soon{opacity:.6;box-shadow:none}
.story.soon .go{background:#95a5a6;box-shadow:none}

/* 不具合を報告する札と用紙（report.js・2026-11-13） */
#rpBtn{position:fixed;right:10px;bottom:10px;z-index:6;display:inline-block;width:auto;font:bold 11px/1 'Helvetica Neue',Arial,sans-serif;color:#fff;background:rgba(44,62,80,.78);border:1px solid rgba(255,255,255,.55);border-radius:14px;padding:7px 11px;box-shadow:0 2px 8px rgba(0,0,0,.2);opacity:.9;cursor:pointer;animation:none;transition:opacity .15s ease}
#rpBtn:active{background:#3498db;transform:none}
#rpSheet{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9;background:rgba(44,62,80,.55);display:none;align-items:flex-end;justify-content:center}
#rpSheet.on{display:flex}
#rpSheet .card{width:100%;max-width:480px;background:#fff;border-radius:16px 16px 0 0;padding:16px 16px 20px;font-family:'Helvetica Neue',Arial,sans-serif;animation:rise .3s ease both;box-shadow:0 -6px 24px rgba(0,0,0,.18)}
@media (min-width:520px){#rpSheet{align-items:center}#rpSheet .card{border-radius:16px;margin:0 16px}}
#rpSheet .h{font-weight:800;font-size:16px;color:#2c3e50;line-height:1.4}
#rpSheet .p{font-size:12px;color:#7f8c8d;margin:4px 0 10px;line-height:1.6}
#rpSheet textarea{display:block;width:100%;font-family:inherit;font-size:15px;line-height:1.6;padding:10px;border:2px solid #dbe4ee;border-radius:10px;resize:vertical;color:#333;background:#fff;-webkit-text-size-adjust:100%}
#rpSheet textarea:focus{outline:none;border-color:#3498db}
#rpSheet .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#rpSheet .row{display:flex;gap:8px;margin-top:10px}
#rpSheet .row button{width:auto;flex:1;text-align:center;padding:11px;animation:none}
#rpSheet .row .send{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;border:none;box-shadow:0 4px 15px rgba(52,152,219,.3)}
#rpSheet .row .send:disabled{opacity:.6;border:none}
#rpSheet .msg{font-size:13px;margin-top:8px;min-height:1.3em;color:#7f8c8d;line-height:1.5}
#rpSheet .msg.ok{color:#27ae60;font-weight:bold}
#rpSheet .msg.warn{color:#c0392b}