@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Source+Sans+3:wght@400;600;700&display=swap");

/* TOKENS */
:root {
  --paper: #eceef1;
  --paper-deep: #d8dce2;
  --ink: #20395f;
  --ink-soft: #324f78;
  --line: rgba(32, 57, 95, 0.2);
  --cta-1: #2d84ea;
  --cta-2: #155dc4;
  --wood-1: #7d4a24;
  --wood-2: #8a542b;
  --wood-3: #663d1f;
  --felt-1: #1a5c42;
  --felt-2: #0f3d2b;
  --felt-3: #082a1d;
  --rail-1: #5c3310;
  --rail-2: #3d2008;
  --room-bg-1: #0c1c14;
  --room-bg-2: #080e09;
  --card-face: #fffef7;
  --card-back-1: #1a3a8f;
  --card-back-2: #0e245c;
  --card-red: #c0282a;
  --card-black: #111827;
  --hud-bg: rgba(6, 14, 10, 0.82);
  --hud-border: rgba(255, 255, 255, 0.07);
  --hud-text: rgba(255, 255, 255, 0.88);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body { font-family: "Source Sans 3","Segoe UI",sans-serif; color: var(--ink); }
.hidden { display: none !important; }

/* LANDING */
#landingView {
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,0.65), transparent 33%),
    radial-gradient(circle at 80% 6%,  rgba(255,255,255,0.5),  transparent 34%),
    linear-gradient(180deg, var(--paper), var(--paper-deep));
  min-height: 100vh;
}

.shell { max-width: 1040px; margin: 0 auto; padding: 36px 20px 42px; }

.hero { text-align: center; animation: rise-in 550ms ease-out both; }
.hero-kicker { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.brand { margin: 2px 0 4px; font-family: "Bree Serif",serif; font-size: clamp(2.25rem,5vw,4rem); letter-spacing: 0.01em; }
.tagline { margin: 0; font-family: "Bree Serif",serif; font-size: clamp(1.1rem,2vw,1.7rem); color: #2a456f; }
.support-copy { margin: 12px auto 0; max-width: 720px; font-size: 1.2rem; color: #3d5270; }

.name-group {
  display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 10px;
}
.name-label {
  font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.02em;
}
.name-row {
  display: flex; align-items: center; gap: 8px;
}
.name-input {
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(32,57,95,0.25);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  width: 220px;
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}
.name-input::placeholder { color: rgba(32,57,95,0.4); }
.name-input:focus {
  border-color: var(--cta-1);
  box-shadow: 0 0 0 3px rgba(45,132,234,0.18);
}
.name-saved {
  font-size: 0.82rem; font-weight: 600; color: #2a9d5c;
  opacity: 0; transition: opacity 250ms;
  white-space: nowrap;
}
.name-saved.visible { opacity: 1; }

.actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; align-items: center; }
.create-group {
  display: flex; align-items: center; gap: 6px;
  background: rgba(32,57,95,0.08); border: 1px solid rgba(32,57,95,0.2);
  border-radius: 12px; padding: 5px 10px;
}
button.count-btn {
  background: rgba(32,57,95,0.1); border: 1px solid rgba(32,57,95,0.25);
  color: var(--ink); border-radius: 7px; width: 28px; height: 30px;
  font-size: 1.1rem; line-height: 1; cursor: pointer; font-family: inherit;
  transition: background 130ms; padding: 0;
}
button.count-btn:hover { background: rgba(32,57,95,0.2); transform: none; box-shadow: none; }
.count-val { min-width: 22px; text-align: center; font-size: 1rem; font-weight: 700; color: var(--ink); }
.count-label { font-size: 0.8rem; color: var(--ink-soft); margin-left: 2px; white-space: nowrap; }
.status { margin-top: 10px; font-size: 0.9rem; color: rgba(255,255,255,0.55); min-height: 1.2em; transition: color 0.2s; }
.status.status--error {
  color: #ff6b6b;
  background: rgba(255,80,80,0.12);
  border: 1px solid rgba(255,80,80,0.35);
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 600;
  animation: status-shake 0.35s ease;
}
.status.status--info { color: rgba(255,255,255,0.55); background: none; border: none; padding: 0; font-weight: normal; }

@keyframes status-shake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-6px); }
  40%  { transform: translateX(6px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

button {
  border-radius: 12px;
  border: 1px solid transparent;
  background: #ffffff;
  color: var(--ink);
  padding: 10px 18px;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
button:not(.card):hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(15,35,65,0.14); }
.cta { background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); color: #fff; border-color: rgba(255,255,255,0.34); }
button.ghost { background: rgba(255,255,255,0.7); color: var(--ink); border: 1px solid var(--line); }

.showcase { margin-top: 26px; animation: rise-in 650ms ease-out both; }
.showcase-table {
  position: relative; height: 360px; border-radius: 10px;
  border: 1px solid rgba(55,31,12,0.28); overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), transparent 50%),
    repeating-linear-gradient(0deg,
      var(--wood-1) 0px, var(--wood-1) 14px,
      var(--wood-2) 14px, var(--wood-2) 28px,
      var(--wood-3) 28px, var(--wood-3) 42px);
  box-shadow: 0 12px 34px rgba(24,23,25,0.24);
}

