/* ============================================================
   TAROT FRANÇAIS — Dark Mystical Gamer Theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Exo+2:wght@400;600;700;800;900&display=swap');

/* ─── CSS Variables ─── */
:root {
  --felt: #130826;
  --felt-light: #1c0f38;
  --felt-mid: #180b30;
  --gold: #c8a550;
  --gold-l: #f0d080;
  --gold-d: #9a7a30;
  --purple: #9b30ff;
  --purple-d: #5a1a99;
  --purple-l: #bf6fff;
  --card-w: 68px;
  --card-h: 99px;
  --card-r: 7px;
  --ease-out: cubic-bezier(0.22,1,0.36,1);
}

/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #080410;
  font-family: 'Exo 2', sans-serif;
  color: #e8e0f0;
  user-select: none;
}

/* ============================================================
   INTRO SCREEN
   ============================================================ */

#tIntro {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, #1e0545 0%, #0c021e 50%, #080410 100%);
  z-index: 100;
  overflow: hidden;
}

/* Animated stars */
.t-stars {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 40% 8%, rgba(255,255,255,.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 28%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 12%, rgba(255,255,255,.8) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 85% 25%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 55%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 50% 60%, rgba(255,255,255,.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 75%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 50%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 65%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 5%  80%, rgba(255,255,255,.8) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 20% 90%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 88%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 92%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 82%, rgba(255,255,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 88%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 45%, rgba(200,165,255,.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 42%, rgba(200,165,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 38%, rgba(200,165,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 10%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 3%  40%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 18%, rgba(255,255,255,.6) 0%, transparent 100%);
  background-size: 100% 100%;
  animation: starsDrift 60s linear infinite;
}

@keyframes starsDrift {
  0%   { transform: translateY(0) translateX(0); }
  25%  { transform: translateY(-8px) translateX(4px); }
  50%  { transform: translateY(-14px) translateX(-3px); }
  75%  { transform: translateY(-6px) translateX(6px); }
  100% { transform: translateY(0) translateX(0); }
}

.t-intro-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}

/* Floating suit symbols */
.t-suit-float {
  position: absolute; font-size: 2.2rem;
  opacity: 0.18; pointer-events: none;
  animation: suitFloat 6s ease-in-out infinite;
}
.t-suit-s { top: -200px; left: -180px; animation-delay: 0s;   color: #e8e0f0; }
.t-suit-h { top: -160px; left:  -60px; animation-delay: 1.2s; color: #ff5577; }
.t-suit-d { top: -170px; left:   60px; animation-delay: 2.4s; color: #ff5577; }
.t-suit-c { top: -190px; left:  180px; animation-delay: 3.6s; color: #e8e0f0; }
.t-suit-m { top: -230px; left:    0px; animation-delay: 0.8s; color: var(--purple-l); font-size: 2.6rem; opacity: 0.22; }

@keyframes suitFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-18px) rotate(8deg); }
  66%       { transform: translateY(-8px) rotate(-5deg); }
}

.t-intro-title {
  font-family: 'Cinzel', serif;
  font-size: 4rem; font-weight: 900;
  letter-spacing: .25em;
  color: var(--gold-l);
  text-shadow:
    0 0 20px rgba(200,165,80,.8),
    0 0 40px rgba(200,165,80,.4),
    0 0 80px rgba(155,48,255,.3);
  animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(200,165,80,.8), 0 0 40px rgba(200,165,80,.4), 0 0 80px rgba(155,48,255,.3); }
  50%       { text-shadow: 0 0 30px rgba(200,165,80,1),  0 0 60px rgba(200,165,80,.6), 0 0 120px rgba(155,48,255,.5); }
}

.t-intro-sub {
  font-family: 'Exo 2', sans-serif;
  font-size: 1.05rem; font-weight: 600;
  color: rgba(220,210,240,.7);
  letter-spacing: .08em;
}

.t-intro-rules-summary {
  display: flex; gap: 20px;
  font-size: .85rem; color: rgba(200,165,80,.8);
  font-weight: 600; letter-spacing: .04em;
}
.t-intro-rules-summary span { display: flex; align-items: center; gap: 6px; }

.t-intro-btns {
  display: flex; gap: 16px; margin-top: 12px;
}

/* ─── Common buttons ─── */
.t-btn-primary {
  padding: 12px 32px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-l) 50%, var(--gold) 100%);
  border: none; border-radius: 8px;
  color: #1a0e05; font-family: 'Exo 2', sans-serif;
  font-size: .95rem; font-weight: 800; letter-spacing: .06em;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(200,165,80,.4), inset 0 1px 0 rgba(255,255,255,.25);
  transition: all .2s var(--ease-out);
}
.t-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(200,165,80,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
.t-btn-primary:active { transform: translateY(0); }
.t-btn-primary:disabled {
  opacity: .45; cursor: not-allowed; transform: none;
  box-shadow: 0 2px 8px rgba(200,165,80,.2);
}

.t-btn-secondary {
  padding: 12px 32px;
  background: rgba(155,48,255,.15);
  border: 1.5px solid rgba(155,48,255,.5); border-radius: 8px;
  color: var(--purple-l); font-family: 'Exo 2', sans-serif;
  font-size: .95rem; font-weight: 700; letter-spacing: .06em;
  cursor: pointer;
  transition: all .2s var(--ease-out);
}
.t-btn-secondary:hover {
  background: rgba(155,48,255,.25);
  border-color: var(--purple-l);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(155,48,255,.3);
}
.t-btn-secondary:active { transform: translateY(0); }

/* ============================================================
   RULES OVERLAY
   ============================================================ */

#tRulesOverlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(4,1,12,.85);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
}

.t-rules-box {
  background: linear-gradient(160deg, #1a0838 0%, #0e0420 100%);
  border: 1.5px solid rgba(200,165,80,.35);
  border-radius: 16px;
  padding: 36px 40px;
  max-width: 580px; width: 92%;
  max-height: 85vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 40px rgba(155,48,255,.15);
  display: flex; flex-direction: column; gap: 20px;
  scrollbar-width: thin; scrollbar-color: rgba(200,165,80,.3) transparent;
}
.t-rules-box::-webkit-scrollbar { width: 6px; }
.t-rules-box::-webkit-scrollbar-thumb { background: rgba(200,165,80,.3); border-radius: 3px; }

.t-rules-title {
  font-family: 'Cinzel', serif; font-size: 1.8rem; font-weight: 700;
  color: var(--gold-l); text-align: center;
  text-shadow: 0 0 20px rgba(200,165,80,.5);
}

.t-rules-body { display: flex; flex-direction: column; gap: 16px; }

.t-rules-section h3 {
  font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 700;
  color: var(--gold); margin-bottom: 6px;
}
.t-rules-section p, .t-rules-section ul {
  font-size: .88rem; color: rgba(220,210,240,.85);
  line-height: 1.6;
}
.t-rules-section ul { padding-left: 18px; }
.t-rules-section li { margin-bottom: 4px; }
.t-rules-section strong { color: var(--gold-l); }

/* ============================================================
   GAME SCREEN
   ============================================================ */

#tGame {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  background: #080410;
}

/* ─── Top bar ─── */
#tTopBar {
  height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  background: rgba(10,4,24,.95);
  border-bottom: 1.5px solid rgba(200,165,80,.2);
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
}

.t-score-block {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 90px;
}
.t-score-label {
  font-size: .65rem; font-weight: 700; letter-spacing: .08em;
  color: rgba(200,165,80,.6); text-transform: uppercase;
}
.t-score-val {
  font-family: 'Cinzel', serif; font-size: 1.15rem; font-weight: 700;
  color: var(--gold-l);
  text-shadow: 0 0 10px rgba(200,165,80,.4);
}

.t-top-center {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.t-contract-display {
  font-family: 'Cinzel', serif; font-size: .85rem; font-weight: 700;
  color: var(--purple-l);
  text-shadow: 0 0 10px rgba(155,48,255,.5);
}
.t-round-info {
  font-size: .7rem; font-weight: 600; letter-spacing: .06em;
  color: rgba(220,210,240,.5);
}

.t-menu-btn {
  width: 36px; height: 36px;
  background: rgba(155,48,255,.12);
  border: 1px solid rgba(155,48,255,.3);
  border-radius: 8px; color: var(--purple-l);
  font-size: 1rem; cursor: pointer;
  transition: all .18s;
}
.t-menu-btn:hover { background: rgba(155,48,255,.25); }

/* ─── Table ─── */
#tTable {
  flex: 1; display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse 85% 85% at 50% 50%, #180a30 0%, #0e051e 60%, #080410 100%);
  position: relative; overflow: hidden;
}

/* Star texture on felt */
#tTable::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 8%  20%, rgba(255,255,255,.06) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 45%, rgba(255,255,255,.04) 0%, transparent 100%),
    radial-gradient(1px 1px at 38% 12%, rgba(255,255,255,.07) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 68%, rgba(255,255,255,.05) 0%, transparent 100%),
    radial-gradient(1px 1px at 67% 32%, rgba(255,255,255,.06) 0%, transparent 100%),
    radial-gradient(1px 1px at 81% 78%, rgba(255,255,255,.04) 0%, transparent 100%),
    radial-gradient(1px 1px at 91% 15%, rgba(255,255,255,.07) 0%, transparent 100%),
    radial-gradient(1px 1px at 14% 85%, rgba(255,255,255,.05) 0%, transparent 100%),
    radial-gradient(1px 1px at 46% 92%, rgba(200,165,255,.04) 0%, transparent 100%),
    radial-gradient(1px 1px at 74% 55%, rgba(200,165,255,.03) 0%, transparent 100%);
  opacity: 1;
}

