/* ══════════════════════════════════════════════════════════════
   hub.css — La Confrérie · Portail Central
   ══════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --bg:   #07070f;
  --bg2:  #0d0d1a;
  --bg3:  #111120;

  /* Gold — Tournoi */
  --gold:       #c9a84c;
  --gold-light: #e8cc88;
  --gold-dark:  #8a6a28;
  --gold-a15:   rgba(201,168,76,.15);
  --gold-a30:   rgba(201,168,76,.30);
  --gold-a08:   rgba(201,168,76,.08);

  /* Violet — OTS/WCQ */
  --violet:       #8b5cf6;
  --violet-light: #c4b5fd;
  --violet-a15:   rgba(139,92,246,.15);
  --violet-a30:   rgba(139,92,246,.30);
  --violet-a08:   rgba(139,92,246,.08);

  /* Red — Collection */
  --red:       #b03030;
  --red-light: #e07060;
  --red-a15:   rgba(176,48,48,.15);
  --red-a30:   rgba(176,48,48,.30);
  --red-a08:   rgba(176,48,48,.08);

  /* Discord */
  --discord:       #5865f2;
  --discord-light: #8e97f5;
  --discord-a15:   rgba(88,101,242,.15);
  --discord-a30:   rgba(88,101,242,.30);
  --discord-a08:   rgba(88,101,242,.08);


  /* Teal — Boutique */
  --teal:        #0ea5a0;
  --teal-light:  #5eead4;
  --teal-a08:    rgba(14,165,160,.08);
  --teal-a15:    rgba(14,165,160,.15);
  --teal-a30:    rgba(14,165,160,.30);

  /* Text */
  --text:       #f0ead6;
  --text-muted: #6a6458;

  /* Border */
  --border:   rgba(255,255,255,.06);
  --border-h: rgba(201,168,76,.35);

  /* Motion */
  --ease: cubic-bezier(.22,1,.36,1);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}
::selection { background: rgba(201,168,76,.22); }

/* ── Background ─────────────────────────────────────────────── */
.bg-canvas {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
}
.bg-canvas::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 860px; height: 860px;
  transform: translate(-50%,-50%);
  background: radial-gradient(ellipse,
    rgba(201,168,76,.055) 0%,
    rgba(139,92,246,.03) 40%,
    transparent 70%);
  animation: breathe 9s ease-in-out infinite;
}
.bg-canvas::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,.025) 1px, transparent 1px);
  background-size: 56px 56px;
}
.particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

/* ── App shell ──────────────────────────────────────────────── */
.app {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  padding: 52px 20px 72px;
}

/* ══════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════ */
.header {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  margin-bottom: 52px;
  animation: fade-down .7s var(--ease) both;
}

.logo-wrap {
  position: relative;
  width: 144px; height: 144px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.logo-img {
  display: block;
  width: 120px; height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-dark);
  box-shadow:
    0 0 0 6px var(--gold-a08),
    0 0 40px rgba(201,168,76,.18),
    0 0 80px var(--gold-a08);
  animation: logo-glow 4s ease-in-out infinite;
}
.logo-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: var(--gold);
  border-right-color: rgba(201,168,76,.28);
  animation: orbit 6s linear infinite;
}

.title-block {
  display: flex; flex-direction: column; align-items: center;
}
.title-main {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.05;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.title-sub {
  font-family: 'DM Mono', monospace;
  font-size: 11px; letter-spacing: .28em;
  color: var(--text-muted); text-transform: uppercase;
}
.divider {
  display: flex; align-items: center;
  gap: 16px; margin-top: 18px;
  width: 260px;
  align-self: center; margin-left: auto; margin-right: auto;
}
.divider-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
}
.divider-gem {
  width: 6px; height: 6px;
  background: var(--gold); transform: rotate(45deg);
  box-shadow: 0 0 8px var(--gold);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   PORTALS — 2×2 grid
   ══════════════════════════════════════════════════════════════ */
.portals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 1200px;
}