.show-card {
  position: absolute; width: 76px; height: 108px;
  margin-left: -38px; margin-top: -54px;
  border-radius: 8px; border: 1px solid rgba(0,0,0,0.18);
  display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2);
}
.show-card.up { background: var(--card-face); color: var(--card-black); }
.show-card.up.red { color: var(--card-red); }
.show-card .sc-tl { position: absolute; top: 4px; left: 5px; font-size: 0.65rem; line-height: 1.1; font-weight: 700; text-align: center; }
.show-card .sc-c { font-size: 1.7rem; }
.show-card.down {
  background:
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.08) 0px, rgba(255,255,255,0.08) 2px, transparent 2px, transparent 6px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.08) 0px, rgba(255,255,255,0.08) 2px, transparent 2px, transparent 6px),
    linear-gradient(145deg, var(--card-back-1), var(--card-back-2));
}

.mist { position: absolute; border-radius: 999px; background: rgba(236,236,236,0.48); filter: blur(3px); animation: drift 5.8s ease-in-out infinite; }
.mist-1 { width: 76px; height: 20px; left: 63%; top: 57%; }
.mist-2 { width: 52px; height: 14px; left: 69%; top: 62%; animation-delay: 320ms; }

.info-block { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; }
.info-block h2, .start-block h2 { margin: 0; font-family: "Bree Serif",serif; font-size: clamp(1.8rem,3vw,2.2rem); }
.steps-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.step { padding: 8px; }
.step-icon { width: 44px; height: 44px; margin: 0 auto; border-radius: 999px; display: grid; place-items: center; font-weight: 700; color: #17407b; border: 1px solid rgba(23,64,123,0.28); background: rgba(255,255,255,0.8); }
.step h3 { margin: 10px 0 4px; font-family: "Bree Serif",serif; font-size: 1.35rem; color: #22426f; }
.step p { margin: 0; color: #3f5678; }
.why-block { max-width: 720px; margin-left: auto; margin-right: auto; }
.why-list { margin: 18px auto 0; display: inline-block; text-align: left; font-size: 1.35rem; line-height: 1.7; color: #28456d; }
.start-block { margin-top: 30px; padding-top: 24px; text-align: center; border-top: 1px solid var(--line); }
.start-block p { font-family: "Bree Serif",serif; font-size: 1.35rem; color: #2f4b72; }
.start-block .cta { min-width: 220px; font-size: 1.45rem; font-family: "Bree Serif",serif; }
.powered-by { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); text-align: center; }
.power-kicker { margin: 0; color: #4e6688; }
.power-brand { margin: 2px 0 4px; font-family: "Bree Serif",serif; font-size: 2.4rem; color: #1f3a63; }
.power-copy { margin: 0; font-family: "Bree Serif",serif; color: #3c5679; }

/* TABLE VIEW */
#tableView {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(18,52,34,0.75), transparent 70%),
    radial-gradient(ellipse at 80% 80%, rgba(12,36,22,0.5),  transparent 55%),
    linear-gradient(180deg, var(--room-bg-1), var(--room-bg-2));
  animation: room-enter 400ms cubic-bezier(0.22,1,0.36,1) both;
}

/* HUD */
.t-hud {
  display: flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 16px;
  background: var(--hud-bg); border-bottom: 1px solid var(--hud-border);
  backdrop-filter: blur(6px); flex-shrink: 0; z-index: 10;
}
.t-hud-brand { font-family: "Bree Serif",serif; font-size: 1.15rem; color: var(--hud-text); white-space: nowrap; margin-right: 8px; }
.t-hud-center { flex: 1; display: flex; justify-content: center; }
.t-seats { display: flex; gap: 6px; align-items: center; }
.t-seat-pip {
  width: 28px; height: 28px; border-radius: 999px;
  display: grid; place-items: center; font-size: 0.65rem; font-weight: 700;
  color: #000; opacity: 0.3; transition: opacity 200ms, transform 200ms;
  border: 2px solid transparent;
}
.t-seat-pip.active { opacity: 1; border-color: rgba(255,255,255,0.4); transform: scale(1.08); }
.t-hud-right { display: flex; align-items: center; gap: 10px; color: var(--hud-text); font-size: 0.85rem; white-space: nowrap; }
.t-expiry-label { opacity: 0.5; }
.t-expiry-value { font-family: "Bree Serif",serif; font-size: 1rem; }
.t-expiry-value.warn { color: #ffb740; animation: pulse 900ms ease-in-out infinite alternate; }
.t-hud-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); color: var(--hud-text); border-radius: 8px; padding: 5px 10px; font-size: 0.9rem; cursor: pointer; transition: background 140ms; }
.t-hud-btn:hover { background: rgba(255,255,255,0.18); transform: none; box-shadow: none; }

/* Room arena */
.t-room { flex: 1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }

/* Seat zone labels at table edge */
.t-seat-zone {
  position: absolute; display: flex; align-items: center; justify-content: center;
  z-index: 2; pointer-events: none;
}
.t-seat-zone::before {
  content: attr(data-label);
  font-size: 0.7rem; font-weight: 600;
  color: rgba(255,255,255,0.3);
  background: rgba(0,0,0,0.3);
  padding: 3px 9px; border-radius: 20px;
  white-space: nowrap; letter-spacing: 0.04em;
  border: 1px solid rgba(255,255,255,0.08);
  transition: color 200ms, background 200ms, border-color 200ms;
}
.t-seat-zone.empty::before {
  color: rgba(255,255,255,0.22);
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.18);
  font-style: italic;
  letter-spacing: 0.02em;
}
.t-seat-zone.occupied::before {
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.55);
  border-color: rgba(255,255,255,0.2);
}
/* Active turn — golden glow on seat label */
.t-seat-zone.active-turn::before {
  color: #f5c84a;
  background: rgba(245,200,74,0.18);
  border-color: rgba(245,200,74,0.7);
  box-shadow: 0 0 10px 2px rgba(245,200,74,0.35);
  animation: turn-pulse 1.2s ease-in-out infinite alternate;
}
/* Active turn — golden ring on HUD pip */
.t-seat-pip.active-turn {
  border-color: #f5c84a !important;
  box-shadow: 0 0 0 2px rgba(245,200,74,0.5), 0 0 8px 2px rgba(245,200,74,0.4);
  animation: turn-pulse 1.2s ease-in-out infinite alternate;
}
/* Your-turn — subtle amber edge on the table arena */
.t-room.your-turn {
  box-shadow: inset 0 0 0 3px rgba(245,200,74,0.5), inset 0 0 40px rgba(245,200,74,0.1);
}
@keyframes turn-pulse {
  from { opacity: 0.75; }
  to   { opacity: 1; }
}
/* Pass Turn button — idle and active states */
.t-tool-btn--turn { color: rgba(255,255,255,0.7); }
.t-tool-btn--turn-active {
  color: #f5c84a;
  border-color: rgba(245,200,74,0.6);
  background: rgba(245,200,74,0.12);
}

.t-sz-bottom    { bottom: 4%;  left: 50%; transform: translateX(-50%); }
.t-sz-top       { top: 4%;     left: 50%; transform: translateX(-50%); }
.t-sz-left      { left: 3%;    top: 50%;  transform: translateY(-50%); }
.t-sz-right     { right: 3%;   top: 50%;  transform: translateY(-50%); }
.t-sz-top-left  { top: 11%;    left: 7%;  }
.t-sz-top-right { top: 11%;    right: 7%; }

/* Oval felt surface */
.t-surface {
  position: absolute;
  width: 78%; height: 72%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 38% 33%, rgba(255,255,255,0.1), transparent 52%),
    radial-gradient(ellipse at 68% 72%, rgba(0,0,0,0.2), transparent 48%),
    repeating-linear-gradient(0deg,   transparent, transparent 2px, rgba(0,0,0,0.035) 2px, rgba(0,0,0,0.035) 4px),
    repeating-linear-gradient(90deg,  transparent, transparent 2px, rgba(0,0,0,0.035) 2px, rgba(0,0,0,0.035) 4px),
    linear-gradient(165deg, var(--felt-1) 0%, var(--felt-2) 55%, var(--felt-3) 100%);
  outline: 22px solid var(--rail-1);
  box-shadow:
    inset 0 0 50px rgba(0,0,0,0.45),
    0 0 0 26px var(--rail-2),
    0 20px 80px rgba(0,0,0,0.9),
    0 0 90px rgba(30,100,60,0.3);
  overflow: visible;
  touch-action: none;
  z-index: 3;
}
.t-surface::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.06); pointer-events: none;
}