/* ─── Player areas ─── */
.t-player-top {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 0 0;
}
.t-player-bottom {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0 0 6px;
}
.t-middle-row {
  flex: 1; display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px;
  min-height: 0;
}
.t-player-side {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; flex-shrink: 0; width: 90px;
}

.t-player-label {
  font-size: .65rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(200,165,80,.5);
  padding: 2px 8px;
  background: rgba(0,0,0,.3);
  border-radius: 4px;
}
.t-player-label.t-active-player {
  color: var(--gold-l);
  background: rgba(200,165,80,.12);
  box-shadow: 0 0 8px rgba(200,165,80,.2);
}

/* ─── Hands ─── */
.t-hand { display: flex; position: relative; }

/* Bottom hand — horizontal fan */
.t-hand-bottom {
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}
.t-hand-bottom .t-card { margin-right: -20px; transition: transform .18s var(--ease-out); }
.t-hand-bottom .t-card:last-child { margin-right: 0; }
.t-hand-bottom .t-card:hover { transform: translateY(-16px) !important; z-index: 10; }

/* Top hand — face down horizontal */
.t-hand-top {
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}
.t-hand-top .t-card { margin-right: -20px; }
.t-hand-top .t-card:last-child { margin-right: 0; }

/* Side hands — vertical stack */
.t-hand-left, .t-hand-right {
  flex-direction: column;
  align-items: center;
}
.t-hand-left .t-card, .t-hand-right .t-card { margin-bottom: -62px; }
.t-hand-left .t-card:last-child, .t-hand-right .t-card:last-child { margin-bottom: 0; }

