/* Conquián / Con Quién: cards, the felt, the phone play screen, the TV, the rules card and its egg, the lobby's
   game picker. Loaded by games/index.js after the Dots sheets; it reuses their chrome (gp-strip, gp-tray, gm-btn,
   gp-coach-target, gm-win) and adds the card table. Tokens only. Class prefix: cq- (and ggame- in the lobby).
   Everything that moves sits in the prefers-reduced-motion: no-preference block at the bottom; reduced motion
   gets the same game, still. */

:root {
  --cq-ivory: #fbf5e6; --cq-ink: #2a2116; --cq-edge: #d9ccb0;
  --cq-o: #b8860b; --cq-c: #c0302b; --cq-e: #2f63ad; --cq-b: #2f7d35;
  --cq-felt: #0f3a2c; --cq-felt-2: #14503b; --cq-rail: #3a2414;
  --cq-red: #c62f2a; --cq-rose: #e0587a; --cq-gold: #f2c14e;
  /* card widths (height is 1.4×): tiny piles, other players' melds, yours, the hand, the middle card */
  --cq-xs: 16px;
  --cq-s: min(calc(30px * var(--eai-text-scale, 1)), 42px);
  --cq-m: min(calc(44px * var(--eai-text-scale, 1)), calc((100vw - 64px) / 6.4), 64px);
  /* the hand: one row, as big as fits (10 cards overlapping by half on a 390 px phone), never tiny */
  --cq-h: max(58px, min(calc((100vw - 30px) / 5.5), 96px));
  --cq-l: min(calc(100px * var(--eai-text-scale, 1)), 34vw, 150px);
}

/* ---- a card ------------------------------------------------------------------------------------------------- */
.cq-card {
  --w: var(--cq-m);
  position: relative; display: inline-block; flex: none; width: var(--w); aspect-ratio: 5 / 7; height: auto;
  border-radius: calc(var(--w) * .1); background: var(--cq-ivory); color: var(--cq-ink); overflow: hidden;
  box-shadow: 0 0 0 1px var(--cq-edge), 0 2px 0 rgba(0, 0, 0, .25), 0 6px 14px -6px rgba(0, 0, 0, .6);
  -webkit-tap-highlight-color: transparent; vertical-align: top;
}
button.cq-card { padding: 0; border: 0; cursor: pointer; font: inherit; }
button.cq-card:focus-visible { outline: 3px solid var(--eai-color-focus); outline-offset: 3px; }
.cq-xs { --w: var(--cq-xs); }
.cq-s { --w: var(--cq-s); }
.cq-m { --w: var(--cq-m); }
.cq-h { --w: var(--cq-h); }
.cq-l { --w: var(--cq-l); }
.cq-xl { --w: min(26vh, 18vw); }
.cq-tvm { --w: 8.6vh; }
.cq-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; pointer-events: none; }

/* the card we draw ourselves (under the art; it's what you see when the art isn't there) */
.cq-fb { position: absolute; inset: 0; display: block; }
.cq-s-o { --suit: var(--cq-o); } .cq-s-c { --suit: var(--cq-c); } .cq-s-e { --suit: var(--cq-e); } .cq-s-b { --suit: var(--cq-b); }
.cq-fb::before { /* the frame, with the Spanish-deck "pinta" gaps: oros none, copas one, espadas two, bastos three */
  content: ""; position: absolute; inset: 5%; border-radius: calc(var(--w) * .06);
  border: max(1px, calc(var(--w) * .025)) solid color-mix(in srgb, var(--suit, var(--cq-ink)) 55%, transparent);
}
.cq-fb-i { position: absolute; left: 7%; top: 5%; display: flex; flex-direction: column; align-items: center; line-height: .9; z-index: 1;
  background: var(--cq-ivory); padding: 1px 1px 2px; }
.cq-fb-i b { font: 800 calc(var(--w) * .3)/.95 var(--eai-font-display); color: var(--suit); letter-spacing: -.04em; }
.cq-fb-i2 { left: auto; top: auto; right: 7%; bottom: 5%; transform: rotate(180deg); }
.cq-suit { display: block; fill: var(--suit, currentColor); stroke: none; }
.cq-suit .cq-suit-in { fill: color-mix(in srgb, var(--cq-ivory) 70%, var(--suit)); }
.cq-suit-sm { width: calc(var(--w) * .2); height: calc(var(--w) * .2); }
.cq-suit-big { position: absolute; left: 50%; top: 50%; width: 48%; height: 48%; transform: translate(-50%, -50%); opacity: .95; }
.cq-court .cq-suit-big { top: 44%; width: 40%; height: 40%; }
.cq-fb-court { position: absolute; left: 0; right: 0; bottom: 18%; text-align: center; font: 800 calc(var(--w) * .13)/1 var(--eai-font-mono);
  text-transform: uppercase; letter-spacing: .02em; color: var(--suit); }
.cq-fb-court { display: none; }
.cq-l .cq-fb-court, .cq-xl .cq-fb-court { display: block; }
.cq-s .cq-fb-i2, .cq-tvm .cq-fb-i2 { display: none; }
.cq-xs .cq-fb > * { display: none; }
.cq-fb-back { background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .13) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .13) 0 2px, transparent 2px 7px), #8a241d; }
.cq-fb-back::before { border-color: rgba(251, 245, 230, .7); }
.cq-crown-mark { width: 46%; height: 46%; fill: var(--cq-gold); stroke: #6b1a2e; stroke-width: 1; position: relative; z-index: 1; }
.cq-xs .cq-crown-mark { display: none; }
.cq-fb-heart { position: absolute; left: 50%; bottom: 14%; width: 16%; aspect-ratio: 1; transform: translateX(-50%) rotate(45deg); background: var(--cq-rose); }
.cq-fb-heart::before, .cq-fb-heart::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; }
.cq-fb-heart::before { transform: translateX(-50%); } .cq-fb-heart::after { transform: translateY(-50%); }

