/* Exact supplied title artwork, shared by all 24 games. */
.game-title-art {display:block;width:100%;height:auto;aspect-ratio:var(--title-ratio);margin:0 auto;padding:0;border:0;background-color:transparent;background-image:url("../assets/arcade/bleeping-game-titles-20261106.png");background-repeat:no-repeat;background-size:400% var(--title-sheet-height);background-position:var(--title-x) var(--title-y);font-size:0;line-height:0;filter:none;}
.control-row .game-title-art{width:min(100%,250px);min-width:0;}
.title-thing {--title-ratio:543 / 119;--title-sheet-height:608.4033613445378%;--title-x:0%;--title-y:0%;}
.title-defense {--title-ratio:543 / 119;--title-sheet-height:608.4033613445378%;--title-x:33.33333333333333%;--title-y:0%;}
.title-tycoon {--title-ratio:543 / 119;--title-sheet-height:608.4033613445378%;--title-x:66.66666666666666%;--title-y:0%;}
.title-aliens {--title-ratio:543 / 119;--title-sheet-height:608.4033613445378%;--title-x:100%;--title-y:0%;}
.title-bounce {--title-ratio:543 / 118;--title-sheet-height:613.5593220338983%;--title-x:0%;--title-y:19.636963696369637%;}
.title-bounce2 {--title-ratio:543 / 118;--title-sheet-height:613.5593220338983%;--title-x:33.33333333333333%;--title-y:19.636963696369637%;}
.title-chess {--title-ratio:543 / 118;--title-sheet-height:613.5593220338983%;--title-x:66.66666666666666%;--title-y:19.636963696369637%;}
.title-chesspig {--title-ratio:543 / 118;--title-sheet-height:613.5593220338983%;--title-x:100%;--title-y:19.636963696369637%;}
.title-chesspunk {--title-ratio:543 / 116;--title-sheet-height:624.1379310344828%;--title-x:0%;--title-y:38.98026315789473%;}
.title-dash {--title-ratio:543 / 116;--title-sheet-height:624.1379310344828%;--title-x:33.33333333333333%;--title-y:38.98026315789473%;}
.title-match {--title-ratio:543 / 116;--title-sheet-height:624.1379310344828%;--title-x:66.66666666666666%;--title-y:38.98026315789473%;}
.title-merge {--title-ratio:543 / 116;--title-sheet-height:624.1379310344828%;--title-x:100%;--title-y:38.98026315789473%;}
.title-groups {--title-ratio:543 / 113;--title-sheet-height:640.70796460177%;--title-x:0%;--title-y:57.774140752864156%;}
.title-quest {--title-ratio:543 / 117;--title-sheet-height:618.8034188034188%;--title-x:33.33333333333333%;--title-y:58.154859967051074%;}
.title-snake {--title-ratio:543 / 113;--title-sheet-height:640.70796460177%;--title-x:66.66666666666666%;--title-y:57.774140752864156%;}
.title-bricks {--title-ratio:543 / 113;--title-sheet-height:640.70796460177%;--title-x:100%;--title-y:57.774140752864156%;}
.title-words {--title-ratio:543 / 114;--title-sheet-height:635.0877192982456%;--title-x:0%;--title-y:77.04918032786885%;}
.title-bubbles {--title-ratio:543 / 114;--title-sheet-height:635.0877192982456%;--title-x:33.33333333333333%;--title-y:77.04918032786885%;}
.title-snatch {--title-ratio:543 / 114;--title-sheet-height:635.0877192982456%;--title-x:66.66666666666666%;--title-y:77.04918032786885%;}
.title-spacerocks {--title-ratio:543 / 114;--title-sheet-height:635.0877192982456%;--title-x:100%;--title-y:77.04918032786885%;}
.title-solitaire {--title-ratio:543 / 126;--title-sheet-height:574.6031746031746%;--title-x:0%;--title-y:97.65886287625418%;}
.title-sudoku {--title-ratio:543 / 126;--title-sheet-height:574.6031746031746%;--title-x:33.33333333333333%;--title-y:97.65886287625418%;}
.title-tiles {--title-ratio:543 / 126;--title-sheet-height:574.6031746031746%;--title-x:66.66666666666666%;--title-y:97.65886287625418%;}
.title-blocks {--title-ratio:543 / 126;--title-sheet-height:574.6031746031746%;--title-x:100%;--title-y:97.65886287625418%;}
[data-game-title="blocks"] .board-wrap::before{content:none;}
[data-game-title="solitaire"] .table::before{content:"";left:10%;right:auto;top:auto;bottom:12px;width:80%;height:auto;aspect-ratio:543 / 126;opacity:.12;background-image:url("../assets/arcade/bleeping-game-titles-20261106.png");background-repeat:no-repeat;background-size:400% 574.6031746031746%;background-position:0% 97.65886287625418%;}

/* Keep the text in the DOM for accessibility and existing menu-state detection. */
.overlay #overlayTitle.game-title-art,.overlay .kicker.game-title-art{font-size:0!important;line-height:0!important;letter-spacing:0!important;text-shadow:none!important;background-clip:border-box!important;-webkit-text-fill-color:transparent!important;color:transparent!important;width:100%;margin:10px auto 14px!important;min-height:0;padding:0!important;}
.brand-header .site-tag{display:none;}

/* Let the supplied artwork occupy the available in-game title row. */
.brand-header{min-height:0;row-gap:0;align-content:center;}
.brand-header > .game-title-art{width:100%;max-width:none;justify-self:center;}
.control-row .game-title-art{width:100%;max-width:none;}
[data-game-title="spacerocks"] .brand-header{grid-template-columns:minmax(0,1fr) auto;align-items:center;}
[data-game-title="spacerocks"] .brand-copy{width:100%;min-width:0;justify-self:stretch;}
[data-game-title="spacerocks"] .brand-copy .game-title-art{width:100%;max-width:none;margin:0;}

/* Full header width; button-bearing rows retain their existing grid columns. */
.brand-header{width:100%;}

/* Persistent branding above every game menu and standalone dialog. */
.game-title-art.game-page-logo {
  display: block;
  width: 100%;
  max-width: 543px;
  height: auto;
  flex: 0 0 auto;
  grid-column: 1 / -1;
  order: -1;
  margin: 0 auto 14px;
}

/* Full-bleed mobile menu artwork. Keep the game's grid and canvas untouched.
   The panel still owns vertical scrolling, so long menus remain usable. */
@media (max-width: 600px) {
  .game-title-art.game-page-logo {
    max-width: none;
  }

  [data-game-title="solitaire"] .table::before {
    left: 0;
    width: 100%;
  }

  .overlay:has(> .panel > .game-page-logo),
  .arcade-hof-modal:has(> .arcade-hof-panel > .game-page-logo) {
    padding-inline: 0;
  }

  .overlay > .panel:has(> .game-page-logo),
  .arcade-hof-modal > .arcade-hof-panel:has(> .game-page-logo),
  body > main:has(> .game-page-logo) {
    box-sizing: border-box;
    width: 100vw;
    max-width: none;
    padding-inline: 18px;
    border-inline-width: 0;
    border-radius: 0;
  }

  body:has(> main > .game-page-logo) {
    padding-inline: 0;
  }

  .overlay > .panel > .game-page-logo,
  .arcade-hof-panel > .game-page-logo,
  body > main > .game-page-logo {
    width: calc(100% + 36px);
    max-width: none;
    margin-inline: -18px;
  }
}