/* ─── Playable / non-playable ─── */
.t-playable {
  cursor: pointer;
}
.t-playable:hover {
  transform: translateY(-16px) !important;
  z-index: 15;
  filter: drop-shadow(0 0 8px rgba(200,165,80,.7));
}
.t-not-playable {
  filter: brightness(0.55);
  cursor: not-allowed;
}

/* ============================================================
   CARDS
   ============================================================ */

.t-card {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--card-r);
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.55);
  animation: cardDeal .22s var(--ease-out) both;
  transition: box-shadow .18s;
}

@keyframes cardDeal {
  from { opacity: 0; transform: scale(.75) translateY(12px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}

/* ─── Card back ─── */
.t-card-back {
  position: absolute; inset: 0;
  border-radius: var(--card-r);
  background: linear-gradient(145deg, #1a1060 0%, #0e0840 50%, #080628 100%);
  border: 1.5px solid rgba(140,80,255,.25);
  overflow: hidden;
}
.t-card-back::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg,  rgba(200,165,80,.055) 0px, rgba(200,165,80,.055) 1px, transparent 1px, transparent 8px),
    repeating-linear-gradient(-45deg, rgba(200,165,80,.055) 0px, rgba(200,165,80,.055) 1px, transparent 1px, transparent 8px);
}
.t-card-back::after {
  content: '⚜';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  color: rgba(200,165,80,.13);
}

/* ─── Card face ─── */
.t-card-face {
  position: absolute; inset: 0;
  border-radius: var(--card-r);
  background: linear-gradient(160deg, #fefcf5 0%, #f5f0e0 100%);
  border: 1.5px solid rgba(0,0,0,.12);
  overflow: hidden;
}

/* ─── Corner indices ─── */
.t-corner-tl {
  position: absolute; top: 4px; left: 5px;
  display: flex; flex-direction: column; align-items: center;
  line-height: 1;
}
.t-corner-br {
  position: absolute; bottom: 4px; right: 5px;
  display: flex; flex-direction: column; align-items: center;
  line-height: 1;
  transform: rotate(180deg);
}
.t-cr-rank {
  font-family: 'Cinzel', serif; font-size: .8rem; font-weight: 700;
  color: #1a1a1a; line-height: 1;
}
.t-cr-suit { font-size: .65rem; line-height: 1; }
.t-cr-rank.t-red { color: #cc2233; }
.t-cr-suit.t-red { color: #cc2233; }

/* ─── Center of suit card ─── */
.t-card-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  line-height: 1;
  pointer-events: none;
}
.t-card-center.t-red { color: #cc2233; }
.t-card-center.t-dark { color: #1a1a1a; }

/* ─── Trump card ─── */
.t-trump .t-card-face {
  background: linear-gradient(160deg, #1a1030 0%, #110820 60%, #0e0620 100%);
  border: 1.5px solid rgba(200,165,80,.4);
  box-shadow: inset 0 0 20px rgba(100,50,200,.2);
}
.t-trump .t-card-face::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(200,165,80,.03) 0%, rgba(200,165,80,.08) 50%, rgba(200,165,80,.02) 100%);
  pointer-events: none;
}
.t-trump .t-cr-rank {
  color: var(--gold-l);
  text-shadow: 0 0 6px rgba(200,165,80,.6);
  font-size: .7rem;
}
.t-trump-roman {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cinzel', serif; font-size: 1.6rem; font-weight: 700;
  color: var(--gold-l);
  text-shadow: 0 0 12px rgba(200,165,80,.7), 0 0 24px rgba(200,165,80,.3);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: .05em;
}
.t-trump-arcana {
  position: absolute; bottom: 18px; left: 0; right: 0;
  text-align: center; font-size: 1rem;
  pointer-events: none;
}
.t-trump-label {
  position: absolute; top: 34px; left: 0; right: 0;
  text-align: center; font-size: .42rem;
  text-transform: uppercase; letter-spacing: .12em;
  color: rgba(200,165,80,.4);
  font-weight: 600; pointer-events: none;
}

/* ─── Excuse card ─── */
.t-excuse .t-card-face {
  background: linear-gradient(135deg, #1a0030 0%, #0a1050 25%, #001a20 50%, #0a2000 75%, #201000 100%);
  border: 1.5px solid rgba(200,165,80,.6);
  box-shadow:
    inset 0 0 30px rgba(150,48,255,.25),
    0 0 20px rgba(200,165,80,.15);
  animation: excuseShimmer 4s ease-in-out infinite;
}
@keyframes excuseShimmer {
  0%   { border-color: rgba(200,165,80,.6); box-shadow: inset 0 0 30px rgba(150,48,255,.25), 0 0 20px rgba(200,165,80,.15); }
  33%  { border-color: rgba(155,48,255,.8); box-shadow: inset 0 0 30px rgba(0,120,255,.2), 0 0 20px rgba(155,48,255,.25); }
  66%  { border-color: rgba(255,100,50,.7); box-shadow: inset 0 0 30px rgba(255,80,0,.15), 0 0 20px rgba(255,100,50,.2); }
  100% { border-color: rgba(200,165,80,.6); box-shadow: inset 0 0 30px rgba(150,48,255,.25), 0 0 20px rgba(200,165,80,.15); }
}

.t-excuse-label {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) translateY(-10px);
  font-family: 'Cinzel', serif; font-size: .75rem; font-weight: 700;
  color: var(--gold-l);
  text-shadow: 0 0 10px rgba(200,165,80,.8);
  letter-spacing: .12em;
  white-space: nowrap;
}
.t-excuse-icon {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) translateY(8px);
  font-size: 1.3rem;
}
.t-excuse-corner {
  font-family: 'Cinzel', serif; font-size: .55rem; font-weight: 700;
  color: var(--gold-l); text-shadow: 0 0 6px rgba(200,165,80,.6);
}

/* ─── Bout glow ─── */
.t-bout::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--card-r) + 2px);
  border: 2px solid rgba(200,165,80,.7);
  box-shadow: 0 0 12px rgba(200,165,80,.5), inset 0 0 6px rgba(200,165,80,.1);
  pointer-events: none;
  animation: boutPulse 2s ease-in-out infinite;
  z-index: 5;
}
@keyframes boutPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(200,165,80,.45), inset 0 0 5px rgba(200,165,80,.08); }
  50%       { box-shadow: 0 0 20px rgba(200,165,80,.75), inset 0 0 10px rgba(200,165,80,.18); }
}

