:root{
  --g-bg-1: #04040a;
  --g-bg-2: #051426;
  --g-accent-a: #00ff9d; /* neon green */
  --g-accent-b: #7b4cff; /* electric purple */
  --g-accent-c: #00c2ff; /* cyan */
  --g-glass: rgba(255,255,255,0.03);
  --g-panel-edge: rgba(123,76,255,0.12);
  --g-shadow: 0 18px 60px rgba(0,0,0,0.7);
}

/* Gamer background with subtle animated gradient */
html,body{height:100%;margin:0;padding:0;background:radial-gradient(1200px 600px at 10% 10%, rgba(0,194,255,0.04), transparent 15%), radial-gradient(900px 500px at 90% 90%, rgba(123,76,255,0.03), transparent 20%), linear-gradient(160deg,var(--g-bg-1),var(--g-bg-2));font-family:Inter,Segoe UI,Roboto,system-ui,Arial;color:#e9fbff}
body{perspective:1000px;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* Scanlines / HUD noise */
body:before{content:'';position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,0.01) 1px, transparent 1px);background-size:100% 4px;mix-blend-mode:overlay;opacity:0.6}

/* 3D container helper */
.ui-3d{transform-style:preserve-3d;backface-visibility:hidden}

/* Ensure the theme applies even if pages use different wrappers */
/* Root shell/container/header styling */
header.site-header, .shell, .container, .modal, .modal-content {
  background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.006));
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 14px 50px rgba(0,0,0,0.6);
  border-radius: 12px;
}

/* Player pill / small UI elements */
.player-pill, .user-bar, .player-pill * {
  background: linear-gradient(90deg, rgba(0,194,255,0.04), rgba(123,76,255,0.03));
  border: 1px solid rgba(255,255,255,0.03);
  color: #e8fbff;
  padding: 6px 8px;
  border-radius: 999px;
}

/* Back buttons and other buttons that are not .btn */
.back-btn, .close, .modal .close, a.back-btn, button[onclick] {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.04);
  color: #eafcff;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}

/* Modal content stronger holographic look */
.modal {position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);z-index:7000}
.modal .modal-content{max-width:980px;padding:20px;border-radius:14px}

/* Generic inputs and selects fallback */
input, textarea, select { background: rgba(255,255,255,0.02); border-radius:10px; border:1px solid rgba(255,255,255,0.03); padding:8px }

/* Ensure boards and tables get neon edge if not using .panel */
.board, .game-area, .ttt-board, .panel, .container, .shell { border-radius:12px }


/* Panels: holographic gamer cards */
.panel{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:14px;padding:16px;margin-bottom:16px;border:1px solid rgba(255,255,255,0.04);box-shadow:var(--g-shadow);transition:transform .25s cubic-bezier(.2,.9,.2,1),box-shadow .18s}
.panel.holo-edge{position:relative}
.panel.holo-edge:after{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg, rgba(0,255,157,0.06), rgba(123,76,255,0.06));filter:blur(10px);mix-blend-mode:screen}
.panel.ui-3d{transform:translateZ(18px)}
.panel:hover{transform:translateZ(36px) translateY(-6px);box-shadow:0 30px 80px rgba(0,0,0,0.75),0 0 40px rgba(123,76,255,0.06)}

/* Gamer HUD title */
.float-title{font-size:2.2rem;font-weight:900;color:var(--g-accent-c);text-shadow:0 6px 24px rgba(0,194,255,0.06)}

/* Buttons: stronger gamer/neon style */
.btn{background:linear-gradient(90deg,var(--g-accent-a),var(--g-accent-b));color:#021018;font-weight:900;border-radius:12px;padding:10px 16px;border:none;box-shadow:0 10px 40px rgba(0,0,0,0.6),0 0 16px rgba(123,76,255,0.08) inset;transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 20px 60px rgba(0,0,0,0.7),0 0 40px rgba(0,255,157,0.12)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#dffafb}

/* Emphasized primary button */
.btn.primary{background:linear-gradient(90deg,var(--g-accent-a),var(--g-accent-c));padding:12px 20px;font-size:1rem}

/* Inputs: HUD inputs */
input[type='text'], select, textarea{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));border:1px solid rgba(255,255,255,0.04);padding:10px;border-radius:10px;color:#e8fbff;box-shadow:inset 0 6px 18px rgba(0,0,0,0.6)}
input:focus, select:focus, textarea:focus{outline:none;box-shadow:0 0 26px rgba(0,255,157,0.12);border-color:var(--g-accent-a)}

/* Tables */
table{border-collapse:collapse;background:transparent}
th,td{border:1px solid rgba(255,255,255,0.03);padding:10px;text-align:center}
thead th{background:linear-gradient(90deg, rgba(123,76,255,0.06), rgba(0,194,255,0.03));font-weight:800}

/* Holographic edges for important UI */
.holo-edge-small:after{content:'';position:absolute;inset:-2px;border-radius:8px;pointer-events:none;box-shadow:0 0 18px rgba(0,255,157,0.06),0 0 34px rgba(123,76,255,0.05) inset}

/* Victory overlay enhancement */
.victory-overlay{backdrop-filter:blur(8px) saturate(120%);background:linear-gradient(180deg, rgba(2,6,18,0.75), rgba(1,2,8,0.85));z-index:6000}

/* Glint and shine */
.glint{position:relative;overflow:hidden}
.glint:before{content:'';position:absolute;left:-50%;top:-30%;width:50%;height:160%;background:linear-gradient(120deg,transparent,rgba(255,255,255,0.06),transparent);transform:skewX(-18deg);animation:glintAnim 3s linear infinite}
@keyframes glintAnim{0%{left:-50%}50%{left:120%}100%{left:120%}}

/* Small HUD decorations */
.gamer-hud{position:fixed;right:18px;top:18px;color:rgba(255,255,255,0.7);font-size:0.9rem;z-index:2000}
.gamer-hud .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--g-accent-a);margin-right:8px;box-shadow:0 0 10px var(--g-accent-a)}

/* Confetti and particles heavier for gamer feel */
.confetti-particle{width:12px;height:12px;border-radius:4px;animation:confettiFall 3s linear forwards}

/* Accessibility: clear focus */
button:focus, input:focus{outline:2px solid rgba(0,255,157,0.12);outline-offset:2px}

/* Responsive tweaks */
@media (max-width:700px){.float-title{font-size:1.6rem}.panel{transform:none}.btn{width:100%}}