:root{
  /* Light foundation */
  --bg-primary: #ffffff;
  --bg-secondary: #fbfdff;
  --bg-tertiary: #f6fbff;
  --panel: #ffffff;
  --glass: rgba(255,255,255,0.6);

  /* Gaming accents — bright but light */
  --neon-green: #00e676;
  --electric-blue: #0ea5ff;
  --neon-pink: #ff4db2;
  --sunset-orange: #ffb454;

  /* text / borders */
  --text-primary: #0f1724;
  --text-secondary: #506070;
  --muted: #94a3b8;
  --border: #e6eef8;

  /* statuses */
  --success: #16a34a;
  --danger: #ef4444;
  --warning: #f59e0b;
  --glass-shadow: rgba(14,165,255,0.08);
}

/* Reset & base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text-primary);
  background: linear-gradient(160deg, #fbfdff 0%, #eef8ff 60%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  line-height:1.4;
  padding-top:72px;
}

/* Header */
.bc-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:120;
  padding:0.75rem 0;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.7));
  border-bottom:1px solid var(--border);
  box-shadow: 0 6px 24px rgba(11,20,40,0.04);
}
.bc-nav{
  max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;
  gap:1rem;
}
.bc-logo{
  font-weight:800;font-size:1.25rem;
  background:linear-gradient(90deg,var(--electric-blue),var(--neon-pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:0.6px;
  display:flex;align-items:center;gap:0.75rem;
}
.logo-mark{
  width:36px;height:36px;border-radius:8px;
  background:conic-gradient(from 200deg,var(--electric-blue),var(--neon-green),var(--neon-pink));
  box-shadow: 0 6px 20px rgba(14,165,255,0.12);
  display:inline-flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:0.9rem;
}

/* Nav links */
.bc-nav-links{display:flex;gap:1rem;align-items:center;list-style:none}
.bc-nav-links a{
  color:var(--muted);text-decoration:none;font-weight:600;padding:0.5rem 0.6rem;border-radius:8px;transition:all .18s;
}
.bc-nav-links a:hover{color:var(--text-primary);transform:translateY(-2px)}
.bc-user-menu{display:flex;align-items:center;gap:0.75rem}
.bc-balance{
  background:linear-gradient(180deg, rgba(14,165,255,0.06), rgba(0,230,118,0.03));
  padding:0.45rem 0.9rem;border-radius:10px;border:1px solid var(--border);font-weight:700;color:var(--neon-green);
  display:flex;gap:0.5rem;align-items:center;font-size:0.95rem;
}

/* Main layout */
.bc-container{max-width:1200px;margin:1.75rem auto;padding:0 1.5rem}
.bc-grid{display:grid;grid-template-columns:260px 1fr;gap:1.5rem;align-items:start;min-height:calc(100vh - 160px)}

/* Sidebar (left) */
.bc-sidebar{
  background:linear-gradient(180deg,var(--bg-tertiary),var(--panel));
  padding:1.25rem;border-radius:14px;border:1px solid var(--border);
  box-shadow:0 6px 18px rgba(14,165,255,0.03);
  height:fit-content;
}
.bc-sidebar-title{font-weight:700;margin-bottom:0.75rem;color:var(--text-primary)}
.bc-sidebar-menu{list-style:none;display:flex;flex-direction:column;gap:0.35rem}
.bc-sidebar-menu a{
  display:flex;gap:0.75rem;align-items:center;padding:0.7rem;border-radius:10px;color:var(--muted);
  text-decoration:none;font-weight:600;transition:all 0.18s;border:1px solid transparent;
}
.bc-sidebar-menu a:hover, .bc-sidebar-menu a.active{
  color:var(--neon-green);background:linear-gradient(90deg, rgba(0,230,118,0.06), rgba(14,165,255,0.03));
  transform:translateX(6px);border-color:var(--border);
}

/* Main content area */
.bc-main{background:linear-gradient(180deg,var(--panel),#fff);padding:1.5rem;border-radius:14px;border:1px solid var(--border);box-shadow:0 8px 30px rgba(11,20,40,0.03)}

/* Cards */
.bc-card{background:linear-gradient(180deg,#ffffff, #fbfdff);border-radius:12px;border:1px solid var(--border);padding:1rem;margin-bottom:1.25rem;transition:transform .18s, box-shadow .18s}
.bc-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(14,165,255,0.06)}
.bc-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.8rem;padding-bottom:0.6rem;border-bottom:1px solid var(--border)}
.bc-card-title{font-weight:700;color:var(--text-primary)}

/* Stats */
.bc-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1rem}
.bc-stat-card{
  padding:1rem;border-radius:12px;border:1px solid var(--border);
  background:linear-gradient(120deg, rgba(14,165,255,0.03), rgba(0,230,118,0.02));
  text-align:center;position:relative;overflow:hidden;
}
.bc-stat-card::before{
  content:'';position:absolute;left:0;top:0;height:4px;width:100%;
  background:linear-gradient(90deg,var(--electric-blue),var(--neon-pink));
}
.bc-stat-value{font-size:1.6rem;font-weight:800;color:var(--text-primary);margin-bottom:0.25rem}
.bc-stat-label{color:var(--muted);font-weight:600}

/* Buttons */
.bc-btn{
  display:inline-flex;align-items:center;gap:0.6rem;
  background:linear-gradient(45deg,var(--electric-blue),var(--neon-pink));
  color:white;padding:0.7rem 1rem;border-radius:10px;border:none;font-weight:700;cursor:pointer;text-decoration:none;
  transition:transform .18s,box-shadow .18s;
}
.bc-btn:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(14,165,255,0.12)}
.bc-btn-secondary{
  background:transparent;border:1px solid var(--border);color:var(--text-primary);padding:0.6rem 0.9rem;border-radius:10px;font-weight:700;
}
.bc-btn-danger{background:linear-gradient(90deg,var(--danger),#d43b3b)}

/* Forms */
.bc-form-group{margin-bottom:1rem}
.bc-label{display:block;margin-bottom:0.4rem;font-weight:700;color:var(--text-primary)}
.bc-input{width:100%;padding:0.7rem;border-radius:10px;border:1px solid var(--border);background:var(--bg-primary);font-weight:600}

/* Table */
.bc-table{width:100%;border-collapse:collapse;background:var(--panel);border-radius:10px;overflow:hidden}
.bc-table th{background:linear-gradient(180deg,var(--bg-tertiary),#fff);padding:0.9rem;text-align:left;font-weight:700;border-bottom:1px solid var(--border)}
.bc-table td{padding:0.9rem;border-bottom:1px solid var(--border);color:var(--muted)}

/* Games Grid */
.bc-games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.bc-game-card{
  border-radius:12px;border:1px solid var(--border);overflow:hidden;background:linear-gradient(180deg,#fff,#fbfdff);
  transition:transform .18s,box-shadow .18s;cursor:pointer;padding-bottom:1rem;display:flex;flex-direction:column;
}
.bc-game-card:hover{transform:translateY(-6px);box-shadow:0 20px 45px rgba(14,165,255,0.07);border-color:rgba(14,165,255,0.12)}
.bc-game-image{
  height:140px;background:linear-gradient(135deg,var(--neon-pink),var(--electric-blue));
  display:flex;align-items:center;justify-content:center;font-size:2.2rem;color:white;
  border-bottom:1px solid rgba(0,0,0,0.03);
}
.bc-game-content{padding:0.95rem;flex:1;display:flex;flex-direction:column}
.bc-game-title{font-weight:800;color:var(--text-primary);margin-bottom:0.4rem}
.bc-game-desc{color:var(--muted);font-size:0.92rem;margin-bottom:0.9rem;flex:1}

/* Game UI controls */
.game-container{max-width:920px;margin:0 auto;padding:1rem 0}
.game-board{
  background:linear-gradient(180deg,#fff,#fbfdff);border-radius:12px;border:1px solid var(--border);padding:1rem;margin-bottom:1rem;
  box-shadow:0 8px 28px rgba(14,165,255,0.04)
}
.game-controls{display:flex;gap:0.75rem;align-items:center;justify-content:flex-start;margin:1rem 0}

/* Dice */
.dice-display{
  width:86px;height:86px;border-radius:12px;background:linear-gradient(180deg,#fff,#f4fbff);border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:2.2rem;font-weight:900;color:var(--electric-blue);
  transition:transform .4s ease;
  box-shadow: 0 8px 30px rgba(14,165,255,0.06);
}

/* Wheel */
.wheel-container{width:320px;height:320px;margin:0 auto;position:relative}
.wheel{
  width:100%;height:100%;border-radius:50%;border:6px solid var(--border);
  background:conic-gradient(
    var(--electric-blue) 0 72deg,
    var(--neon-green) 72deg 144deg,
    var(--sunset-orange) 144deg 216deg,
    var(--neon-pink) 216deg 288deg,
    var(--electric-blue) 288deg 360deg
  );
  transition:transform 3s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 12px 40px rgba(14,165,255,0.06);
}
.wheel-pointer{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:24px solid var(--text-primary);
}

/* Mines grid */
.mines-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-width:420px;margin:0 auto}
.mine-tile{
  width:64px;height:64px;border-radius:10px;background:linear-gradient(180deg,#fff,#fbfdff);border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;cursor:pointer;transition:transform .12s,background .12s;
  color:var(--text-primary);
}
.mine-tile:hover{transform:scale(1.04);box-shadow:0 8px 20px rgba(14,165,255,0.06)}
.mine-tile.revealed{background:linear-gradient(90deg, rgba(0,230,118,0.12), rgba(14,165,255,0.04));color:var(--neon-green)}
.mine-tile.mine{background:linear-gradient(90deg, rgba(239,68,68,0.12), rgba(255,77,66,0.03));color:var(--danger)}

/* Game result */
.game-result{padding:0.8rem;border-radius:10px;text-align:center;font-weight:800;margin-top:0.9rem}
.game-result.win{background:rgba(0,230,118,0.08);color:var(--neon-green)}
.game-result.loss{background:rgba(239,68,68,0.06);color:var(--danger)}

/* mobile nav */
.bc-mobile-nav{
  position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:1000;
  display:flex;gap:10px;background:linear-gradient(180deg,#fff,#fbfdff);padding:0.4rem;border-radius:40px;border:1px solid var(--border);box-shadow:0 14px 40px rgba(14,165,255,0.06)
}
.nav-item{display:flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:30px;font-weight:800;color:var(--muted);cursor:pointer}
.nav-item.center{background:linear-gradient(90deg,var(--electric-blue),var(--neon-pink));color:white;box-shadow:0 10px 28px rgba(14,165,255,0.12)}

/* responsive */
@media (max-width:880px){
  .bc-grid{grid-template-columns:1fr}
  .bc-nav-links{display:none}
  .bc-sidebar{display:flex;flex-direction:row;gap:1rem;overflow:auto}
  .bc-sidebar-menu{flex-direction:row}
  .bc-balance{display:none}
  .wheel-container{width:260px;height:260px}
  .dice-display{width:72px;height:72px;font-size:1.6rem}
  .mines-grid{max-width:320px;grid-template-columns:repeat(4,1fr)}
}
</style>
</head>
<body>

<header class="bc-header">
  <nav class="bc-nav">
    <div style="display:flex;align-items:center;gap:1rem">
      <div class="logo-mark">BA</div>
      <div class="bc-logo">BrightArc</div>
    </div>

    <ul class="bc-nav-links" aria-label="Main navigation">
      <li><a href="#" class="active">Home</a></li>
      <li><a href="#">Games</a></li>
      <li><a href="#">Tournaments</a></li>
      <li><a href="#">Rewards</a></li>
    </ul>

    <div class="bc-user-menu">
      <div class="bc-balance">₹ 2,450</div>
      <div class="user-menu" style="position:relative">
        <div class="user-avatar" id="userAvatar" title="Open menu" style="width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;background:linear-gradient(90deg,var(--electric-blue),var(--neon-pink));color:white;cursor:pointer">SJ</div>
        <div class="dropdown" id="userDropdown" style="right:0;top:110%;min-width:200px;padding:0.4rem;border-radius:10px">
          <a href="#" style="display:block;padding:0.6rem;border-radius:8px">Profile</a>
          <a href="#" style="display:block;padding:0.6rem;border-radius:8px">Settings</a>
          <a href="#" style="display:block;padding:0.6rem;border-radius:8px">Logout</a>
        </div>
      </div>
    </div>
  </nav>
</header>

<main class="bc-container" role="main">
  <div class="bc-grid">
    <!-- Sidebar -->
    <aside class="bc-sidebar" aria-label="Sidebar">
      <div class="bc-sidebar-title">Quick Play</div>
      <ul class="bc-sidebar-menu">
        <li><a href="#" class="active">Dashboard</a></li>
        <li><a href="#">Slots</a></li>
        <li><a href="#">Crash</a></li>
        <li><a href="#">Mines</a></li>
        <li><a href="#">Roulette</a></li>
      </ul>

      <div style="height:1px;background:var(--border);margin:0.9rem 0;border-radius:4px"></div>

      <div>
        <div style="font-weight:800;color:var(--text-primary);margin-bottom:0.4rem">Balance</div>
        <div style="display:flex;gap:0.5rem;align-items:center">
          <div style="font-weight:900;color:var(--neon-green);font-size:1.1rem">₹ 2,450</div>
          <button class="bc-btn-secondary" style="padding:0.45rem 0.7rem;font-size:0.9rem">Deposit</button>
        </div>
      </div>
    </aside>

    <!-- Main -->
    <section class="bc-main">
      <!-- Top cards -->
      <div class="bc-stats-grid">
        <div class="bc-stat-card">
          <div class="bc-stat-value">1,248</div>
          <div class="bc-stat-label">Active Players</div>
        </div>
        <div class="bc-stat-card">
          <div class="bc-stat-value">₹ 75.3K</div>
          <div class="bc-stat-label">Daily Volume</div>
        </div>
        <div class="bc-stat-card">
          <div class="bc-stat-value">+12.6%</div>
          <div class="bc-stat-label">Win Rate (avg)</div>
        </div>
      </div>

      <!-- Games list -->
      <div class="bc-card">
        <div class="bc-card-header">
          <div class="bc-card-title">Featured Games</div>
          <div>
            <a class="bc-btn" href="#">Play Now</a>
          </div>
        </div>

        <div class="bc-games-grid" aria-live="polite">
          <!-- Game 1: Dice -->
          <article class="bc-game-card" aria-label="Dice">
            <div class="bc-game-image">🎲</div>
            <div class="bc-game-content">
              <div class="bc-game-title">Neon Dice</div>
              <div class="bc-game-desc">Roll the dice and beat high scores. Fast and flashy.</div>
              <div style="display:flex;gap:0.5rem;align-items:center">
                <button class="bc-btn" id="rollBtn">Roll</button>
                <div class="dice-display" id="diceDisplay">3</div>
              </div>
            </div>
          </article>

          <!-- Game 2: Wheel -->
          <article class="bc-game-card">
            <div class="bc-game-image">🎡</div>
            <div class="bc-game-content">
              <div class="bc-game-title">Prize Wheel</div>
              <div class="bc-game-desc">Spin for multipliers and instant rewards. Thrill guaranteed.</div>
              <div style="margin-top:auto;display:flex;gap:0.6rem;align-items:center;justify-content:space-between">
                <div class="wheel-container" style="width:180px;height:180px">
                  <div class="wheel" id="wheel"></div>
                  <div class="wheel-pointer"></div>
                </div>
                <div style="display:flex;flex-direction:column;gap:0.5rem">
                  <button class="bc-btn" id="spinBtn">Spin</button>
                  <div id="wheelResult" class="game-result" style="margin-top:0.2rem">Ready</div>
                </div>
              </div>
            </div>
          </article>

          <!-- Game 3: Mines -->
          <article class="bc-game-card">
            <div class="bc-game-image">💣</div>
            <div class="bc-game-content">
              <div class="bc-game-title">Mines</div>
              <div class="bc-game-desc">Pick tiles carefully — reveal safe tiles and avoid mines.</div>

              <div class="mines-grid" id="minesGrid" style="margin-top:0.75rem">
                <!-- 25 tiles generated by JS -->
              </div>
              <div id="minesResult" class="game-result" style="display:none"></div>
            </div>
          </article>

        </div>
      </div>

      <!-- Recent table -->
      <div class="bc-card">
        <div class="bc-card-header">
          <div class="bc-card-title">Recent Games</div>
          <div class="bc-label">Today</div>
        </div>

        <table class="bc-table" aria-label="Recent games table">
          <thead>
            <tr><th>Game</th><th>Result</th><th>Winnings</th><th>Time</th></tr>
          </thead>
          <tbody>
            <tr><td>Neon Dice</td><td style="color:var(--neon-green);font-weight:700">Win</td><td>₹ 1,200</td><td>10:41</td></tr>
            <tr><td>Prize Wheel</td><td style="color:var(--danger);font-weight:700">Loss</td><td>-₹ 200</td><td>09:57</td></tr>
            <tr><td>Mines</td><td style="color:var(--neon-green);font-weight:700">Win</td><td>₹ 560</td><td>08:34</td></tr>
          </tbody>
        </table>
      </div>

    </section>
  </div>
</main>

<!-- Mobile nav -->
<nav class="bc-mobile-nav" aria-hidden="false">
  <div class="nav-item">🏠</div>
  <div class="nav-item">🎮</div>
  <div class="nav-item center">⏯</div>
  <div class="nav-item">🏆</div>
  <div class="nav-item">⚙️</div>
</nav>

<script>
/* Small interactive bits: dropdown, dice roll, wheel spin, mines. */

/* Dropdown toggle */
const userAvatar = document.getElementById('userAvatar');
const userDropdown = document.getElementById('userDropdown');
userAvatar && userAvatar.addEventListener('click', e => {
  userDropdown.classList.toggle('show');
});
document.addEventListener('click', e => {
  if (!userAvatar.contains(e.target) && !userDropdown.contains(e.target)) {
    userDropdown.classList.remove('show');
  }
});

/* Dice roll */
const rollBtn = document.getElementById('rollBtn');
const diceDisplay = document.getElementById('diceDisplay');

rollBtn && rollBtn.addEventListener('click', () => {
  // simple animation + random result
  diceDisplay.style.transform = 'rotate(720deg) scale(0.95)';
  setTimeout(()=> {
    const val = Math.floor(Math.random()*6)+1;
    diceDisplay.textContent = val;
    diceDisplay.style.transform = 'rotate(0deg) scale(1)';
    diceDisplay.animate([{transform:'scale(1.0)'},{transform:'scale(1.06)'},{transform:'scale(1.0)'}],{duration:350});
  }, 380);
});

/* Wheel spin */
const spinBtn = document.getElementById('spinBtn');
const wheel = document.getElementById('wheel');
const wheelResult = document.getElementById('wheelResult');

spinBtn && spinBtn.addEventListener('click', () => {
  spinBtn.disabled = true;
  wheelResult.textContent = 'Spinning...';
  // random full rotations + offset
  const spinDeg = Math.floor(Math.random()*360) + 360*3 + 45;
  wheel.style.transition = 'transform 3s cubic-bezier(.2,.9,.2,1)';
  wheel.style.transform = 'rotate(' + spinDeg + 'deg)';

  setTimeout(()=>{
    const normalized = spinDeg % 360;
    // Determine segment (72deg each) mapping
    const segment = Math.floor(normalized / 72);
    // map to fun outcomes (reverse due to rotation direction)
    const outcomes = ['x2', 'x5', 'Lose', 'x3', 'Jackpot'];
    const outcome = outcomes[ (outcomes.length - 1 - segment) % outcomes.length ];
    wheelResult.textContent = outcome;
    spinBtn.disabled = false;
    // add small pop
    wheelResult.classList.remove('win','loss');
    wheelResult.classList.add(outcome === 'Lose' ? 'loss' : 'win');
    // reset transform so subsequent spins behave (force reflow)
    setTimeout(()=> {
      wheel.style.transition = 'none';
      wheel.style.transform = 'rotate(' + (spinDeg % 360) + 'deg)';
      // allow next spin to accumulate rotation
    }, 50);
  }, 3100);
});

/* Mines grid */
const minesGrid = document.getElementById('minesGrid');
const minesResult = document.getElementById('minesResult');

function setupMines(){
  if(!minesGrid) return;
  minesGrid.innerHTML = '';
  const tiles = 25;
  // randomly place 4 mines
  const mines = new Set();
  while(mines.size < 4){
    mines.add(Math.floor(Math.random()*tiles));
  }
  for(let i=0;i<tiles;i++){
    const btn = document.createElement('button');
    btn.className = 'mine-tile';
    btn.setAttribute('data-index', i);
    btn.textContent = '';
    btn.addEventListener('click', () => {
      if(btn.classList.contains('revealed')) return;
      if(mines.has(i)){
        // reveal mine
        btn.classList.add('mine','revealed');
        btn.textContent = '💥';
        // show loss and reveal all mines
        minesResult.style.display = 'block';
        minesResult.className = 'game-result loss';
        minesResult.textContent = 'Boom! You hit a mine.';
        // reveal others
        Array.from(minesGrid.children).forEach((c, idx) => {
          if(mines.has(idx) && c !== btn){ c.classList.add('mine','revealed'); c.textContent = '💣' }
          c.disabled = true;
        });
      } else {
        btn.classList.add('revealed');
        btn.textContent = '✓';
        // check win condition: all safe tiles revealed (simple)
        const unrevealed = Array.from(minesGrid.children).filter(c => !c.classList.contains('revealed') && !c.classList.contains('mine'));
        if(unrevealed.length === 0){
          minesResult.style.display = 'block';
          minesResult.className = 'game-result win';
          minesResult.textContent = 'Nice! All safe tiles cleared.';
        }
      }
    });
    minesGrid.appendChild(btn);
  }

  // reset result area
  minesResult.style.display = 'none';
  minesResult.textContent = '';
}

// init mines
setupMines();

// small accessibility: allow re-setup via double click on result
minesResult && minesResult.addEventListener('dblclick', setupMines);

</script>
</body>
</html>