/* Canonical option 2 wordmark. All SVGs share a 703.3 × 128 master ratio. */
:root{--brand-ratio:5.49453125}
.brand{display:inline-flex;align-items:center;flex:none;width:clamp(106px,11vw,154px);font:800 1rem/1 Manrope,sans-serif;letter-spacing:-.025em;color:inherit;text-decoration:none}
.brand-logo{display:block;width:100%;height:auto;aspect-ratio:var(--brand-ratio);object-fit:contain}
.brand-logo-switch{display:grid;width:100%}
.brand-logo-switch>.brand-logo{grid-area:1/1}
.brand-logo--dark{display:none}
body.arcade-mode .brand-logo--light{display:none}
body.arcade-mode .brand-logo--dark{display:block}
header .brand{width:clamp(106px,10.7vw,150px)}
.nav .brand{width:clamp(122px,11.5vw,156px)}
footer .brand{width:clamp(112px,10vw,142px)}

/* Keep the full lock-up readable beside controls, including 320px screens. */
@media(max-width:420px){
 header .brand,body.focus-play header .brand,body.arcade-mode header .brand,body.arcade-mode.focus-play header .brand{display:inline-flex;width:100px;font-size:inherit;gap:0;white-space:normal}
 header .brand-icon,body.arcade-mode header .brand-icon{display:none}
 header nav,body.focus-play header nav,body.arcade-mode header nav,body.arcade-mode.focus-play header nav{gap:2px}
 header nav button,body.focus-play header nav button,body.arcade-mode header nav button{padding-inline:5px;font-size:10px}
 #quick-highscores{font-size:10px}
 #open-menu{padding-inline:6px}
 .nav .brand{width:110px}
 footer .brand{width:112px}
}

/* Dark Arcade surfaces use the cream-and-peach master, without inherited text marks. */
.arcade-dialog-brand,.arcade-guide-brand{font-family:Manrope,sans-serif;font-weight:800;letter-spacing:-.025em}
.arcade-mode .arcade-dialog-brand{display:flex;align-items:center;gap:.55rem;padding-right:54px;margin:0 0 18px;color:#eaf3ff}
.arcade-dialog-brand>img{display:block;width:126px;height:auto;aspect-ratio:var(--brand-ratio)}
.arcade-dialog-brand small,.arcade-guide-brand em{margin-left:auto;font-size:8px;letter-spacing:1.4px;color:#a5edff;font-style:normal}
.arcade-guide-brand{display:flex;align-items:center;gap:.55rem;padding-right:44px;color:#eaf3ff!important}
.arcade-guide-brand>img{display:block;width:126px;height:auto;aspect-ratio:var(--brand-ratio)}
.arcade-guide-brand>span,.arcade-dialog-brand>span{display:none}
@media(max-width:420px){.arcade-dialog-brand>img,.arcade-guide-brand>img{width:112px}}

/* New game keeps its cream surface, including when opened from Arcade. */
body #mode-dialog .arcade-dialog-brand small{color:#526851}