/* Bavilo's shared visual language. Game layouts opt in separately. */
@font-face {
  font-family: 'Bavilo Nunito';
  src: url('/bavilo-art/fonts/nunito.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --bavilo-font: 'Bavilo Nunito', Nunito, 'Arial Rounded MT Bold', system-ui, sans-serif;
  --bavilo-ink: #17172f;
  --bavilo-muted: #626578;
  --bavilo-cream: #fffaf0;
  --bavilo-paper: #fffdf8;
  --bavilo-gold: #ffb49f;
  --bavilo-gold-light: #ffdbcb;
  --bavilo-gold-dark: #965346;
  --bavilo-line: #e5ded4;
  --bavilo-focus-ring: #167c91;
  --bavilo-radius: 20px;
  --bavilo-radius-large: 28px;
  --bavilo-shadow: 0 4px 0 #28274116, 0 10px 24px #2827410c;
  --bavilo-button-shadow: 0 3px 0 #28274120;
  --bavilo-logo-surface: linear-gradient(145deg, #ffffff 0%, #fffdf8 100%);
  --bavilo-logo-border: #ffffff;
  --bavilo-logo-shadow: 0 3px 0 #28274112, 0 9px 22px #28274112;
}

/* A calm white plaque keeps every illustrated Bavilo wordmark readable on
   photography, scenery and dark game headers. Individual themes keep their
   own logo artwork; only the supporting surface is shared. */
.bavilo-logo-surface {
  background: var(--bavilo-logo-surface) !important;
  border: 1px solid var(--bavilo-logo-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--bavilo-logo-shadow) !important;
}

/* This slot is part of the header flow, so account and age never overlap. */
[data-bavilo-account-slot] {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  position: relative;
}
[data-bavilo-account-slot]:empty { display: none; }

/* Shared focus treatment does not alter dimensions of game pieces. */
:where(.hub-header, .world-header, #bavilo-account-panel) :is(a, button, select, summary):focus-visible {
  outline: 3px solid var(--bavilo-focus-ring);
  outline-offset: 4px;
}