.cq-empty, .cq-slot { background: transparent; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cq-ivory) 30%, transparent); }
.cq-slot { display: inline-grid; place-items: center; border: 0; }
.cq-slot-arrow { font: 800 calc(var(--w) * .4)/1 var(--eai-font-display); color: var(--cq-gold); }

/* piles and melds */
.cq-pile { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.cq-pile-stack { position: relative; display: inline-block; padding: 0 4px 4px 0; }
.cq-pile-stack > .cq-card { position: relative; }
.cq-pile-stack > .cq-pile-c2, .cq-pile-stack > .cq-pile-c3 { position: absolute; left: 0; top: 0; }
.cq-pile-c3 { transform: translate(4px, 4px); } .cq-pile-c2 { transform: translate(2px, 2px); }
.cq-pile-c1 { z-index: 1; }
.cq-pile-n { font: 800 var(--eai-step--1)/1 var(--eai-font-mono); }
.cq-pile-m .cq-pile-n, .cq-pile-l .cq-pile-n { position: absolute; right: -8px; top: -8px; z-index: 3; min-width: 1.9em; padding: 4px 5px; border-radius: 999px; text-align: center;
  background: var(--cq-gold); color: var(--cq-ink); }
.cq-stock.is-low .cq-pile-n { background: var(--eai-color-danger); color: var(--eai-color-bg); }
.cq-meld { display: inline-flex; align-items: flex-start; padding: 3px; border-radius: 8px; background: rgba(0, 0, 0, .18); }
.cq-meld > .cq-card + .cq-card { margin-left: calc(var(--w) * -.5); }
.cq-meld-m > .cq-card + .cq-card { margin-left: calc(var(--w) * -.42); }
.cq-meld-tvm > .cq-card + .cq-card { margin-left: calc(var(--w) * -.4); }

/* ---- the phone play screen ---------------------------------------------------------------------------------- */
body.games-cq .view { max-width: 720px; }
.cq-strip { gap: 6px; }
.cq-info { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0 4px; color: var(--eai-color-ink-muted); font: 700 var(--eai-step--1)/1.3 var(--eai-font-body); }
.cq-stake { color: var(--cq-gold); }
.cq-tick-wrap { display: flex; flex-direction: column; gap: 4px; }
.cq-ticker { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 4px 8px; text-align: left; cursor: pointer;
  border: 0; border-radius: 12px; background: transparent; color: var(--eai-color-ink-muted); font: 400 var(--eai-step--1)/1.3 var(--eai-font-body); }
.cq-ticker:hover, .cq-ticker:focus-visible { background: color-mix(in oklab, var(--eai-color-ink) 6%, transparent); }
.cq-ticker-text { flex: 1; min-width: 0; color: var(--eai-color-ink); }
.cq-ticker-more { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--eai-color-surface-2); font-weight: 800; }
.cq-history { margin: 0; padding: 4px 8px 4px 32px; color: var(--eai-color-ink-muted); font-size: var(--eai-step--1); line-height: 1.4; }

.cq-felt {
  background-color: var(--cq-felt);
  background-image:
    radial-gradient(120% 90% at 50% 30%, var(--cq-felt-2), transparent 70%),
    repeating-linear-gradient(60deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-60deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 6px);
  color: var(--cq-ivory);
}
.cq-art-on .cq-felt, .cq-tv.cq-art-on { background-image: radial-gradient(120% 90% at 50% 30%, transparent, rgba(0, 0, 0, .35) 80%), url(games-assets/conquian/felt.svg); background-size: auto, 160px 160px; background-repeat: no-repeat, repeat; }
.cq-table { overflow-x: clip; display: flex; flex-direction: column; gap: 10px; margin: 0 -6px; padding: 10px 8px 14px; border-radius: 22px;
  box-shadow: inset 0 2px 24px rgba(0, 0, 0, .45), 0 0 0 5px var(--cq-rail), 0 0 0 7px color-mix(in srgb, var(--cq-gold) 40%, var(--cq-rail)); }

.cq-opps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cq-opp { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 14px; background: rgba(0, 0, 0, .22); border: 2px solid transparent; }
.cq-opp.is-on { border-color: var(--cq-gold); box-shadow: 0 0 18px -6px var(--cq-gold); }
.cq-opp.is-away { opacity: .65; }
.cq-opp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 32px; }
.cq-opp-name { font: 800 var(--eai-step-0)/1.15 var(--eai-font-display); min-width: 0; overflow-wrap: anywhere; }
.cq-opp-melds { display: flex; flex-wrap: wrap; gap: 6px; }
.cq-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  background: rgba(251, 245, 230, .12); font: 700 var(--eai-step--1)/1 var(--eai-font-mono); }
.cq-chip-dealer { background: color-mix(in srgb, var(--cq-gold) 30%, transparent); }
.cq-chip.is-done { background: color-mix(in srgb, var(--eai-color-hit) 35%, transparent); }
.cq-chip-melded { background: var(--cq-ivory); color: var(--cq-ink); }

