/* Games drawer (copied from 9wicket css/app.css "games sheet"): red folder tabs on a thin red line over a dark
   see-through maroon panel, the page is not dimmed. The lobby and each game are a 750 x 470 screen in an iframe
   (public/games/), full width on phones, a fixed 750 x 470 panel on wider screens. */
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;500;600&display=swap');

.games-sheet[hidden] { display: none; }
.games-mask { position: fixed; inset: 0; z-index: 94; background: transparent; opacity: 0; transition: opacity 0.3s; }
.games-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: flex; flex-direction: column; height: calc(100vw * 470 / 750);
  background: rgba(58, 4, 4, 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-top: 2px solid #e04a4a; box-shadow: 0 -1px 0 rgba(255, 140, 140, 0.35);
  transform: translateY(100%); transition: transform 0.3s ease; }
.games-sheet.open .games-mask { opacity: 1; }
.games-sheet.open .games-panel { transform: none; }

/* Tabs, measured from the reference game panel (phone 360px wide): tab 70 x 22, label 13px medium, close tab 37 x 22. */
.games-head { --gt: min(calc(100vw / 360), 1.4px); display: flex; align-items: flex-end; justify-content: space-between; height: calc(22 * var(--gt)); margin-top: calc(-22 * var(--gt) - 2px); padding: 0 0 0 calc(10 * var(--gt)); background: transparent; }
.games-tab, .games-close { position: relative; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 0; background: center / 100% 100% no-repeat; font-family: Oxanium, Arial, sans-serif; cursor: pointer; }
.games-tab { gap: 0.375rem; height: calc(22 * var(--gt)); min-width: calc(70 * var(--gt)); padding: calc(2 * var(--gt)) calc(14 * var(--gt)) 0; color: #fff; font-size: calc(13 * var(--gt)); font-weight: 500; letter-spacing: 0; line-height: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f35151'/%3E%3Cstop offset='1' stop-color='%23d31919'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 30C7 30 8 1 19 1H79C90 1 92 30 100 30Z' fill='url(%23g)'/%3E%3C/svg%3E"); }
.games-title { flex: 1; padding: 0 0.75rem; color: #fff; font-size: 0.8125rem; font-weight: 700; text-shadow: 0 1px 2px #000; }
.games-title:not(:empty) { flex: none; margin: 0 auto calc(3 * var(--gt)) 0.5rem; padding: calc(3 * var(--gt)) calc(10 * var(--gt)); border-radius: 1rem; background: rgba(0, 0, 0, 0.7); font-size: calc(12 * var(--gt)); text-shadow: none; }
.games-close { width: calc(37 * var(--gt)); height: calc(22 * var(--gt)); padding: calc(1 * var(--gt)) 0 0 calc(6 * var(--gt)); color: #fff; font-size: calc(12 * var(--gt));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 30' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f35151'/%3E%3Cstop offset='1' stop-color='%23d31919'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 30C7 30 8 1 19 1H50V30Z' fill='url(%23g)'/%3E%3C/svg%3E"); }
.games-close .i { width: 1em; height: 1em; }
.games-frame { flex: 1; width: 100%; border: 0; background: transparent; }

/* Wider screens: a fixed 750 x 470 mini screen centred at the bottom, like 9wicket's desktop layout. */
@media (min-width: 760px) {
  .games-panel { left: 50%; right: auto; width: 750px; max-width: 96vw; height: 470px; transform: translate(-50%, 100%); }
  .games-sheet.open .games-panel { transform: translate(-50%, 0); }
  .games-head { --gt: 1.2px; }
}

/* Desktop menu: Games button at the right end (opens the Games drawer), like 9wicket's nav-games. */
.desktop-nav a.nav-games { margin-left: auto; border-right: 0; border-left: 1px solid rgba(0, 0, 0, .2); background: linear-gradient(180deg, #f35151, #d31919); color: #fff; font-family: Oxanium, Arial, sans-serif; }
.desktop-nav a.nav-games:hover { background: linear-gradient(180deg, #ff6464, #e02424); text-decoration: none; }