:root {
    --primary:#5b45d6; --bg:#f4f5fb; --card:#fff; --text:#252438;
    --muted:#6b687d; --border:#dedbe9; --option:#f7f6fb;
    --success:#18794e; --waiting:#8a6512; --danger:#b42318;
}
:root[data-theme="dark"] {
    --primary:#9b8cff; --bg:#171622; --card:#242232; --text:#f4f2ff;
    --muted:#b7b2c8; --border:#454158; --option:#302e42;
    --success:#66d6a1; --waiting:#f1ca70; --danger:#ff928a;
}
:root[data-theme="luma"] {
    --primary:#7462dc; --bg:#e9e7ff; --card:#fbfaff; --text:#292447;
    --muted:#70698d; --border:#c5bdea; --option:#e3defb;
    --success:#2e896c; --waiting:#8a6512; --danger:#b63855;
}
* { box-sizing:border-box; }
html { min-height:100%; background:var(--bg); }
body {
    min-height:100vh; margin:0; background:var(--bg); color:var(--text);
    font-family:Arial,sans-serif;
}
main { width:min(1180px,92%); margin:32px auto; }
.page-header,.shared-controls,.summary article,.room-card,.empty-state {
    border:1px solid var(--border); border-radius:15px; background:var(--card);
    box-shadow:0 5px 22px #31266b14;
}
.page-header {
    display:flex; align-items:center; justify-content:space-between;
    gap:22px; padding:24px; margin-bottom:18px;
}
.eyebrow {
    display:block; margin-bottom:7px; color:var(--primary);
    font-size:13px; font-weight:bold; text-transform:uppercase; letter-spacing:.08em;
}
h1,h2,p { margin-top:0; }
.page-header h1 { margin-bottom:7px; }
.page-header p { margin:0; color:var(--muted); }
.header-actions { display:flex; gap:10px; }
.shared-controls {
    display:flex; align-items:center; justify-content:space-between;
    gap:20px; padding:17px 20px; margin-bottom:14px;
}
.shared-option {
    display:flex; align-items:flex-start; gap:11px; cursor:pointer;
}
.shared-option input {
    width:18px; height:18px; margin:2px 0 0; accent-color:var(--primary);
}
.shared-option span,.shared-option strong,.shared-option small {
    display:block;
}
.shared-option small {
    margin-top:4px; color:var(--muted); line-height:1.35;
}
.shared-controls.unavailable .shared-option { opacity:.58; }
.shared-actions { display:flex; flex:0 0 auto; gap:9px; }
.shared-actions button:first-child {
    background:var(--option); color:var(--primary);
    border:1px solid var(--border);
}
button,a {
    border:0; border-radius:8px; padding:11px 16px; background:var(--primary);
    color:#fff; font-weight:bold; text-decoration:none; cursor:pointer;
}
button:disabled { opacity:.55; cursor:wait; }
#message { min-height:22px; margin:12px 4px; color:var(--danger); }
#message.success { color:var(--success); }
.summary {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:14px; margin-bottom:18px;
}
.summary article { padding:18px 20px; }
.summary span,.summary strong,.summary small { display:block; }
.summary span { color:var(--muted); font-size:14px; }
.summary strong { margin-top:7px; color:var(--primary); font-size:28px; }
.summary small { margin-top:5px; color:var(--muted); }
#shared-topic {
    overflow-wrap:anywhere; font-size:21px; text-transform:capitalize;
}
.shared-mode .room-topic,.shared-mode .room-difficulty { display:none; }
.shared-mode .room-identity h2,
.shared-mode .room-identity .room-meta { display:none; }
.shared-mode .room-identity::before,
.shared-mode .room-identity::after { display:block; }
.shared-mode .room-identity::before {
    content:attr(data-room-code); margin-bottom:5px;
    color:var(--text); font-size:24px; font-weight:bold;
}
.shared-mode .room-identity::after {
    content:attr(data-player-label); color:var(--muted);
}
.rooms-grid {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;
}
.room-card { min-width:0; padding:20px; }
.room-card-header {
    display:flex; align-items:flex-start; justify-content:space-between; gap:15px;
    padding-bottom:15px; border-bottom:1px solid var(--border);
}
.room-card h2 { margin-bottom:5px; overflow-wrap:anywhere; }
.room-meta { color:var(--muted); }
.room-status {
    flex:0 0 auto; padding:6px 9px; border-radius:999px;
    background:var(--option); color:var(--waiting); font-size:12px; font-weight:bold;
}
.room-status.active { color:var(--success); }
.room-clock {
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; margin:15px 0; color:var(--muted);
}
.room-clock strong { color:var(--text); font:700 18px monospace; }
.players { display:grid; gap:10px; }
.player {
    padding:12px; border-radius:10px; background:var(--option);
}
.player-head {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin-bottom:8px;
}
.player-head span { color:var(--muted); font-size:13px; text-align:right; }
.progress-track {
    height:8px; overflow:hidden; border-radius:999px; background:var(--border);
}
.progress-value {
    height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),#70c8a5);
    transition:width .3s ease;
}
.no-players { margin:12px 0 0; color:var(--muted); }
.room-footer { display:flex; justify-content:flex-end; margin-top:15px; }
.empty-state { padding:36px 24px; text-align:center; }
.empty-state p { color:var(--muted); }
[hidden] { display:none !important; }
@media(max-width:760px) {
    main { margin:18px auto; }
    .page-header { align-items:flex-start; flex-direction:column; }
    .header-actions { width:100%; }
    .header-actions > * { flex:1; text-align:center; }
    .shared-controls { align-items:stretch; flex-direction:column; }
    .shared-actions { width:100%; }
    .shared-actions button { flex:1; }
    .summary,.rooms-grid { grid-template-columns:1fr; }
}