/* ============================================================
   MapleCasinoCanada Demos — reproductor (tema claro)  ·  v0.4 (rediseño)
   UNA sola área 16:9: el póster cubre todo; al pulsar Play el juego
   arranca en la MISMA área (iframe absoluto). Atenuado AZUL (celeste),
   botón AZUL (el oro queda para CTA real-money). Clases mcc-demo-*.
   ============================================================ */

.mcc-demo-container{
  position:relative;
  width:100%;
  aspect-ratio:16/9;            /* área limpia, sin zona muerta gris */
  margin:0 0 var(--tca-sp-3,1rem);
  border-radius:var(--tca-radius,16px);
  overflow:hidden;
  background:var(--tca-celeste-100,#eaf3fc) center/cover no-repeat;
  border:1px solid var(--tca-borde,#e4ebf3);
  box-shadow:var(--tca-shadow,0 6px 18px -6px rgba(19,36,59,.16));
}
.mcc-demo-container iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:#fff;
  z-index:1;
}

/* ---------- Overlay (póster + Play) — atenuado AZUL ---------- */
.mcc-demo-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;            /* Play centrado en el área del demo */
  justify-content:center;
  padding:var(--tca-sp-6,2rem);
  background:
    radial-gradient(120% 80% at 50% 120%, rgba(11,58,102,.55), transparent 60%),
    linear-gradient(180deg, rgba(13,84,143,.10) 0%, rgba(11,58,102,.40) 100%);
  text-align:center;
  transition:opacity .3s ease;
  z-index:3;
}
.mcc-demo-overlay--hidden{opacity:0;pointer-events:none;}
.mcc-demo-overlay__content{
  display:flex;flex-direction:column;align-items:center;gap:.85rem;max-width:440px;
}
.mcc-demo-overlay__play{
  display:inline-flex;align-items:center;gap:.6rem;border:0;cursor:pointer;
  padding:.95rem 1.9rem;border-radius:var(--tca-radius-pill,999px);
  font:700 1.0625rem/1 var(--tca-font-body,system-ui,sans-serif);letter-spacing:-.01em;
  color:#fff;
  background:var(--tca-bandera,#74acdf);
  box-shadow:0 10px 26px -8px rgba(11,58,102,.55);
  transition:transform .18s,box-shadow .18s,background .18s;
}
.mcc-demo-overlay__play:hover{transform:translateY(-2px) scale(1.02);background:var(--tca-bandera-600,#5b9bd3);color:#fff;box-shadow:0 16px 34px -10px rgba(11,58,102,.6);}
.mcc-demo-overlay__play[disabled]{opacity:.7;cursor:default;transform:none;}

/* estado de error */
.mcc-demo-overlay__content--error .mcc-demo-overlay__msg{color:#fff;}
.mcc-demo-overlay__msg-title{margin:.5rem 0 .25rem;font-weight:700;font-size:1.0625rem;color:#fff;}
.mcc-demo-overlay__msg-sub{margin:0;font-size:.85rem;opacity:.92;color:#fff;}
.mcc-demo-container--unavailable{background-color:var(--tca-celeste-100,#eaf3fc);}

/* ---------- Control flotante (tras Play): pantalla completa ---------- */
.mcc-demo-bar{
  position:absolute;top:.6rem;right:.6rem;z-index:4;
  display:flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  padding:.3rem;border-radius:var(--tca-radius-pill,999px);box-shadow:var(--tca-shadow-sm);
}
.mcc-demo-bar__fs{
  display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;border:0;background:transparent;
  padding:.4rem .8rem;border-radius:var(--tca-radius-pill,999px);
  color:var(--tca-celeste-700,#1d6fb8);font:700 .8125rem/1 var(--tca-font-body,system-ui,sans-serif);
}
.mcc-demo-bar__fs:hover{background:var(--tca-celeste-100,#eaf3fc);}
.mcc-demo-bar__fs-icon--exit{display:none;}
.mcc-demo-bar--fs .mcc-demo-bar__fs-icon--expand{display:none;}
.mcc-demo-bar--fs .mcc-demo-bar__fs-icon--exit{display:inline-flex;}

/* ---------- Selector de espejos (flotante abajo) ---------- */
.mcc-demo-mirrors{
  position:absolute;left:.6rem;bottom:.6rem;z-index:4;
  display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;
  padding:.4rem .6rem;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border-radius:var(--tca-radius-pill,999px);box-shadow:var(--tca-shadow-sm);max-width:calc(100% - 1.2rem);
}
.mcc-demo-mirrors__label{font-size:.74rem;color:var(--tca-gris-500,#6b7a8c);margin-right:.2rem;}
.mcc-demo-mirrors__btn{
  display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;
  border:1px solid var(--tca-celeste-300,#bcdcf6);background:#fff;
  padding:.25rem .55rem;border-radius:var(--tca-radius-pill,999px);
  font:600 .76rem/1 var(--tca-font-body,system-ui,sans-serif);color:var(--tca-celeste-700,#1d6fb8);transition:.15s;
}
.mcc-demo-mirrors__btn:hover{border-color:var(--tca-celeste-700,#1d6fb8);}
.mcc-demo-mirrors__btn-num{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;
  background:var(--tca-celeste-100,#eaf3fc);font-size:.68rem;}
.mcc-demo-mirrors__btn--active{background:var(--tca-celeste-700,#1d6fb8);color:#fff;border-color:var(--tca-celeste-700,#1d6fb8);}
.mcc-demo-mirrors__btn--active .mcc-demo-mirrors__btn-num{background:rgba(255,255,255,.25);color:#fff;}
.mcc-demo-mirrors__btn--loading{opacity:.6;}
.mcc-demo-mirrors__btn--broken{opacity:.45;text-decoration:line-through;cursor:not-allowed;}

/* ---------- Reintento ---------- */
.mcc-demo-retry{margin:.5rem 0 1rem;font-size:.85rem;color:var(--tca-gris-500,#6b7a8c);text-align:center;}
.mcc-demo-retry__btn{color:var(--tca-celeste-700,#1d6fb8);font-weight:600;}

/* ---------- Nota demo (oculta por pedido) ---------- */
.mcc-demo__nota{display:none;}

/* ---------- Pantalla completa ---------- */
.mcc-demo-fs--active{
  position:fixed;inset:0;z-index:9999;margin:0;border-radius:0;border:0;
  aspect-ratio:auto;width:100vw;height:100vh;
}
.mcc-demo-fs--active iframe{inset:0;height:100%;}

@media(max-width:560px){
  .mcc-demo-mirrors__label{display:none;}
}