/* The player cards page. Loaded AFTER /assets/site.css: the nav, the footer,
   the body and the colour tokens (--bg, --fg, --accent... light AND dark)
   are the site's -- this sheet only adds the cards' own pieces, under class
   names the site does not use.
   Page-only change (HTML/CSS/JS, no new API field): .\publish-site.ps1
   ships it without a deploy. */

@font-face {
  font-family: 'EASSCard';
  src: url('fonts/DejaVuSans.ttf') format('truetype');
  font-weight: normal;
  font-display: block;
}
@font-face {
  font-family: 'EASSCard';
  src: url('fonts/DejaVuSans-Bold.ttf') format('truetype');
  font-weight: bold;
  font-display: block;
}

.cards-wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

.cards-head { padding: 40px 0 22px; border-bottom: 1px solid var(--line); }
.cards-head h1 { margin: 0; font-size: clamp(30px, 4vw, 42px); line-height: 1.1; letter-spacing: -0.02em; }
.cards-sub { margin: 8px 0 0; color: var(--fg-dim); }
.cards-note { margin: 10px 0 0; color: var(--fg-dim); font-size: 14px; max-width: 70ch; }

.controls {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  padding: 20px 0 6px;
}
#q {
  flex: 1 1 240px; min-width: 0;
  background: var(--bg-elev); color: var(--fg);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; font: inherit; font-size: 15px;
}
#q:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--line); background: var(--bg-elev); color: var(--fg);
  border-radius: 999px; padding: 5px 11px; font: 600 13px system-ui, sans-serif;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
