/* 物語モード */
#shud { position: fixed; inset: 0; pointer-events: none; }
.s-name { position: absolute; top: 14px; left: 18px; font-weight: 800; font-size: clamp(16px, 2vw, 26px); color: var(--gold2); text-shadow: 0 2px 10px #000c; }
.s-name small { display: block; font-size: .62em; color: #cdbb95; font-weight: 700; }
.s-info { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); font-weight: 800; font-size: clamp(16px, 2.2vw, 28px); color: #fff4d6; text-shadow: 0 2px 10px #000c; white-space: nowrap; }
.s-info em { font-style: normal; color: #ffc65e; }
#sRetry { position: absolute; top: 12px; right: 14px; pointer-events: auto; }

#dlg { position: fixed; left: 50%; bottom: 3vh; transform: translateX(-50%); width: min(94vw, 980px); min-height: 128px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 14px 22px 14px 14px; border-radius: 10px; background: #070a16e8; box-shadow: 0 0 0 1px #f6cf7a66, 0 18px 50px #000c; cursor: pointer; z-index: 6; animation: dlgIn .25s ease-out; }
@keyframes dlgIn { from { transform: translate(-50%, 20px); opacity: 0; } }
#dFace { width: clamp(72px, 11vmin, 110px); height: auto; }
.d-name { font-weight: 800; color: #ffc65e; font-size: clamp(14px, 2vmin, 18px); margin-bottom: 4px; letter-spacing: .06em; }
.d-text { font-size: clamp(17px, 2.7vmin, 25px); line-height: 1.6; color: #fff6e0; min-height: 2.6em; }
#dlg.book { background: #efe4cdf2; box-shadow: 0 0 0 1px #7d5c33, 0 0 0 5px #1b1009, 0 18px 50px #000c; }
#dlg.book .d-text { font-family: "Yuji Boku", serif; color: #2a1608; font-size: clamp(19px, 3vmin, 28px); }
#dlg.book .d-name { color: #8a4a06; }
#dlg.hinoko .d-text { color: #ffe08a; text-shadow: 0 0 14px #ff8a3c; }
.d-next { position: absolute; right: 14px; bottom: 8px; color: #ffc65e; font-size: 14px; animation: breathe 1s ease-in-out infinite; }

#smenu { gap: 2.4vh; background: radial-gradient(ellipse at center, #0000 30%, #000a 100%); overflow-y: auto; justify-content: safe center; padding: 16px 0; }
#smenu .logo-ja { font-size: clamp(48px, 11vmin, 120px); }
.s-menu { display: flex; flex-direction: column; gap: 10px; align-items: stretch; width: min(90vw, 520px); }
/* 横長では 2 列に並べて、10 個のボタンを 1 画面に収める */
@media (min-aspect-ratio: 1/1) and (min-width: 760px) { .s-menu { display: grid; grid-template-columns: 1fr 1fr; width: min(92vw, 860px); } }
.s-menu button { cursor: pointer; text-align: left; padding: .55em 1em; border-radius: 9px; border: 1px solid #f6cf7a66; background: #090c1ccc; color: #f7e9c9; font-size: clamp(16px, 2.4vmin, 21px); font-weight: 800; }
.s-menu button small { display: block; font-size: .7em; font-weight: 700; color: #cdbb95; margin-top: 2px; }
.s-menu button:hover { background: #2c2334e6; border-color: #f6cf7a; }
.s-menu button.spoil { border-color: #c8331f99; }

#card { background: #000d; gap: 18px; text-align: center; padding: 0 6vw; }
.c-main { font-family: "Yuji Boku", serif; font-size: clamp(26px, 5vmin, 54px); color: #fff0c4; text-shadow: 0 0 30px #ff9a3c; line-height: 1.5; animation: rise 2.4s ease-out; }
.c-sub { font-size: clamp(14px, 2.2vmin, 19px); color: #cdbb95; animation: rise 3.6s ease-out; }
.whisper { position: absolute; transform: translate(-50%, -50%); font-family: "Yuji Boku", serif; font-size: clamp(22px, 4vmin, 40px); color: #ffe9c0; text-shadow: 0 0 18px #ff8a3c, 0 2px 8px #000; animation: whisper 2.6s ease-out forwards; white-space: nowrap; pointer-events: none; }
@keyframes whisper { 0% { opacity: 0; transform: translate(-50%, -30%); } 20% { opacity: 1; } 80% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%, -90%); } }
.d-skip { position: absolute; right: 10px; top: -38px; cursor: pointer; padding: .35em 1em; border-radius: 7px; border: 1px solid #f6cf7a66; background: #070a16d8; color: #f7e9c9; font-family: inherit; font-weight: 800; font-size: clamp(13px, 1.9vmin, 16px); }
.d-skip:hover { background: #2c2334e6; border-color: #f6cf7a; }
#labels { position: fixed; inset: 0; pointer-events: none; }
.lbl { position: absolute; transform: translate(-50%, -50%); font-weight: 800; font-size: clamp(13px, 2vmin, 18px); color: #fff4d6; text-shadow: 0 1px 4px #000, 0 0 10px #000; white-space: nowrap; }
.lbl.big { font-family: "Yuji Boku", serif; font-size: clamp(20px, 3.4vmin, 32px); }
.lbl.dim { opacity: .55; } .lbl.gold { color: #ffc65e; } .lbl.red { color: #ff8a70; } .lbl.blue { color: #9ed8ff; }