/* Thème commun + table de jeu (repère virtuel 1540 x 880, unités cqw) */
:root {
  --bg: #120f0b;
  --bg2: #1a150f;
  --panel: rgba(28, 22, 15, 0.96);
  --panel2: rgba(255, 255, 255, 0.03);
  --gold: #d9b45a;
  --gold-hi: #f4dc94;
  --ink: #f3ead6;
  --muted: #b3a283;
  --blue: #6f95ff;
  --red: #ff6170;
  --green: #8fd88f;
  --line: rgba(217, 180, 90, 0.28);
  --line-hi: rgba(217, 180, 90, 0.6);
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse at 50% 0%, #2a2014 0%, var(--bg) 65%) fixed;
  color: var(--ink);
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 17px;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
.hidden { display: none !important; }

/* ---------- table ---------- */
.game-layer { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: radial-gradient(ellipse at 50% 30%, #2a2014 0%, var(--bg) 70%); }
.game-bar { height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--line); }
.timer { font-weight: 800; font-size: 20px; color: var(--gold-hi); }
.timer.urgent { color: var(--red); }
.stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 12px 16px; }
.table {
  container-type: inline-size;
  position: relative;
  width: min(100%, calc((100vh - 80px) * 1540 / 880));
  aspect-ratio: 1540 / 880;
  background: url(assets/ui/board.webp) center / 100% 100% no-repeat;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .7), 0 0 0 1px var(--line);
}
/* grille alignée sur les cadres du plateau (board.webp, repère 1540 x 880) : cases de 206.5 x 255 */
.grid {
  position: absolute; left: 29.89cqw; top: 4.22cqw; width: 40.22cqw; height: 49.68cqw;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
}
.cell { position: relative; display: grid; place-items: center; border-radius: .8cqw; transition: background .15s; }
.cell.target { background: rgba(255, 240, 190, .18); box-shadow: inset 0 0 0 .2cqw rgba(255, 235, 170, .55); cursor: pointer; }
.cell.target:hover, .cell.drop { background: rgba(255, 240, 190, .38); }

.hand { position: absolute; top: 2.6cqw; width: 13.41cqw; height: 47.5cqw; }
#hand-0 { left: 8.2cqw; }
#hand-1 { right: 8.2cqw; }
.hand .card { position: absolute; left: 0; transition: transform .18s ease, filter .18s; }
.hand.active .card.playable:hover { transform: translateX(1.2cqw); }
.hand .card.selected { transform: translateX(2.2cqw) !important; filter: drop-shadow(0 0 1cqw rgba(255, 230, 150, .9)); z-index: 10; }
.hand.active::before {
  content: ''; position: absolute; inset: -1cqw -1.2cqw; border-radius: 1.2cqw;
  background: radial-gradient(ellipse, rgba(255, 240, 200, .28), transparent 70%);
}
#hand-1.active::before { background: radial-gradient(ellipse, rgba(255, 120, 120, .25), transparent 70%); }

