*{margin:0;padding:0;box-sizing:border-box;}

body{
background:linear-gradient(135deg,#5b2d8b,#7b3fe4);
color:white;
font-family:'Segoe UI',Arial,sans-serif;
min-height:100vh;
padding:20px;
}

.container{max-width:800px;margin:0 auto;}

.header-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;}

.header-bar h1{margin:0;}

.user-info{display:flex;align-items:center;gap:15px;}

.username{font-size:18px;font-weight:bold;color:#FFD700;}

.btn-logout{padding:10px 20px;background:rgba(255,255,255,0.1);color:white;border:2px solid rgba(255,255,255,0.3);border-radius:8px;cursor:pointer;transition:all 0.3s;}

.btn-logout:hover{background:rgba(255,255,255,0.2);transform:scale(1.05);}

.btn-dashboard{padding:10px 20px;background:rgba(76,175,80,0.2);color:white;border:2px solid rgba(76,175,80,0.4);border-radius:8px;cursor:pointer;transition:all 0.3s;text-decoration:none;display:inline-block;}

.btn-dashboard:hover{background:rgba(76,175,80,0.3);transform:scale(1.05);}

h1{text-align:center;font-size:2.5em;margin-bottom:30px;text-shadow:2px 2px 4px rgba(0,0,0,0.3);}

.join-section{text-align:center;margin:50px 0;max-width:600px;margin-left:auto;margin-right:auto;}

.name-input{padding:15px 20px;font-size:18px;border:none;border-radius:8px;width:100%;max-width:400px;margin-bottom:20px;}

.level-selector{margin:20px 0;}

.level-selector label{display:block;font-size:18px;margin-bottom:15px;font-weight:bold;}

.level-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

.level-btn{width:50px;height:50px;border:2px solid rgba(255,255,255,0.3);background:rgba(255,255,255,0.1);color:white;border-radius:8px;font-size:18px;font-weight:bold;cursor:pointer;transition:all 0.3s;}

.level-btn:hover{background:rgba(255,255,255,0.2);transform:scale(1.1);}

.level-btn.active{background:linear-gradient(135deg,#FFD700,#FFA500);color:#000;border-color:#FFD700;box-shadow:0 4px 15px rgba(255,215,0,0.5);}

.btn-join{padding:15px 30px;font-size:18px;background:#4CAF50;color:white;border:none;border-radius:8px;cursor:pointer;font-weight:bold;transition:all 0.3s;}

.btn-join:hover{background:#45a049;transform:scale(1.05);}

.game-section{margin-bottom:30px;}

.level-info{background:rgba(255,255,255,0.15);padding:20px;border-radius:12px;margin-bottom:20px;display:flex;align-items:center;gap:20px;backdrop-filter:blur(10px);}

.level-badge{background:linear-gradient(135deg,#FFD700,#FFA500);color:#000;padding:15px 25px;border-radius:12px;text-align:center;font-weight:bold;box-shadow:0 4px 15px rgba(255,215,0,0.3);min-width:100px;}

.level-label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:1px;}

.level-number{display:block;font-size:32px;font-weight:bold;margin-top:5px;}

.progress-container{flex:1;background:rgba(255,255,255,0.1);border-radius:20px;height:30px;position:relative;overflow:hidden;}

.progress-bar{height:100%;background:linear-gradient(90deg,#4CAF50,#8BC34A);border-radius:20px;transition:width 0.5s ease;position:absolute;left:0;top:0;}

.progress-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:bold;font-size:14px;z-index:1;}

.stats{display:flex;justify-content:space-around;background:rgba(255,255,255,0.1);padding:15px;border-radius:12px;margin-bottom:20px;backdrop-filter:blur(10px);}

.stat-item{text-align:center;}

.stat-item .label{display:block;font-size:12px;opacity:0.8;margin-bottom:5px;}

.stat-item .value{display:block;font-size:24px;font-weight:bold;}

.timer.warning{animation:pulse 0.5s infinite;}

@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.5;}}

.feedback{padding:15px;margin:20px 0;border-radius:8px;font-size:20px;font-weight:bold;text-align:center;animation:slideIn 0.3s;}

@keyframes slideIn{from{transform:translateY(-20px);opacity:0;}to{transform:translateY(0);opacity:1;}}

.feedback.correct{background:#4CAF50;}

.feedback.wrong{background:#f44336;}

.feedback.timeout{background:#ff9800;}

.feedback.levelup{background:linear-gradient(135deg,#FFD700,#FFA500);color:#000;font-size:24px;}

.question{text-align:center;font-size:3em;margin:30px 0;padding:20px;background:rgba(255,255,255,0.15);border-radius:12px;min-height:100px;display:flex;align-items:center;justify-content:center;}

.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin:30px 0;}

.choice-btn{padding:20px;font-size:24px;background:rgba(255,255,255,0.2);color:white;border:2px solid rgba(255,255,255,0.3);border-radius:12px;cursor:pointer;transition:all 0.3s;font-weight:bold;}

.choice-btn:hover{background:rgba(255,255,255,0.4);transform:translateY(-5px);box-shadow:0 5px 15px rgba(0,0,0,0.3);}

.choice-btn:active{transform:translateY(0);}

.choice-btn:disabled{cursor:not-allowed;opacity:0.7;}

.choice-btn.correct{background:#4CAF50 !important;border-color:#4CAF50 !important;animation:pulse-green 0.5s;}

.choice-btn.selected{background:#f44336 !important;border-color:#f44336 !important;}

@keyframes pulse-green{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}

.waiting-message{text-align:center;font-size:24px;margin:30px 0;padding:40px;background:rgba(255,255,255,0.1);border-radius:12px;animation:fadeIn 0.5s;}

@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

.next-section{text-align:center;margin:20px 0;}

.btn-next{padding:15px 40px;font-size:20px;background:linear-gradient(135deg,#4CAF50,#45a049);color:white;border:none;border-radius:12px;cursor:pointer;font-weight:bold;transition:all 0.3s;box-shadow:0 4px 15px rgba(76,175,80,0.4);animation:slideIn 0.3s;}

.btn-next:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(76,175,80,0.6);}

.btn-next:active{transform:scale(0.98);}

.result-screen{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn 0.5s;}

.result-container{background:linear-gradient(135deg,#5b2d8b,#7b3fe4);padding:50px;border-radius:20px;text-align:center;max-width:600px;box-shadow:0 10px 40px rgba(0,0,0,0.5);animation:slideIn 0.5s;}

.result-container h1{font-size:3em;margin-bottom:30px;color:#FFD700;text-shadow:2px 2px 4px rgba(0,0,0,0.3);}

.result-stats{display:flex;justify-content:space-around;margin:40px 0;gap:20px;}

.result-item{flex:1;background:rgba(255,255,255,0.1);padding:20px;border-radius:12px;backdrop-filter:blur(10px);}

.result-label{display:block;font-size:14px;opacity:0.8;margin-bottom:10px;}

.result-value{display:block;font-size:36px;font-weight:bold;}

.result-value.final{color:#FFD700;font-size:48px;}

.btn-home{padding:20px 50px;font-size:24px;background:linear-gradient(135deg,#FFD700,#FFA500);color:#000;border:none;border-radius:12px;cursor:pointer;font-weight:bold;transition:all 0.3s;box-shadow:0 4px 15px rgba(255,215,0,0.4);margin-top:30px;}

.btn-home:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(255,215,0,0.6);}

.btn-home:active{transform:scale(0.98);}

.auth-container{max-width:450px;margin:100px auto;padding:40px;}

.auth-form{background:rgba(255,255,255,0.1);padding:40px;border-radius:20px;backdrop-filter:blur(10px);box-shadow:0 8px 32px rgba(0,0,0,0.3);}

.auth-form h2{text-align:center;margin-bottom:30px;font-size:2em;}

.auth-input{width:100%;padding:15px;margin:15px 0;font-size:16px;border:2px solid rgba(255,255,255,0.3);background:rgba(255,255,255,0.1);color:white;border-radius:8px;transition:all 0.3s;}

.auth-input::placeholder{color:rgba(255,255,255,0.6);}

.auth-input:focus{outline:none;border-color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.15);}

.btn-auth{width:100%;padding:15px;margin-top:20px;font-size:18px;background:linear-gradient(135deg,#4CAF50,#45a049);color:white;border:none;border-radius:8px;cursor:pointer;font-weight:bold;transition:all 0.3s;}

.btn-auth:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(76,175,80,0.4);}

.auth-switch{text-align:center;margin-top:20px;font-size:14px;}

.auth-switch a{color:#FFD700;text-decoration:none;font-weight:bold;}

.auth-switch a:hover{text-decoration:underline;}

.auth-back{text-align:center;margin:10px 0 25px;font-size:14px;}

.auth-back a{color:#FFD700;text-decoration:none;font-weight:bold;}

.auth-back a:hover{text-decoration:underline;}

.error-message{background:#f44336;padding:10px;border-radius:5px;margin:10px 0;text-align:center;}

.success-message{background:#4CAF50;padding:10px;border-radius:5px;margin:10px 0;text-align:center;}

.leaderboard{background:rgba(255,255,255,0.1);padding:20px;border-radius:12px;backdrop-filter:blur(10px);}

.leaderboard h3{text-align:center;margin-bottom:15px;font-size:1.5em;}

.leaderboard ul{list-style:none;}

.leaderboard li{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;margin:8px 0;background:rgba(255,255,255,0.1);border-radius:8px;transition:all 0.3s;gap:10px;}

.leaderboard li:hover{background:rgba(255,255,255,0.2);transform:translateX(5px);}

.leaderboard li.highlight{background:rgba(255,215,0,0.3);border:2px solid gold;}

.rank{background:rgba(255,255,255,0.3);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;flex-shrink:0;}

.player-name{flex:1;}

.player-level{background:rgba(255,215,0,0.3);padding:4px 10px;border-radius:12px;font-size:12px;font-weight:bold;flex-shrink:0;}

.player-score{font-weight:bold;font-size:1.2em;flex-shrink:0;}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
  body {
    padding: 15px;
  }

  .container {
    max-width: 100%;
  }

  .header-bar {
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
  }

  .header-bar h1 {
    font-size: 1.8em;
    text-align: center;
  }

  .user-info {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .username {
    font-size: 16px;
  }

  .btn-dashboard,
  .btn-logout {
    width: 100%;
    max-width: 250px;
    text-align: center;
  }

  /* Play page: avoid inline margin pushing layout */
  .btn-dashboard {
    margin-right: 0 !important;
  }

  h1 {
    font-size: 2em;
  }

  .join-section {
    margin: 30px 0;
    padding: 0 15px;
  }

  .name-input {
    font-size: 16px;
    padding: 12px 15px;
  }

  .level-buttons {
    gap: 8px;
  }

  .level-btn {
    width: 45px;
    height: 45px;
    font-size: 16px;
  }

  .room-banner {
    padding: 15px;
  }

  .room-banner h2 {
    font-size: 1.3em;
  }

  .room-banner-details {
    flex-wrap: wrap;
    gap: 10px;
    font-size: 14px;
  }

  .game-section {
    padding: 15px;
  }

  .level-info {
    flex-direction: column;
    gap: 15px;
  }

  .level-badge {
    width: 100%;
    justify-content: center;
  }

  .progress-container {
    width: 100%;
  }

  .stats {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }

  .stat-item .label {
    margin-bottom: 0;
    font-size: 12px;
  }

  .stat-item .value {
    font-size: 20px;
  }

  .question {
    font-size: 2em;
    padding: 25px 15px;
  }

  .choices {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .choice-btn {
    font-size: 20px;
    padding: 15px;
  }

  .result-container {
    width: 100%;
    max-width: 520px;
    padding: 25px 18px;
    margin: 0 10px;
  }

  .result-container h1 {
    font-size: 2em;
  }

  .result-stats {
    flex-direction: column;
    margin: 25px 0;
  }

  .result-value {
    font-size: 30px;
  }

  .result-value.final {
    font-size: 38px;
  }

  .leaderboard {
    padding: 15px;
  }

  .leaderboard h3 {
    font-size: 1.2em;
  }

  .leaderboard li {
    flex-wrap: wrap;
    padding: 10px 12px;
    font-size: 14px;
  }

  .rank {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .player-score {
    font-size: 1em;
  }

  .leaderboard-pagination {
    flex-wrap: wrap;
    gap: 10px;
  }

  .page-btn {
    padding: 8px 12px;
    font-size: 12px;
  }

  .auth-container {
    margin: 20px auto;
    padding: 15px;
    min-height: calc(100vh - 30px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .auth-form {
    padding: 30px 20px;
  }

  .auth-form h2 {
    font-size: 1.5em;
  }

  .auth-input {
    padding: 12px;
    font-size: 16px;
  }

  .btn-auth {
    padding: 12px;
    font-size: 16px;
  }

  .auth-switch {
    line-height: 1.4;
  }
}

@media (max-width: 480px) {
  body {
    padding: 10px;
  }

  .header-bar h1 {
    font-size: 1.5em;
  }

  h1 {
    font-size: 1.7em;
  }

  .level-btn {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }

  .question {
    font-size: 1.7em;
    padding: 20px 10px;
  }

  .choice-btn {
    font-size: 18px;
    padding: 12px;
  }

  .room-banner h2 {
    font-size: 1.1em;
  }

  .room-banner-details {
    font-size: 12px;
  }

  .leaderboard li {
    font-size: 13px;
  }

  .auth-container {
    margin: 10px auto;
    padding: 10px;
    min-height: calc(100vh - 20px);
  }

  .auth-form {
    padding: 25px 15px;
  }

  .btn-join,
  .btn-next,
  .btn-home {
    font-size: 16px;
    padding: 12px 25px;
  }
}