/* Weekly Puzzles (v341) */
.mp-open { flex: none; padding: 6px 14px; border-radius: 10px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #1a1204; background: #fbbf24; }
.mp-open:hover { background: #fcd34d; }
.pz-card-box { position: relative; width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto; box-sizing: border-box; padding: 18px 16px 14px;
  background: #0b1428; border: 1px solid rgba(251,191,36,.35); border-radius: 18px; color: #e2e8f0; box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.pz-kicker { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fbbf24; }
.pz-title { margin: 2px 0 0; font-size: 20px; font-weight: 900; color: #f8fafc; }
.pz-tier { font-size: 11px; color: #94a3b8; margin-top: 2px; letter-spacing: .04em; }
.pz-goal { margin: 10px 0; font-size: 12px; line-height: 1.5; color: #94a3b8; }
.pz-table { position: relative; overflow: hidden; border-radius: 14px; padding: 12px 8px; background: linear-gradient(180deg,#030c08,#0d2b1d 50%,#030c08);
  border: 1px solid #1e293b; text-align: center; isolation: isolate; }
.pz-table > .responsive-scene { position: absolute; inset: 0; z-index: -1; }
.pz-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(226,232,240,.75); margin-bottom: 4px; }
.pz-pile { display: flex; justify-content: center; align-items: center; min-height: 74px; }
.pz-pile .pz-card + .pz-card { margin-left: calc(var(--pzw) * -.47); }
.pz-empty { font-size: 12px; color: #e2e8f0; opacity: .8; }
.pz-rule { margin-top: 8px; font-size: 12px; font-weight: 700; color: #fde68a; text-shadow: 0 1px 2px #000; }
.pz-status { min-height: 34px; margin: 10px 0 4px; font-size: 12px; line-height: 1.4; color: #cbd5e1; }
.pz-status[data-tone="good"] { color: #86efac; }
.pz-status[data-tone="bad"] { color: #fca5a5; }
.pz-you { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; }
.pz-hand { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; padding: 8px 0 10px; }
.pz-card { transition: transform .18s var(--ease-snappy, ease), box-shadow .18s, border-color .18s; }
#pzHand .pz-card { cursor: pointer; }
#pzHand .pz-card:hover { transform: translateY(-3px); }
#pzHand .pz-card:focus-visible { outline: 2px solid #fbbf24; outline-offset: 2px; }
.pz-sel { transform: translateY(-9px) !important; }
.pz-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pz-btn { padding: 7px 11px; border-radius: 10px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #cbd5e1; border: 1px solid #475569; background: transparent; }
.pz-btn:hover:not(:disabled) { background: rgba(148,163,184,.14); }
.pz-btn:disabled { opacity: .4; }
.pz-primary { color: #1a1204; background: #fbbf24; border-color: #fbbf24; }
.pz-primary:hover:not(:disabled) { background: #fcd34d; }
.pz-quiet { border-color: transparent; color: #94a3b8; }
.pz-plays { margin-left: auto; font-size: 11px; color: #94a3b8; }
.pz-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.pz-note { font-size: 11px; color: #94a3b8; margin-right: 4px; }
.pz-chip { min-width: 34px; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #cbd5e1; border: 1px solid #475569; }
.pz-chip.on { color: #1a1204; background: #fbbf24; border-color: #fbbf24; }
body.reduce-motion .pz-card { transition: none; }

.pz-rival { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin-bottom: 10px; }
.pz-rival[hidden] { display: none; }
.pz-rival-label { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #e2e8f0; margin-right: 6px; }
.pz-reward { margin: -4px 0 10px; font-size: 11px; color: #fcd34d; }

/* Select All Of A Rank toggle (v347) */
.pz-toggle { display: inline-flex; align-items: center; gap: 6px; }
.pz-dot { width: 8px; height: 8px; border-radius: 50%; background: #f87171; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.pz-toggle[aria-pressed="true"] .pz-dot { background: #4ade80; }
.pz-toggle[aria-pressed="true"] { border-color: #4ade80; color: #bbf7d0; }

/* Fits one screen (v350): card sizes follow --pzw, set by fit() in js/puzzles.js */
.pz-card-box { --pzw: 64px; display: flex; flex-direction: column; overflow: hidden; padding: 12px 14px 10px; }
.pz-card-box .card-base { width: var(--pzw); height: calc(var(--pzw) * 1.45); }
.pz-card-box .card-table { width: calc(var(--pzw) * .85); height: calc(var(--pzw) * 1.23); }
.pz-card-box .card-opponent-slot { width: calc(var(--pzw) * .6); height: calc(var(--pzw) * .88); }
.pz-card-box .card-centre-icon { width: calc(var(--pzw) * .36); height: calc(var(--pzw) * .36); }
.pz-card-box .card-corner-rank { font-size: calc(var(--pzw) * .26); }
.pz-card-box .card-corner-suit { font-size: calc(var(--pzw) * .2); }
.pz-pile { min-height: calc(var(--pzw) * 1.23); }
.pz-hand { padding: 6px 0 6px; }
.pz-goal { margin: 6px 0; }
.pz-status { min-height: 0; margin: 6px 0 2px; }
.pz-pick { margin-top: 6px; }
#pzAll { padding: 0; width: 34px; height: 34px; border-radius: 50%; position: relative; justify-content: center; }
#pzAll .rank-toggle-svg { width: 22px; height: 22px; }
#pzAll .pz-dot { position: absolute; right: -2px; bottom: -2px; border: 2px solid #0b1428; width: 11px; height: 11px; box-sizing: border-box; }
.pz-card-box > * { flex: none; }
.pz-tight .pz-reward, .pz-tight .pz-tier, .pz-tight .pz-note, .pz-tight #pzHow { display: none; }
.pz-tight .pz-title { font-size: 16px; }
.pz-tight .pz-goal { font-size: 11px; line-height: 1.35; margin: 4px 0; }
.pz-tight .pz-table { padding: 6px 8px; }
@media (max-height: 640px) { #puzzlesModal { padding: 6px !important; } .pz-tight .pz-btn { padding: 5px 9px; } .pz-tight #pzAll { width: 30px; height: 30px; } .pz-tight .pz-hand { padding: 4px 0; } }
.pz-card-box .pz-card { transition: transform .18s var(--ease-snappy, ease), box-shadow .18s, border-color .18s !important; } /* never animate width/height: fit() measures them */

/* Solved state (v352): a clear finish instead of a frozen board */
.pz-done { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; margin: 8px 0; padding: 14px 12px; border-radius: 14px;
  background: rgba(16,185,129,.12); border: 1px solid #10b981; color: #d1fae5; }
.pz-done[hidden] { display: none; }
.pz-done svg { width: 44px; height: 44px; color: #34d399; }
.pz-done b { font-size: 18px; color: #ecfdf5; }
.pz-done span { font-size: 12px; line-height: 1.4; }
.pz-done-btns { display: flex; gap: 8px; margin-top: 4px; }
.pz-won .pz-table { opacity: .55; filter: saturate(.7); }
.pz-won #pzHand, .pz-won #pzYou, .pz-won .pz-actions, .pz-won #pzStatus, .pz-won .pz-goal, .pz-won .pz-reward { display: none; }
body:not(.reduce-motion) .pz-done svg { animation: pz-pop .5s var(--ease-bouncy, ease) both; }
@keyframes pz-pop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }

/* v354: one stacked Pile, suit-only cards, a layout that never jumps */
.pz-pile { padding-left: 0; }
.pz-pile .pz-card { box-shadow: 0 2px 6px rgba(0,0,0,.55); }
.pz-card-box .card-centre-suit { font-size: calc(var(--pzw) * .42); }
.pz-card-box .card-opponent-slot { width: calc(var(--pzw) * .7); height: calc(var(--pzw) * 1.02); }
.pz-card-box .card-opponent-slot .card-corner-rank { font-size: calc(var(--pzw) * .24); }
.pz-card-box .card-opponent-slot .card-corner-suit { font-size: calc(var(--pzw) * .18); }
.pz-rival:not([hidden]) { min-height: calc(var(--pzw) * 1.02); }
.pz-status { min-height: 2.9em; }
#pzRestart { min-width: 5.4em; }
.pz-rule { min-height: 2.7em; }
/* v355: corner index only (rank, suit under it), bigger so the card reads at a glance */
.pz-card-box .card-base .card-corner-rank, .pz-card-box .card-table .card-corner-rank { font-size: calc(var(--pzw) * .36); }
.pz-card-box .card-base .card-corner-suit, .pz-card-box .card-table .card-corner-suit { font-size: calc(var(--pzw) * .3); }
.pz-card-box .card-opponent-slot .card-corner-rank { font-size: calc(var(--pzw) * .3); }
.pz-card-box .card-opponent-slot .card-corner-suit { font-size: calc(var(--pzw) * .24); }