/* ── Portal card ── */
.portal {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: border-color .25s, transform .3s var(--ease), box-shadow .3s;
}
.portal:nth-child(1) { animation: fade-up .7s .10s var(--ease) both; }
.portal:nth-child(2) { animation: fade-up .7s .18s var(--ease) both; }
.portal:nth-child(3) { animation: fade-up .7s .26s var(--ease) both; }
.portal:nth-child(4) { animation: fade-up .7s .34s var(--ease) both; }

.portal:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}

/* Accent bar */
.portal-bar {
  height: 2px; width: 100%; flex-shrink: 0;
}
.portal-bar--gold    { background: linear-gradient(90deg, transparent, var(--gold),    var(--gold-light),    var(--gold),    transparent); }
.portal-bar--violet  { background: linear-gradient(90deg, transparent, var(--violet),  var(--violet-light),  var(--violet),  transparent); }
.portal-bar--red     { background: linear-gradient(90deg, transparent, var(--red),     var(--red-light),     var(--red),     transparent); }
.portal-bar--discord { background: linear-gradient(90deg, transparent, var(--discord), var(--discord-light), var(--discord), transparent); }

/* Per-color hover glow */
.portal:has(.portal-bar--gold):hover    { border-color: var(--gold-a30);    box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 30px var(--gold-a08); }
.portal:has(.portal-bar--violet):hover  { border-color: var(--violet-a30);  box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 30px var(--violet-a08); }
.portal:has(.portal-bar--red):hover     { border-color: var(--red-a30);     box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 30px var(--red-a08); }
.portal:has(.portal-bar--discord):hover { border-color: var(--discord-a30); box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 30px var(--discord-a08); }

/* Inner layout */
.portal-inner {
  padding: 24px 24px 22px;
  flex: 1; display: flex; flex-direction: column; gap: 12px;
}

/* Head row: icon + titles */
.portal-head {
  display: flex; align-items: center; gap: 14px;
}
.portal-icon {
  font-size: 32px; flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(201,168,76,.35));
  transition: transform .3s var(--ease);
}
.portal:hover .portal-icon { transform: scale(1.12) rotate(-4deg); }

.portal-icon--violet  { filter: drop-shadow(0 0 10px rgba(139,92,246,.5)); }
.portal-icon--red     { filter: drop-shadow(0 0 10px rgba(176,48,48,.5)); }
.portal-icon--discord { filter: drop-shadow(0 0 10px rgba(88,101,242,.5)); }

.portal-titles { display: flex; flex-direction: column; gap: 2px; }

.portal-title {
  font-family: 'Cinzel', serif;
  font-size: 16px; font-weight: 600;
  letter-spacing: .06em; color: var(--gold-light);
  line-height: 1.2;
}
.portal-sub {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px; letter-spacing: .2em;
  color: var(--text-muted); text-transform: uppercase;
}

.portal-desc {
  font-size: 12.5px; color: var(--text-muted);
  line-height: 1.7; flex: 1;
}

/* Stats chips */
.portal-stats {
  display: flex; flex-wrap: wrap; gap: 6px;
  min-height: 24px;
}
.stat-chip {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px; padding: 3px 9px;
  border-radius: 4px; letter-spacing: .04em;
  background: var(--gold-a08);
  border: 1px solid rgba(201,168,76,.16);
  color: var(--gold-light);
}
.stat-chip--violet {
  background: var(--violet-a08);
  border-color: rgba(139,92,246,.25);
  color: var(--violet-light);
}
.stat-chip--red {
  background: var(--red-a08);
  border-color: rgba(176,48,48,.25);
  color: var(--red-light);
}
.stat-chip--discord {
  background: var(--discord-a08);
  border-color: rgba(88,101,242,.25);
  color: var(--discord-light);
}
.stat-chip--green {
  background: rgba(111,207,151,.07);
  border-color: rgba(111,207,151,.28);
  color: #6fcf97;
}
.stat-chip--idle {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.07);
  color: var(--text-muted);
  font-style: italic;
}

/* CTA button */
.portal-cta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px; border-radius: 6px;
  font-family: 'Cinzel', serif;
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  transition: background .2s, border-color .2s;
}
.portal-cta--gold    { background: var(--gold-a15);    border: 1px solid var(--gold-a30);    color: var(--gold-light); }
.portal-cta--violet  { background: var(--violet-a15);  border: 1px solid var(--violet-a30);  color: var(--violet-light); }
.portal-cta--red     { background: var(--red-a15);     border: 1px solid var(--red-a30);     color: var(--red-light); }
.portal-cta--discord { background: var(--discord-a15); border: 1px solid var(--discord-a30); color: var(--discord-light); }

.portal:hover .portal-cta--gold    { background: rgba(201,168,76,.26);  border-color: var(--gold); }
.portal:hover .portal-cta--violet  { background: rgba(139,92,246,.26);  border-color: var(--violet); }
.portal:hover .portal-cta--red     { background: rgba(176,48,48,.26);   border-color: var(--red); }
.portal:hover .portal-cta--discord { background: rgba(88,101,242,.26);  border-color: var(--discord); }

.cta-arrow {
  font-size: 16px;
  transition: transform .22s var(--ease);
}
.portal:hover .cta-arrow { transform: translateX(5px); }

/* ── Footer ── */
.footer {
  margin-top: 48px;
  font-family: 'DM Mono', monospace;
  font-size: 10px; letter-spacing: .2em;
  color: var(--text-muted); opacity: .4;
  text-align: center;
  animation: fade-up .7s .5s var(--ease) both;
}
.footer strong { color: var(--gold-dark); font-weight: 400; }

/* ══════════════════════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════════════════════ */
@keyframes fade-down {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes breathe {
  0%,100% { opacity: .55; transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.1); }
}
@keyframes logo-glow {
  0%,100% { box-shadow: 0 0 0 6px var(--gold-a08), 0 0 40px rgba(201,168,76,.18), 0 0 80px var(--gold-a08); }
  50%      { box-shadow: 0 0 0 8px rgba(201,168,76,.13), 0 0 55px rgba(201,168,76,.32), 0 0 110px rgba(201,168,76,.12); }
}
@keyframes orbit { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .app    { padding: 36px 14px 56px; }
  .header { margin-bottom: 36px; }
  .portals {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .portal-inner { padding: 20px 18px 18px; }
  .portal-icon  { font-size: 26px; }
  .portal-title { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── Green (tracker) ── */
:root {
  --green:       #3ecf7a;
  --green-light: #6fcf97;
  --green-a08:   rgba(62,207,122,.08);
  --green-a15:   rgba(62,207,122,.15);
  --green-a30:   rgba(62,207,122,.30);
}
.portal-bar--green {
  background: linear-gradient(90deg, transparent, var(--green), var(--green-light), var(--green), transparent);
}
.portal-icon--green { filter: drop-shadow(0 0 10px rgba(62,207,122,.5)); }
.stat-chip--green {
  background:   var(--green-a08);
  border-color: rgba(62,207,122,.25);
  color:        var(--green-light);
}
.portal-cta--green {
  background: var(--green-a15);
  border:     1px solid var(--green-a30);
  color:      var(--green-light);
}
.portal:has(.portal-bar--green):hover {
  border-color: var(--green-a30);
  box-shadow:   0 20px 50px rgba(0,0,0,.5), 0 0 30px var(--green-a08);
}
.portal:hover .portal-cta--green {
  background:   rgba(62,207,122,.26);
  border-color: var(--green);
}

/* ── Teal (boutique) ── */
.portal-bar--teal {
  background: linear-gradient(90deg, transparent, var(--teal), var(--teal-light), var(--teal), transparent);
}
.portal-icon--teal { filter: drop-shadow(0 0 10px rgba(14,165,160,.5)); }
.stat-chip--teal {
  background:   var(--teal-a08);
  border-color: rgba(14,165,160,.25);
  color:        var(--teal-light);
}
.portal-cta--teal {
  background:   var(--teal-a15);
  border:       1px solid var(--teal-a30);
  color:        var(--teal-light);
}
.portal:has(.portal-bar--teal):hover {
  border-color: var(--teal-a30);
  box-shadow:   0 20px 50px rgba(0,0,0,.5), 0 0 30px var(--teal-a08);
}
.portal:hover .portal-cta--teal {
  background:   rgba(14,165,160,.26);
  border-color: var(--teal);
}