/* Magique Création — cartes d'accès aux jeux V2
   Objectif : cartes plus compactes, lisibles et premium sans modifier la logique métier. */

.games-grid{
  gap:14px!important;
}

.games-grid .game-card{
  --game-accent:#7fdcff;
  --game-accent-2:#9b7cff;
  --game-glow:rgba(91,208,255,.14);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid!important;
  grid-template-columns:62px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  gap:12px 16px!important;
  min-height:0!important;
  padding:18px 18px 17px!important;
  border:1px solid rgba(188,169,230,.22)!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 92% 4%, var(--game-glow), transparent 38%),
    linear-gradient(145deg, rgba(25,24,36,.94), rgba(12,13,19,.96))!important;
  box-shadow:
    0 16px 40px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.045)!important;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.games-grid .game-card::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  top:18px;
  bottom:18px;
  width:3px;
  border-radius:0 999px 999px 0;
  background:linear-gradient(180deg,var(--game-accent),var(--game-accent-2));
  box-shadow:0 0 20px var(--game-glow);
}

.games-grid .game-card::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:150px;
  height:150px;
  right:-82px;
  top:-86px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.04);
  background:radial-gradient(circle,var(--game-glow),transparent 68%);
  pointer-events:none;
}

.games-grid .game-card[data-game-id="quiz"]{
  --game-accent:#6edcff;
  --game-accent-2:#9c7cff;
  --game-glow:rgba(89,207,255,.16);
}

.games-grid .game-card[data-game-id="puzzle"]{
  --game-accent:#f4c863;
  --game-accent-2:#a985ff;
  --game-glow:rgba(224,181,91,.14);
}

.games-grid .game-card[data-game-id="mots-en-chute"]{
  --game-accent:#62e6bd;
  --game-accent-2:#67aaff;
  --game-glow:rgba(63,220,176,.13);
}

.games-grid .game-card[data-game-id="explose-colore"]{
  --game-accent:#ff9775;
  --game-accent-2:#efc85b;
  --game-glow:rgba(255,130,95,.13);
}

.games-grid .game-card[data-game-id="nom-feminin-masculin"]{
  --game-accent:#eabf63;
  --game-accent-2:#9a79ff;
  --game-glow:rgba(234,191,99,.12);
}

.games-grid .game-card:not(.is-unavailable):hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--game-accent) 42%, rgba(188,169,230,.24))!important;
  box-shadow:
    0 20px 48px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.06)!important;
}

.games-grid .game-card .game-icon{
  grid-column:1!important;
  grid-row:1 / 3!important;
  align-self:start!important;
  display:grid!important;
  place-items:center!important;
  width:62px!important;
  height:62px!important;
  min-width:62px!important;
  min-height:62px!important;
  margin:0!important;
  border:1px solid color-mix(in srgb,var(--game-accent) 34%, transparent)!important;
  border-radius:18px!important;
  background:
    linear-gradient(145deg,var(--game-glow),rgba(154,121,255,.11))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 28px rgba(0,0,0,.2)!important;
  color:#f8f5ff!important;
  font-size:1.26rem!important;
  font-weight:950!important;
  letter-spacing:-.04em;
}

.games-grid .game-card-content{
  grid-column:2!important;
  grid-row:1!important;
  min-width:0;
  align-self:center;
}

.games-grid .game-status{
  margin:0 0 6px!important;
  padding:4px 8px!important;
  border:1px solid transparent;
  border-radius:999px!important;
  font-size:.64rem!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.075em!important;
}

.games-grid .game-status.ready{
  border-color:rgba(90,231,179,.15);
  background:rgba(37,170,124,.12)!important;
  color:#8cf0c8!important;
}

.games-grid .game-status.waiting{
  border-color:rgba(255,199,90,.16);
  background:rgba(173,127,39,.13)!important;
  color:#f5d67f!important;
}

.games-grid .game-card h3{
  margin:0 0 5px!important;
  color:#fff!important;
  font-size:1.12rem!important;
  line-height:1.16!important;
  letter-spacing:-.018em;
}

.games-grid .game-card p{
  margin:0!important;
  max-width:48ch;
  color:rgba(231,226,239,.69)!important;
  font-size:.82rem!important;
  line-height:1.42!important;
}

.games-grid .game-actions{
  grid-column:2!important;
  grid-row:2!important;
  display:flex!important;
  justify-content:flex-start!important;
  align-items:center!important;
  gap:8px!important;
  margin:0!important;
}

body.mc-ui .games-grid .game-card .game-actions button{
  width:auto!important;
  max-width:100%!important;
  min-height:42px!important;
  margin:0!important;
  padding:9px 14px!important;
  border-radius:12px!important;
  font-size:.78rem!important;
  font-weight:900!important;
  line-height:1.15!important;
  letter-spacing:-.005em;
  box-shadow:
    0 8px 22px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.16)!important;
}

body.mc-ui .games-grid .game-card:not(.is-unavailable) .game-actions button.primary{
  border-color:color-mix(in srgb,var(--game-accent) 52%, rgba(255,255,255,.3))!important;
  background:linear-gradient(135deg,var(--game-accent),var(--game-accent-2))!important;
  color:#111018!important;
  text-shadow:0 1px 0 rgba(255,255,255,.18);
}

body.mc-ui .games-grid .game-card:not(.is-unavailable) .game-actions button.primary::after{
  content:"  →";
  font-size:1rem;
  font-weight:900;
}

body.mc-ui .games-grid .game-card:not(.is-unavailable) .game-actions button.primary:not(:disabled):hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
}

.games-grid .game-card.is-unavailable{
  --game-accent:#d5b96b;
  --game-accent-2:#776b54;
  --game-glow:rgba(184,151,73,.08);
  opacity:.78;
}

body.mc-ui .games-grid .game-card.is-unavailable .game-actions button{
  border-color:rgba(219,191,112,.16)!important;
  background:rgba(117,92,38,.12)!important;
  color:#cdbd8b!important;
  box-shadow:none!important;
}

@media(max-width:760px){
  .games-grid{
    gap:11px!important;
  }

  .games-grid .game-card{
    grid-template-columns:58px minmax(0,1fr)!important;
    gap:10px 14px!important;
    padding:16px 16px 15px!important;
    border-radius:20px!important;
  }

  .games-grid .game-card::before{
    top:15px;
    bottom:15px;
  }

  .games-grid .game-card .game-icon{
    width:58px!important;
    height:58px!important;
    min-width:58px!important;
    min-height:58px!important;
    border-radius:17px!important;
    font-size:1.18rem!important;
  }

  .games-grid .game-card h3{
    font-size:1.06rem!important;
  }

  .games-grid .game-card p{
    font-size:.8rem!important;
    line-height:1.4!important;
  }

  body.mc-ui .games-grid .game-card .game-actions button{
    min-height:40px!important;
    padding:8px 13px!important;
    font-size:.75rem!important;
  }
}

@media(max-width:390px){
  .games-grid .game-card{
    grid-template-columns:52px minmax(0,1fr)!important;
    gap:9px 12px!important;
    padding:14px!important;
  }

  .games-grid .game-card .game-icon{
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    min-height:52px!important;
    border-radius:15px!important;
    font-size:1.08rem!important;
  }

  .games-grid .game-card h3{
    font-size:1rem!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .games-grid .game-card,
  .games-grid .game-actions button{
    transition:none!important;
  }
}

/* Rime Quest — carte alpha rouge, injectée UNIQUEMENT après accès confirmé par Firebase serveur. */
.games-grid .game-card.rq-owner-game-card {
  border: 1px solid #ff536e !important;
  background: linear-gradient(135deg, #541527 0%, #7d1d36 53%, #3c1a35 100%) !important;
  box-shadow: 0 8px 28px rgba(145, 17, 56, .22), inset 0 0 0 1px rgba(255, 140, 163, .16);
  color: #fff3f6;
}
.games-grid .rq-owner-game-card .game-icon {
  background: linear-gradient(145deg, #ad2b4b, #532046);
  border-color: #ff9ab366;
}
.games-grid .rq-owner-game-card .rq-owner-game-label {
  background: #a62a42; color: #ffe9ee; border: 1px solid #f67a90;
}
.games-grid .rq-owner-game-card .game-card-content h3,
.games-grid .rq-owner-game-card .game-card-content p { color: #fff5f8; }
.games-grid .rq-owner-game-card .game-actions a {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; min-height: 44px; border-radius: 12px;
  background: linear-gradient(100deg, #f13f61, #9e245b); color: #fff;
  padding: 10px 17px; font-weight: 800;
}