/* Structure of the table: the grid deal, the header pieces, and the printed panels.
   Materials, colour, and type live in card-skin.css. */
:root {
  --card-scale: 1;
  --card-w: min(calc(300px * var(--card-scale)), calc(100vw - 64px));
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-title: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; font: 14px/1.6 var(--font-sans); }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, .card-wrapper:focus-visible { outline: 2px solid #c6cbce; outline-offset: 5px; }

.stage-container { max-width: 1760px; margin: auto; padding: 48px 50px 100px; }
.cards-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--card-w), 100%), 1fr));
  gap: 64px 40px;
  justify-items: center;
  align-items: start;
}
.card-slot { width: var(--card-w); aspect-ratio: 1 / 1.42; pointer-events: none; }
.card-table-scene { position: absolute; left: 0; top: 0; pointer-events: none; }
.deck-error { grid-column: 1 / -1; }

/* The header is a deal of small physical pieces. Hidden slots hold their resting places. */
.table-header {
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  min-height: 32px;
  pointer-events: none;
}
.table-identity, .table-controls { display: contents; }
.title-card-slot, .card-wrapper.title-card { width: 180px; height: 32px; flex-shrink: 0; }
.table-utilities { display: flex; align-items: center; gap: 10px; margin-left: auto; pointer-events: auto; }
.table-token, .size-token { height: 32px; user-select: none; -webkit-user-select: none; }
.table-token { display: inline-flex; align-items: center; padding: 0 8px; white-space: nowrap; }
.size-token { position: relative; z-index: 5; width: 145px; padding: 0 15px; display: flex; align-items: center; pointer-events: auto; }
.size-token input { appearance: none; width: 100%; height: 4px; cursor: ew-resize; }
.sound-token { width: 34px; padding: 6px; justify-content: center; }
.sound-token svg { width: 20px; height: 20px; display: block; }

/* Controls join the card simulation: the visible piece is absolutely placed by the table. */
.control-slot { visibility: hidden; pointer-events: none; }
.control-card { position: absolute; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.control-card > .table-token, .control-card > .size-token { width: 100%; margin: 0; cursor: grab; touch-action: none; }
.control-card .sound-token { display: flex; align-items: center; justify-content: center; }
.control-card.is-dragging, .control-card.is-dragging > * { cursor: grabbing; outline: none; }

/* Every part of a card drags as one object; exposed table space keeps native scrolling. */
.card-wrapper {
  width: var(--card-w);
  aspect-ratio: 1 / 1.42;
  position: relative;
  perspective: 1200px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.card-wrapper.title-card { position: absolute; top: 0; left: 0; aspect-ratio: auto; }
.card-wrapper.is-hovered { z-index: 2; }
.card-wrapper.is-dragging { cursor: grabbing; z-index: 3; outline: none; }
.playing-card, .playing-card * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

.playing-card {
  width: 100%;
  height: 100%;
  padding: 5.5%;
  display: flex;
  flex-direction: column;
  position: relative;
  pointer-events: none;
}

/* Printed matter on the front. The name is the focal point: one centred masthead,
   holding the space an emblem will later share. */
.tc-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: calc(var(--card-w) * .13); margin-bottom: 4%; }
.tc-title { text-wrap: balance; overflow-wrap: anywhere; }
.card-front > .tc-header {
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(var(--card-w) * .42);
  margin-bottom: 7%;
}
.card-front > .tc-text-box { flex: 0 0 auto; }
.tc-type-line { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 5%; }
.tc-text-box { flex: 1; display: flex; align-items: flex-start; margin-top: 4%; padding-bottom: 4%; }
.tc-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tc-stack { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-card-num { white-space: nowrap; }

/* The reverse carries the longer account and the one outgoing action. */
.card-back { overflow: hidden; text-align: left; pointer-events: auto; }
.card-back .tc-text-box { flex: 1; min-height: 0; overflow: hidden; }
.dossier-specs { display: grid; grid-template-columns: 1fr; gap: 11px; padding: 4px 0 0; }
.spec-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.spec-val { overflow-wrap: anywhere; }
/* The outgoing action is printed on both faces, above the footer. */
.card-actions { display: flex; align-items: center; justify-content: flex-start; padding: 14px 0 12px; }
.btn-launch { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.card-back .tc-footer { margin-top: auto; }

.site-footer { max-width: 1760px; margin: auto; padding: 18px 30px 38px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; text-transform: uppercase; }
.footer-inner p { white-space: nowrap; }
.footer-links { display: flex; gap: 22px; }

@media (max-width: 760px) {
  .stage-container { padding: 44px 32px 65px; }
  .cards-grid { gap: 46px 30px; }
  .table-header { gap: 18px 12px; }
  .title-card-slot, .card-wrapper.title-card { width: 154px; }
  .size-token { width: 100px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }