*,
*::before,
*::after {
  box-sizing: border-box;
}

.brand,
.game-site-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

canvas.overlay-fish {
  display: block;
  width: 128px !important;
  height: 80px !important;
  min-height: 0 !important;
  max-height: 80px !important;
  flex: 0 0 80px;
  object-fit: contain;
  filter: drop-shadow(0 7px 9px #0005);
}

.game-site-header .game-site-brand {
  min-height: 44px;
}

/* The wordmark remains familiar; the FishKit swimmer is the compact brand mark. */
.game-site-brand::before,
.topbar > .brand::before {
  content: none;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  background: url("../images/app-icon.svg") center / cover no-repeat;
  box-shadow: 0 4px 13px #00131f55;
}

.topbar > .brand { gap: 7px; }

.game-site-header .game-site-brand,
.game-site-footer .game-site-brand {
  gap: 9px;
}

.brand-wordmark,
.brand img.brand-wordmark,
.game-site-brand img.brand-wordmark {
  display: block;
  width: auto;
  height: 34px;
  max-width: 118px;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  box-shadow: none;
}

footer .brand-wordmark,
.game-site-footer .game-site-brand img.brand-wordmark {
  width: auto;
  height: 29px;
  max-width: 101px;
}

@media (max-width: 700px) {
  .brand-wordmark,
  .brand img.brand-wordmark,
  .game-site-brand img.brand-wordmark {
    width: auto;
    height: 31px;
    max-width: 108px;
  }

  footer .brand-wordmark,
  .game-site-footer .game-site-brand img.brand-wordmark {
    height: 27px;
    max-width: 94px;
  }

  .game-site-brand::before {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .topbar > .brand::before {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
  }
}

/* Keep the wider BiteLah wordmark from colliding with mobile header controls. */
@media (max-width: 430px) {
  .topbar {
    gap: 7px;
    padding-right: max(10px, env(safe-area-inset-right));
    padding-left: max(10px, env(safe-area-inset-left));
  }

  .topbar > .brand {
    flex: 0 0 auto;
    max-width: 103px;
    gap: 5px;
  }

  .topbar > .brand .brand-wordmark {
    width: 74px;
    height: auto;
    max-width: 74px;
  }

  .topbar > .brand::before {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }

  .topbar > nav {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    gap: 5px;
  }

  .topbar .sg-clock {
    flex: 0 1 auto;
    min-width: 0;
    padding-inline: 6px 5px;
    font-size: 9px;
    letter-spacing: .45px;
  }

  .topbar .sg-clock small {
    min-width: 21px;
    min-height: 18px;
    font-size: 7px;
  }
}

@media (max-width: 350px) {
  .topbar > .brand {
    max-width: 93px;
  }

  .topbar > .brand .brand-wordmark {
    width: 68px;
    max-width: 68px;
  }

  .topbar > .brand::before {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }

  .topbar .sg-clock {
    padding-inline: 5px 4px;
    letter-spacing: .2px;
  }

  .topbar .theme-quick {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
}

/* Release accessibility floor for compact app and game chrome. */
.native-app .leaderboard-heading,
.native-app #onlineLeaderboard,
.native-app #onlineStatus,
.native-app .daily-leaderboard {
  display: none !important;
}

.offline-empty {
  margin: 0;
  padding: 14px;
  color: var(--muted, #71848c);
  font-size: 12px;
  line-height: 1.45;
}

.offline-hour {
  cursor: not-allowed;
  opacity: .65;
}

@media (max-width: 760px) {
  .arcade-passport small,
  .passport-stat span,
  .passport-badge,
  .daily-brief small,
  .daily-item small,
  .daily-item span,
  .game-site-footer,
  .game-site-footer a {
    font-size: 11px !important;
    line-height: 1.35;
  }

  .game-site-back,
  .race-presets button,
  #puffSound,
  #puffVibrate {
    min-height: 44px;
  }

  .game-site-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 4px;
  }
}

/* Shared typography across the forecast, guides and arcade. */
:root {
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

html,
body,
button,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
.brand,
.game-site-brand,
.art-caption span,
.score-ring strong,
.day b,
.moon-copy h4,
.rule-mark,
.hero-time-copy strong,
.model-readout strong,
.compare-row b,
.daily-brief-head strong,
.daily-item strong {
  font-family: var(--font-ui) !important;
}

code,
pre,
kbd,
samp,
.join-room input {
  font-family: var(--font-mono) !important;
}

body {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
  font-size: inherit;
}

/* A quieter weight hierarchy: reserve heavy type for real decisions. */
body {
  font-weight: 400;
}

strong,
b {
  font-weight: 650 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 760 !important;
}

button,
select,
.saved-btn,
.share-btn,
.home-game-card > em,
.game-tile > em,
.game-site-back {
  font-weight: 680 !important;
}

.eyebrow,
.cast-kicker,
.game-kicker,
.tile-number,
.home-game-card > p,
.game-tile > p,
.home-arcade-rail > header small,
.location-card label,
.daily-item small,
.condition small,
.passport-stat span {
  font-weight: 650 !important;
}

.score-ring strong,
.daily-item strong,
.hero-time-copy strong,
.round-clock strong,
.glance-primary strong {
  font-weight: 760 !important;
}