/* Glass UI Styles for BBClubK */
:root {
  --bg: #0b0f17;
  --gradient-1: 120deg, #4e9afc, #8f61ff 35%, #ff7fd1 70%, #ffb77a;
  --glass-bg: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.25);
  --blur: 20px;
  --radius: 22px;
  --transition: 0.35s cubic-bezier(.4,.8,.2,1);
  --text-light: #f5f7fa;
  --text-dim: #9aa4b1;
  --accent: #6ea8ff;
}

* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: radial-gradient(circle at 30% 20%, #1c2640, #0b0f17 60%);
  color: var(--text-light);
  -webkit-font-smoothing: antialiased;
  overflow: hidden; /* single page app style */
}

/* Hero */
.hero-glass { position:relative; min-height:calc(100vh - 160px); display:flex; align-items:center; justify-content:center; text-align:center; }
.hero-inner { max-width:760px; padding:40px 30px; }
.hero-inner h1.xl { font-size:clamp(2.8rem,6vw,4rem); line-height:1.05; margin:0 0 18px; background:linear-gradient(var(--gradient-1)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-inner .lead { font-size:1.15rem; color:var(--text-dim); margin:0 0 26px; }
.hero-actions { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

/* Gallery */
.gallery-grid { display:grid; gap:26px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.gallery-item { position:relative; padding:8px; border-radius:18px; overflow:hidden; display:flex; flex-direction:column; gap:6px; }
.gallery-item img { width:100%; height:180px; object-fit:cover; border-radius:12px; }
.gallery-item figcaption { font-size:.65rem; text-transform:uppercase; letter-spacing:1px; color:var(--text-dim); }

/* About */
.about-media { max-width:900px; margin:0 auto; padding:14px; border-radius:24px; }
.about-media img { width:100%; border-radius:18px; display:block; }

/* News */
.news-image { max-width:900px; margin:0 auto; padding:14px; border-radius:24px; }
.news-image img { width:100%; border-radius:18px; }

/* Team */
.team-grid { display:grid; gap:36px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); max-width:1000px; margin:0 auto; }
.team-card { text-align:center; padding:28px 24px 32px; border-radius:28px; position:relative; }
.team-card img { width:160px; height:160px; object-fit:cover; border-radius:50%; margin:0 0 16px; box-shadow:0 6px 18px -6px rgba(0,0,0,.6); }
.team-card h3 { margin:0 0 6px; font-size:1.05rem; letter-spacing:.4px; }
.team-card p { margin:0; font-size:.8rem; color:var(--text-dim); }
.team-card:hover { transform:translateY(-6px); box-shadow:0 16px 36px -14px rgba(0,0,0,.65); }

/* Contact */
#contact .cta { max-width:640px; }

/* Utility hidden (overrides display none logic for animation if needed) */
.view { padding-bottom:40px; }

/* Background blobs */
.bg-blob { position:fixed; width:700px; height:700px; filter:blur(120px); opacity:.5; z-index:-3; }
.blob-1 { top:-200px; left:-150px; background:linear-gradient(var(--gradient-1)); animation: drift1 18s linear infinite alternate; }
.blob-2 { bottom:-250px; right:-150px; background:linear-gradient(145deg,#2ae9ff,#8f61ff,#ffb77a); animation: drift2 22s linear infinite alternate; }
.bg-caustics { position:fixed; inset:0; background-image:url('bg-noise.png'); background-size:600px; mix-blend-mode:overlay; opacity:.25; z-index:-2; pointer-events:none; }

@keyframes drift1 { to { transform: translate(120px,90px) scale(1.15) rotate(25deg);} }
@keyframes drift2 { to { transform: translate(-120px,-70px) scale(1.1) rotate(-30deg);} }

/* Glass utility */
.glass { backdrop-filter: blur(var(--blur)) saturate(140%); background: var(--glass-bg); border:1px solid var(--glass-border); box-shadow:0 8px 28px -8px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.06) inset; }

.topbar { position:fixed; top:0; left:0; right:0; height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; z-index:10; }
.brand { display:flex; align-items:center; gap:12px; font-weight:600; letter-spacing:.5px; }
.brand-mark { width:36px; height:36px; background:linear-gradient(var(--gradient-1)); border-radius:14px; box-shadow:0 4px 10px -2px rgba(0,0,0,.5); }
.brand-name { font-size:1.1rem; background:linear-gradient(var(--gradient-1)); -webkit-background-clip:text; color:transparent; }

.btn { cursor:pointer; border:0; padding:10px 22px; border-radius:999px; font-weight:500; font-size:.95rem; color:var(--text-light); position:relative; overflow:hidden; }
.btn.subtle { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); }
.btn.subtle:hover { background:rgba(255,255,255,.18); }

main { position:fixed; inset:64px 0 96px; overflow:auto; scroll-behavior:smooth; padding:40px clamp(10px,4vw,70px) 120px; }

.view { max-width:1100px; margin:0 auto; animation: fadeIn .8s ease; }
.view.hidden { display:none; }
@keyframes fadeIn { from { opacity:0; transform: translateY(12px);} to { opacity:1; transform:none;} }

.section-head { text-align:center; margin:0 auto 48px; max-width:760px; }
.section-head h2 { font-size:clamp(2.2rem,4vw,3.3rem); line-height:1.05; margin:12px 0 14px; font-weight:600; }
.gradient-text { background:linear-gradient(var(--gradient-1)); -webkit-background-clip:text; color:transparent; }
.chip { display:inline-block; padding:6px 14px; border-radius:999px; font-size:.75rem; letter-spacing:1px; text-transform:uppercase; font-weight:600; color:var(--text-light); backdrop-filter:blur(30px); }
.muted { color: var(--text-dim); font-size:1.05rem; line-height:1.5; }

.grid { display:grid; gap:32px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); align-items:stretch; }
.card { position:relative; padding:22px 20px 24px; border-radius:var(--radius); display:flex; flex-direction:column; gap:12px; transition: var(--transition); isolation:isolate; }
.card:before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(140deg,rgba(255,255,255,.25),rgba(255,255,255,0) 60%); opacity:.7; mix-blend-mode:overlay; pointer-events:none; }
.card:hover { transform: translateY(-6px); box-shadow:0 18px 40px -16px rgba(0,0,0,.7); }

.card img { width:60px; height:60px; object-fit:cover; border-radius:16px; box-shadow:0 4px 10px -2px rgba(0,0,0,.55); }
.card h3 { margin:4px 0 0; font-size:1.05rem; letter-spacing:.3px; font-weight:600; }
.card p { margin:0; font-size:.8rem; color:var(--text-dim); line-height:1.3; }
.card a { position:absolute; inset:0; z-index:5; border-radius:inherit; }

.link { color:var(--accent); text-decoration:none; font-weight:500; }
.link:hover { text-decoration:underline; }

.cta { margin:56px auto 10px; max-width:680px; padding:26px 30px; text-align:center; font-size:.95rem; border-radius:var(--radius); line-height:1.5; }

/* Dock */
.dock { position:fixed; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:10px; padding:10px 14px; border-radius:30px; backdrop-filter:blur(35px) saturate(160%); background:rgba(50,60,80,.35); border:1px solid rgba(255,255,255,.25); box-shadow:0 12px 40px -10px rgba(0,0,0,.65); z-index:20; }
.dock-btn { appearance:none; background:transparent; border:0; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 16px 8px; border-radius:18px; font-size:.65rem; letter-spacing:.5px; font-weight:600; color:var(--text-dim); cursor:pointer; position:relative; min-width:70px; transition: var(--transition); }
.dock-btn svg { fill:currentColor; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.dock-btn:hover { color:var(--text-light); background:rgba(255,255,255,.14); }
.dock-btn.active { background:linear-gradient(140deg,rgba(255,255,255,.35),rgba(255,255,255,.14)); color:var(--text-light); box-shadow:0 4px 14px -4px rgba(0,0,0,.6); }

/* Scrollbar minimal */
main::-webkit-scrollbar { width:10px; }
main::-webkit-scrollbar-track { background:transparent; }
main::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:20px; }
main::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.25); }

