/* 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). Déclinaison mobile de tarot-desktop.css. */
@media screen and (max-width: 1100px) {
	: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);
	}

	/* Écrans étroits : colonne unique, table et cartes réduites. */
	:root { --tarot-card-w: 40px; --tarot-card-h: 60px; }
	.tarot-layout { flex-direction: column; }
	.tarot-scores { width: 100%; box-sizing: border-box; }
	.tarot-table { height: 330px; border-radius: 120px; border-width: 5px; }
	.tarot-seat { width: 96px; padding: 4px 6px; font-size: 0.75rem; }
	.tarot-seat-info { flex-direction: column; font-size: 0.7rem; }
	.tarot-seat.pos-1 { right: -6px; top: 55%; }
	.tarot-seat.pos-2 { right: 4%; top: -12px; }
	.tarot-seat.pos-3 { left: 4%; top: -12px; }
	.tarot-seat.pos-4 { left: -6px; top: 55%; }
	.tarot-seat.pos-0 { bottom: -14px; }
	.tarot-played.pos-1 { left: 60%; }
	.tarot-played.pos-4 { left: 26%; }
	.tarot-played.pos-2 { left: 54%; top: 24%; }
	.tarot-played.pos-3 { left: 32%; top: 24%; }
	.tcard-rank { font-size: 1.05rem; }
	.tcard-suit { font-size: 0.9rem; }
	.tarot-hand { gap: 3px; }
	.tarot-status { gap: 8px; font-size: 0.9rem; }
	.tarot-turn { margin-left: 0; width: 100%; }
	.tarot-share { flex-direction: column; align-items: stretch; }

	/* 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; }

	/* --- Profil d'un joueur et dashboard (même esprit que le profil de
	   game_hosting et la page Mon compte). --- */
	.tp-wrap { max-width: 820px; margin: 24px auto 50px; text-align: left; color: #eaddc0; }
	.tp-wrap a { color: #eaddc0; }
	.tp-hero {
		display: flex; align-items: center; gap: 22px; padding: 24px; border-radius: 16px;
		background: linear-gradient(135deg, #2f3c48 0%, #242d36 100%);
		border: 1px solid rgba(234, 221, 192, 0.08); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	}
	.tp-avatar { width: 96px; height: 96px; flex-shrink: 0; border-radius: 50%; object-fit: cover; border: 3px solid var(--tarot-accent); }
	.tp-hero-text { flex: 1; min-width: 0; }
	.tp-name { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 1.6rem; font-weight: 700; overflow-wrap: anywhere; }
	.tp-meta { font-size: 0.88rem; color: rgba(234, 221, 192, 0.6); }
	.tp-badge { padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: rgba(234, 221, 192, 0.1); }
	.tp-btn {
		display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px;
		font-size: 0.88rem; font-weight: 600; white-space: nowrap; text-decoration: none;
		background: var(--color--anthracite); color: var(--color--beige); transition: background-color 0.15s ease-in-out;
	}
	.tp-wrap .tp-btn { color: var(--color--beige); }
	.tp-btn:hover { background: var(--color--anthracite-v2); text-decoration: none; }
	.tp-btn i { padding: 0; }
	.tp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
	.tp-stat {
		display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; text-align: center;
		border-radius: 14px; background: #29343f; border: 1px solid rgba(234, 221, 192, 0.08);
	}
	.tp-stat i { padding: 0; margin-bottom: 4px; font-size: 1.3rem; color: rgba(234, 221, 192, 0.7); }
	.tp-stat-value { font-size: 1.4rem; font-weight: 700; }
	.tp-stat-label { font-size: 0.78rem; color: rgba(234, 221, 192, 0.6); }
	.tp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
	.tp-card {
		margin-top: 20px; padding: 20px 22px; border-radius: 16px; background: #29343f;
		border: 1px solid rgba(234, 221, 192, 0.08); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
	}
	.tp-card-title { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 1.05rem; font-weight: 700; color: #eaddc0; }
	.tp-card-title i { padding: 0; color: rgba(234, 221, 192, 0.7); }
	.tp-subtitle { margin: 16px 0 4px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(234, 221, 192, 0.55); }
	.tp-row {
		display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
		padding: 8px 2px; border-top: 1px solid rgba(234, 221, 192, 0.08); font-size: 0.92rem;
	}
	.tp-muted { color: rgba(234, 221, 192, 0.55); }
	.tp-plus { color: #8fd18f; }
	.tp-minus { color: #ff8a7a; }
	.tp-empty {
		margin-top: 20px; padding: 18px; border-radius: 12px; text-align: center;
		border: 1px dashed rgba(234, 221, 192, 0.15); color: rgba(234, 221, 192, 0.6);
	}

	.tp-wrap { padding: 0 12px; }
	.tp-hero { flex-direction: column; text-align: center; padding: 22px 16px; }
	.tp-name { justify-content: center; }
	.tp-stats { grid-template-columns: repeat(2, 1fr); }
	.tp-grid { grid-template-columns: 1fr; gap: 0; }
	.tp-card { padding: 18px 16px; }

	/* --- Dashboard : même présentation que celui de game_hosting (tuiles à
	   pastille orange, intertitres, cartes). --- */
	.td-wrap { max-width: 1100px; margin: 0 auto 40px; text-align: left; color: #eaddc0; }
	.td-wrap h1 { text-align: center; }
	.td-wrap a { color: #eaddc0; }
	.td-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 20px; }
	.td-stat {
		position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
		background: #29343f; border-radius: 12px; padding: 14px 8px; text-align: center;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	}
	a.td-stat { text-decoration: none; color: inherit; transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out; }
	a.td-stat:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14); transform: translateY(-1px); text-decoration: none; }
	.td-stat-icon {
		width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
		background: var(--color--marron); color: var(--color--beige);
	}
	.td-stat-icon i { padding: 0; line-height: 1; }
	.td-stat-value { font-size: 1.2rem; font-weight: 700; color: #eaddc0; }
	.td-stat-label { font-size: 0.72rem; color: rgba(234, 221, 192, 0.6); }
	.td-section-label {
		font-size: 0.8rem; font-weight: 700; color: var(--color--beige-dark);
		text-transform: uppercase; letter-spacing: 0.03em; margin: 28px 0 10px;
	}
	.td-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
	.td-card { background: #29343f; color: #eaddc0; border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
	.td-card-header { font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
	.td-card-header i { padding: 0; }
	.td-line {
		display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
		padding: 8px 2px; border-top: 1px solid rgba(234, 221, 192, 0.08); font-size: 0.9rem;
	}
	.td-muted { color: rgba(234, 221, 192, 0.55); }
	.td-plus { color: #8fd18f; }
	.td-minus { color: #ff8a7a; }
	.td-status { padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: rgba(234, 221, 192, 0.1); }
	.td-status-playing { background: rgba(143, 209, 143, 0.18); color: #8fd18f; }
	.td-status-waiting { background: rgba(230, 103, 0, 0.18); color: #f0a35e; }
	.td-bars { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 6px; }
	.td-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
	.td-bar-fill { width: 100%; min-height: 2px; border-radius: 6px 6px 2px 2px; background: var(--color--marron); opacity: 0.85; }
	.td-bar-value { font-size: 0.75rem; color: rgba(234, 221, 192, 0.75); }
	.td-bar-label { font-size: 0.68rem; color: rgba(234, 221, 192, 0.5); white-space: nowrap; }

	.td-wrap { padding: 0 12px; }
	.td-stats { grid-template-columns: repeat(2, 1fr); }
	.td-row { grid-template-columns: 1fr; gap: 14px; }
	.td-bars { gap: 3px; }
	.td-bar-label { font-size: 0.6rem; }
	/* 14 dates ne tiennent pas côte à côte : une sur deux, la plus récente gardée. */
	.td-bar:nth-last-child(even) .td-bar-label { visibility: hidden; }
}