/* Picked = the site's accent (Oct 20), like your card's outline. */
.chip[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.chip .dot { width: 10px; height: 10px; border-radius: 50%; }
.chip[aria-pressed="true"] .dot { box-shadow: 0 0 0 2px var(--bg); }

.sort { color: var(--fg-dim); font-size: 13px; display: inline-flex; gap: 8px; align-items: center; }
.sort select {
  background: var(--bg-elev); color: var(--fg); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 8px; font: inherit;
}

.count { color: var(--fg-dim); font-size: 13px; margin: 6px 0 14px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
  padding-bottom: 48px;
}
.tile {
  all: unset; cursor: pointer; display: block;
  border-radius: 14px;
  transition: transform .18s ease, filter .18s ease;
  content-visibility: auto;
  contain-intrinsic-size: 180px 252px;
}
.tile:hover { transform: translateY(-4px) rotate(-.6deg); filter: drop-shadow(0 12px 20px rgba(0,0,0,.45)); }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* A click flips the tile where it is (Oct 19); a double click opens it. */
.tile { touch-action: manipulation; perspective: 1000px; }
.tile .card-svg { transition: transform .16s ease-in; }
.tile.turning .card-svg { transform: rotateY(90deg); }
.tile.loading { cursor: progress; }
.tile.loading .card-svg { opacity: .55; transition: opacity .2s; }
.card-svg { display: block; width: 100%; height: auto; }

.empty { color: var(--fg-dim); grid-column: 1 / -1; padding: 40px 0; text-align: center; }

dialog {
  border: none; padding: 0; background: transparent; color: #e6edf3;
  max-width: 100vw; max-height: 100vh; overflow: visible;
}
dialog::backdrop { background: rgba(5, 7, 10, .85); backdrop-filter: blur(4px); }
.stage { display: flex; align-items: center; gap: 12px; }
.flip {
  width: min(420px, 78vw, calc((100vh - 120px) * 600 / 840));
  perspective: 1400px;
}
.flip .card-svg { transition: transform .16s ease-in; transform-origin: 50% 50%; }
.flip.turning .card-svg { transform: rotateY(90deg); }
.nav-btn, .close {
  all: unset; cursor: pointer; color: #e6edf3;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 30px; line-height: 1;
  background: rgba(255,255,255,.08);
}
.nav-btn:hover, .close:hover { background: rgba(255,255,255,.18); }
.close { position: fixed; top: 16px; right: 16px; }
/* The viewer's refresh (Oct 19): beside the close, spins while it loads. */
.close.refresh { right: 70px; font-size: 24px; }
.close.refresh:disabled { cursor: default; opacity: .45; }
.close.refresh.loading { animation: spin .8s linear infinite; opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
/* The faces (Oct 19, up to ten with the premium ones): a list beside the
   card, like Discord's select menu; on a narrow screen, one row under the
   card that scrolls sideways. */
.viewer-body { display: flex; flex-direction: column; align-items: center; }
.faces {
  display: flex; gap: 6px; margin-top: 14px; max-width: 94vw; position: relative;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding: 2px;
}
.faces::-webkit-scrollbar { display: none; }
.face-tab {
  all: unset; box-sizing: border-box; cursor: pointer; flex: none; scroll-snap-align: center;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font: 600 14px system-ui, sans-serif; color: #e6edf3;
  padding: 8px 14px; border-radius: 10px; background: #131a22; border: 1px solid #24303c;
}
.face-tab:hover { background: #1b2430; }
.face-tab:focus-visible { outline: 2px solid #4cc2ff; outline-offset: 2px; }
/* The viewer is always dark: the dark theme's accent, hard-coded. */
.face-tab[aria-selected="true"] { background: #4cc2ff; color: #0b0f14; border-color: #4cc2ff; }
.face-tab .face-icon { width: 1.3em; text-align: center; }
/* Your own card's challenge button, under the card (Oct 21). */
.flip-col { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.card-act { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.card-act[hidden] { display: none; }
.card-act-btn {
  all: unset; cursor: pointer; box-sizing: border-box;
  font: 600 15px system-ui, sans-serif; color: #0b0f14; background: #4cc2ff;
  padding: 10px 20px; border-radius: 10px;
}
.card-act-btn.danger { background: #e5484d; color: #fff; }
.card-act-btn:focus-visible { outline: 2px solid #e6edf3; outline-offset: 2px; }
.card-act-btn:disabled { opacity: .55; cursor: default; }
.card-act-note { font: 13px system-ui, sans-serif; color: #9aa7b4; text-align: center; max-width: 380px; }
@media (min-width: 900px) {
  .viewer-body { flex-direction: row; align-items: center; gap: 18px; }
  .faces { flex-direction: column; margin-top: 0; overflow: visible; width: 190px; gap: 4px; }
  .face-tab { width: 100%; }
}

/* Phase C: your card — the bar, your tile, the consent box. */
.mine {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-elev); font-size: 14px; max-width: 70ch;
}
.mine button {
  border: 1px solid var(--line); background: var(--bg); color: var(--fg);
  border-radius: 8px; padding: 6px 12px; font: 600 13px system-ui, sans-serif; cursor: pointer;
}
.mine .mine-on { background: #5865F2; border-color: #5865F2; color: #fff; }
.mine .mine-off:hover { border-color: var(--warn); }
.mine .mine-link { font-weight: 600; }
.tile.tile-me { outline: 3px solid var(--accent); outline-offset: 3px; }

dialog.consent {
  background: var(--bg-elev); color: var(--fg); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px 24px; max-width: min(520px, 92vw); line-height: 1.5;
}
dialog.consent h2 { margin: 0 0 10px; font-size: 22px; }
dialog.consent p { margin: 0 0 12px; font-size: 14px; color: var(--fg-dim); }
dialog.consent p strong { color: var(--fg); }
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.consent-actions button {
  border-radius: 8px; padding: 9px 14px; font: 700 14px system-ui, sans-serif; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); color: var(--fg);
}
.consent-actions .consent-yes { background: #248046; border-color: #248046; color: #fff; }

@media (max-width: 560px) {
  .cards-wrap { padding: 0 16px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tile { contain-intrinsic-size: auto 240px; }
  .nav-btn { display: none; }
  .flip { width: min(92vw, calc((100vh - 120px) * 600 / 840)); }
}