/* cowboys-shell.css — shared shell so every page looks/loads like /madden/ */
:root{
  --bg:#0B1F3A;
  --primary:#E63946;
  --accent:#384036;
  --gray:#334232;
  --text:#E8EEF5;
}

html,body{
  height:100%;
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* Loading screen matches your existing loader classes */
.loading{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  background: radial-gradient(1200px 600px at 50% 30%, rgba(255,255,255,0.04), transparent),
              radial-gradient(900px 500px at 20% 80%, rgba(255,255,255,0.03), transparent),
              var(--bg);
  z-index:9999;
  transition: opacity .35s ease, visibility .35s ease;
}
.loading.hide{ opacity:0; visibility:hidden; }
.loading-logo{ width:140px; height:auto; opacity:.95; filter: drop-shadow(0 8px 24px rgba(0,0,0,.35)); }
.loading span{ font-weight:600; letter-spacing:.2px; opacity:.9; }

/* Top floating info bar */
#floating-bar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 16px;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(6,18,36,.85), rgba(6,18,36,.55));
  border-bottom:1px solid rgba(255,255,255,.08);
  z-index:999;
}
#floating-bar .info-panels-left,
#floating-bar .info-panels-right{
  display:flex;
  gap:12px;
  align-items:center;
  font-size:.95rem;
  white-space:nowrap;
}
#current-datetime{ opacity:.9; }
#weather-info{ opacity:.85; }
#last-updated{ color: var(--primary); font-weight:700; }

/* Background SVG container */
#background-svg{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.28;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}

/* Page main container + centered header logo */
.container{ 
  width: min(1100px, 92vw);
  margin: 110px auto 64px; /* leave room for floating bar */
  padding: 0 10px;
}
.logo-main{
  display:flex;
  justify-content:center;
  margin: 8px 0 22px;
}
.logo-main .logo{
  width: 220px;
  height: auto;
  opacity:.95;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .6s;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,.35));
}
.animated-logo{ animation: slowPulse 5s ease-in-out infinite; }
@keyframes slowPulse{ 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.02);} }

/* Generic responsive grid (like your .inventory-grid/.grid) */
.grid, .inventory-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:16px;
  max-width:1000px;
  margin: 0 auto;
}
.card{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
}
.card h3{ margin:0 0 6px; font-size:1.05rem; }
.card p{ margin:0; opacity:.92; }