.cq-mid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 6px 0; }
.cq-pilebox { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.cq-pile-l { font: 700 var(--eai-step--1)/1.1 var(--eai-font-mono); text-transform: uppercase; letter-spacing: .06em; color: color-mix(in srgb, var(--cq-ivory) 70%, transparent); text-align: center; }
.cq-dead { position: relative; display: inline-block; }
.cq-dead .cq-card { filter: saturate(.55) brightness(.82); transform: rotate(-6deg); }
.cq-dead .cq-pile-n { position: absolute; right: -10px; top: -8px; min-width: 1.9em; padding: 4px 5px; border-radius: 999px; text-align: center; background: var(--eai-color-surface-2); color: var(--eai-color-ink); }
.cq-center { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; max-width: calc(var(--cq-l) + 70px); }
.cq-center-card { position: relative; }
.cq-center.is-mine .cq-center-card:not(.cq-slot):not(.is-goes) { box-shadow: 0 0 0 3px rgba(251, 245, 230, .8), 0 10px 30px -6px rgba(0, 0, 0, .7); }
.cq-center-from { font-size: var(--eai-step--1); line-height: 1.25; color: color-mix(in srgb, var(--cq-ivory) 80%, transparent); }
.cq-center-to { font: 800 var(--eai-step-0)/1.2 var(--eai-font-display); }
.cq-last { color: var(--cq-gold); font-weight: 700; }
.cq-forced { margin: 0; padding: 10px 12px; border-radius: 14px; background: rgba(198, 47, 42, .22); border: 2px dashed var(--cq-red); font-size: var(--eai-step-0); line-height: 1.3; }
.cq-forced b { color: #ffb3a8; font-family: var(--eai-font-display); }

/* the stamp */
.cq-stamped { overflow: visible; }
.cq-stamp { --rot: -14deg; position: absolute; left: 50%; top: 50%; z-index: 6; width: 150%; transform: translate(-50%, -50%) rotate(var(--rot)); pointer-events: none; display: grid; place-items: center; }
.cq-stamp.has-art { --rot: -5deg; }  /* W2's stamp is already tilted -7° */
.cq-stamp-img { width: 100%; height: auto; display: block; }
.cq-stamp-fb { display: inline-block; padding: .25em .45em; border: 4px solid var(--cq-red); border-radius: 10px; color: var(--cq-red); background: rgba(251, 245, 230, .86);
  font: 900 clamp(13px, calc(var(--w, 80px) * .17), 30px)/1 var(--eai-font-display); text-transform: uppercase; white-space: nowrap;
  box-shadow: inset 0 0 0 3px rgba(251, 245, 230, .86), inset 0 0 0 5px var(--cq-red); mix-blend-mode: normal; }
.cq-stamp.is-gone { opacity: 0; }

/* your melds */
.cq-mine { margin: 14px 0 0; padding: 10px 10px 12px; border-radius: 18px; background: var(--eai-color-surface); border: 1px solid color-mix(in oklab, var(--eai-color-ink) 10%, transparent); }
.cq-mine-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 8px; font: 800 var(--eai-step-1)/1.15 var(--eai-font-display); }
.cq-count { font: 700 var(--eai-step--1)/1.2 var(--eai-font-mono); color: var(--eai-color-ink-muted); }
.cq-mine-melds { display: flex; flex-wrap: wrap; gap: 8px; }
.cq-mine-melds .cq-meld { background: color-mix(in oklab, var(--eai-color-ink) 7%, transparent); }
.cq-empty-note { margin: 0; color: var(--eai-color-ink-muted); font-size: var(--eai-step--1); }
.cq-groups { display: flex; flex-direction: column; gap: 8px; }
.cq-group { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; border: 2px dashed color-mix(in oklab, var(--eai-color-ink) 30%, transparent); background: rgba(0, 0, 0, .12); }
.cq-group.is-orig { border-style: solid; border-color: color-mix(in oklab, var(--eai-color-ink) 14%, transparent); }
.cq-group.is-ok { border-style: solid; border-color: var(--eai-color-hit); box-shadow: 0 0 16px -6px var(--eai-color-hit); }
.cq-group.is-bad { border-color: var(--eai-color-danger); }
.cq-group.is-active { outline: 3px solid var(--cq-gold); outline-offset: 2px; }
.cq-group-cards { display: flex; flex-wrap: wrap; gap: 5px; min-height: calc(var(--cq-m) * 1.4); align-items: center; }
.cq-group-empty { color: var(--eai-color-ink-muted); font-size: var(--eai-step--1); }
.cq-group-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cq-group-why { flex: 1 1 10em; font-weight: 700; font-size: var(--eai-step--1); line-height: 1.3; color: var(--eai-color-danger); min-width: 0; }
.cq-group-why.is-ok { color: var(--eai-color-hit); }
.cq-group .cq-card.is-center { box-shadow: 0 0 0 3px var(--cq-gold), 0 4px 12px -4px rgba(0, 0, 0, .6); }
.cq-group .cq-card.is-from-hand::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 3px; height: 4px; border-radius: 2px; background: var(--eai-color-accent); z-index: 2; }
.cq-card.is-held { transform: translateY(-10px); box-shadow: 0 0 0 3px var(--eai-color-ink), 0 14px 18px -6px rgba(0, 0, 0, .7); z-index: 2; }
.cq-put, .cq-use { min-height: 48px; padding: 6px 14px; border-radius: 999px; cursor: pointer; font: 700 var(--eai-step--1)/1.1 var(--eai-font-body); }
.cq-use { border: 2px solid color-mix(in oklab, var(--eai-color-ink) 30%, transparent); background: transparent; color: var(--eai-color-ink); }
.cq-put { border: 2px dashed var(--cq-gold); background: color-mix(in srgb, var(--cq-gold) 14%, transparent); color: var(--eai-color-ink); }
.cq-newmeld { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; cursor: pointer; }
/* plain words for the drop targets (the Dots chalk style is mono capitals; too hard to read on a card table) */
.cq .cq-put, .cq .cq-newmeld { text-transform: none; letter-spacing: normal; font: 700 var(--eai-step-0)/1.2 var(--eai-font-body); }
.cq .cq-put { border: 2px solid var(--cq-gold); background: color-mix(in srgb, var(--cq-gold) 22%, transparent); color: var(--eai-color-ink); }
.cq .cq-newmeld { color: var(--eai-color-ink); }

