/* Panel component: composable interior + optional borders */

.c-panel{
  position:relative;
  isolation:isolate;
  border-radius:var(--panel-radius,1rem);
  padding:var(--panel-p,1rem);
  color:var(--text);
  background:var(--panel-bg, var(--surface));
  box-shadow:var(--panel-shadow, 0 10px 30px rgba(0,0,0,.25));
  border:var(--panel-border-width,1px) solid transparent;
}

/* Solid interior with enhanced shadows */
.c-panel.is-solid{
  --panel-bg: var(--surface);
  box-shadow:
    0 1px 3px rgba(0,0,0,.12),
    0 4px 12px rgba(0,0,0,.20),
    0 10px 30px rgba(0,0,0,.25),
    0 20px 50px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* Glass interior */
.c-panel.is-glass{
  --panel-shadow: 0 10px 30px rgba(0,0,0,.35);
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), var(--panel-shadow);
}

/* Fallback when backdrop-filter unsupported for glass panels */
@supports not ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){
  .c-panel.is-glass{
    background:linear-gradient(180deg, rgba(15,23,42,.95), rgba(15,23,42,.90));
  }
}

/* Plain glass variant: no gradient border, just faint translucency + shadow */
.c-panel.is-glass.is-plain-glass{
  border: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 30px rgba(0,0,0,.35);
}

/* Gradient interior */
.c-panel.is-gradient{
  --panel-shadow: 0 10px 30px rgba(0,0,0,.28);
  background:
    radial-gradient(60% 100% at 0% 0%, rgba(37,99,235,.20), transparent 70%),
    radial-gradient(60% 100% at 100% 100%, rgba(96,165,250,.10), transparent 70%);
}

/* Two-layer gradient border add-on (works with solid or glass) */
.c-panel.has-gradient-border{border:1px solid transparent}
.c-panel.is-solid.has-gradient-border{
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--gold-400), var(--gold-600)) border-box;
}
.c-panel.is-glass.has-gradient-border{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08)) padding-box,
    linear-gradient(135deg, var(--gold-400), var(--gold-600)) border-box;
}
.c-panel.is-gradient.has-gradient-border{
  background:
    radial-gradient(60% 100% at 0% 0%, rgba(37,99,235,.20), transparent 70%),
    radial-gradient(60% 100% at 100% 100%, rgba(96,165,250,.10), transparent 70%),
    linear-gradient(135deg, var(--gold-400), var(--gold-600)) border-box;
}

/* Animated border add-on (conic gradient ring) */
.c-panel.has-animated-border{z-index:0}
/* Add a subtle base border if none exists to ensure continuity */
.c-panel.has-animated-border{border:1px solid transparent}
.c-panel.is-solid.has-animated-border:not(.has-gradient-border){
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.12)) border-box;
}
.c-panel.is-glass.has-animated-border:not(.has-gradient-border){
  background:
    linear-gradient(to bottom right, hsla(220,90%,70%,.12), hsla(220,90%,30%,.08)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.12)) border-box;
}
/* Animated border using conic-gradient sweep controlled by --angle */
.c-panel.has-animated-border::before{
  content:"";position:absolute;inset:calc(var(--panel-border-width,1px) * -1);z-index:-1;border:inherit;border-radius:inherit;
  background-image: conic-gradient(from var(--angle), var(--gold-600) 80%, var(--gold-400) 88%, var(--gold-400) 92%, var(--gold-600) 100%);
  background-origin: border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-clip: content-box, border-box;
  mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: panel-spin 3s linear infinite;
}
.c-panel.has-animated-border:hover::before{animation-play-state: paused}

@property --angle{syntax: "<angle>"; inherits: true; initial-value: 0turn}
@keyframes panel-spin{to{--angle: 1turn}}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  .c-panel.has-animated-border::before{animation:none}
}

/* Helpers for content inside panels */
.panel-list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.panel-list li{display:flex;gap:.5rem;align-items:flex-start}
.panel-list li::before{content:"•";color:var(--blue-400);opacity:.8;line-height:1}
.panel-actions{display:flex;gap:.75rem;align-items:center;margin-top:.5rem}
.panel-actions a{color:var(--link);text-decoration:none;font-size:.875rem}
.panel-actions a:hover{color:var(--link-hover)}
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .5rem;border-radius:999px;font-size:.7rem;font-weight:600}
.badge.red{background:rgba(250, 82, 82, .18);color:#ffdede;border:1px solid rgba(250,82,82,.35)}
.badge.yellow{background:rgba(250,204,21,.18);color:#fff3c4;border:1px solid rgba(250,204,21,.35)}

/* ===== Command Center Layout ===== */

/* Updates grid: 2-column asymmetric layout (40/60 split) */
.updates-grid{
  display:grid;
  gap:var(--space-3, 1rem);
  grid-template-columns:1fr;
  margin-top:var(--space-3, 1rem);
}

@media (min-width:64rem){
  .updates-grid{
    grid-template-columns:1.2fr 1.8fr; /* Patch notes narrower, news wider */
  }
}

/* Event showcase: full-width featured panel with glassy footer styling */
.event-showcase{
  --panel-p:1.5rem;
  position:relative;
  /* Match footer's glassy background */
  background:
    radial-gradient(520px 140px at 50% -32px, rgba(250,204,21,.10), transparent 65%),
    radial-gradient(320px 110px at 15% 0, rgba(217,119,6,.08), transparent 70%),
    radial-gradient(320px 110px at 85% 0, rgba(250,204,21,.08), transparent 70%),
    linear-gradient(
      to bottom,
      rgba(3,6,15,.92) 0%,
      rgba(6,10,20,.78) 60%,
      rgba(8,12,22,.66) 100%
    ) !important;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.4);
}

/* Ensure content is above the decorative elements */
.event-showcase > .flow{
  position:relative;
  z-index:3;
}

/* Add white top border line */
.event-showcase::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 18%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.35) 82%, transparent 100%);
  opacity:.75;
  pointer-events:none;
  z-index:1;
  border-radius:1rem 1rem 0 0;
}

/* Fallback for browsers without backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){
  .event-showcase{
    background:
      radial-gradient(520px 140px at 50% -32px, rgba(250,204,21,.10), transparent 65%),
      radial-gradient(320px 110px at 15% 0, rgba(217,119,6,.08), transparent 70%),
      radial-gradient(320px 110px at 85% 0, rgba(250,204,21,.08), transparent 70%),
      linear-gradient(
        to bottom,
        rgba(3,6,15,.98) 0%,
        rgba(6,10,20,.95) 60%,
        rgba(8,12,22,.92) 100%
      ) !important;
  }
}

/* Patch Notes panel: glassy footer styling */
.patch-panel{
  --panel-p:1.5rem;
  position:relative;
  background:
    radial-gradient(520px 140px at 50% -32px, rgba(250,204,21,.10), transparent 65%),
    radial-gradient(320px 110px at 15% 0, rgba(217,119,6,.08), transparent 70%),
    radial-gradient(320px 110px at 85% 0, rgba(250,204,21,.08), transparent 70%),
    linear-gradient(
      to bottom,
      rgba(3,6,15,.92) 0%,
      rgba(6,10,20,.78) 60%,
      rgba(8,12,22,.66) 100%
    ) !important;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.4);
}

.patch-panel > .flow{
  position:relative;
  z-index:3;
}

.patch-panel::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 18%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.35) 82%, transparent 100%);
  opacity:.75;
  pointer-events:none;
  z-index:1;
  border-radius:1rem 1rem 0 0;
}

@supports not ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){
  .patch-panel{
    background:
      radial-gradient(520px 140px at 50% -32px, rgba(250,204,21,.10), transparent 65%),
      radial-gradient(320px 110px at 15% 0, rgba(217,119,6,.08), transparent 70%),
      radial-gradient(320px 110px at 85% 0, rgba(250,204,21,.08), transparent 70%),
      linear-gradient(
        to bottom,
        rgba(3,6,15,.98) 0%,
        rgba(6,10,20,.95) 60%,
        rgba(8,12,22,.92) 100%
      ) !important;
  }
}

/* News panel: glassy footer styling */
.news-panel{
  --panel-p:1.5rem;
  position:relative;
  background:
    radial-gradient(520px 140px at 50% -32px, rgba(250,204,21,.10), transparent 65%),
    radial-gradient(320px 110px at 15% 0, rgba(217,119,6,.08), transparent 70%),
    radial-gradient(320px 110px at 85% 0, rgba(250,204,21,.08), transparent 70%),
    linear-gradient(
      to bottom,
      rgba(3,6,15,.92) 0%,
      rgba(6,10,20,.78) 60%,
      rgba(8,12,22,.66) 100%
    ) !important;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.4);
}

.news-panel > .flow{
  position:relative;
  z-index:3;
}

.news-panel::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 18%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.35) 82%, transparent 100%);
  opacity:.75;
  pointer-events:none;
  z-index:1;
  border-radius:1rem 1rem 0 0;
}

@supports not ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){
  .news-panel{
    background:
      radial-gradient(520px 140px at 50% -32px, rgba(250,204,21,.10), transparent 65%),
      radial-gradient(320px 110px at 15% 0, rgba(217,119,6,.08), transparent 70%),
      radial-gradient(320px 110px at 85% 0, rgba(250,204,21,.08), transparent 70%),
      linear-gradient(
        to bottom,
        rgba(3,6,15,.98) 0%,
        rgba(6,10,20,.95) 60%,
        rgba(8,12,22,.92) 100%
      ) !important;
  }
}

/* Event cards grid (nested inside event-showcase) */
.event-cards{
  display:grid;
  gap:1rem;
  grid-template-columns:1fr;
  margin-top:1rem;
}

@media (min-width:48rem){
  .event-cards{
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* Individual event card (nested cards) */
.event-card{
  position:relative;
  padding:1rem;
  border-radius:.75rem;
  transition:transform .2s ease, box-shadow .2s ease;
}

/* Glass event cards */
.event-card.is-glass{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 8px 20px rgba(0,0,0,.2);
}

/* Fallback when backdrop-filter unsupported for glass event cards */
@supports not ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){
  .event-card.is-glass{
    background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.88));
  }
}

.event-card.is-glass:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 12px 28px rgba(0,0,0,.25);
}

/* Solid event cards */
.event-card.is-solid{
  background:var(--surface);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 1px 2px rgba(0,0,0,.15),
    0 3px 8px rgba(0,0,0,.20),
    0 8px 20px rgba(0,0,0,.18),
    0 15px 35px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.event-card.is-solid:hover{
  transform:translateY(-3px);
  box-shadow:
    0 2px 4px rgba(0,0,0,.18),
    0 5px 12px rgba(0,0,0,.24),
    0 12px 28px rgba(0,0,0,.22),
    0 20px 45px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.event-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.75rem;
}

.event-icon{
  font-size:1.5rem;
  line-height:1;
  opacity:.9;
}

.event-title{
  font-size:1rem;
  font-weight:700;
  margin-bottom:.5rem;
  color:var(--text);
}

.event-desc{
  font-size:.875rem;
  color:var(--muted);
  line-height:1.5;
  margin-bottom:.75rem;
}

.event-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-top:.5rem;
  border-top:1px solid rgba(255,255,255,.1);
}

.event-time{
  font-size:.75rem;
  color:var(--gold-400);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
}

/* ===== Patch Notes Panel ===== */

.latest-patch{
  padding:1rem;
  border-radius:.5rem;
  background:linear-gradient(135deg, rgba(37,99,235,.15), rgba(96,165,250,.08));
  border:1px solid rgba(96,165,250,.2);
  margin-bottom:1rem;
}

.patch-version{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-bottom:.5rem;
}

.version-badge{
  display:inline-flex;
  align-items:center;
  padding:.25rem .625rem;
  background:linear-gradient(135deg, var(--blue-600), var(--blue-400));
  color:#fff;
  border-radius:.375rem;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.03em;
  box-shadow:0 2px 8px rgba(37,99,235,.25);
}

.patch-date{
  font-size:.75rem;
  color:var(--gold-400);
  font-weight:600;
}

.patch-highlight{
  font-size:.875rem;
  color:var(--text);
  line-height:1.5;
}

/* Patch list (compact version history) */
.patch-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.625rem;
}

.patch-list li{
  display:grid;
  gap:.375rem;
  padding:.5rem;
  border-radius:.375rem;
  transition:background .2s ease;
}

.patch-list li:hover{
  background:rgba(255,255,255,.05);
}

.version-num{
  font-size:.75rem;
  font-weight:700;
  color:var(--blue-400);
  font-family:ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, monospace;
}

.patch-desc{
  font-size:.8125rem;
  color:var(--muted);
  line-height:1.4;
}

/* ===== News Panel ===== */

.featured-news{
  padding:1rem;
  border-radius:.5rem;
  background:linear-gradient(135deg, rgba(217,119,6,.12), rgba(250,204,21,.06));
  border:1px solid rgba(250,204,21,.2);
  margin-bottom:1rem;
}

.news-meta{
  display:flex;
  align-items:center;
  gap:.625rem;
  margin-bottom:.5rem;
}

.news-category{
  display:inline-flex;
  padding:.15rem .5rem;
  background:rgba(250,204,21,.18);
  color:var(--gold-400);
  border:1px solid rgba(250,204,21,.3);
  border-radius:.25rem;
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.news-date{
  font-size:.75rem;
  color:var(--muted);
}

.news-title{
  font-size:1rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:.5rem;
  line-height:1.3;
}

.news-excerpt{
  font-size:.875rem;
  color:var(--muted);
  line-height:1.5;
}

/* News list (recent items) */
.news-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.75rem;
}

.news-list li{
  padding:.625rem;
  border-radius:.375rem;
  transition:background .2s ease;
  cursor:pointer;
}

.news-list li:hover{
  background:rgba(255,255,255,.05);
}

.news-item-header{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:.25rem;
}

.news-item-title{
  font-size:.875rem;
  color:var(--text);
  line-height:1.4;
  font-weight:500;
}

/* ===== Responsive Mobile Optimizations ===== */

/* Mobile: ensure single column stacking for everything */
@media (max-width:48rem){
  .event-cards{
    grid-template-columns:1fr;
  }

  .event-card{
    padding:.875rem;
  }

  .event-icon{
    font-size:1.25rem;
  }

  .updates-grid{
    grid-template-columns:1fr;
  }

  /* Adjust panel padding on mobile */
  .event-showcase{
    --panel-p:1rem;
  }

  .patch-panel,
  .news-panel{
    --panel-p:1rem;
  }
}

/* Tablet: 2-column event cards, single column patch/news */
@media (min-width:48rem) and (max-width:64rem){
  .event-cards{
    grid-template-columns:repeat(2, 1fr);
  }

  .updates-grid{
    grid-template-columns:1fr;
  }
}

/* Desktop: optimize for larger screens */
@media (min-width:80rem){
  .updates-grid{
    grid-template-columns:1fr 2fr; /* Even wider news panel on big screens */
  }
}