/* styles/views/mode-config.css — extrait de styles.css L2342-L2619. Mode-config base. */

/* ============================================================
   MODE CONFIG — écran consolidé, pleine page, ambiance arcade dark
   ============================================================ */
#view-mode-config,
#view-lobby,
#view-hexahunt{
  padding:0;
  display:none;
  min-height:100vh;min-height:100dvh;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1200px 800px at 50% -10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 60%),
    var(--bg);
}
#view-mode-config.active,
#view-lobby.active,
#view-hexahunt.active{ display:flex; }
/* Grille dots subtile qui renforce l'immersion (respecte le CRT global) */
#view-mode-config.active::before,
#view-lobby.active::before,
#view-hexahunt.active::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(circle, var(--dot-color) 1px, transparent 1.2px);
  background-size:26px 26px;
  mask-image:radial-gradient(900px 700px at 50% 50%, #000 30%, transparent 85%);
  -webkit-mask-image:radial-gradient(900px 700px at 50% 50%, #000 30%, transparent 85%);
  opacity:.5;
  pointer-events:none;
  z-index:0;
}

.mc-shell{
  flex:1;
  width:100%;
  margin:0;
  padding:40px clamp(20px, 3vw, 40px) 32px;
  display:flex;
  flex-direction:column;
  gap:28px;
  position:relative;
  z-index:1;
  min-height:100vh;min-height:100dvh;
  box-sizing:border-box;
}
/* Overlay CRT scanlines + vignette — ambiance écran d'arcade */
.mc-crt{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(80% 60% at 50% 20%, transparent 40%, rgba(0,0,0,.35) 100%),
    repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,.03) 2px, rgba(0,0,0,.03) 3px);
  mix-blend-mode:multiply;
  opacity:.6;
}
[data-theme="light"] .mc-crt{ opacity:.2; }

/* --- Bouton retour (HUD style, static, dans un topbar flow) --- */
.mc-back{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 16px 6px 12px;
  background:transparent;
  border:1px solid var(--border-strong);
  border-radius:var(--r-pill);
  color:var(--fg-dim);cursor:pointer;
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:normal;
  text-transform:none;
  transition:all .15s ease;
  align-self:flex-start;
}
.mc-topbar{
  display:flex;align-items:center;justify-content:flex-start;
  flex-shrink:0;
  margin-bottom:-8px;   /* resserre l'écart vers le header en dessous */
  gap:12px;
}
/* Theme toggle : fixed top-right viewport — même position sur toutes les vues,
   indépendamment du scroll ou de la scrollbar. */
.view-theme-toggle{
  position:fixed;
  top:16px; right:16px;
  z-index:100;
  width:36px; height:36px;
}
.mc-back:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow:0 0 16px -4px var(--accent);
}
.mc-back-arrow{font-size:10px;transition:transform .15s ease;}
.mc-back:hover .mc-back-arrow{ transform:translateX(-2px); }

/* --- Header compact --- */
.mc-head{
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  padding:12px 0 18px;
  border-bottom:1px dashed var(--border);
  position:relative;
  flex-shrink:0;
}
.mc-title{
  font-family:"Unbounded", var(--sans);
  font-size:44px;font-weight:700;letter-spacing:-.88px;line-height:1;
  margin:0;color:var(--fg);
}
.mc-tag{
  color:var(--fg-dim);font-size:14px;margin:0;max-width:560px;
  line-height:1.4;
}

.mc-body{
  flex:1;
  display:flex;flex-direction:column;gap:20px;
  min-height:0;
}
.mc-cta-wrap{ margin-top:auto; }

.mc-section{
  display:flex;flex-direction:column;gap:14px;
}
.mc-info-line{
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  color:var(--muted);
  padding:10px 14px;
  border:1px dashed var(--border); border-radius:8px;
  background:color-mix(in srgb, var(--panel) 40%, transparent);
}
.mc-section-head{
  display:flex;align-items:center;gap:12px;
}
.mc-section-num{
  font-family:var(--mono);font-size:12px;letter-spacing:.6px;font-weight:600;
  color:var(--accent);
  padding:2px 10px;
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--accent) 8%, var(--panel));
}
.mc-section-lbl{
  font-family:var(--mono);font-size:12px;letter-spacing:.6px;font-weight:500;
  color:var(--fg-dim);text-transform:uppercase;
}

