/* 『10 DAYS』3D版で足した見た目（style.css は『乾杯』から写したもの） */
html, body { background: #05070a; color: #e9edf2; }
#title { background: linear-gradient(90deg, rgba(4,6,9,.9) 0%, rgba(4,6,9,.6) 50%, rgba(4,6,9,.05) 90%); }
#title .tin { max-width: 680px; }
#title h1.days { font-family: "Bodoni 72", "Bodoni MT", "Times New Roman", serif; font-weight: 400; font-size: clamp(54px, 15vmin, 128px); letter-spacing: .16em; line-height: 1; margin: 0 0 1.4vmin -.04em; color: #f1f3f6; text-shadow: 0 6px 40px #000; white-space: nowrap; }
#title .ep { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: clamp(17px, 4.6vmin, 28px); letter-spacing: .12em; color: #d7dde6; margin-bottom: 2.4vmin; }
#title .lead { font-size: clamp(15px, 3.8vmin, 21px); color: #c9d0da; }
#title .opt { margin: 1vmin 0; }
#title .opt > span { font-size: clamp(14px, 3.4vmin, 18px); min-width: 6.5em; }
#title .seg button { padding: 5px 14px; font-size: clamp(14px, 3.4vmin, 18px); }
#title .btn#btnStart { margin: .6vmin 0 1.6vmin; }
.btn { background: #e9edf2; color: #0b0e12; }
.btn.sub { color: #e9edf2; border-color: #e9edf2; }
.seg button.on { background: #e9edf2; color: #0b0e12; }
#view.short #title h1.days { font-size: 50px; margin-bottom: 2px; }
#view.short #title .ep { font-size: 17px; margin-bottom: 6px; }
#view.short #title .lead { font-size: 15px; margin-bottom: 4px; }
#view.short #title .opt { margin: 3px 0; }
#view.short #title .btn#btnStart { margin: 4px 0 6px; }

/* 手帳のボタン（前の文の左） */
#btnNote { position: absolute; right: calc(max(14px, env(safe-area-inset-right)) + clamp(44px, 10vmin, 60px) + 10px); top: calc(22px + clamp(44px, 10vmin, 60px)); height: clamp(40px, 9vmin, 52px); padding: 0 16px; border-radius: 30px;
  background: rgba(0,0,0,.45); font-size: clamp(14px, 3.6vmin, 20px); border: 1px solid rgba(255,255,255,.3); }
#btnThink { top: calc(22px + clamp(44px, 10vmin, 60px)); }
#btnNote.flash { animation: noteFlash 1.2s ease-out 2; }
@keyframes noteFlash { 0% { background: rgba(240,210,140,.8); color: #111; } 100% { background: rgba(0,0,0,.45); } }
#logList p.nt { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; border-bottom: 1px dashed rgba(255,255,255,.18); padding-bottom: .4em; }

/* 場所と時刻の札 */
#card .who { font-size: clamp(14px, 3.4vmin, 20px); letter-spacing: .14em; color: #b9c3cf; margin-bottom: 10px; }
#card .who.killer { color: #d07a6c; }
#card .who.child { color: #d9c07a; }
#card .ttl { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: clamp(30px, 9vmin, 66px); letter-spacing: .14em; }
#card .letter { background: #eef0ee; color: #1c2228; }
#card .rec { text-align: left; font-size: clamp(16px, 4.2vmin, 24px); line-height: 1.75; }
#card .rec b { display: block; text-align: center; margin-bottom: 6px; letter-spacing: .2em; }
#card .rec .hl { background: rgba(255,220,90,.55); }

/* のぞき穴：まるく切り抜いて、まわりを暗く */
#peep { position: absolute; inset: 0; pointer-events: none; z-index: 1; display: none;
  background: radial-gradient(circle at 50% 46%, rgba(0,0,0,0) 0, rgba(0,0,0,0) 27vmin, rgba(0,0,0,.92) 33vmin, #000 40vmin); }
#peep.on { display: block; }
/* 一瞬はさまる記憶の絵 */
#flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .12s; background: #000; }
#flash img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.9) saturate(1.3) brightness(.95) contrast(1.1); }
#flash.on { opacity: 1; }

/* 終わりの画面 */
#ending { background: rgba(4,6,9,.92); }
#ending h2 { font-size: clamp(28px, 8vmin, 54px); }
#endCount { font-size: clamp(14px, 3.4vmin, 18px); color: #aab3bf; }
#endPath b { color: #e3c48a; }
#view.short #ending h2 { font-size: 26px; margin: 0 0 6px; }
#view.short #endBody { font-size: 16px; line-height: 1.7; }
#view.short #endPath { font-size: 14px; }
#sub .name { color: #9ec3e6; }
#sub.killer .text { background: rgba(40,6,6,.65); }
#choices .prompt { text-align: center; margin-bottom: 8px; }
#sub .text, #choices .prompt { white-space: pre-line; }
#hud { z-index: 2; }
#toast { left: max(16px, env(safe-area-inset-left)); top: calc(26px + clamp(40px, 9vmin, 60px)); transform: none; white-space: normal; max-width: 46%; }
#btnThink { top: calc(30px + clamp(44px, 10vmin, 60px) + clamp(40px, 9vmin, 52px)); }
/* 縦に持ったときの案内（舞台は90度回して横長のまま見せる） */
#rotate { display: none; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 13; background: #e9edf2; color: #0b0e12; padding: 8px 46px 8px 16px; border-radius: 12px; font-size: 16px; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
#rotate button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: #0b0e12; color: #e9edf2; font-size: 16px; }
body.portrait #rotate { display: block; }
body.portrait #rotate.hide { display: none; }