/* Full-screen, cinematic title and character creation. Scoped away from the HUD. */
#title {
  --class-color:#d9b571; --class-rgb:217,181,113;
  display:block; overflow-x:hidden; overflow-y:auto; padding:0; background:#080d12;
  color:#e3ddcf; scrollbar-gutter:stable; overscroll-behavior:contain;
}
#title .title-backdrop { position:absolute; inset:0; z-index:-3; overflow:hidden; pointer-events:none; background:url('../assets/ui/title/sundered-citadel.webp') 61% center / cover no-repeat; }
#title::before { z-index:-2; background:linear-gradient(90deg,rgba(4,7,10,.84),rgba(4,7,10,.53) 35%,rgba(4,7,10,.02) 68%),linear-gradient(0deg,#05080cec,transparent 35%,transparent 80%,#03060970); }
#title::after { display:none; }
#title .title-atmosphere { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; opacity:1; transition:opacity .6s; }
#title:not([data-screen='main']) .title-atmosphere { opacity:.65; }
#titleInner { width:100%; min-height:100%; padding:0; text-align:left; background:none; border:0; outline:0; box-shadow:none; clip-path:none; backdrop-filter:none; }
#titleInner::before,#titleInner::after { display:none; }
#title .title-brand { position:relative; }
#title h1 { font-size:clamp(46px,6.9vw,112px); letter-spacing:.075em; text-indent:0; line-height:1; margin:0; font-weight:normal; background:linear-gradient(180deg,#fff0d4 12%,#debf88 49%,#a07541 75%,#f2d5a1); filter:drop-shadow(0 4px 2px #000a) drop-shadow(0 0 30px #f29f481a); }
#title h1 { background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-shadow:none; }
#title h2 { margin:16px 0 0; padding:0; font-size:clamp(10px,1vw,14px); letter-spacing:.5em; color:#c5b18f; font-weight:normal; }
#title h2::before,#title h2::after { display:none; }
#titleMenu { display:block; }
#title button,#title input { font-family:inherit; }
#title a.title-action { text-decoration:none; }
#title a.title-action:focus-visible { outline:2px solid #ffe1a4; outline-offset:5px; }
#title button { cursor:pointer; color:inherit; }
#title button:disabled { cursor:wait; opacity:.6; }
#title button:focus-visible,#title input:focus-visible,#title [role='tabpanel']:focus-visible { outline:2px solid #ffe1a4; outline-offset:5px; }
#title [tabindex='-1']:focus { outline:none; }
.title-kicker { display:block; font:10px/1.5 var(--font-game); letter-spacing:.22em; color:var(--class-color); text-transform:uppercase; }
#title .title-action { position:relative; display:block; min-height:56px; padding:18px 54px 18px 24px; margin:0; border:1px solid #b4945c80; border-radius:0; background:linear-gradient(105deg,#16191beb,#101418bf); color:#e3d0af; font-size:13px; font-weight:600; letter-spacing:.2em; text-align:left; transition:background .2s,border-color .2s,box-shadow .2s; }
#title .title-action::after { content:'⟶'; position:absolute; top:50%; right:21px; transform:translateY(-50%); color:#e7c387; font:23px var(--font-game); letter-spacing:0; }
#title .title-action:hover { border-color:#e1ba79; background:linear-gradient(105deg,#43341ee8,#151b20ed); box-shadow:0 0 26px #d7983620; }
#title .title-action.primary { border-color:#d2ae71; background:linear-gradient(115deg,#6f4c29ed,#382719ef 65%,#201916eb); color:#fff0d1; box-shadow:inset 0 0 0 3px #05050450,inset 0 1px #fff5da30,0 0 36px #d37d2220; }
#title .title-action.primary:hover { background:linear-gradient(115deg,#926336,#4e3721 65%,#32261a); box-shadow:inset 0 0 0 3px #05050450,0 0 35px #e9a75a33; }
#title .title-action.quiet { border-color:transparent; background:transparent; color:#bfb4a1; padding-left:0; min-height:42px; font-size:11px; }
#title .title-action.quiet::after { right:22px; font-size:19px; color:#a89980; }
#title .title-action.quiet:hover { color:#ffe2b0; background:#a58b5710; }
#title[data-screen='main'] #titleInner { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:60px 6vw; }
#title[data-screen='main'] .title-brand { margin-bottom:32px; }
#title[data-screen='main'] .title-brand h2 { display:none; }
.splash-actions { display:grid; gap:12px; width:min(365px,85vw); margin-top:0; }
#title:not([data-screen='main'])::before { background:linear-gradient(90deg,#05090eef,rgba(4,8,12,.8) 32%,rgba(4,8,12,.17) 64%,rgba(4,8,12,.35)),linear-gradient(0deg,#04080cf5,transparent 48%,#060a10a0); }
#title:not([data-screen='main']) #titleInner { width:min(1440px,100%); margin:auto; padding:28px 4vw 22px; }
#title:not([data-screen='main']) .title-brand { display:flex; align-items:center; gap:22px; min-height:35px; }
#title:not([data-screen='main']) h1 { font-size:28px; letter-spacing:.1em; }
#title:not([data-screen='main']) .title-brand h2 { margin:0; font-size:9px; letter-spacing:.3em; border-left:1px solid #766951; padding-left:22px; color:#a79d8b; }
.selection-top { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:23px 0 15px; border-bottom:1px solid #bba07730; }
#title .title-back { background:none; border:0; font:10px/1.6 var(--font-game); letter-spacing:.16em; color:#bcb6a9; padding:8px 0; }
#title .title-back:hover { color:#ffe1a4; }
.selection-top > .title-kicker { margin-left:auto; }
.selection-count { font:9px/1.5 var(--font-game); letter-spacing:.17em; color:#8e989a; border-left:1px solid #b5a37b40; padding-left:20px; }
.selection-scene { position:relative; min-height:360px; height:clamp(365px,calc(100dvh - 333px),650px); }
#campInfo.class-story { position:relative; z-index:1; width:43%; max-width:490px; margin:0; padding:35px 0 24px; text-align:left; min-height:0; }
#campInfo .title-kicker { font-size:10px; color:var(--class-color); }
#campInfo .class-name { margin:12px 0 10px; font-size:clamp(34px,4.6vw,68px); line-height:1.03; font-weight:normal; letter-spacing:-.035em; color:#eee8dd; text-shadow:0 2px 25px #000b; }
#campInfo .class-quote { font-size:clamp(13px,1.5vw,19px); font-style:italic; line-height:1.5; color:var(--class-color); margin:0 0 17px; }
#campInfo .class-description { max-width:385px; color:#b7bdbb; font:13px/1.75 var(--font-game); margin:0 0 22px; }
.class-disciplines { display:grid; gap:11px; padding-top:16px; border-top:1px solid rgba(var(--class-rgb),.23); max-width:370px; }
.discipline { display:grid; grid-template-columns:22px 85px 1fr; align-items:center; gap:10px; }
.discipline-index { color:var(--class-color); font-size:10px; }
.discipline strong { color:#d9d7ce; font-size:13px; font-weight:normal; }
.discipline > span:last-child { color:#969fa0; font:11px/1.3 var(--font-game); }
.hero-viewport { position:absolute; right:-2%; top:0; bottom:0; width:61%; isolation:isolate; }
.hero-halo { position:absolute; z-index:-1; inset:0; background:radial-gradient(ellipse at 50% 54%,rgba(var(--class-rgb),.16),transparent 56%); transition:background .35s; pointer-events:none; }
.hero-halo::before { content:''; position:absolute; border:1px solid rgba(var(--class-rgb),.14); box-shadow:0 0 60px rgba(var(--class-rgb),.06),inset 0 0 60px rgba(var(--class-rgb),.04); width:48%; aspect-ratio:1; border-radius:50%; top:13%; left:26%; }
#campCanvas { display:block; width:100%; height:100%; max-width:none; border:0; outline:0; box-shadow:none; background:transparent; }
.hero-controls { position:absolute; display:flex; align-items:center; justify-content:center; gap:12px; bottom:23px; width:100%; }
.gear-switch,.hero-rotation { display:flex; border:1px solid #a48b613d; background:#060c12c9; }
#title .hero-controls button { border:0; background:transparent; padding:8px 11px; font:10px/1.2 var(--font-game); color:#acb2b0; min-height:32px; }
#title .hero-controls button:hover { color:#ffe5b8; background:#ccb47b13; }
#title .gear-switch button[aria-pressed='true'] { color:var(--class-color); background:rgba(var(--class-rgb),.12); box-shadow:inset 0 -1px var(--class-color); }
#title .hero-rotation button { font:21px/1 var(--font-game); padding:3px 10px; min-width:36px; }
.hero-preview-note { position:absolute; bottom:4px; width:100%; text-align:center; color:#97a1a5; font:10px/1.4 var(--font-game); }
.class-roster { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; border-top:1px solid #b59a702e; padding-top:15px; }
#title .class-choice { position:relative; display:flex; align-items:center; gap:12px; text-align:left; min-height:82px; padding:12px 14px; border:1px solid #8a8b853a; background:linear-gradient(140deg,#171d23dd,#090e15e8); transition:background .2s,border-color .2s; }
#title .class-choice:hover { border-color:#bcae8477; background:#242a2eeb; }
#title .class-choice[aria-selected='true'] { border-color:var(--choice-color); background:linear-gradient(120deg,rgba(var(--class-rgb),.19),#12191fe8); box-shadow:inset 0 -2px var(--choice-color),0 0 24px rgba(var(--class-rgb),.06); }
.class-number { position:absolute; right:8px; top:5px; font:9px var(--font-game); color:#a6a69480; }
.class-crest { flex:0 0 42px; display:block; width:42px; height:48px; color:var(--choice-color,var(--class-color)); filter:drop-shadow(0 0 8px rgba(var(--class-rgb),.16)); }
.class-crest svg { display:block; width:100%; height:100%; }
.class-choice-text { min-width:0; max-width:100%; }
.class-choice strong { display:block; color:#dadace; font-size:14px; font-weight:normal; line-height:1.2; overflow-wrap:anywhere; }
.class-choice small { display:block; color:#8e9b9f; font:10px/1.2 var(--font-game); margin-top:6px; }
#campRow.hero-form { display:grid; grid-template-columns:minmax(160px,1fr) minmax(170px,1fr) minmax(240px,1.2fr); align-items:end; gap:28px; margin:0; padding-top:22px; }
.hero-name { color:#baac90; font:9px/1.5 var(--font-game); letter-spacing:.19em; }
#campRow #nameInput { display:block; width:100%; margin-top:8px; height:43px; padding:10px 13px; background:#070c11d9; border:1px solid #b4a07d55; color:#eee5d3; font-size:15px; text-align:left; letter-spacing:.03em; box-shadow:none; user-select:text; -webkit-user-select:text; }
#title #nameInput::placeholder { color:#8c9392; }
.hero-name-error { display:block; margin-top:6px; scroll-margin-block:8px; color:#ffb798; font:12px/1.4 var(--font-game); letter-spacing:0; }
.hero-name-error[hidden] { display:none; }
#campRow #nameInput[aria-invalid='true'] { border-color:#ffb798; }
.hardcore-option { display:flex; align-items:center; gap:12px; cursor:pointer; min-height:43px; padding-bottom:1px; }
.hardcore-option input { accent-color:#dca971; width:17px; height:17px; cursor:pointer; }
.hardcore-option strong { display:block; font-size:14px; font-weight:normal; color:#c5c5b9; }
.hardcore-option small { display:block; color:#919b9e; font:10px/1.4 var(--font-game); margin-top:4px; }
.hardcore-option:has(input:checked) strong { color:#efaa8c; }
#title .hero-form .title-action { min-height:57px; width:100%; font-size:11px; text-align:center; padding-left:16px; padding-right:40px; }
.title-status { position:relative; color:#f1c886; font:13px/1.6 var(--font-game); margin-top:12px; }
.preview-error { position:absolute; inset:25% 10% auto; color:#ffb798; background:#080a0feb; padding:20px; font:13px/1.5 var(--font-game); }
.saved-story { position:relative; width:44%; padding:35px 0 20px; z-index:1; }
.saved-heading { font-size:clamp(26px,3vw,43px); line-height:1.1; color:#e5dfd2; font-weight:normal; margin:12px 0 25px; }
.saved-roster { max-height:calc(100% - 125px); overflow-y:auto; display:grid; gap:8px; padding:5px; margin:-5px; }
.saved-story { height:100%; }
.saved-row { display:flex; border:1px solid #ad9a732f; background:#0a1119d9; }
#title .saved-hero { flex:1; display:flex; align-items:center; gap:15px; text-align:left; background:none; border:0; padding:10px 13px; min-width:0; }
.saved-hero > span:last-child { min-width:0; overflow-wrap:anywhere; }
#title .saved-hero[aria-pressed='true'] { box-shadow:inset 2px 0 var(--class-color); background:rgba(var(--class-rgb),.09); }
.saved-hero strong { display:block; color:#e7dbc4; font-size:17px; font-weight:normal; }
.saved-hero small { display:block; color:#a0acaf; margin-top:5px; font:11px/1.4 var(--font-game); }
#title .delete-hero { align-self:center; padding:12px; background:transparent; border:0; color:#ad9690; font-size:20px; }
#title .delete-hero:hover { color:#ffb4a0; }
.saved-footer { display:flex; align-items:center; justify-content:space-between; gap:30px; padding-top:24px; border-top:1px solid #9b855738; }
.saved-details > strong { display:block; margin:7px 0 4px; font-size:25px; color:#ddd7c9; font-weight:normal; }
.saved-details > span:last-child { color:#a5b0b1; font:12px/1.5 var(--font-game); }
.saved-footer .title-action { width:300px; }
@media (min-width:1600px) { #title:not([data-screen='main']) #titleInner { padding-left:35px; padding-right:35px; } }
@media (max-height:760px) and (min-width:901px) {
  #title:not([data-screen='main']) #titleInner { padding-top:18px; padding-bottom:18px; }
  .selection-top { padding-top:10px; padding-bottom:9px; }
  .selection-scene { height:calc(100dvh - 285px); min-height:345px; }
  #campInfo.class-story { padding-top:24px; }
  #campInfo .class-name { font-size:46px; }
  #campInfo .class-description { margin-bottom:15px; font-size:12px; }
  .class-disciplines { gap:8px; padding-top:12px; }
  .class-roster { padding-top:10px; }
  #title .class-choice { min-height:70px; padding:9px 12px; }
  #campRow.hero-form { padding-top:15px; }
  #title[data-screen='main'] #titleInner { padding-top:65px; padding-bottom:90px; }
  #title[data-screen='main'] .title-brand { margin-bottom:30px; }
}
@media (max-width:1050px) {
  .class-crest { width:34px; flex-basis:34px; height:40px; }
  #title .class-choice { gap:7px; padding:12px 8px; }
  .class-choice strong { font-size:12px; }
  .discipline { grid-template-columns:16px 75px 1fr; gap:7px; }
  .discipline > span:last-child { font-size:10px; }
  #campRow.hero-form { gap:18px; }
}
@media (max-width:900px) {
  #title:not([data-screen='main']) #titleInner { padding:20px 24px; }
  #title:not([data-screen='main']) .title-brand h2,.selection-count { display:none; }
  .selection-top { padding-top:15px; }
  .selection-scene { height:430px; }
  .selection-scene:not(.saved-scene) { height:auto; min-height:430px; }
  #campInfo.class-story { width:45%; padding-top:32px; }
  #campInfo .class-name { font-size:40px; }
  #campInfo .class-description { font-size:12px; }
  .discipline { grid-template-columns:16px 1fr; gap:5px; }
  .discipline > span:last-child { grid-column:2; }
  .hero-viewport { width:58%; right:-2%; }
  .hero-controls { gap:5px; }
  #title .hero-controls button { padding-left:8px; padding-right:8px; }
  .hero-preview-note { font-size:9px; }
  .class-roster { gap:7px; }
  #title .class-choice { flex-direction:column; text-align:center; gap:5px; }
  .class-choice small { display:none; }
  #campRow.hero-form { grid-template-columns:1fr 1fr; gap:15px 22px; }
  #title .hero-form .title-action { grid-column:1 / -1; }
}
@media (max-width:620px) {
  #title .title-backdrop { background-position:64% center; }
  #title::before { background:linear-gradient(90deg,#04080b99,#04080b55),linear-gradient(0deg,#03080bfa,transparent 95%); }
  #title[data-screen='main'] #titleInner { min-height:100dvh; padding:40px 25px; justify-content:center; }
  #title[data-screen='main'] .title-brand { margin-bottom:30px; }
  #title h1 { font-size:clamp(30px,8.5vw,52px); letter-spacing:.035em; }
  #title h2 { font-size:9px; letter-spacing:.27em; margin-top:12px; }
  .splash-actions { width:min(330px,100%); }
  #title:not([data-screen='main']) #titleInner { padding:20px 18px; }
  #title:not([data-screen='main']) h1 { font-size:23px; }
  #title:not([data-screen='main'])::before { background:linear-gradient(0deg,#05090ffa 20%,#05090f99 78%,#05090f99); }
  .selection-top { gap:15px; padding:8px 0; }
  .selection-top .title-kicker { font-size:8px; letter-spacing:.1em; }
  .selection-scene { height:auto; min-height:0; display:flex; flex-direction:column; }
  .selection-scene:not(.saved-scene) { min-height:0; }
  #campInfo.class-story { width:100%; padding:24px 0 0; max-width:none; }
  #campInfo .class-name { font-size:39px; margin:8px 0; }
  #campInfo .class-quote { font-size:14px; margin-bottom:12px; }
  #campInfo .class-description { font-size:12px; line-height:1.65; margin-bottom:17px; max-width:none; }
  .class-disciplines { grid-template-columns:repeat(3,1fr); max-width:none; gap:8px; padding-top:12px; }
  .discipline { display:block; }
  .discipline-index { display:none; }
  .discipline strong { display:block; font-size:12px; }
  .discipline > span:last-child { display:block; font-size:10px; margin-top:5px; line-height:1.4; }
  .hero-viewport { position:relative; right:auto; width:100%; height:345px; flex:none; }
  .hero-halo::before { top:9%; width:55%; left:22.5%; }
  .hero-controls { bottom:23px; gap:10px; }
  .hero-preview-note { font-size:9px; }
  .class-roster { gap:4px; padding-top:12px; }
  #title .class-choice { min-height:94px; padding:10px 3px 8px; gap:4px; }
  .class-choice strong { font-size:11px; }
  .class-number { display:none; }
  .class-crest { flex-basis:34px; height:38px; }
  #campRow.hero-form { grid-template-columns:1fr; padding-top:22px; gap:18px; }
  #title .hero-form .title-action { grid-column:auto; }
  .hardcore-option { min-height:36px; }
  .saved-story { width:100%; height:auto; padding-top:24px; }
  .saved-roster { max-height:245px; }
  .saved-heading { font-size:29px; margin-bottom:20px; }
  .saved-footer { flex-direction:column; align-items:stretch; gap:19px; }
  .saved-footer .title-action { width:100%; }
}
@media (max-width:380px) {
  #title .class-choice { padding-left:2px; padding-right:2px; }
  .class-choice strong { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  #title *,#title *::before,#title *::after { transition:none; }
}