.score {
  position: absolute; top: 50.9cqw; width: 13.41cqw; text-align: center;
  font-family: 'Cinzel', serif; font-weight: 800; font-size: 4.8cqw; line-height: 1;
  -webkit-text-stroke: .25cqw #1b1b2a; paint-order: stroke fill; text-shadow: 0 .3cqw .6cqw rgba(0, 0, 0, .6);
}
.score-0 { left: 8.2cqw; color: #cfe0ff; }
.score-1 { right: 8.2cqw; color: #ffd3d3; }
.pname {
  position: absolute; top: .4cqw; width: 13.41cqw; text-align: center; font-size: 1.4cqw; font-weight: 800;
  color: #2a1a08; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pname-0 { left: 8.2cqw; }
.pname-1 { right: 8.2cqw; }
.turn {
  position: absolute; left: 25.32cqw; width: 50.32cqw; top: 54.2cqw; text-align: center;
  font-size: 1.9cqw; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #2a1a08; text-shadow: 0 0 .5cqw rgba(255, 245, 210, .9);
}
.rules-badges { position: absolute; left: 50%; transform: translateX(-50%); top: .9cqw; display: flex; gap: .4cqw; flex-wrap: wrap; justify-content: center; width: 60cqw; }
.rules-badges span {
  font-size: 1.05cqw; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  background: rgba(30, 20, 8, .75); color: var(--gold-hi); padding: .15cqw .6cqw; border-radius: .4cqw;
}

/* ---------- carte sur la table ---------- */
/* cartes FFPTT 200 x 247, coins arrondis transparents dans l'image */
.card { --cw: 13.41cqw; width: var(--cw); aspect-ratio: 200 / 247; border-radius: calc(var(--cw) * .07); perspective: 600px; }
.cell .card { position: relative; z-index: 1; }
.card .face {
  position: relative; width: 100%; height: 100%; border-radius: inherit; overflow: hidden;
  filter: drop-shadow(0 .35cqw .5cqw rgba(0, 0, 0, .55)); transform-style: preserve-3d;
}
.card img { width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; }
.card .name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .3cqw .5cqw; font-size: calc(var(--cw) * .085);
  font-weight: 600; text-align: right; background: linear-gradient(transparent, rgba(0, 0, 0, .65));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .15s;
}
.card:hover .name { opacity: 1; }
.card .mod { position: absolute; right: 4%; bottom: 4%; font-weight: 800; font-size: calc(var(--cw) * .17); -webkit-text-stroke: calc(var(--cw) * .02) #111; paint-order: stroke fill; }
.card .mod.up { color: #9cff9c; }
.card .mod.down { color: #ff8f8f; }
/* retournement d'une carte capturée (voir flipCell dans game.js) */
.card { --rx: 0; --ry: 1; }
.card.flipping { z-index: 15; }
.card.flipping .face.flip-out { animation: flipOut .23s cubic-bezier(.5, 0, .9, .6) forwards; }
.card.flipping .face.flip-in { animation: flipIn .38s cubic-bezier(.15, .6, .35, 1) forwards; }
@keyframes flipOut {
  from { transform: rotate3d(var(--rx), var(--ry), 0, 0deg) scale(1); }
  to { transform: rotate3d(var(--rx), var(--ry), 0, 90deg) scale(1.22); filter: drop-shadow(0 1.6cqw 1.4cqw rgba(0, 0, 0, .55)) brightness(1.15); }
}
@keyframes flipIn {
  from { transform: rotate3d(var(--rx), var(--ry), 0, -90deg) scale(1.22); filter: drop-shadow(0 1.6cqw 1.4cqw rgba(0, 0, 0, .55)) brightness(1.6); }
  70% { transform: rotate3d(var(--rx), var(--ry), 0, 6deg) scale(1.02); filter: drop-shadow(0 0 1.2cqw rgba(255, 236, 170, .9)) brightness(1.2); }
  to { transform: rotate3d(var(--rx), var(--ry), 0, 0deg) scale(1); filter: drop-shadow(0 .35cqw .5cqw rgba(0, 0, 0, .55)); }
}
.card.placed .face { animation: land .28s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes land { from { transform: scale(1.12); filter: brightness(1.4); } }

.banner {
  position: absolute; left: 50%; top: 26cqw; height: 6.5cqw; transform: translate(-50%, -50%) scale(.6);
  opacity: 0; pointer-events: none; z-index: 30; filter: drop-shadow(0 .4cqw .8cqw rgba(0, 0, 0, .6));
}
.banner.show { animation: banner 1s ease forwards; }
@keyframes banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  30% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
}

/* ---------- fin de partie ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: rgba(8, 6, 4, .72); backdrop-filter: blur(3px);
}
.end-box { text-align: center; }
.end-box img { width: min(560px, 80vw); filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .7)); animation: land .5s cubic-bezier(.2, .9, .3, 1.3); }
.end-box p { font-size: 22px; margin: 6px 0 0; }
.end-rewards { font-size: 19px; color: var(--gold-hi); margin-top: 6px; }
.end-rewards .gain { color: var(--green); }
.end-rewards .loss { color: var(--red); }
.end-box .actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }