/* ============================================================
   Darts — GAME ARENA
   Refonte immersive des écrans de jeu (x01 / cricket / clock).
   - Mise en page PAYSAGE prioritaire (100dvh, sans scroll global)
   - UI "in-game" épurée : barre d'action compacte au lieu de la nav
   - Overlay "tourne ton téléphone" en portrait
   - Identité "table de jeu" néon, compatible thème clair & sombre
   Chargé EN PLUS de darts-base.css + (x01.css | games.css).
   ============================================================ */

/* ---------- Shell plein écran, immersif ---------- */
body.arena {
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(34, 211, 238, .14), transparent 55%),
    radial-gradient(90% 80% at 100% 120%, rgba(168, 85, 247, .16), transparent 55%),
    radial-gradient(70% 70% at 0% 110%, rgba(52, 211, 153, .08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

.arena-shell {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding:
    calc(8px + var(--safe-top))
    calc(12px + var(--safe-right))
    calc(8px + var(--safe-bottom))
    calc(12px + var(--safe-left));
  gap: 8px;
}

/* ---------- Barre d'action de jeu (remplace topbar + bottomnav) ---------- */
.arena-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--pill);
  background: linear-gradient(180deg, rgba(15, 24, 48, .82), rgba(11, 19, 38, .6));
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(2, 6, 23, .4);
}
:root[data-theme="light"] .arena-bar {
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(244, 247, 255, .7));
}

