:root{
  /* Orange palette */
  --orange-1:#FF7000; /* primary accent */
  --orange-2:#FFAC4A; /* secondary */
  --orange-3:#FFE9C9; /* light background */
  --orange-4:#F9C87C; /* card/background */
  --orange-5:#F97432; /* strong accent */

  /* Theme tokens */
  --bg:var(--orange-3);
  --card:var(--orange-4);
  --text:#2d1600;
  --muted:#6b4825;
  --accent:var(--orange-1);
  --accent-2:var(--orange-5);

  /* Status colors (retain R/Y/G semantics) */
  --green:#2ea043;--yellow:#d29922;--red:#f85149;
  --green-soft:#e7f5ea;--yellow-soft:#fff3cf;--red-soft:#ffe3e3;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font:16px/1.4 system-ui,Segoe UI,Roboto,Helvetica,Arial}
.app-header{display:flex;gap:16px;align-items:center;padding:12px 16px;border-bottom:2px solid var(--orange-2);background:linear-gradient(180deg, #fff0e1, var(--bg))}
h1{font-size:18px;margin:0}
.tabs{display:flex;gap:8px;margin-left:auto}
.tab-btn{background:var(--orange-2);color:#3a1f00;border:1px solid var(--orange-5);padding:8px 12px;border-radius:8px;cursor:pointer}
.tab-btn[aria-selected=true]{background:var(--orange-1);border-color:var(--orange-5);color:white}
.app-main{max-width:1600px;margin:18px auto;padding:0 12px;display:flex;flex-direction:column;gap:16px}
.card{background:var(--card);border:1px solid var(--orange-2);border-radius:12px;padding:12px}
.controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* push tonality selector to far right of the row */
.controls .tonality-right{margin-left:auto; display:flex; align-items:center; gap:6px}
.controls .tonality-right select{min-width:140px}
label{display:flex;align-items:center;gap:6px}
.switch{display:flex;align-items:center;gap:8px}
.meter-row{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:8px}
.mic-cols{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.mic-col{flex:1;min-width:280px}
.mic-col.profile{margin-left:auto; max-width:420px}

.canvas-wrap{position:relative;border:1px dashed var(--orange-2);border-radius:8px;overflow:hidden;background:var(--bg)}
.readout{position:absolute;top:8px;right:8px;background:#0006;padding:6px 8px;border-radius:6px;color:#fff}
/* tonality select now lives in the top controls */
.bubble{position:absolute;top:8px;left:8px;background:#0006;padding:6px 8px;border-radius:6px;color:#fff}
.gameover-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);z-index:3}
.gameover-card{display:flex;flex-direction:column;align-items:center;gap:24px;background:rgba(80,80,80,0.8);padding:48px 72px;border-radius:20px;border:2px solid #666;box-shadow:0 10px 30px rgba(0,0,0,0.35)}
.gameover-card .title{font-weight:900;font-size:48px;color:#ffffff;letter-spacing:0.5px}
.gameover-card .restart{padding:16px 28px;font-weight:800;font-size:20px;min-width:220px;background:var(--accent);border:2px solid var(--accent-2);color:#fff;border-radius:14px;cursor:pointer}
.scoreline{display:flex;gap:16px;margin-top:8px;color:var(--muted)}
.small{font-size:12px;color:var(--muted)}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.app-footer{max-width:1000px;margin:0 auto 16px;padding:0 12px;color:var(--muted)}
button{background:var(--accent);color:white;border:1px solid var(--accent-2);border-radius:8px;padding:8px 12px;cursor:pointer}
button:disabled{opacity:.5;cursor:not-allowed}
input,select{background:#fff;color:var(--text);border:1px solid var(--orange-2);border-radius:8px;padding:6px 8px}

/* Status colors */
.status-green{color:var(--green)}
.status-yellow{color:var(--yellow)}
.status-red{color:var(--red)}

/* Color-blind accents (toggle by class on body) */
body.cb .status-green{color:#2bb673}
body.cb .status-yellow{color:#f5a623}
body.cb .status-red{color:#d0021b}