/* ==========================================================================
   Responsive
   - Mobile / tablette portrait : layout.css (par défaut)
   - Desktop / tablette paysage : scène 3:2 calée sur la maquette 1536×1024.
     --u = 1 pixel de la maquette desktop, quelle que soit la taille d'écran.
   ========================================================================== */

/* Petits téléphones : on garde des portes ≥ 44 px */
/* Petits téléphones (< 380 px) : le calendrier s'élargit, Ruman passe
   derrière la première colonne de portes pour garder des portes ≥ 44 px */
@media (max-width: 379px) {
  .calendar { --cal-w: 91cqw; margin-left: 6cqw; }
  .mascot { width: 27cqw; left: -9cqw; }
}

/* Tablette portrait : contenu centré, décor élargi */
@media (min-width: 561px) {
  .backdrop { display: block; position: fixed; inset: 0; z-index: -3; background: radial-gradient(ellipse at 50% 30%, #1a2a78, #08113a 70%); }
}

@media (min-width: 900px) and (min-aspect-ratio: 6/5) {
  /* ---- Page : fond « nuit de Noël » + scène encadrée de 1280 px max ---- */
  body { display: grid; place-items: center; min-height: 100vh; min-height: 100svh; padding: 28px; }

  .backdrop {
    display: block; position: fixed; inset: 0; z-index: -3; overflow: hidden;
    background:
      /* étoiles (3 tailles, motifs répétés décalés) */
      radial-gradient(1.5px 1.5px at 20px 30px, rgba(255,255,255,.85) 50%, transparent 52%) 0 0 / 180px 160px,
      radial-gradient(1px 1px at 90px 110px, rgba(255,255,255,.6) 50%, transparent 52%) 0 0 / 220px 190px,
      radial-gradient(2px 2px at 140px 60px, rgba(255,236,190,.75) 50%, transparent 52%) 0 0 / 310px 270px,
      /* ciel */
      linear-gradient(180deg, #060d33 0%, #0d1a55 45%, #1a2468 75%, #251f52 100%);
  }
  /* Sol enneigé en bas de page */
  .backdrop::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22vh;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath d='M0 120C160 70 300 90 460 110s300 40 470 0 330-70 510-20v130H0Z' fill='%23aab7e6' opacity='.35'/%3E%3Cpath d='M0 150c180-40 360-30 540 0s340 30 520 0 260-40 380-20v90H0Z' fill='%23dfe7ff' opacity='.55'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  }

  .stage {
    --u: calc(100cqw / 1536);
    width: min(1280px, calc(100vw - 56px), calc((100vh - 56px) * 1.5));
    width: min(1280px, calc(100vw - 56px), calc((100svh - 56px) * 1.5));
    max-width: none;
    min-height: 0;
    aspect-ratio: 3 / 2;
    border-radius: 22px;
    /* cadre bois + filet doré */
    box-shadow:
      0 0 0 5px #4a2310,
      0 0 0 7px #c9953f,
      0 24px 60px rgba(0,0,0,.6);
  }

  .scene-bg { background: none; border-radius: inherit; }
  .scene-bg picture, .scene-bg img { position: absolute; inset: 0; width: 100%; height: 100%; left: 0; transform: none; }
  .scene-bg::after { display: none; }

  /* Le jeu s'ouvre dans le cadre (le bouton plein écran reste disponible) */
  .stage > .game { position: absolute; inset: 0; width: auto; height: auto; z-index: 60; border-radius: inherit; overflow: hidden; }

  /* ---- En-tête ---- */
  .brand { left: calc(var(--u) * 100); top: calc(var(--u) * 10); width: calc(var(--u) * 370); transform: none; filter: drop-shadow(0 calc(var(--u)*10) calc(var(--u)*14) rgba(0,0,0,.45)); }
  .burger { display: none; }

  .mainnav { display: block; position: absolute; left: calc(var(--u) * 456); top: calc(var(--u) * 15); }
  .mainnav ul { height: calc(var(--u) * 62); padding: 0 calc(var(--u) * 6); gap: calc(var(--u) * 4); }
  .mainnav a { height: calc(var(--u) * 50); padding: 0 calc(var(--u) * 19); font-size: calc(var(--u) * 21.5); }
  .mainnav a.is-active { padding: 0 calc(var(--u) * 26); }

  .usermenu { left: calc(var(--u) * 1338); right: auto; top: calc(var(--u) * 17); }
  .usermenu__btn { height: calc(var(--u) * 56); min-height: 0; padding: 0 calc(var(--u) * 20) 0 calc(var(--u) * 24); gap: calc(var(--u) * 12); font-size: calc(var(--u) * 21); }

  /* ---- Accueil : positions absolues reprises de la maquette ---- */
  .home { position: static; display: block; padding: 0; }

  .calendar { --cal-w: calc(var(--u) * 652); position: absolute; left: calc(var(--u) * 322); top: calc(var(--u) * 232); margin: 0; }
  .calendar__body {
    --post-l: calc(var(--u) * 90);
    --post-r: calc(var(--u) * 68);
    --base: calc(var(--u) * 38);
    height: calc(var(--u) * 421);
    padding: calc(var(--u) * 2) calc(var(--u) * 8) calc(var(--u) * 6);
  }
  .doors { height: 100%; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); gap: calc(var(--u) * 16) calc(var(--u) * 15); }
  .door { aspect-ratio: auto; height: 100%; min-height: 0; font-size: calc(var(--u) * 16.5); }
  .door-slot--filler { display: none; }

  .mascot { left: calc(var(--u) * -227); top: calc(var(--u) * 93); bottom: auto; width: calc(var(--u) * 360); }
  .lantern { width: calc(var(--u) * 63); bottom: auto; }
  .lantern--left { display: block; left: calc(var(--u) * 40); top: calc(var(--u) * 528); transform: scaleX(-1); }
  .lantern--right { right: auto; left: calc(var(--u) * 594); top: calc(var(--u) * 521); }

  /* Panneau : 4 rangées (série, jokers, tickets, badges) */
  .panel {
    position: absolute; left: calc(var(--u) * 955); top: calc(var(--u) * 455);
    width: calc(var(--u) * 465); height: calc(var(--u) * 505); margin: 0;
    border-image-source: url("../assets/images/ui/panel-desktop@2x.webp");
    border-image-slice: 120 70 150 70 fill;
    border-width: calc(var(--u) * 60) calc(var(--u) * 35) calc(var(--u) * 75) calc(var(--u) * 35);
    filter: drop-shadow(0 calc(var(--u)*12) calc(var(--u)*16) rgba(0,0,0,.45));
  }
  .panel__inner {
    height: 100%;
    margin: calc(var(--u) * -10) 0 0;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas: "streak" "jokers" "tickets" "badges";
  }
  .stat { padding: 0 calc(var(--u) * 6) 0 calc(var(--u) * 4); gap: 0 calc(var(--u) * 14); border-radius: calc(var(--u) * 10); }
  .stat--streak, .stat--jokers { grid-template-columns: calc(var(--u) * 80) 1fr auto; }
  .stat--tickets { grid-template-columns: calc(var(--u) * 80) auto 1fr auto; }
  .stat--badges { grid-template-columns: 1fr auto; }
  .stat--jokers::before { display: none; }
  .stat--jokers::after, .stat--tickets::before, .stat--badges::before {
    content: ""; position: absolute; left: calc(var(--u) * 4); right: calc(var(--u) * 8); top: 0; height: 2px; width: auto; bottom: auto;
    background: linear-gradient(90deg, #a87635, #e2b25a 50%, #a87635);
  }
  .stat--jokers::after { top: 0; }
  .stat__icon, .stat--jokers .stat__icon { display: block; width: calc(var(--u) * 72); justify-self: center; filter: drop-shadow(0 calc(var(--u)*4) calc(var(--u)*5) rgba(0,0,0,.4)); }
  .stat--streak .stat__icon { width: calc(var(--u) * 64); }
  .stat--tickets .stat__icon { width: calc(var(--u) * 80); }
  .stat--jokers .stat__body { align-items: flex-start; }
  .stat__body { gap: calc(var(--u) * 4); }
  .stat__label { font-size: calc(var(--u) * 21); }
  .stat__info { display: none; }
  .stat__value { column-gap: calc(var(--u) * 8); }
  .stat__value strong { font-size: calc(var(--u) * 36); }
  .stat__unit { font-size: calc(var(--u) * 29); color: #fff; }
  .stat__sub { font-size: calc(var(--u) * 21); padding-left: calc(var(--u) * 28); }
  .stat__of { font-size: calc(var(--u) * 26); padding-left: calc(var(--u) * 4); }
  .stat__caption { font-size: calc(var(--u) * 19); padding-left: calc(var(--u) * 10); }
  .stat__go { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
  .go-d { display: block; } .go-m { display: none; }
  .pips { gap: calc(var(--u) * 5); }
  .pips img { width: calc(var(--u) * 32); }
  .pips--tickets { gap: calc(var(--u) * 2); }
  .pips--tickets img, .pips--tickets svg { width: calc(var(--u) * 40); }
  .stat--badges .stat__body { flex-direction: row; align-items: center; gap: calc(var(--u) * 12); }
  .stat--badges .stat__label { white-space: nowrap; }
  .badges { gap: calc(var(--u) * 4); }
  .badge { gap: 0; }
  .badge img { width: calc(var(--u) * 50); }
  .badge__label { font-size: calc(var(--u) * 15); }
  .badge__check { width: calc(var(--u) * 18); height: calc(var(--u) * 18); border-width: 1px; top: 38%; right: 12%; }

  .cta-wrap { position: absolute; left: calc(var(--u) * 505); top: calc(var(--u) * 887); width: calc(var(--u) * 525); margin: 0; bottom: auto; }
  .cta {
    height: calc(var(--u) * 81); min-height: 0; gap: calc(var(--u) * 24);
    border-width: calc(var(--u) * 3.5);
    font-size: calc(var(--u) * 32);
    box-shadow:
      inset 0 0 0 calc(var(--u)*2) rgba(120,55,10,.9),
      inset 0 calc(var(--u)*-6) calc(var(--u)*12) rgba(0,0,0,.35),
      0 0 calc(var(--u)*8) calc(var(--u)*1) rgba(255,184,50,.75),
      0 calc(var(--u)*6) calc(var(--u)*14) rgba(0,0,0,.45);
    animation: none;
  }
  .cta__icon { width: calc(var(--u) * 58); height: calc(var(--u) * 58); }
  .cta__arrow { width: calc(var(--u) * 34); height: calc(var(--u) * 34); }

  .toast { bottom: 40px; }
}

/* Desktop : la série reprend la disposition de la maquette (« 9 jours » / « consécutifs ») */
@media (min-width: 900px) and (min-aspect-ratio: 6/5) {
  .stat--streak { grid-template-columns: calc(var(--u) * 80) 1fr auto; gap: 0 calc(var(--u) * 14); }
  .stat--streak .stat__go { display: grid; }
  .stat--streak .stat__value { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: calc(var(--u) * 8); }
  .stat--streak .stat__value strong { line-height: .95; }
  .stat--streak .stat__sub { flex-basis: 100%; padding-left: calc(var(--u) * 28); margin-top: calc(var(--u) * -4); }
}