/* 디자인12 제작 후보. 텍스트·초점·조작은 DOM, 재질만 9-slice 이미지로 그린다. */
:root {
  --oa-title-preview:url("data:image/webp;base64,UklGRvYAAABXRUJQVlA4IOoAAACwBgCdASogAEAAPymAtFWuJ6SjMBQKAcAlCUAYIgfRAganppjs/j/86ktpGIFPmQsL50QuY21lQha2VPzoAAD+7m9y7bYk5061ROiHFRq8cMCqm4GcD07E8k6lDzxadgadkFw0TJChjYwY2xzG8Am3FFHNdu02SKhjg9z4R6VKlbwVkQFTMDq4HCuPhtxCB+vB5eYe5WJ8sTBgCcTGfXFe+RgXa12QvEXSsOclukZWZdrQMMmaRSKS0z8u5S7HBmhHpqXsUK0w6BFSafa6XKgfu1g/cvmxTYIJkm3F8hCIe9VVmiaoKWBLgAA=");
  --oa-primary-art:url('/resource/ui/title-lobby-v12/runtime/u01-primary-v1.webp');
  --oa-secondary-art:url('/resource/ui/title-lobby-v12/runtime/u02-secondary-v1.webp');
  --oa-neutral-art:url('/resource/ui/title-lobby-v12/runtime/u03-neutral-v1.webp');
  --oa-title-background:url('/resource/ui/title-lobby-v12/runtime/t01-title-bg-portrait-v1.webp');
  --oa-lobby-background:url('/resource/ui/title-lobby-v12/runtime/u09-lobby-bg-portrait-v1.webp');
}
@media (orientation:landscape) {
  :root {
    --oa-title-preview:url("data:image/webp;base64,UklGRtgAAABXRUJQVlA4IMwAAAAwBwCdASowABsAPymEs1QuKKQjMBVaqcAlCUAWo3AQJIYCGz/ETqizIQnye4b5SgDJ8xTdz109qsBcOPRMO/1e6mAA99u+XhHX2xmMmd9nft1WXfNCsagsGKf2SJPMhUTbFKQWPYVLC8G1R5ROmKVK3syoo4wWA6GEjwDEjRlyrw2EPaS0eqgXgMJMMe58OR3lIxrdHLzhzyJTp6DQZ1HJ7OlkfTZ+iuiJvAekNX0++CuBOq6F7DKQpX8QAU2Dn8joipnwvrhr/DdYAAA=");
    --oa-title-background:url('/resource/ui/title-lobby-v12/runtime/t02-title-bg-landscape-v1.webp');
    --oa-lobby-background:url('/resource/ui/title-lobby-v12/runtime/u09-lobby-bg-landscape-v1.webp');
  }
}
.game-viewport :is(.start-cta,.title-sign-in,.solo-button,.coop-button,.mode-card,.compact-mode-toggle,.compact-difficulty-toggle),
.detail-dialog :is(.dialog-button,.dialog-fixed-actions button,.shop-fixed-actions button,.hub-fixed-actions button) {
  background-image:none!important;
  border-image:var(--oa-neutral-art) 40 fill / 12px / 0 stretch!important;
}
.game-viewport :is(.start-cta,.solo-button),
.detail-dialog .dialog-button:not(.secondary):not(.danger) {
  border-image-source:var(--oa-primary-art)!important;
}
.game-viewport :is(.title-sign-in,.coop-button),
.detail-dialog .dialog-button.secondary {
  border-image-source:var(--oa-secondary-art)!important;
}
.detail-dialog .dialog-button.danger {
  border-image-source:var(--oa-neutral-art)!important;
}
.detail-dialog {
  border-image:url('/resource/ui/title-lobby-v12/runtime/u05-panel-v1.webp') 48 fill / 14px / 0 stretch!important;
}
.game-viewport #target-choice {
  background-image:linear-gradient(90deg,rgba(5,8,11,.86),rgba(5,8,11,.72)),url('/resource/ui/title-lobby-v12/runtime/m01-gate-card-v1.webp')!important;
  background-size:cover; background-position:center; border-color:var(--oa-line-brass-soft);
}
.game-viewport .shrine-monument {
  position:absolute; right:1%; bottom:calc(var(--oa-chip-h) + 28px);
  width:clamp(48px,16%,88px); height:clamp(64px,35%,128px); min-height:48px;
  padding:0!important; background:none!important; border:0; box-shadow:none; z-index:3;
}
.game-viewport .shrine-monument img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 8px rgba(230,187,104,.3)); }
.game-viewport .season-ornament {
  position:absolute; left:0; bottom:calc(var(--oa-chip-h) + 12px);
  width:clamp(40px,12%,64px); height:clamp(40px,24%,82px); object-fit:contain;
  pointer-events:none; opacity:.8; z-index:0;
}
@media (prefers-reduced-motion:no-preference) {
  body[data-title-intro="first"] .start-brand { animation:oa-logo-arrive 400ms ease-out both; }
  body[data-title-intro="first"] .title-cast { animation:oa-cast-arrive 600ms ease-out both; }
  body[data-title-intro="first"] .start-actions { animation:oa-action-arrive 300ms 600ms ease-out both; }
}
body[data-motion="reduced"][data-title-intro] :is(.start-brand,.title-cast,.start-actions) { animation:none; }
@keyframes oa-logo-arrive { from { opacity:.1; transform:translateY(-8px); } to { opacity:1; transform:none; } }
@keyframes oa-cast-arrive { from { opacity:.3; transform:scale(1.025); } to { opacity:1; transform:none; } }
@keyframes oa-action-arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* 같은 구도의 254/224byte 미리보기는 CSS 안에 있어 첫 원경 다운로드를 기다리지 않는다. */
.game-viewport[data-layout][data-title-lobby-v12] .start-backdrop {
  background-image:linear-gradient(0deg,var(--oa-bg),rgba(11,18,24,.25) 48%,rgba(11,18,24,.35)),var(--oa-title-preview);
}
.game-viewport[data-layout][data-title-lobby-v12] .start-backdrop::before {
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(0deg,var(--oa-bg),rgba(11,18,24,.25) 48%,rgba(11,18,24,.35)),var(--oa-title-background);
  background-size:cover; background-position:center;
}
.game-viewport[data-layout][data-title-lobby-v12] .lobby-backdrop {
  background-image:linear-gradient(0deg,rgba(11,18,24,.94),rgba(11,18,24,.20) 55%,rgba(11,18,24,.65)),var(--oa-lobby-background);
}