/* ═══════════════════════════════════════════════════════════════════════════
   UNO M2-9 — Tapis feutre + layout 4 sièges + animations
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --uno-red:    #e0252b;
  --uno-yellow: #ffcc00;
  --uno-green:  #22a042;
  --uno-blue:   #1e6ad3;
  --uno-black:  #1a1a1a;
  --uno-gold:   #fff8a0;
  --uno-felt-1: #0d3b1f;
  --uno-felt-2: #052010;
  --uno-felt-3: #02100a;
  --uno-accent: #6fe096;
  --uno-text:   #f0fff5;
  --uno-muted:  #9aa6a0;
}

/* ─── Tapis de feutre vert casino ─── */
body {
  background:
    radial-gradient(ellipse 70% 50% at 50% 35%, rgba(255,255,255,.045) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 50%, var(--uno-felt-1) 0%, var(--uno-felt-2) 70%, var(--uno-felt-3) 100%);
}
body::after { display: none; }
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.10;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0.18  0 0 0 0 0.08  0 0 0 0.6 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

main {
  max-width: 1100px; margin: 0 auto; padding: 18px 14px 30px;
  position: relative; z-index: 1;
}

/* ─── Hero ─── */
h1.uno-title {
  font-size: clamp(40px, 7vw, 78px);
  font-weight: 900; letter-spacing: -0.03em;
  margin: 4px 0 0; text-align: center;
  font-family: "Arial Black", "Helvetica Black", system-ui, sans-serif;
  font-style: italic;
  background: linear-gradient(90deg,
    #ff3e3e 0%, #ff3e3e 25%,
    #ffd400 25%, #ffd400 50%,
    #2bc24f 50%, #2bc24f 75%,
    #1e6ad3 75%, #1e6ad3 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 6px 30px rgba(0,0,0,.5);
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.3));
}
.uno-sub {
  text-align: center; color: var(--uno-accent);
  font-family: ui-monospace, monospace; font-size: 11px;
  letter-spacing: .35em; text-transform: uppercase;
  margin: 4px 0 18px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLE DE JEU
   ═══════════════════════════════════════════════════════════════════════════ */
.uno-table {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  min-height: 620px;
  padding: 18px;
  border-radius: 24px;
  background:
    radial-gradient(ellipse 70% 70% at 50% 50%, rgba(45,130,70,.12) 0%, transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45));
  border: 1px solid rgba(110,224,150,.18);
  box-shadow:
    inset 0 0 80px rgba(0,0,0,.5),
    0 20px 50px rgba(0,0,0,.5);
}

.middle-row {
  display: grid;
  grid-template-columns: 130px 1fr 130px;
  gap: 16px;
  align-items: center;
  min-height: 320px;
}

/* ─── Sièges (joueurs) ─── */
.seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px;
  border-radius: 14px;
  position: relative;
  transition: background .25s, box-shadow .25s;
}
.seat.active {
  background: rgba(255,248,160,.10);
  box-shadow:
    inset 0 0 0 1px rgba(255,248,160,.35),
    0 0 24px rgba(255,248,160,.25);
}
.seat.winner {
  background: rgba(110,224,150,.18);
  box-shadow: 0 0 30px var(--uno-accent);
}
.seat-top { grid-row: 1; }
.seat-bottom { grid-row: 3; }
.seat-left, .seat-right { flex-direction: column; }