/* ─── Trick card play animation ─── */
@keyframes trickPlay {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}
.t-trick-slot .t-card { animation: trickPlay .25s var(--ease-out) both; }

/* ============================================================
   TRICK AREA
   ============================================================ */

#tTrickArea {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; flex: 1;
}

.t-trick-zone {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.t-trick-top, .t-trick-bot {
  display: flex; justify-content: center;
}
.t-trick-mid {
  display: flex; align-items: center; gap: 2px;
}
.t-trick-dot {
  width: 8px; height: 8px;
  background: rgba(200,165,80,.25);
  border-radius: 50%;
  margin: 0 2px;
}

.t-trick-slot {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--card-r);
  border: 1.5px dashed rgba(200,165,80,.2);
  background: rgba(0,0,0,.15);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.t-trick-slot.t-has-card { border-color: transparent; background: transparent; }

.t-trick-count {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  color: rgba(200,165,80,.6); text-transform: uppercase;
  background: rgba(0,0,0,.3); border-radius: 10px; padding: 2px 10px;
}

.t-message {
  font-size: .78rem; font-weight: 600;
  color: rgba(220,200,255,.8);
  text-align: center; min-height: 20px;
  max-width: 220px; text-align: center;
}

/* ============================================================
   BID OVERLAY
   ============================================================ */

#tBidOverlay {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(0,0,0,.4);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 60px;
}

