:root{color-scheme:dark;--gold:#d4b77a;--gold-soft:#ac8955;--ink:#fff3db;--wine:#420b18;--muted:#cfb5a3;--serif:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;--sans:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#10070b;color:var(--ink)}body{font:15px/1.65 var(--serif)}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.4}button,input,select{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid #fff3b4;outline-offset:4px}button{border:0}button svg{pointer-events:none}svg.lucide{width:20px;height:20px;stroke-width:1.5;flex-shrink:0}#app{position:relative;max-width:480px;margin:auto;height:100dvh;min-height:500px;overflow:hidden;background:#3a0812 url('assets/gothic-background.png') center top/100% 100% no-repeat;border-left:1px solid #64462f;border-right:1px solid #64462f}.shell{height:100%;display:flex;flex-direction:column}.app-header{height:96px;flex-shrink:0;display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 16px 12px;background:#14040a66;border-bottom:1px solid var(--gold-soft)}.header-name{font-size:24px;letter-spacing:.08em;line-height:1.4;margin:0;font-weight:500}.header-sub{font-size:10px;color:var(--gold);letter-spacing:.12em;white-space:nowrap}.header-copy{flex:1;min-width:0}.icon-button{width:36px;height:40px;display:inline-flex;justify-content:center;align-items:center;background:transparent;color:var(--gold);padding:0;flex-shrink:0}.icon-button svg{width:24px;height:24px}.avatar{width:40px;height:40px;flex-shrink:0;border:1px solid #bf9862;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;background:#4b0c1a;box-shadow:inset 0 0 0 3px #2c0812;color:var(--gold);font:27px var(--serif);overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.avatar.large{width:120px;height:120px;font-size:72px;box-shadow:0 0 0 7px #23061088,inset 0 0 0 4px #2c0812}.avatar.header-avatar{width:35px;height:35px;font-size:23px}.conversation{padding:0 16px 22px;overflow:auto;min-height:0;flex:1;scrollbar-width:thin;scrollbar-color:#ad8955 #350b14;overscroll-behavior:contain}.date{text-align:center;color:var(--gold);font-size:13px;padding:17px 0 20px;letter-spacing:.12em}.message{display:flex;gap:8px;align-items:flex-end;margin:0 0 17px;animation:arrive .3s ease-out}.message .avatar{width:35px;height:35px;font-size:23px;align-self:flex-start;margin-top:5px}.bubble{display:flex;align-items:center;gap:10px;padding:13px 13px;border:1px solid var(--gold-soft);border-radius:17px;background:#380611bd;min-width:0;max-width:calc(100% - 88px);line-height:1.75;font-size:15px;overflow-wrap:anywhere}.bubble p{margin:0;flex:1;white-space:pre-wrap}.play-button{width:28px;height:28px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--gold);flex-shrink:0;padding:5px}.play-button svg{width:16px;height:16px}.play-button.playing{background:#a57e39;color:#fff}.timestamp{color:var(--gold);font-size:10px;white-space:nowrap;line-height:1;margin-bottom:4px}.message.sent{justify-content:flex-end;gap:7px}.sent .bubble{background:#f3e8d4;color:#2a130f;border-color:#ebd8b6;max-width:80%;border-radius:16px 16px 3px 16px;padding:10px 14px}.system-msg{text-align:center;color:#d5baa0;font:11px/1.7 var(--sans);padding:12px 18px;margin:12px 0;border-top:1px solid #98724377;border-bottom:1px solid #98724377}.typing{height:29px;font:11px var(--sans);color:var(--muted);padding-left:45px;display:flex;align-items:center;gap:7px}.typing svg{width:15px;height:15px;animation:pulse 1.2s infinite}.choice-zone{padding:12px 18px 14px;flex-shrink:0;background:#310710b8;border-top:1px solid #89663888;max-height:42dvh;overflow:auto}.ornament{display:flex;align-items:center;gap:10px;justify-content:center;color:var(--gold);font-size:13px;letter-spacing:.1em;margin-bottom:12px}.ornament:before,.ornament:after{content:"";height:1px;background:#ac895577;flex:1}.choice{position:relative;display:block;width:100%;padding:12px 15px;margin:8px 0 0;min-height:46px;background:#330a15db;border:1px solid #b58e54;border-radius:8px;font-size:15px;line-height:1.45;transition:background .15s}.choice:hover{background:#602133}.choice:active{transform:translateY(1px)}.progress-zone{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 18px;flex-shrink:0;border-top:1px solid #956e4380;background:#270711b8;min-height:54px}.progress-zone span{font:11px var(--sans);color:var(--muted)}.mini-button{display:inline-flex;align-items:center;gap:5px;border:1px solid #9a7749;border-radius:5px;background:#350b16;padding:7px 9px;font:11px var(--sans);color:var(--gold);min-height:34px}.mini-button svg{width:14px;height:14px}.footer{display:flex;align-items:center;justify-content:space-around;background:#1d060cbd;border-top:1px solid #997746;min-height:58px;padding:9px 6px calc(9px + env(safe-area-inset-bottom));flex-shrink:0}.footer button{display:flex;align-items:center;justify-content:center;gap:6px;font:11px var(--sans);padding:6px 8px;color:#e0c995;background:transparent;min-height:36px}.footer button+button{border-left:1px solid #b18d5144}.footer .active{color:#fff;background:#6e2a35;border-radius:5px}.home-scroll{height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:100px 32px 30px;text-align:center}.eyebrow{font:10px var(--sans);letter-spacing:.25em;color:#d5b87e;margin:25px 0 20px}.brand{font-size:31px;line-height:1.7;font-weight:500;letter-spacing:.07em;margin:12px 0 6px;text-shadow:0 2px 12px #000}.brand span{display:block;font-size:14px;letter-spacing:.22em;color:var(--gold);margin-top:6px}.intro{font-size:13px;line-height:2.2;margin:28px 0;color:#e6d2bd}.home-actions{width:100%;max-width:310px;margin-top:auto;padding-top:20px}.primary{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 16px;border:1px solid #d0af70;border-radius:7px;background:#541326;color:#fff1ce;min-height:50px;font-size:16px}.primary:hover{background:#6c2236}.secondary{display:block;width:100%;padding:11px 16px;margin-top:10px;border:1px solid #b18e5755;border-radius:7px;background:#250811aa;color:#e2c99f;font-size:13px}.home-links{display:flex;justify-content:center;gap:12px;margin-top:20px;flex-wrap:wrap}.home-links button{background:transparent;color:#c9ae83;font:11px var(--sans);display:flex;align-items:center;gap:5px;padding:5px}.home-links svg{width:15px;height:15px}.build-note{margin-top:22px;font:10px/1.7 var(--sans);color:#cfb5a3}.setup{padding:100px 30px 30px;text-align:center;overflow:auto;height:100%}.setup h1{font-size:26px;font-weight:500}.setup label{display:block;text-align:left;font-size:13px;color:var(--gold);margin:24px 0 8px}.text-input{width:100%;padding:14px;border:1px solid #bc9860;border-radius:7px;background:#240711;color:#fff;font:16px var(--sans)}.small{font:12px/1.8 var(--sans);color:#cbb39f}.setup .primary{margin-top:22px}.sound-switch{display:flex;gap:8px;margin:14px 0}.sound-switch button{flex:1;padding:12px 6px;border:1px solid #9b7449;border-radius:6px;background:#240811;font-size:13px}.sound-switch button.selected{background:#794039;border-color:#f2ce8b}.call-stage{display:flex;align-items:center;flex-direction:column;justify-content:center;flex:1;min-height:0;padding:20px 24px;overflow:auto;text-align:center;background:#1c05109c}.call-stage h2{font-size:27px;font-weight:500;letter-spacing:.08em;margin:20px 0 3px}.call-state{font:11px var(--sans);color:var(--gold);letter-spacing:.14em}.call-caption{margin:26px 0 0;padding:18px 14px;border-top:1px solid #ab8650;border-bottom:1px solid #ab8650;font-size:17px;line-height:1.9;width:100%;min-height:100px}.call-caption .play-button{margin:12px auto 0}.incoming .avatar{animation:ring 2s ease-in-out infinite}.answer{margin:36px auto 0;border:1px solid #e4ce96;border-radius:50%;width:68px;height:68px;background:#5b7b52;color:white;display:flex;align-items:center;justify-content:center}.answer svg{width:30px;height:30px}.call-help{font:11px var(--sans);margin-top:14px;color:#cfb5a3}.end-page{height:100%;overflow:auto;text-align:center;padding:85px 28px 35px}.end-label{font:12px var(--sans);letter-spacing:.23em;color:var(--gold);margin-top:25px}.end-title{font-size:28px;font-weight:500;margin:16px 0}.end-copy{line-height:2.2;font-size:14px;color:#ecd9c4;white-space:pre-line;margin:20px 0 30px}.end-unlock{padding:15px;border:1px solid #cfaf75;border-radius:8px;background:#441824;font-size:13px;margin:18px 0}.memory-scroll{overflow:auto;flex:1;padding:18px}.memory-card{display:flex;width:100%;align-items:center;gap:15px;padding:18px 15px;margin-bottom:12px;border:1px solid #a98755;border-radius:8px;background:#2e0b15e0;text-align:left}.memory-card svg{width:28px;height:28px;color:var(--gold)}.memory-card strong{display:block;font-size:17px;font-weight:500}.memory-card small{display:block;font:11px/1.7 var(--sans);color:#c8af92;margin-top:5px}.memory-card.locked{opacity:.55}.section-title{font-size:13px;color:var(--gold);margin:22px 0 12px;letter-spacing:.1em}.sheet-backdrop{position:fixed;inset:0;background:#080409bb;z-index:10;display:flex;align-items:center;justify-content:center;padding:18px}.sheet{position:relative;max-width:460px;width:100%;max-height:88dvh;overflow:auto;background:#2b0a14;color:#f6e6c7;border:1px solid #bd9c65;border-radius:12px;padding:24px;box-shadow:0 12px 80px #000b}.sheet h2{font-size:23px;font-weight:500;margin:0 35px 20px 0}.sheet .close{position:absolute;right:16px;top:14px}.sheet .setting{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid #9c744133;font:13px var(--sans)}.sheet select{background:#431120;border:1px solid #a17e4c;color:#fff0d4;padding:8px;max-width:160px}.sheet input[type=checkbox]{accent-color:#b89257;width:21px;height:21px}.sheet input[type=range]{max-width:150px;accent-color:#b89257}.sheet .small{margin:12px 0}.sheet .mini-button{margin:5px 4px 5px 0}.danger{color:#ffbba7!important}.log-entry{border-bottom:1px solid #906a3a66;padding:14px 0;font-size:14px}.log-entry small{color:var(--gold);display:block;font:11px var(--sans);margin-bottom:5px}.log-entry .play-button{display:inline-flex;margin-top:8px}.checkpoint{display:block;text-align:left;width:100%;border:1px solid #9f7b48;padding:12px;background:#3d1220;color:#f3dfba;border-radius:7px;margin:10px 0}.checkpoint small{display:block;color:#bda17f;font:11px var(--sans);margin-top:4px}.empty{padding:30px 10px;text-align:center;color:#bda38a;font-size:13px}#toast{position:fixed;z-index:30;bottom:30px;left:50%;transform:translateX(-50%);width:max-content;max-width:90vw;padding:12px 18px;border:1px solid #bc9a61;border-radius:8px;background:#1d0a12f5;color:#f8e6bd;font:12px/1.6 var(--sans);opacity:0;pointer-events:none;transition:opacity .2s}#toast.show{opacity:1}.overlay-actions{display:flex;gap:8px;margin-top:20px}.overlay-actions button{flex:1}.file-label{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1px solid #a6804b;padding:13px;border-radius:6px;background:#431020;margin:10px 0;font-size:13px}.record-count{font:12px var(--sans);color:#d2b889}.notice-chip{font:10px var(--sans);color:#d3b49a;margin-top:8px}.call-end-button{background:transparent;border:1px solid #a98755;border-radius:7px;padding:8px 16px;color:var(--gold);font:12px var(--sans);margin-top:12px}@keyframes arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{50%{opacity:.35}}@keyframes ring{50%{box-shadow:0 0 0 16px #ad7d3a22,inset 0 0 0 4px #2c0812}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}@media(min-width:600px){#app{height:min(900px,100dvh);box-shadow:0 0 80px #000}.home-scroll{padding-top:120px}}@media(max-width:360px){.header-name{font-size:21px}.app-header{gap:6px;padding-left:10px;padding-right:10px}.conversation{padding-left:10px;padding-right:10px}.bubble{font-size:14px;padding:10px;gap:6px}.choice{font-size:14px}.header-sub{font-size:9px}}
