/* ==========================================================================
   SoRRY MoM — Pure Realistic Card Game
   Strictly faithful to DesignAssets/colours.md:
   - Purple (background/main): #621a51
   - Yellow (accent and logo): #fdff8b
   - Official SVGs: SoRRY MoM logo - Copie.svg, SoRRY MoM card.svg
   - 100% focused on a realistic physical card table and deck you can flip.
   ========================================================================== */

:root {
  /* Brand Colors from colours.md */
  --purple-main: #621a51;
  --purple-deep: #4d0e3e;
  --purple-dark: #2a0522;
  --purple-obsidian: #12010f;
  --yellow-main: #fdff8b;
  --yellow-gold: #e2d180;
  --gold-trim: #d4af37;

  /* Cardstock & Table */
  --card-white: #fbf9f5;
  --card-cream: #f3efe6;
  --card-border: #dcd3c1;
  --card-edge: #eae3d2;
  --ink-primary: #1c0618;
  --ink-muted: #6e5567;

  /* Typography */
  --font-brand: 'Bricolage Grotesque', Georgia, serif;
  --font-statement: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Azeret Mono', monospace;

  /* Easing */
  --ease-spring: cubic-bezier(0.18, 0.9, 0.2, 1.05);
  --ease-smooth: cubic-bezier(0.2, 0.8, 0.25, 1);
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--purple-obsidian);
  color: var(--card-white);
  font-family: var(--font-statement);
  font-size: 16px;
}

/* ==========================================================================
   TABLE VIEWPORT: AMBIENT PLUM VELVET CARD TABLE (ZERO RASTER BACKGROUNDS)
   ========================================================================== */
.table-viewport {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  padding: 1.2rem 1.8rem;
  /* Procedural rich velvet card table: Deep purple halo with warm overhead light */
  background:
    radial-gradient(ellipse 70% 60% at 50% 46%, rgba(98, 26, 81, 0.65) 0%, rgba(45, 8, 38, 0.85) 55%, #10010d 100%),
    linear-gradient(145deg, #1f031b 0%, #2e0728 50%, #140112 100%);
}

.table-ambient-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(253, 255, 139, 0.08) 0%, transparent 70%);
  z-index: 1;
}

/* Subtle Ink Splatters in Table Background */
.table-ink-splatters {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.ink-splatter {
  position: absolute;
  pointer-events: none;
}

.splatter-tl {
  top: 6%;
  left: 3%;
  width: clamp(160px, 22vw, 280px);
  height: auto;
  color: rgba(8, 0, 7, 0.55);
  transform: rotate(-14deg);
}

.splatter-br {
  bottom: 4%;
  right: 3%;
  width: clamp(180px, 24vw, 310px);
  height: auto;
  color: rgba(8, 0, 7, 0.52);
  transform: rotate(12deg);
}

.splatter-tr {
  top: 14%;
  right: 7%;
  width: clamp(120px, 16vw, 210px);
  height: auto;
  color: rgba(253, 255, 139, 0.045);
  transform: rotate(22deg);
}

.splatter-bl {
  bottom: 12%;
  left: 7%;
  width: clamp(130px, 17vw, 220px);
  height: auto;
  color: rgba(253, 255, 139, 0.04);
  transform: rotate(-20deg);
}

/* ==========================================================================
   TABLE HEADER: OFFICIAL VECTOR LOGO + CATEGORY NAV + CLEAN SHUFFLE
   ========================================================================== */
.table-header {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1060px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 0.5rem;
}

.table-header-top {
  display: contents;
}

/* Brand badge housing the official SVG logo */
.brand-badge {
  order: 1;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
}

.brand-logo-svg {
  height: 92px;
  width: auto;
  max-width: 220px;
  display: block;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.55));
  transition: transform 0.2s ease, filter 0.2s ease;
}
.brand-logo-svg:hover {
  transform: scale(1.04);
  filter: drop-shadow(0 3px 12px rgba(253, 255, 139, 0.35));
}
/* Ensure handwritten logo letter paths shine in brand yellow */
.brand-logo-svg path:not([class]) {
  fill: var(--yellow-main);
  transition: fill 0.2s ease;
}
.brand-logo-svg .lg_brand_1 {
  stroke: var(--yellow-main);
}
.brand-logo-svg:hover path:not([class]) {
  fill: #ffffff;
}

