/* ============================================================
   MAISON DE JEUX — Hub
   Direction : arcade nocturne, verre dépoli, accents néon
   ============================================================ */
:root{
  --bg:        #0a0e1a;
  --bg-2:      #0e1424;
  --surface:   rgba(255,255,255,0.04);
  --surface-2: rgba(255,255,255,0.07);
  --line:      rgba(255,255,255,0.09);
  --line-2:    rgba(255,255,255,0.14);
  --text:      #eef1f8;
  --text-soft: #9aa3bd;
  --text-dim:  #626b86;
  --cluedo:    #f472b6;
  --guesswho:  #5eead4;
  --motdepasse:#a78bfa;
  --accent:    #5eead4;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:  'Inter', system-ui, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

/* ---------- Fonds décoratifs ---------- */
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(94,234,212,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,234,212,0.035) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 75%);
}
.bg-glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(50% 40% at 15% 10%, rgba(167,139,250,0.16), transparent 70%),
    radial-gradient(45% 35% at 85% 5%, rgba(94,234,212,0.12), transparent 70%),
    radial-gradient(50% 45% at 50% 100%, rgba(244,114,182,0.10), transparent 70%);
}

/* ---------- Header ---------- */
.hub-header{
  position:relative; z-index:1;
  text-align:center;
  padding:calc(48px + env(safe-area-inset-top)) 20px 24px;
}
.hub-logo{width:64px; height:64px; margin:0 auto 20px;}
.hub-logo svg{width:100%; height:100%; filter:drop-shadow(0 4px 20px rgba(94,234,212,0.35));}
.hub-header h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:2rem;
  letter-spacing:-0.02em;
  background:linear-gradient(120deg, #fff, #b9c0d8);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hub-sub{color:var(--text-soft); font-size:0.95rem; margin-top:6px; letter-spacing:0.01em;}

/* ---------- Grille de jeux ---------- */
.hub-grid{
  position:relative; z-index:1;
  max-width:560px; margin:0 auto;
  padding:12px 16px 40px;
  display:flex; flex-direction:column; gap:14px;
}
.game-tile{
  position:relative;
  display:flex; align-items:center; gap:16px;
  padding:18px;
  border-radius:20px;
  background:var(--surface);
  border:1px solid var(--line);
  text-decoration:none;
  color:var(--text);
  overflow:hidden;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:transform .2s cubic-bezier(.2,.7,.3,1), border-color .2s, background .2s;
}
.game-tile::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 100% at 0% 0%, var(--tile-color), transparent 55%);
  opacity:0.10; transition:opacity .25s;
}
.game-tile:active{transform:scale(0.98);}
.game-tile:hover{border-color:var(--tile-line); background:var(--surface-2);}
.game-tile:hover::before{opacity:0.18;}

.tile-cluedo{--tile-color:var(--cluedo); --tile-line:rgba(244,114,182,0.5);}
.tile-guesswho{--tile-color:var(--guesswho); --tile-line:rgba(94,234,212,0.5);}
.tile-motdepasse{--tile-color:var(--motdepasse); --tile-line:rgba(167,139,250,0.5);}

.tile-art{
  position:relative; z-index:1;
  flex:none; width:62px; height:62px;
  display:flex; align-items:center; justify-content:center;
  border-radius:16px;
  background:rgba(0,0,0,0.25);
  border:1px solid var(--line);
  color:var(--tile-color);
}
.tile-art svg{width:40px; height:40px; filter:drop-shadow(0 2px 8px currentColor);}
.tile-info{position:relative; z-index:1; flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.tile-name{font-family:var(--font-display); font-weight:600; font-size:1.18rem; letter-spacing:-0.01em;}
.tile-desc{color:var(--text-soft); font-size:0.85rem;}
.tile-players{
  position:relative; z-index:1; flex:none;
  font-family:var(--font-display); font-weight:600; font-size:0.8rem;
  color:var(--tile-color);
  padding:5px 11px; border-radius:20px;
  background:rgba(0,0,0,0.3); border:1px solid var(--tile-line);
}

/* ---------- Footer ---------- */
.hub-footer{
  position:relative; z-index:1;
  text-align:center; padding:0 24px calc(32px + env(safe-area-inset-bottom));
}
.hub-footer p{color:var(--text-dim); font-size:0.8rem; max-width:340px; margin:0 auto; line-height:1.6;}