@media (max-width: 760px) {
  main { padding:30px 18px 120px; }
  .grid { gap:22px; }
  .dock { gap:4px; padding:8px 10px; }
  .dock-btn { min-width:60px; padding:8px 12px 6px; }
  .card { padding:18px 16px 22px; }
  .card img { width:54px; height:54px; }
}

/* Enhanced mobile responsiveness for phones */
@media (max-width: 480px) {
  main { padding:20px 12px 100px; }
  .dock { 
    bottom: 8px; 
    left: 8px; 
    right: 8px; 
    transform: none; 
    gap: 2px; 
    padding: 6px 8px; 
    border-radius: 24px;
    max-width: calc(100vw - 16px);
    overflow-x: auto;
  }
  .dock-btn { 
    min-width: 52px; 
    padding: 6px 8px 4px; 
    font-size: .6rem;
    flex-shrink: 0;
  }
  .dock-btn svg { 
    width: 18px; 
    height: 18px; 
  }
  .dock-btn span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Extra small phones */
@media (max-width: 360px) {
  .dock { gap: 1px; padding: 4px 6px; }
  .dock-btn { 
    min-width: 48px; 
    padding: 4px 6px 2px; 
    font-size: .55rem;
  }
  .dock-btn svg { 
    width: 16px; 
    height: 16px; 
  }
}

/* iPhone specific safe area handling */
@supports (padding: max(0px)) {
  @media (max-width: 480px) {
    .dock {
      bottom: max(8px, env(safe-area-inset-bottom));
      left: max(8px, env(safe-area-inset-left));
      right: max(8px, env(safe-area-inset-right));
    }
    main {
      padding-bottom: max(100px, calc(80px + env(safe-area-inset-bottom)));
    }
  }
}