/* Category Filter Bar */
.category-nav {
  order: 2;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(30, 4, 25, 0.7);
  padding: 0.3rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(253, 255, 139, 0.25);
  backdrop-filter: blur(8px);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.category-nav::-webkit-scrollbar {
  display: none;
}
.cat-pill {
  appearance: none;
  background: transparent;
  border: none;
  color: #dfcbd8;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.18s ease;
}
.cat-pill:hover {
  color: var(--yellow-main);
}
.cat-pill.active {
  background: var(--purple-main);
  color: var(--yellow-main);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(253, 255, 139, 0.35);
}

/* Clean text-only shuffle button (no emojis) */
.header-actions {
  order: 3;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-shuffle {
  appearance: none;
  background: rgba(45, 8, 38, 0.85);
  border: 1.5px solid rgba(253, 255, 139, 0.35);
  color: var(--yellow-main);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.42rem 1.15rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.btn-shuffle:hover {
  background: rgba(85, 18, 70, 0.95);
  border-color: var(--yellow-main);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}
.btn-shuffle:active {
  transform: translateY(1px);
}

/* ==========================================================================
   MAIN ARENA: PHYSICAL DECK + ACTIVE PLAYING CARD
   ========================================================================== */
.table-card-arena {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 980px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding: 1rem 0;
}

/* ==========================================================================
   1. PHYSICAL 3D DRAW DECK (SHRINKS PROGRESSIVELY AS CARDS ARE TAKEN)
   ========================================================================== */
.deck-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

.draw-deck-3d {
  --deck-ratio: 1;
  position: relative;
  width: 200px;
  height: 276px;
  cursor: pointer;
  transform-style: preserve-3d;
  transform: rotateZ(-4deg) rotateX(10deg);
  transition: transform 0.3s var(--ease-spring);
}
.draw-deck-3d:hover {
  transform: rotateZ(-3deg) rotateX(8deg) translateY(-5px);
}
.draw-deck-3d:active {
  transform: rotateZ(-4deg) rotateX(10deg) translateY(2px);
}

/* Empty felt mat outline */
.deck-mat-outline {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 2px dashed rgba(253, 255, 139, 0.25);
  background: rgba(25, 4, 22, 0.45);
  pointer-events: none;
  transform: translateZ(-25px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.deck-mat-outline::after {
  content: 'SHUFFLE';
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(253, 255, 139, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.draw-deck-3d.empty .deck-mat-outline::after {
  opacity: 1;
}

/* Dynamic Shadow: shrinks in spread, blur, and opacity as cards are drawn */
.deck-shadow {
  position: absolute;
  inset: -10px -15px -20px -8px;
  border-radius: 16px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 75%);
  filter: blur(calc(5px + var(--deck-ratio) * 12px));
  opacity: calc(0.25 + var(--deck-ratio) * 0.55);
  transform: translateZ(calc(var(--deck-ratio) * -22px)) scale(calc(0.88 + var(--deck-ratio) * 0.12));
  pointer-events: none;
  transition: transform 0.35s ease, filter 0.35s ease, opacity 0.35s ease;
}

/* 6 Physical Deck Edge Layers: progressively compress to zero thickness */
.deck-edge-layer {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: repeating-linear-gradient(135deg, #f7f1e6 0px, #f7f1e6 2px, #d8ceb9 2px, #d8ceb9 4px);
  border: 1px solid rgba(80, 50, 60, 0.4);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.deck-edge-layer.l1 { transform: translate3d(calc(var(--deck-ratio) * 2px), calc(var(--deck-ratio) * 3px), calc(var(--deck-ratio) * -3px)); }
.deck-edge-layer.l2 { transform: translate3d(calc(var(--deck-ratio) * 4px), calc(var(--deck-ratio) * 6px), calc(var(--deck-ratio) * -6px)); }
.deck-edge-layer.l3 { transform: translate3d(calc(var(--deck-ratio) * 6px), calc(var(--deck-ratio) * 9px), calc(var(--deck-ratio) * -9px)); }
.deck-edge-layer.l4 { transform: translate3d(calc(var(--deck-ratio) * 8px), calc(var(--deck-ratio) * 12px), calc(var(--deck-ratio) * -12px)); }
.deck-edge-layer.l5 { transform: translate3d(calc(var(--deck-ratio) * 10px), calc(var(--deck-ratio) * 15px), calc(var(--deck-ratio) * -15px)); }
.deck-edge-layer.l6 { transform: translate3d(calc(var(--deck-ratio) * 12px), calc(var(--deck-ratio) * 18px), calc(var(--deck-ratio) * -18px)); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.75); }

/* Top card on the deck: descends physically as cards are taken */
.deck-top-card {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--yellow-main);
  background: var(--purple-main);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
  transform: translateZ(calc(var(--deck-ratio) * 20px));
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.deck-top-card svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Empty deck state */
.draw-deck-3d.empty .deck-top-card {
  opacity: 0;
  pointer-events: none;
}
.draw-deck-3d.empty .deck-edge-layer {
  opacity: 0;
}
.draw-deck-3d.empty .deck-counter-badge {
  border-color: rgba(253, 255, 139, 0.4);
  color: rgba(253, 255, 139, 0.6);
}

.deck-counter-badge {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(18, 1, 15, 0.95);
  color: var(--yellow-main);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1.5px solid var(--yellow-main);
  white-space: nowrap;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.deck-prompt-hint {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: #c9a6bf;
  letter-spacing: 0.12em;
  opacity: 0.8;
}

/* ==========================================================================
   2. ACTIVE PLAYING CARD (ANIMATED FLIP UPON DRAW + MANUAL 3D FLIP)
   ========================================================================== */
.card-play-area {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.active-card-3d-wrap {
  --deal-x: -260px;
  --deal-y: 0px;
  position: relative;
  width: clamp(280px, 30vw, 320px);
  height: clamp(390px, 42vw, 445px);
  perspective: 1200px;
}

/* Smooth GPU-accelerated flight from deck position to table center */
.active-card-3d-wrap.dealing-flight {
  animation: dealFlight 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform;
}

@keyframes dealFlight {
  0% {
    transform: translate3d(var(--deal-x), var(--deal-y), 0) rotateZ(-4deg) scale(0.65);
  }
  100% {
    transform: translate3d(0, 0, 0) rotateZ(0deg) scale(1);
  }
}

.playing-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: transform 0.55s var(--ease-smooth), box-shadow 0.55s ease;
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.65),
    0 6px 14px rgba(0, 0, 0, 0.35);
}
.playing-card.no-transition {
  transition: none !important;
}
.playing-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 30px 65px rgba(0, 0, 0, 0.75),
    0 8px 18px rgba(0, 0, 0, 0.45);
}

/* Manual 3D Flipped State (Shows Back Face when closed) */
.playing-card.flipped {
  transform: rotateY(180deg);
}
.playing-card.flipped:hover {
  transform: rotateY(180deg) translateY(-4px);
}

/* Card Faces */
.card-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.card-front {
  transform: rotateY(0deg);
  background:
    radial-gradient(circle at 50% 0%, rgba(253, 255, 139, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--card-white) 40%, #f6f1e5 100%);
  border: 2px solid #e3dac8;
  padding: 1.6rem 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), inset 0 0 20px rgba(98, 26, 81, 0.04);
}

/* Inner decorative card border */
.card-front::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(98, 26, 81, 0.2);
  border-radius: 8px;
  pointer-events: none;
}

/* Card Header */
.card-front-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px dashed rgba(98, 26, 81, 0.2);
  padding-bottom: 0.75rem;
}

.card-mini-brand {
  font-family: var(--font-brand);
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--purple-main);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.card-category-badge {
  background: var(--purple-main);
  color: var(--yellow-main);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 6px rgba(98, 26, 81, 0.3);
}

/* Main Confession Prompt Statement */
.card-front-body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 0.6rem;
}

.card-statement-text {
  font-family: var(--font-statement);
  font-size: clamp(1.4rem, 2.3vw, 1.85rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink-primary);
  text-align: center;
  letter-spacing: -0.02em;
}

/* Card Footer */
.card-front-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px dashed rgba(98, 26, 81, 0.2);
  padding-top: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ink-muted);
}

.card-ref-number {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.card-flip-prompt {
  color: var(--purple-main);
  font-weight: 800;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   BACK FACE: OFFICIAL VECTOR ARTWORK (EDGE-TO-EDGE)
   ========================================================================== */
.card-back {
  position: absolute;
  inset: 0;
  background: var(--purple-main);
  transform: rotateY(180deg);
  border: 2px solid var(--yellow-main);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.card-back-art {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.card-back-art svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Specular Gold Foil Hover Sheen */
.card-foil-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(253, 255, 139, 0.25) 48%, rgba(253, 255, 139, 0.6) 52%, transparent 65%);
  transform: translateX(-100%);
  transition: transform 0.7s ease;
}
.playing-card:hover .card-foil-sheen {
  transform: translateX(100%);
}

/* ==========================================================================
   SUBTLE TABLE FOOTER & SHORTCUTS (NO EXTRA BUTTONS)
   ========================================================================== */
.table-footer {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 980px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0 0.2rem;
}

.shortcuts-legend {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #c9a6bf;
  letter-spacing: 0.04em;
}
.shortcuts-mobile {
  display: none;
}
.legend-sep {
  opacity: 0.5;
}
.shortcuts-legend kbd {
  background: rgba(30, 4, 25, 0.85);
  border: 1px solid rgba(253, 255, 139, 0.35);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  color: var(--yellow-main);
  font-weight: 700;
}

/* Disable sticky hover lift on touchscreens */
@media (hover: none) {
  .playing-card:hover,
  .playing-card.flipped:hover,
  .draw-deck-3d:hover,
  .btn-shuffle:hover,
  .brand-logo-svg:hover {
    transform: none;
  }
  .playing-card.flipped:hover {
    transform: rotateY(180deg);
  }
  .draw-deck-3d:hover {
    transform: rotateZ(-4deg) rotateX(10deg);
  }
}

/* ==========================================================================
   RESPONSIVE DESIGN FOR MOBILE & SMALLER SCREENS
   ========================================================================== */
@media (max-width: 768px) {
  .table-viewport {
    height: 100vh;
    height: 100dvh;
    padding: max(0.65rem, env(safe-area-inset-top)) 0.85rem max(0.7rem, env(safe-area-inset-bottom));
    justify-content: space-between;
  }
  .table-header {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-bottom: 0.15rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .table-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .brand-logo-svg {
    height: 58px;
    max-width: 145px;
  }
  .btn-shuffle {
    min-height: 40px;
    padding: 0.45rem 1.15rem;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .category-nav {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 0.25rem 1.4rem 0.25rem 0.35rem;
    gap: 0.25rem;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  .cat-pill {
    min-height: 36px;
    padding: 0.4rem 0.85rem;
    font-size: 0.72rem;
    scroll-snap-align: start;
  }
  .table-card-arena {
    flex-direction: column;
    gap: 1.5rem;
    padding: 0.35rem 0 0.25rem;
    flex: 1;
    justify-content: center;
    min-height: 0;
  }
  .deck-area {
    gap: 0;
  }
  .draw-deck-3d {
    width: 98px;
    height: 135px;
    transform: rotateZ(-3deg) rotateX(8deg);
  }
  .draw-deck-3d .deck-edge-layer.l1 { transform: translate3d(calc(var(--deck-ratio) * 1px), calc(var(--deck-ratio) * 1px), calc(var(--deck-ratio) * -2px)); }
  .draw-deck-3d .deck-edge-layer.l2 { transform: translate3d(calc(var(--deck-ratio) * 2px), calc(var(--deck-ratio) * 2px), calc(var(--deck-ratio) * -4px)); }
  .draw-deck-3d .deck-edge-layer.l3 { transform: translate3d(calc(var(--deck-ratio) * 3px), calc(var(--deck-ratio) * 3px), calc(var(--deck-ratio) * -6px)); }
  .draw-deck-3d .deck-edge-layer.l4 { transform: translate3d(calc(var(--deck-ratio) * 4px), calc(var(--deck-ratio) * 4px), calc(var(--deck-ratio) * -8px)); }
  .draw-deck-3d .deck-edge-layer.l5 { transform: translate3d(calc(var(--deck-ratio) * 5px), calc(var(--deck-ratio) * 5px), calc(var(--deck-ratio) * -10px)); }
  .draw-deck-3d .deck-edge-layer.l6 { transform: translate3d(calc(var(--deck-ratio) * 6px), calc(var(--deck-ratio) * 6px), calc(var(--deck-ratio) * -12px)); }
  .deck-counter-badge {
    font-size: 0.6875rem;
    padding: 0.22rem 0.6rem;
    bottom: -14px;
  }
  .deck-prompt-hint {
    display: none;
  }
  .active-card-3d-wrap {
    height: min(375px, 45dvh);
    width: auto;
    aspect-ratio: 190 / 262;
    max-width: 78vw;
  }
  .card-front {
    padding: 1.25rem;
  }
  .card-statement-text {
    font-size: clamp(1.18rem, 4.4vw, 1.5rem);
  }
  .table-footer {
    padding: 0.25rem 0 0;
  }
  .shortcuts-desktop {
    display: none;
  }
  .shortcuts-mobile {
    display: flex;
    justify-content: center;
    font-size: 0.75rem;
    gap: 0.55rem;
    opacity: 0.85;
  }
}

/* Extra-compact height phones (e.g. iPhone SE 375x667) */
@media (max-width: 768px) and (max-height: 700px) {
  .brand-logo-svg {
    height: 48px;
  }
  .table-card-arena {
    gap: 1.15rem;
  }
  .draw-deck-3d {
    width: 82px;
    height: 113px;
  }
  .active-card-3d-wrap {
    height: min(310px, 43dvh);
  }
}