/* ==========================================================================
   Perfils · award.css ("Quem acertou?", free-table mode)
   --------------------------------------------------------------------------
   The pop-up that opens when a guess is right on the free table: the table picks who scores.
   Same white card as the end-of-round dialog (.p-modal--card, .rd): strip of triangles above and below,
   Poiret title, the points as a gold marker triangle (.rd-stamp, from screens.css).
   Loads after screens.css and game.css. Built only on theme.css tokens.
   ========================================================================== */
.dlg-award { width: min(46rem, calc(100vw - 2rem)); }

.aw {
  --aw-pad: clamp(1rem, 3.2vw, 2.25rem);
  padding: calc(var(--card-band) + 0.8rem) var(--aw-pad) 0;
}
.aw::after {                           /* the card's lower strip of triangles */
  content: '';
  display: block;
  height: var(--card-band);
  margin: 0 calc(var(--aw-pad) * -1);
  background: var(--img-strip) repeat-x left center / calc(var(--card-band) * 8 / 7) var(--card-band);
  transform: scaleY(-1);
  transform-origin: 50% 50%;
}
.aw-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 2px solid var(--p-teal-deep);
  box-shadow: 0 4px 0 -3px var(--p-paper);
}
.aw-text { min-width: 0; }
.aw-kicker {
  margin: 0 0 0.35rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--p-teal-ink);
}
.aw-title { margin: 0; color: var(--p-ink); outline: none; }
.aw-sub { margin: 0.45rem 0 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--p-muted); overflow-wrap: anywhere; }
.aw-sub__pts { display: inline-block; margin-left: 0.15rem; font-weight: 700; color: var(--p-ink); }
.aw-stamp { flex: none; width: 5.6rem; height: 5.1rem; padding-top: 0.6rem; }
.aw-stamp { place-items: center; align-content: center; padding-top: 0; }
.aw-stamp b { margin-top: -0.9rem; font-size: 2.4rem; }

/* the players: one paper key each, with the key that picks it */
.aw-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}
.aw-list[data-n='1'] { grid-template-columns: minmax(0, 1fr); }
.aw-list[data-n='3'], .aw-list[data-n='5'], .aw-list[data-n='6'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aw-opt {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.8rem;
  width: 100%;
  min-height: 4.6rem;
  padding: 0.5rem 2.2rem 0.5rem 0.8rem;
  text-align: left;
  color: var(--p-ink);
  background: linear-gradient(180deg, var(--p-paper-hi) 0%, var(--p-paper) 50%, var(--p-paper-lo) 100%);
  border: 2px solid var(--p-black);
  border-radius: var(--r-3);
  box-shadow: inset 0 0 0 2px var(--p-paper), inset 0 0 0 3px var(--p-teal-deep), 0 3px 0 var(--p-black);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background var(--dur-2) var(--ease-out);
}
@media (hover: hover) {
  .aw-opt:hover {
    background: linear-gradient(180deg, var(--p-gold-glow) 0%, var(--p-orange) 55%, var(--p-gold-lo) 100%);
    transform: translateY(-1px);
  }
}
.aw-opt:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--p-paper), inset 0 0 0 3px var(--p-teal-deep), 0 1px 0 var(--p-black); }
.aw-opt:focus-visible {
  outline: 3px solid var(--p-focus);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 2px var(--p-paper), inset 0 0 0 3px var(--p-teal-deep), 0 3px 0 var(--p-black), 0 0 0 5px var(--p-black);
}
.aw-opt .pw { grid-row: 1 / span 2; align-self: center; }
.aw-opt__text { grid-row: 1 / span 2; display: grid; min-width: 0; gap: 0.1rem; align-self: center; }
.aw-opt__name {
  font-weight: 700;
  font-size: var(--fs-md);
  line-height: 1.2;
  overflow-wrap: anywhere;   /* a 14-letter name wraps to a second line instead of being cut with "..." */
}
.aw-opt__pts { font-size: var(--fs-xs); line-height: 1.2; color: var(--p-muted); font-variant-numeric: lining-nums tabular-nums; }
@media (hover: hover) { .aw-opt:hover .aw-opt__pts { color: var(--p-black); } }
.aw-opt__key {
  position: absolute;
  top: 0.4rem;
  right: 0.45rem;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-xs);
  line-height: 1;
  color: var(--p-cream);
  background: var(--p-black);
  border-radius: var(--r-1);
}
@media (pointer: coarse) { .aw-opt__key, .aw-hint { display: none; } .aw-actions { justify-content: flex-end; } }

.aw-actions { justify-content: space-between; margin-block: var(--sp-5) var(--sp-4); }
.aw-hint { flex: 1 1 14rem; margin: 0; font-size: var(--fs-xs); line-height: 1.4; color: var(--p-muted); }

@media (max-width: 599px) {
  .aw-list, .aw-list[data-n='3'], .aw-list[data-n='5'], .aw-list[data-n='6'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aw-list[data-n='1'] { grid-template-columns: minmax(0, 1fr); }
  .aw-opt { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 0.25rem; padding: 0.55rem 0.4rem 0.6rem; text-align: center; }
  .aw-opt .pw, .aw-opt__text { grid-row: auto; }
  .aw-opt__text { justify-items: center; width: 100%; }
  .aw-stamp { width: 4.6rem; height: 4.2rem; }
  .aw-stamp b { margin-top: -0.7rem; font-size: 2rem; }
  .aw-actions .p-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .aw-opt, .aw-opt:hover, .aw-opt:active { transition: none; transform: none; }
}