:root{
            --bg: #120406;
            --card: #2a0b0b;
            --accent1: #ef4444;
            --accent2: #dc2626;
            --muted: rgba(255,255,255,0.72);
            --glass: rgba(255,255,255,0.03);
            --radius: 12px;
            --max-width: 1100px;
            --transition: 300ms cubic-bezier(.2,.9,.3,1);
            --font: "Inter", "system-ui", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial;
        }
        * {
            box-sizing:border-box;
        }
        html,body {
            height:100%;
            font-family: var(--font);
            color: white;
        }
        body {
            background: #6a1111;
            margin-bottom: 0px;
            margin-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
        }
        .page {
            min-height: 100vh;
            display: flex; 
            flex-direction: column; 
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:60;
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding:18px clamp(16px,4vw,36px);
            backdrop-filter: blur(6px);
            background:linear-gradient(180deg, rgba(10,14,22,0.5), rgba(10,14,22,0.15));
            border-bottom:1px solid rgba(255,255,255,0.03);
        }
        .brand {
            display:flex;
            align-items:center;
            gap:14px;
        }
        .logo {
            color:white;
            text-decoration:none;
            font-weight:600;
            font-size:1.1rem;
            display:flex;
            align-items:center;
            gap:8px;
        }
        .hamburger{
            width:36px;
            height:36px;
            border-radius:8px;
            border:0;
            background:var(--glass);
            display:inline-grid;
            place-items:center;
            padding:6px;
            cursor:pointer;
        }
        .hamburger span{ display:block; height:2px; width:16px; background:#e8f0ff; border-radius:2px; transition: transform var(--transition), opacity var(--transition); }
        .hamburger span:nth-child(2){ width:12px; }
        .hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
        .hamburger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
        .hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
        
        .nav{
            display:flex;
            gap:18px;
        }
        .nav a{
            color: var(--muted);
            text-decoration:none;
            padding:8px;
            border-radius:8px;
            transition: color var(--transition);
            font-weight:500;
        }
        .nav a:hover{ color: white; }
        
        /* Hero */
        .hero {
            position: relative;
            overflow: hidden;
            min-height: 66vh;
            background-color: var(--bg-dark-purple);
            background-image: url("../assets/images/body-bg.jpg");
            background-repeat: repeat;
            padding: 48px 20px;
            text-align: center;
        }
        .hero::before{
            content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.48); z-index: 1; pointer-events: none;
        }
        .hero-video{ position:absolute; width:100%; height:100%; object-fit:cover; opacity:0.55; z-index:0; pointer-events:none; }
        .particle-canvas{ position:absolute; inset:0; z-index:1; pointer-events:none; }
        
        .hero-content { position: relative; z-index: 3; max-width: var(--max-width); margin: 0 auto; padding: 30px 20px; }
        .srg-logo { width: 250px; filter: drop-shadow(0 0 5px #000); -webkit-filter: drop-shadow(0 0 5px #000); }
        
        /* Section separator box */
        .section-sep {
            background: linear-gradient(180deg, rgba(18,4,6,0.85), rgba(18,4,6,0.95));
            max-width: calc(var(--max-width) - 40px);
            width: calc(100% - 48px);
            margin: 24px auto;
            border-radius: 14px;
            box-shadow: 0 10px 30px rgba(185,28,28,0.08), inset 0 1px 0 rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.02);
            position: relative;
            z-index: 2;
            text-align: center;
        }
        body {
            background-color: rgb(106, 17, 17);
        }
        html, body {
            height: 100%;
        }
        body {
            display: block;
        }
        /* Section separator box */
        .section-sep {
            background: linear-gradient(180deg, rgba(18,4,6,0.85), rgba(18,4,6,0.95));
            height: 64px;
            max-width: calc(var(--max-width) - 40px);
            width: calc(100% - 48px);
            margin: 24px auto;
            border-radius: 14px;
            box-shadow: 0 10px 30px rgba(185,28,28,0.08), inset 0 1px 0 rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.02);
            position: relative;
            z-index: 2;
            text-align: center;
        }
        
        /* Sections & titles */
        .section { padding: 72px 20px; background: transparent; position: relative; z-index: 1; }
        .section-title { font-size: 1.4rem; margin: 0 0 18px; text-align:center; color: white; }
        
        /* Live data (Google Sheet) */
        .sheet-status { font-size: 0.95rem; color: var(--muted); text-align: center; padding: 10px; }
        .sheet-error { color: #ffb4b4; text-align: center; padding: 10px; }
        .sheet-wrapper{ overflow:auto; margin-top:8px; color:white; }
        
        .sheet-categories { font-size: 1.5rem; color: white; text-align:center; margin-bottom: 12px; gap: 18px; display:flex; justify-content:center; }
        
        .live-table { width: 100%; border-collapse: collapse; font-size: 0.97rem; margin: 8px 0; }
        .live-table thead th { background: rgba(6,10,20,0.6); padding:10px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.04); }
        .live-table td { padding:10px; border-bottom:1px dashed rgba(255,255,255,0.03); color: var(--muted); vertical-align: middle; }
        .live-table tr:hover td { background: rgba(255,255,255,0.012); }
        
        /* Make player links look like buttons but accessible */
        .player-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: transparent;
            color: #fff;
            border: 0;
            padding: 0;
            font: inherit;
            cursor: pointer;
            text-decoration: none;
        }
        .player-link:focus { outline: 2px solid rgba(238,68,68,0.6); outline-offset: 2px; }
        
        /* thumbnail in table member button */
        .player-thumb {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            object-fit: cover;
            display: inline-block;
            vertical-align: middle;
            flex-shrink: 0;
        }
        
        /* larger avatar inside player card (modal) */
        .player-avatar img.player-avatar-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
            display: block;
        }
        
        /* Social icons in-table & in-modal */
        .table-social-link, .social-link {
            display:inline-flex;
            align-items:center;
            justify-content:center;
            width:28px;
            height:28px;
            border-radius:6px;
            color:var(--muted);
            background: rgba(255,255,255,0.02);
            text-decoration:none;
            transition: background 180ms ease, transform 120ms ease;
        }
        .table-social-link svg, .social-link svg {
          width:16px; height:16px; display:block; color: #fff;
        }
        .table-social-link:hover, .social-link:hover { background: rgba(255,255,255,0.04); transform: translateY(-2px); color: #fff; }
        
        /* modal social container */
        .player-social { display:flex; gap:10px; margin-top:8px; }
        
        /* Controls & pagination */
        .sheet-controls { margin-bottom: 8px; display:flex; gap:8px; justify-content:center; }
        .pagination { display:flex; gap:8px; justify-content:center; margin-top:12px; }
        .pagination button {
          background: transparent; color: var(--muted); border: 1px solid rgba(255,255,255,0.04);
          padding:6px 10px; border-radius:8px; cursor:pointer; font-weight:600;
        }
        .pagination button.active { background: linear-gradient(90deg,var(--accent1),var(--accent2)); color:white; border-color:transparent; }
        .pagination button[disabled] { opacity:0.45; cursor: default; }
        
        /* Reveal */
        .reveal { opacity:0; transform: translateY(18px); transition: opacity 600ms var(--transition), transform 600ms var(--transition); }
        .reveal.visible { opacity:1; transform: none; }
        
        /* Hero wave & cursor */
        .hero-wave{ position:absolute; left:0; right:0; bottom:0; height:130px; color:#2b0404; z-index:2; transform: translateY(24px); }
        .cursor{ color:var(--accent2); margin-left:6px; opacity:1; animation: blink 900ms steps(1) infinite; }
        @keyframes blink{ 50%{ opacity:0; } }
        
        /* Footer & overlay text */
        .site-footer{ text-align:center; padding:20px; color:var(--muted); font-size:0.9rem; z-index:50; }
        .overlay-text { position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; text-align:center; color: white; font-size: 12px; padding: 10px 20px; border-radius:5px; z-index:10; }
        
        /* Player modal styles */
        .player-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 120; }
        .player-modal[aria-hidden="false"] { display: flex; }
        .player-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); cursor: pointer; }
        .player-card {
            position: relative;
            width: 92%;
            max-width: 760px;
            background: linear-gradient(180deg, rgba(18,4,6,0.95), rgba(18,4,6,0.9));
            border-radius: 12px;
            padding: 18px;
            box-shadow: 0 18px 48px rgba(0,0,0,0.6);
            z-index: 2;
            color: white;
        }
        .player-card-inner { display:flex; gap:16px; align-items:center; }
        .player-avatar {
            width: 120px; height: 120px; border-radius: 12px;
            background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
            display:flex; align-items:center; justify-content:center; font-size:2.6rem; color: rgba(255,255,255,0.12);
            flex-shrink: 0;
        }
        .player-avatar img { width:100%; height:100%; object-fit:cover; border-radius:8px; display:block; }
        .player-info h2 { margin:0 0 6px; font-size:1.4rem; }
        .player-info p { margin: 4px 0; color: var(--muted); }
        
        /* close button */
        .close-btn {
          position: absolute; top: 10px; right: 12px; background: transparent; border:0; color:var(--muted);
          font-size: 1.6rem; line-height:1; cursor:pointer;
        }
        .close-btn:focus { outline: 2px solid rgba(238,68,68,0.6); outline-offset: 2px; }
        
        /* Responsive */
        @media (max-width: 600px) {
          .player-card-inner { flex-direction: column; align-items: flex-start; }
          .player-avatar { width: 100%; height: 160px; }
          .srg-logo { width: 180px; }
          .nav { display: none; }
        }
        .circle{
            width: 16px;              /* Set desired size */
            height: 16px;
            border-radius: 50%;        /* Makes it a circle */
            overflow: hidden;          /* Hides parts of the image outside the circle */
            display: flex;             /* Centers the image */
            align-items: center;
            justify-content: center;
         }