.t-bid-box {
  background: linear-gradient(160deg, #1e0848 0%, #100420 100%);
  border: 1.5px solid rgba(200,165,80,.35);
  border-radius: 16px;
  padding: 28px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  min-width: 340px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 40px rgba(155,48,255,.15);
}

.t-bid-title {
  font-family: 'Cinzel', serif; font-size: 1.5rem; font-weight: 700;
  color: var(--gold-l);
  text-shadow: 0 0 15px rgba(200,165,80,.5);
}
.t-bid-subtitle {
  font-size: .82rem; color: rgba(220,210,240,.65); letter-spacing: .04em;
}

.t-bid-btns {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; width: 100%;
}

.t-bid-btn {
  padding: 12px 10px;
  border: none; border-radius: 10px;
  font-family: 'Exo 2', sans-serif; font-size: .88rem; font-weight: 800;
  cursor: pointer; position: relative;
  transition: all .18s var(--ease-out);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  letter-spacing: .03em;
}
.t-bid-btn:hover { transform: translateY(-2px); }
.t-bid-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.t-bid-petite {
  background: rgba(200,165,80,.15);
  border: 1.5px solid rgba(200,165,80,.35);
  color: var(--gold);
}
.t-bid-petite:hover { background: rgba(200,165,80,.25); box-shadow: 0 4px 16px rgba(200,165,80,.2); }

.t-bid-garde {
  background: linear-gradient(135deg, rgba(200,165,80,.25) 0%, rgba(240,208,128,.15) 100%);
  border: 1.5px solid var(--gold);
  color: var(--gold-l);
  font-size: .92rem;
}
.t-bid-garde:hover { background: linear-gradient(135deg, rgba(200,165,80,.4) 0%, rgba(240,208,128,.25) 100%); box-shadow: 0 4px 20px rgba(200,165,80,.35); }

.t-bid-gardesans {
  background: linear-gradient(135deg, rgba(90,26,153,.4) 0%, rgba(155,48,255,.2) 100%);
  border: 1.5px solid rgba(155,48,255,.5);
  color: var(--purple-l);
}
.t-bid-gardesans:hover { background: linear-gradient(135deg, rgba(90,26,153,.6) 0%, rgba(155,48,255,.35) 100%); box-shadow: 0 4px 20px rgba(155,48,255,.3); }

.t-bid-gardecontre {
  background: linear-gradient(135deg, rgba(180,50,20,.35) 0%, rgba(255,80,30,.15) 100%);
  border: 1.5px solid rgba(220,80,40,.6);
  color: #ff8866;
}
.t-bid-gardecontre:hover { background: linear-gradient(135deg, rgba(180,50,20,.55) 0%, rgba(255,80,30,.3) 100%); box-shadow: 0 4px 20px rgba(220,80,40,.3); }

.t-bid-mult {
  font-size: .65rem; font-weight: 700;
  background: rgba(0,0,0,.3); border-radius: 6px; padding: 1px 6px;
  letter-spacing: .05em; opacity: .9;
}

.t-bid-pass {
  width: 100%; padding: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: rgba(220,210,240,.55);
  font-family: 'Exo 2', sans-serif; font-size: .85rem; font-weight: 600;
  cursor: pointer; letter-spacing: .05em;
  transition: all .18s;
}
.t-bid-pass:hover { background: rgba(255,255,255,.1); color: rgba(220,210,240,.85); }

.t-bid-info {
  font-size: .78rem; color: rgba(200,165,80,.7);
  font-style: italic; text-align: center;
}

/* ============================================================
   CHIEN OVERLAY
   ============================================================ */

#tChienOverlay {
  position: fixed; inset: 0; z-index: 160;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}

