/* 正式ロゴ「Wan-Coco Bow Pop!」（文字だけのロゴ。2026-10-09 ユーザー指定）：theme/halloween/logo-wan-coco-bow-pop-text.webp（800×312、背景は透明）。
   受け取った画像に焼き込まれていたグレーと白の市松模様だけを透明にした（色・形・文字・立体感・肉球はそのまま。作り方 artwork-source/logo-text-cut.html）。
   前の看板ロゴ（logo-wan-coco-bow-pop.jpg）は使わないが、ファイルは残す。
   ・PC：左側のキャッチコピー（つなげて、はじけて、気分スッキリ。）の場所に、index.html の h1.brand-logo として置く。
   ・スマホ：上部の2段タイトル（.brand の文字）の代わりに、同じロゴを上部の高さ（58px）の中に高さ 56px で収める。盤面・GOAL・MOVES の位置と大きさは変えない。
   ・PC の上部の小さなタイトル（.brand）は今のまま。 */
/* h1 の箱は、元の3行のキャッチコピーと同じ高さ（3行 × 行の高さ 1.38）のまま。ほかの要素（盤面など）の位置が動かないように */
.companion h1.brand-logo { height: calc(3em * 1.38); display: flex; align-items: center; text-shadow: none; }
.companion h1.brand-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; }

@media (max-width: 720px) {
  /* r4（2026-10-09）：ロゴを約21%大きく（高さ 56 → 68px）。
     上部の段（58px）・STAGE の段・盤面の位置と大きさは変えないため、ロゴの「絵」だけを ::after で大きく描き、少し下へはみ出させる
     （押せる範囲＝.brand の箱 144×56 は今まで通り。絵は押せない＝pointer-events: none）。
     ロゴの箱は、左の音のボタンが右の ? より広いぶん、もともと画面の中心より約9px 右にある。はみ出した下の部分が左の STAGE のタブに触れないよう、390px より狭い画面だけさらに少し右へ（375px で +4.5px）。
     375px より狭い画面は、STAGE のタブやボタンに触れないよう大きさを少しずつ控える（360px で 60px、352px 以下は元の 56px） */
  .topbar .brand {
    position: relative;
    width: calc(56px * 800 / 312); height: 56px; padding: 0;
    font-size: 0; color: transparent; text-shadow: none;
    --logo-h: clamp(56px, calc((100vw - 240px) * 0.5), 68px);
    --logo-shift: clamp(0px, calc((390px - 100vw) * 0.3), 6px);
  }
  .topbar .brand::after {
    content: ''; position: absolute; left: 50%; top: 0;
    height: var(--logo-h); width: calc(var(--logo-h) * 800 / 312);
    transform: translateX(calc(-50% + var(--logo-shift)));
    background: url('theme/halloween/logo-wan-coco-bow-pop-text.webp?v=1') center / contain no-repeat;
    pointer-events: none;
  }
  .topbar .brand > * { display: none; }
}