/* THE GAME RANDOMIZER, shared by play.html and display.html: a ring of game tiles round a middle
   panel. The board is a size container, so every size below is a share of the board itself and the
   same rules serve a phone and a stadium screen. */
.gwb { container-type:inline-size; display:grid; width:100%;
  grid-template-columns:repeat(var(--C), minmax(0, 1fr)); grid-template-rows:repeat(var(--R), auto);
  gap:var(--gw-gap); --gw-gap:2cqw; }
.gwb.big { --gw-gap:1.1cqw; }

/* A tile: picture over the game's name, tinted in the game's colour. */
.gwc { min-width:0; }
.gwt { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  aspect-ratio:var(--gw-tile-ar, 1 / 1); border-radius:var(--gw-r); overflow:hidden; --gw-r:3cqw;
  background:radial-gradient(120% 90% at 50% 25%, color-mix(in srgb, var(--hue, #8c93a8) 55%, #0b1020) 0%, #0b1020 75%);
  border:.5cqw solid rgba(255,255,255,.10); box-sizing:border-box;
  transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease, opacity .4s ease, filter .4s ease; }
.gwb.big .gwt { --gw-tile-ar:4 / 3; --gw-r:1.2cqw; border-width:.22cqw; }
.gwt-art { flex:1; min-height:0; width:100%; display:flex; align-items:center; justify-content:center; gap:2%; padding:6% 6% 0; box-sizing:border-box; }
.gwt-art img { max-width:78%; max-height:100%; object-fit:contain; filter:drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.5)); }
.gwt-art.two img { max-width:42%; }
.gwt-art em { font-style:normal; font-weight:900; font-size:5cqw; color:#fff; opacity:.85; }
.gwb.big .gwt-art em { font-size:1.8cqw; }
.gwt-name { width:100%; padding:2% 4% 5%; box-sizing:border-box; text-align:center; font-weight:900; line-height:1.05;
  font-size:3.6cqw; color:#e9eef9; text-shadow:0 1px 3px rgba(0,0,0,.7); }
.gwb.big .gwt-name { font-size:1.45cqw; }
.gwt-num { font-family:"Russo One", sans-serif; font-size:13cqw; color:#fff; line-height:1;
  text-shadow:0 .6cqw 0 rgba(0,0,0,.35); }
.gwb.big .gwt-num { font-size:5cqw; }
.gwt-word { display:flex; gap:.8cqw; }
.gwt-word i { font-style:normal; font-weight:900; width:6cqw; height:6cqw; display:grid; place-items:center; font-size:4cqw;
  border-radius:.8cqw; background:#3a3f4b; color:#fff; }
.gwt-word i.g { background:#3fae5a; } .gwt-word i.y { background:#d6a92a; }
.gwb.big .gwt-word { gap:.3cqw; }
.gwb.big .gwt-word i { width:2.2cqw; height:2.2cqw; font-size:1.4cqw; border-radius:.3cqw; }
/* Last Tap: the big red button. */
.gwt-btn { width:17cqw; aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 38% 30%, #ff9a8a 0%, #ef3b3b 38%, #a81414 100%);
  box-shadow:0 0 0 1.2cqw #2a2f3b, 0 0 0 1.6cqw rgba(255,255,255,.18), 0 1.4cqw 2cqw rgba(0,0,0,.5); }
.gwt-btn b { font-family:"Russo One", sans-serif; font-size:3.6cqw; color:#fff; letter-spacing:.3cqw; text-shadow:0 .3cqw 0 rgba(0,0,0,.3); }
.gwb.big .gwt-btn { width:7cqw; box-shadow:0 0 0 .45cqw #2a2f3b, 0 0 0 .6cqw rgba(255,255,255,.18), 0 .5cqw .8cqw rgba(0,0,0,.5); }
.gwb.big .gwt-btn b { font-size:1.4cqw; letter-spacing:.1cqw; }
/* Gridlock: a 6x6 board, blocks placed in sixths. */
.gwt-grid { position:relative; width:19cqw; aspect-ratio:1; border-radius:1.2cqw; background:#1d2331;
  box-shadow:inset 0 0 0 .5cqw #3a4357; }
.gwb.big .gwt-grid { width:7.4cqw; border-radius:.45cqw; box-shadow:inset 0 0 0 .2cqw #3a4357; }
.gwt-grid i { position:absolute; border-radius:12%; background:#8fa3c8; box-shadow:inset 0 -6% 0 rgba(0,0,0,.2); }
.gwt-grid i.red { left:3%; top:36%; width:30%; height:14%; background:#ef4b4b; border-radius:8% / 20%; }
.gwt-grid i.v { width:14%; height:46%; } .gwt-grid i.h { height:14%; width:46%; }
.gwt-grid i.a { left:52%; top:20%; background:#f2c230; }
.gwt-grid i.b { left:20%; top:4%; background:#5b7cfa; }
.gwt-grid i.c { left:84%; top:52%; height:30%; background:#3fae5a; }
.gwt-grid i.d { left:20%; top:68%; background:#a77bff; }
.gwt-grid .exit { position:absolute; right:-6%; top:36%; height:14%; width:6%; background:#ef4b4b; opacity:.6; border-radius:0 30% 30% 0; }
.filler .gwt { background:rgba(11,16,32,.55); border-style:dashed; }
.gwt-logo { width:50%; opacity:.18; margin:auto; }

/* The next tile's pull in the slow finish: glows in as the highlight edges towards it. */
.gwc:not(.on) .gwt { border-color:color-mix(in srgb, #ffd23f calc(var(--lean, 0) * 75%), rgba(255,255,255,.10));
  box-shadow:0 0 0 calc(var(--lean, 0) * .4cqw) rgba(255,210,63,calc(var(--lean, 0) * .3)),
  0 0 calc(var(--lean, 0) * 3cqw) rgba(255,210,63,calc(var(--lean, 0) * .45)); }
.gwb.big .gwc:not(.on) .gwt { box-shadow:0 0 0 calc(var(--lean, 0) * .16cqw) rgba(255,210,63,calc(var(--lean, 0) * .3)),
  0 0 calc(var(--lean, 0) * 1.2cqw) rgba(255,210,63,calc(var(--lean, 0) * .45)); }
/* The highlight running round the ring. The transition out is what leaves a short trail behind it. */
.gwc.on .gwt { border-color:#ffd23f; transform:scale(1.04);
  box-shadow:0 0 0 .4cqw rgba(255,210,63,.35), 0 0 4cqw rgba(255,210,63,.55); transition-duration:.06s; }
.gwb.big .gwc.on .gwt { box-shadow:0 0 0 .18cqw rgba(255,210,63,.35), 0 0 1.6cqw rgba(255,210,63,.55); }

/* Landed: everything else steps back, the winner pulses. */
.gwb.landed .gwc:not(.win) .gwt { opacity:.32; filter:grayscale(.6); transform:scale(.97); }
.gwc.win .gwt { animation:gwWin 1s ease-in-out infinite; z-index:1; }
@keyframes gwWin { 0%,100% { transform:scale(1.06); } 50% { transform:scale(1.11); } }

/* The middle: "Next game" while it runs, then the pick and its difficulty. */
.gwb-mid { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5cqw; text-align:center; min-width:0; }
.gwb-kicker { font-size:3.6cqw; font-weight:900; letter-spacing:.18em; text-transform:uppercase; color:#8c93a8; }
.gwb-pick { font-family:"Russo One", sans-serif; font-size:7cqw; line-height:1.05; color:#ffd23f;
  text-shadow:0 0 3cqw rgba(255,210,63,.45); opacity:0; transform:scale(.7); }
.gwb-diff { font-size:4cqw; font-weight:900; letter-spacing:.2em; color:#fff; padding:.6cqw 3cqw; border-radius:99px;
  background:rgba(255,255,255,.1); opacity:0; }
.gwb-diff:empty { display:none; }
.gwb.big .gwb-kicker { font-size:1.3cqw; }
.gwb.big .gwb-pick { font-size:4.2cqw; }
.gwb.big .gwb-diff { font-size:1.5cqw; padding:.25cqw 1.2cqw; }
.gwb.landed .gwb-pick { opacity:1; transform:none; transition:opacity .25s ease, transform .45s cubic-bezier(.34,1.56,.64,1); }
.gwb.landed .gwb-diff { opacity:1; transition:opacity .3s ease .25s; }

@media (prefers-reduced-motion: reduce) {
  .gwc.win .gwt { animation:none; }
}

/* Each screen's frame. */
.gw-host { width:100%; }
#wheelArena { position:fixed; inset:0; z-index:56; display:flex; align-items:center; justify-content:center; }
#wheelArena.hidden { display:none; }
/* 16:9 with 4:3 tiles in three rows: as wide as the screen allows without the board running taller than it */
.wheel-wrap { width:min(94vw, 150vh, 1700px); display:flex; justify-content:center; }