/* Table de tarot. Même enveloppe @media que les feuilles de drooft_commons :
 * à garder synchronisée avec la balise <link media=...> de templates/base.html
 * (seuil 1100/1101 px). tarot-mobile.css en est la déclinaison. */
@media screen and (min-width: 1101px) {
	:root {
		--tarot-felt: #1f5d45;
		--tarot-felt-edge: #164532;
		--tarot-card: #fbf8ef;
		--tarot-red: #c0392b;
		--tarot-black: #1d1d1d;
		--tarot-trump: #24476b;
		--tarot-accent: #e66700;
		--tarot-card-w: 54px;
		--tarot-card-h: 80px;
	}

	.tarot-lobby { max-width: 760px; margin: 30px auto 60px; text-align: center; }
	.tarot-tagline { font-size: 1.1rem; opacity: 0.9; margin-bottom: 22px; }
	.tarot-lobby h2 { font-size: 1.3rem; margin-top: 30px; }
	.tarot-table-list { list-style: none; padding: 0; }
	.tarot-table-list li a {
		display: block; background: #29343f; color: #eaddc0; border-radius: 10px;
		padding: 12px 16px; margin: 8px 0; text-decoration: none; text-align: left;
	}
	.tarot-table-list li a:hover { color: #fff; background: #313e4b; }
	.tarot-empty { opacity: 0.8; }
	.tarot-rules { text-align: left; margin-top: 30px; background: #29343f; border-radius: 10px; padding: 12px 16px; }
	.tarot-rules summary { cursor: pointer; font-weight: 600; }

	.tarot-btn {
		background: #2c3a47; color: #eaddc0; border: 1px solid #4a5a69; border-radius: 8px;
		padding: 8px 16px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block;
	}
	.tarot-btn:hover:not(:disabled) { background: #354655; color: #fff; }
	.tarot-btn:disabled { opacity: 0.45; cursor: not-allowed; }
	.tarot-btn-primary { background: var(--tarot-accent); border-color: var(--tarot-accent); color: #fff; }
	.tarot-btn-primary:hover:not(:disabled) { background: #ff7a12; }
	.tarot-btn-card { padding: 4px; background: transparent; }

	.tarot-app { margin: 20px auto 50px; }
	.tarot-connecting { text-align: center; }
	.tarot-layout { display: flex; gap: 20px; align-items: flex-start; }
	.tarot-main { flex: 1; min-width: 0; }

	.tarot-status {
		display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
		background: #29343f; border-radius: 10px; padding: 10px 16px; margin-bottom: 14px;
	}
	.tarot-called { display: inline-flex; align-items: center; gap: 6px; }
	.tarot-turn { margin-left: auto; opacity: 0.85; }
	.tarot-turn.mine { color: var(--tarot-accent); font-weight: 700; opacity: 1; }

	.tarot-table {
		position: relative; height: 430px; border-radius: 210px;
		background: radial-gradient(ellipse at center, var(--tarot-felt) 0%, var(--tarot-felt-edge) 100%);
		border: 8px solid #3b2a1a; box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4);
	}
	.tarot-seat {
		position: absolute; width: 150px; background: rgba(20, 28, 36, 0.88); border-radius: 10px;
		padding: 8px 10px; font-size: 0.9rem; border: 2px solid transparent; text-align: center;
	}
	.tarot-seat.turn { border-color: var(--tarot-accent); box-shadow: 0 0 12px rgba(230, 103, 0, 0.6); }
	.tarot-seat-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.tarot-seat-info { display: flex; justify-content: space-between; opacity: 0.85; font-size: 0.82rem; }
	.tarot-seat-bid { color: var(--tarot-accent); font-weight: 700; }
	.tarot-badges { min-height: 4px; }
	.tarot-badge { display: inline-block; font-size: 0.72rem; border-radius: 6px; padding: 1px 6px; margin: 2px; font-weight: 700; }
	.tarot-badge.dealer { background: #55606b; }
	.tarot-badge.taker { background: var(--tarot-accent); color: #fff; }
	.tarot-badge.partner { background: #2e86c1; color: #fff; }

	/* Places : 0 en bas (soi), puis dans le sens du jeu, vers la droite. */
	.tarot-seat.pos-0 { bottom: -18px; left: 50%; transform: translateX(-50%); }
	.tarot-seat.pos-1 { right: -20px; top: 58%; }
	.tarot-seat.pos-2 { right: 14%; top: -18px; }
	.tarot-seat.pos-3 { left: 14%; top: -18px; }
	.tarot-seat.pos-4 { left: -20px; top: 58%; }

	.tarot-center { position: absolute; inset: 0; pointer-events: none; }
	.tarot-played { position: absolute; transition: opacity 0.2s; }
	.tarot-played.previous { opacity: 0.45; }
	.tarot-played.pos-0 { left: 50%; top: 58%; transform: translateX(-50%); }
	.tarot-played.pos-1 { left: 62%; top: 44%; }
	.tarot-played.pos-2 { left: 56%; top: 22%; }
	.tarot-played.pos-3 { left: 40%; top: 22%; }
	.tarot-played.pos-4 { left: 34%; top: 44%; }
	.tarot-trick-count { position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%); font-size: 0.8rem; opacity: 0.8; }

	.tcard {
		display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
		width: var(--tarot-card-w); height: var(--tarot-card-h); background: var(--tarot-card);
		border-radius: 7px; border: 1px solid #b8b0a0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
		color: var(--tarot-black); font-weight: 800; user-select: none; vertical-align: middle;
	}
	.tcard-rank { font-size: 1.4rem; line-height: 1; }
	.tcard-suit { font-size: 1.15rem; line-height: 1.1; }
	.tcard-h, .tcard-d { color: var(--tarot-red); }
	.tcard-t { background: #eef3f8; color: var(--tarot-trump); }
	.tcard-t .tcard-suit { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; }
	.tcard-ex { background: #f6eedc; color: var(--tarot-accent); }
	.tcard-small { width: 40px; height: 58px; }
	.tcard-small .tcard-rank { font-size: 1.05rem; }
	.tcard-small .tcard-suit { font-size: 0.9rem; }
	.tcard-mini { width: 28px; height: 40px; border-radius: 5px; }
	.tcard-mini .tcard-rank { font-size: 0.85rem; }
	.tcard-mini .tcard-suit { font-size: 0.7rem; }

	.tarot-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 26px 0 10px; min-height: var(--tarot-card-h); }
	.tarot-hand .tcard.playable { cursor: pointer; transition: transform 0.12s; }
	.tarot-hand .tcard.playable:hover, .tarot-hand .tcard.playable:focus-visible { transform: translateY(-10px); outline: none; }
	.tarot-hand .tcard.dimmed { opacity: 0.45; }
	.tarot-hand .tcard.selected { transform: translateY(-14px); box-shadow: 0 0 0 3px var(--tarot-accent); }

	.tarot-panel { background: #29343f; border-radius: 10px; padding: 12px 16px; margin-top: 30px; }
	.tarot-card-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
	.tarot-row-title { font-weight: 600; margin-right: 8px; }
	.tarot-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
	.tarot-footer { justify-content: flex-end; }
	.tarot-hint { opacity: 0.85; }
	.tarot-result h2 { font-size: 1.3rem; }
	.tarot-result h2.won { color: #58d68d; }
	.tarot-result h2.lost { color: #ec7063; }
	.tarot-result-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; text-align: center; }
	.tarot-result-table th { font-weight: 600; font-size: 0.85rem; padding: 4px; }
	.tarot-result-table td { font-weight: 800; padding: 4px; }
	.tarot-result-table td.plus { color: #58d68d; }
	.tarot-result-table td.minus { color: #ec7063; }

	.tarot-scores { width: 240px; background: #29343f; border-radius: 10px; padding: 12px 16px; }
	.tarot-scores h2 { font-size: 1.15rem; margin: 0 0 8px; }
	.tarot-scores h3 { font-size: 1rem; margin: 14px 0 6px; }
	.tarot-scores ul { list-style: none; padding: 0; margin: 0; }
	.tarot-scores li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
	.tarot-scores li.me { color: var(--tarot-accent); }
	.tarot-history li { font-size: 0.85rem; }
	.tarot-history li.won { color: #9fe2bf; }
	.tarot-history li.lost { color: #f1a9a0; }

	.tarot-share { display: flex; gap: 10px; align-items: center; margin: 10px 0 16px; }
	.tarot-share input { flex: 1; border-radius: 6px; border: 1px solid #4a5a69; background: #1f2a33; color: #eaddc0; padding: 6px 10px; }
	.tarot-seat-list { list-style: none; padding: 0; }
	.tarot-seat-list li { display: flex; align-items: center; gap: 12px; background: #29343f; border-radius: 8px; padding: 8px 12px; margin: 6px 0; }
	.tarot-seat-list li.free .tarot-seat-name { opacity: 0.7; font-style: italic; }
	.tarot-seat-number { width: 26px; height: 26px; border-radius: 50%; background: var(--tarot-felt); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
	.tarot-seat-name { flex: 1; }

	.tarot-toast {
		position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2000;
		background: #8e2b22; color: #fff; padding: 10px 18px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	}

	/* Invitations (table en attente). */
	.tarot-seat-list li.reserved .tarot-seat-name { color: #f5b041; }
	.tarot-invite { background: #29343f; border-radius: 10px; padding: 12px 16px; margin: 16px 0; }
	.tarot-invite h2 { font-size: 1.1rem; margin: 0 0 8px; }
	.tarot-friend-list { list-style: none; padding: 0; margin: 0; }
	.tarot-friend-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; }
}