/* LOT SC39 — page d'accueil Grid Broker. Direction artistique du jeu : or/cyan, matière,
   relief, ombres portées (jamais plat). L'ombre portée des jaquettes réutilise la variable
   partagée --win-shadow (définie dans shadow-vars.css, extraite de style.css, niveau B). */

:root {
  --gold: #f6c860;
  --cyan: #5fd8e8;
  --ink: #0b0e12;
  --panel: #11151b;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: #eaf2f5;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.home {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: clamp(16px, 3vh, 40px) clamp(16px, 3vw, 56px) clamp(24px, 4vh, 56px);
}

/* Fond = décor du jeu, assombri et vignetté pour laisser respirer les jaquettes. */
.home__bg {
  position: absolute;
  inset: 0;
  background: #05070a url("/assets/grid-broker/backgrounds/background_base.webp") center/cover no-repeat;
  transform: scale(1.06);
  filter: saturate(0.9) brightness(0.52);
  z-index: 0;
}
.home__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(8, 12, 16, 0.2), rgba(4, 6, 9, 0.86) 78%),
    linear-gradient(180deg, rgba(4, 6, 9, 0.45), rgba(4, 6, 9, 0.2) 40%, rgba(4, 6, 9, 0.72));
  z-index: 1;
}

.home__head,
.home__grid { position: relative; z-index: 2; width: 100%; }

.home__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(6px, 1.2vh, 14px);
  margin-bottom: clamp(14px, 3vh, 34px);
}

.home__title {
  width: min(42vw, 460px);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 22px rgba(95, 216, 232, 0.18));
}

.home__tagline {
  margin: 0;
  font-size: clamp(14px, 1.7vw, 20px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cfe7ec;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.home__langs {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 6px;
}
.home__lang {
  appearance: none;
  border: 1px solid rgba(146, 176, 184, 0.45);
  background: rgba(14, 20, 26, 0.7);
  color: #bcd4d9;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 5px 9px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.15s, color 0.15s, transform 0.1s;
}
.home__lang:hover { color: #eaf7fa; border-color: var(--cyan); }
.home__lang[aria-current="true"] {
  color: var(--ink);
  background: linear-gradient(180deg, #ffe7a6, var(--gold));
  border-color: #ffe7a6;
}

/* Trois jaquettes côte à côte (format paysage du jeu). */
.home__grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.6vw, 44px);
  align-items: center;
  justify-items: center;
  max-width: 1280px;
  margin: 0 auto;
}

.jaquette {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.4vh, 16px);
  text-decoration: none;
  color: inherit;
  width: 100%;
  max-width: 340px;
}

.jaquette__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  padding: 6px;
  /* Cadre biseauté métallique (relief, jamais plat). */
  background:
    linear-gradient(145deg, rgba(255, 236, 184, 0.55), rgba(60, 48, 24, 0.5) 42%, rgba(10, 14, 18, 0.6));
  box-shadow: var(--win-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.jaquette__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
  background: #0a0d11;
}
/* Lueur de survol : balayage lumineux diagonal. */
.jaquette__sheen {
  position: absolute;
  inset: 6px;
  border-radius: 9px;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 38%, rgba(255, 255, 255, 0.18) 50%, transparent 62%);
  opacity: 0;
  transition: opacity 0.2s ease;
  mix-blend-mode: screen;
}

.jaquette:hover .jaquette__frame,
.jaquette:focus-visible .jaquette__frame {
  transform: translateY(-8px) scale(1.025);
  filter: brightness(1.06);
  box-shadow: var(--win-shadow), 0 0 0 1px rgba(95, 216, 232, 0.55),
    0 0 34px rgba(95, 216, 232, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.jaquette:hover .jaquette__sheen,
.jaquette:focus-visible .jaquette__sheen { opacity: 1; }
.jaquette:focus-visible { outline: none; }

/* Accent de cadre par version. */
.jaquette[data-variant="rush"] .jaquette__frame {
  background: linear-gradient(145deg, rgba(255, 176, 120, 0.6), rgba(80, 36, 12, 0.5) 42%, rgba(12, 10, 10, 0.6));
}
.jaquette[data-variant="rush"]:hover .jaquette__frame,
.jaquette[data-variant="rush"]:focus-visible .jaquette__frame {
  box-shadow: var(--win-shadow), 0 0 0 1px rgba(255, 150, 90, 0.6), 0 0 34px rgba(255, 130, 60, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.jaquette[data-variant="tactics"] .jaquette__frame {
  background: linear-gradient(145deg, rgba(198, 222, 232, 0.55), rgba(40, 56, 68, 0.5) 42%, rgba(10, 14, 18, 0.6));
}
.jaquette[data-variant="tactics"]:hover .jaquette__frame,
.jaquette[data-variant="tactics"]:focus-visible .jaquette__frame {
  box-shadow: var(--win-shadow), 0 0 0 1px rgba(150, 196, 220, 0.6), 0 0 34px rgba(90, 150, 200, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.jaquette__cta {
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffe7a6;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 14px rgba(246, 200, 96, 0.4);
}
.jaquette[data-variant="rush"] .jaquette__cta { color: #ffc79a; text-shadow: 0 2px 4px rgba(0,0,0,.8), 0 0 14px rgba(255,140,70,.4); }
.jaquette[data-variant="tactics"] .jaquette__cta { color: #bfe0ec; text-shadow: 0 2px 4px rgba(0,0,0,.8), 0 0 14px rgba(120,180,220,.4); }

.jaquette__desc {
  font-size: clamp(11px, 1.05vw, 13px);
  line-height: 1.35;
  text-align: center;
  color: #aebec4;
  max-width: 30ch;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Portrait (téléphone) : même consigne que le jeu — tourner l'appareil. */
.home-rotate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 6, 9, 0.94);
  padding: 24px;
  text-align: center;
}
.home-rotate[hidden] { display: none; }
.home-rotate__card {
  max-width: 24ch;
  font-size: clamp(16px, 4.5vw, 22px);
  line-height: 1.4;
  color: #eaf2f5;
}
.home-rotate__icon {
  font-size: 54px;
  color: var(--cyan);
  margin-bottom: 12px;
  animation: home-rotate-spin 2.4s ease-in-out infinite;
}
@keyframes home-rotate-spin {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(78deg); }
}
@media (prefers-reduced-motion: reduce) {
  .home-rotate__icon { animation: none; }
  .jaquette__frame { transition: none; }
}

/* En portrait, on bloque l'accueil (scène paysage) et on affiche le message. */
@media (orientation: portrait) and (max-width: 820px) {
  .home { display: none; }
}