:root { --bg:#0f1222; --card:#1e2445; --text:#eef1ff; --ok:#42d392; }
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}
.wrap{max-width:1000px;margin:20px auto;padding:16px}
h1{margin:0 0 12px}
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
label{display:flex;flex-direction:column;font-size:12px;gap:4px}
select,input,button{padding:8px;border-radius:10px;border:1px solid #3b4372;background:#171c35;color:#fff}
button{cursor:pointer}
.status{margin:12px 0;display:flex;gap:20px;flex-wrap:wrap}
.board{display:grid;gap:8px}
.card{aspect-ratio:3/4;display:grid;place-items:center;border-radius:12px;background:var(--card);border:1px solid #4a538f;font-size:24px;font-weight:700;cursor:pointer;user-select:none}
.card.flipped,.card.matched{background:#2b3568}
.card.matched{outline:2px solid var(--ok);cursor:default}
.hidden{display:none}
.leaderboard{margin-top:18px;padding-top:10px;border-top:1px solid #38406a}
li{margin:6px 0}

.card.face-red{color:#ff7b86;text-shadow:0 0 10px rgba(255,80,120,.25)}
.card.face-black{color:#f3f5ff}
.card.face-emoji{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35)}


/* Stronger color emphasis for quicker recognition */
.card.flipped.face-red, .card.matched.face-red {
  background: linear-gradient(145deg, #4a1020, #7a1f3a) !important;
  border-color: #ff6b8a;
  color: #ffd7df;
  box-shadow: 0 0 0 2px rgba(255,107,138,.25), 0 6px 20px rgba(255,50,90,.25);
}
.card.flipped.face-black, .card.matched.face-black {
  background: linear-gradient(145deg, #151a2a, #2a3248) !important;
  border-color: #9fb0d9;
  color: #f6f8ff;
  box-shadow: 0 0 0 2px rgba(160,180,230,.2), 0 6px 20px rgba(110,130,180,.2);
}
.card.flipped.face-emoji, .card.matched.face-emoji {
  border-width: 2px;
  border-color: #ffffffcc;
  box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 8px 22px rgba(0,0,0,.35);
}

.card.rank-10{font-size:20px;letter-spacing:-.5px}
@media(max-width:480px){.card.rank-10{font-size:16px;letter-spacing:-1px}}