.narrow { max-width: 640px; }
.setup { display: grid; gap: 10px; margin-bottom: 12px; }
.opt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lbl { width: 58px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.g-stats { flex-wrap: nowrap; }
.g-stats .g-stat { flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; text-align: center; }

.table {
  position: relative;
  display: grid;
  gap: 18px;
  justify-items: center;
  padding: 22px 14px 20px;
  border-radius: 24px;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--green) 26%, var(--surface)), color-mix(in srgb, var(--green) 10%, var(--surface-2)));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.goal { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.goal b { font-size: 1.5rem; letter-spacing: 0; color: var(--ink); padding-left: 4px; }

.cards { display: flex; justify-content: center; gap: 12px; width: 100%; max-width: 520px; }
.table .card {
  position: relative;
  flex: 0 0 calc((100% - 36px) / 4);
  aspect-ratio: 0.8;
  display: grid;
  place-items: center;
  padding: 0;
  font: 850 clamp(1.8rem, 9vw, 3rem) var(--font);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 6px 0 var(--card-edge, var(--line-strong)), 0 16px 22px -8px rgba(10, 14, 30, 0.4);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.3, 1.2), box-shadow 0.15s ease;
  animation: deal 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.2) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.cards .card:nth-child(1) { --card-edge: color-mix(in srgb, #ef6461 70%, var(--line-strong)); }
.cards .card:nth-child(2) { --card-edge: color-mix(in srgb, #4f8df5 70%, var(--line-strong)); }
.cards .card:nth-child(3) { --card-edge: color-mix(in srgb, #2fb67c 70%, var(--line-strong)); }
.cards .card:nth-child(4) { --card-edge: color-mix(in srgb, #f5b41f 70%, var(--line-strong)); }
@keyframes deal { from { opacity: 0; transform: translateY(-30px) rotate(-6deg) scale(0.8); } }
.cards .card:hover:not(:disabled) { transform: translateY(-4px); }
.cards .card:active:not(:disabled) { transform: translateY(3px); }
.cards .card.sel { transform: translateY(-8px); outline: 4px solid var(--focus); outline-offset: 2px; background: linear-gradient(180deg, var(--gold-soft), var(--surface)); }
.cards .card.made { animation: pop 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.3); }
.cards .card.hintA, .cards .card.hintB { box-shadow: 0 0 0 4px var(--gold), 0 6px 0 var(--gold-deep), 0 16px 22px -8px rgba(10, 14, 30, 0.4); }
.cards .card.shake { animation: shake 0.4s ease; }
.cards .card.win { background: linear-gradient(180deg, color-mix(in srgb, var(--green) 30%, var(--surface)), var(--surface)); outline: 4px solid var(--green); animation: pop 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.4); }
.cards .card:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }
@keyframes pop { from { transform: scale(0.6); } }
@keyframes shake { 25%, 75% { transform: translateX(-7px); } 50% { transform: translateX(7px); } }
.frac { display: inline-grid; justify-items: center; line-height: 1; font-size: 0.62em; }
.frac i { font-style: normal; padding: 0.05em 0.25em; }
.frac i:first-child { border-bottom: 0.07em solid currentColor; }

.ops { display: flex; gap: 12px; }
.op {
  width: clamp(56px, 16vw, 72px);
  height: clamp(56px, 16vw, 72px);
  padding: 0;
  font: 800 clamp(1.7rem, 7vw, 2.2rem) var(--font);
  color: var(--on-gold);
  background: linear-gradient(180deg, #ffd25a, var(--gold));
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 5px 0 var(--gold-deep), 0 12px 16px -6px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.op:hover { transform: translateY(-2px); }
.op:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-deep); }
.op.on { outline: 4px solid var(--focus); outline-offset: 3px; transform: translateY(-4px); }
.op.hintOp { box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 45%, transparent), 0 5px 0 var(--gold-deep); }
.op:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
.op:disabled, .card:disabled { cursor: default; opacity: 0.6; }
.cards .card.win:disabled { opacity: 1; }

.working { min-height: 1.6em; font-size: 1.05rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; }
.working b { color: var(--ink); }
.working.good { color: var(--green); }

.tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.how { margin-top: 16px; }
.how summary { cursor: pointer; font-weight: 800; }
.how ul { margin: 10px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.55; }
.how b { color: var(--ink); }
.g-status.good { color: var(--green); }
.g-status.bad { color: var(--red); }

#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; }
@media (max-width: 480px) {
  .cards { gap: 8px; }
  .table .card { flex-basis: calc((100% - 24px) / 4); }
}

.bigemoji { font-size: 3.4rem; }