/* Hra přes celou obrazovku: z automatu zůstane jen obrazovka, nahoře lišta jako na hlavní stránce.
   Načítá se jako poslední, přepisuje automat.css a styly stránky. */
:root { --bar-h: 68px; --scr-h: calc(100svh - var(--bar-h) - 20px); }

/* lišta */
.gbar { display: flex; justify-content: center; height: var(--bar-h); padding: 12px; }
.gbar .hb { display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px; border-radius: 999px; background: #1b1a18; box-shadow: inset 0 1px 2px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .06), 0 14px 30px -18px rgb(0 0 0 / .9); }
.gnav { position: relative; display: flex; align-items: center; min-width: 0; padding-left: 6px; border-left: 1px solid #383631; }
.gnav a { position: relative; z-index: 1; white-space: nowrap; border-radius: 999px; padding: 9px 14px; font-size: 12px; font-weight: 600; font-stretch: 112%; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; line-height: 1.5; color: #aaa79f; transition: color .2s; }
.gnav a:hover, .gnav a:focus-visible { color: #f5f4f0; outline: none; }
.gpill { position: absolute; left: 0; top: 0; border-radius: 999px; background: #2e2c29; box-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 6px 14px -6px rgb(0 0 0 / .6); opacity: 0; pointer-events: none; transition: transform .38s cubic-bezier(.3, 1.25, .5, 1), width .38s cubic-bezier(.3, 1.25, .5, 1), opacity .2s; }
@media (max-width: 599px) { .gnav .wide { display: none; } .gnav a { padding-inline: 12px; } }

/* zvuk jako přepínač tmavého režimu na hlavní stránce */
.gbar #mute { position: relative; display: block; flex: none; width: 76px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: 999px; background: none; box-shadow: none; color: #aaa79f; cursor: pointer; }
.snd-track { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding-inline: 10px; }
.snd-track svg { transition: opacity .3s; }
#mute:not(.muted) .t-on, #mute.muted .t-off { opacity: 0; }
.snd-knob { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: #2e2c29; color: #f5f4f0; box-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 6px 14px -6px rgb(0 0 0 / .6); transition: translate .45s cubic-bezier(.3, 1.25, .5, 1), scale .2s cubic-bezier(.23, 1, .32, 1); }
#mute.muted .snd-knob { translate: 40px 0; }
#mute:hover .snd-knob { scale: 1.06; }
#mute:active .snd-knob { scale: .92; }
#mute:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* automat pryč, zůstane obrazovka */
.room { max-width: 1280px; margin: 0 auto; padding: 0 16px 48px; gap: 32px; }
@media (min-width: 960px) { .room { grid-template-columns: auto 340px; padding-top: 0; gap: 40px; } .room .hof { max-height: var(--scr-h); overflow-y: auto; scrollbar-width: thin; } }
.room .beacon, .room .cab-top, .room .count, .room .cab-panel, .room .cab-base, .room .cab::after, .room .cab-body::before { display: none; }
.room .cab { width: min(calc(100vw - 32px), calc(var(--scr-h) * .78)); filter: none; }
.room .cab-body { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.room .bezel { padding: 0; background: none; box-shadow: none; border-radius: 22px; }
.room .cab .screen { aspect-ratio: auto; height: var(--scr-h); width: 100%; border-radius: 22px; box-shadow: 0 0 0 1px rgb(255 255 255 / .07), 0 0 90px -20px var(--acc), 0 40px 80px -30px #000; }
@media (max-width: 959px) { .room { padding-inline: 8px; } .room .cab { width: calc(100vw - 16px); } }