/* Standalone title composition: unaffected by faction colours or dark mode. */
.title-screen [hidden] {display:none!important;}
html:has(body.is-title-screen) { overflow:hidden!important; scrollbar-gutter:auto!important; }
body.is-title-screen { overflow:hidden!important; background:#151921!important; }
body.is-title-screen .site-wrap { visibility:hidden; }
body.is-title-screen #toast { visibility:hidden; }
.title-screen { position:fixed; inset:0; z-index:10000; isolation:isolate; overflow:hidden; background:#1b1f27; color:#f4e7c8; font-family:'Noto Serif KR',serif; }
.title-screen[hidden] { display:none!important; }
.title-screen .title-landscape { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:65% 55%; filter:none!important; opacity:1!important; mix-blend-mode:normal!important; }
.title-vignette { position:absolute; inset:0; background:linear-gradient(90deg,rgba(16,20,28,.94),rgba(20,24,32,.8) 30%,rgba(17,21,29,.18) 69%),linear-gradient(0deg,#13171f 0%,transparent 35%,rgba(17,21,29,.12) 75%,rgba(17,21,29,.5)); }
.title-frame { position:absolute; inset:24px; border:1px solid #d9bb7750; pointer-events:none; }
.title-frame::before,.title-frame::after { content:''; position:absolute; width:52px;height:52px; border-color:#dbc18b; border-style:solid; }
.title-frame::before { top:-1px;left:-1px;border-width:2px 0 0 2px; }
.title-frame::after { bottom:-1px;right:-1px;border-width:0 2px 2px 0; }
.title-content { position:absolute; top:15%; left:9%; width:min(540px,47%); text-align:center; pointer-events:none; }
.title-era { margin:0 0 26px; font-size:12px;letter-spacing:.42em;color:#ddc795; }
.title-wordmark { position:relative;display:inline-block; }
.title-wordmark h1 { margin:0!important;font-family:'Noto Serif KR',serif;font-size:clamp(76px,9.4vw,148px);font-weight:900;line-height:1.2;letter-spacing:.03em;color:#f5dfac!important;text-shadow:0 3px 0 #3d301b,0 8px 32px #0009; }
.title-seal { position:absolute;top:14%;right:-42px; padding:8px 5px;border:1px solid #eabf83;background:#772d25;color:#f7e1b9;font-size:14px;line-height:1.3;box-shadow:inset 0 0 0 3px #772d25,inset 0 0 0 4px #d2a464;transform:rotate(5deg); }
.title-subtitle { margin:16px 0 0;font-size:clamp(20px,2.5vw,32px);letter-spacing:.38em;text-indent:.38em;color:#f4e7c8; }
.title-divider { display:flex;align-items:center;justify-content:center;gap:18px;margin:28px auto 22px;color:#c4a36a;font-size:8px; }
.title-divider::before,.title-divider::after {content:'';width:90px;height:1px;background:linear-gradient(90deg,transparent,#c4a36a);}
.title-divider::after {transform:rotate(180deg);}
.title-verse {margin:0;color:#e0e4ec;font-size:16px;line-height:2;letter-spacing:.05em;}
.title-screen .title-enter {position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;height:100%;padding:0 25px max(104px,14vh);margin:0;border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important;color:#f5e5bf!important;cursor:pointer;font-family:inherit;transform:none!important;filter:none!important;}
.title-screen .title-enter::before,.title-screen .title-enter::after {display:none!important;}
.title-enter-prompt {font-size:19px;font-weight:600;letter-spacing:.1em;text-shadow:0 2px 12px #000;}
.title-enter-prompt::before,.title-enter-prompt::after {content:'—';margin:0 16px;color:#bca477;}
.title-enter-hint {font-family:'Noto Sans KR',sans-serif;font-size:11px;letter-spacing:.08em;color:#c5c9d1;}
.title-screen .title-enter:focus-visible {outline:2px solid #f0d299;outline-offset:-34px;}
.title-screen .title-enter:disabled {opacity:1;cursor:wait;}
.title-footnote {position:absolute;bottom:max(39px,env(safe-area-inset-bottom));left:0;width:100%;text-align:center;color:#b3b7bf;font-size:10px;letter-spacing:.12em;pointer-events:none;margin:0;}
@media(max-width:600px) {
 .title-frame {inset:14px;}
 .title-screen .title-landscape {object-position:73% center;}
 .title-vignette {background:linear-gradient(180deg,rgba(16,20,28,.76),rgba(16,20,28,.55) 37%,rgba(16,20,28,.12) 55%,#13171f 95%);}
 .title-content {top:max(65px,12%);left:7%;width:86%;}
 .title-wordmark h1 {font-size:clamp(68px,21vw,116px);}
 .title-seal {right:-31px;font-size:11px;padding:6px 4px;}
 .title-era {font-size:10px;margin-bottom:20px;}
 .title-subtitle {font-size:23px;margin-top:12px;}
 .title-divider {margin:20px auto 16px;}
 .title-verse {font-size:13px;line-height:1.9;}
 .title-screen .title-enter {padding-bottom:max(100px,13vh);}
 .title-enter-prompt {font-size:16px;letter-spacing:.04em;}
 .title-enter-prompt::before,.title-enter-prompt::after {margin:0 10px;}
 .title-footnote {bottom:max(32px,env(safe-area-inset-bottom));font-size:9px;}
}
@media(max-height:540px) {
 .title-content {top:8%;left:7%;width:47%;}
 .title-wordmark h1 {font-size:64px;}
 .title-era {margin-bottom:8px;font-size:9px;}
 .title-subtitle {font-size:18px;margin-top:6px;}
 .title-divider {margin:14px auto 10px;}
 .title-verse {font-size:12px;}
 .title-screen .title-enter {padding-bottom:60px;}
 .title-enter-hint {display:none;}
 .title-footnote {bottom:26px;}
}
.title-screen.is-menu .title-content {left:max(5%,calc((100% - 1180px)/2));width:min(540px,43%);top:23%;}
.title-screen.is-menu .title-wordmark h1 {font-size:clamp(64px,7vw,110px);}
.main-menu,.menu-settings-panel {position:absolute;right:max(8%,calc((100% - 1180px)/2));top:50%;transform:translateY(-50%);width:min(390px,40%);max-height:calc(100% - 100px);overflow-y:auto;padding:24px;box-sizing:border-box;background:linear-gradient(145deg,#1c2028ed,#141820f5);border:1px solid #c5a8708c;box-shadow:0 16px 55px #0005,inset 0 0 0 5px #dcc08a0a;}
.title-screen .menu-eyebrow {margin:0 0 8px;color:#c9b27e;font-size:11px;letter-spacing:.18em;}
.title-screen .main-menu h2,.title-screen .menu-settings-panel h2 {margin:0 0 22px;color:#f5e3bc;font-family:inherit;font-size:21px;line-height:1.5;outline:none;}
.main-menu-options {display:grid;gap:10px;}
.title-screen .main-menu-options button {display:grid;grid-template-columns:38px 1fr 12px;align-items:center;gap:13px;width:100%;padding:15px 14px;border:1px solid #b79b675e;border-radius:3px;background:linear-gradient(100deg,#d8b77414,#d8b77404)!important;color:#eee3c9!important;text-align:left;font-family:inherit;box-shadow:none!important;transform:none!important;filter:none!important;cursor:pointer;}
.title-screen .main-menu-options button::before,.title-screen .main-menu-options button::after {display:none!important;}
.title-screen .main-menu-options button:focus-visible,.title-screen #menu-settings-back:focus-visible {outline:2px solid #eacf97;outline-offset:3px;}
.title-screen .main-menu-options button:disabled {opacity:.4;cursor:not-allowed;}
.main-menu-options .menu-glyph {display:grid;place-items:center;width:36px;height:40px;color:#e4c58b;border:1px solid #c6a46b80;font-size:22px;}
.main-menu-options strong {display:block;font-size:18px;line-height:1.4;}
.main-menu-options small {display:block;color:#bfc3cb;font:11px/1.6 'Noto Sans KR',sans-serif;margin-top:4px;overflow-wrap:anywhere;}
.menu-appearance {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0;color:#d8dce4;font:13px/1.5 'Noto Sans KR',sans-serif;border-top:1px solid #bfab7638;}
.title-screen .menu-settings-panel .bgm-player {display:flex;flex-wrap:wrap;gap:12px;padding:0 0 20px;margin:0;border:0;background:transparent;color:#d8dce4;font:13px/1.6 'Noto Sans KR',sans-serif;}
.title-screen .menu-settings-panel .bgm-label,.title-screen .menu-settings-panel .bgm-status,.title-screen .menu-settings-panel .bgm-volume {flex-basis:100%;color:#cdd1d9;}
.title-screen .menu-settings-panel select,.title-screen .menu-settings-panel button {min-height:38px;padding:8px 10px;border:1px solid #bca77480;border-radius:3px;background:#23272f!important;color:#f0e4c8!important;font-size:12px;box-shadow:none!important;transform:none!important;}
.title-screen .menu-settings-panel select {max-width:100%;}
.title-screen .menu-settings-panel select:first-of-type {width:100%;}
.title-screen #menu-settings-back {width:100%;margin-top:12px;font-family:inherit;cursor:pointer;}
.main-menu-open {border:1px solid #b2b6be80;border-radius:7px;background:transparent;color:#e7ebf3;padding:6px 10px;min-height:36px;font:600 11px/1.5 var(--sans);white-space:nowrap;cursor:pointer;}
@media(max-width:800px) {.header-tools .main-menu-open{min-height:27px;padding:3px 7px;font-size:10px;}}
@media(max-width:600px) {
 .title-screen.is-menu .title-content {top:6%;left:7%;width:86%;}
 .title-screen.is-menu .title-wordmark h1 {font-size:60px;}
 .title-screen.is-menu .title-era {font-size:9px;margin-bottom:10px;}
 .title-screen.is-menu .title-subtitle {font-size:18px;margin-top:5px;}
 .title-screen.is-menu .title-divider,.title-screen.is-menu .title-verse {display:none;}
 .main-menu,.menu-settings-panel {right:6%;width:88%;top:30%;transform:none;max-height:calc(70% - 60px);padding:20px;}
 .title-screen .main-menu h2,.title-screen .menu-settings-panel h2 {font-size:18px;margin-bottom:16px;}
 .title-screen .main-menu-options button {padding:12px;gap:10px;}
 .main-menu-options strong {font-size:17px;}
 .main-menu-options {gap:8px;}
 .main-menu-options small {font-size:10px;}
}
@media(max-height:680px) and (max-width:600px) {
 .title-screen.is-menu .title-content {top:4%;}
 .title-screen.is-menu .title-wordmark h1 {font-size:45px;}
 .title-screen.is-menu .title-era {display:none;}
 .title-screen.is-menu .title-subtitle {font-size:15px;}
 .main-menu,.menu-settings-panel {top:23%;max-height:calc(77% - 42px);padding:14px;}
 .title-screen .main-menu-options button {padding:9px;}
 .title-screen.is-menu .title-footnote {bottom:18px;}
}
@media(max-height:480px) and (min-width:601px) {
 .title-screen.is-menu .title-content {top:23%;}
 .title-screen.is-menu .title-verse,.title-screen.is-menu .title-divider {display:none;}
 .main-menu,.menu-settings-panel {max-height:calc(100% - 48px);right:5%;width:44%;padding:14px;}
 .title-screen .main-menu h2 {margin-bottom:10px;font-size:17px;}
 .title-screen .main-menu-options button {padding:7px 10px;}
 .main-menu-options strong {font-size:15px;}
 .main-menu-options small {font-size:10px;}
 .title-screen.is-menu .title-footnote {display:none;}
}