.t-chien-box {
  background: linear-gradient(160deg, #1e0848 0%, #100420 100%);
  border: 1.5px solid rgba(200,165,80,.4);
  border-radius: 16px;
  padding: 28px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 40px rgba(155,48,255,.15);
}
.t-chien-title {
  font-family: 'Cinzel', serif; font-size: 1.5rem; font-weight: 700;
  color: var(--gold-l); text-shadow: 0 0 15px rgba(200,165,80,.5);
}
.t-chien-subtitle {
  font-size: .82rem; color: rgba(200,165,80,.7); font-style: italic;
}
.t-chien-cards {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}
.t-chien-btns { display: flex; gap: 12px; }

/* ============================================================
   ECART OVERLAY
   ============================================================ */

#tEcartOverlay {
  position: fixed; inset: 0; z-index: 170;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}

.t-ecart-box {
  background: linear-gradient(160deg, #1e0848 0%, #100420 100%);
  border: 1.5px solid rgba(200,165,80,.4);
  border-radius: 16px;
  padding: 24px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: 90vw; width: 780px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 40px rgba(155,48,255,.15);
  scrollbar-width: thin; scrollbar-color: rgba(200,165,80,.3) transparent;
}
.t-ecart-box::-webkit-scrollbar { width: 6px; }
.t-ecart-box::-webkit-scrollbar-thumb { background: rgba(200,165,80,.3); border-radius: 3px; }

.t-ecart-title {
  font-family: 'Cinzel', serif; font-size: 1.4rem; font-weight: 700;
  color: var(--gold-l); text-shadow: 0 0 15px rgba(200,165,80,.5);
}
.t-ecart-subtitle {
  font-size: .8rem; color: rgba(220,210,240,.65); text-align: center;
}
.t-ecart-count {
  font-size: .85rem; font-weight: 700;
  color: var(--gold); letter-spacing: .04em;
}

.t-ecart-cards {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}

.t-ecart-wrapper {
  position: relative; cursor: pointer;
}
.t-ecart-wrapper .t-card {
  transition: transform .15s var(--ease-out), box-shadow .15s;
}
.t-ecart-wrapper:hover .t-card { transform: translateY(-8px); }
.t-ecart-wrapper.t-ecart-selected .t-card {
  transform: translateY(-10px);
  box-shadow: 0 0 16px rgba(200,165,80,.7), 0 6px 16px rgba(0,0,0,.5);
}
.t-ecart-wrapper.t-ecart-selected::after {
  content: '✓';
  position: absolute; top: -6px; right: -6px; z-index: 20;
  width: 18px; height: 18px;
  background: var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 900; color: #1a0e05;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.t-ecart-wrapper.t-ecart-invalid .t-card {
  filter: brightness(.5) saturate(.5);
  cursor: not-allowed;
}
.t-ecart-wrapper.t-ecart-invalid:hover .t-card {
  transform: none;
  box-shadow: 0 0 8px rgba(255,60,60,.4);
}

/* ============================================================
   ROUND RESULT
   ============================================================ */

#tRoundResult {
  position: fixed; inset: 0; z-index: 180;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
}

