:root {
  --gold: #c9a96a;
  --gold-dim: rgba(201, 169, 106, .28);
  --ink: #e6dfd0;
  --ink-dim: #9a9488;
  --panel: rgba(7, 7, 11, .78);
  --serif: "Yu Mincho", "游明朝", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", "MS PMincho", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #030305; color: var(--ink); font-family: var(--serif); overflow: hidden; }
button { font-family: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }

#bg { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 42%, transparent 35%, rgba(0, 0, 0, .78) 100%); }
#hurt { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(150, 20, 20, .55) 100%); transition: opacity .5s; }
#flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: #fff8e8; transition: opacity 1.2s; }

/* ---------- HUD ---------- */
#hud { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 26px; pointer-events: none; z-index: 5; }
#hud > * { pointer-events: auto; }
#place { letter-spacing: .25em; text-shadow: 0 0 12px #000, 0 0 4px #000; }
#region { font-size: 13px; color: var(--gold); margin-right: 1em; }
#placename { font-size: 20px; }
#stat { margin-top: 12px; font-size: 12px; color: var(--ink-dim); }
.bar { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.bar label { width: 2.4em; letter-spacing: .1em; }
.track { width: 190px; height: 7px; background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .16); }
.track i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #7a2222, #b9483a); transition: width .45s ease; }
.track.sp i { background: linear-gradient(90deg, #5c6f58, #9db08a); }
#misc { margin-top: 8px; display: flex; gap: 16px; font-size: 13px; color: var(--ink); text-shadow: 0 0 8px #000; }
#fade { color: #b8c4d8; }
#btns { display: flex; gap: 8px; }
#btns button, #ov-close { background: rgba(0, 0, 0, .5); border: 1px solid var(--gold-dim); padding: 7px 16px; font-size: 13px; letter-spacing: .2em; transition: .25s; }
#btns button:hover, #ov-close:hover { border-color: var(--gold); color: var(--gold); }

#enemyhud { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); text-align: center; z-index: 4; pointer-events: none; }
#ename { font-size: 22px; letter-spacing: .3em; text-shadow: 0 0 14px #000, 0 0 5px #000; margin-bottom: 8px; }
#enemyhud .track { width: min(460px, 70vw); height: 6px; margin: 0 auto; }
#enemyhud .track i { background: linear-gradient(90deg, #6d5a34, var(--gold)); }
#estat { font-size: 12px; margin-top: 6px; color: var(--ink-dim); letter-spacing: .15em; min-height: 1.2em; }

/* ---------- 本文 ---------- */
#panel { position: fixed; left: 50%; bottom: 3.5vh; transform: translateX(-50%); width: min(820px, 94vw); max-height: 62vh; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--gold-dim); padding: 22px 32px 18px; z-index: 6; backdrop-filter: blur(3px);
  box-shadow: 0 0 60px rgba(0, 0, 0, .7); }
#panel::before, #panel::after { content: ""; position: absolute; left: 12px; right: 12px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); }
#panel::before { top: 6px; } #panel::after { bottom: 6px; }
#text { overflow-y: auto; font-size: 17.5px; line-height: 2.0; letter-spacing: .04em; scrollbar-width: thin; scrollbar-color: #333 transparent; }
#text p { margin: 0 0 .55em; animation: fadein .5s ease both; text-align: justify; }
#text p.who { margin-bottom: 0; font-size: 13px; color: var(--gold); letter-spacing: .3em; }
#text p.say { color: #f3ecdd; }
#text p.sys { font-size: 14px; color: var(--ink-dim); line-height: 1.8; }
#text p.tell { color: #e9c98a; border-left: 2px solid var(--gold); padding-left: 12px; margin-top: .4em; }
#more { text-align: center; color: var(--gold); font-size: 11px; height: 14px; opacity: 0; animation: bob 1.4s infinite; }
#more.on { opacity: .9; }
@keyframes bob { 50% { transform: translateY(4px); } }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

#choices { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
#choices:empty { display: none; }
#choices.grid { display: grid; grid-template-columns: repeat(3, 1fr); }
#choices button { text-align: left; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); padding: 9px 16px; font-size: 16px; letter-spacing: .08em; transition: .2s; animation: fadein .4s ease both; }
#choices button .n { color: var(--gold); font-size: 12px; margin-right: .9em; opacity: .8; }
#choices button .hint { display: block; font-size: 12px; color: var(--ink-dim); margin-top: 2px; padding-left: 1.9em; letter-spacing: .03em; }
#choices button:hover:not(:disabled), #choices button:focus-visible { border-color: var(--gold); background: rgba(201, 169, 106, .1); outline: none; }
#choices button:disabled { opacity: .35; cursor: default; }

#toasts { position: fixed; top: 22%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 20; pointer-events: none; }
.toast { background: rgba(0, 0, 0, .78); border-top: 1px solid var(--gold-dim); border-bottom: 1px solid var(--gold-dim); padding: 9px 36px; font-size: 15px; letter-spacing: .15em; color: #f0dfb8; animation: toast 3.6s ease both; white-space: nowrap; }
@keyframes toast { 0% { opacity: 0; transform: translateY(8px); } 12%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- 重ね窓 ---------- */
#overlay, #prompt { position: fixed; inset: 0; background: rgba(0, 0, 0, .72); z-index: 30; display: flex; align-items: center; justify-content: center; }
#ov-box { width: min(980px, 95vw); height: min(660px, 90vh); background: rgba(9, 9, 13, .97); border: 1px solid var(--gold-dim); display: flex; flex-direction: column; }
#ov-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--gold-dim); }
#ov-title { font-size: 19px; letter-spacing: .4em; color: var(--gold); }
#ov-body { flex: 1; display: flex; min-height: 0; }
#ov-list { width: 36%; overflow-y: auto; border-right: 1px solid rgba(255, 255, 255, .08); padding: 10px 0; scrollbar-width: thin; scrollbar-color: #333 transparent; }
#ov-list h4 { margin: 14px 22px 6px; font-size: 12px; font-weight: normal; color: var(--gold); letter-spacing: .3em; }
#ov-list .it { padding: 7px 22px; font-size: 15px; cursor: pointer; display: flex; justify-content: space-between; }
#ov-list .it:hover, #ov-list .it.on { background: rgba(201, 169, 106, .12); }
#ov-list .it small { color: var(--ink-dim); }
#ov-list .unk { padding: 7px 22px; font-size: 15px; color: #444; }
#ov-detail { flex: 1; overflow-y: auto; padding: 26px 34px; scrollbar-width: thin; scrollbar-color: #333 transparent; }
#ov-detail h3 { margin: 0 0 6px; font-size: 22px; font-weight: normal; letter-spacing: .2em; }
#ov-detail .meta { font-size: 12px; color: var(--gold); letter-spacing: .2em; margin-bottom: 20px; }
#ov-detail .desc { white-space: pre-wrap; font-size: 16px; line-height: 2.05; }
#ov-detail .verse { text-align: center; font-size: 17px; line-height: 2.3; }
#ov-detail button { margin-top: 22px; background: none; border: 1px solid var(--gold-dim); padding: 8px 26px; letter-spacing: .25em; font-size: 14px; }
#ov-detail button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
#ov-detail button:disabled { opacity: .4; cursor: default; }
#ov-detail table { border-collapse: collapse; font-size: 15px; margin-bottom: 16px; }
#ov-detail td { padding: 3px 22px 3px 0; }
#ov-detail td:first-child { color: var(--ink-dim); }

#pr-box { background: rgba(9, 9, 13, .97); border: 1px solid var(--gold-dim); padding: 34px 44px; text-align: center; }
#pr-msg { font-size: 18px; letter-spacing: .15em; margin-bottom: 22px; }
#pr-input { background: none; border: none; border-bottom: 1px solid var(--gold); color: var(--ink); font-family: inherit; font-size: 24px; text-align: center; width: 12em; padding: 6px; letter-spacing: .2em; outline: none; }
#pr-ok { display: block; margin: 26px auto 0; background: none; border: 1px solid var(--gold-dim); padding: 8px 30px; letter-spacing: .3em; font-size: 15px; }
#pr-ok:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- 題字・結末 ---------- */
#title { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; text-align: center; background: radial-gradient(ellipse at 50% 40%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .7) 100%); }
#t-sub { font-size: 15px; letter-spacing: 1.1em; color: var(--gold); margin-left: 1.1em; animation: fadein 3s ease both; }
#title h1 { font-size: clamp(64px, 13vw, 150px); font-weight: normal; letter-spacing: .32em; margin: 6px 0 0 .32em; color: #f4ead2; text-shadow: 0 0 60px rgba(255, 220, 160, .35); animation: fadein 4s ease both; font-family: "Cinzel", "Trajan Pro", "Times New Roman", serif; }
#t-epi { font-size: 15px; letter-spacing: .5em; color: var(--ink-dim); margin: 10px 0 46px; animation: fadein 5s ease both; }
#t-menu { display: flex; flex-direction: column; gap: 12px; align-items: center; }
#t-menu button { background: none; border: 1px solid transparent; border-bottom-color: var(--gold-dim); width: 240px; padding: 10px; font-size: 17px; letter-spacing: .5em; text-indent: .5em; transition: .3s; }
#t-menu button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
#t-menu button:disabled { opacity: .3; cursor: default; }
#t-ends { margin-top: 26px; font-size: 13px; color: var(--gold); letter-spacing: .25em; min-height: 1.4em; }
#t-note { margin-top: 26px; font-size: 12px; color: #6f6a60; letter-spacing: .15em; }

#ending { position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .55); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: background 3s; }
#end-text { width: min(760px, 88vw); text-align: center; font-size: 19px; line-height: 2.5; letter-spacing: .1em; text-shadow: 0 0 16px #000, 0 0 6px #000; }
#end-text p { margin: 0 0 .3em; opacity: 0; transition: opacity 1.8s ease; }
#end-text p.on { opacity: 1; }
#end-text .card-sub { font-size: 14px; letter-spacing: .8em; color: var(--gold); }
#end-text .card-title { font-size: 46px; letter-spacing: .5em; margin: 12px 0 30px .5em; }
#end-text .card-foot { font-size: 13px; color: var(--ink-dim); letter-spacing: .25em; line-height: 2.2; }
#end-more { color: var(--gold); font-size: 11px; margin-top: 24px; opacity: 0; animation: bob 1.4s infinite; }
#end-more.on { opacity: .8; }

body.shake #bg { animation: shake .35s; }
@keyframes shake { 20% { transform: translate(-7px, 3px); } 40% { transform: translate(6px, -4px); } 60% { transform: translate(-4px, -2px); } 80% { transform: translate(3px, 2px); } }

@media (max-width: 700px) {
  #hud { padding: 10px 12px; } #placename { font-size: 16px; } .track { width: 120px; }
  #panel { padding: 16px 16px 12px; } #text { font-size: 15.5px; line-height: 1.85; }
  #choices.grid { grid-template-columns: repeat(2, 1fr); } #choices button { font-size: 14.5px; padding: 8px 10px; }
  #ov-list { width: 42%; } #ov-detail { padding: 16px; } #btns button { padding: 6px 9px; letter-spacing: .05em; }
  #enemyhud { top: 110px; } #ename { font-size: 17px; }
}