/* Anno XL — sala.css
   IV · Sala, the boost grid.

   THE VISUAL ARGUMENT OF THE ROOM IS THE REVEAL. A face-down card is ink —
   the same darkness as the rest of the site. A card somebody has taken is
   PAPER. So the table starts as a dark grid and turns pale over five months,
   and "the good ones are going" is legible at a glance, before a word is
   read. Everything below serves that one contrast.

   Cells carry a Roman numeral I–XXV. Not decoration: the group chat needs to
   be able to say "who took XVII".                                          */

/* ---- the table ----------------------------------------------------------
   The felt nods to the round table under the roof — an oval hairline behind
   a square grid. A literal ring of twenty-five cards is unreadable at 375px,
   so the roundness lives in the ground instead of the layout. */
.sl-table {
  position: relative;
  margin: 26px 0 0;
  padding: 20px 16px 18px;
  background: radial-gradient(120% 100% at 50% 40%, rgba(20, 61, 71, .82), rgba(9, 32, 39, .92) 70%);
  border: 1px solid rgba(231, 217, 189, .18);
  clip-path: var(--cut-m);
  backdrop-filter: blur(9px);
}
.sl-table::before {
  content: '';
  position: absolute; left: 8%; right: 8%; top: 10px; bottom: 10px;
  border: 1px solid rgba(230, 163, 62, .16);
  border-radius: 50%;                      /* genuinely round: allowed */
  pointer-events: none;
}
.sl-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(5px, 1.6vw, 9px);
}
.sl-loading {
  padding: 26px 0; text-align: center;
  font: 400 .95rem var(--sans); color: rgba(231, 217, 189, .6);
}

/* ---- a card -------------------------------------------------------------
   2:3, like a playing card, because a printed deck comes out of a box on
   18 January and these are the same twenty-five things. */
.sl-cell {
  position: relative;
  aspect-ratio: 2 / 3;
  display: grid; place-items: center;
  padding: 0; border: 0; background: none;
  cursor: pointer; perspective: 600px;
  -webkit-tap-highlight-color: transparent;
}
.sl-face {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  clip-path: var(--cut-s);
  transition: transform .5s var(--ease-soft), opacity .3s;
  backface-visibility: hidden;
}
.sl-back {
  background: linear-gradient(158deg, rgba(24, 71, 82, .95), rgba(11, 38, 46, .95));
  border: 1px solid rgba(231, 217, 189, .22);
  box-shadow: inset 0 0 0 1px rgba(230, 163, 62, .08), 0 6px 16px rgba(2, 10, 12, .45);
}
.sl-cell:hover .sl-back { border-color: rgba(230, 163, 62, .55); }
.sl-glyph {
  color: var(--gold); opacity: .82;
  display: grid; place-items: center;
  width: 58%; max-width: 30px;
}
.sl-glyph svg { width: 100%; height: auto; display: block; stroke: currentColor; fill: none; stroke-width: 1.6; }
.sl-glyph .ch { font: 700 1.05rem var(--serif); line-height: 1; }
.sl-num {
  position: absolute; left: 0; right: 0; bottom: 5px;
  text-align: center;
  font: 600 .48rem var(--sans); letter-spacing: .12em;
  color: rgba(231, 217, 189, .38);
}

/* Face up: paper. The most important state in the room. */
.sl-cell.taken .sl-back { opacity: 0; transform: rotateY(180deg); }
.sl-up {
  opacity: 0; transform: rotateY(-180deg);
  background: var(--paper); color: var(--paper-ink);
  box-shadow: 0 6px 18px rgba(2, 10, 12, .5);
  padding: 5px 3px; align-content: center; gap: 3px;
}
.sl-cell.taken .sl-up { opacity: 1; transform: none; }
.sl-up .who {
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  overflow: hidden; background: rgba(28, 48, 56, .1);
}
.sl-up .who img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.sl-up .nm {
  font: 700 .43rem var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--paper-mid); text-align: center;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%;
}

/* Not dealt yet (rolling release). A card nobody can reach must not look like
   one you failed to take: no glyph, no numeral, no hairline — an empty place
   setting rather than a locked door. */
.sl-cell.held { cursor: default; }
.sl-cell.held .sl-back {
  background: rgba(9, 32, 39, .5);
  border-style: dashed; border-color: rgba(231, 217, 189, .1);
  box-shadow: none;
}
.sl-cell.held .sl-glyph, .sl-cell.held .sl-num { opacity: 0; }

/* Yours, for the rest of the lead-up. Five months is a long time to remember
   what you spent it on. */
.sl-cell.mine .sl-up { box-shadow: 0 0 0 2px var(--gold), 0 6px 18px rgba(2, 10, 12, .5); }

/* Nothing left to spend: the table goes quiet rather than inviting taps. */
.sala-spent .sl-cell:not(.taken) .sl-back { opacity: .55; }
.sala-spent .sl-cell:not(.taken) { cursor: default; }

