/* MADRiD TV Web: CH 18 MADRiD GAMES and CH 34 PLAYSTATION, the layers (static/layers/games.html,
 * ps1.html) and the remote panel. Without static/games/ the layer is the HOME card alone. */
.games-layer { background: #050505; }
.games-layer:not([data-games]) .games-shelf, .games-layer:not([data-games]) .games-screen, .games-layer:not([data-games]) .games-status { display: none; }
.games-layer[data-games] .games-home { display: none; }
.games-shelf { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto 1fr; gap: 14px; padding: 40px 42px 34px; font-family: "Madrid Display", monospace; }
.games-shelf[hidden], .games-screen[hidden] { display: none; }
.games-title { color: #ff4f00; font-size: 44px; letter-spacing: 0.04em; }
#layer-ps1 .games-title { color: #9da7ff; }
.games-platforms { display: flex; flex-wrap: wrap; gap: 6px; }
.games-platforms:empty { display: none; }
.games-shelf button { background: transparent; color: #f0ede8; border: 1px solid #3a3530; font: 16px "Madrid Display", monospace; letter-spacing: 0.03em; padding: 8px 12px; text-align: left; cursor: pointer; }
.games-shelf button.is-on, .games-shelf button.is-cursor, .games-shelf button:hover, .games-shelf button:focus-visible { border-color: #ff4f00; color: #ff4f00; outline: none; }
.games-list { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-content: start; gap: 4px; color: #f5c400; }
.games-screen { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.games-status { position: absolute; left: 42px; bottom: 34px; color: #f5c400; font: 18px "Madrid Display", monospace; letter-spacing: 0.08em; pointer-events: none; }
.games-deck-status { margin: 0 0 8px; font-size: 12px; color: #f5a01e; letter-spacing: 0.04em; }
.games-deck-tabs, .games-deck-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
:where(.deck-panel, #panel) .games-deck-tabs button.is-on { border-color: #ff4f00; color: #ff4f00; }
.games-deck-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; max-height: 320px; overflow-y: auto; }
.games-deck-list button { text-align: left; }
.games-deck-pad { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; user-select: none; -webkit-user-select: none; }
.games-deck-pad[hidden], .games-deck-tabs[hidden], .games-deck-list[hidden] { display: none; }
.games-dpad { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px); gap: 4px; }
.games-face { display: grid; grid-template-columns: repeat(2, minmax(52px, 1fr)); gap: 6px; }
.games-deck-row { grid-column: 1 / -1; }
.games-key { touch-action: none; min-height: 52px; font-size: 18px; }
.games-key.is-down { border-color: #ff4f00; color: #ff4f00; }