/* ============================================================
   DAILY GAMES AND DA DAILY JUQ, the homepage's dailies row (2026-10-08)

   Two cards at the height the three were (235px on a wide screen): the
   games, most played first, with ALL GAMES opening the arcade; and the
   paper beside it, half and half, its newest front page the button. assets/games.js
   draws both. Every class is gm- prefixed (juq.css owns the short names)
   and every colour a token, so it wears the viewer's skin.
   ============================================================ */

/* ---------- the row ---------- */
/* half and half (the user, 2026-10-08) */
.featured-row.gm-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.featured-row.gm-row .featured .disp { margin: 0; font-size: clamp(28px, 2.6vw, 36px); line-height: 1; }
@media (max-width: 860px) { .featured-row.gm-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- DAILY GAMES ---------- */
.featured-row .featured.gm-games { grid-template-rows: auto 1fr; gap: var(--s-3); }
.gm-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }
.gm-all {
  flex: none; display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer;
  padding: var(--s-2) var(--s-4); font: inherit; font-family: var(--f-mono); font-size: var(--t-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink);
  background: transparent; border: var(--bw) solid var(--line-strong); border-radius: var(--radius);
}
.gm-all b { min-width: 20px; padding: 1px var(--s-2); text-align: center; color: var(--accent-ink); background: var(--accent); border-radius: var(--radius); font-variant-numeric: tabular-nums; }
.gm-all:hover { border-color: var(--accent); color: var(--accent); }
/* SIX, two columns of three (the user, 2026-10-09), at the height three
   rows had (a tile stays 42px: the name and the state together fit the
   30px icon). The card is the container: the names scale with it, and
   under 420px there is no room for two side by side, so it goes to one
   column at the old size */
.featured-row .featured.gm-games { container: gmcard / inline-size; }
.gm-hot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); align-content: center; }
@container gmcard (max-width: 420px) { .gm-hot { grid-template-columns: minmax(0, 1fr); } .gm-hot .gm-tile .gm-name { font-size: var(--t-lg); } }

/* A GAME, in the card: its icon, its name set like the titles (the display
   face, upright words in ink and *accent* words in the accent), and how it
   stands today on the right */
