/* The game floor (hub.js): the games that can be dealt as tiles, the rounds, and the way
   into the room. Same night-time casino as the rest: near-black, gold hairlines, gold neon, one hot pink. */

.hub { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6vh;
  padding: 3vh 4vw; box-sizing: border-box; overflow: hidden; font-family: "Quicksand", var(--body); color: #fff;
  background: radial-gradient(80% 70% at 50% 45%, #1a0e18 0%, #0a0609 60%, #050407 100%); }
.hub::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(140% 110% at 50% 45%, transparent 55%, rgba(0,0,0,.7) 100%); }
/* the backdrop is solid from the first frame, since the room is open underneath it; only what's on it fades in */
.hub-view, .hub-tabs, .hub-sign { animation: hub-in .6s cubic-bezier(.2,.8,.2,1); }
@keyframes hub-in { from { opacity: 0; } }
.hub > * { position: relative; z-index: 1; }

/* ---- the tabs along the top, level with the top bar's buttons ---- */
.hub-tabs { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 2.2vw; }
.hub-tab { position: relative; min-height: 44px; padding: 0 .4vw; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: 600 max(13px, .86vw) "Quicksand", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.5); transition: color .2s; }
.hub-tab:hover { color: rgba(255,255,255,.85); }
.hub-tab[aria-current] { color: #ffd98a; text-shadow: 0 0 .8vw rgba(255,195,90,.6); }
.hub-tab[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; border-radius: 2px; background: #ffd98a; box-shadow: 0 0 .6vw rgba(255,180,60,.8); }
.hub-tab:focus-visible { outline: 2px solid #ffd98a; outline-offset: 3px; border-radius: .4vw; }

.hub-view { display: flex; flex-direction: column; align-items: center; gap: 1.6vh; width: 100%; }

.hub-head { display: flex; flex-direction: column; align-items: center; margin-bottom: .8vw; }
.hub-title { font-size: 5.2vw; line-height: 1.1; margin-top: .3vw; }
.hub-title.go { animation: gx-catch 1.1s steps(1, end) both, gx-hum 5s ease-in-out 1.1s infinite; }

/* ---- the rounds ---- */
.hub-rounds { display: flex; justify-content: center; }

/* the buttons that add and take away a round */
.hm-deck { display: flex; align-items: center; gap: 1vw; }
.hm-rounds { display: flex; align-items: baseline; justify-content: center; gap: .5vw; width: 7.4vw; color: #ff8cc4; }
.hm-rounds b { font-size: 1.9vw; line-height: 1; font-weight: 700; color: #ffd98a; }
.hm-rounds small { font-size: .78vw; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.hm-btn { position: relative; flex: none; width: 2.6vw; height: 2.6vw; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #2a1a08;
  background: radial-gradient(circle at 36% 28%, #fff4cf, #e0b04a 62%, #a87a22); box-shadow: 0 .22vw 0 #6e4f12, 0 .4vw 1vw rgba(0,0,0,.6), 0 0 1.1vw -.2vw rgba(255,180,60,.6);
  transition: transform .09s, box-shadow .09s, filter .2s, opacity .25s; }
.hm-btn::before, .hm-btn.plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 42%; height: 11%; border-radius: 99px; background: currentColor; transform: translate(-50%, -50%); }
.hm-btn.plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.hm-btn:hover { filter: brightness(1.1); }
.hm-btn:active { transform: translateY(.18vw); box-shadow: 0 .04vw 0 #6e4f12, 0 .1vw .4vw rgba(0,0,0,.6); }
.hm-btn:focus-visible { outline: 2px solid #ffd98a; outline-offset: 3px; }
/* at 3 or 7 rounds the button stays focusable, and refuses with a shake */
.hm-btn.off { opacity: .35; filter: saturate(.4); cursor: default; }
.hm-btn.off:active { transform: none; }
.hm-btn.nope { animation: tile-nope .4s cubic-bezier(.3,.7,.4,1); }

/* ---- the games that can be dealt ---- */
.hub-games { display: flex; flex-direction: column; align-items: center; gap: .9vw; }
.hub-tiles { display: flex; justify-content: center; align-items: flex-start; gap: 3vw; width: min(72vw, 1200px); }
.ht-group { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 1.1vw; max-width: 26vw; }
.ht-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9vw; width: 100%; }
/* the bubble over each group, with a little tail pointing down at its games */
.ht-bubble { position: relative; min-height: 44px; padding: .45vw 1.6vw; border-radius: 999px; cursor: pointer; transition: color .2s, background .2s, box-shadow .2s; font: 600 max(13px, 1vw) "Quicksand", sans-serif; letter-spacing: .24em; text-transform: uppercase;
  color: var(--bc); border: 1px solid var(--bc); background: color-mix(in srgb, var(--bc) 12%, #0a0609); box-shadow: 0 0 1.4vw -.3vw var(--bc), inset 0 0 .8vw -.3vw var(--bc); }
.ht-bubble::after { content: ""; position: absolute; left: 50%; bottom: -.42vw; width: .7vw; height: .7vw; margin-left: -.35vw; transform: rotate(45deg);
  background: color-mix(in srgb, var(--bc) 12%, #0a0609); border: solid var(--bc); border-width: 0 1px 1px 0; }
/* every game in its group is on: just the little diamond lights up */
.ht-bubble.on::after { background: var(--bc); box-shadow: 0 0 .8vw var(--bc); }
.ht-bubble:hover { filter: brightness(1.12); }
.ht-bubble:focus-visible { outline: 2px solid #ffd98a; outline-offset: 3px; }
.ht-group.word { --bc: #ff8cc4; }
.ht-group.picture { --bc: #6fd8ff; }
.ht { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 1vw; align-items: center; text-align: left;
  padding: 1vw 1.1vw; min-height: 44px; border-radius: 1.1vw; cursor: pointer; font: inherit; color: #fff;
  background: rgba(16,11,18,.75); border: 2px solid rgba(255,255,255,.14); transition: border-color .3s, background .3s, box-shadow .3s, opacity .3s; }
/* word games keep a solid edge; drawing games get a sketched, dashed one */
.ht:hover:not(:disabled) { border-color: rgba(255,217,138,.45); }
.ht:focus-visible { outline: 2px solid #ffd98a; outline-offset: 3px; }
.ht.on { border-color: rgba(255,217,138,.75); background: linear-gradient(180deg, rgba(40,28,22,.85), rgba(16,11,12,.85)); box-shadow: 0 0 2vw -.6vw rgba(255,180,60,.5); }
.ht-logo { grid-row: span 2; width: 3vw; height: 3vw; }
.ht-text { display: flex; flex-direction: column; gap: .2vw; min-width: 0; }
.ht-text b { font-size: max(14px, 1.05vw); font-weight: 600; }
.ht-text small { font-size: max(11px, .74vw); font-weight: 500; line-height: 1.35; color: rgba(255,255,255,.55); }
/* a game that's switched off dims; the gold border and glow say which are on */
.ht:not(.on):not(.soon) .ht-logo { opacity: .5; }
.ht:not(.on):not(.soon) .ht-text { opacity: .7; }
.ht-logo, .ht-text { transition: opacity .3s; }
.ht-state { grid-column: 2; justify-self: start; margin-top: .45vw; white-space: nowrap; padding: .18vw .6vw; border-radius: 999px; font-size: max(10px, .62vw); font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.14); }
.ht.on .ht-state { color: #2a1a08; border-color: transparent; background: linear-gradient(180deg, #fff0c0, #e0b04a); }
.ht.soon { cursor: default; opacity: .5; }
.ht.soon .ht-state { color: #ff8cc4; border-color: rgba(255,140,196,.4); }
.ht.nope { animation: tile-nope .4s cubic-bezier(.3,.7,.4,1); }
@keyframes tile-nope { 20% { transform: translateX(-.4vw); } 40% { transform: translateX(.35vw); } 60% { transform: translateX(-.2vw); } 80% { transform: translateX(.1vw); } }

/* the games' neon logos */
.hub-logo { fill: none; stroke: var(--c); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible;
  filter: drop-shadow(0 0 .25vw var(--c)) drop-shadow(0 0 .7vw var(--c)); }

/* ---- the way back: the sign in the top left, as in the lobby ---- */
.hub > .hub-sign, body[data-room] .hub > .hub-sign { position: absolute; left: 1.6vw; top: 1.6vh; z-index: 2; --ts: 4.2vw; } /* body[data-room]: outranks the lobby's size for the sign */

/* ---- the way into the room ---- */
.hub-actions { display: flex; gap: 1vw; align-items: center; }
.hub-rec { font-size: max(12px, .9vw); font-weight: 500; color: rgba(255,255,255,.6); }
.hub-go { min-height: 44px; padding: .8vw 2vw; border-radius: 999px; font: 600 max(14px, 1vw) "Quicksand", sans-serif; cursor: pointer; transition: filter .2s, opacity .3s, transform .15s; }
.hub-go { color: #2a1a08; border: 0; background: linear-gradient(180deg, #fff0c0, #e0b04a); box-shadow: 0 0 2vw -.4vw rgba(255,180,60,.7); }
.hub-go:hover:not(:disabled) { filter: brightness(1.08); }
.hub-go:active:not(:disabled) { transform: scale(.97); }
.hub-go:disabled { opacity: .35; filter: grayscale(1); cursor: not-allowed; box-shadow: none; }
.hub-go:focus-visible { outline: 2px solid #ffd98a; outline-offset: 3px; }

/* the top bar sits above the floor (Settings stays reachable) but the round pill and timer don't */
body.hub-open #round-pill, body.hub-open #timer { visibility: hidden; }
body.hub-open #topbar { z-index: 46; pointer-events: none; } /* its empty middle mustn't block the tabs */
body.hub-open #topbar > :not(.spacer) { pointer-events: auto; }
/* the sparks normally sit under the screens; the floor is opaque, so they come up over it here */
body.hub-open .sparks-canvas { z-index: 47; }

@media (prefers-reduced-motion: reduce) {
  .hub-title.go { animation: none; }
}