:root{
  --bg:#0f1724;
  --card:#0b1320;
  --accent:#06b6d4;
  --text:#e6eef6;
  --navbar:#1a2332;
  --navbar-text:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;width:100%;font-family:Segoe UI,system-ui,Roboto,Arial;background:linear-gradient(180deg,var(--bg),#08101a);color:var(--text)}
body{display:flex;flex-direction:column}

/* NAVBAR */
.navbar{background:var(--navbar);border-bottom:1px solid rgba(255,255,255,0.1);width:100%;flex-shrink:0}
.nav-container{max-width:100%;width:100%;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{color:var(--accent);font-weight:700;font-size:18px;text-decoration:none;transition:0.2s}
.logo:hover{opacity:0.8}
.nav-menu{list-style:none;display:flex;margin:0;padding:0;gap:0}
.nav-menu li{position:relative}
.nav-link{color:var(--navbar-text);padding:20px 16px;text-decoration:none;display:block;transition:0.2s;font-size:14px;border-bottom:2px solid transparent}
.nav-link:hover{color:var(--accent)}
.nav-link.active{color:var(--accent);border-bottom-color:var(--accent)}
.dropdown-arrow{font-size:10px;margin-left:6px;display:inline-block}
.nav-dropdown{position:relative}
.dropdown-menu{position:absolute;top:100%;left:0;background:var(--navbar);border:1px solid rgba(255,255,255,0.1);border-top:none;min-width:150px;display:none;flex-direction:column;box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.nav-dropdown:hover .dropdown-menu{display:flex}
.dropdown-item{color:var(--navbar-text);padding:12px 16px;text-decoration:none;display:block;transition:0.2s;font-size:13px}
.dropdown-item:hover{background:rgba(255,255,255,0.1);color:var(--accent)}
.dropdown-item.active{color:var(--accent);background:rgba(6,182,212,0.1)}

/* MAIN CONTENT */
main{flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0;overflow-y:auto;width:100%}

/* CONTAINERS - EXTENDED SIZE */
.home-container,.game-container,.copyright-container{width:100%;background:rgba(255,255,255,0.02);padding:40px 60px;border-radius:0}
.game-container{display:flex;flex-direction:column;align-items:center}

/* HOME PAGE */
.hero{text-align:center;margin-bottom:60px}
.hero h1{font-size:48px;margin:0 0 16px}
.hero p{font-size:18px;opacity:0.8;margin:0}
.games-preview{width:100%;text-align:center}
.games-preview h2{font-size:32px;margin-bottom:32px}
.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-bottom:40px}
.game-card{background:rgba(255,255,255,0.02);padding:24px;border-radius:12px;border:1px solid rgba(6,182,212,0.2);transition:0.3s}
.game-card:hover{border-color:var(--accent);box-shadow:0 0 20px rgba(6,182,212,0.2)}
.game-card h3{margin-top:0;color:var(--accent);font-size:20px}
.game-card p{opacity:0.8;margin:12px 0}
.btn-primary{background:var(--accent);color:#042029;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;font-weight:600;text-decoration:none;display:inline-block;transition:0.2s}
.btn-primary:hover{filter:brightness(1.1)}

/* COPYRIGHT PAGE */
.copyright-container{text-align:left}
.copyright-section{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,0.1)}
.copyright-section:last-child{border-bottom:none}
.copyright-section h2{color:var(--accent);font-size:20px;margin-top:0}
.copyright-section ul{margin:12px 0;padding-left:24px}
.copyright-section li{margin:8px 0}
.copyright-section p{margin:12px 0;line-height:1.6;opacity:0.9}

/* GAME PAGE */
h1{margin:0 0 20px;font-size:28px;text-align:center}
#status{margin-bottom:12px;text-align:center}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 auto}
.cell{width:100px;height:100px;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:42px;font-weight:700;color:var(--accent);cursor:pointer;border-radius:8px;user-select:none;border:1px solid rgba(255,255,255,0.05)}
.cell:hover{filter:brightness(1.08)}
.controls{margin-top:12px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}
.controls label{display:flex;align-items:center;gap:6px}
.controls input[type="checkbox"]{cursor:pointer}
.controls select{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,0.2);padding:6px 8px;border-radius:4px;cursor:pointer}
button{background:var(--accent);border:none;color:#042029;padding:8px 16px;border-radius:8px;cursor:pointer;font-weight:600;transition:0.2s}
button:hover{filter:brightness(1.1)}
.note{font-size:12px;opacity:0.8;margin-top:12px;text-align:center}

.leaderboard{margin-top:32px;text-align:center;max-width:500px}
.leaderboard h2{font-size:20px;margin:0 0 16px}
.lb-form{display:flex;gap:8px;margin-bottom:16px}
.lb-form input{flex:1;padding:8px;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text);min-width:150px}
.leaderboard ol{margin:0;padding-left:20px;text-align:left;display:inline-block}
.leaderboard li{padding:4px 0;opacity:0.9}

/* ADMIN / LOGIN / MAINTENANCE LAYOUT */
.login-container,.admin-container,.maintenance-container{
  width:100%;
  max-width:400px;
  margin:80px auto;
  background:rgba(255,255,255,0.02);
  padding:40px 30px;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.login-container input,
.login-container button,
.admin-container input,
.admin-container button{
  padding:8px 12px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.2);
  background:transparent;
  color:var(--text);
}

.login-container label,
.admin-container label{display:flex;flex-direction:column;gap:4px;font-size:14px;}

/* FOOTER */
.site-footer{margin-top:auto;padding:20px;font-size:12px;color:rgba(230,238,246,0.7);text-align:center;border-top:1px solid rgba(255,255,255,0.1);width:100%;flex-shrink:0;position:relative}

.admin-link{color:rgba(230,238,246,0.15);text-decoration:none;font-size:10px;margin-left:8px;transition:0.2s opacity}
.admin-link:hover{opacity:0.5}