/* Blind Rank: pink. The thing you're placing sits in a big card up top,
   the five ranks are tall rows with big numbers (each placed row shows its
   real number), and when it's over each row fills green (right spot),
   yellow (one off) or gray. */

:root { --pink: #ff9eb0; --pink-wash: #fff0f3; }
.blind { --game: var(--pink); gap: 16px; }

.cat h2 { margin: 0; font: 700 26px/1.15 var(--slab); }
.cat p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }

.up {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 118px; padding: 14px 16px; border-radius: 12px; background: var(--pink-wash); text-align: center;
}
.up p { margin: 0; }
.up-count { font-size: 13px; font-weight: 700; color: #b03a55; }
.up-name { font: 700 clamp(24px, 7vw, 32px)/1.15 var(--slab); }
.up-help { font-size: 14px; color: var(--muted); }
.up.fresh .up-name { animation: deal 0.3s var(--ease); }
.up.done { background: var(--wash); }
@keyframes deal { from { opacity: 0; transform: translateY(8px) scale(0.97); } }

.slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.slot {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px;
  width: 100%; min-height: 58px; padding: 8px 14px 8px 8px; border-radius: 10px; cursor: default;
  border: 1.5px solid var(--rule); background: var(--paper); text-align: left;
}
.slot .n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--wash); font: 800 20px var(--ui); }
.slot .who { font-size: 17px; font-weight: 700; line-height: 1.2; }
.slot .who small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.slot .tag { font-size: 13px; font-weight: 700; white-space: nowrap; }
.slot.empty { border-style: dashed; }
.slot.empty .who { font-weight: 500; color: #a3a3a3; }
.slot.open { cursor: pointer; border-color: var(--ink); }
.slot.open:hover { background: var(--pink-wash); }
.slot.open .who { color: var(--ink); }
.slot.just { animation: drop 0.25s var(--ease); }
@keyframes drop { from { transform: scale(0.97); } }

.slot.exact { border-color: var(--green); background: #eef7ed; }
.slot.exact .n { background: var(--green); color: #fff; }
.slot.near { border-color: var(--yellow); background: #fbf7e6; }
.slot.near .n { background: var(--yellow); color: #fff; }
.slot.miss { background: var(--wash); }
.slot.miss .n { background: var(--gray); color: #fff; }

.src { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.src a { color: var(--muted); }

/* results */
.res-squares { display: flex; justify-content: center; gap: 6px; margin: 4px 0 6px; }
.res-squares i { width: 40px; height: 40px; }
.res-squares .exact { background: var(--green); }
.res-squares .near { background: var(--yellow); }
.res-squares .miss { background: var(--gray); }
.res-pts { margin: 2px 0 0; text-align: center; font-size: 15px; color: var(--muted); }
.res-pts b { font: 700 32px/1 var(--ui); color: var(--ink); }
.order { margin: 6px 0 18px; border-top: 1px solid var(--rule); }
.order div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.order b { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.legend { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; font-size: 15px; }
.legend i { width: 22px; height: 22px; }
.legend .g { background: var(--green); }
.legend .y { background: var(--yellow); }
.legend .x { background: var(--gray); }

@media (prefers-reduced-motion: reduce) {
  .up.fresh .up-name, .slot.just { animation: none; }
}