.mc-pills{
  display:flex;gap:14px;flex-wrap:wrap;
}
.mc-pill{
  position:relative;
  display:flex;align-items:center;gap:14px;
  background:color-mix(in srgb, var(--panel) 85%, transparent);
  border:1px solid var(--border-strong);
  border-radius:var(--r-card);
  padding:14px 20px;
  cursor:pointer;text-align:left;color:var(--fg);
  min-width:200px;
  font-family:var(--sans);
  box-shadow:var(--sh-card);
  transition:border-color .18s ease, transform .12s ease, box-shadow .2s ease, background .15s ease;
  overflow:hidden;
}
.mc-pill::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 50%);
  opacity:0;transition:opacity .25s ease;
}
.mc-pill:hover{
  border-color:var(--accent-dim);
  transform:translateY(-2px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent),
    0 14px 40px rgba(0,0,0,.35);
}
.mc-pill:hover::before{ opacity:1; }
.mc-pill.active{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, var(--panel));
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 28px color-mix(in srgb, var(--accent) 35%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--accent) 12%, transparent);
  animation:mc-pill-pulse 2.4s ease-in-out infinite;
}
@keyframes mc-pill-pulse{
  0%,100%{ box-shadow:
    0 0 0 1px var(--accent),
    0 0 28px color-mix(in srgb, var(--accent) 30%, transparent),
    inset 0 0 20px color-mix(in srgb, var(--accent) 10%, transparent);
  }
  50%    { box-shadow:
    0 0 0 1px var(--accent),
    0 0 40px color-mix(in srgb, var(--accent) 50%, transparent),
    inset 0 0 28px color-mix(in srgb, var(--accent) 16%, transparent);
  }
}
.mc-pill.active::after{
  content:"▸";position:absolute;right:10px;top:50%;transform:translateY(-50%);
  color:var(--accent);font-size:10px;
  text-shadow:0 0 8px var(--accent);
}
.mc-pill.disabled,
.mc-pill[disabled]{
  opacity:.35;cursor:not-allowed;filter:saturate(.3);
  pointer-events:none;
}
.mc-pill.disabled:hover{ transform:none; box-shadow:none; border-color:var(--border); }
.mc-pill-icon{
  font-size:22px;line-height:1;
  width:40px;height:40px;border-radius:var(--r-small);
  background:var(--panel-2);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);
  color:var(--accent);
  flex-shrink:0;
}
.mc-pill.active .mc-pill-icon{
  background:color-mix(in srgb, var(--accent) 22%, var(--panel-2));
  border-color:var(--accent);
  box-shadow:inset 0 0 16px color-mix(in srgb, var(--accent) 30%, transparent);
}
.mc-pill-body{display:flex;flex-direction:column;gap:3px;min-width:0;}
.mc-pill-label{
  font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.2px;
  display:inline-flex;align-items:center;gap:8px;
  text-transform:none;
}
.mc-pill-sub{
  font-family:var(--sans);font-size:13px;font-weight:400;
  color:var(--fg-dim);letter-spacing:normal;
}
.mc-pill-chip{
  font-family:var(--mono);font-size:10px;letter-spacing:.6px;font-weight:600;
  padding:2px 8px;border-radius:var(--r-pill);
  background:var(--accent);color:#0a0a0a;
  text-transform:uppercase;
}

/* CTA principale — harmonisé au design system Mintlify (pill, Inter) */
.mc-cta-wrap{
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  padding-top:12px;
}
.mc-cta{
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--accent);color:#0a0a0a;
  border:none;
  border-radius:var(--r-pill);
  padding:12px 28px;cursor:pointer;
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:normal;
  text-transform:none;
  transition:transform .14s ease, box-shadow .2s ease, filter .2s ease;
  overflow:hidden;
  z-index:1;
  box-shadow:var(--sh-btn), var(--sh-glow);
}
.mc-cta-glow{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform:translateX(-110%);
  transition:transform .5s ease;
}
.mc-cta:hover{
  transform:translateY(-2px);
  box-shadow:var(--sh-btn), 0 0 40px -4px var(--accent);
  background:#00ffe6;
}
.mc-cta:hover .mc-cta-glow{ transform:translateX(110%); }
.mc-cta:active{ transform:translateY(0); }
.mc-cta-arrow{font-size:14px;transition:transform .2s ease;}
.mc-cta:hover .mc-cta-arrow{ transform:translateX(3px); }
.mc-cta-hint{
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;font-weight:500;
  color:var(--muted);text-transform:uppercase;
}