/* Game page shell: one chunky bar with a way back, the game fills everything below it.
   Each game page sets --bar (bar colour) and --bar-ink on <body>. */
:root{
  --ink:#2a2760;
  --sun:#ffd84a;
  --sun-deep:#f4b62c;
  --display:"Arial Rounded MT Bold","Varela Round","Nunito","Hiragino Maru Gothic ProN","Chalkboard SE","Comic Sans MS",ui-rounded,system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;
  background:var(--bar,#4fc3ff);color:var(--ink);font-family:var(--display);
  -webkit-tap-highlight-color:transparent;
}
.bar{
  flex:none;display:flex;align-items:center;gap:12px;
  padding:calc(8px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) 8px calc(12px + env(safe-area-inset-left,0px));
  background:var(--bar,#4fc3ff);
}
.bar h1{
  flex:1;min-width:0;margin:0;text-align:center;font-size:1.15rem;font-weight:700;line-height:1.1;
  color:var(--bar-ink,var(--ink));text-wrap:balance;
}
.home,.full{
  flex:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;
  font:inherit;font-size:1.05rem;color:var(--ink);
  background:var(--sun);border:0;border-bottom:5px solid var(--sun-deep);border-radius:999px;padding:8px 18px 6px 12px;
  transition:transform .12s;
}
.full{padding-left:18px;background:#fff;border-bottom-color:rgba(42,39,96,.25)}
.home svg{width:26px;height:26px}
.home:hover,.full:hover{transform:scale(1.05,.96)}
.home:active,.full:active{transform:scale(1.08,.9) translateY(2px)}
.home:focus-visible,.full:focus-visible{outline:4px solid var(--ink);outline-offset:3px}
#game{flex:1;min-height:0;width:100%;border:0;display:block;background:#fff}
@media (max-width:560px){
  .bar h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .bar{justify-content:space-between}
}