.seat-info {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(110,224,150,.18);
  border-radius: 999px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--uno-text);
  white-space: nowrap;
}
.seat-pion {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--uno-accent);
  box-shadow: 0 0 8px var(--uno-accent);
}
.seat[data-player="0"] .seat-pion { background: #ff8a8a; box-shadow: 0 0 8px #ff8a8a; }
.seat[data-player="1"] .seat-pion { background: #ffd28a; box-shadow: 0 0 8px #ffd28a; }
.seat[data-player="2"] .seat-pion { background: #8aff8a; box-shadow: 0 0 8px #8aff8a; }
.seat[data-player="3"] .seat-pion { background: #8aceff; box-shadow: 0 0 8px #8aceff; }
.seat-name { font-weight: 700; }
.seat-count {
  background: var(--uno-gold); color: #1a1006;
  padding: 1px 7px; border-radius: 999px;
  font-weight: 800; font-size: 11px;
  min-width: 18px; text-align: center;
}
.seat[data-uno-said="1"] .seat-info::after {
  content: "UNO !";
  background: linear-gradient(135deg, #ffd400, #ff6479);
  color: #1a0000;
  font-weight: 900;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  animation: unoBlink 0.7s ease-in-out infinite;
}
@keyframes unoBlink {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ─── Mains ─── */
.hand {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.hand-h {
  flex-direction: row;
  min-height: 120px;
  padding: 8px;
}
.hand-v {
  flex-direction: column;
  min-width: 90px;
  padding: 4px;
}

/* Cartes dans la main du joueur humain */
.hand-mine {
  min-height: 140px;
  padding: 30px 8px 8px;
  perspective: 1200px;
}
.hand-mine .card-slot {
  margin-left: -38px;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1),
              filter .25s ease;
  cursor: pointer;
  position: relative;
}
.hand-mine .card-slot:first-child { margin-left: 0; }

.hand-mine .card-slot:hover,
.hand-mine .card-slot.playable:hover {
  transform: translateY(-22px) scale(1.08);
  z-index: 50;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.7));
}
.hand-mine .card-slot.playable {
  filter: drop-shadow(0 6px 14px rgba(255,248,160,.4));
}
.hand-mine .card-slot.playable::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 12px;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--uno-gold), 0 0 18px var(--uno-gold);
  opacity: 0.7;
  animation: playableGlow 1.6s ease-in-out infinite;
}
@keyframes playableGlow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.hand-mine .card-slot.unplayable {
  opacity: 0.55;
  filter: grayscale(40%) drop-shadow(0 4px 8px rgba(0,0,0,.5));
  cursor: not-allowed;
}

/* Cartes IA en main (dos visible, compactes) */
.hand-h:not(.hand-mine) .card-slot {
  margin-left: -32px;
  transition: transform .3s ease;
}
.hand-h:not(.hand-mine) .card-slot:first-child { margin-left: 0; }

.hand-v .card-slot {
  margin-top: -42px;
  transition: transform .3s ease;
}
.hand-v .card-slot:first-child { margin-top: 0; }
.hand-v .card-slot svg { transform: rotate(90deg); }

/* Cartes en main : tailles */
.card-slot svg {
  display: block;
  width: 78px; height: 110px;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,.55));
  transition: filter .25s;
}
.hand-mine .card-slot svg {
  width: 86px; height: 122px;
}
.hand-v .card-slot {
  height: 60px;
  width: 86px;
}

/* ─── Table centrale : pioche + défausse ─── */
.table-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  position: relative;
  min-height: 220px;
}
.pile {
  position: relative;
  width: 110px; height: 156px;
  cursor: pointer;
}
.pile.pile-draw {
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.65));
}
.pile.pile-draw::before,
.pile.pile-draw::after {
  /* Donne l'illusion d'une pile épaisse de cartes */
  content: ''; position: absolute; inset: 0;
  border-radius: 9px;
  background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
  border: 1px solid #000;
  z-index: -1;
}
.pile.pile-draw::before { transform: translate(-3px, 3px); }
.pile.pile-draw::after  { transform: translate(3px, 6px); }
.pile.pile-draw:hover { transform: scale(1.06); transition: transform .2s; }

