/* 0.44 · Load after v43.css. The logo (the gold «Б» tile is the first letter of «БАБАЙ»)
   and a header row that fits a phone. (The club's «весь клуб изучен» plaque is drawn on
   the canvas, in club.js.) */

/* ---------- logo ---------- */
body.location-shell .brand {
  gap:4px;
  letter-spacing:0;
  font-size:inherit;
  font-weight:inherit;
  align-items:center;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
body.location-shell .brandmark {
  position:relative;
  display:grid;
  place-items:center;
  flex:none;
  width:40px;
  height:40px;
  border-radius:11px;
  transform:rotate(-6deg);
  border:1px solid #ffd27a80;
  background:
    radial-gradient(110% 80% at 28% 0,#ffd27a40,transparent 62%),
    radial-gradient(90% 70% at 100% 100%,#ff5fcf2e,transparent 70%),
    linear-gradient(160deg,#352a40,#15111b);
  color:#ffeab4;
  font:900 26px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:0;
  text-shadow:0 0 6px #ffd27acc,0 0 16px #ffb347a6,0 1px 0 #000a;
  box-shadow:inset 0 1px #ffffff30,inset 0 -2px #0007,0 0 0 1px #0007,0 6px 18px #ffb34730,0 0 22px #ff5fcf14;
  transition:transform .25s ease,box-shadow .25s ease;
}
/* an inner hairline: the tile reads as a badge */
body.location-shell .brandmark::before {
  content:"";
  position:absolute;
  inset:3px;
  border-radius:8px;
  border:1px solid #ffd27a26;
  pointer-events:none;
}
/* a neon glint on the corner */
body.location-shell .brandmark::after {
  content:"";
  position:absolute;
  top:-3px;
  right:-3px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:radial-gradient(circle,#fff 0 18%,#ff9ae4 34%,#ff5fcf00 70%);
  box-shadow:0 0 8px #ff5fcf99;
  animation:brand-glint 5.5s ease-in-out infinite;
}
@keyframes brand-glint {
  0%,72%,100% { opacity:.55; transform:scale(.8); }
  80% { opacity:1; transform:scale(1.25); }
  88% { opacity:.7; transform:scale(.95); }
}
body.location-shell .brandword {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  line-height:1;
}
body.location-shell .brandword b {
  display:block;
  font:900 23px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.13em;
  background:linear-gradient(180deg,#fffdf6 0%,#ffeec2 38%,#ffd27a 66%,#ffad45 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 6px #ffc65a59) drop-shadow(0 0 14px #ff9f3d2e) drop-shadow(0 1px 0 #000c);
}
body.location-shell .brandword small {
  display:flex;
  align-items:center;
  gap:5px;
  padding-left:1px;
  font:800 8px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.42em;
  color:#ffb6ec;
  text-shadow:0 0 6px #ff5fcfb3,0 0 14px #ff5fcf59;
  white-space:nowrap;
}
body.location-shell .brandword small::before {
  content:"";
  width:12px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,#5fd8ff,#ff5fcf);
  box-shadow:0 0 6px #5fd8ff80;
}
body.location-shell .brand:hover .brandmark,
body.location-shell .brand:focus-visible .brandmark {
  transform:rotate(-2deg) scale(1.04);
  box-shadow:inset 0 1px #ffffff38,inset 0 -2px #0007,0 0 0 1px #0007,0 8px 22px #ffb34740,0 0 26px #ff5fcf26;
}
@media (prefers-reduced-motion:reduce) {
  body.location-shell .brandmark::after { animation:none; }
  body.location-shell .brandmark { transition:none; }
}
@media (max-width:660px) {
  body.location-shell .brand { gap:3px; }
  body.location-shell .brandmark { width:34px; height:34px; border-radius:10px; font-size:22px; }
  body.location-shell .brandmark::before { inset:2.5px; border-radius:7px; }
  body.location-shell .brandword b { font-size:18px; letter-spacing:.12em; }
  body.location-shell .brandword small { font-size:7px; letter-spacing:.36em; gap:4px; }
  body.location-shell .brandword small::before { width:9px; }
}
@media (max-height:500px) and (orientation:landscape) {
  body.location-shell .brandmark { width:32px; height:32px; font-size:21px; }
  body.location-shell .brandword b { font-size:17px; }
  body.location-shell .brandword small { display:none; }
}

/* ---------- phones: the header row fits ----------
   Since 0.42 the «?» key slid off a 390 px screen. Under 480 px the music pill becomes a
   round key (its note gets a slash when off, the label stays in aria-label); under 360 px
   the voice pill does too. */
@media (max-width:480px) {
  body.location-shell .head-actions { gap:6px; }
  body.location-shell .head-actions #musicToggle.sound-btn { width:40px; min-width:40px; padding:0; }
  body.location-shell .head-actions #musicToggle.sound-btn .sound-text { display:none; }
  body.location-shell .head-actions #sound.sound-btn { padding:0 12px; gap:6px; }
}
@media (max-width:359px) {
  body.location-shell .head-actions #sound.sound-btn { width:40px; min-width:40px; padding:0; }
  body.location-shell .head-actions #sound.sound-btn .sound-text { display:none; }
}