.t-result-box {
  background: linear-gradient(160deg, #1e0848 0%, #0e0424 100%);
  border: 1.5px solid rgba(200,165,80,.4);
  border-radius: 20px;
  padding: 36px 44px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  min-width: 340px;
  box-shadow: 0 24px 70px rgba(0,0,0,.7), 0 0 50px rgba(155,48,255,.2);
  animation: resultPop .35s var(--ease-out) both;
}
@keyframes resultPop {
  from { opacity: 0; transform: scale(.85) translateY(20px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}

.t-result-icon { font-size: 3rem; animation: iconBounce .5s var(--ease-out) .2s both; }
@keyframes iconBounce {
  from { transform: scale(0) rotate(-20deg); }
  to   { transform: scale(1) rotate(0deg); }
}

.t-result-title {
  font-family: 'Cinzel', serif; font-size: 1.6rem; font-weight: 700;
  text-align: center;
}
.t-result-title.t-win { color: var(--gold-l); text-shadow: 0 0 20px rgba(200,165,80,.6); }
.t-result-title.t-lose { color: #ff6666; text-shadow: 0 0 20px rgba(255,60,60,.4); }

.t-result-detail {
  font-size: .82rem; color: rgba(220,210,240,.7);
  text-align: center; line-height: 1.7; max-width: 300px;
}

.t-result-scores {
  display: flex; align-items: center; gap: 20px;
  background: rgba(0,0,0,.25); border-radius: 12px; padding: 14px 24px;
}
.t-result-score-block { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.t-result-score-label { font-size: .68rem; font-weight: 700; letter-spacing: .08em; color: rgba(200,165,80,.6); text-transform: uppercase; }
.t-result-score-delta { font-family: 'Cinzel', serif; font-size: 1.4rem; font-weight: 700; }
.t-result-score-delta.t-pos { color: var(--gold-l); }
.t-result-score-delta.t-neg { color: #ff6666; }
.t-result-score-total { font-size: .75rem; color: rgba(220,210,240,.55); }
.t-result-vs {
  font-family: 'Cinzel', serif; font-size: .85rem; font-weight: 700;
  color: rgba(220,210,240,.3); letter-spacing: .1em;
}

/* ============================================================
   GAME OVER
   ============================================================ */

#tGameOver {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
}

.t-gameover-box {
  background: linear-gradient(160deg, #1e0848 0%, #0e0424 100%);
  border: 1.5px solid rgba(200,165,80,.45);
  border-radius: 20px;
  padding: 44px 52px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  min-width: 360px;
  box-shadow: 0 24px 80px rgba(0,0,0,.8), 0 0 60px rgba(155,48,255,.2);
  animation: resultPop .4s var(--ease-out) both;
}
.t-gameover-icon { font-size: 4rem; }
.t-gameover-title {
  font-family: 'Cinzel', serif; font-size: 2rem; font-weight: 900;
  color: var(--gold-l); text-shadow: 0 0 25px rgba(200,165,80,.7);
  text-align: center;
}
.t-gameover-sub {
  font-size: .9rem; color: rgba(220,210,240,.65); text-align: center;
}
.t-gameover-scores {
  background: rgba(0,0,0,.25); border-radius: 12px; padding: 14px 24px;
  width: 100%; font-size: .85rem; color: rgba(220,210,240,.75);
  display: flex; flex-direction: column; gap: 6px;
}
.t-gameover-score-row {
  display: flex; justify-content: space-between; align-items: center;
}
.t-gameover-score-row .t-name { font-weight: 700; }
.t-gameover-score-row .t-pts {
  font-family: 'Cinzel', serif; font-weight: 700; color: var(--gold-l);
}
.t-gameover-btns { display: flex; gap: 12px; margin-top: 8px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
  :root {
    --card-w: 50px;
    --card-h: 73px;
    --card-r: 5px;
  }

  .t-intro-title { font-size: 2.6rem; }
  .t-intro-rules-summary { flex-direction: column; gap: 6px; font-size: .78rem; }
  .t-intro-btns { flex-direction: column; gap: 10px; }

  .t-trump-roman { font-size: 1.1rem; }
  .t-trump-arcana { font-size: .75rem; bottom: 12px; }

  .t-bid-btns { grid-template-columns: 1fr; }
  .t-bid-box { min-width: 90vw; padding: 20px 18px; }

  .t-ecart-box { padding: 16px 12px; }
  .t-ecart-cards { gap: 4px; }

  .t-result-box { padding: 24px 20px; min-width: 0; width: 92vw; }
  .t-gameover-box { padding: 28px 20px; min-width: 0; width: 92vw; }

  .t-hand-bottom .t-card { margin-right: -26px; }
  .t-hand-left  .t-card,
  .t-hand-right .t-card { margin-bottom: -52px; }
  .t-hand-top   .t-card { margin-right: -26px; }

  #tTopBar { padding: 0 8px; }
  .t-score-block { min-width: 64px; }
  .t-score-val { font-size: .95rem; }

  .t-rules-box { padding: 24px 18px; }
  .t-rules-title { font-size: 1.35rem; }
}