/* Two physical faces, turning at the same position and size on the table. */
.card-table-scene { z-index: 10; }
.table-token, .size-token, button { user-select: none; -webkit-user-select: none; }
.card-turner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 736ms cubic-bezier(.22,.72,.18,1); }
.card-wrapper.is-flipped .card-turner { transform: rotateY(180deg); }
.card-side { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(.15px); }
.card-side-back { transform: rotateY(180deg) translateZ(.15px); }
.card-layout { width: 300px; height: 426px; --card-w: 300px; transform: scale(var(--face-scale, 1)); transform-origin: 0 0; }
.card-side .playing-card { pointer-events: auto; cursor: grab; }
.card-wrapper.is-dragging .playing-card { cursor: grabbing; transform: none; }
.title-card .card-layout { width: 100%; height: 100%; transform: none; }
.card-side-back .title-face { background: var(--grain), #b5b4aa; color: #333738; }
.card-side-back .title-face p, .card-side-back .title-email { color: #333738; }

/* A paler reverse makes turning the card visible without changing its material. */
.card-back.photo-card {
  --card-w: 300px; padding: 12px; overflow: hidden; user-select: none;
}
.card-back-content { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 0; }
.card-back.photo-card .card-photo-space { flex: 1 0 0; min-height: 0; }
.card-back.photo-card .tc-information { padding: 12px; margin: 0; background: var(--grain), #b5b4aa; border: 0; color: #333738; }
.card-back.photo-card .tc-information .tc-header { padding: 0 0 7px; margin: 0 0 7px; }
.card-back.photo-card .tc-title { font-size: 16px; line-height: 1.3; color: #303638; letter-spacing: .08em; }
.card-back.photo-card.palette-gold .tc-title { color: #625535; }
.card-back.photo-card .tc-type-line { color: #565b5a; font-size: 8px; }
.card-back.photo-card .tc-text-box { padding: 9px 0; margin: 0; }
.card-back.photo-card .dossier-description { color: #34393a; font-size: 12px; line-height: 1.5; margin: 0; }
.card-back.photo-card .dossier-specs { gap: 10px; padding: 8px 0 10px; }
.card-back.photo-card .spec-item { gap: 3px; }
.card-back.photo-card .spec-label { color: #59605e; font-size: 7px; }
.card-back.photo-card .spec-val { color: #34393a; font-size: 9px; line-height: 1.4; }
.card-back.photo-card .tc-footer { padding-top: 4px; margin: 0; font-size: 7.5px; color: #505956; }
.card-back.photo-card .tc-card-num { color: #505956; }
.card-back.photo-card .dossier-actions { justify-content: flex-end; padding: 0; margin-top: 9px; }
.card-back.photo-card .btn-launch { padding: 3px 0; font-size: 10px; gap: 8px; cursor: pointer; }
.card-back.photo-card .btn-launch:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 4px; }
.card-side-back a { -webkit-user-drag: none; }

.table-utilities { display: flex; align-items: center; padding: 0; gap: 10px; pointer-events: auto; }
.table-utilities .size-token { margin-right: 0; }
.sound-token svg { width: 20px; height: 20px; display: block; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sound-token[aria-pressed="false"] .sound-waves { display: none; }
.sound-token[aria-pressed="true"] .sound-muted { display: none; }
@media (max-width: 760px) { .table-utilities { margin-left: auto; } }
@media (prefers-reduced-motion: reduce) { .card-turner { transition: none; } }