/* Shared top navigation for GAME 001 and GAME 002.
   Left: game list / Center: game title / Right: sound. */
.game-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);
  align-items:center;
  column-gap:8px;
  min-width:0;
}
.game-controls .game-control-back,
.game-controls .game-control-sound{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  max-width:100%;
  min-height:40px;
  padding:8px 11px;
  border:2px solid var(--game-control-border, #20273a);
  border-radius:10px;
  background:var(--game-control-bg, #fffefa);
  color:var(--game-control-fg, #20273a);
  font:900 12px/1.15 system-ui,sans-serif;
  white-space:nowrap;
  box-sizing:border-box;
  text-decoration:none;
  touch-action:manipulation;
}
.game-controls .game-control-back{grid-column:1;justify-self:start;margin-left:0}
.game-controls .game-control-sound{grid-column:3;justify-self:end;cursor:pointer}
.game-controls .game-control-title{
  grid-column:2;
  justify-self:stretch;
  min-width:0;
  margin:0;
  text-align:center;
  font:900 13px/1.25 system-ui,sans-serif;
  letter-spacing:0;
  overflow-wrap:anywhere;
  color:var(--game-control-title,#20273a);
}
.game-controls .title-prefix,.game-controls .title-main{display:block}
.game-controls .back-short{display:none}
.game-controls .game-control-back:focus-visible,
.game-controls .game-control-sound:focus-visible{outline:3px solid #2683ed;outline-offset:2px}
/* GAME 001 uses a fixed-height site-level control row, including during play. */
.game-topbar{
  position:sticky;
  top:0;
  z-index:40;
  background:#ffd364;
  border-bottom:2px solid #20273a;
}
.game-topbar .topbar-inner.game-controls{
  --game-control-border:#20273a;
  --game-control-bg:#fffefa;
  --game-control-fg:#20273a;
  --game-control-title:#20273a;
  max-width:780px;
  height:60px;
  padding:8px 12px;
  box-sizing:border-box;
}
/* GAME 002 top header stays visible while page scrolls. */
.top.game-controls{
  --game-control-border:#687da2;
  --game-control-bg:#1f2941;
  --game-control-fg:#eaf2ff;
  --game-control-title:#fff7db;
  position:sticky;
  top:0;
  z-index:30;
  max-width:780px;
  width:100%;
  min-height:60px;
  margin:0 auto;
  padding:9px 12px;
  background:#26344f;
  border-radius:0 0 14px 14px;
}
@media(max-width:650px){
  .game-topbar .topbar-inner.game-controls{
    height:calc(56px + env(safe-area-inset-top,0px));
    padding:calc(8px + env(safe-area-inset-top,0px)) 10px 8px;
  }
  body.game-session .game-topbar{display:block}
  body.game-session .machine-head{display:none}
  body.game-session .machine{
    min-height:0 !important;
    height:calc(100dvh - 56px - env(safe-area-inset-top,0px)) !important;
  }
  .top.game-controls{border-radius:0;min-height:56px;padding:8px 10px;padding-top:calc(8px + env(safe-area-inset-top,0px))}
  .game-controls .game-control-title{font-size:12px}
}
@media(max-width:460px){
  .game-controls .back-full{display:none}
  .game-controls .back-short{display:inline}
  .game-controls .game-control-back,
  .game-controls .game-control-sound{font-size:11px;min-height:40px;padding:7px 8px}
  .game-controls .game-control-title{font-size:11px;line-height:1.2}
}
@media(max-width:350px){
  .game-controls{grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr) minmax(0,.85fr);column-gap:4px}
  .game-controls .game-control-back,
  .game-controls .game-control-sound{font-size:10px;padding:6px}
  .game-controls .game-control-title{font-size:10px}
}

/* GAME-UI RECORDS v1 — shared intro/game/results card lifecycle. */
body.game-info-hidden .game-layout>aside,
body.game-info-hidden .game-info-sidebar{display:none!important}
body.game-info-hidden .game-layout,
body.game-info-hidden .game-info-layout{grid-template-columns:minmax(0,1fr);max-width:780px;margin-left:auto;margin-right:auto}
/* Show the replay button and score history option separately. */
.game-info-records{display:block;width:100%;max-width:100%;min-height:45px;margin-top:9px;padding:11px 15px;
  border:2px solid #5b6782;border-radius:12px;background:#eef3ff;color:#263b5b;
  font:900 14px/1.3 system-ui,sans-serif;cursor:pointer;touch-action:manipulation}
.game-info-records:focus-visible{outline:3px solid #337cdf;outline-offset:2px}
.game-info-records:hover{filter:brightness(.97)}