:root{
    --bg: #0f2620;
    --surface: #163a30;
    --surface-2: #1d453a;
    --cream: #f1e9d2;
    --cream-dim: #c9c0a6;
    --card-yellow: #f4c430;
    --danger: #b5533c;
    --ice: #7fb3b0;
    --line: rgba(241,233,210,0.12);
  }
  *{box-sizing:border-box;}
  body{
    margin:0; min-height:100vh;
    background:
      radial-gradient(circle at 15% 10%, rgba(127,179,176,0.08), transparent 40%),
      radial-gradient(circle at 85% 90%, rgba(244,196,48,0.05), transparent 45%),
      var(--bg);
    color:var(--cream);
    font-family:'Inter', sans-serif;
    display:flex; flex-direction:column; align-items:center;
    padding:32px 16px 60px;
  }
  h1,h2,.display{font-family:'Space Grotesk', sans-serif;}
  .eyebrow{letter-spacing:0.12em;text-transform:uppercase;font-size:12px;color:var(--ice);margin-bottom:6px;}
  .wrap{width:100%;max-width:560px;}
  .title{font-size:28px;font-weight:700;margin:0 0 4px;}
  .subtitle{color:var(--cream-dim);font-size:14px;margin:0 0 28px;}
  .panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;margin-bottom:20px;}
  .player-row{display:flex;gap:8px;margin-bottom:10px;}
  select, input[type=text]{
    flex:1; background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
    padding:10px 12px; color:var(--cream); font-size:15px; font-family:inherit;
  }
  select{width:100%;margin-bottom:16px;}
  input[type=text]::placeholder{color:var(--cream-dim);}
  textarea{
    width:100%; min-height:280px; background:var(--surface-2); border:1px solid var(--line);
    border-radius:10px; padding:12px; color:var(--cream); font-family:'SF Mono', Menlo, monospace;
    font-size:12.5px; line-height:1.5;
  }
  button{
    font-family:inherit; font-size:14px; font-weight:600; border:none; border-radius:10px;
    padding:10px 16px; cursor:pointer; transition:transform .1s ease, filter .15s ease;
  }
  button:active{transform:scale(0.97);}
  .btn-ghost{background:var(--surface-2);color:var(--cream);}
  .btn-ghost:hover{filter:brightness(1.15);}
  .btn-primary{background:var(--ice);color:#0f2620;}
  .btn-primary:hover{filter:brightness(1.08);}
  .btn-primary:disabled{opacity:0.4;cursor:not-allowed;}
  .btn-danger{background:var(--danger);color:var(--cream);}
  .remove-btn{background:none;color:var(--cream-dim);font-size:18px;padding:6px 10px;}
  .row-between{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
  .link-btn{background:none;color:var(--ice);font-size:13px;text-decoration:underline;padding:0;}

  .stage{text-align:center;position:relative;overflow:hidden;}
  .stage::before{
    content:""; position:absolute; inset:0;
    background:repeating-conic-gradient(from 0deg, rgba(241,233,210,0.02) 0deg 6deg, transparent 6deg 12deg);
    pointer-events:none; opacity:0.5;
  }
  .turn-label{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--cream-dim);}
  .turn-name{font-size:36px;font-weight:700;margin:6px 0 20px;}
  .mic-btn{
    width:88px;height:88px;border-radius:50%;background:var(--ice);color:#0f2620;font-size:30px;
    display:flex;align-items:center;justify-content:center;margin:0 auto 16px;border:none;cursor:pointer;
  }
  .mic-btn.listening{background:var(--card-yellow);animation:pulse 1.1s ease-in-out infinite;}
  @keyframes pulse{
    0%,100%{box-shadow:0 0 0 0 rgba(244,196,48,0.5);}
    50%{box-shadow:0 0 0 14px rgba(244,196,48,0);}
  }
  .hint{font-size:13px;color:var(--cream-dim);margin-bottom:18px;}
  .manual-row{display:flex;gap:8px;justify-content:center;margin-bottom:6px;}
  .manual-row input{max-width:220px;}
  .feedback{min-height:52px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;margin-top:10px;}
  .feedback.ok{color:var(--ice);}
  .feedback.dup{color:var(--card-yellow);}
  .feedback.invalid{color:var(--cream-dim);}

  .scoreboard{display:flex;flex-direction:column;gap:10px;}
  .player-card{display:flex;align-items:center;justify-content:space-between;background:var(--surface-2);border-radius:12px;padding:12px 14px;border:1px solid transparent;}
  .player-card.active{border-color:var(--ice);}
  /* Dim eliminated players by colour, not opacity: opacity:0.35 dropped the name
     well below AA contrast and made the scoreboard unreadable for those rows. */
  .player-card.eliminated{background:transparent;border-color:var(--line);}
  .player-card.eliminated .p-name{color:var(--cream-dim);font-weight:500;}
  .player-card.eliminated .empty-chip{opacity:0.5;}
  .p-name{font-weight:600;font-size:14px;}
  .p-cards{display:flex;gap:4px;}
  .yellow-chip{width:14px;height:20px;border-radius:3px;background:var(--card-yellow);}
  .empty-chip{width:14px;height:20px;border-radius:3px;border:1px solid var(--line);}

  .warning{background:rgba(181,83,60,0.15);border:1px solid var(--danger);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--cream);margin-bottom:16px;}
  .limitation{font-size:12px;color:var(--cream-dim);line-height:1.5;margin-top:4px;}
  .winner{text-align:center;font-size:22px;font-weight:700;padding:20px 0;}
  .hidden{display:none !important;}
  .admin-error{color:var(--danger);font-size:13px;margin-top:8px;min-height:18px;}
  .admin-ok{color:var(--ice);font-size:13px;margin-top:8px;min-height:18px;}