/* Game page frame. The game itself keeps its own look inside .stage. */
.gbar{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.gbar .wrap{display:flex;align-items:center;gap:10px;height:56px}
.gbar a.back{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--teal);font-weight:650}
.gbar h1{font-size:1.05rem;margin:0;flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:480px){.gbar h1{white-space:normal;font-size:.95rem;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
.iconbtn{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);display:grid;place-items:center;padding:0}
.iconbtn svg{width:20px;height:20px;fill:none;stroke:var(--teal);stroke-width:2}
#favBtn svg{stroke:var(--heart)}
#favBtn[aria-pressed="true"] svg{fill:var(--heart)}
.stage{max-width:960px;margin:16px auto;padding:0 8px;overflow-x:auto}
.stage:fullscreen{background:var(--bg);display:flex;align-items:center;justify-content:center;margin:0;max-width:none;padding:8px}
.more h3{margin:26px 0 10px;font-size:1.05rem}
.blurb{color:var(--muted);text-align:center;margin:6px 0 0;padding:0 16px}
/* Inside the games: the original calm colours the games were drawn with (the jewel look is for the
   home page, header and tiles only). --bg stays the page colour so gaps in a game match the page. */
.zg{--bg2:#ECE7DA;--card:#FFFFFF;--ink:#26332E;--muted:#66746D;
  --sage:#7FA58B;--teal:#2E5E57;--teal2:#3F7A70;--sand:#E3D5B8;--line:#DCD5C4;
  --heart:#C8566B;--shadow:0 6px 20px rgba(38,51,46,.10)}
@media (prefers-color-scheme:dark){
  .zg{--bg2:#1B2320;--card:#212B27;--ink:#E9EEEA;--muted:#9FB0A7;
    --sage:#8FB79B;--teal:#7CC2B4;--teal2:#5FA597;--sand:#3A3A2E;--line:#2F3B36;
    --heart:#E07A8C;--shadow:0 6px 20px rgba(0,0,0,.35)}
}