/* Toolbar */
.t-toolbar {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  background: var(--hud-bg); border-top: 1px solid var(--hud-border);
  backdrop-filter: blur(6px); flex-shrink: 0; flex-wrap: wrap;
}
.t-tool-btn {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.14);
  color: var(--hud-text); border-radius: 10px; padding: 7px 14px;
  font-size: 0.9rem; font-family: inherit; font-weight: 600; cursor: pointer;
  transition: background 130ms, transform 130ms;
}
.t-tool-btn:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.t-tool-btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.t-tool-btn--outline { border-color: rgba(45,132,234,0.7); color: #6eb6f5; }
.t-tool-sep { width: 1px; height: 22px; background: rgba(255,255,255,0.12); flex-shrink: 0; }
.t-room-id-label { font-size: 0.78rem; color: rgba(255,255,255,0.4); }
.t-room-id-val { font-family: "Bree Serif",serif; font-size: 1rem; color: rgba(255,255,255,0.75); letter-spacing: 0.05em; }

/* Deal group: count stepper + deal button */
.t-deal-group {
  display: flex; align-items: center; gap: 3px;
}
.t-count-btn {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  color: var(--hud-text); border-radius: 8px; width: 26px; height: 30px;
  font-size: 1rem; line-height: 1; cursor: pointer; font-family: inherit;
  transition: background 130ms;
}
.t-count-btn:hover { background: rgba(255,255,255,0.18); }
.t-count-val {
  min-width: 22px; text-align: center; font-size: 0.9rem; font-weight: 700;
  color: var(--hud-text);
}

/* DECK PILE WIDGET */
.deck-pile {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 100px;
  z-index: 50;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.deck-pile:active { cursor: grabbing; }
.dp-layer {
  position: absolute;
  width: 72px; height: 100px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.3);
  background:
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 2px, transparent 2px, transparent 8px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 2px, transparent 2px, transparent 8px),
    linear-gradient(145deg, var(--card-back-1), var(--card-back-2));
  transition: transform 150ms, box-shadow 150ms;
}
.dp-layer-2 { top: -4px; left: -4px; opacity: 0.55; }
.dp-layer-1 { top: -2px; left: -2px; opacity: 0.75; }
.dp-layer-0 {
  top: 0; left: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
}
.dp-layer-0::after {
  content: ""; position: absolute; inset: 5px;
  border-radius: 4px; border: 1px solid rgba(255,255,255,0.12); pointer-events: none;
}
.deck-pile:hover .dp-layer-0 {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.55), 0 10px 24px rgba(0,0,0,0.6);
  transform: translateY(-3px);
}
.deck-pile:hover .dp-layer-1 { transform: translateY(-1px); }
.dp-count {
  position: absolute;
  top: -9px; right: -9px;
  background: rgba(245,200,74,0.95);
  color: #1a0f00;
  font-size: 0.68rem; font-weight: 700; line-height: 1;
  min-width: 22px; height: 22px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  pointer-events: none;
}

