* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; min-height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif; }
body { background-color: #f5f5f5; color: #222; transition: background-color .2s, color .2s; }
#app, .screen { width: 100%; min-height: 100vh; }
#start-screen { display:flex; justify-content:center; align-items:center; padding:24px; }
.start-container { width:100%; max-width:500px; padding:32px; background:#fff; border-radius:16px; text-align:center; box-shadow:0 4px 20px rgba(0,0,0,.1); }
.start-container h1 { margin-top:0; }
.primary-button { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:0 20px; background:#333; color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:bold; cursor:pointer; }
.primary-button:active { transform:scale(.97); }
.secondary-button { min-height:42px; padding:0 16px; background:#fff; color:#333; border:1px solid #ccc; border-radius:8px; cursor:pointer; }
.danger-button { border-color:#d32f2f; color:#d32f2f; }
.danger-button:active { background:#ffebee; }
.error-message { margin-top:20px; color:#d32f2f; white-space:pre-wrap; }
.load-complete-message { position:fixed; left:50%; bottom:30px; z-index:1000; transform:translateX(-50%); width:calc(100% - 40px); max-width:500px; padding:16px 20px; background:#333; color:#fff; border-radius:12px; text-align:center; font-size:15px; font-weight:bold; box-shadow:0 4px 16px rgba(0,0,0,.25); animation:loadMessageAppear .25s ease-out; }
@keyframes loadMessageAppear { from { opacity:0; transform:translate(-50%,20px); } to { opacity:1; transform:translate(-50%,0); } }
#app-header { position:sticky; top:0; z-index:100; display:flex; align-items:center; min-height:60px; padding:8px 10px; background:#fff; border-bottom:1px solid #ddd; }
.header-button { min-width:50px; min-height:42px; background:transparent; border:none; border-radius:8px; cursor:pointer; }
.header-title { flex:1; text-align:center; }
.header-title h1 { margin:0; font-size:18px; }
#script-version { color:#888; font-size:11px; }
#mode-navigation { display:flex; position:sticky; top:60px; z-index:90; background:#fff; border-bottom:1px solid #ddd; }
.mode-button { flex:1; min-height:48px; background:transparent; border:none; border-bottom:3px solid transparent; font-size:14px; cursor:pointer; }
.mode-button.active { border-bottom-color:#333; font-weight:bold; }
.mode-controls { display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px; background:#eee; }
.settings-panel { padding:16px; background:#fff; border-bottom:1px solid #ddd; }
.settings-panel h2 { margin-top:0; font-size:18px; }
.role-mask-list { display:flex; flex-wrap:wrap; gap:8px; }
.role-mask-button { min-height:42px; padding:0 14px; background:#fff; border:1px solid #bbb; border-radius:8px; cursor:pointer; }
.role-mask-button.masked { background:#fff0f0; color:#c62828; border-color:#c62828; font-weight:bold; }
#script-container { width:100%; max-width:800px; margin:0 auto; padding:20px 16px 250px; }
.script-item { margin-bottom:20px; }
.script-item.music { margin:30px 0; padding:14px; background:#e8e8e8; border-radius:10px; text-align:center; font-weight:bold; }
.script-item.scene { margin:30px 0 20px; padding:10px 14px; border-left:5px solid #333; font-size:19px; font-weight:bold; }
.script-item.stage { color:#666; line-height:1.8; font-style:italic; }
.script-item.dialog { padding:10px; border-radius:10px; }
.dialog-roles { margin-bottom:4px; color:#666; font-size:14px; font-weight:bold; }
.dialog-text { font-size:18px; line-height:1.8; white-space:pre-wrap; }
.script-item.is-masked { background:#222; color:transparent; cursor:pointer; user-select:none; }
.script-item.is-masked * { color:transparent; }
.script-item.is-masked::after { content:"タップして表示"; display:block; color:#fff; text-align:center; font-size:13px; }
.mask-setting-target { position:relative; cursor:pointer; outline:2px dashed transparent; transition:background-color .15s, color .15s; }
.mask-setting-target.individual-masked { background:#fff0f0; color:#c62828; outline-color:#e57373; }
.mask-setting-target.individual-masked::before { content:"🔒 "; }
.mask-setting-target.role-masked { background:#fff8e1; color:#e65100; outline-color:#ffb74d; }
.mask-setting-target.role-masked::before { content:"👤🔒 "; }
.mask-setting-target.both-masked { background:#f3e5f5; color:#7b1fa2; outline-color:#ba68c8; }
.mask-setting-target.both-masked::before { content:"🔒👤🔒 "; }
body.dark-mode { background:#121212; color:#eee; }
body.dark-mode .start-container, body.dark-mode #app-header, body.dark-mode #mode-navigation, body.dark-mode .settings-panel { background:#1e1e1e; color:#eee; }
body.dark-mode #app-header, body.dark-mode #mode-navigation { border-color:#444; }
body.dark-mode .mode-controls { background:#181818; }
body.dark-mode .secondary-button, body.dark-mode .role-mask-button { background:#222; color:#eee; border-color:#555; }
body.dark-mode .role-mask-button.masked { background:#3a2020; color:#ff8a80; border-color:#ff8a80; }
body.dark-mode .script-item.music { background:#292929; }
body.dark-mode .script-item.scene { border-left-color:#eee; }
body.dark-mode .script-item.stage, body.dark-mode .dialog-roles { color:#aaa; }
body.dark-mode .mask-setting-target.individual-masked { background:#3a2020; color:#ff8a80; }
body.dark-mode .mask-setting-target.role-masked { background:#3a3020; color:#ffb74d; }
body.dark-mode .mask-setting-target.both-masked { background:#35203a; color:#ce93d8; }
@media (max-width:600px) { #script-container { padding:16px 12px 250px; } .dialog-text { font-size:17px; } }