:root {
  --tangelo:#EE7526; --mustard:#FBD652; --vermilion:#D74820;
  --plum:#77161C;    --rich-black:#030519;
  --slate:#353747;   --charcoal:#333333;
  --cream:#F5EEE5;   --beige:#EFEDE9;
  --off-white:#F5F5F5; --light-grey:#F0F0F0; --pastel-grey:#5C5C5C;
  --bg:#FFFFFF; --panel:var(--off-white); --panel-2:#FFFFFF;
  --border:var(--plum);
  --fg:var(--pastel-grey); --fg-strong:var(--rich-black); --fg-faint:#BFBFBF;
  --accent:var(--tangelo); --accent-hover:var(--vermilion);
  --radius:12px; --radius-sm:8px;
  --shadow:0 6px 20px rgba(3,5,25,.06), 0 1px 2px rgba(3,5,25,.04);
  --shadow-strong:0 12px 32px rgba(3,5,25,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  background:
    radial-gradient(1100px 500px at 20% -150px, rgba(238,117,38,.06) 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 0%, rgba(251,214,82,.08) 0%, transparent 60%),
    var(--bg);
  color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}

/* Layout */
.wrap{
  max-width:980px;
  margin:0 auto;
  padding:24px 20px 64px;
}

/* Top bar */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  flex-wrap:wrap;
  margin:8px 0 24px;
}
.brand{min-width:0}
.title{
  margin:0;
  font-size:30px;
  font-weight:800;
  letter-spacing:-0.03em;
  color:var(--fg-strong);
  line-height:1.1;
}
.subtitle{
  margin:6px 0 0;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--pastel-grey);
}

/* Stats */
.stats{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.stat{
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:8px 14px;
  min-width:74px;
  display:flex;
  flex-direction:column;
  align-items:center;
  box-shadow:var(--shadow);
}
.stat-label{
  font-size:10px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--pastel-grey);
}
.stat-value{
  margin-top:2px;
  font-size:20px;
  font-weight:800;
  color:var(--fg-strong);
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;
}

/* Controls */
.controls{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.btn{
  font:inherit;
  font-weight:600;
  font-size:13px;
  letter-spacing:0.04em;
  padding:10px 16px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--panel-2);
  color:var(--fg-strong);
  cursor:pointer;
  transition:transform .12s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
  box-shadow:var(--shadow);
}
.btn:hover{
  background:var(--cream);
  transform:translateY(-1px);
  box-shadow:var(--shadow-strong);
}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
.btn-primary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.btn-primary:hover{
  background:var(--accent-hover);
  border-color:var(--accent-hover);
  color:#fff;
}
.msg{
  margin-left:6px;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--pastel-grey);
  min-height:1em;
}
.msg.good{color:var(--accent)}
.msg.bad{color:var(--plum)}

/* Board */
.board-wrap{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow);
  /* Cap board width so cards don't blow up on wide screens. The 12-card
   * deal lays out 3 cols × 4 rows on mobile, 4 cols × 3 rows on desktop. */
  max-width:560px;
  margin:0 auto;
}
.board{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
@media (min-width: 640px){
  .board{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
  }
}

/* Card */
.card{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  aspect-ratio: 12 / 17;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  user-select:none;
  transition:transform .15s ease, box-shadow .15s ease, outline-color .15s ease;
  box-shadow:var(--shadow);
  padding:10px 8px;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-strong);
}
.card.selected{
  outline:3px solid var(--accent);
  outline-offset:-2px;
}
.card.flash-good{
  animation:flash-good .42s ease-out;
}
.card.flash-bad{
  animation:flash-bad .4s ease-out;
}
.card.hint{
  outline:3px dashed var(--mustard);
  outline-offset:-2px;
}
.card svg.shape{
  width:clamp(18px, 5vw, 26px);
  height:clamp(36px, 10vw, 50px);
  display:block;
  flex:0 0 auto;
}

@keyframes flash-good{
  0%   { background:#fff; }
  30%  { background:var(--mustard); }
  100% { background:#fff; }
}
@keyframes flash-bad{
  0%,100% { transform:translateX(0); background:#fff; }
  20%     { transform:translateX(-6px); background:#fbe7e7; }
  40%     { transform:translateX(6px);  background:#fbe7e7; }
  60%     { transform:translateX(-4px); background:#fbe7e7; }
  80%     { transform:translateX(4px);  background:#fbe7e7; }
}

/* Footer */
.foot{
  margin-top:24px;
  text-align:center;
}
.hint-text{
  font-size:12px;
  color:var(--pastel-grey);
  letter-spacing:0.02em;
  max-width:640px;
  margin:0 auto;
  line-height:1.55;
}
.hint-text strong{ color:var(--fg-strong); font-weight:700; }