/* the tray: the one voice, your hand (one row), two buttons at most, small links */
.cq-tray { overflow-x: clip; }
.cq-tray .gp-tray-in { gap: 8px; }
.cq-voice { margin: 0; padding: 2px 4px 0; min-height: 2.6em; }
.cq-say { margin: 0; font: 700 clamp(19px, var(--eai-step-1), 32px)/1.25 var(--eai-font-body); color: var(--cq-ivory); text-wrap: pretty; overflow-wrap: break-word; }
.cq-voice-kicker { margin: 0 0 2px; font: 700 var(--eai-step--1)/1.2 var(--eai-font-body); color: var(--cq-gold); }
.cq-voice-warn .cq-say { color: #ffb3a8; }
.cq-voice-wait .cq-say { color: color-mix(in srgb, var(--cq-ivory) 82%, transparent); font-weight: 600; }
.cq-voice .gp-clock { margin: 2px 0 0; font: 700 var(--eai-step--1)/1.2 var(--eai-font-body); color: var(--cq-gold); }
.cq-voice .gp-clock:empty { display: none; }

/* the hand: one row of big cards, overlapping only as much as they must; the row scrolls if it still won't fit */
.cq-hand {
  --gap: max(calc(var(--cq-h) * -.5), min(8px, calc((100% - var(--n) * var(--cq-h)) / max(1, var(--n) - 1))));
  display: flex; flex-wrap: nowrap; justify-content: safe center; align-items: flex-end; gap: 0;
  padding: 18px 8px 8px; margin: 0 -8px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: rgba(251, 245, 230, .35) transparent; -webkit-overflow-scrolling: touch;
}
.cq-hand > .cq-hcard + .cq-hcard { margin-left: var(--gap); }
.cq-hand .gp-hand-empty { flex: 1; text-align: center; padding: 20px 0; }
.cq-hcard { flex: none; position: relative; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.cq-card { -webkit-touch-callout: none; }
/* the cards that go with the middle card: lifted, with a gold ring */
.cq-hcard.is-goes { transform: translateY(-10px); box-shadow: 0 0 0 4px var(--cq-gold), 0 0 22px 2px rgba(242, 193, 78, .65), 0 10px 18px -8px rgba(0, 0, 0, .8); z-index: 2; }
/* a gentle suggestion: a soft halo, no lift */
.cq-hcard.is-suggest { box-shadow: 0 0 0 3px rgba(242, 193, 78, .7), 0 0 20px 2px rgba(242, 193, 78, .55); z-index: 1; }
.cq-hcard.is-picked { transform: translateY(-14px); box-shadow: 0 0 0 3px var(--eai-color-ink), 0 0 0 6px var(--cq-gold), 0 16px 22px -8px rgba(0, 0, 0, .8); z-index: 3; }
.cq-hcard.is-fits-next::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--cq-red); pointer-events: none; }
.cq-hcard.is-got { box-shadow: 0 0 0 3px var(--eai-color-hit), 0 6px 14px -6px rgba(0, 0, 0, .6); }
.cq-hcard .gm-new { font-size: 12px; top: -12px; z-index: 4; }
.cq-center-card.is-goes { box-shadow: 0 0 0 4px var(--cq-gold), 0 0 30px 4px rgba(242, 193, 78, .6); }
.cq-meld.is-goes { box-shadow: 0 0 0 4px var(--cq-gold), 0 0 22px 2px rgba(242, 193, 78, .55); }

/* the buttons: big, two at most */
.cq-actions { flex-wrap: nowrap; gap: 12px; }
.cq-actions .gp-btn { min-height: 64px; flex-direction: column; gap: 2px; font-size: clamp(20px, var(--eai-step-1), 30px); }
.cq-actions .gp-btn small { font: 700 var(--eai-step--1)/1.1 var(--eai-font-body); opacity: .85; }
.cq-take[aria-disabled=true], .cq-discard[aria-disabled=true], .cq-cambio-btn[aria-disabled=true] {
  background: var(--eai-color-surface-2); color: var(--eai-color-ink-muted); box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--eai-color-ink) 14%, transparent); }