.gm-tile {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: var(--s-3);
  padding: var(--s-1) var(--s-3) var(--s-1) var(--s-1);
  font: inherit; text-align: left; text-decoration: none; color: var(--ink); cursor: pointer;
  background: var(--surface-2); border: var(--bw) solid var(--line-strong); border-radius: var(--radius);
}
.gm-tile:hover { border-color: var(--accent); }
.gm-tile:focus-visible, .gm-pick:focus-visible, .gm-mini:focus-visible, .gm-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gm-ico { width: 30px; height: 30px; display: grid; place-items: center; font-size: var(--t-h3); line-height: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.gm-ico img { width: 22px; height: 22px; object-fit: contain; }
.gm-ico-lg { width: 44px; height: 44px; font-size: var(--t-h1); }
.gm-ico-lg img { width: 32px; height: 32px; }
/* A PICTURE IS THE ROUNDED SQUARE (the user, 2026-10-08: not "squares inside
   squares"): the game's own icon fills the box to its corners, no frame;
   an emoji keeps the framed square it sits in */
.gm-ico.gm-ico-pic { border: 0; background: var(--surface-2); }
.gm-ico.gm-ico-pic img { width: 100%; height: 100%; object-fit: cover; }
/* the name over how it stands today, each on one line */
.gm-txt { display: grid; min-width: 0; }
.gm-tile .gm-name, .gm-tile .gm-state { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-tile .gm-name { font-size: clamp(13px, 2.9cqi, 16px); line-height: 1.05; padding-right: 2px; }
.gm-tile .gm-state { line-height: 1.25; }
.gm-name { min-width: 0; font-family: var(--f-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: var(--t-h3); letter-spacing: -0.02em; line-height: 1.05; }
.gm-name em { color: var(--accent); font-style: inherit; }
.gm-state { font-family: var(--f-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; color: var(--accent); font-variant-numeric: tabular-nums; }
a.gm-tile .gm-state, a.gm-pick .gm-state { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--t-mono); }
/* DONE FOR TODAY: quieter, and one of ours counts down to the next */
.gm-tile.gm-done, .gm-pick.gm-done { background: transparent; border-color: var(--line); }
.gm-done .gm-name, .gm-done .gm-name em { color: var(--muted); }
.gm-done .gm-state { color: var(--muted); font-weight: 400; }
.gm-tile.gm-done:hover { border-color: var(--accent); }

/* ---------- DA DAILY JUQ: the words, and the front page as the button ---------- */
.featured-row .featured.gm-paper { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-8); }
.gm-paper-text { align-self: start; display: grid; gap: var(--s-4); }
.gm-paper-text p { max-width: 34ch; }
/* THE FRONT PAGE AS IT LANDS: tilted, the paper's offset shadow, drawn at
   500 by 350 like the thrown one and scaled to fit (--gm-k, games.js). On a
   hover it straightens and lifts, the way a paper is picked up. */
.gm-mini {
  position: relative; width: 240px; aspect-ratio: 500 / 350; margin: var(--s-2) var(--s-4) var(--s-2) 0;
  overflow: visible; cursor: pointer; color: var(--ink);
  transform: rotate(-3deg); transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.gm-mini-sheet {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--surface); border: var(--bw) solid var(--ink); border-radius: var(--radius);
  box-shadow: 7px 7px 0 var(--accent); transition: box-shadow 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.gm-mini-page {
  --dj-mast: 44px; --dj-hed: 34px;
  position: absolute; top: 0; left: 0; width: 500px; height: 350px; display: flex; flex-direction: column;
  transform: scale(var(--gm-k, 0.5)); transform-origin: 0 0;
}
.gm-mini:hover, .gm-mini:focus-visible { transform: rotate(-0.5deg) translate(-2px, -4px) scale(1.04); }
.gm-mini:hover .gm-mini-sheet, .gm-mini:focus-visible .gm-mini-sheet { box-shadow: 12px 12px 0 var(--accent); }
.gm-mini:active { transform: rotate(-2deg) scale(0.99); }
.gm-mini:active .gm-mini-sheet { box-shadow: 3px 3px 0 var(--accent); }
/* LIFTED OFF THE CARD while its paper is open: daily.js flies this very
   front page up to be read, so the card shows where it was taken from */
.gm-mini.gm-lifted { visibility: hidden; }
/* the paper says it can be read, on a phone too where nothing hovers */
.gm-mini-tag {
  position: absolute; right: -6px; bottom: 10px; z-index: 1;
  padding: var(--s-1) var(--s-3); font-family: var(--f-mono); font-size: var(--t-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap;
  color: var(--accent-ink); background: var(--accent); border: var(--bw) solid var(--ink); border-radius: var(--radius);
  transform: rotate(3deg); transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.gm-mini:hover .gm-mini-tag, .gm-mini:focus-visible .gm-mini-tag { transform: rotate(0deg) translateX(4px); }
@media (prefers-reduced-motion: reduce) { .gm-mini, .gm-mini-sheet, .gm-mini-tag { transition: none; } }
@media (max-width: 640px) {
  .featured-row .featured.gm-paper { grid-template-columns: minmax(0, 1fr); }
  .gm-mini { justify-self: center; width: min(100% - var(--s-6), 340px); margin: var(--s-3) 0 var(--s-5); }
}

/* ============================================================ ALL GAMES: THE ARCADE
   In the dailies' overlay shell (.overlay, .mid, .panel from juq.css). The
   coin slot and the coin sit in the middle of the screen; the panel then
   powers on there like an old set: a bright line, the picture opening out
   of it, the scanlines fading. games.js sets the beats (show, clunk, open,
   closing) and plays the sounds on them. */
.gm-stage { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 2; pointer-events: none; }
/* THE COIN BOX, its top seen a little from above with the slot across it.
   The slit's line is y -11px from the middle of the screen. */
.gm-box {
  position: absolute; left: -80px; top: -24px; width: 160px; height: 112px;
  display: grid; grid-template-rows: auto 1fr; justify-items: center;
  background: var(--surface-2); border: var(--bw) solid var(--ink); border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--accent); opacity: 0; transform: translateY(14px);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.gm-box-top { width: 100%; height: 22px; display: grid; place-items: center; background: var(--surface); border-bottom: var(--bw) solid var(--ink); border-radius: var(--radius) var(--radius) 0 0; }
.gm-slit { width: 92px; height: 8px; background: var(--bg); border-radius: 2px; box-shadow: inset 0 2px 3px var(--shadow); transition: background 0.15s, box-shadow 0.15s; }
.gm-slot-txt { align-self: center; font-family: var(--f-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
/* THE COIN FALLS FACE ON INTO THE SLIT, its edge first, the way a coin goes
   into a slot on top of a box: this window ends at the slit's line, so all
   of the coin that has gone in is cut off there. No spin. */
.gm-drop { position: absolute; left: -60px; top: calc(-11px - 60vh); width: 120px; height: 60vh; overflow: hidden; z-index: 1; }
.gm-coin { position: absolute; left: 50%; bottom: 0; width: 72px; height: 72px; margin-left: -36px; transform: translateY(calc(72px - 60vh)); }
.gm-wrap.show .gm-box { opacity: 1; transform: none; }
.gm-wrap.show .gm-slot-txt { animation: gmBlink 0.5s steps(2, end) infinite; }
.gm-wrap.show .gm-coin { animation: gmCoin 0.66s cubic-bezier(0.55, 0, 1, 0.45) 0.05s both; }
.gm-wrap.clunk .gm-box { animation: gmClunk 0.16s ease-out; }
.gm-wrap.clunk .gm-slit { background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.gm-wrap.clunk .gm-slot-txt { animation: none; }
.gm-wrap.open .gm-box { opacity: 0; transform: scale(1.12); transition-duration: 0.18s; }
@keyframes gmBlink { 0% { opacity: 1; } 100% { opacity: 0.25; } }
/* falling, faster all the way (the box's timing), until its edge meets the
   slit; then it slides in, slowing, as the slot takes it (this keyframe's) */
@keyframes gmCoin {
  0% { transform: translateY(calc(72px - 60vh)); }
  68% { transform: translateY(0); animation-timing-function: cubic-bezier(0.25, 0.6, 0.5, 1); }
  100% { transform: translateY(76px); }
}
@keyframes gmClunk { 0% { transform: translateY(0); } 40% { transform: translateY(4px); } 100% { transform: translateY(0); } }
.gm-snd { margin-right: var(--s-2); }
.gm-snd svg { width: 16px; height: 16px; }
.gm-snd[aria-pressed="false"] { color: var(--muted); }

/* the column, never wider than the screen: an auto grid column takes its
   content's width, 640px, on a phone too */
.gm-wrap .mid { grid-template-columns: minmax(0, 1fr); }
.gm-wrap .panel.gm-panel { width: min(640px, 100%); transform: none; opacity: 0; transition: none; }
.gm-wrap.open .panel.gm-panel { opacity: 1; animation: gmOn 0.46s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.gm-wrap.closing .panel.gm-panel { animation: gmOff 0.26s ease-in both; }
@keyframes gmOn {
  0% { transform: scale(0.05, 0.006); filter: brightness(5); }
  38% { transform: scale(1, 0.006); filter: brightness(4); }
  74% { transform: scale(1, 1.03); filter: brightness(1.5); }
  100% { transform: none; filter: none; }
}
@keyframes gmOff {
  0% { transform: none; filter: none; opacity: 1; }
  55% { transform: scale(1, 0.006); filter: brightness(4); opacity: 1; }
  100% { transform: scale(0, 0.006); filter: brightness(6); opacity: 0; }
}
/* the scanlines, there as it switches on and fading as the picture settles */
.gm-panel::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(to bottom, var(--shadow) 0 1px, transparent 1px 4px);
}
.gm-wrap.open .gm-panel::after { animation: gmScan 0.9s ease-out both; }
@keyframes gmScan { 0% { opacity: 1; } 100% { opacity: 0; } }

.gm-panel-t { flex: 1; padding-left: var(--s-2); font-family: var(--f-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: var(--t-h2); letter-spacing: -0.02em; }
.gm-panel-t em { color: var(--accent); font-style: inherit; }
.gm-menu { padding: var(--s-3) var(--s-7) var(--s-7); }
/* RECOMMENDED BY CHAT: who recommended a game, under its line, face and
   name; a trial's days left; and the box to recommend one */
.gm-sec small { margin-left: var(--s-3); font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--muted); }
.gm-by { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-1); font-size: var(--t-sm); color: var(--muted); }
.gm-by .u-cr-face { width: 18px; height: 18px; }
.gm-by b { color: var(--ink); font-weight: 700; }
.gm-by i { font-style: normal; font-family: var(--f-mono); font-size: var(--t-label); }
.gm-rec { margin: 0 var(--s-7) var(--s-6); padding-top: var(--s-2); }
.gm-rec[hidden], .gm-rec-form[hidden], .gm-rec-in[hidden] { display: none; }
.gm-rec .gm-sec { margin-top: var(--s-4); }
.gm-rec-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); }
.gm-rec-form input {
  min-width: 0; padding: var(--s-4) var(--s-5); font: inherit; font-size: var(--t-md); color: var(--ink);
  background: var(--surface-2); border: var(--bw) solid var(--line-strong); border-radius: var(--radius);
}
.gm-rec-form input:focus { outline: none; border-color: var(--accent); }
.gm-rec-msg { margin: var(--s-3) 0 0; font-size: var(--t-sm); color: var(--muted); }
/* empty until a recommendation is sent: then it says what happened */
.gm-rec-msg:empty { display: none; }
.gm-rec-msg.gm-rec-bad { color: var(--accent); font-weight: 700; }
@media (max-width: 520px) { .gm-rec { margin: 0 var(--s-5) var(--s-5); } .gm-rec-form { grid-template-columns: minmax(0, 1fr); } }
/* the credits, at the foot of the list, last to arrive */
.gm-credits { margin: 0 var(--s-7) var(--s-7); }
.gm-wrap.open .gm-credits { animation: gmLoad 0.3s cubic-bezier(0.2, 0.8, 0.3, 1) 0.85s both; }
@media (max-width: 520px) { .gm-credits { margin: 0 var(--s-5) var(--s-6); } }
.gm-sec { margin: var(--s-6) 0 var(--s-3); font-family: var(--f-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.gm-picks { display: grid; gap: var(--s-3); }
/* A GAME ON THE SELECT SCREEN: the cursor that marks the one you are on,
   its icon, its name and line, and how it stands today */
.gm-pick {
  position: relative; display: grid; grid-template-columns: 14px 44px minmax(0, 1fr) auto; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5) var(--s-4) var(--s-2);
  font: inherit; text-align: left; text-decoration: none; color: var(--ink); cursor: pointer;
  background: var(--surface-2); border: var(--bw) solid var(--line-strong); border-radius: var(--radius);
}
.gm-cur { color: var(--accent); font-size: var(--t-sm); opacity: 0; transform: translateX(-4px); transition: opacity 0.12s, transform 0.12s; }
.gm-pick:hover, .gm-pick:focus-visible { border-color: var(--accent); }
.gm-pick:hover .gm-cur, .gm-pick:focus-visible .gm-cur { opacity: 1; transform: none; }
.gm-pick-txt { display: grid; gap: 3px; min-width: 0; }
.gm-pick .gm-name { font-size: var(--t-h2); }
.gm-line { font-size: var(--t-sm); line-height: 1.4; color: var(--muted); }
/* the games load in one after another once the picture is up */
.gm-wrap.open .gm-pick { animation: gmLoad 0.28s cubic-bezier(0.2, 0.8, 0.3, 1) both; animation-delay: calc(0.4s + var(--i, 0) * 0.06s); }
@keyframes gmLoad { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) {
  .gm-menu { padding: var(--s-2) var(--s-5) var(--s-6); }
  .gm-pick { grid-template-columns: 44px minmax(0, 1fr); padding-left: var(--s-4); }
  .gm-cur { display: none; }
  .gm-pick .gm-state { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-wrap .gm-stage { display: none; }
  .gm-wrap.open .panel.gm-panel, .gm-wrap.closing .panel.gm-panel, .gm-wrap.open .gm-pick, .gm-wrap.open .gm-panel::after { animation: none; }
}