@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&family=Noto+Serif+JP:wght@300;400&display=swap');
:root{color-scheme:dark;--bg:#0a0c0a;--ink:#f0ead8;--text:#c0b898;--muted:#6a5e48;--gold:#c8922a;--gold-dim:#5a4010;--line:rgba(200,146,42,.18);--panel:rgba(8,10,8,.93);font-family:"Noto Serif JP","Yu Mincho",serif;background:var(--bg);color:var(--text)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{min-width:320px;background:var(--bg)}body{margin:0;min-width:320px;min-height:100svh;background:var(--bg);overflow-x:hidden}.bar{width:min(100%,720px);min-height:100svh;margin:auto;padding:max(16px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));display:flex;flex-direction:column}.bar__header{height:46px;display:flex;align-items:flex-start;justify-content:space-between;position:relative;z-index:5}.bar__actions{display:flex;align-items:center;gap:7px}.eyebrow{margin:0 0 2px;color:var(--gold);font:9px/1.2 sans-serif;letter-spacing:.4em}.bar h1{font-family:"Cormorant Garamond",serif;font-size:19px;font-weight:400;letter-spacing:.08em;margin:0;color:var(--ink)}
.menu-button{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:rgba(8,10,8,.72);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}.menu-button span{width:14px;height:1px;background:var(--gold)}.log-button{height:34px;min-width:46px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:rgba(8,10,8,.72);color:var(--text);font:10px/1 sans-serif;letter-spacing:.08em}.log-button:active{border-color:var(--gold);color:var(--ink)}
.scene{--scene-image:none;position:relative;display:flex;flex-direction:column;justify-content:flex-end;flex:1 1 auto;min-height:clamp(480px,65svh,650px);margin-inline:-16px;padding:clamp(265px,42svh,390px) 16px 16px;overflow:hidden;background-color:#0a0c0a;background-image:var(--scene-image);background-repeat:no-repeat;background-position:center 22%;background-size:cover;transition:min-height .25s ease,padding .25s ease,background-position .25s ease}.scene__caption{position:absolute;z-index:1;top:clamp(215px,34svh,315px);right:18px;margin:0;color:rgba(240,234,216,.62);font-size:9px;letter-spacing:.2em;text-shadow:0 1px 5px rgba(0,0,0,.9)}.scene__caption[hidden]{display:none}.is-conversing .scene{min-height:clamp(355px,51svh,465px);padding-top:clamp(185px,28svh,250px);background-position:center 15%}
.exchange{position:relative;z-index:1;width:100%;margin-top:auto}.turn span{display:block;font:10px/1.2 sans-serif;letter-spacing:.18em}.turn p{white-space:pre-wrap;margin:4px 0 0;font-size:14px}.turn--guest{width:fit-content;max-width:min(82%,460px);margin:0 0 12px auto;padding:7px 11px 8px;text-align:right;border-right:1px solid rgba(200,146,42,.65);border-radius:7px 0 0 7px;background:rgba(8,10,8,.48);backdrop-filter:blur(3px)}.turn--guest p{line-height:1.7}.turn--guest span{color:rgba(192,184,152,.7)}.turn--carila{position:relative;padding:13px 15px 14px;background:rgba(10,9,7,.72);backdrop-filter:blur(6px);border:1px solid rgba(200,146,42,.14);border-left:1px solid rgba(200,146,42,.72);border-radius:0 10px 10px 0;box-shadow:0 8px 24px rgba(0,0,0,.16)}.turn--carila p{line-height:1.65}.turn--carila span{color:var(--gold)}.turn--carila.is-entering{animation:dialogueIn .38s ease both}
.counter{position:sticky;z-index:4;bottom:0;padding-top:14px;padding-bottom:max(8px,env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(10,12,10,0),rgba(10,12,10,.96) 18px,#0a0c0a 48px)}.starters{display:flex;flex-direction:column;gap:8px;margin-bottom:13px}.starters[hidden]{display:none}.starters button{width:100%;min-height:44px;border:1px solid var(--line);border-radius:7px;background:rgba(8,10,8,.62);color:var(--text);font:13px/1.5 inherit;padding:10px 15px;text-align:left;transition:border-color .15s,background .15s}.starters button::after{content:"›";float:right;color:var(--gold-dim);font-size:17px}.starters button:active{border-color:var(--gold);background:rgba(200,146,42,.07);color:var(--ink)}
.composer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}.composer textarea{resize:none;overflow-y:hidden;width:100%;min-height:74px;max-height:174px;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.4);color:var(--ink);font:16px/1.55 system-ui,sans-serif;padding:11px 12px;outline:none;-webkit-appearance:none}.composer textarea:focus{border-color:var(--gold-dim);box-shadow:0 0 0 1px rgba(200,146,42,.08)}.composer textarea::placeholder{color:#766b58;opacity:1}.composer button,#restartButton{min-height:44px;border:1px solid var(--gold);border-radius:7px;background:var(--gold-dim);color:var(--ink);font:12px inherit;padding:0 15px;display:flex;align-items:center;gap:8px}.composer button:disabled{opacity:.45}.composer__hint{margin:7px 2px 0;color:var(--muted);font-size:10px;line-height:1.6}.status{min-height:16px;margin:5px 2px 0;color:var(--muted);font:10px/1.5 sans-serif}
.menu-overlay{position:fixed;inset:0;z-index:19;background:rgba(0,0,0,.58);backdrop-filter:blur(2px)}.menu-drawer{position:fixed;z-index:20;inset:0 0 0 auto;width:min(280px,82vw);padding:20px;background:rgba(10,12,10,.98);border-left:1px solid var(--line);transform:translateX(102%);transition:transform .25s ease}.menu-drawer.is-open{transform:none}.menu-drawer__header{display:flex;align-items:center;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid var(--line)}.menu-drawer__header p{color:var(--gold);font:10px sans-serif;letter-spacing:.35em}.menu-drawer__header button{border:0;background:none;color:var(--muted);font-size:25px}.menu-item{display:block;width:100%;padding:15px 2px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--text);font:13px inherit;text-align:left;text-decoration:none}
.quiet-button{border:0;background:none;color:var(--muted);text-decoration:underline;text-underline-offset:4px;padding:8px;font:12px sans-serif}dialog{width:min(calc(100% - 28px),620px);max-height:80svh;border:1px solid var(--line);border-radius:12px;background:#10120f;color:var(--text);padding:18px}dialog::backdrop{background:rgba(5,4,3,.82);backdrop-filter:blur(4px)}.dialog__header{display:flex;align-items:center;justify-content:space-between}.dialog__header h2{font-family:"Cormorant Garamond",serif;font-size:20px;font-weight:400;color:var(--ink)}.history-dialog{padding:0;overflow:hidden}.history-dialog[open]{display:flex;flex-direction:column}.history-dialog .dialog__header{position:sticky;top:0;z-index:2;flex:none;padding:16px 18px 13px;background:#10120f;border-bottom:1px solid var(--line)}.history-dialog__body{min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 18px 18px}#historyList{padding:0;list-style:none}#historyList li{padding:10px 0;border-top:1px solid var(--line);white-space:pre-wrap;line-height:1.7}#historyList li:first-child{border-top:0}#historyList strong{display:block;color:var(--gold);font:9px sans-serif;letter-spacing:.15em}.farewell{text-align:center;line-height:1.8}.farewell p{white-space:pre-wrap}.farewell #restartButton{margin:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes dialogueIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(min-width:650px){.bar{padding-inline:32px}.scene{margin-inline:-32px;padding-inline:32px;min-height:clamp(520px,68svh,700px)}.is-conversing .scene{min-height:clamp(400px,54svh,520px)}.scene__caption{right:34px}.counter{padding-bottom:16px}.starters{display:grid;grid-template-columns:1fr 1fr}.exchange{margin-inline:auto;width:100%}}@media(max-height:700px){.scene{min-height:430px;padding-top:230px;background-position:center 18%}.is-conversing .scene{min-height:330px;padding-top:170px;background-position:center 13%}.scene__caption{top:185px}.turn p{line-height:1.6}.starters{gap:6px}.starters button{min-height:40px;padding-block:7px}.composer textarea{min-height:68px}}