/* ============================================================
   WC26 Hub · quiz game pack styles · PAGE 302 teletext
   (Flag Quiz · Higher or Lower · Total Recall: 48)
   Every rule scoped under .page-games. The hub's games.css owns
   .game-stage / .game-option / .game-bigflag / .correct / .wrong;
   this file only adds pack-specific structure and motion.
   Accents: cyan for focus/markers, green for success, red for
   misses · gold appears on highlights and the perfect-board
   trophy moment. Motion runs on steps(), CRT-style.
   ============================================================ */

/* (game roots render at page load inside the host shell; the global
   tune-in stagger already animates the section, so no extra entrance
   animation here · qpFadeIn survives for state changes like .tr-result) */

@keyframes qpFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes qpShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

@keyframes qpPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* ============================================================
   1) Flag Quiz
   ============================================================ */

.page-games .qz-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.page-games .qz-dots { display: flex; gap: 5px; }
.page-games .qz-dot {
  width: 9px;
  height: 9px;
  border-radius: 0;
  background: var(--surface-3);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.page-games .qz-dot.on {
  background: var(--ink);
  transform: scale(1.3);
  box-shadow: 2px 2px 0 #000;
}
.page-games .qz-dot.hit  { background: var(--green); }
.page-games .qz-dot.miss { background: var(--red); }

.page-games .qz-timer { height: 10px; margin-bottom: 16px; }
.page-games .qz-timer > span { transition: width .12s linear; }
.page-games .qz-timer.low > span {
  background: var(--red);
  box-shadow: 0 0 0 2px rgba(255, 64, 64, .35);
}

.page-games .qz-flag {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 4px 0 16px;
}
.page-games .qz-flag .flag-img {
  height: clamp(96px, 24vw, 150px);
  width: auto;
  border-radius: 0;
  box-shadow: 0 0 0 2px var(--line-2), 6px 6px 0 #000;
}
.page-games .qz-flag .flag {
  font-size: clamp(80px, 20vw, 120px);
  line-height: 1.2;
}

.page-games .qz-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 560px;
  margin: 0 auto;
}
.page-games .qz-options .game-option { width: 100%; }
.page-games .qz-options.answered { pointer-events: none; }

.page-games .qz-feedback {
  min-height: 30px;
  text-align: center;
  margin-top: 16px;
  font-size: 1.1rem;
}

.page-games .qz-float {
  position: absolute;
  top: 6px;
  right: 50%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--green);
  text-shadow: 2px 2px 0 #000;
  pointer-events: none;
  animation: qpFloatUp .9s steps(7) forwards;
}
@keyframes qpFloatUp {
  from { opacity: 0; transform: translate(50%, 14px) scale(.7); }
  25%  { opacity: 1; }
  to   { opacity: 0; transform: translate(50%, -46px) scale(1.1); }
}

@media (max-width: 480px) {
  .page-games .qz-options { grid-template-columns: 1fr; }
}

/* ============================================================
   2) Higher or Lower
   ============================================================ */

.page-games .hl-q { text-align: center; margin-bottom: 16px; }
.page-games .hl-q h3 {
  margin: 8px 0 0;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.page-games .hl-q em {
  color: var(--ink);
  font-style: normal;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--cyan);
  text-underline-offset: 4px;
}

.page-games .hl-duel {
  --hl-skip: 76px; /* vs block + gaps: how far the challenger slides left */
  display: grid;
  grid-template-columns: 1fr 52px 1fr;
  align-items: stretch;
  gap: 12px;
  max-width: 660px;
  margin: 0 auto;
}

.page-games .hl-card {
  font-family: var(--font);
  color: var(--text);
  background: var(--surface-2);
  border: 2px solid var(--line-2);
  border-radius: 0;
  padding: 22px 14px 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  transition: transform .35s steps(5), opacity .35s steps(5),
              border-color .2s, box-shadow .2s, background .2s;
}
.page-games .hl-card:hover {
  border-color: var(--cyan);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 #000;
}
.page-games .hl-card .flag-img {
  height: 54px;
  width: auto;
  border-radius: 0;
  box-shadow: 0 0 0 2px #000, 3px 3px 0 rgba(0, 0, 0, .45);
}
.page-games .hl-card .flag { font-size: 46px; line-height: 1.2; }
.page-games .hl-name {
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.25;
  text-align: center;
}

.page-games .hl-stat {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 46px;
  justify-content: flex-end;
}
.page-games .hl-stat b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .95rem;
  letter-spacing: 0;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.page-games .hl-lab {
  font-family: var(--font-cond);
  font-size: .62rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-faint);
}
.page-games .hl-unknown b {
  color: var(--text-faint);
  animation: qpPulse 1.3s steps(2) infinite;
}
.page-games .hl-reveal b {
  display: inline-block;
  animation: qpFlipIn .4s steps(4);
}
@keyframes qpFlipIn {
  from { transform: rotateX(90deg) scale(.8); opacity: 0; }
  to   { transform: rotateX(0) scale(1); opacity: 1; }
}

.page-games .hl-vs {
  align-self: center;
  width: 44px;
  height: 44px;
  border-radius: 0;                /* square key: a yellow teletext cell */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .68rem;
  letter-spacing: 0;
  color: #000;
  background: var(--gold);
  box-shadow: 3px 3px 0 #000;
  transition: opacity .3s;
}

.page-games .hl-card.correct {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(24, 224, 107, .45);
}
.page-games .hl-card.wrong {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(255, 64, 64, .45);
  animation: qpShake .4s steps(2);
}

