body { background: radial-gradient(ellipse at 85% 0%, #ffead4, transparent 650px); }
.game-brand-mark { background: #fae3c5; color: #946d36; font-weight: 900; }
.pexeso-game { max-width: 850px; margin: 0 auto; padding: clamp(12px, 3vw, 28px); }
.pexeso-game h2 { text-align: center; font-size: clamp(1.1rem, 3vw, 1.45rem); }
.level-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 24px; }
.level-picker button { display: grid; gap: 4px; min-height: 60px; padding: 10px 4px; border: 2px solid #e6e8e0; border-radius: 13px; background: #fafbf7; color: #43584e; }
.level-picker strong { font-size: 1rem; }
.level-picker small { color: #617568; font-size: .75rem; }
.level-picker button[aria-pressed="true"] { border-color: #d6ac71; background: #fff4df; color: #805b2b; }
.level-picker button:disabled { cursor: default; }
.game-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px 0; text-align: center; }
.game-stats div { display: grid; gap: 3px; padding: 10px 3px; border-radius: 14px; background: #f8f4e9; }
.game-stats strong { color: #805b2b; font-size: clamp(1.1rem, 4vw, 1.5rem); font-variant-numeric: tabular-nums; }
.game-stats span { color: #687365; font-size: .75rem; }
.demo { display: flex; justify-content: center; gap: 10px; margin: 26px 0; }
.demo span { display: grid; place-items: center; width: 60px; height: 76px; border-radius: 13px; background: #fff7e7; border: 2px solid #e7c89d; font-size: 2.2rem; box-shadow: 0 4px 0 #dfc9a6; }
.demo span:nth-child(even) { background: #4f806a; border-color: #4f806a; color: #e7f1dd; font-weight: 800; }
.instructions { max-width: 560px; margin: 16px auto 22px; text-align: center; color: #687365; line-height: 1.65; }
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; width: 100%; max-width: 720px; margin-inline: auto; scroll-margin-top: 112px; }
.board:empty, .board[hidden] { display: none; }
.memory-card { display: grid; align-content: center; justify-items: center; gap: 3px; min-width: 0; min-height: 72px; padding: 7px 2px; aspect-ratio: 1; border: 2px solid #42765e; border-radius: 12px; background: repeating-linear-gradient(45deg, #4f806a 0 8px, #54876e 8px 16px); color: #edf4df; box-shadow: 0 3px 0 #315e49; cursor: pointer; touch-action: manipulation; }
.memory-card .card-back { font: 800 clamp(2rem, 6vw, 3rem)/1 system-ui,sans-serif; }
.memory-card[data-shown="true"] { background: #fff9ed; border-color: #e2c299; color: #4c5944; box-shadow: 0 3px 0 #dfc9a6; }
.memory-card[data-matched="true"] { background: #edf7e7; border-color: #a5c891; box-shadow: 0 3px 0 #c4d8b8; }
.card-emoji { font-family: 'Apple Color Emoji','Segoe UI Emoji',sans-serif; font-size: clamp(1.8rem, 6vw, 3rem); line-height: 1.15; }
.card-name { max-width: 100%; font-size: clamp(.65rem, 1.6vw, .8rem); font-weight: 700; overflow-wrap: anywhere; }
.memory-card:hover:not(:disabled) { border-color: #e4ba71; }
.memory-card:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.memory-card:focus-visible, .level-picker button:focus-visible { outline: 3px solid #b67d39; outline-offset: 3px; }
.memory-card:disabled { cursor: default; opacity: 1; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.message { min-height: 2.5em; margin: 20px 0 12px; text-align: center; }
.summary { position: relative; margin: 20px 0; padding: 20px 12px; border-radius: 18px; background: #fff2d8; text-align: center; }
.summary h3 { margin: 8px 0; color: #805b2b; }
.summary p { color: #6f725d; font-size: .9rem; }
.celebration { color: #c89536; font-size: 2.2rem; letter-spacing: .22em; animation: celebrate .7s ease-out; }
.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.result-grid div { display: grid; gap: 5px; }
.result-grid strong { color: #805b2b; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.result-grid span { color: #6f725d; font-size: .8rem; }
#save-status { text-align: center; }
#retry { display: block; margin: 10px auto 0; }
.rank-score { text-align: right; }
.rank-score strong, .rank-score small { display: block; }
.rank-score small { font-weight: 500; line-height: 1.5; }
@keyframes celebrate { from { transform: scale(.55); opacity: .3; } to { transform: scale(1); opacity: 1; } }
@media(min-width:550px) { .board { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } }
@media(max-width:480px) { .game-ranking-list li { grid-template-columns: 24px minmax(0,1fr); gap: 8px 10px; } .rank-score { grid-column: 2; text-align: left; } }
@media(prefers-reduced-motion:reduce) { .celebration { animation: none; } .memory-card { transition: none; } }

/* Keep every card in document flow. Larger games use complete, shorter rows. */
.pexeso-game:has(.board:not(:empty):not([hidden])) .instructions {display:none;}
@media(max-width:549px) {
  .pexeso-game:has(.board:not(:empty):not([hidden])) .level-picker {margin-bottom:10px;}
  .pexeso-game:has(.board:not(:empty):not([hidden])) .game-stats {margin:10px 0;}
  .pexeso-game:has(.board:not(:empty):not([hidden])) .game-stats div {padding:6px 3px;}
  .board {gap:5px;}
  .memory-card {min-width:44px;min-height:44px;padding:4px 1px;border-radius:9px;}
  .card-emoji {font-size:clamp(1.4rem,6vw,2rem);}
  .card-name {font-size:.6rem;line-height:1.15;}
}
@media(min-width:360px) and (max-width:549px) {
  .board:has(.memory-card:nth-child(24)) {grid-template-columns:repeat(6,minmax(0,1fr));}
  .board:has(.memory-card:nth-child(24)) .card-emoji {font-size:1.45rem;}
  .board:has(.memory-card:nth-child(24)) .card-back {font-size:1.8rem;}
}