/* QuizTheme /games — hub + Zip (game_zip.html, js/zip-game.js) + Queens / Tango / Mini Sudoku
   (game_daily.html, js/daily-games.js — reuses the .zip-* page shell below) */

:root {
  --zip-accent: #fe3d7f;
  --zip-accent-soft: #ffd3e3;
  --zip-ink: #1d1d1f;
  --zip-line: #e4e4ea;
  --zip-wall: #1d1d1f;
}

/* ── Hub ─────────────────────────────────────────────────────────────── */
.games-hub { padding: 40px 16px 60px; }
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-top: 24px; }
.game-card {
  display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.08); text-decoration: none; color: var(--zip-ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.game-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.game-card__art { display: flex; align-items: center; justify-content: center; padding: 28px; background: linear-gradient(135deg, #ff72a4, #fe3d7f); }
.game-card__body { padding: 18px 20px 22px; }
.game-card__badge { display: inline-block; font-size: 12px; font-weight: 700; color: var(--zip-accent); background: var(--zip-accent-soft); padding: 2px 10px; border-radius: 99px; }
.game-card__body h3 { font-size: 26px; margin: 6px 0 4px; }
.game-card__body p { color: #555; font-size: 15px; line-height: 1.4; }
.game-card__cta { display: inline-block; margin-top: 14px; font-weight: 700; color: var(--zip-accent); }
.game-card--queens .game-card__art { background: linear-gradient(135deg, #a98bff, #6c4ce0); }
.game-card--tango .game-card__art { background: linear-gradient(135deg, #ffc35c, #ff8a1f); }
.game-card--sudoku .game-card__art { background: linear-gradient(135deg, #4fd1b5, #1e9e86); }
.game-card--nonogram .game-card__art { background: linear-gradient(135deg, #6ec3ff, #2f7fe0); }
.game-card--lights .game-card__art { background: linear-gradient(135deg, #3b3f58, #1d1f2e); }
.game-card--word .game-card__art { background: linear-gradient(135deg, #7bd88f, #2fa257); }

/* ── Zip page ────────────────────────────────────────────────────────── */
.zip-page { padding: 24px 16px 60px; }
.zip-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; margin-top: 16px; }
.zip-main { max-width: 560px; width: 100%; margin: 0 auto; }
.zip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.zip-head h1 { font-size: 34px; font-weight: 800; color: var(--zip-ink); line-height: 1; }
.zip-head h1 span { color: var(--zip-accent); }
.zip-head__note { font-size: 13px; color: #777; }
.zip-timer {
  font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--zip-ink);
  background: #f4f4f7; padding: 4px 14px; border-radius: 10px; min-width: 84px; text-align: center;
}

.zip-panel { background: #fff; border: 1px solid var(--zip-line); border-radius: 18px; padding: 24px; text-align: center; }
.zip-panel h2 { font-size: 24px; margin-bottom: 10px; }
.zip-rules { list-style: none; text-align: left; max-width: 360px; margin: 0 auto 14px; }
.zip-rules li { padding: 5px 0 5px 22px; position: relative; font-size: 16px; color: #333; }
.zip-rules li::before { content: ''; position: absolute; left: 4px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--zip-accent); }
.zip-once { font-size: 14px; color: #666; margin-bottom: 18px; }

.zip-btn {
  appearance: none; border: 2px solid var(--zip-line); background: #fff; color: var(--zip-ink);
  font: 700 16px/1 "Baloo 2", sans-serif; padding: 12px 22px; border-radius: 99px; cursor: pointer;
}
.zip-btn:hover { border-color: var(--zip-accent); }
.zip-btn--primary { background: var(--zip-accent); border-color: var(--zip-accent); color: #fff; min-width: 160px; }
.zip-btn--primary:hover { filter: brightness(1.05); }
.zip-btn:disabled { opacity: .6; cursor: default; }
.zip-controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }

/* Board */
.zip-panel--board { padding: 16px; }
.zip-board-wrap { width: 100%; max-width: 480px; margin: 0 auto; }
.zip-board {
  position: relative; display: grid; aspect-ratio: 1 / 1; width: 100%;
  border: 3px solid var(--zip-wall); border-radius: 12px; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer;
}
.zip-cell {
  position: relative; display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--zip-line); border-bottom: 1px solid var(--zip-line);
  background: #fff; transition: background .08s;
}
.zip-cell.in-path { background: var(--zip-accent-soft); }
.zip-cell.wall-r { border-right: 4px solid var(--zip-wall); }
.zip-cell.wall-b { border-bottom: 4px solid var(--zip-wall); }
.zip-num {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: center;
  width: 62%; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--zip-ink); color: #fff;
  font-weight: 800; font-size: clamp(14px, 4.2vw, 24px); line-height: 1; pointer-events: none;
}
.zip-path { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.zip-path polyline { fill: none; stroke: var(--zip-accent); stroke-width: .34; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.zip-board.is-solved .zip-path polyline { stroke: #20b26b; }
.zip-board.is-solved .zip-cell.in-path { background: #d4f5e4; }

/* Loading */
.zip-panel--loading { padding: 16px; }
.zip-skeleton {
  display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px;
  width: 100%; max-width: 480px; aspect-ratio: 1 / 1; margin: 0 auto;
}
.zip-skeleton i {
  border-radius: 6px;
  background: linear-gradient(90deg, #f1f1f5 0%, #e4e4ea 50%, #f1f1f5 100%);
  background-size: 200% 100%; animation: zip-shimmer 1.2s linear infinite;
}
.zip-loading-text { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; color: #555; font-weight: 600; }
.zip-spinner {
  display: inline-block; width: 18px; height: 18px; flex: 0 0 auto;
  border: 3px solid var(--zip-accent-soft); border-top-color: var(--zip-accent); border-radius: 50%;
  animation: zip-spin .7s linear infinite;
}
@keyframes zip-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes zip-spin { to { transform: rotate(360deg); } }

.zip-board-wrap { position: relative; }
.zip-board-busy {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(255,255,255,.72); border-radius: 12px; font-weight: 700; color: var(--zip-ink);
}
.zip-board-busy[hidden] { display: none; }

/* Hints */
.zip-btn--hint { border-color: var(--zip-accent-soft); color: var(--zip-accent); }
.zip-btn--hint .zip-hint-left { font-weight: 600; opacity: .75; }
.zip-btn.is-loading .zip-btn__label::before {
  content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px;
  border: 2px solid var(--zip-accent-soft); border-top-color: var(--zip-accent); border-radius: 50%;
  animation: zip-spin .7s linear infinite;
}
.zip-hint-note { margin-top: 10px; font-size: 13px; color: #b3261e; font-weight: 600; }
.zip-cell.is-hint { animation: zip-hint 1.1s ease-out 1; }
@keyframes zip-hint { 0%, 40% { background: #ffe58a; } 100% { background: var(--zip-accent-soft); } }
.zip-result__hints { margin-top: 2px; font-size: 13px; color: #777; }

@media (prefers-reduced-motion: reduce) {
  .zip-skeleton i, .zip-spinner, .zip-btn.is-loading .zip-btn__label::before, .zip-cell.is-hint { animation: none; }
}

/* Result */
.zip-result__kicker { font-size: 18px; font-weight: 700; color: #20b26b; text-transform: uppercase; letter-spacing: .06em; }
.zip-result__time { font-size: 56px; font-weight: 800; line-height: 1.1; color: var(--zip-ink); font-variant-numeric: tabular-nums; }
.zip-result-ad { display: flex; justify-content: center; margin: 16px 0; }
.zip-result-ad:empty { margin: 8px 0; }
.zip-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.zip-stat { background: #f7f7fa; border-radius: 14px; padding: 14px 8px; }
.zip-stat__v { display: block; font-size: 26px; font-weight: 800; color: var(--zip-accent); font-variant-numeric: tabular-nums; }
.zip-stat__l { font-size: 13px; color: #666; }
.zip-result__beat { margin-top: 14px; font-size: 16px; color: #333; }
.zip-result__next { margin-top: 4px; font-size: 14px; color: #777; font-variant-numeric: tabular-nums; }
.zip-result__next a { color: var(--zip-accent); font-weight: 700; }

/* Help button + "How to play" dialog (_macros.html game_help_dialog) */
.zip-head__tools { display: flex; align-items: center; gap: 10px; }
.zip-help-btn {
  appearance: none; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--zip-line);
  background: #fff; color: var(--zip-ink); font: 800 19px/1 "Baloo 2", sans-serif; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.zip-help-btn:hover { border-color: var(--zip-accent); color: var(--zip-accent); }
.zip-help {
  width: min(440px, calc(100vw - 32px)); margin: auto; padding: 28px 24px 24px; border: 0; border-radius: 20px;
  text-align: center; color: var(--zip-ink); box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
.zip-help::backdrop { background: rgba(20,20,30,.55); backdrop-filter: blur(2px); }
.zip-help[open] { animation: zip-pop .2s ease-out; }
.zip-help h2 { font-size: 24px; margin-bottom: 12px; }
.zip-help__x {
  position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: #f4f4f7; font-size: 22px; line-height: 1; cursor: pointer; color: #555;
}

/* Not started: real board blurred under a Start overlay (.zip-app.is-preview) */
.zip-ready { display: none; }
.zip-app.is-preview .zip-ready {
  position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 16px;
}
.zip-app.is-preview .zip-board,
.zip-app.is-preview .dg-board,
.zip-app.is-preview .wd-board { filter: blur(6px) saturate(1.2); transform: scale(.98); }
.zip-app.is-preview .zip-board-wrap ~ * { filter: blur(3px); opacity: .55; pointer-events: none; }
.zip-board, .dg-board { transition: filter .35s ease, transform .35s ease; }
.zip-ready__card {
  width: 100%; max-width: 330px; padding: 22px 20px 18px; border-radius: 20px; text-align: center;
  background: rgba(255,255,255,.9); box-shadow: 0 18px 45px rgba(0,0,0,.18); backdrop-filter: blur(4px);
  animation: zip-pop .3s ease-out;
}
.zip-ready__kicker {
  display: inline-block; padding: 2px 12px; border-radius: 99px; font-size: 13px; font-weight: 700;
  color: var(--zip-accent); background: var(--zip-accent-soft);
}
.zip-ready__card h2 { font-size: 28px; font-weight: 800; line-height: 1.15; margin: 8px 0 4px; color: var(--zip-ink); }
.zip-ready__tag { font-size: 15px; color: #555; line-height: 1.35; margin-bottom: 16px; }
.zip-btn--go { width: 100%; font-size: 20px; padding: 15px 22px; animation: zip-go 1.8s ease-out infinite; }
.zip-ready__help {
  appearance: none; border: 0; background: none; margin-top: 10px; cursor: pointer;
  font: 700 15px/1.2 "Baloo 2", sans-serif; color: var(--zip-accent); text-decoration: underline; text-underline-offset: 3px;
}
.zip-ready__note { margin-top: 6px; font-size: 12px; color: #888; }
@keyframes zip-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes zip-go {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--zip-accent) 50%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .zip-btn--go, .zip-ready__card, .zip-help[open] { animation: none; }
  .zip-board, .dg-board { transition: none; }
}

/* Past puzzles sidebar (_macros.html past_puzzles) */
.zip-arch {
  --arch-a: #ff72a4; --arch-b: #fe3d7f; --arch-soft: #ffe3ed;
  padding: 0; overflow: hidden; text-align: left;
}
.dg-page--queens .zip-arch { --arch-a: #a98bff; --arch-b: #6c4ce0; --arch-soft: #ece6ff; }
.dg-page--tango .zip-arch  { --arch-a: #ffc35c; --arch-b: #ff8a1f; --arch-soft: #fff0dc; }
.dg-page--sudoku .zip-arch { --arch-a: #4fd1b5; --arch-b: #1e9e86; --arch-soft: #dcf6ef; }

.zip-arch__head { padding: 18px 18px 16px; color: #fff; background: linear-gradient(135deg, var(--arch-a), var(--arch-b)); }
.zip-arch__head h3 { font-size: 22px; font-weight: 800; line-height: 1.1; color: #fff; }
.zip-arch__head p { margin-top: 2px; font-size: 14px; opacity: .9; }
.zip-arch__progress { height: 8px; margin-top: 12px; border-radius: 99px; background: rgba(255,255,255,.3); overflow: hidden; }
.zip-arch__progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: #fff; transition: width .5s ease; }
.zip-arch__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 13px; font-weight: 700; }
.zip-arch__streak { padding: 1px 9px; border-radius: 99px; background: rgba(0,0,0,.18); }
.zip-arch__streak::before { content: '\2605'; margin-right: 4px; }

.zip-arch__list { list-style: none; padding: 10px; display: grid; gap: 6px; }
.zip-arch__item a {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px;
  border: 2px solid transparent; text-decoration: none; color: var(--zip-ink);
  transition: background .15s, border-color .15s, transform .15s;
}
.zip-arch__item a:hover { background: #f7f7fa; transform: translateX(3px); }
.zip-arch__date {
  flex: 0 0 46px; height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 12px; background: #f1f1f5; line-height: 1;
}
.zip-arch__date b { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #888; }
.zip-arch__date i { font-style: normal; font-size: 20px; font-weight: 800; margin-top: 3px; }
.zip-arch__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.zip-arch__body strong { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zip-arch__body small { font-size: 13px; color: #888; }
.zip-arch__status {
  flex: 0 0 auto; padding: 4px 11px; border-radius: 99px; font-size: 13px; font-weight: 700;
  color: var(--arch-b); background: var(--arch-soft); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Today: gradient date tile + pulsing badge until solved */
.zip-arch__item.is-today .zip-arch__date { background: linear-gradient(135deg, var(--arch-a), var(--arch-b)); }
.zip-arch__item.is-today .zip-arch__date b,
.zip-arch__item.is-today .zip-arch__date i { color: #fff; }
.zip-arch__item.is-today:not(.is-solved):not(.is-current) .zip-arch__status {
  color: #fff; background: var(--arch-b); animation: zip-arch-pulse 1.8s ease-out infinite;
}
@keyframes zip-arch-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--arch-b) 55%, transparent); }
  100% { box-shadow: 0 0 0 9px transparent; }
}

/* Solved: green tick + time */
.zip-arch__item.is-solved .zip-arch__status { color: #157a49; background: #d4f5e4; }
.zip-arch__item.is-solved:not(.is-today) .zip-arch__date { background: #e6f8ee; }
.zip-arch__item.is-solved:not(.is-today) .zip-arch__date i { color: #157a49; }

/* The puzzle on this page */
.zip-arch__item.is-current a { border-color: var(--arch-b); background: var(--arch-soft); }
.zip-arch__item.is-current a:hover { transform: none; }
.zip-arch__item.is-current:not(.is-solved) .zip-arch__status { color: #fff; background: var(--zip-ink); }

@media (prefers-reduced-motion: reduce) {
  .zip-arch__item a, .zip-arch__progress i { transition: none; }
  .zip-arch__item.is-today .zip-arch__status { animation: none !important; }
}

/* ── Queens / Tango / Mini Sudoku boards ─────────────────────────────── */
.dg-board {
  position: relative; display: grid; aspect-ratio: 1 / 1; width: 100%;
  border: 3px solid var(--zip-wall); border-radius: 12px; overflow: hidden; background: #fff;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer;
}
.dg-cell {
  position: relative; display: flex; align-items: center; justify-content: center;
  border-right: 1px solid rgba(0,0,0,.12); border-bottom: 1px solid rgba(0,0,0,.12);
  background: #fff; transition: background .08s;
}
.dg-cell svg { width: 62%; height: 62%; pointer-events: none; }
.dg-cell.b-r { border-right: 3px solid var(--zip-wall); }
.dg-cell.b-b { border-bottom: 3px solid var(--zip-wall); }
.dg-cell.is-bad { box-shadow: inset 0 0 0 3px #e5484d; }
.dg-cell.is-bad svg path, .dg-cell.is-bad svg rect { fill: #e5484d; }
.dg-cell.is-hint { animation: zip-hint 1.1s ease-out 1; }
.dg-x { font-size: clamp(16px, 4.6vw, 26px); color: rgba(0,0,0,.45); font-weight: 700; line-height: 1; pointer-events: none; }

.dg-board--tango .dg-cell.is-given, .dg-board--tango .dg-cell.is-fixed { background: #f1f1f5; cursor: default; }
.dg-sign {
  position: absolute; z-index: 2; transform: translate(-50%, -50%); pointer-events: none;
  display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 1px solid #c9c9d3; color: #555; font: 800 14px/1 sans-serif;
}
.dg-sign.is-bad { background: #e5484d; border-color: #e5484d; color: #fff; }

.dg-board--sudoku .dg-cell { font-weight: 700; font-size: clamp(20px, 6vw, 32px); color: var(--zip-accent); }
.dg-board--sudoku .dg-cell.is-fixed { color: var(--zip-ink); }
.dg-board--sudoku .dg-cell.is-peer { background: #f6f6fa; }
.dg-board--sudoku .dg-cell.is-same { background: var(--zip-accent-soft); }
.dg-board--sudoku .dg-cell.is-sel { background: #ffe58a; }
.dg-board--sudoku .dg-cell.is-bad { color: #e5484d; }

.dg-board.is-solved .dg-cell { box-shadow: none; }
.dg-board.is-solved { border-color: #20b26b; }

.dg-pad { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 480px; margin: 14px auto 0; }
.dg-pad__key {
  appearance: none; border: 2px solid var(--zip-line); background: #fff; color: var(--zip-ink);
  font: 800 20px/1 "Baloo 2", sans-serif; padding: 12px 0; border-radius: 12px; cursor: pointer;
}
.dg-pad__key:hover { border-color: var(--zip-accent); }
.dg-pad__key--erase { font-size: 13px; }

@media (prefers-reduced-motion: reduce) { .dg-cell.is-hint { animation: none; } }

/* ── Nonogram ───────────────────────────────────────────────────────── */
.dg-board--nonogram { background: #f7f7fa; }
.dg-board--nonogram .dg-cell.is-on { background: #1d1d1f; }
.dg-board--nonogram .dg-cell.is-fixed.is-on { background: #3a3a40; }
.dg-board--nonogram.is-solved .dg-cell.is-on { background: #2f7fe0; }
.dg-board--nonogram.is-solved .dg-x { visibility: hidden; }
.dg-clue {
  display: flex; gap: 3px; color: var(--zip-ink); font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: clamp(10px, 2.6vw, 14px); line-height: 1; background: #f7f7fa; transition: color .15s;
}
.dg-clue--r { justify-content: flex-end; align-items: center; padding-right: 6px; border-bottom: 1px solid rgba(0,0,0,.08); }
.dg-clue--c { flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 5px; border-right: 1px solid rgba(0,0,0,.08); }
.dg-clue.is-done { color: #b5b5bf; }
.dg-clue.is-bad { color: #e5484d; }

/* ── Lights Out ─────────────────────────────────────────────────────── */
.dg-board--lights { background: #1d1f2e; border-color: #1d1f2e; gap: 6px; padding: 6px; }
.dg-board--lights .dg-cell {
  border: 0; border-radius: 10px; background: #2c3048; transition: background .18s, box-shadow .18s;
}
.dg-board--lights .dg-cell.is-lit { background: #ffd54a; box-shadow: 0 0 18px rgba(255, 213, 74, .65); }
.dg-board--lights .dg-cell.is-fixed::after {
  content: ''; width: 18%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.55);
}
.dg-board--lights.is-solved .dg-cell { background: #2fa257; box-shadow: none; }

/* ── Daily Word ─────────────────────────────────────────────────────── */
.wd-board { display: grid; gap: 6px; width: 100%; max-width: 330px; margin: 0 auto; user-select: none; -webkit-user-select: none; }
.wd-row { display: grid; grid-template-columns: repeat(var(--len, 5), 1fr); gap: 6px; }
.wd-row.is-shake { animation: wd-shake .4s; }
.wd-tile {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1;
  border: 2px solid var(--zip-line); border-radius: 8px; background: #fff;
  font: 800 clamp(22px, 7vw, 32px)/1 "Baloo 2", sans-serif; text-transform: uppercase; color: var(--zip-ink);
}
.wd-tile.is-typed { border-color: #9a9aa6; animation: wd-pop .1s; }
.wd-tile.is-ghost { color: #c4c4cc; border-style: dashed; }
.wd-tile.is-m0, .wd-tile.is-m1, .wd-tile.is-m2 { color: #fff; animation: wd-flip .45s ease; }
.wd-tile.is-m0, .wd-key.is-m0 { background: #8a8a96; border-color: #8a8a96; color: #fff; }
.wd-tile.is-m1, .wd-key.is-m1 { background: #e9b828; border-color: #e9b828; color: #fff; }
.wd-tile.is-m2, .wd-key.is-m2 { background: #2fa257; border-color: #2fa257; color: #fff; }
.wd-msg { min-height: 24px; margin: 10px 0 2px; font-weight: 700; color: var(--zip-ink); }
.wd-keys { display: grid; gap: 6px; max-width: 480px; margin: 6px auto 0; }
.wd-keys__row { display: flex; gap: 5px; justify-content: center; }
.wd-key {
  flex: 1 1 0; max-width: 44px; height: 52px; padding: 0; border: 0; border-radius: 8px; cursor: pointer;
  background: #e4e4ea; color: var(--zip-ink); font: 800 16px/1 "Baloo 2", sans-serif; text-transform: uppercase;
}
.wd-key--wide { flex: 1.6 1 0; max-width: 70px; font-size: 13px; }
.wd-chip { display: inline-block; padding: 0 6px; border-radius: 4px; color: #fff; font-weight: 700; }
.wd-chip--2 { background: #2fa257; } .wd-chip--1 { background: #e9b828; } .wd-chip--0 { background: #8a8a96; }
.wd-answer { margin: 2px 0 4px; font-size: 16px; color: #555; }
.wd-answer strong { letter-spacing: .12em; color: var(--zip-ink); }
@keyframes wd-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes wd-pop { from { transform: scale(1.08); } }
@keyframes wd-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@media (prefers-reduced-motion: reduce) { .wd-row.is-shake, .wd-tile { animation: none !important; } }

@media (max-width: 900px) {
  .zip-layout { grid-template-columns: 1fr; }
  .zip-side { max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 480px) {
  .zip-head h1 { font-size: 28px; }
  .zip-panel { padding: 18px 14px; }
  .zip-panel--board { padding: 10px; }
  .zip-result__time { font-size: 44px; }
  .zip-stat__v { font-size: 22px; }
  .zip-ready__card { max-width: 270px; padding: 16px 14px 12px; }
  .zip-ready__card h2 { font-size: 22px; }
  .zip-ready__tag { font-size: 14px; margin-bottom: 12px; }
  .zip-btn--go { font-size: 18px; padding: 12px 20px; }
}