/* Keep the existing brand visible until the original image loads successfully. */
.site-header :is(.brand,.legal-brand),footer .brand{flex-shrink:0;min-height:44px}
.site-header .brand-image-ready,footer .brand-image-ready{display:inline-flex;align-items:center;justify-content:center;width:184px;gap:0!important}
.brand-wordmark{display:block!important;position:relative!important;width:184px!important;height:57px!important;overflow:hidden;flex-shrink:0;clip-path:polygon(0 18%,5% 4%,14% 4%,23% 18%,35% 23%,47% 26%,53% 26%,66% 23%,77% 18%,87% 4%,95% 4%,100% 18%,100% 100%,0 100%)}
.site-header .brand-wordmark img,footer .brand-wordmark img{display:block!important;position:absolute!important;bottom:0;left:0;width:100%!important;height:auto!important;max-width:none!important;max-height:none!important;object-fit:contain;clip-path:none!important}
.brand-image-ready:focus-visible{outline:3px solid #edc878;outline-offset:4px;border-radius:6px}
@media(max-width:650px){.site-header .brand-image-ready{width:140px}.site-header .brand-wordmark{width:140px!important;height:44px!important}.site-header{column-gap:8px}}
@media(max-width:360px){.site-header .brand-image-ready{width:124px}.site-header .brand-wordmark{width:124px!important;height:39px!important}.site-header .nav-toggle{padding:6px}}

/* DP-219: reuse the dragon above the Korean lockup as a shared leading emblem.
   CSS framing preserves the original PNG; no regenerated or duplicated artwork. */
.site-header .brand-image-ready,footer .brand-image-ready{width:240px;gap:0!important}
.brand-image-ready::before{content:"";display:block;flex:0 0 56px;width:56px;height:56px;background:url('/assets/dragonwars-logo-lockup.png') center top/84px auto no-repeat;clip-path:ellipse(49% 49% at 50% 50%)}
@media(max-width:650px){.site-header .brand-image-ready{width:188px;gap:0!important}.site-header .brand-image-ready::before{flex-basis:48px;width:48px;height:48px;background-size:72px auto}}
@media(max-width:360px){.site-header .brand-image-ready{width:148px;gap:0!important}.site-header .brand-wordmark{width:110px!important;height:35px!important}.site-header .brand-image-ready::before{flex-basis:38px;width:38px;height:38px;background-size:57px auto}.site-header .website-language select{max-width:82px;padding-inline:5px}}

/* DP-219: Korean web uses the full horizontal lockup without wordmark cropping. */
html[data-site-brand="dragonwars"] .brand-image-ready::before{display:none}
html[data-site-brand="dragonwars"] :is(.site-header,footer) .brand-image-ready{width:240px}
html[data-site-brand="dragonwars"] .brand-wordmark{width:240px!important;height:76px!important;clip-path:none;overflow:visible}
html[data-site-brand="dragonwars"] .brand-wordmark img{position:static!important;width:100%!important;height:100%!important;object-fit:contain}
@media(max-width:650px){html[data-site-brand="dragonwars"] .site-header .brand-image-ready{width:174px}html[data-site-brand="dragonwars"] .site-header .brand-wordmark{width:174px!important;height:64px!important}}
@media(max-width:360px){html[data-site-brand="dragonwars"] .site-header .brand-image-ready{width:142px}html[data-site-brand="dragonwars"] .site-header .brand-wordmark{width:142px!important;height:54px!important}}