:root{--bg-primary: #0a0a0a;--bg-secondary: #111111;--bg-panel: #1a1a1a;--text-primary: #d4d4d4;--text-secondary: #888888;--accent-red: #8b0000;--accent-red-bright: #c41e3a;--accent-gold: #c9a96e;--accent-white: #e8e8e8;--border-color: #2a2a2a;--font-body: "Noto Serif SC", "Source Han Serif SC", serif}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.8;min-height:100vh;overflow-x:hidden}#root{min-height:100vh}.app{display:flex;min-height:100vh}.narrative-area{flex:1;padding:2rem 3rem;max-width:800px;margin:0 auto}.status-sidebar{width:280px;background:var(--bg-secondary);border-left:1px solid var(--border-color);padding:2rem 1.5rem;position:fixed;right:0;top:0;bottom:0;overflow-y:auto}.title-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center;animation:fadeIn 2s ease}.title-screen h1{font-size:3rem;color:var(--accent-red-bright);letter-spacing:.3em;margin-bottom:.5rem;text-shadow:0 0 30px rgba(139,0,0,.5)}.title-screen .subtitle{font-size:1.1rem;color:var(--text-secondary);margin-bottom:3rem;letter-spacing:.2em}.title-screen .protocol-text{font-size:.85rem;color:var(--accent-gold);opacity:.7;margin-top:2rem}.char-creation{max-width:700px;margin:2rem auto;animation:fadeIn 1s ease}.char-creation h2{color:var(--accent-gold);margin-bottom:1.5rem;font-size:1.5rem}.char-creation h3{color:var(--accent-gold);margin-bottom:1rem;font-size:1.1rem}.char-creation label{display:block;margin-bottom:1.5rem;color:var(--text-secondary);font-size:.9rem}.char-creation select,.char-creation input{width:100%;padding:.8rem 1rem;background:var(--bg-panel);border:1px solid var(--border-color);color:var(--text-primary);font-family:var(--font-body);font-size:1rem;margin-top:.5rem;border-radius:2px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.char-creation select:focus,.char-creation input:focus{outline:none;border-color:var(--accent-red)}.step-indicator{display:flex;gap:1.5rem;margin-bottom:2rem;font-size:.85rem;color:var(--text-secondary)}.step-indicator .active{color:var(--accent-gold);font-weight:700}.step-content{animation:fadeIn .5s ease}.hint-text{color:var(--text-secondary);font-size:.85rem;margin-bottom:1.5rem}.background-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.8rem;margin-top:.5rem}.background-card{background:var(--bg-panel);border:1px solid var(--border-color);padding:1rem;cursor:pointer;transition:all .2s ease;border-radius:2px}.background-card:hover{border-color:var(--accent-red)}.background-card.selected{border-color:var(--accent-red-bright);background:#8b00001a}.background-card .bg-title{color:var(--accent-white);font-weight:700;font-size:1rem;margin-bottom:.3rem}.background-card .bg-identity{color:var(--accent-gold);font-size:.75rem;margin-bottom:.5rem}.background-card .bg-desc{color:var(--text-secondary);font-size:.8rem;line-height:1.5;margin-bottom:.5rem}.background-card .bg-bonus{color:#6a6;font-size:.75rem}.background-card .bg-talent{color:var(--text-secondary);font-size:.7rem;opacity:.7}.talent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.8rem}.talent-card{background:var(--bg-panel);border:1px solid var(--border-color);padding:1rem;cursor:pointer;transition:all .2s ease;border-radius:2px}.talent-card:hover{border-color:var(--accent-gold)}.talent-card.selected{border-color:var(--accent-gold);background:#c9a96e1a}.talent-card .talent-name{color:var(--accent-gold);font-weight:700;margin-bottom:.4rem}.talent-card .talent-desc{color:var(--text-secondary);font-size:.8rem;line-height:1.4}.points-remaining{color:var(--accent-gold);font-size:1.1rem;margin-bottom:1.5rem;padding:.8rem 1rem;background:var(--bg-panel);border:1px solid var(--border-color)}.points-remaining .points-zero{color:#6a6}.stat-row{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0;border-bottom:1px solid var(--border-color)}.stat-label{display:flex;flex-direction:column}.stat-name{color:var(--text-primary);font-size:.95rem}.stat-detail{color:var(--text-secondary);font-size:.7rem}.stat-controls{display:flex;align-items:center;gap:1rem}.btn-stat{width:32px;height:32px;background:var(--bg-panel);border:1px solid var(--border-color);color:var(--text-primary);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.btn-stat:hover:not(:disabled){border-color:var(--accent-red);background:#8b00001a}.btn-stat:disabled{opacity:.3;cursor:not-allowed}.stat-value{color:var(--accent-white);font-size:1.2rem;min-width:2rem;text-align:center;font-weight:700}.stat-preview{margin-top:1.5rem;padding:1rem;background:var(--bg-panel);border:1px solid var(--border-color);border-radius:2px}.stat-preview h4{color:var(--accent-gold);font-size:.85rem;margin-bottom:.8rem;letter-spacing:.1em}.preview-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;text-align:center}.preview-item{display:flex;flex-direction:column;gap:.3rem}.preview-label{color:var(--text-secondary);font-size:.7rem}.preview-value{color:var(--accent-white);font-size:1rem;font-weight:700}.confirm-card{background:var(--bg-panel);border:1px solid var(--border-color);padding:1.5rem;border-radius:2px;margin-bottom:1.5rem}.confirm-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--border-color);font-size:.9rem}.confirm-row span:first-child{color:var(--text-secondary)}.confirm-row span:last-child{color:var(--accent-white)}.step-nav{display:flex;gap:1rem;margin-top:1.5rem}.btn-secondary{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);padding:.8rem 2rem;font-family:var(--font-body);font-size:.9rem;cursor:pointer;transition:all .3s ease}.btn-secondary:hover{border-color:var(--text-secondary);color:var(--text-primary)}.narrative-panel{animation:fadeIn .8s ease}.narrative-panel .event-description{font-size:1.05rem;line-height:2;margin-bottom:2rem;white-space:pre-wrap}.narrative-panel .place-tag{display:inline-block;font-size:.8rem;color:var(--accent-gold);border:1px solid var(--accent-gold);padding:.2rem .8rem;margin-bottom:1.5rem;opacity:.8}.choice-panel{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}.choice-btn{background:var(--bg-panel);border:1px solid var(--border-color);color:var(--text-primary);padding:1.2rem 1.5rem;text-align:left;font-family:var(--font-body);font-size:.95rem;cursor:pointer;transition:all .3s ease;position:relative}.choice-btn:hover{border-color:var(--accent-red-bright);background:#8b00001a}.choice-btn .hint{display:block;font-size:.8rem;color:var(--text-secondary);margin-top:.4rem;font-style:italic}.choice-btn .letter{color:var(--accent-gold);margin-right:.8rem;font-weight:700}.status-panel h3{color:var(--accent-gold);font-size:.9rem;letter-spacing:.15em;margin-bottom:1rem;text-transform:uppercase}.status-item{margin-bottom:1rem;font-size:.85rem}.status-item .label{color:var(--text-secondary);font-size:.75rem;display:block;margin-bottom:.2rem}.status-item .value{color:var(--text-primary)}.sanity-bar{width:100%;height:6px;background:var(--bg-panel);border-radius:3px;overflow:hidden;margin-top:.4rem}.sanity-bar .fill{height:100%;transition:width .5s ease;border-radius:3px}.sanity-high{background:#2d6a2d}.sanity-mid{background:#b8860b}.sanity-low{background:#8b0000}.loop-count{color:var(--accent-red-bright);font-size:1.2rem;font-weight:700}.restart-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center;animation:fadeIn 1s ease}.restart-screen h2{color:var(--accent-red-bright);font-size:2rem;letter-spacing:.3em;margin-bottom:1rem}.restart-screen .tt2-text{color:var(--accent-gold);font-size:.9rem;opacity:0;animation:fadeIn 2s ease 1s forwards}.btn-primary{background:transparent;border:1px solid var(--accent-red);color:var(--accent-red-bright);padding:.8rem 2rem;font-family:var(--font-body);font-size:1rem;cursor:pointer;transition:all .3s ease;letter-spacing:.1em}.btn-primary:hover{background:#8b000033;border-color:var(--accent-red-bright)}.loading{display:flex;align-items:center;justify-content:center;padding:2rem;color:var(--text-secondary)}.loading:after{content:"";width:20px;height:20px;border:2px solid var(--accent-red);border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite;margin-left:1rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-color)}@media(max-width:900px){.app{flex-direction:column}.narrative-area{padding:1rem;max-width:100%}.status-sidebar{position:sticky;top:0;z-index:10;width:100%;max-width:100%;padding:.6rem 1rem;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;font-size:.75rem;background:#0a0a0cf2;border-bottom:1px solid #222;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.status-sidebar h3{display:none}.status-sidebar .status-item{display:inline-flex;gap:.3rem;align-items:center}.status-sidebar .label{display:none}.status-sidebar .sanity-bar{width:60px;height:4px;display:inline-block}.status-sidebar .stat-detail{display:none!important}.time-dot-row{gap:3px}.time-dot{width:6px;height:6px}.choice-btn{padding:1rem;font-size:.95rem;min-height:48px}.choice-btn .letter{font-size:1rem;width:28px;height:28px}.custom-choice-panel{flex-direction:column}.custom-choice-input{padding:.8rem;font-size:.9rem}.deep-night-warning,.sanity-warning{font-size:.8rem}}.cursor-blink{animation:blink .8s step-end infinite;color:var(--accent-gold);font-weight:700}@keyframes blink{50%{opacity:0}}.choice-btn-custom{border-color:#444;color:#777;font-style:italic}.choice-btn-custom:hover{border-color:var(--accent-gold);color:var(--accent-gold)}.custom-choice-panel{display:flex;gap:.5rem;margin-top:.5rem;padding:.75rem;border:1px solid #333;border-radius:4px;background:#0000004d}.custom-choice-input{flex:1;background:transparent;border:1px solid #444;border-radius:3px;color:var(--text-primary);padding:.5rem .75rem;font-family:var(--font-body);font-size:.9rem;outline:none}.custom-choice-input:focus{border-color:var(--accent-gold)}.custom-choice-input::placeholder{color:#555}.custom-choice-submit,.custom-choice-cancel{padding:.5rem 1rem;border:1px solid #444;border-radius:3px;background:transparent;color:var(--text-secondary);cursor:pointer;font-family:var(--font-body);font-size:.85rem}.custom-choice-submit{border-color:var(--accent-gold);color:var(--accent-gold)}.custom-choice-submit:disabled{opacity:.3;cursor:not-allowed}.custom-choice-cancel:hover{border-color:#666;color:#999}.time-dot-row{display:flex;gap:.4rem;margin:.5rem 0 .8rem}.time-dot{width:8px;height:8px;border-radius:50%;background:var(--border-color);transition:all .3s ease}.time-dot.passed{background:var(--accent-red);opacity:.6}.time-dot.current{background:var(--accent-gold);box-shadow:0 0 6px var(--accent-gold)}.deep-night-warning{color:var(--accent-red);font-size:.8rem;padding:.4rem .6rem;border:1px solid var(--accent-red);margin-bottom:.8rem;animation:pulse 2s ease infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.sanity-warning{color:var(--accent-red);font-size:.75rem;margin-top:.3rem;animation:pulse 1.5s ease infinite}.choice-btn-rest{border-color:#2d6a2d;color:#6a6;margin-top:.5rem}.choice-btn-rest:hover{border-color:#6a6;background:#2d6a2d1a}.time-transition{margin-bottom:1rem;padding:.8rem 1rem;background:#c9a96e14;border-left:2px solid var(--text-gold);font-style:italic;color:var(--text-secondary);font-size:.85rem;line-height:1.6;animation:fadeIn .8s ease}.sanity-warning-banner{margin-bottom:1rem;padding:.8rem 1rem;background:#c41e3a1f;border-left:2px solid #c41e3a;color:#e8a0a0;font-size:.85rem;line-height:1.6;display:flex;align-items:flex-start;gap:.5rem;animation:fadeIn .6s ease}.sanity-warning-banner .warning-icon{font-size:1rem;flex-shrink:0;margin-top:1px}.deep-night-warning-banner{margin-bottom:1rem;padding:.8rem 1rem;background:#6a286a26;border-left:2px solid #6a286a;color:#c8a0c8;font-size:.85rem;line-height:1.6;display:flex;align-items:flex-start;gap:.5rem;animation:pulse 3s ease infinite}.deep-night-warning-banner .warning-icon{font-size:1rem;flex-shrink:0;margin-top:1px}.sanity-recovery-banner{margin-bottom:1rem;padding:.8rem 1rem;background:#64a0641a;border-left:2px solid #6a8;color:#a0c8a0;font-size:.85rem;line-height:1.6;animation:fadeIn .6s ease}.talent-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.3rem}.talent-category{font-size:.7rem;color:#888}.talent-rarity{font-size:.65rem;text-transform:uppercase;letter-spacing:.5px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}