/* round transition: old reference exits left, challenger slides into its spot */
.page-games .hl-duel.hl-advance { pointer-events: none; }
.page-games .hl-duel.hl-advance > .hl-card[data-side="left"] {
  transform: translateX(-56px);
  opacity: 0;
}
.page-games .hl-duel.hl-advance > .hl-vs { opacity: 0; }
.page-games .hl-duel.hl-advance > .hl-card[data-side="right"] {
  transform: translateX(calc(-100% - var(--hl-skip)));
}

.page-games .hl-card.hl-enter { animation: qpEnterRight .4s steps(4); }
@keyframes qpEnterRight {
  from { transform: translateX(64px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.page-games .hl-hint { margin: 16px 0 0; }

@media (max-width: 520px) {
  .page-games .hl-duel {
    --hl-skip: 52px;
    grid-template-columns: 1fr 36px 1fr;
    gap: 8px;
  }
  .page-games .hl-vs { width: 36px; height: 36px; font-size: .56rem; }
  .page-games .hl-card { padding: 16px 8px 14px; }
  .page-games .hl-card .flag-img { height: 42px; }
  .page-games .hl-name { font-size: .95rem; }
  .page-games .hl-stat b { font-size: .8rem; }
}

/* ============================================================
   3) Total Recall: 48
   ============================================================ */

.page-games .tr-bar {
  position: sticky;
  top: 64px; /* clears the sticky .site-header at all widths */
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: rgba(0, 0, 0, .92);
  border: 2px solid var(--line-2);
  border-radius: 0;
  margin-bottom: 10px;
}
.page-games .tr-input { flex: 1; min-width: 0; font-size: 1.1rem; }
.page-games .tr-input.good {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(24, 224, 107, .3);
}
.page-games .tr-input.shake {
  animation: qpShake .35s steps(2);
  border-color: var(--red);
}
.page-games .tr-giveup { flex-shrink: 0; }

.page-games .tr-meter { height: 6px; margin-bottom: 16px; }
.page-games .tr-meter > span { background: var(--gradient-hosts); }

.page-games .tr-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 10px;
}

.page-games .tr-group {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 0;
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.page-games .tr-group.complete {                 /* complete set = pitch green */
  border-color: var(--green);
  box-shadow: 3px 3px 0 rgba(24, 224, 107, .25);
}
.page-games .tr-group h4 {
  margin: 0;
  padding: 7px 10px;
  font-family: var(--font-cond);
  font-size: .68rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  gap: 7px;
  transition: color .25s, background .25s;
}
.page-games .tr-group.complete h4 { background: var(--green); color: #002b12; }
.page-games .tr-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 0;
  background: var(--surface-3);
  color: var(--text);
  font-size: .68rem;
  flex-shrink: 0;
  transition: background .25s, color .25s;
}
.page-games .tr-group.complete .tr-letter {
  background: #000;
  color: var(--green);
}

.page-games .tr-slot {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 10px;
  border-top: 1px dashed var(--line);
  font-size: .92rem;
  color: var(--text-faint);
  overflow: hidden;
  transition: background .2s;
}
.page-games .tr-mark { opacity: .45; }

.page-games .tr-team {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  animation: qpPopIn .35s steps(4);
}
.page-games .tr-team > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes qpPopIn {
  from { transform: scale(.4); opacity: 0; }
  70%  { transform: scale(1.12); }
  to   { transform: scale(1); opacity: 1; }
}

.page-games .tr-slot.found {
  color: var(--text);
  font-weight: 400;
  background: rgba(24, 224, 107, .07);
}
.page-games .tr-slot.missed { color: var(--text-dim); opacity: .75; } /* revealed answers stay readable */
.page-games .tr-slot.missed .flag-img { filter: grayscale(.7); }
.page-games .tr-slot.again { animation: qpAlready .55s steps(3); }
@keyframes qpAlready {
  0%, 100% { background: rgba(24, 224, 107, .07); }
  40% { background: rgba(255, 212, 0, .28); }   /* gold flash: already named */
}

.page-games .tr-end:not(:empty) { margin-bottom: 16px; }
.page-games .tr-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  background: var(--surface-2);
  border: 2px solid var(--line-2);
  border-radius: 0;
  animation: qpFadeIn .3s steps(4);
}
.page-games .tr-result.full {                    /* perfect board · trophy moment */
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(255, 212, 0, .14), rgba(255, 212, 0, .04));
}
.page-games .tr-result h3 {
  margin: 0;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.page-games .tr-breakdown { margin: 3px 0 0; }
.page-games .tr-score {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--ink);
  white-space: nowrap;
}
.page-games .tr-result.full .tr-score { color: var(--gold); }

@media (max-width: 640px) {
  .page-games .tr-bar { padding: 8px; }
  .page-games .tr-groups { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .page-games .tr-slot { font-size: .88rem; padding: 0 8px; }
  .page-games .tr-result { padding: 14px; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .page-games .qz-float,
  .page-games .hl-card.wrong,
  .page-games .hl-card.hl-enter,
  .page-games .hl-reveal b,
  .page-games .hl-unknown b,
  .page-games .tr-input.shake,
  .page-games .tr-team,
  .page-games .tr-slot.again,
  .page-games .tr-result { animation: none !important; }
  .page-games .hl-card,
  .page-games .hl-duel.hl-advance > .hl-card[data-side="left"],
  .page-games .hl-duel.hl-advance > .hl-card[data-side="right"] { transition: none !important; }
}