/* The supplied V21 mark already owns its geometry and colour. Keep its aspect
 * ratio; the previous yellow tile, skew and inset shine belonged to the old logo. */
.masthead .brand-mark,
body:has(.game-screen) .masthead .brand-mark {
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  flex:0 0 48px;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  box-shadow:none;
  transform:none;
}
.masthead .brand-mark .studio-logo {
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}
.masthead .wordmark,
.masthead.has-match-score .wordmark { min-width:44px; min-height:44px; }
.masthead .brand-title i { color:#F52232; }
.masthead .wordmark:focus-visible { outline:2px solid #F5F6F3; outline-offset:-2px; border-radius:3px; }
.battery > b:has(.device-studio-logo) { writing-mode:horizontal-tb; display:flex; justify-content:center; align-items:center; }
.device-studio-logo { display:block; width:28px; height:28px; object-fit:contain; }
.streak-chip { display:inline-flex; align-items:center; min-height:24px; padding:3px 8px; border:1px solid #a7c7d34d; border-radius:2px; color:#b9d7df; background:#12263199; font:600 10px/1.2 var(--mono); letter-spacing:.04em; }
.game-streak-chip { margin-top:5px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* WebKit can reset inherited currentColor when the training screen mounts;
   keep the dark HUD readable without changing the light logo artwork. */
body.in-training .masthead,
body.in-training .training-screen { color:var(--ink); }
body.in-training .masthead .sound-button { color:#F5F6F3; }
body.in-training .masthead .sound-button svg { color:#F5F6F3; stroke:currentColor; }
body.in-training .training-intro-copy h1,
body.in-training .training-done h1,
body.in-training .training-coach h1 { color:#F5F6F3; }
@media(max-width:760px),(max-width:1000px) and (max-height:480px) {
  .masthead .brand-mark,
  body:has(.game-screen) .masthead .brand-mark { width:40px; height:40px; flex-basis:40px; }
 .masthead .wordmark { min-width:44px; min-height:44px; gap:7px; }
 .streak-chip { font-size:9px; }
}
@media(max-width:500px) {
  .masthead.has-match-score .wordmark { width:44px; justify-content:center; }
}
@media(max-width:760px),(min-width:761px) and (max-height:680px) {
  body.in-training .masthead .brand-mark { width:40px; height:40px; flex-basis:40px; }
}