* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  --bg-0: #2a0f1b;
  --bg-1: #3d1628;
  --bg-2: #4a1d33;
  --salon-rose: #b8355a;
  --salon-rose-deep: #7a1f3d;
  --salon-plum: #4a1d33;
  --salon-ink: #2a0f1b;
  --gold: #c9a227;
  --text: #fbf5f1;
  --text-mute: #c9bcc1;
  --border: rgba(255, 255, 255, 0.08);
  --surface: rgba(74, 29, 51, 0.55);
  --surface-strong: rgba(74, 29, 51, 0.9);
}

html, body {
  height: 100%;
  width: 100%;
  background: radial-gradient(ellipse at 30% 0%, var(--bg-2) 0%, var(--bg-0) 70%);
  color: var(--text);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  overflow: hidden;
  overscroll-behavior: none;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(184, 53, 90, 0.20) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(201, 162, 39, 0.14) 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}

.app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  max-width: 880px;
  margin: 0 auto;
}

/* ===== Topbar ===== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 4px;
  /* L'application superpose son bouton Retour en haut a gauche de l'iframe :
     on lui reserve sa place pour que le nom du jeu reste lisible. */
  padding-left: 124px;
}
.brand-kicker {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--text-mute);
  text-transform: uppercase;
}
.brand-title {
  font-size: clamp(20px, 5vw, 30px);
  font-weight: 900;
  letter-spacing: 0.15em;
  background: linear-gradient(90deg, var(--gold) 0%, #ffffff 50%, var(--salon-rose) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.icon-btn {
  height: 36px; width: 36px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s;
}
.icon-btn:hover { background: var(--surface-strong); }

/* ===== HUD ===== */
.hud {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 6px 12px 10px;
}
.stat {
  display: flex; flex-direction: column; align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
}
.stat span {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-mute);
  text-transform: uppercase;
}
.stat strong {
  font-size: clamp(18px, 5.5vw, 24px);
  font-weight: 900;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ===== Play area ===== */
.play-area {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 6px 10px 8px;
  min-height: 0;
}

.side {
  display: flex; flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
  width: 108px;
}
.side-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
}
.side-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--text-mute);
  text-align: center;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.side canvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}
.stats-block { padding: 8px 10px; }
.side-stat {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px;
  padding: 3px 0;
}
.side-stat span { color: var(--text-mute); font-weight: 600; }
.side-stat strong { font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }

.board-wrap {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  max-width: min(100%, 60vh);
  align-self: stretch;
}
#boardCanvas {
  display: block;
  border-radius: 14px;
  background: linear-gradient(180deg, #1d0a13 0%, #33121f 100%);
  border: 1px solid var(--border);
  box-shadow:
    0 0 0 1px rgba(184, 53, 90, 0.22),
    0 20px 60px rgba(0, 0, 0, 0.5),
    inset 0 0 60px rgba(184, 53, 90, 0.10);
  max-width: 100%;
  max-height: 100%;
}
.floating-fx {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: visible;
}
.fx-popup {
  position: absolute;
  font-weight: 900;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 0 18px currentColor;
  animation: floatUp 1.1s ease-out forwards;
  pointer-events: none;
  white-space: nowrap;
}
.fx-popup.small { font-size: 14px; }
.fx-popup.big { font-size: 28px; }
.fx-popup.combo { color: #ff7ad0; }
.fx-popup.quadruple { color: var(--gold); }
.fx-popup.tspin { color: var(--gold); }
.fx-popup.b2b { color: #d9738f; }
.fx-popup.linecount { color: #4ade80; }
.fx-popup.levelup { color: var(--gold); font-size: 26px; }
@keyframes floatUp {
  0% { transform: translate(-50%, 0) scale(0.8); opacity: 0; }
  15% { transform: translate(-50%, -8px) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -90px) scale(1); opacity: 0; }
}

/* ===== Overlay (pause / game over) ===== */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(42, 15, 27, 0.88);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  z-index: 10;
}
.overlay.hidden { display: none; }
.overlay-card {
  text-align: center;
  padding: 26px 22px;
  max-width: 240px;
}
.overlay-card h2 {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--salon-rose-deep), var(--salon-rose));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.overlay-card p {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-mute);
}
.primary-btn {
  display: inline-flex;
  margin-top: 18px;
  padding: 12px 24px;
  border-radius: 999px;
  border: none;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: white;
  background: linear-gradient(90deg, var(--salon-rose-deep), var(--salon-rose));
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(184, 53, 90, 0.35);
  transition: transform 0.1s;
}
.primary-btn:active { transform: scale(0.95); }