.cq-take.ready { background: var(--eai-color-hit); }
.cq-take.is-out { background: var(--cq-gold); }
.cq-force { background: var(--cq-red); color: var(--cq-ivory); box-shadow: inset 0 0 0 3px var(--cq-red), inset 0 0 0 5px rgba(251, 245, 230, .8), 4px 4px 0 0 rgba(0, 0, 0, .55); }
.cq-force .cq-btn-l { font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
.cq-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; margin-top: -4px; }
.cq-link { min-height: 48px; min-width: 48px; padding: 6px 8px; border: 0; background: none; cursor: pointer; color: color-mix(in srgb, var(--cq-ivory) 85%, transparent);
  font: 600 var(--eai-step-0)/1.2 var(--eai-font-body); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cq-link:hover, .cq-link:focus-visible { color: var(--cq-ivory); }
.cq-hand.gp-coach-target, .cq-actions .gp-btn.gp-coach-target { border-radius: 18px; }
.cq-hand.gp-coach-target { outline-offset: -2px; }

/* "Your turn!" (never in the way of a tap) */
.cq-turnpop { position: fixed; left: 0; right: 0; top: 34%; z-index: 70; display: grid; place-items: center; pointer-events: none; }
.cq-turnpop-in { padding: 16px 34px; border-radius: 999px; background: var(--cq-gold); color: var(--cq-ink); box-shadow: 0 12px 40px -6px rgba(0, 0, 0, .7), 0 0 0 4px var(--cq-ivory);
  font: 900 clamp(32px, 10vw, 64px)/1 var(--eai-font-display); letter-spacing: -.01em; white-space: nowrap; }

/* hold a card: see it big */
.cq-zoom { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px;
  background: rgba(8, 18, 13, .88); cursor: pointer; }
.cq-z { --w: min(76vw, calc(66vh / 1.4), 440px); }
.cq-zoom-card { box-shadow: 0 0 0 2px var(--cq-edge), 0 24px 60px -10px rgba(0, 0, 0, .9); }
.cq-zoom-name { margin: 0; color: var(--cq-ivory); font: 800 clamp(22px, var(--eai-step-2), 40px)/1.15 var(--eai-font-display); text-align: center; }
.cq-zoom-x { flex: none; min-width: 160px; }
.cq-z .cq-fb-court { display: block; }

/* Simple / Full */
.cq-vs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; }
.cq-vs-l { font: 600 var(--eai-step--1)/1.2 var(--eai-font-body); color: var(--eai-color-ink-muted); }
.cq-vs-btns { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--eai-color-surface-2); }
.cq-vs-btn { min-height: 48px; min-width: 88px; padding: 6px 16px; border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: var(--eai-color-ink);
  font: 700 var(--eai-step-0)/1 var(--eai-font-body); }
.cq-vs-btn.on { background: var(--eai-color-ink); color: var(--eai-color-bg); }
.cq-vs-sheet { justify-content: flex-start; margin: 0 0 var(--eai-space-3); }

/* Simple: the other players are one line each; the piles are small pictures */
.cq-opp-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; width: 100%; min-height: 56px; padding: 4px 4px; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: default; }
button.cq-opp-line { cursor: pointer; }
.cq-simple .cq-opp { padding: 4px 10px; gap: 4px; }
.cq-simple .cq-opp-name { flex: 0 1 auto; overflow-wrap: break-word; }
.cq-opp-down { flex: 0 1 auto; font: 700 var(--eai-step-0)/1.2 var(--eai-font-body); color: color-mix(in srgb, var(--cq-ivory) 85%, transparent); }
.cq-opp-more { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(251, 245, 230, .14); font: 800 20px/1 var(--eai-font-body); }
.cq-fan { position: relative; display: inline-flex; align-items: flex-end; flex: none; height: calc(var(--cq-xs) * 1.4 + 6px); padding: 0 4px; }
.cq-fan > .cq-card { --w: 18px; transform: rotate(calc(var(--i) * 7deg)); transform-origin: 50% 120%; }
.cq-fan > .cq-card + .cq-card { margin-left: -12px; }
.cq-simple .cq-mid { grid-template-columns: 1fr auto 1fr; padding: 2px 0 4px; }
.cq-simple .cq-pilebox { opacity: .9; }
.cq-stock-s { display: inline-block; }
.cq-simple .cq-center { gap: 6px; }
.cq-simple .cq-center-from { font-size: var(--eai-step-0); }

/* the play screen's own bar: in Simple, just back, sound and "?" (the room code and TV live in Full) */
body.cq-simple-on .groomv.is-play .groomv-code, body.cq-simple-on .groomv.is-play .groomv-tv { display: none; }
body.cq-simple-on .groomv.is-play .groomv-bar .gback { margin-right: auto; }

