/* One transparent lockup across the journey; reserve its aspect ratio while loading. */
.tycoon-logo{display:block;width:100%;height:auto;object-fit:contain}
.brand{padding:22px 0 20px}
.brand .tycoon-logo{max-width:210px;margin:0 auto}
.brand small{margin-top:13px;letter-spacing:1.6px}
.brand:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.setup-intro>.tycoon-logo{width:285px;max-width:100%;margin:0 0 25px}
.setup-intro h2{margin-top:23px}
.prologue-brand{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.prologue-brand .tycoon-logo{width:210px;max-width:100%}
.prologue-brand small{margin:0;letter-spacing:1.1px}
.game-loading .tycoon-logo{width:320px;max-width:100%;margin:0 auto 28px}
#boot{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;padding:40px 24px;text-align:center;background:#071014;color:#aab9b7}
#boot .tycoon-logo{width:440px;max-width:100%}
#boot>span{font-size:12px;line-height:1.6;letter-spacing:1.5px}
/* The ivory lettering keeps its contrast on the light interface. */
.light .tycoon-logo{background:#101e23;border-radius:4px;padding:9px}
@media(max-width:680px){
  .brand{padding:18px 3px}
  .brand .tycoon-logo{max-width:200px}
  .setup-intro>.tycoon-logo{width:240px;margin-bottom:18px}
  .prologue-brand .tycoon-logo{width:150px}
  .prologue-header{gap:12px}
  .light .tycoon-logo{padding:6px}
}