/* ===== Touch controls ===== */
.touch-controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
  padding: 8px 12px 12px;
}
.ctrl {
  height: 56px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(90, 40, 62, 0.7), rgba(58, 22, 38, 0.7));
  color: var(--text);
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform 0.05s, background 0.1s;
}
.ctrl:active {
  transform: scale(0.95);
  background: linear-gradient(180deg, rgba(140, 62, 92, 0.85), rgba(90, 34, 56, 0.85));
}
.ctrl-secondary {
  font-size: 12px;
  letter-spacing: 0.12em;
  background: linear-gradient(180deg, rgba(107, 90, 96, 0.55), rgba(60, 44, 52, 0.55));
}
.ctrl-rot { background: linear-gradient(180deg, rgba(201, 162, 39, 0.55), rgba(150, 118, 22, 0.55)); }
.ctrl-drop {
  grid-column: span 1;
  font-size: 18px;
  background: linear-gradient(180deg, var(--salon-rose), var(--salon-rose-deep));
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.05em;
}

/* ===== Legend (desktop hint) ===== */
.legend {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  padding: 8px 12px 14px;
  font-size: 11px;
  color: var(--text-mute);
}
.legend span {
  font-weight: 600;
}

/* Le pave tactile suffit sur telephone : le clavier n'est qu'un appoint, et
   cette legende ne s'affiche qu'a partir de 720 px, la ou il y en a un. */
.legend-title {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10px;
}

/* ===== Responsive ===== */
@media (min-width: 720px) {
  .touch-controls { display: none; }
  .legend { display: flex; }
  .side { width: 130px; }
  .side-block { padding: 14px; }
  #holdCanvas { width: 100% !important; height: auto !important; }
}

/* Telephone : le plateau EST le jeu. Les deux colonnes laterales sont
   ramenees a la largeur strictement utile, et l'habillage du haut et du bas
   est resserre, pour que la grille occupe la place disponible et reste
   jouable au pouce. Aucune regle de jeu ne change : le moteur recalcule
   seulement la taille d'une case a partir de la place qu'on lui laisse. */
@media (max-width: 719px) {
  .topbar { padding: 8px 12px 2px; padding-left: 118px; }
  .hud { gap: 6px; padding: 4px 8px 6px; }
  .stat { border-radius: 10px; padding: 5px 8px; }

  .play-area { gap: 6px; padding: 4px 6px 6px; }
  .side { width: 56px; gap: 6px; }
  .side-block { border-radius: 10px; padding: 6px; }
  .side-title { font-size: 8px; letter-spacing: 0.12em; margin-bottom: 4px; }
  .stats-block { padding: 6px 4px; }
  /* Colonne etroite : le libelle passe au-dessus de sa valeur, sinon les deux
     se chevauchent. */
  .side-stat { flex-direction: column; align-items: center; font-size: 9px; padding: 2px 0; }
  .side-stat + .side-stat { margin-top: 4px; }
  .side-stat strong { font-size: 12px; }
  .board-wrap { max-width: 100%; }

  .touch-controls { gap: 6px; padding: 6px 8px 10px; }
  .ctrl { height: 52px; }
}

@media (max-width: 380px) {
  .side { width: 50px; }
  .side-title { font-size: 8px; }
  .ctrl { height: 50px; font-size: 20px; }
}

@media (max-height: 700px) {
  .topbar { padding-top: 6px; padding-bottom: 0; }
  .hud { padding: 4px 12px 6px; }
  .ctrl { height: 48px; font-size: 18px; }
  .ctrl-drop { font-size: 16px; }
}