.pile.pile-discard svg {
  width: 110px; height: 156px;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.65));
  transition: transform .35s ease;
}
.pile.pile-discard svg.played-in {
  animation: cardPlayed 0.6s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes cardPlayed {
  0%   { transform: translateY(-200px) rotate(-15deg) scale(0.6); opacity: 0; }
  60%  { transform: translateY(8px) rotate(3deg) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
}

.pile svg {
  width: 110px; height: 156px;
  display: block;
}

/* Direction indicator (flèche tournante) */
.direction-indicator {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.25;
  z-index: 0;
}
.direction-indicator svg {
  animation: dirSpin 8s linear infinite;
}
.direction-indicator.reversed svg {
  animation-direction: reverse;
}
@keyframes dirSpin {
  to { transform: rotate(360deg); }
}

/* Indicateur de couleur active */
.color-indicator {
  position: absolute;
  bottom: -22px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 8px;
  border-radius: 4px;
  transition: background .35s;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.color-indicator[data-color="red"]    { background: linear-gradient(90deg, #f24747, #a51212); box-shadow: 0 0 16px #f24747; }
.color-indicator[data-color="yellow"] { background: linear-gradient(90deg, #ffe558, #c69500); box-shadow: 0 0 16px #ffcc00; }
.color-indicator[data-color="green"]  { background: linear-gradient(90deg, #48d36b, #14622a); box-shadow: 0 0 16px #22a042; }
.color-indicator[data-color="blue"]   { background: linear-gradient(90deg, #3a8be3, #0d3f8a); box-shadow: 0 0 16px #1e6ad3; }

/* Badge cumul +2/+4 */
.draw-stack-badge {
  position: absolute;
  top: 6px; right: 6px;
  background: linear-gradient(135deg, #ff6479, #b81e3a);
  color: #fff;
  font-family: ui-monospace, monospace;
  font-weight: 900;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(255,100,121,.5);
  display: none;
  z-index: 5;
}
.draw-stack-badge.show { display: block; animation: badgePulse 1s ease-in-out infinite; }
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTRÔLES JOUEUR
   ═══════════════════════════════════════════════════════════════════════════ */
.player-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 20px auto 12px;
  flex-wrap: wrap;
}

.ctrl-btn {
  appearance: none; border: 0; cursor: pointer;
  padding: 10px 18px;
  border-radius: 12px;
  font-family: inherit; font-weight: 800; font-size: 14px;
  background: rgba(20, 40, 28, .85);
  color: var(--uno-text);
  border: 1px solid rgba(110,224,150,.35);
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  transition: transform .1s, box-shadow .2s, background .15s;
  font-family: ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ctrl-btn:hover:not(:disabled) {
  background: rgba(40, 80, 55, .9);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.55);
}
.ctrl-btn:active:not(:disabled) { transform: translateY(0); }
.ctrl-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.ctrl-uno {
  background: linear-gradient(135deg, #ffd400, #ff6479);
  color: #1a0000;
  border: 0;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .15em;
  padding: 12px 28px;
  box-shadow: 0 6px 20px rgba(255,100,121,.5);
}
.ctrl-uno:hover:not(:disabled) {
  box-shadow: 0 10px 28px rgba(255,100,121,.7);
}

.ctrl-draw {
  background: linear-gradient(135deg, #1e6ad3, #0d3f8a);
  color: #fff;
  border: 0;
}

.ctrl-pass {
  background: linear-gradient(135deg, #c69500, #7a5d00);
  color: #1a1006;
  border: 0;
}

.ctrl-ghost {
  background: transparent;
  color: var(--uno-muted);
}

.ctrl-btn.ng-ai {
  min-width: 60px;
}
.ctrl-btn.ng-ai.active {
  background: linear-gradient(135deg, var(--uno-accent), #1f7a3a);
  color: #06140d;
  border: 0;
}

/* ─── Status + log ─── */
.status-bar {
  text-align: center;
  font-family: ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--uno-gold);
  padding: 10px 18px;
  background: rgba(0,0,0,.4);
  border-radius: 999px;
  margin: 0 auto 14px;
  max-width: fit-content;
  border: 1px solid rgba(255,248,160,.2);
  text-shadow: 0 0 12px rgba(255,248,160,.4);
}
.status-bar.urgent {
  background: linear-gradient(135deg, rgba(255,100,121,.25), rgba(184,30,58,.25));
  color: #ff8a9a;
  border-color: rgba(255,100,121,.5);
  text-shadow: 0 0 14px rgba(255,100,121,.6);
  animation: statusUrgent 1s ease-in-out infinite;
}
@keyframes statusUrgent {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

.log-wrap {
  max-width: 700px;
  margin: 0 auto;
}
.log {
  max-height: 130px;
  overflow-y: auto;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(110,224,150,.15);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: rgba(220, 240, 230, .85);
  line-height: 1.6;
}
.log::-webkit-scrollbar { width: 6px; }
.log::-webkit-scrollbar-track { background: rgba(0,0,0,.2); border-radius: 3px; }
.log::-webkit-scrollbar-thumb { background: rgba(110,224,150,.3); border-radius: 3px; }
.log-entry { padding: 2px 0; border-bottom: 1px dashed rgba(110,224,150,.1); }
.log-entry:last-child { border-bottom: none; }
.log-entry .log-p {
  font-weight: 900;
  margin-right: 6px;
}
.log-entry[data-p="0"] .log-p { color: #ff8a8a; }
.log-entry[data-p="1"] .log-p { color: #ffd28a; }
.log-entry[data-p="2"] .log-p { color: #8aff8a; }
.log-entry[data-p="3"] .log-p { color: #8aceff; }

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS GLOBALES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Animation distribution : carte volant de la pioche vers le joueur */
@keyframes cardDeal {
  0% {
    transform: translate(var(--from-x, 0), var(--from-y, 0)) rotate(-15deg) scale(0.5);
    opacity: 0;
  }
  100% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
}
.card-slot.dealing {
  animation: cardDeal 0.45s cubic-bezier(.34, 1.56, .64, 1) backwards;
}

/* Flip 3D pour révéler une carte piochée */
@keyframes cardFlip {
  0%   { transform: rotateY(0deg) scale(0.9); }
  50%  { transform: rotateY(90deg) scale(1.1); }
  100% { transform: rotateY(0deg) scale(1); }
}
.card-slot.flipping svg { animation: cardFlip 0.5s ease-in-out; }

/* Pulse pour le bouton UNO ! */
.ctrl-uno.urgent {
  animation: unoUrgent 0.8s ease-in-out infinite;
}
@keyframes unoUrgent {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 20px rgba(255,100,121,.5); }
  50%      { transform: scale(1.08); box-shadow: 0 10px 30px rgba(255,210,100,.8); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODALES
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-bg {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(2, 12, 6, 0.78);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.modal-bg.show { display: flex; }

.modal {
  background: linear-gradient(180deg, #14281c, #08160e);
  border: 1px solid rgba(110,224,150,.4);
  border-radius: 18px;
  padding: 24px 28px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 40px rgba(110,224,150,.2);
  animation: modalPop 0.3s cubic-bezier(.34, 1.56, .64, 1);
  color: var(--uno-text);
}
@keyframes modalPop {
  from { transform: scale(.85); opacity: 0; }
}
.modal h2 {
  margin: 0 0 14px; font-size: 22px;
  background: linear-gradient(180deg, #fff, var(--uno-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.modal p {
  margin: 0 0 12px; font-size: 14px;
  color: rgba(220, 240, 230, .85); line-height: 1.5;
}

.ng-section { margin-bottom: 14px; }
.ng-label {
  display: block;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--uno-accent); margin-bottom: 6px;
  font-weight: 800; font-family: ui-monospace, monospace;
}
.ng-input {
  background: rgba(0,0,0,.35); border: 1px solid rgba(110,224,150,.30);
  border-radius: 8px; padding: 8px 12px;
  color: var(--uno-text); font-family: inherit; font-size: 14px;
  width: 100%;
}
.ng-input:focus { outline: none; border-color: var(--uno-accent); }
.ng-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; font-size: 13px;
  color: rgba(220, 240, 230, .85); cursor: pointer;
}
.ng-opt input[type="checkbox"] { accent-color: var(--uno-accent); }

.row {
  display: flex; gap: 10px; flex-wrap: wrap;
}

/* Modale couleur : grille 2×2 */
.modal-color { max-width: 360px; }
.color-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
.color-btn {
  appearance: none; border: 2px solid #000;
  padding: 28px 12px;
  border-radius: 14px;
  font-family: 'Arial Black', sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.5), inset 0 2px 6px rgba(255,255,255,.25);
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
  transition: transform .15s, box-shadow .15s;
}
.color-btn:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 14px 30px rgba(0,0,0,.65), inset 0 2px 6px rgba(255,255,255,.35);
}
.color-btn:active { transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  main { padding: 8px 6px 30px; }
  .uno-table { padding: 10px; min-height: 540px; gap: 8px; }
  .middle-row { grid-template-columns: 86px 1fr 86px; gap: 8px; min-height: 240px; }
  .pile { width: 88px; height: 124px; }
  .pile svg { width: 88px; height: 124px; }
  .hand-mine .card-slot svg { width: 70px; height: 100px; }
  .card-slot svg { width: 62px; height: 88px; }
  .hand-mine .card-slot { margin-left: -32px; }
  .hand-h:not(.hand-mine) .card-slot { margin-left: -26px; }
  .hand-v .card-slot { margin-top: -30px; height: 50px; width: 70px; }
  h1.uno-title { font-size: 44px; }
  .seat-info { font-size: 10px; padding: 3px 7px; }
  .seat-name { display: none; }
  .ctrl-btn { padding: 8px 14px; font-size: 12px; }
  .ctrl-uno { font-size: 14px; padding: 10px 22px; }
}

@media (max-width: 480px) {
  .pile { width: 76px; height: 108px; }
  .pile svg { width: 76px; height: 108px; }
  .table-center { gap: 14px; }
  .hand-mine .card-slot svg { width: 60px; height: 86px; }
  .hand-mine .card-slot { margin-left: -28px; }
}

/* ─── Plein écran (hérite shared.css) ─── */
body.is-fullscreen .site-header,
body.is-fullscreen .site-footer,
body.is-fullscreen h1.uno-title,
body.is-fullscreen .uno-sub { display: none; }
body.is-fullscreen main { padding: 4px; max-width: none; }