/* ---- the state strip ---------------------------------------------------- */
.sl-strip {
  display: flex; align-items: stretch; gap: 12px;
  margin: 26px 0 0; padding: 14px 16px;
  background: rgba(13, 39, 47, .62);
  border: 1px solid rgba(231, 217, 189, .2);
  clip-path: var(--cut-s);
  backdrop-filter: blur(9px);
}
.sl-strip .pick { flex: 1; min-width: 0; }
.sl-strip .k {
  display: block;
  font: 600 .58rem var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(231, 217, 189, .5);
}
.sl-strip .v {
  font: 700 1.02rem var(--serif); color: var(--bone);
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sl-strip .v.gold { color: var(--gold); }
.sl-strip .count { text-align: right; border-left: 1px solid rgba(231, 217, 189, .14); padding-left: 12px; }
.sl-strip .count b { font: 700 1.5rem var(--serif); color: var(--bone); display: block; line-height: 1; }
.sl-strip .count span {
  font: 600 .55rem var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(231, 217, 189, .5);
}

.sl-unlock {
  margin: 14px 0 0; padding: 13px 15px;
  border-left: 2px solid var(--gold);
  background: rgba(230, 163, 62, .07);
  font: 400 .9rem/1.55 var(--sans); color: rgba(231, 217, 189, .86);
}
.sl-unlock b { color: var(--gold); font-weight: 700; }

/* ---- the ledger ---------------------------------------------------------
   The table is the picture; this is the reading. At 55px a card cannot say
   what it was, and who did what to whom is the actual drama. */
.sl-ledger { margin: 34px 0 0; }
.sl-ledger h3 {
  font: italic 700 1.3rem var(--serif); color: var(--bone);
  display: flex; align-items: baseline; gap: 10px;
}
.sl-ledger h3 .th { font: 400 1rem var(--thai); color: var(--gold); }
.sl-ledger ol { list-style: none; margin: 8px 0 0; padding: 0; }
.sl-ledger li {
  display: grid; grid-template-columns: 34px 1fr auto;
  column-gap: 12px; align-items: baseline;
  padding: 13px 0; border-top: 1px solid rgba(231, 217, 189, .12);
}
.sl-ledger li:first-child { border-top: 0; }
.sl-av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: rgba(231, 217, 189, .08); }
.sl-av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.sl-ev { font: 400 .95rem/1.45 var(--sans); color: var(--sand); }
.sl-ev b { font-weight: 700; color: var(--bone); }
.sl-ev .card { font: italic 700 1rem var(--serif); color: var(--gold); }
.sl-ev .cn { opacity: .6; }
.sl-when {
  font: 600 .72rem var(--sans); font-variant-numeric: tabular-nums;
  letter-spacing: .06em; color: rgba(231, 217, 189, .45); white-space: nowrap;
}
.sl-ledger .empty { font: 400 .93rem/1.6 var(--sans); color: rgba(231, 217, 189, .6); padding: 14px 0; }

/* ---- the sheet ----------------------------------------------------------
   Where the one irreversible decision on this site is made, so it says so
   twice and asks twice. */
.sl-scrim {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(4, 12, 15, .74); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.sl-scrim.open { opacity: 1; pointer-events: auto; }
.sl-sheet {
  position: fixed; z-index: 130; left: 0; right: 0; bottom: 0;
  max-width: 560px; margin: 0 auto;
  padding: 26px 22px calc(26px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #12333c, #0b262e);
  border-top: 1px solid rgba(230, 163, 62, .5);
  transform: translateY(102%);
  transition: transform .42s var(--ease-soft);
  max-height: 88dvh; overflow-y: auto;
}
.sl-sheet.open { transform: none; }
.sl-sheet .cat {
  display: flex; align-items: center; gap: 10px;
  font: 600 .6rem var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(231, 217, 189, .55);
}
.sl-sheet .cat .sl-glyph { width: 20px; }
.sl-sheet h4 { margin: 10px 0 0; font: 700 1.85rem/1.1 var(--serif); color: var(--bone); }
.sl-sheet .eff { margin: 12px 0 0; font: 400 1.05rem/1.55 var(--serif); color: var(--sand); }
.sl-sheet .warn {
  margin: 18px 0 0; padding: 12px 14px;
  background: rgba(212, 85, 58, .12);
  border-left: 2px solid var(--chili);
  font: 400 .88rem/1.5 var(--sans); color: rgba(231, 217, 189, .84);
}
.sl-sheet .push-prev {
  margin: 18px 0 0; padding: 13px 14px;
  background: rgba(231, 217, 189, .07);
  border: 1px dashed rgba(231, 217, 189, .22);
  clip-path: var(--cut-s);
}
.sl-sheet .push-prev .k {
  font: 600 .55rem var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(231, 217, 189, .45);
}
.sl-sheet .push-prev p { margin: 6px 0 0; font: 400 .95rem/1.45 var(--sans); color: var(--sand); }
.sl-err { margin: 14px 0 0; font: 400 .92rem/1.5 var(--sans); color: var(--chili); }

.sl-cta {
  display: block; width: 100%;
  margin: 20px 0 0; padding: 15px 18px;
  background: var(--gold); color: #0c2126;
  border: 0; clip-path: var(--cut-s); cursor: pointer;
  font: 700 .82rem var(--sans); letter-spacing: .16em; text-transform: uppercase;
}
.sl-cta[disabled] { opacity: .4; cursor: default; }
.sl-cta.ghost {
  background: none; color: rgba(231, 217, 189, .6);
  border: 1px solid rgba(231, 217, 189, .22); margin-top: 10px;
}

.sl-targets { margin: 16px 0 0; }
.sl-targets .k {
  font: 600 .58rem var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(231, 217, 189, .5);
}
.sl-tg { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.sl-tg button {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 11px 6px 6px;
  background: none; border: 1px solid rgba(231, 217, 189, .2);
  clip-path: var(--cut-s); cursor: pointer;
  font: 600 .78rem var(--sans); color: rgba(231, 217, 189, .8);
}
.sl-tg button img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; }
.sl-tg button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: rgba(230, 163, 62, .1); }

@media (min-width: 620px) {
  .sl-table { padding: 26px 24px 24px; }
}