/* CARDS */
.card {
  position: absolute; width: 72px; height: 100px;
  border-radius: 8px; border: 1px solid rgba(0,0,0,0.22);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
  user-select: none; touch-action: none;
  transform: translate(-50%,-50%); cursor: grab; overflow: hidden;
  transition: box-shadow 100ms, left 350ms cubic-bezier(0.25,0.8,0.25,1), top 350ms cubic-bezier(0.25,0.8,0.25,1);
  /* Always above seat labels */
  isolation: isolate;
}
.card:hover  { box-shadow: 0 0 0 3px rgba(255,255,255,0.55), 0 6px 18px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3); }

/* Cards taken into a private hand — amber glow ring so only you know they're yours */
.card.held {
  box-shadow: 0 0 0 3px #f5c84a, 0 0 14px 4px rgba(245,200,74,0.55), 0 6px 18px rgba(0,0,0,0.5);
  outline: none;
}
/* Private card seen by others — subtle purple tint on the border */
.card.private:not(.held) {
  box-shadow: 0 0 0 2px #c075f5, 0 6px 18px rgba(0,0,0,0.5);
}

/* Holder tag — floats above the card, outside overflow:hidden via overflow:visible on .card.private */
.card.private { overflow: visible; }

.card-holder-tag {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(192,117,245,0.92);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  line-height: 1.5;
}
.card-holder-tag.is-mine {
  background: rgba(245,200,74,0.95);
  color: #3a2600;
}

