:root{
  --forest:#173C34;
  --forest-dark:#0E2621;
  --forest-light:#245B4F;
  --gold:#E3A73A;
  --gold-dark:#B87F1F;
  --cream:#F7F2E4;
  --ink:#182420;
  --coral:#E8664F;
  --good:#1F7A4C;
  --muted:#4A5850;
  --shadow: 0 10px 0 rgba(0,0,0,0.18);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: radial-gradient(circle at 20% 0%, var(--forest-light) 0%, var(--forest) 45%, var(--forest-dark) 100%);
  min-height:100vh;
  font-family:'Nunito', sans-serif;
  color:var(--cream);
  display:flex;
  justify-content:center;
  padding:28px 16px 60px;
}
.wrap{width:100%;max-width:560px;}

header{text-align:center;margin-bottom:22px;}
.brand{
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size:clamp(30px,7vw,42px);
  color:var(--cream);
  margin:0;
  text-shadow: 0 3px 0 rgba(0,0,0,0.25);
}
.brand span{color:var(--gold);}
.tagline{margin:6px 0 0;font-size:14.5px;color:#D8E8DF;opacity:0.85;}
.player-bar{
  display:inline-block;
  margin-top:10px;
  background:rgba(0,0,0,0.2);
  padding:6px 14px;
  border-radius:999px;
  font-size:13px;
  color:var(--gold);
  font-weight:700;
}
.player-bar a{color:#D8E8DF;text-decoration:underline;}

.card{
  background:var(--cream);
  color:var(--ink);
  border-radius:22px;
  padding:26px 22px 24px;
  box-shadow:var(--shadow);
  position:relative;
  min-height:200px;
}
.card-title{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:22px;
  color:var(--forest);
  margin:0 0 14px;
  text-align:center;
}
.muted{color:var(--muted);font-size:14px;}
.center{text-align:center;}

/* --- login page --- */
.player-list{margin-bottom:18px;}
.player-row-form{margin-bottom:8px;}
.player-row{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:15px;
  background:var(--forest);
  color:var(--cream);
  border:none;
  border-radius:12px;
  padding:12px 16px;
  cursor:pointer;
}
.player-row:hover{background:var(--forest-light);}
.player-row.disabled{opacity:0.4;cursor:not-allowed;}
.player-row.disabled:hover{background:var(--forest);}
.flower-count{color:var(--gold);}
.section-label{
  font-family:'Baloo 2', sans-serif;
  font-size:13px;
  color:var(--muted);
  margin:14px 0 8px;
}

/* --- level toggle --- */
.level-toggle{
  display:flex;
  gap:8px;
  background:rgba(0,0,0,0.06);
  padding:5px;
  border-radius:14px;
}
.level-toggle.small{max-width:280px;}
.level-btn{
  flex:1;
  text-align:center;
  text-decoration:none;
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:14px;
  color:var(--forest);
  background:transparent;
  border:none;
  border-radius:10px;
  padding:10px 8px;
  cursor:pointer;
}
.level-btn.active{
  background:var(--forest);
  color:var(--cream);
}
.level-toggle.locked{background:rgba(0,0,0,0.03);}
.level-toggle.locked .level-btn.active{
  background:var(--gold);
  color:var(--forest-dark);
  cursor:default;
}

/* --- ranking page extras --- */
.leader-status{
  background:#FCEFD6;
  border-radius:12px;
  padding:10px 14px;
  font-size:13.5px;
  color:var(--forest-dark);
  margin:0 0 16px;
  text-align:center;
}
.table-scroll{overflow-x:auto;}
.tips-box{
  margin-top:22px;
  background:var(--forest);
  color:var(--cream);
  border-radius:16px;
  padding:16px 18px;
}
.tips-title{
  font-family:'Baloo 2', sans-serif;
  font-size:15px;
  margin:0 0 10px;
  color:var(--gold);
}
.tips-list{
  margin:0;
  padding-left:18px;
  font-size:13px;
  line-height:1.6;
  color:#E7F0EA;
}
.tips-list li{margin-bottom:4px;}
.add-player-form{display:flex;gap:8px;}
.add-player-form input{
  flex:1;
  font-family:'Nunito',sans-serif;
  font-size:15px;
  padding:11px 12px;
  border-radius:12px;
  border:2px solid var(--forest-light);
  outline:none;
}

/* --- buttons --- */
.btn-primary, .btn-secondary, .btn-outline{
  display:inline-block;
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  text-align:center;
  border:none;
  border-radius:14px;
  padding:13px 16px;
  cursor:pointer;
}
.btn-primary{background:var(--gold);color:var(--forest-dark);box-shadow:0 5px 0 var(--gold-dark);}
.btn-primary:active{transform:translateY(3px);box-shadow:none;}
.btn-secondary{background:var(--forest);color:var(--cream);flex:1;}
.btn-outline{background:transparent;color:var(--forest);border:2px solid var(--forest-light);flex:1;}
.btn-block{display:block;width:100%;}
.btn-row{display:flex;gap:10px;margin-top:10px;}

/* --- hub page --- */
.hub-section{margin-bottom:22px;}
.hub-section h2{
  font-family:'Baloo 2', sans-serif;
  font-size:16px;
  color:var(--forest);
  margin:0 0 4px;
}
.hub-section p{margin:0 0 10px;}

/* --- ranking page --- */
.ranking-table{width:100%;border-collapse:collapse;font-size:14px;}
.ranking-table th{
  text-align:left;
  font-family:'Baloo 2', sans-serif;
  font-size:12px;
  color:var(--muted);
  padding:8px 6px;
  border-bottom:2px solid var(--forest-light);
}
.ranking-table td{padding:9px 6px;border-bottom:1px solid #E4DCC8;}
.ranking-table tr.me{background:#FCEFD6;}

/* --- game page --- */
.game-title{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--cream);
  margin-bottom:8px;
}
.hud{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-family:'Baloo 2', sans-serif;font-size:14px;color:#CFE3D9;}
.hud .pill{background:rgba(0,0,0,0.2);padding:5px 12px;border-radius:999px;}
.progress-track{height:8px;background:rgba(0,0,0,0.25);border-radius:999px;overflow:hidden;margin-bottom:18px;}
.progress-fill{height:100%;background:#8FCB9B;width:0%;transition:width 0.3s ease;}

.category-tag{display:inline-block;font-size:12px;font-weight:700;background:var(--forest);color:var(--cream);padding:4px 11px;border-radius:999px;margin-bottom:14px;}
.speak-row{display:flex;justify-content:center;gap:12px;margin:6px 0 20px;}
.speak-btn{width:84px;height:84px;border-radius:50%;border:none;background:var(--forest);color:var(--cream);font-size:32px;cursor:pointer;box-shadow:0 6px 0 var(--forest-dark);display:flex;align-items:center;justify-content:center;transition: transform 0.08s ease;}
.speak-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--forest-dark);}
.sentence-btn{align-self:center;background:none;border:2px solid var(--forest);color:var(--forest);font-family:'Nunito',sans-serif;font-weight:700;font-size:13.5px;padding:9px 14px;border-radius:12px;cursor:pointer;display:block;margin:0 auto 20px;}

.answer-input{width:100%;font-family:'Baloo 2', sans-serif;font-size:22px;text-align:center;padding:14px 10px;border-radius:14px;border:3px solid var(--forest-light);background:#fff;color:var(--ink);letter-spacing:1px;outline:none;}
.answer-input.wrong{border-color:var(--coral);}
.answer-input.right{border-color:var(--good);}

.clue{text-align:center;font-size:15px;line-height:1.5;color:var(--muted);margin:0 0 18px;min-height:22px;}

.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:18px;min-height:44px;}
.tile{font-family:'Baloo 2', sans-serif;font-weight:700;font-size:20px;width:42px;height:46px;border-radius:10px;border:none;background:var(--gold);color:var(--forest-dark);cursor:pointer;box-shadow:0 4px 0 var(--gold-dark);}
.tile:active{transform:translateY(3px);box-shadow:none;}

.answer-slot{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;min-height:52px;margin-bottom:16px;padding:8px;border-radius:12px;border:2px dashed var(--forest-light);}
.answer-slot .tile{background:var(--forest);color:var(--cream);box-shadow:0 4px 0 var(--forest-dark);}

.actions{display:flex;gap:10px;margin-top:6px;}
.btn{flex:1;font-family:'Baloo 2', sans-serif;font-weight:700;font-size:16px;padding:13px 10px;border-radius:14px;border:none;cursor:pointer;}
.btn-gold{background:var(--gold);color:var(--forest-dark);box-shadow:0 5px 0 var(--gold-dark);}
.btn-gold:active{transform:translateY(3px);box-shadow:none;}
.btn-ghost{background:transparent;color:var(--forest);border:2px solid var(--forest-light);}

.feedback{text-align:center;font-family:'Baloo 2', sans-serif;font-weight:700;font-size:16px;margin-top:14px;min-height:24px;}
.feedback.correct{color:var(--good);}
.feedback.incorrect{color:var(--coral);}

.end-card{text-align:center;}
.end-card .score-big{font-family:'Baloo 2', sans-serif;font-size:52px;font-weight:800;color:var(--forest);margin:6px 0 2px;}
.end-card p{color:var(--muted);margin:0 0 20px;}

@media (max-width:380px){
  .speak-btn{width:72px;height:72px;font-size:26px;}
  .tile{width:36px;height:42px;font-size:17px;}
}