/* GAME-001--006: shared positions ONLY; keep each game's colors and mechanics. */
/* Navigation: game list (left), title (center), sound (right) at one stable height. */
header.game-controls,
.game-topbar .topbar-inner.game-controls {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);
  align-items:center;
  column-gap:8px;
  height:60px;
  min-height:60px;
  box-sizing:border-box;
}
header.game-controls .game-control-back,
.game-topbar .game-controls .game-control-back {grid-column:1;justify-self:start;min-height:40px;margin:0}
header.game-controls .game-control-title,
.game-topbar .game-controls .game-control-title {grid-column:2;justify-self:stretch;text-align:center;min-width:0;margin:0}
header.game-controls .game-control-sound,
.game-topbar .game-controls .game-control-sound {grid-column:3;justify-self:end;min-height:40px;margin:0;white-space:nowrap}
.game-topbar .topbar-inner.game-controls {max-width:1070px}
header.top.game-controls {position:sticky;top:0;z-index:40;max-width:1070px;width:100%;margin-inline:auto}
/* GAME-006 originally used a static header and a second sound button inside the game. */
header.takumi-nav.game-controls {position:sticky;top:0;z-index:50;max-width:1070px;margin-inline:auto;min-height:60px;height:60px}
header.takumi-nav .game-control-sound {font-size:12px}
/* The original GAME-006 page had 16px body padding above its navigation. */
body:has(> .takumi-site-shell){padding:0 0 calc(30px + env(safe-area-inset-bottom,0px))}
.takumi-site-shell{width:min(100%,1070px)}
/* All information cards: desktop right of game, small screens under game. */
@media(min-width:901px){
  body:not(.game-session):not(.game-in-progress):not(.playing):not(.finished):not(.game-info-hidden) .game-layout,
  body:not(.game-session):not(.game-in-progress):not(.playing):not(.finished):not(.game-info-hidden) .game-info-layout {
    display:grid;grid-template-columns:minmax(0,1fr) 280px !important;
    gap:18px;align-items:start;
  }
  body .container:has(.game-info-layout){max-width:1070px}
  body:not(.game-session):not(.game-in-progress):not(.playing):not(.finished):not(.game-info-hidden) .takumi-columns.game-layout {
    max-width:100%;margin-inline:auto;justify-content:center;
    grid-template-columns:minmax(0,630px) 280px !important;
  }
}
@media(max-width:900px){
  body:not(.game-session):not(.game-in-progress):not(.playing):not(.finished):not(.game-info-hidden) .game-layout,
  body:not(.game-session):not(.game-in-progress):not(.playing):not(.finished):not(.game-info-hidden) .game-info-layout {
    display:grid;grid-template-columns:minmax(0,1fr) !important;
    row-gap:16px;
  }
  body:not(.game-session):not(.game-in-progress):not(.playing):not(.finished):not(.game-info-hidden) .game-layout > aside,
  body:not(.game-session):not(.game-in-progress):not(.playing):not(.finished):not(.game-info-hidden) .game-info-layout > aside {
    grid-column:1 / -1;width:100%;min-width:0;max-width:none;margin:0 auto;
  }
  body:not(.game-session):not(.game-in-progress):not(.playing):not(.finished):not(.game-info-hidden) .takumi-columns.game-layout {
    max-width:630px !important;margin-inline:auto !important;
  }
  body .takumi-columns > #game.wrap {width:100%;max-width:630px;margin-inline:auto}
}
/* Equal card geometry, without touching borders, shadows, fonts or colors. */
.game-layout > aside,
.game-info-layout > aside {min-width:0;align-self:start}
.game-layout > aside > .sidebox,
.game-info-layout > aside > .sidebox {box-sizing:border-box;width:100%;min-width:0;margin-bottom:18px}
/* Shared footer position and navigation. Color is owned by each game's theme. */
footer.game-shared-footer {
  display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
  gap:8px 18px;clear:both;box-sizing:border-box;width:100%;
  margin:40px auto 0;padding:22px 4px 28px;
  border-top:1px solid currentColor;font-size:12px;line-height:1.7;text-align:left;
}
footer.game-shared-footer a {color:inherit;text-decoration:underline;text-underline-offset:3px}
footer.game-shared-footer .footer-note{width:100%;font-size:11px;line-height:1.7}
@media(max-width:460px){
  header.game-controls,
  .game-topbar .topbar-inner.game-controls {height:56px;min-height:56px;column-gap:4px}
  header.top.game-controls,
  header.takumi-nav.game-controls {height:56px;min-height:56px}
  header.game-controls .game-control-back,
  header.game-controls .game-control-sound {font-size:11px;min-height:40px;padding:7px 7px}
  header.game-controls .game-control-title {font-size:11px;line-height:1.2}
  footer.game-shared-footer {margin-top:28px;padding:18px 1px 24px}
}