.arena-back {
  -webkit-tap-highlight-color: transparent;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px 0 11px;
  border-radius: var(--pill);
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
:root[data-theme="light"] .arena-back { background: rgba(15, 23, 42, .04); }
.arena-back:hover { border-color: var(--cyan); color: var(--cyan); }
.arena-back:active { transform: scale(.96); }
.arena-back .ab-ico { font-size: 1.05rem; line-height: 1; }

.arena-id {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.arena-id .arena-mark {
  width: 30px; height: 30px; flex: none;
  border-radius: 9px;
  display: grid; place-items: center;
  font-size: 17px;
  background: var(--accent);
  box-shadow: 0 4px 14px rgba(34, 211, 238, .35);
}
.arena-id .arena-title {
  font-weight: 800;
  font-size: .98rem;
  letter-spacing: .01em;
  white-space: nowrap;
}
.arena-id .arena-title small {
  display: block;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Statut connexion compact dans la barre */
.arena-bar .status {
  margin-left: 4px;
  font-size: .8rem;
  max-width: 38vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arena-spacer { flex: 1 1 auto; }

.arena-actions {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.arena-actions .btn-connect { min-height: 38px; }
.arena-actions .theme-toggle,
.arena-actions .icon-btn { width: 38px; height: 38px; }

/* ---------- Zone de jeu ---------- */
.arena-main {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 10px;
}
/* Les colonnes "côté" doivent pouvoir rétrécir pour le scroll interne */
.arena-main > * { min-height: 0; }

/* Panneau générique "table de jeu" */
.arena-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.arena-panel.glow-cyan {
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(34, 211, 238, .16), transparent 60%),
    linear-gradient(180deg, #0d1730, #0a1124);
}
:root[data-theme="light"] .arena-panel.glow-cyan {
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(8, 145, 178, .14), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
}
.arena-panel.glow-violet {
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(168, 85, 247, .18), transparent 60%),
    linear-gradient(180deg, #0d1730, #0a1124);
}
:root[data-theme="light"] .arena-panel.glow-violet {
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(124, 58, 237, .14), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
}

.arena-panel-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.arena-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.arena-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Chip générique */
.arena-chip {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 4px 11px;
  border-radius: var(--pill);
  color: #a9eef9;
  border: 1px solid rgba(34, 211, 238, .5);
  background: rgba(34, 211, 238, .08);
  white-space: nowrap;
}

/* ============================================================
   X01 ARENA
   ============================================================ */
.arena-x01 { grid-template-columns: 1.32fr 1fr; }

.x01-stage { padding: 14px 16px; }
.x01-stage .arena-panel-body { padding: 0; }

.x01-stage-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.x01-stage-label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Réglages de manche compacts (intégrés dans le stage) */
.x01-setup-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.x01-setup-inline .x01-select {
  min-height: 38px;
  width: auto;
  min-width: 92px;
  padding: 0 34px 0 12px;
  font-size: .9rem;
}
.x01-setup-inline .switch {
  min-height: 38px;
  padding: 0 12px;
  gap: 8px;
}
.x01-setup-inline .switch-label { font-size: .8rem; }
.x01-setup-inline .btn { min-height: 38px; padding: 0 16px; font-size: .9rem; }

/* GROS SCORE restant (centré, immersif) */
.x01-stage .x01-score {
  text-align: center;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-size: clamp(3.2rem, 17vh, 8.5rem);
  line-height: .9;
  letter-spacing: .01em;
  margin: 2px 0;
  color: #f8fbff;
  text-shadow: 0 6px 50px rgba(34, 211, 238, .3);
}
:root[data-theme="light"] .x01-stage .x01-score { color: var(--text); }

/* Slots de 3 fléchettes */
.dart-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.dart-slot {
  position: relative;
  min-height: 46px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: rgba(7, 11, 22, .45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--faint);
  overflow: hidden;
}
:root[data-theme="light"] .dart-slot { background: rgba(15, 23, 42, .04); }
.dart-slot .ds-idx {
  position: absolute;
  top: 4px; left: 8px;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--faint);
}
.dart-slot .ds-val {
  font-size: 1.15rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.dart-slot .ds-pts {
  font-size: .62rem;
  font-weight: 700;
  color: var(--muted);
}
.dart-slot.empty .ds-val { color: var(--faint); }
.dart-slot.filled {
  border-color: rgba(34, 211, 238, .55);
  background: rgba(34, 211, 238, .1);
  animation: slotFlip .34s var(--ease);
}
.dart-slot.bust {
  border-color: rgba(249, 115, 115, .7);
  background: rgba(249, 115, 115, .12);
  animation: slotFlip .34s var(--ease);
}
.dart-slot.bust .ds-val { color: var(--red); }
.dart-slot.active {
  border-color: rgba(168, 85, 247, .7);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, .4), 0 0 16px rgba(168, 85, 247, .28);
}
@keyframes slotFlip {
  0% { transform: rotateX(80deg); opacity: .2; }
  100% { transform: rotateX(0); opacity: 1; }
}

/* Barre méta compacte */
.x01-metabar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.x01-metabar .x01-meta {
  padding: 7px 9px;
  gap: 1px;
}
.x01-metabar .x01-meta-label { font-size: .6rem; }
.x01-metabar .x01-meta-value { font-size: 1.02rem; }

/* Statut de manche compact */
.x01-stage .x01-leg-status {
  margin-top: 0;
  font-size: .8rem;
  padding: 8px 12px;
}

.x01-stage .x01-actions { margin-top: 0; }
.x01-stage .x01-actions .btn-outline { min-height: 40px; font-size: .88rem; }

/* Côté droit : cible + historique empilés */
.x01-side { gap: 10px; display: flex; flex-direction: column; min-height: 0; }
.x01-side .arena-panel:first-child { flex: 1.1 1 0; }
.x01-side .arena-panel:last-child { flex: 1 1 0; }

.arena-target-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.arena-target-wrap .dart-target {
  width: auto;
  height: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  max-width: 100%;
}
.arena-target-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.arena-target-side .dart-target-label {
  font-size: .82rem;
  max-width: 130px;
}

.x01-rounds-history { margin: 0; }
.x01-side .x01-round { padding: 7px 10px; }

/* ============================================================
   CRICKET ARENA
   ============================================================ */
.arena-cricket { grid-template-columns: 1.25fr 1fr; }

.cricket-stage .arena-panel-body { padding: 8px 12px; gap: 6px; }

/* Tableau compact qui tient en hauteur */
.arena-cricket .cricket-board { gap: 5px; flex: 1 1 auto; min-height: 0; justify-content: space-between; }
.arena-cricket .cricket-row {
  grid-template-columns: 46px 1fr auto;
  gap: 10px;
  padding: 6px 12px;
}
.arena-cricket .cricket-num { font-size: 1.2rem; }
.arena-cricket .mark-slot { width: 26px; height: 26px; }
.arena-cricket .cricket-status-chip { font-size: .66rem; }

.cricket-toolbar {
  flex: none;
  display: flex;
  gap: 8px;
}
.cricket-toolbar .btn,
.cricket-toolbar .btn-outline { flex: 1; min-height: 40px; font-size: .88rem; }

/* Colonne droite cricket */
.cricket-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.cricket-side .arena-panel.cricket-score-panel { flex: none; }
.cricket-side .arena-panel.cricket-target-panel { flex: 1.1 1 0; }
.cricket-side .arena-panel.cricket-log-panel { flex: 1 1 0; }

.cricket-score-panel .arena-panel-body {
  align-items: center;
  text-align: center;
  padding: 10px 14px;
}
.cricket-score-panel .val {
  font-size: clamp(2.4rem, 11vh, 4rem);
  font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums;
  color: #f8fbff;
  text-shadow: 0 6px 40px rgba(34, 211, 238, .25);
}
:root[data-theme="light"] .cricket-score-panel .val { color: var(--text); }
.cricket-score-panel .cricket-meta { margin-top: 8px; width: 100%; }
.cricket-score-panel .cricket-meta .m { padding: 7px; }
.cricket-score-panel .cricket-meta .mv { font-size: 1.05rem; }

.cricket-log-panel .game-log { max-height: none; flex: 1 1 auto; }

/* ============================================================
   CLOCK ARENA
   ============================================================ */
.arena-clock { grid-template-columns: 1fr 1fr; }

.clock-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; }

.clock-stage .arena-panel-body {
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 8px;
}
.clock-stage .clock-next {
  font-size: clamp(3.5rem, 22vh, 9rem);
  font-weight: 900; line-height: .85; font-variant-numeric: tabular-nums;
  background: var(--accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 0;
}
.clock-stage .clock-next.pop { animation: scorePop .4s var(--ease); }
.clock-stage .clock-hint { color: var(--muted); font-size: .82rem; }
.clock-stage .clock-meta { margin-top: 6px; width: 100%; }
.clock-stage .clock-meta .m { padding: 8px; }
.clock-stage .clock-meta .mv { font-size: 1.15rem; }

.clock-controls { flex: none; display: flex; flex-direction: column; gap: 8px; }
.clock-controls .clock-modes { width: 100%; }
.clock-controls .clock-buttons { display: flex; gap: 8px; }
.clock-controls .clock-buttons .btn,
.clock-controls .clock-buttons .btn-outline { flex: 1; min-height: 40px; font-size: .88rem; }

.clock-side .arena-panel.clock-grid-panel { flex: 1.2 1 0; }
.clock-side .arena-panel.clock-target-panel { flex: 1 1 0; }
.clock-side .arena-panel.clock-log-panel { flex: 1 1 0; }

.arena-clock .clock-grid {
  margin: 0;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  flex: 1 1 auto;
  align-content: start;
}
.arena-clock .clock-cell { font-size: .85rem; }

/* ============================================================
   CIBLE — survol "néon" plus marqué dans l'arène
   ============================================================ */
.arena .dart-target { border-color: rgba(34, 211, 238, .35); }
.arena .dart-hit-dot { z-index: 2; }

/* ============================================================
   OVERLAY ROTATION (mode portrait)
   ============================================================ */
.rotate-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  place-items: center;
  text-align: center;
  padding: 28px;
  background:
    radial-gradient(80% 60% at 50% 30%, rgba(34, 211, 238, .12), transparent 60%),
    rgba(4, 7, 16, .96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
:root[data-theme="light"] .rotate-overlay {
  background:
    radial-gradient(80% 60% at 50% 30%, rgba(8, 145, 178, .14), transparent 60%),
    rgba(238, 242, 251, .97);
}
.rotate-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rotate-phone {
  font-size: 4.2rem;
  line-height: 1;
  animation: rotateHint 2.4s var(--ease) infinite;
}
@keyframes rotateHint {
  0%, 18% { transform: rotate(0deg); }
  40%, 70% { transform: rotate(-90deg); }
  92%, 100% { transform: rotate(0deg); }
}
.rotate-title {
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: .01em;
  background: var(--accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rotate-sub { color: var(--muted); font-size: .95rem; max-width: 320px; line-height: 1.5; }

/* Affiché uniquement en portrait, sur les écrans de jeu */
@media (orientation: portrait) {
  body.arena .rotate-overlay { display: grid; }
  /* On masque l'arène en portrait pour éviter un layout cassé derrière l'overlay */
  body.arena .arena-shell { filter: blur(2px); pointer-events: none; }
}

/* ============================================================
   PAYSAGE BAS (peu de hauteur) — resserrement
   ============================================================ */
@media (orientation: landscape) and (max-height: 380px) {
  .x01-stage .x01-score { font-size: clamp(2.6rem, 15vh, 6rem); }
  .dart-slot { min-height: 40px; }
  .arena-panel-head { padding: 6px 12px; }
  .arena-panel-body { padding: 9px 12px; }
}

/* ============================================================
   GRAND ÉCRAN / TABLETTE PAYSAGE
   ============================================================ */
@media (min-width: 1100px) {
  .arena-shell { max-width: 1400px; margin: 0 auto; width: 100%; }
}