/* between hands and the end */
.cq-win-sub { margin: 0; font-size: var(--eai-step-1); line-height: 1.3; max-width: 22em; }
.cq-win-title { font-size: clamp(2rem, 9vw, 3.6rem); overflow-wrap: anywhere; }
.cq-match-line { margin: 0; font: 800 var(--eai-step-1)/1.2 var(--eai-font-display); color: var(--cq-gold); }
.cq-wait-next { margin: 0; color: var(--eai-color-ink-muted); }
.cq-crown-slot { display: block; height: 70px; }
/* the Conquián win burst: little cards in the suit colours, fanned out behind the win card */
.cq-burst { position: absolute; left: 50%; top: 46%; z-index: -1; width: min(150%, 640px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.cq-bcard { position: absolute; left: 50%; top: 50%; width: 30px; height: 42px; margin: -21px 0 0 -15px; display: grid; place-items: center;
  border-radius: 5px; background: var(--cq-ivory); border: 2px solid var(--suit); box-shadow: 0 3px 8px -2px rgba(0, 0, 0, .55); opacity: .4;
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1 * min(140vw, 600px))) rotate(var(--t)); }
.cq-bcard .cq-bsuit { width: 70%; height: auto; }
.cq-bcard-o { --suit: var(--cq-o); } .cq-bcard-c { --suit: var(--cq-c); } .cq-bcard-e { --suit: var(--cq-e); } .cq-bcard-b { --suit: var(--cq-b); }
.cq-crown { display: inline-block; width: 92px; }
.cq-crown-img { width: 100%; height: auto; display: block; }
.cq-crown-fb { width: 100%; height: auto; fill: var(--cq-gold); stroke: #7a4b00; stroke-width: 1.5; }
.cq-crown-fb circle { fill: var(--cq-rose); }
.cq-petals { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.cq-petal { position: absolute; left: var(--x); top: -8vh; width: 20px; transform: scale(var(--s, 1)); }
.cq-petal-img { width: 100%; height: auto; display: block; }
.cq-petal-fb { display: block; width: 18px; height: 24px; border-radius: 80% 0 80% 0; background: radial-gradient(circle at 30% 30%, #ff9db3, var(--cq-rose) 45%, #a3214a); }
.cq-petals-still { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cq-petal.is-still { left: var(--y); top: auto; bottom: calc(var(--y) * .25); opacity: .55; transform: rotate(var(--spin)) scale(var(--s, 1)); }
.cq-petal.is-still:nth-child(odd) { top: calc(var(--y) * .2); bottom: auto; }
.cq-rules-goal { margin: 0; font-size: var(--eai-step-1); line-height: 1.35; font-weight: 700; }
.cq-rx-row { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.cq-rx { margin: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; background: var(--cq-felt); }
.cq-rx figcaption { color: var(--cq-ivory); font-size: var(--eai-step--1); line-height: 1.3; max-width: 16em; }
.cq-rx-cards { display: flex; gap: 6px; align-items: flex-start; }
.cq-egg-holder { display: inline-block; perspective: 600px; }
.cq-egg-note { padding: 14px 16px; border-radius: 16px; text-align: center; background: radial-gradient(120% 100% at 50% 0%, rgba(224, 88, 122, .3), transparent 70%), var(--eai-color-surface);
  border: 2px solid var(--cq-rose); }
.cq-egg-line { margin: 0; font: 800 var(--eai-step-2)/1.15 var(--eai-font-display); color: var(--cq-gold); text-wrap: balance; }
.cq-egg-small { margin: 6px 0 0; font-size: var(--eai-step--1); color: var(--eai-color-ink-muted); font-style: italic; }
.cq-rules-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cq-rules-steps li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.cq-rules-extra { margin: 0; line-height: 1.4; }
.cq-rules-extra b { color: var(--cq-red); font-family: var(--eai-font-display); }
.cq-rules-credit { margin: 0; font-size: var(--eai-step--1); color: var(--eai-color-ink-muted); }
.cq-rules-credit a { color: var(--eai-color-accent); display: inline-flex; align-items: center; min-height: 48px; padding: 4px 0; }

/* ---- the lobby: game picker, Conquián tags, practice ------------------------------------------------------------- */
.ggames { margin: 0 0 var(--eai-space-4); }
.ggames-k { display: block; margin-bottom: 6px; }
.ggames-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ggame { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 120px; padding: 12px; border-radius: var(--eai-radius-l); cursor: pointer; text-align: left;
  background: var(--eai-color-surface); color: var(--eai-color-ink); border: 2px solid color-mix(in oklab, var(--eai-color-ink) 14%, transparent); font: inherit; min-width: 0; }
.ggame.on { border-color: var(--eai-color-accent); box-shadow: 0 0 0 2px var(--eai-color-accent); background: color-mix(in oklab, var(--eai-color-accent) 12%, var(--eai-color-surface)); }
.ggame-art { display: flex; align-items: center; height: 44px; }
.ggame-art .gm-dot { --gm-dot: 34px; }
.ggame-art .gm-dot + .gm-dot { margin-left: -8px; }
.ggame-card { display: inline-block; width: 28px; height: 39px; border-radius: 4px; background: var(--cq-ivory); box-shadow: 0 0 0 1px var(--cq-edge), 0 3px 6px rgba(0, 0, 0, .4); }
.ggame-card-1 { transform: rotate(-10deg); background: linear-gradient(var(--cq-ivory), var(--cq-ivory)) padding-box, var(--cq-c); border: 3px solid var(--cq-c); }
.ggame-card-2 { margin-left: -10px; transform: rotate(8deg); border: 3px solid var(--cq-o); }
.ggame-title { font: 800 min(var(--eai-step-1), 25px)/1.1 var(--eai-font-display); overflow-wrap: break-word; }
.ggame-desc { color: var(--eai-color-ink-muted); font-size: var(--eai-step--1); line-height: 1.3; overflow-wrap: anywhere; }
.gtag-game { background: color-mix(in srgb, var(--cq-c) 26%, var(--eai-color-surface)); }
.gpractice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.gpractice-row .gpractice-cq { flex: 1 1 14em; }
.gpractice-rules { min-height: 56px; }
.gpractice-row .gpractice-rules { flex: 0 1 auto; }

/* ---- the TV --------------------------------------------------------------------------------------------------- */
.cq-tv { color: var(--cq-ivory); }
.cq-tv .cq-wordmark { font-size: 5vh; }
.cq-tv-logo { height: 8vh; width: auto; }
.cq-tv-body { display: grid; grid-template-columns: 1fr minmax(30vw, 40vw); gap: 2vw; padding: 1vh 2.4vw; min-height: 0; }
.cq-tv-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh; min-height: 0; }
.cq-tv-piles { display: flex; align-items: center; gap: 4vw; }
.cq-tv-piles .cq-l { --w: 12vh; }
.cq-tv-center { display: flex; flex-direction: column; align-items: center; gap: 1.6vh; }
.cq-tv-cap { display: flex; flex-direction: column; align-items: center; gap: .6vh; font-size: 2.6vh; text-align: center; }
.cq-tv-cap b { font: 800 3.6vh/1.1 var(--eai-font-display); color: var(--cq-gold); }
.cq-tv .cq-pile-l { font-size: 1.8vh; }
.cq-tv .cq-pile-n { font-size: 2.2vh; }
.cq-tv .cq-forced { font-size: 2.6vh; }
.cq-tv-seats { display: flex; flex-direction: column; gap: 1.4vh; min-height: 0; overflow: hidden; }
.cq-tv-seat { padding: 1.2vh 1.2vw; border-radius: 2vh; background: rgba(0, 0, 0, .25); border: 3px solid transparent; }
.cq-tv-seat.is-on { border-color: var(--cq-gold); box-shadow: 0 0 3vh -1vh var(--cq-gold); }
.cq-tv-seat.is-away { opacity: .65; }
.cq-tv-seat-head { display: flex; align-items: center; gap: 1vw; margin-bottom: 1vh; }
.cq-tv-name { font: 800 3.2vh/1.1 var(--eai-font-display); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-tv .cq-chip { font-size: 1.8vh; min-height: 3.2vh; }
.cq-tv .cq-s { --w: 3.4vh; }
.cq-tv-melds { display: flex; flex-wrap: wrap; gap: 1vh; }
.cq-tv .cq-empty-note { color: color-mix(in srgb, var(--cq-ivory) 60%, transparent); font-size: 2vh; }

/* our own wordmark (W2's logo.svg replaces it when it's there) */
.cq-wordmark { display: inline-flex; flex-direction: column; line-height: .9; font: 800 2.2rem/.9 var(--eai-font-display); font-stretch: 80%; color: var(--cq-gold); }
.cq-wm-sub { font: 700 .34em/1.2 var(--eai-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cq-ivory); }
.cq-logo { max-width: 100%; height: auto; }

/* ---- motion ------------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .cq-hcard, .cq-group .cq-card { transition: transform 160ms var(--eai-ease), box-shadow 160ms; }
  .cq-hand.is-dealing .cq-hcard { animation: cq-deal 520ms cubic-bezier(.2, .9, .3, 1.1) backwards; animation-delay: calc(var(--i, 0) * 55ms); }
  @keyframes cq-deal { from { opacity: 0; transform: translate(0, -55vh) rotate(-30deg) scale(.6); } }
  .cq-voice.is-nudge .cq-say { animation: cq-nudge-say 520ms ease both; }
  @keyframes cq-nudge-say { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 55% { transform: translateX(5px); } 80% { transform: translateX(-2px); } }
  .cq-turnpop-in { animation: cq-turnpop 1600ms cubic-bezier(.3, 1.4, .5, 1) both; }
  @keyframes cq-turnpop { 0% { opacity: 0; transform: scale(.6); } 14% { opacity: 1; transform: scale(1.06); } 22% { transform: scale(1); } 78% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.96); } }
  .cq-zoom-card { animation: cq-zoom-in 220ms cubic-bezier(.3, 1.3, .5, 1) both; }
  @keyframes cq-zoom-in { from { transform: scale(.6); opacity: 0; } }
  .cq-hcard.is-goes { animation: cq-goes 1.6s ease-in-out infinite alternate; }
  @keyframes cq-goes { from { box-shadow: 0 0 0 4px var(--cq-gold), 0 0 10px 0 rgba(242, 193, 78, .4), 0 10px 18px -8px rgba(0, 0, 0, .8); } to { box-shadow: 0 0 0 4px var(--cq-gold), 0 0 26px 4px rgba(242, 193, 78, .75), 0 10px 18px -8px rgba(0, 0, 0, .8); } }
  .cq-card.is-flip { animation: cq-flip 460ms var(--eai-ease) both; }
  @keyframes cq-flip { 0% { transform: perspective(600px) rotateY(90deg) translateY(-12px); filter: brightness(.6); } 60% { transform: perspective(600px) rotateY(-8deg); } 100% { transform: none; } }
  .cq-card.is-enter { animation: cq-enter 420ms cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
  @keyframes cq-enter { from { opacity: 0; transform: translateY(-26px) scale(.8); } to { opacity: 1; transform: none; } }
  .cq-card.is-snap { animation: cq-snap 240ms cubic-bezier(.3, 1.6, .5, 1) both; }
  @keyframes cq-snap { from { transform: translateY(40px) scale(.85); } to { transform: none; } }
  .cq-hcard.is-lift { transition: transform 140ms var(--eai-ease); }
  .cq-stamp { animation: cq-stamp 520ms cubic-bezier(.2, 1.5, .4, 1) both; }
  @keyframes cq-stamp { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--rot) - 16deg)) scale(1.9); } 45% { opacity: 1; transform: translate(-50%, -50%) rotate(calc(var(--rot) + 2deg)) scale(.92); } 70% { transform: translate(-50%, -50%) rotate(calc(var(--rot) - 1deg)) scale(1.05); } 100% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(1); } }
  .cq-stamped { animation: cq-thump 260ms 160ms ease-out both; }
  @keyframes cq-thump { 0%, 100% { translate: 0 0; } 40% { translate: 0 4px; } }
  .cq-stamp.is-gone { transition: opacity 240ms; }
  .cq-win.is-pop { animation: cq-pop 620ms cubic-bezier(.3, 1.6, .5, 1) both; }
  .cq-win.is-pop .cq-bcard { animation: cq-burst-out 900ms cubic-bezier(.2, 1.2, .4, 1) calc(120ms + var(--i, 0) * 28ms) both; }
  @keyframes cq-burst-out { from { opacity: 0; transform: rotate(var(--a)) translateY(0) rotate(0deg) scale(.3); } 35% { opacity: .95; }
    to { opacity: .4; transform: rotate(var(--a)) translateY(calc(var(--r) * -1 * min(140vw, 600px))) rotate(var(--t)); } }
  @keyframes cq-pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
  .cq-crown.is-drop { animation: cq-crown 1100ms cubic-bezier(.3, 1.3, .5, 1) 250ms both; }
  @keyframes cq-crown { 0% { transform: translateY(-70vh) rotate(-25deg); } 70% { transform: translateY(6px) rotate(4deg); } 85% { transform: translateY(-4px) rotate(-2deg); } 100% { transform: none; } }
  .cq-petals .cq-petal { animation: cq-fall var(--d, 4s) linear var(--delay, 0s) both; }
  @keyframes cq-fall { 0% { transform: translate(0, 0) rotate(0deg) scale(var(--s, 1)); opacity: 0; } 8% { opacity: 1; } 50% { transform: translate(var(--sway), 55vh) rotate(calc(var(--spin) / 2)) scale(var(--s, 1)); } 100% { transform: translate(calc(var(--sway) * -.4), 118vh) rotate(var(--spin)) scale(var(--s, 1)); opacity: .9; } }
  .cq-egg-king.is-nudge { animation: cq-nudge 300ms ease both; }
  @keyframes cq-nudge { 0%, 100% { transform: none; } 30% { transform: rotate(-6deg) translateY(-4px); } 60% { transform: rotate(4deg); } }
  .cq-egg-note.is-in { animation: cq-enter 600ms 300ms cubic-bezier(.3, 1.4, .5, 1) both; }
  .cq-opp.is-on, .cq-tv-seat.is-on { animation: cq-glow 1.6s ease-in-out infinite alternate; }
  @keyframes cq-glow { from { box-shadow: 0 0 6px -4px var(--cq-gold); } to { box-shadow: 0 0 22px -4px var(--cq-gold); } }
  .ggame { transition: border-color 140ms, background 140ms, transform 140ms; }
  .ggame:active { transform: scale(.98); }
}
.cq-hcard, .cq-center-card { overflow: visible; }
.cq-actions .cq-force { flex: 1.25 1 0; }
img.cq-tv-logo { height: 9vh; width: auto; max-width: 28vw; }
.cq-result { overflow-x: hidden; }   /* the card burst may reach past the screen edge; never a sideways scroll */

/* ---- tablet / TV-sized screen (768 px+): a big table on the kitchen table. Still one voice and two buttons. ---- */
@media (min-width: 768px) {
  body.games-cq .view, body.games-cq[data-authed] .view { max-width: 1180px; padding-left: var(--eai-space-4); padding-right: var(--eai-space-4); }
  .cq {
    --cq-h: max(84px, min(calc((100vw - 60px) / 5.8), 150px));
    --cq-m: min(calc(64px * var(--eai-text-scale, 1)), 92px);
    --cq-s: min(calc(46px * var(--eai-text-scale, 1)), 60px);
    --cq-l: min(calc(150px * var(--eai-text-scale, 1)), 24vh, 210px);
  }
  .cq .cq-table { padding: 16px 22px 18px; gap: 14px; }
  .cq-opp-name, .cq-opp-down { font-size: var(--eai-step-1); }
  .cq-fan > .cq-card { --w: 24px; }
  .cq-fan > .cq-card + .cq-card { margin-left: -16px; }
  .cq-mid { gap: 32px; }
  .cq-tray .gp-tray-in { max-width: 1100px; gap: 10px; }
  .cq-say { font-size: clamp(26px, var(--eai-step-2), 40px); }
  .cq-actions { max-width: 760px; width: 100%; margin: 0 auto; }
  .cq-actions .gp-btn { min-height: 76px; font-size: clamp(24px, var(--eai-step-2), 36px); }
  .cq-hand { padding-top: 24px; }
}
/* Landscape tablet: the table and what you laid down side by side, the other players beside the middle card, and
   the voice next to the two buttons, so it all fits on one screen without scrolling. */
@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
  .cq { --cq-h: max(84px, min(calc((100vw - 60px) / 5.8), 15vh, 150px)); --cq-l: min(150px, 22vh); --cq-m: min(calc(56px * var(--eai-text-scale, 1)), 9vh, 84px);
    display: grid; grid-template-columns: 3fr 2fr; gap: 0 16px; align-items: start; }
  .cq:not(:has(> .cq-mine)) { grid-template-columns: 1fr; }
  .cq > :not(.cq-table):not(.cq-mine) { grid-column: 1 / -1; }
  .cq > .cq-mine { margin-top: 0; max-height: calc(var(--cq-l) * 1.4 + 60px); overflow: auto; }
  .cq .cq-table { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; align-items: center; gap: 12px 18px; }
  .cq-full .cq-table { grid-template-columns: minmax(240px, 1fr) 2fr; }
  .cq .cq-opps { flex-direction: column; flex-wrap: nowrap; }
  .cq-tray .gp-tray-in { display: grid; grid-template-columns: 1fr minmax(320px, 46%); grid-template-areas: "voice acts" "links acts" "hand hand"; gap: 4px 20px; align-items: center; }
  .cq-tray .cq-voice { grid-area: voice; }
  .cq-tray .cq-hand { grid-area: hand; }
  .cq-tray .cq-actions { grid-area: acts; max-width: none; margin: 0; }
  .cq-tray .cq-links { grid-area: links; justify-content: flex-start; margin: 0; }
  .cq-say { font-size: clamp(24px, var(--eai-step-1), 34px); }
  .cq-actions .gp-btn { min-height: 72px; }
}