/* the games' screen (js/games/kit_hud.js): over the town while a game runs; the walk's own hud is put away */
body.gaming .walkhud, body.gaming .bigmap, body.gaming .walkboards { display: none !important; }
body.gaming .livejoin, body.gaming .livecard, body.gaming .onboard, body.gaming .walktip { display: none !important; }   /* the town's invitations wait until the game ends */
body.gaming .toast { bottom: auto; top: calc(96px + env(safe-area-inset-top)); }   /* the town's notes, clear of the pads */
.gamehud { position: fixed; inset: 0; z-index: 30; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.gamehud button { touch-action: none; }
.gtop { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.gtop > * { pointer-events: auto; }
.gexit { min-height: 44px; min-width: 44px; }
.gtitle { font: 700 16px/1.2 var(--head); color: var(--cream); text-shadow: 0 1px 3px rgba(0, 0, 0, .55); white-space: nowrap; }
.gstats { margin-inline-start: auto; font: 700 15px/1.3 var(--body); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); direction: rtl; white-space: pre; }
.gbig { position: fixed; left: 0; right: 0; top: 28%; margin: 0; text-align: center; pointer-events: none;
  font: 700 clamp(30px, 9vw, 54px)/1.15 var(--head); color: var(--gold); -webkit-text-stroke: 1.5px var(--brown); text-shadow: 0 3px 0 var(--brown), 0 6px 14px rgba(0, 0, 0, .35); }
.gbig.pop { animation: gpop .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes gpop { from { transform: scale(2.2); opacity: .2; } to { transform: scale(1); opacity: 1; } }
.gtoast { position: fixed; left: 50%; top: calc(28% + clamp(46px, 13vw, 76px)); transform: translateX(-50%); margin: 0; padding: 4px 14px; border-radius: 14px;
  background: rgba(15, 19, 22, .55); color: #fff; font: 600 15px/1.4 var(--body); white-space: nowrap; pointer-events: none; }
.gspeed { position: fixed; left: 50%; top: max(60px, calc(env(safe-area-inset-top) + 52px)); transform: translateX(-50%); margin: 0; pointer-events: none;
  font: 700 22px/1 var(--head); color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .6); white-space: nowrap; }
.gstick { position: fixed; left: 0; top: 0; width: 108px; height: 108px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: rgba(245, 240, 230, .22); border: 2px solid rgba(245, 240, 230, .7); }
.gstick.on { opacity: 1; }
.gstick i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px; border-radius: 50%; background: rgba(245, 240, 230, .85); }
/* the pads: gas big in the corner, brake beside it, the trick over it; a game's own buttons above */
.gpads { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px)); width: 190px; height: 210px; pointer-events: none; }
.gpad { position: absolute; border-radius: 50%; pointer-events: auto; white-space: pre; font: 700 13px/1.15 var(--body); color: var(--brown);
  background: rgba(245, 240, 230, .82); border: 3px solid var(--brown); box-shadow: 0 4px 0 var(--brown); }
.gpad.on { transform: translateY(3px); box-shadow: 0 1px 0 var(--brown); background: var(--gold); }
.ggas { right: 0; bottom: 0; width: 96px; height: 96px; font-size: 15px; }
.gbrake { right: 104px; bottom: 0; width: 72px; height: 72px; }
.gact { right: 10px; bottom: 108px; width: 76px; height: 76px; background: rgba(46, 196, 196, .85); color: #fff; border-color: var(--teal-ink); box-shadow: 0 4px 0 var(--teal-ink); }
.gact.on { box-shadow: 0 1px 0 var(--teal-ink); }
.gextra { position: fixed; right: max(10px, env(safe-area-inset-right)); top: max(58px, calc(env(safe-area-inset-top) + 50px)); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.gextra .gx { font-size: 13px; padding: 5px 12px; }
.gextra .gx { min-height: 44px; }
.gsheet { z-index: 31; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 380px); padding: 16px 18px; text-align: center; }
.gsheet .gcard p { margin: 4px 0; font: 600 15px/1.45 var(--body); }
.gsheet .gcard .best { color: var(--teal-ink); }
.gsheet .acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.gsheet .acts .chip, .gsheet .acts .gold { min-height: 44px; }
@media (pointer: fine) and (min-width: 760px) { .gstick, .gpads { display: none; } }
@media (orientation: landscape) and (max-height: 500px) { .gbig { top: 18%; } .gtoast { top: calc(18% + 50px); } }