/* ── Card context menu ────────────────────────────────── */
.card-menu {
  position: fixed;
  z-index: 9999;
  min-width: 172px;
  padding: 5px 0;
  margin: 0;
  list-style: none;
  background: rgba(20, 16, 30, 0.96);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
  user-select: none;
  animation: cm-pop 0.1s ease;
}
@keyframes cm-pop {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
.card-menu[hidden] { display: none; }

.cm-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.88);
  font-size: 0.82rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.1s;
}
.cm-item:hover { background: rgba(255,255,255,0.1); color: #fff; }
.cm-item:disabled { opacity: 0.35; cursor: default; }
.cm-item:disabled:hover { background: none; }

.cm-sep {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 4px 10px;
}
.card:active { cursor: grabbing; box-shadow: 0 0 0 2px rgba(255,255,255,0.3), 0 16px 40px rgba(0,0,0,0.7), 0 4px 8px rgba(0,0,0,0.4); }

.card.face-down {
  background:
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 2px, transparent 2px, transparent 8px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 2px, transparent 2px, transparent 8px),
    linear-gradient(145deg, var(--card-back-1), var(--card-back-2));
}
.card.face-down::after { content: ""; position: absolute; inset: 5px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.12); pointer-events: none; }

.card.face-up { background: var(--card-face); }

.card-rank-tl, .card-rank-br {
  position: absolute; font-size: 0.78rem; font-weight: 700;
  line-height: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.card-rank-tl { top: 4px; left: 5px; }
.card-rank-br { bottom: 4px; right: 5px; transform: rotate(180deg); }
.card-rank-tl .suit-pip, .card-rank-br .suit-pip { font-size: 0.62rem; }
.card-center-suit { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 1.8rem; line-height: 1; }

.card.face-up.red  .card-rank-tl,
.card.face-up.red  .card-rank-br,
.card.face-up.red  .card-center-suit { color: var(--card-red); }
.card.face-up.black .card-rank-tl,
.card.face-up.black .card-rank-br,
.card.face-up.black .card-center-suit { color: var(--card-black); }

/* ANIMATIONS */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes room-enter {
  from { opacity: 0; transform: scale(1.012); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes drift {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(8px); }
  100% { transform: translateX(0); }
}
@keyframes pulse {
  from { opacity: 1; }
  to   { opacity: 0.5; }
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .shell { padding: 24px 14px 32px; }
  .support-copy { font-size: 1.05rem; }
  .showcase-table { height: 240px; }
  .steps-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .step h3 { font-size: 1.1rem; }
  .why-list { font-size: 1.1rem; }
  .start-block .cta { font-size: 1.25rem; }

  .t-surface { width: 92%; height: 60%; outline-width: 13px; box-shadow: inset 0 0 24px rgba(0,0,0,0.35), 0 0 0 16px var(--rail-2), 0 10px 40px rgba(0,0,0,0.8); }
  .card { width: 56px; height: 80px; }
  .card-center-suit { font-size: 1.4rem; }
  .t-sz-top-left, .t-sz-top-right { display: none; }
}

@media (max-width: 600px) {
  .t-surface { width: 96%; height: 54%; }
  .t-tool-btn { padding: 6px 10px; font-size: 0.82rem; }
  .t-seat-pip { width: 22px; height: 22px; font-size: 0.55rem; }
}