/* ⭐ CHAT CSS ⭐ */
  .q-emoji { font-size: 24px; cursor: pointer; transition: 0.2s; user-select: none; filter: drop-shadow(0 0 5px rgba(255,255,255,0.5)); }
  .q-emoji:hover { transform: scale(1.3); filter: drop-shadow(0 0 10px #fff); }
  
  .chat-bubble { background: rgba(0,0,0,0.85); color: #fff; padding: 8px 18px; border-radius: 20px; font-weight: bold; font-size: 16px; border: 2px solid #00ffff; box-shadow: 0 0 15px #00ffff; animation: floatUp 3s ease-out forwards; max-width: 90%; text-align: center; text-transform: uppercase; letter-spacing: 1px; }
  .chat-bubble.enemy { border-color: #ff00ff; box-shadow: 0 0 15px #ff00ff; color: #ff00ff; }
  
  @keyframes floatUp { 
      0% { opacity: 0; transform: translateY(30px) scale(0.5); } 
      15% { opacity: 1; transform: translateY(0) scale(1.1); } 
      30% { transform: translateY(0) scale(1); } 
      80% { opacity: 1; transform: translateY(-30px); } 
      100% { opacity: 0; transform: translateY(-60px); } 
  }

  /* Basic Reset and Layout */
  *{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif; touch-action: manipulation;}
  body{ background:#0a0a20; display:flex; align-items:center; justify-content:center; height:100vh; color:white; overflow:hidden; transition:background 0.5s, color 0.5s; width: 100vw; max-width: 100%; }
  
  /* ⭐ THEME FIX: DARK/LIGHT MODE CSS ⭐ */
  body.dark { background: #000000; color: #f0f0f0; } .lobby.dark { background: linear-gradient(145deg, #0a0a0a, #1a1a1a); color: #f0f0f0; } .lobby.dark h1 { text-shadow: 2px 2px 5px rgba(0,0,0,0.9), 0 0 10px #00ffff, 0 0 20px #00ffff !important; color: #fff; } .lobby.dark .btn { border-color: #00ffff; color: #00ffff; } .lobby.dark .btn:hover { background: #00ffff !important; color: #000 !important; box-shadow: 0 0 20px #00ffff; }
  body.light { background: #f0f0f0; color: #333; } .lobby.light { background: linear-gradient(145deg, #ffffff, #e0e0e0); color: #333; } .lobby.light h1 { text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.9) !important; color: #333; animation: none !important; } .lobby.light .btn { border-color: #333 !important; color: #333 !important; background: rgba(255, 255, 255, 0.8) !important; text-shadow: none !important; } .lobby.light .btn:hover { background: #333 !important; color: #fff !important; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .game-board.light .board { border: 2px solid #333; background: #ccc !important; } .game-board.light .cell { background: #f0f0f0 !important; border: 2px solid #333; } .game-board.light #backLobbyBtn { border: 2px solid #333 !important; color: #333 !important; background: linear-gradient(90deg, #ccc, #eee) !important; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) !important; text-shadow: none !important; } .game-board.light .scoreboard, .game-board.light #modeTitle { color: #333 !important; text-shadow: 1px 1px 3px rgba(255,255,255,0.9) !important; } .lobby.light #liveOnlineText { color: #333 !important; text-shadow: none !important; }
  
  /* ⭐ Splash & Loading Screen CSS ⭐ */
  #splash-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000000; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 1000; transition: opacity 1s ease-out, transform 1s ease-out; transform: scale(1); opacity: 1; }
  .splash-logo { font-size: 120px; font-weight: 900; letter-spacing: 10px; text-transform: uppercase; color: #fff; text-shadow: 0 0 10px #00ffff, 0 0 25px #00ffff, 0 0 40px #ff00ff, 0 0 60px #ff00ff; animation: neonScale 3s ease-in-out infinite alternate, neonPulse 2s ease-in-out infinite alternate; transform: scale(0.9); }
  @keyframes neonScale { 0%, 100% { transform: scale(0.95); } 50% { transform: scale(1.05); } } @keyframes neonPulse { 0%, 100% { text-shadow: 0 0 15px #00ffff, 0 0 30px #ff00ff; } 50% { text-shadow: 0 0 25px #ffffff, 0 0 50px #00ffff, 0 0 75px #ff00ff; } }
  .particle-container { position: absolute; width: 100%; height: 100%; z-index: 999; opacity: 0.7; } .particle { position: absolute; background: #ffffff; border-radius: 50%; animation: particle-drift linear infinite; }
  @keyframes particle-drift { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(100vw, 100vh) scale(0.5); opacity: 0; } }
  .light-streak { position: absolute; width: 200%; height: 150px; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.1) 10%, rgba(255,255,255,0.7) 25%, rgba(255,255,255,0.1) 40%, rgba(0,0,0,0) 55%); transform: rotate(20deg); top: -20%; left: -100%; opacity: 0; animation: lightPass 4s ease-out forwards; z-index: 1001; }
  @keyframes lightPass { 0% { transform: translate(-100%, -50%) rotate(20deg); opacity: 0.8; } 50% { transform: translate(100%, -50%) rotate(20deg); opacity: 0.8; } 100% { transform: translate(200%, -50%) rotate(20deg); opacity: 0; } }
  #loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 101; opacity: 0; transition: opacity 1s ease-out; pointer-events: none; }
  #loading-overlay h2 { font-size: 50px; letter-spacing: 5px; text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff; animation: neonLoadPulse 1.5s infinite alternate; margin-bottom: 20px; }
  .neon-text-separator { font-size: 24px; color: #00ffff; text-shadow: 0 0 5px #00ffff; margin-bottom: 30px; }
  @keyframes neonLoadPulse{ 0%,100%{ opacity: 1; } 50%{ opacity: 0.8; } }
  .loading-bar-container { width: 70%; max-width: 500px; height: 25px; background: #333; border: 2px solid #00ffff; border-radius: 15px; overflow: hidden; box-shadow: 0 0 10px rgba(0, 255, 255, 0.5), inset 0 0 5px rgba(0, 255, 255, 0.2); margin-bottom: 15px; } .loading-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #00ffff, #ff00ff); border-radius: 12px; transition: width 0.1s linear; } .loading-percentage { font-size: 20px; color: #00ffff; text-shadow: 0 0 8px #00ffff; }

  /* Main Structure */
  .lobby, .game-board{ position:absolute;top:0;left:0;width:100%;height:100%; display:flex;flex-direction:column;align-items:center;justify-content:center; transition:0.5s; z-index: 5; text-align: center; }
  .lobby{background:linear-gradient(145deg,#1a002a,#002147);} 
  
  h1, #modeTitle, .scoreboard, #level-info-text { font-weight: 900 !important; text-shadow: 2px 2px 5px rgba(0,0,0,0.9), 0 0 15px currentColor !important; z-index: 10; }
  h1{ font-size:40px; letter-spacing:3px; margin-bottom:30px; transition:0.3s; animation: neonLobbyPulse 2s infinite alternate; }
  @keyframes neonLobbyPulse { 0%, 100% { text-shadow: 2px 2px 5px rgba(0,0,0,0.9), 0 0 10px #00ffff, 0 0 20px #00ffff; color: white; } 50% { text-shadow: 2px 2px 5px rgba(0,0,0,0.9), 0 0 15px #ff00ff, 0 0 30px #ff00ff, 0 0 5px #00ffff; color: #ffe0f0; } }

  #liveOnlineText { color: #00ffff; text-shadow: 0 0 10px #00ffff; font-weight: bold; transition: 0.3s; }

  .btn{ background: rgba(0, 0, 0, 0.7) !important; border: 2px solid #00ffff; color: white; font-size: 20px; padding: 10px 30px; margin: 8px; border-radius: 15px; cursor: pointer; transition: 0.3s; z-index: 15; font-weight: 900; } .btn:hover{ background: #00ffff !important; color: #000 !important; box-shadow: 0 0 20px #00ffff; }
  
    /* 👇 YAHAN SE COPY KARO AUR PASTE KAR DO 👇 */
.difficulty { 
    display: none; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 8px; 
    width: 96%; 
    margin: 5px auto 10px auto; /* Thoda upar-niche space */
    padding: 12px; 
    background: rgba(0, 255, 255, 0.05); /* Halka sa cyan background */
    border: 1px dashed rgba(0, 255, 255, 0.4); /* Dashed border sub-menu feel ke liye */
    border-radius: 12px; 
    box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.1); /* Andar ki taraf halka glow */
} 
.difficulty button { 
    flex: 1 1 45%; 
    margin: 0; 
    font-size: 13px !important; /* Font thoda chhota */
    padding: 8px 5px !important; /* Padding thodi kam */
    border-width: 1px !important; /* Border thoda patla taaki main button se alag lage */
    letter-spacing: 1px;
}

   .difficulty button[data-level="ultrahard"] { background: linear-gradient(90deg, #8b008b, #8b0000) !important; border-color: #ff00ff; color: white; font-weight: bold; text-shadow: 0 0 5px #ff00ff; } .difficulty button[data-level="ultrahard"]:hover { box-shadow: 0 0 20px #ff00ff, 0 0 40px #ff0000; background: linear-gradient(90deg, #ff0000, #ff00ff) !important; }

  /* Game Board */
  .board{ position:relative; display:grid; grid-template-columns:repeat(3,100px); grid-template-rows:repeat(3,100px); gap:8px; margin-top:20px; padding:10px; border-radius:15px; background: rgba(10, 10, 10, 0.8) !important; border: 2px solid #00ffff; transition: 0.3s; z-index: 15; max-width: 95vw; }
  .cell{ width:100px; height:100px; background: rgba(0, 0, 0, 0.6) !important; border:2px solid #00ffff; border-radius:10px; font-size:60px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:0.2s; user-select:none; z-index: 16; } .cell:hover{transform:translateY(-4px);} .winningCell{animation:winFlash 0.8s infinite alternate;}
  
  @keyframes neonBlue{ 0%,100%{text-shadow: 2px 2px 5px rgba(0,0,0,0.9), 0 0 10px #00ffff, 0 0 20px #00ffff;} 55%{text-shadow: 2px 2px 5px rgba(0,0,0,0.9), 0 0 20px #00ffff, 0 0 40px #00ffff;} }
  @keyframes neonRed{ 0%,100%{text-shadow: 2px 2px 5px rgba(0,0,0,0.9), 0 0 10px #ff0000, 0 0 20px #ff0000;} 55%{text-shadow: 2px 2px 5px rgba(0,0,0,0.9), 0 0 20px #ff0000, 0 0 40px #ff0000;} }
  @keyframes winFlash{0%{box-shadow:0 0 10px #00ffff, 0 0 20px #00ffff;}50%{box-shadow:0 0 20px #00ffff, 0 0 40px #00ffff;}100%{box-shadow:0 0 10px #00ffff, 0 0 20px #00ffff;}}
  
  .winning-line{ position:absolute; height:8px; background:#00ff4d; box-shadow:0 0 12px #00ff4d, 0 0 24px #00ff4d; border-radius:8px; transform-origin:center center; z-index:20; display:none; }
  .popup{ position:absolute;top:0;left:0;width:100%;height:100%; background:rgba(0,0,0,0.9); display:flex;align-items:center;justify-content:center; font-size:50px;flex-direction:column;display:none;z-index:30; text-align: center; }
  #winnerText .win-msg { font-size: 50px; margin-bottom: 10px; font-weight: bold; text-transform: uppercase; animation: neonWinGlow 1.5s infinite alternate; } #winnerText .lose-msg { font-size: 30px; opacity: 0.7; text-shadow: none; font-weight: normal; }
  @keyframes neonWinGlow { 0% { transform: scale(1); text-shadow: 0 0 10px #fff, 0 0 20px #00ffff, 0 0 30px #ff00ff; color: #fff; } 100% { transform: scale(1.05); text-shadow: 0 0 20px #00ffff, 0 0 40px #ff00ff, 0 0 60px #fff; color: #e0f7fa; } }
  .popup button{margin-top:20px;padding:10px 20px;background:#00ffff;border:none;border-radius:10px;font-size:18px;cursor:pointer; font-weight: bold;}
  
  .scoreboard{ margin-top:10px; font-size:22px; opacity:0.9; transition:0.3s; z-index: 15; }

/* REPLACE WITH THIS NAYA CSS: */
#backLobbyBtn { 
    position: fixed; 
    top: 20px; 
    right: 20px; 
    width: 45px; 
    height: 45px; 
    background: rgba(0, 0, 0, 0.7) !important; 
    border: 2px solid #00ffff !important; 
    border-radius: 50% !important; 
    color: #00ffff !important; 
    display: flex !important; 
    align-items: center; 
    justify-content: center; 
    z-index: 10000 !important; 
    box-shadow: 0 0 15px #00ffff !important; 
    cursor: pointer; 
    padding: 0 !important; 
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; 
} 

#backLobbyBtn:hover { 
    transform: scale(1.1) rotate(-5deg); 
    background: #00ffff !important; 
    color: #000 !important; 
    box-shadow: 0 0 25px #00ffff, 0 0 40px rgba(0,255,255,0.6) !important; 
}

/* REPLACE WITH THIS: */
.media-btn svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 2px currentColor);
}

/* 👇 YAHAN SE NAYA CSS PASTE KARO 👇 */
.dial-node {
    position: absolute; top: 50%; left: 50%;
    pointer-events: none !important; /* 🔥 YE LINE DIRECT CLICK BLOCK KAREGI */
    width: 45px; height: 45px; margin: -22.5px 0 0 -22.5px;
    border-radius: 50% !important; border: 2px solid rgba(0,255,255,0.3) !important;
    color: transparent !important; /* Text gayab */
    padding: 0 !important;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.5); cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.dial-node.active-node {
    border-color: #fff !important;
    box-shadow: 0 0 20px #00ffff, inset 0 0 10px #00ffff !important;
    z-index: 10;
}
.vip-node { background: rgba(0,0,0,0.8) !important; border-color: #ff00ff !important; }
.vip-node.active-node { box-shadow: 0 0 20px #ff00ff, inset 0 0 10px #ff00ff !important; }

/* Emojis Injecting via CSS */
.orb-def::before { content: '🌌'; font-size: 22px; position: absolute; color: initial; }
.orb-drk::before { content: '⬛'; font-size: 20px; position: absolute; color: initial; }
.orb-lgt::before { content: '⬜'; font-size: 20px; position: absolute; color: initial; }
.orb-red::before { content: '🔴'; font-size: 20px; position: absolute; color: initial; }
.orb-ylw::before { content: '🟡'; font-size: 20px; position: absolute; color: initial; }
.orb-grn::before { content: '🟢'; font-size: 20px; position: absolute; color: initial; }
.orb-pnk::before { content: '🩷'; font-size: 20px; position: absolute; color: initial; }
.orb-cst::before { content: '🎨'; font-size: 22px; position: absolute; color: initial; }
.orb-liv::before { content: '✨'; font-size: 22px; position: absolute; color: initial; }
.orb-per::before { content: '📸'; font-size: 22px; position: absolute; color: initial; }
.orb-fx::before { content: '🎇'; font-size: 22px; position: absolute; color: initial; }

.orb-def { background: linear-gradient(145deg,#1a002a,#002147) !important; }
.orb-drk { background: #000 !important; }
.orb-lgt { background: #fff !important; }
.orb-red { background: #d32f2f !important; }
.orb-ylw { background: #fbc02d !important; }
.orb-grn { background: #2e7d32 !important; }
.orb-pnk { background: #d81b60 !important; }
/* 👆 YAHAN TAK PASTE KARO 👆 */

  #level-system-container { display: none; width: 80%; max-width: 400px; margin-top: 30px; padding: 15px; background: rgba(0, 0, 0, 0.6); border: 2px solid #00ffff; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 255, 255, 0.5); text-align: left; z-index: 15; } #level-info-text { color: #fff; font-size: 18px; margin-bottom: 8px; } .progress-bar-wrapper { width: 100%; height: 25px; background: #333; border: 2px solid #ff00ff; border-radius: 12px; overflow: hidden; box-shadow: 0 0 10px rgba(255, 0, 255, 0.5), inset 0 0 5px rgba(255, 0, 255, 0.2); } #level-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #00ffff, #ff00ff); border-radius: 10px; transition: width 0.3s ease-out; }
  .lobby.light #level-system-container { background: rgba(255, 255, 255, 0.9); border-color: #333; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .lobby.light .progress-bar-wrapper { border: 2px solid #999; box-shadow: none; } .lobby.light #level-progress-fill { background: linear-gradient(90deg, #333, #666); } .lobby.dark #level-system-container { background: rgba(0, 0, 0, 0.8); border-color: #00ffff; }

  /* Modified Themes */
  body.pink {background:#ffe6f0;} .lobby.pink {background:#ffe6f0;} .lobby.pink h1, .game-board.pink h1, .game-board.pink .scoreboard, .lobby.pink #liveOnlineText {color:#d81b60 !important;} .lobby.pink .btn{border-color:#d81b60 !important; color:#fff !important; background: rgba(216, 27, 96, 0.8) !important;} .lobby.pink .btn:hover{background:#d81b60 !important; box-shadow:0 0 20px #d81b60;} .game-board.pink #backLobbyBtn { border:2px solid #fff !important; color:#fff !important; background:linear-gradient(90deg,#ff80b3,#ff0066) !important; box-shadow:0 0 10px #ff80b3, 0 0 20px #ff0066 !important; }
  body.red {background:#ffcccc;} .lobby.red {background:#ffcccc;} .lobby.red h1, .game-board.red h1, .game-board.red .scoreboard, .lobby.red #liveOnlineText {color:#d32f2f !important;} .lobby.red .btn{border-color:#d32f2f !important; color:#fff !important; background: rgba(211, 47, 47, 0.8) !important;} .lobby.red .btn:hover{background:#d32f2f !important; box-shadow:0 0 20px #d32f2f;} .game-board.red #backLobbyBtn { border:2px solid #fff !important; color:#fff !important; background:linear-gradient(90deg,#ff6666,#cc0000) !important; box-shadow:0 0 10px #ff6666, 0 0 20px #cc0000 !important; }
  body.yellow {background:#ffffe0;} .lobby.yellow {background:#ffffe0;} .lobby.yellow h1, .game-board.yellow h1, .game-board.yellow .scoreboard, .lobby.yellow #liveOnlineText {color:#fbc02d !important;} .lobby.yellow .btn{border-color:#fbc02d !important; color:#000 !important; background: rgba(251, 192, 45, 0.8) !important;} .lobby.yellow .btn:hover{background:#fbc02d !important; box-shadow:0 0 20px #fbc02d;} .game-board.yellow #backLobbyBtn { border:2px solid #000 !important; color:#000 !important; background:linear-gradient(90deg,#ffeb3b,#ff9800) !important; box-shadow:0 0 10px #ffeb3b, 0 0 20px #ff9800 !important; }
  body.green {background:#e8f5e9;} .lobby.green {background:#e8f5e9;} .lobby.green h1, .game-board.green h1, .game-board.green .scoreboard, .lobby.green #liveOnlineText {color:#2e7d32 !important;} .lobby.green .btn{border-color:#2e7d32 !important; color:#fff !important; background: rgba(46, 125, 50, 0.8) !important;} .lobby.green .btn:hover{background:#2e7d32 !important; box-shadow:0 0 20px #2e7d32;} .game-board.green #backLobbyBtn { border:2px solid #fff !important; color:#fff !important; background:linear-gradient(90deg,#81c784,#388e3c) !important; box-shadow:0 0 10px #81c784, 0 0 20px #388e3c !important; }

  .rain-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; overflow: hidden; } .drop { position: absolute; bottom: 100%; animation: rain-fall linear infinite; font-size: 20px; opacity: 0.8; } .pink .drop {color: #ff3399; text-shadow: 0 0 5px #ff99cc;} .pink .drop::before {content: '❤️';} .red .drop {color: #cc0000; text-shadow: 0 0 5px #ff6666;} .red .drop::before {content: '🌹';} .yellow .drop {color: #ffcc00; text-shadow: 0 0 5px #ffff66;} .yellow .drop::before {content: '🌼';} .green .drop {color: #2e7d32; text-shadow: 0 0 5px #81c784;} .green .drop::before {content: '🍀';} @keyframes rain-fall { 0% {transform: translateY(0) scale(1);} 100% {transform: translateY(100vh) scale(1.5);} }
  .moon { position: fixed; top: 5%; right: 10%; width: 80px; height: 80px; background: #fdfd96; border-radius: 50%; box-shadow: 0 0 25px rgba(253, 253, 150, 0.7), inset -10px -10px 20px #ccc; transition: opacity 0.5s; z-index: 10; display: none; } .sun { position: fixed; top: 5%; right: 10%; width: 80px; height: 80px; background: #ffeb3b; border-radius: 50%; box-shadow: 0 0 30px rgba(255, 235, 59, 0.8), 0 0 60px rgba(255, 235, 59, 0.5); transition: opacity 0.5s; z-index: 10; display: none; animation: sunPulse 3s infinite alternate; } @keyframes sunPulse { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.05); opacity: 1; } } .star-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9; overflow: hidden; display: none; } .star { position: absolute; background: #ffffff; border-radius: 50%; animation: star-fall linear infinite; } @keyframes star-fall { 0% {transform: translateY(0) translateX(0);} 100% {transform: translateY(100vh) translateX(50vw);} }
  
  #resetModeScoreBtn { position: absolute; top: 80px; right: 20px; padding: 5px 10px; font-size: 14px; background: none; color: #ff0000; border: 1px solid #ff0000; border-radius: 8px; cursor: pointer; display: none; transition: 0.2s; z-index: 15; font-weight: bold; background: rgba(0,0,0,0.5); } #resetModeScoreBtn:hover { background: #ff0000; color: white; box-shadow: 0 0 10px #ff0000; }

  /* ⭐ ROOM MODALS CSS ⭐ */
  .room-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); display: none; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(5px); }
  .room-box { background: #111; padding: 30px; border: 2px solid #00ffff; border-radius: 15px; text-align: center; box-shadow: 0 0 20px #00ffff; max-width: 90%; }
  .room-box h2 { color: #00ffff; text-shadow: 0 0 10px #00ffff; margin-bottom: 20px; font-size: 28px; }
  #roomCodeDisplay { font-size: 60px; color: #ff00ff; letter-spacing: 10px; text-shadow: 0 0 20px #ff00ff; margin: 20px 0; display: none; }
  #roomCodeInput { font-size: 40px; text-align: center; width: 200px; max-width: 80vw; padding: 10px; border-radius: 10px; border: 2px solid #ff00ff; background: #222; color: white; margin: 0 auto 20px auto; display: none; outline: none; }
  #roomCodeInput:focus { box-shadow: 0 0 15px #ff00ff; }

  /* ⭐ MEDIA BUTTONS (MIC & CAM) CSS ⭐ */
  /* REPLACE WITH THIS: */
.media-btn {
    position: absolute;
    top: 20px;
    width: 42px;
    height: 42px;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.75) !important;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100;
    padding: 0 !important;
}

#micBtn { left: 20px; }
#camBtn { left: 72px; }

/* OFF State (Red Glow) */
.media-btn.off {
    color: #ff0055 !important;
    border: 2px solid #ff0055 !important;
    box-shadow: 0 0 10px rgba(255, 0, 85, 0.5) !important;
}

/* ON State (Green Glow) */
.media-btn.on {
    color: #00ff4d !important;
    border: 2px solid #00ff4d !important;
    box-shadow: 0 0 12px #00ff4d !important;
}

.media-btn:hover {
    transform: scale(1.1);
}

.media-btn svg {
    display: block;
    filter: drop-shadow(0 0 2px currentColor);
}

  @media (max-width: 600px) {
      .splash-logo { font-size: 20vw; letter-spacing: 5px; } #loading-overlay h2 { font-size: 8vw; letter-spacing: 3px; } .neon-text-separator { font-size: 4vw; } h1 { font-size: 30px !important; margin-bottom: 15px; } .btn { font-size: 16px; padding: 8px 20px; margin: 6px; }  .board { gap: 6px; padding: 8px; grid-template-columns: repeat(3, 85px); grid-template-rows: repeat(3, 85px); margin-top: 15px; } .cell { width: 85px; height: 85px; font-size: 50px; } #settingBtn { top: 15px; left: 15px; font-size: 14px; padding: 6px 12px; }  #resetModeScoreBtn { top: 60px; right: 15px; font-size: 11px; padding: 5px 8px; } .scoreboard { font-size: 16px; margin-top: 5px; } #modeTitle { font-size: 24px; margin-top: 50px; margin-bottom: 10px;} #themeOptions { top: 0; left: 0; padding: 0; max-width: 100%; max-height: 100%; overflow: hidden; }
     #themeOptions button.theme-btn { margin: 3px 0; padding: 6px; font-size: 13px; } .custom-label { font-size: 12px; } #customToggleBtn { font-size: 12px; padding: 8px; margin-top: 8px !important; } #winnerText .win-msg { font-size: 30px; } #winnerText .lose-msg { font-size: 20px; } .popup button { font-size: 16px; padding: 8px 20px; }
      
      /* Mobile Fixes for Buttons & Video */
      #videoContainer { top: 60px !important; left: 15px !important; gap: 15px !important; }
      #localVideo, #remoteVideo { width: 60px !important; height: 60px !important; }
  }
  @media (max-width: 360px) { .board { grid-template-columns: repeat(3, 75px); grid-template-rows: repeat(3, 75px); } .cell { width: 75px; height: 75px; font-size: 40px; } h1 { font-size: 24px !important; } #modeTitle { font-size: 20px !important; margin-top: 50px; } .btn { font-size: 14px; padding: 8px 15px; } }
    @media (max-width: 280px) { 
      .board { grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(3, 60px); gap: 4px; } 
      .cell { width: 60px; height: 60px; font-size: 30px; } 
      h1 { font-size: 18px !important; } 
      .btn { font-size: 12px; padding: 5px 10px; }
      #videoContainer { transform: scale(0.7); left: 0px !important; transform-origin: left top; }
    }
    
      /* ⭐ ULTIMATE TIC-TAC-TOE CSS (Responsive) ⭐ */
  .ultimate-board { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; padding: 10px; border: 2px solid #00ffff; border-radius: 15px; background: rgba(0, 0, 0, 0.6); box-shadow: 0 0 15px #00ffff; margin-top: 15px; max-width: 96vw; z-index: 15; position: relative; }
  .large-cell { background: rgba(10, 10, 10, 0.8); border: 2px solid #555; padding: 5px; border-radius: 10px; display: flex; align-items: center; justify-content: center; position: relative; transition: 0.3s; }
  .large-cell.active-target { border-color: #00ffff; box-shadow: 0 0 15px rgba(0, 255, 255, 0.5), inset 0 0 10px rgba(0, 255, 255, 0.2); animation: pulseGlow 1.5s infinite alternate; z-index: 5; }
  .small-board { display: grid; grid-template-columns: repeat(3, 35px); grid-template-rows: repeat(3, 35px); gap: 3px; }
  .small-cell { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(0, 255, 255, 0.2); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; cursor: pointer; transition: 0.2s; user-select: none; }
  .small-cell:hover { background: rgba(0, 255, 255, 0.2); transform: scale(1.1); }
  
  .large-cell.won-o::after { content: 'O'; position: absolute; font-size: 70px; font-weight: 900; color: #00ffff; text-shadow: 0 0 15px #00ffff; background: rgba(0,0,0,0.85); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 2px solid #00ffff; animation: zoomIn 0.3s ease-out; }
  .large-cell.won-x::after { content: 'X'; position: absolute; font-size: 70px; font-weight: 900; color: #ff00ff; text-shadow: 0 0 15px #ff00ff; background: rgba(0,0,0,0.85); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 2px solid #ff00ff; animation: zoomIn 0.3s ease-out; }
  .large-cell.won-draw::after { content: '—'; position: absolute; font-size: 50px; color: #888; background: rgba(0,0,0,0.85); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 2px solid #888; }
  
  @keyframes pulseGlow { 0% { transform: scale(0.98); } 100% { transform: scale(1.02); } }
  
  /* Mobile Responsiveness (Auto Shrink for smaller screens) */
  @media (max-width: 400px) {
      .ultimate-board { gap: 4px; padding: 5px; }
      .large-cell { padding: 3px; }
      .small-board { grid-template-columns: repeat(3, 26px); grid-template-rows: repeat(3, 26px); gap: 2px; }
      .small-cell { font-size: 16px; }
      .large-cell.won-o::after, .large-cell.won-x::after { font-size: 50px; }
  }
  @media (max-width: 320px) {
      .small-board { grid-template-columns: repeat(3, 20px); grid-template-rows: repeat(3, 20px); }
      .small-cell { font-size: 14px; }
      .large-cell.won-o::after, .large-cell.won-x::after { font-size: 40px; }
  }
/* ⭐ BLITZ MODE CSS ⭐ */
@keyframes panicShake { 0% { transform: translate(1px, 1px) rotate(0deg); } 25% { transform: translate(-1px, -2px) rotate(-1deg); } 50% { transform: translate(-3px, 0px) rotate(1deg); } 75% { transform: translate(3px, 2px) rotate(0deg); } 100% { transform: translate(1px, -1px) rotate(-1deg); } }
.panic-mode { animation: panicShake 0.2s infinite; background-color: #3a0000 !important; }
.cell.forced-move { animation: flashCellBlitz 0.5s; background: #ffcc00 !important; color: #000 !important; text-shadow: none !important; }
@keyframes flashCellBlitz { 0% { transform: scale(1.1); box-shadow: 0 0 20px #ffcc00; } 100% { transform: scale(1); } }

    * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; user-select: none; }
    
    body { background-color: #0b0b1a; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; overflow-y: auto; overflow-x: hidden; padding-bottom: 50px; }
    
    .header { width: 100%; padding: 15px 25px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: linear-gradient(180deg, rgba(11,11,26,0.95) 60%, transparent); z-index: 9001; backdrop-filter: blur(5px); }
    .header h1 { color: #00ffcc; text-shadow: 0 0 15px #00ffcc; letter-spacing: 3px; font-size: 22px; text-transform: uppercase; margin: 0; }
    .close-btn { background: transparent; border: none; color: #ff0055; font-size: 40px; cursor: pointer; line-height: 0.8; font-weight: 100; text-shadow: 0 0 15px #ff0055; transition: 0.2s; }
    .close-btn:hover { transform: scale(1.2); }

    .sub-title { color: #888; margin-bottom: 20px; font-size: 13px; font-weight: bold; letter-spacing: 1px; text-align: center; padding: 0 20px; }

    .fx-container { width: 95%; max-width: 500px; display: flex; flex-direction: column; gap: 12px; z-index: 10; }
    .fx-category { background: rgba(25, 25, 45, 0.7); border: 2px solid #1a1a3a; border-radius: 12px; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
    .fx-category.active { border-color: #00ffcc; box-shadow: 0 0 15px rgba(0,255,204,0.15); background: rgba(20, 20, 40, 0.9); }
    
    .fx-header { padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; background: rgba(0,0,0,0.2); transition: 0.2s; }
    .fx-header:hover { background: rgba(0,255,204,0.08); }
    .fx-title { font-size: 15px; font-weight: bold; color: #fff; letter-spacing: 1px; display: flex; align-items: center; gap: 10px; }
    .fx-icon { font-size: 18px; }
    .arrow { color: #00ffcc; font-weight: bold; transition: transform 0.3s ease; font-size: 12px; }
    .fx-category.active .arrow { transform: rotate(180deg); }

    .fx-content { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1); background: rgba(10,10,25,0.6); }
    .fx-content-inner { padding: 12px; display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed rgba(0,255,204,0.2); }

    .fx-btn { padding: 11px 14px; background: #0c0c1c; border: 1px solid #222244; border-radius: 8px; color: #aaa; font-size: 12px; font-weight: bold; text-align: left; cursor: pointer; transition: 0.2s; display: flex; justify-content: space-between; align-items: center; }
    .fx-btn:hover { border-color: #00ffcc; color: #fff; }
    .fx-btn.selected { background: linear-gradient(90deg, rgba(0,255,204,0.15), transparent); border-color: #00ffcc; color: #00ffcc; box-shadow: inset 4px 0 0 #00ffcc; }
    .fx-btn.selected::after { content: 'TESTING'; font-size: 9px; background: #00ffcc; color: #000; padding: 2px 6px; border-radius: 4px; font-weight: 900; }

    /* ----------------------------------------------------- */
    /* 🛠️ INLINE PORTABLE PREVIEW ARENA 🛠️ */
    /* ----------------------------------------------------- */
    #inline-preview-container { 
        display: none; 
        flex-direction: column; align-items: center; 
        margin-top: 15px; padding-top: 15px; border-top: 1px dashed rgba(0,255,204,0.2);
        z-index: 20; position: relative;
    }
    
    .arena-title { font-size: 11px; font-weight: 900; color: #ffcc00; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
    
    .board-canvas-wrapper {
        position: relative;
        z-index: 10;
        perspective: 1200px; /* Added for 3D depth */
    }

    #fxCanvasLayer { 
        position: absolute; 
        top: 50%; left: 50%; 
        transform: translate(-50%, -50%); 
        pointer-events: none; 
        z-index: 15; 
    }

    .fluid-wrapper {
        position: absolute; 
        top: 50%; left: 50%; 
        transform: translate(-50%, -50%); 
        width: 380px; height: 380px;
        background: transparent; 
        filter: blur(8px) contrast(15); 
        pointer-events: none; z-index: 14; 
        display: none; 
    }
    #fluidCanvasLayer {
        width: 100%; height: 100%; display: block;
    }

    .preview-board { 
        display: grid; grid-template-columns: repeat(3, 70px); grid-template-rows: repeat(3, 70px); gap: 8px; 
        background: rgba(10,10,25,0.7); padding: 10px; border-radius: 12px; 
        border: 2px solid rgba(0,255,204,0.2); box-shadow: 0 10px 25px rgba(0,0,0,0.5);
        z-index: 25; position: relative;
    }
    .preview-cell { 
        width: 70px; height: 70px; background: rgba(8, 8, 22, 0.85); border: 1px solid #1a1a3a; border-radius: 8px; 
        font-size: 35px; font-weight: 900; color: #fff; display: flex; align-items: center; justify-content: center; 
        cursor: pointer; transition: transform 0.1s; position: relative; z-index: 26;
    }
    .preview-cell:active { transform: scale(0.95); }
    .preview-cell.o-sign { color: #00ffff; text-shadow: 0 0 10px #00ffff; }
    .preview-cell.x-sign { color: #ff00ff; text-shadow: 0 0 10px #ff00ff; }
    
    .dark-mode-board .preview-cell {
        background: rgba(5, 5, 12, 0.6) !important;
        border-color: #1a1a35 !important;
    }

    /* 💎 ENGINE 7: 3D HOLOGRAPHIC CARD STYLES 💎 */
    .holo-mode {
        perspective: 1000px;
        transform-style: preserve-3d;
    }
    .holo-mode .preview-cell {
        transform-style: preserve-3d;
        transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), border 0.3s, box-shadow 0.3s;
        overflow: hidden; 
        box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    }
    .holo-mode .preview-cell:active { transform: none; } 

    .holo-mode .preview-cell::before {
        content: ''; position: absolute; inset: 0; border-radius: 7px;
        padding: 1.5px; background: linear-gradient(135deg, transparent, rgba(0,255,255,0.3), transparent);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor; mask-composite: exclude;
        pointer-events: none; opacity: 1; transition: 0.3s;
    }

    .shine, .shine-rainbow {
        position: absolute; inset: 0; border-radius: 7px;
        background-size: 200% 200%; background-position: 0% 0%;
        transition: background-position 0s, opacity 0.5s;
        pointer-events: none; opacity: 0; mix-blend-mode: color-dodge;
        z-index: 1;
    }
    .shine { background-image: linear-gradient(125deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 30%, rgba(0,255,255,0.24) 40%, rgba(255,0,255,0.24) 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%); }
    .shine-rainbow { background-image: linear-gradient(115deg, rgba(255,0,0,0.2) 0%, rgba(255,165,0,0.2) 15%, rgba(255,255,0,0.2) 30%, rgba(0,255,0,0.2) 45%, rgba(0,255,255,0.2) 60%, rgba(0,0,255,0.2) 75%, rgba(238,130,238,0.2) 100%); }

    .cell-text {
        width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
        position: relative; z-index: 2; pointer-events: none;
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        transform: translateZ(0px); 
    }
    .holo-mode .cell-text {
        transform: translateZ(30px) scale(0.9); 
    }

    /* 🦾 ENGINE 8: HARDWARE DOM GLITCH ENGINE STYLES 🦾 */
    .ghost-echo {
        position: absolute; font-size: 35px; font-weight: 900; pointer-events: none; z-index: 12;
        animation: ghostRipple 0.45s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }
    @keyframes ghostRipple {
        0% { transform: scale(1); opacity: 0.8; }
        100% { transform: scale(2.2); opacity: 0; }
    }

    .glitch-active {
        animation: textGlitchEffect 0.22s steps(2) infinite;
    }
    @keyframes textGlitchEffect {
        0% { transform: translate(3px, -2px) skew(-5deg); clip-path: inset(10% 0 70% 0); }
        20% { transform: translate(-3px, 2px) skew(5deg); clip-path: inset(40% 0 30% 0); }
        40% { transform: translate(2px, 3px) skew(-10deg); clip-path: inset(75% 0 5% 0); }
        60% { transform: translate(-2px, -3px) skew(10deg); clip-path: inset(5% 0 80% 0); }
        80% { transform: translate(4px, 1px) skew(0deg); clip-path: inset(50% 0 15% 0); }
        100% { transform: translate(0px, 0px) skew(0deg); clip-path: inset(0); }
    }

    .quadrant-chunk {
        position: absolute; width: 6px; height: 6px; border-radius: 2px;
        pointer-events: none; z-index: 25;
        animation: quadExplode 0.4s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
    }
    @keyframes quadExplode {
        0% { transform: translate(0, 0) scale(1); opacity: 1; }
        100% { transform: translate(var(--mx), var(--my)) scale(0.2); opacity: 0; }
    }

    .laser-frame-pulse {
        position: absolute; 
        border-radius: 12px; 
        pointer-events: none; 
        z-index: 5;
        border: 4px solid var(--laser-color); 
        inset: 10px;
        animation: frameLaserFlash 0.35s ease-out forwards; 
    }

    @keyframes frameLaserFlash {
        0% { 
            inset: 10px; 
            opacity: 1; 
            box-shadow: 0 0 15px #fff, 0 0 30px var(--laser-color), 0 0 60px var(--laser-color), 0 0 90px var(--laser-color);
        }
        100% { 
            inset: -15px; 
            border-color: transparent; 
            opacity: 0; 
            box-shadow: 0 0 100px transparent; 
        }
    }

    /* 🚀 ENGINE 10: QUANTUM MATRIX MODE 🚀 */
    .quantum-mode {
        transform-style: preserve-3d;
        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* Standard Arena Buttons */
    .arena-actions { display: flex; gap: 10px; margin-top: 15px; z-index: 30; position: relative; }
    .clear-arena-btn { padding:8px 15px; border-radius:10px; background:rgba(255,0,85,0.1); border: 1px solid rgba(255,0,85,0.4); color:#ff0055; font-size: 11px; font-weight: bold; cursor: pointer; text-transform: uppercase; transition: 0.2s;}
    .clear-arena-btn:hover { background: #ff0055; color: #fff; box-shadow: 0 0 15px #ff0055; }
    
    .apply-arena-btn { padding:8px 15px; border-radius:10px; background:rgba(0,255,204,0.1); border: 1px solid rgba(0,255,204,0.4); color:#00ffcc; font-size: 11px; font-weight: bold; cursor: pointer; text-transform: uppercase; transition: 0.2s;}
    .apply-arena-btn:hover { background: #00ffcc; color: #000; box-shadow: 0 0 15px #00ffcc; }

    /* 🌟 CONFIRMATION MODAL 🌟 */
    #applyConfirmModal { 
        display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 
        background: rgba(0,0,0,0.85); align-items: center; justify-content: center; 
        z-index: 9999; backdrop-filter: blur(5px); 
    }
    .confirm-box { 
        background: linear-gradient(145deg, #111, #1a1a2e); padding: 25px; border: 2px solid #00ffcc; 
        border-radius: 15px; text-align: center; box-shadow: 0 0 20px rgba(0,255,204,0.3); width: 300px; max-width: 90%; 
    }
/* SPACETIME TRANSPARENCY FIX */
body .game-board #board.spacetime-transparent {
    background: rgba(5, 5, 15, 0.15) !important; /* Transparency yahan se control hogi */
    border-color: rgba(0, 255, 255, 0.4) !important; /* Halki si glow ke liye */
}
/* 💎 Holo Mode Main Board Fix 💎 */
.holo-mode .cell {
    position: relative !important;
    background: rgba(8, 8, 22, 0.85) !important; /* Base color jisse 'color-dodge' kaam kare */
    isolation: isolate; /* Shine ko cell ke andar lock karne ke liye */
}
/* 🌙 SUN & MOON BACKGROUND Z-INDEX FIX 🌙 */
.lobby, .game-board {
    z-index: auto !important; 
}
.star-container {
    z-index: 1 !important;
}
.moon, .sun {
    z-index: 2 !important;
    pointer-events: none !important; /* Taki moon galti se screen touch block na kare */
}
.rain-container {
    z-index: 3 !important;
}

/* Custom Color Swatch Buttons */
.color-swatch {
    width: 35px; 
    height: 35px; 
    border-radius: 50%; 
    cursor: pointer; 
    border: 2px solid transparent; 
    transition: all 0.2s ease;
}
.color-swatch:hover {
    transform: scale(1.2); 
    border-color: #ffffff;
}
/* Custom Neon Slider Styles */
.neon-slider { -webkit-appearance: none; appearance: none; outline: none; cursor: pointer; }
.neon-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 22px; height: 22px;
    border-radius: 50%; background: #ffffff; border: 3px solid #000000;
    box-shadow: 0 0 10px rgba(255,255,255,0.8); cursor: pointer;
}

/* ♾️ INFINITE MODE CSS ♾️ */
@keyframes fadeBlink { 
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 20px #ffcc00; border-color: #ffcc00; } 
    50% { opacity: 0.4; transform: scale(0.9); box-shadow: none; border-color: transparent; } 
}
.blink-warning { animation: fadeBlink 1s infinite !important; }

@keyframes popOutAnim { 
    0% { transform: scale(1); opacity: 1; filter: brightness(2); } 
    100% { transform: scale(0); opacity: 0; filter: brightness(0); } 
}
.pop-out-ghost { animation: popOutAnim 0.35s ease-in forwards !important; pointer-events: none; z-index: 1000; }