*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;color:#222;background:#e9edf3;-webkit-text-size-adjust:100%}
.screen{min-height:100dvh;display:flex;flex-direction:column}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* タイトル */
#screen-title{background:linear-gradient(180deg,#141c2e 0%,#1d2a45 55%,#2b3d5f 100%);color:#f2f4f8;align-items:center}
.title-inner{max-width:480px;width:100%;padding:56px 28px 40px;display:flex;flex-direction:column;gap:18px}
.title-kicker{font-size:12px;letter-spacing:.18em;color:#aebadd}
.title-logo{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:44px;line-height:1.25;font-weight:600}
.title-lead{font-size:14px;line-height:1.9;color:#d8deeb}
.title-notices{font-size:11.5px;line-height:1.8;color:#9facc4;border-top:1px solid rgba(255,255,255,.15);padding-top:14px}
.title-notices a{color:#cdd8f2}
.btn-main{background:#f5f7fb;color:#16233c;font-size:16px;font-weight:700;padding:15px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.btn-sub{background:transparent;color:#e6ebf6;font-size:15px;padding:13px;border:1px solid rgba(255,255,255,.4);border-radius:999px}
.btn-text{color:#93a3c0;font-size:12.5px;padding:6px}
.title-foot{font-size:11.5px;color:#8494b3;text-align:center}

/* ゲーム画面 */
#screen-game{background:#93aad4;height:100dvh}
.chat-header{background:rgba(255,255,255,.97);display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid #d8dde6;z-index:5}
.h-icon{font-size:22px;color:#3a4a63;width:36px;height:36px;line-height:1}
.h-main{flex:1;min-width:0}
.h-name{font-size:16.5px;font-weight:700;display:flex;gap:8px;align-items:baseline}
.h-role{font-size:11px;color:#8a94a6;font-weight:400}
.h-stage{display:flex;align-items:center;gap:6px;font-size:11px;color:#6a768c;margin-top:1px}
.dots{letter-spacing:2px;font-size:9px;color:#7fb069}
.dots .off{color:#c9d2df}
.chat{flex:1;overflow-y:auto;padding:14px 12px 18px;display:flex;flex-direction:column;gap:3px}
.date-pill{align-self:center;background:rgba(38,52,78,.45);color:#fff;font-size:11px;padding:4px 12px;border-radius:999px;margin:10px 0 8px}
.sys-line{align-self:center;color:#eef2f9;font-size:11.5px;line-height:1.7;text-align:center;max-width:88%;margin:8px 0;text-shadow:0 1px 2px rgba(30,45,75,.35)}
.stage-line{align-self:center;background:rgba(255,255,255,.85);color:#33507e;font-size:12px;font-weight:700;padding:6px 14px;border-radius:999px;margin:10px 0;box-shadow:0 2px 8px rgba(30,45,75,.18)}
.row{display:flex;align-items:flex-end;gap:6px;margin-top:7px;max-width:100%}
.row.hero{justify-content:flex-start}
.row.me{justify-content:flex-end}
.avatar{flex:none;width:34px;height:34px;border-radius:50%;background:#5d7355;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.bwrap{display:flex;flex-direction:column;max-width:76%}
.row.me .bwrap{align-items:flex-end}
.bname{font-size:11px;color:#e8edf6;margin:0 0 2px 2px;text-shadow:0 1px 1px rgba(30,45,75,.3)}
.bubble{font-size:15px;line-height:1.55;padding:8px 12px;border-radius:17px;word-break:break-word;white-space:pre-wrap;box-shadow:0 1px 1px rgba(30,45,75,.12)}
.row.hero .bubble{background:#fff;border-top-left-radius:5px}
.row.me .bubble{background:#abe07c;border-top-right-radius:5px}
.meta{flex:none;font-size:10px;color:#e3eaf6;text-shadow:0 1px 1px rgba(30,45,75,.35);line-height:1.5;text-align:left}
.row.me .meta{text-align:right}
.meta .read{display:block}
.stamp{font-size:62px;line-height:1.15;padding:2px 4px}
.typing{display:inline-flex;gap:4px;padding:12px 14px;background:#fff;border-radius:17px;border-top-left-radius:5px}
.typing i{width:7px;height:7px;border-radius:50%;background:#b9c2cf;animation:tp 1.1s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes tp{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.choices{background:rgba(255,255,255,.97);border-top:1px solid #d8dde6;padding:10px 12px calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}
.choices p{font-size:11.5px;color:#7a8499;text-align:center}
.choice-btn{text-align:left;background:#f2f6fd;border:1.5px solid #b9cbe8;color:#23354f;font-size:14.5px;line-height:1.5;padding:11px 14px;border-radius:14px}
.choice-btn:active{background:#dfeafb}
.ep-next{margin:16px auto 4px;background:#fff;color:#23354f;font-weight:700;font-size:15px;padding:12px 26px;border-radius:999px;box-shadow:0 3px 10px rgba(30,45,75,.25)}
.input-bar{background:#fff;border-top:1px solid #d8dde6;display:flex;align-items:center;gap:10px;padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
.i-icon{font-size:19px;color:#59687e}
.i-icon.send{color:#7fb069}
.i-field{flex:1;background:#f1f3f7;border-radius:999px;color:#9aa4b5;font-size:13.5px;padding:9px 14px}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:rgba(22,35,60,.92);color:#fff;font-size:13px;padding:10px 18px;border-radius:999px;z-index:20;box-shadow:0 4px 16px rgba(0,0,0,.3)}

/* まとめ・モーダル */
#screen-summary{background:linear-gradient(180deg,#141c2e,#2b3d5f);color:#f2f4f8;align-items:center}
.summary-inner{max-width:480px;width:100%;padding:52px 28px 40px;display:flex;flex-direction:column;gap:16px}
.summary-title{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:28px}
#summary-body{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:18px;font-size:14.5px;line-height:2}
#summary-body .big{font-size:17px;font-weight:700}
.summary-note{font-size:12.5px;color:#aebadd;line-height:1.8}
.modal{position:fixed;inset:0;background:rgba(15,22,38,.55);display:flex;align-items:flex-end;justify-content:center;z-index:30}
.modal-card{background:#fff;width:100%;max-width:520px;max-height:82dvh;overflow-y:auto;border-radius:20px 20px 0 0;padding:22px 22px calc(22px + env(safe-area-inset-bottom));position:relative}
.modal-close{position:absolute;top:10px;right:14px;font-size:24px;color:#8892a4}
.modal-card h3{font-size:16px;margin-bottom:10px}
.modal-card h4{font-size:13.5px;margin:16px 0 6px;color:#33507e}
.modal-card p,.modal-card li{font-size:13.5px;line-height:1.85;color:#333}
.modal-card ul{padding-left:18px}
.axis-row{display:flex;align-items:center;gap:10px;margin:7px 0;font-size:13px}
.axis-row .an{width:86px;color:#555}
.axis-bar{flex:1;height:8px;background:#e6ebf2;border-radius:99px;overflow:hidden}
.axis-bar i{display:block;height:100%;background:#7fb069;border-radius:99px}
.axis-row .av{width:26px;text-align:right;color:#33507e;font-weight:700}