* { box-sizing: border-box; }

:root { color-scheme: dark; }

body { font-family: Arial, sans-serif; margin: 15px; overflow-x: hidden; background:#0b0b0f; color:#e6e6e6; }

a { color:#8ab4f8; }

ul { list-style: none; padding-left: 0; }

li { padding: 4px 0; }

.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }

.brand, .brand a, .brand a:hover { font-family: "Workbench", sans-serif; text-decoration:none; font-size: 1.75em; font-weight: 700; color:#ffffff; }

.menu { position: relative; }

.menu button { padding:8px 12px; font-size:14px; background:#222; color:#eee; border:1px solid #444; border-radius:6px; }

.menu ul { position:absolute; right:0; top:36px; list-style:none; margin:0; padding:8px 0; background:#111; border:1px solid #333; border-radius:6px; min-width:180px; box-shadow:0 6px 20px rgba(0,0,0,0.6); display:none; }

.menu ul.show { display:block; }

.menu li { margin:0; }

.menu a { display:block; padding:10px 14px; text-decoration:none; color:#e6e6e6; font-size:14px; }

.menu a:hover { background:#1a1a1a; }

input, select { padding: 10px; font-size: 16px; margin-right: 8px; background:#111; color:#e6e6e6; border:1px solid #333; border-radius:6px; }

button, .button { padding: 10px 16px; font-size: 16px; background:#222; color:#eee; border:1px solid #444; border-radius:6px; }

button:disabled { opacity: .6; cursor: not-allowed; }

hr { border:0; border-top:1px solid #333; }

@media (max-width: 480px) {
    body { margin: 16px; }
    input { display:block; width:100%; margin:8px 0; }
    button { width:100%; margin:8px 0; }
    #choices button { font-size: 18px; padding: 14px; }
}

#hostNameBox {
    display: none;
}

#roomCodeWrapper {
    text-align: center;
    font-style: italic;
    color:#A0A0A0;
}

#roomCode, #roomCodeTop {
    font-size: 32px;
    font-weight: bold;
    font-style:normal;
    letter-spacing: 2px;
    color:#ffffff;
}

#persistentScoreboard ol { padding-left: 18px; }
#hostQuestion, #markPanel, #pregame, .card {
    background:#0f0f12;
    border:1px solid #252525;
    border-radius:8px;
    padding:12px;
}

#roomTitle {
    font-size: 24px;
    margin-bottom: 10px;
    color:#ffffff;
}
#players {
    list-style: none;
    padding-left: 0;
}
#players li {
    padding: 4px 0;
}
#question {
    display: none;
    margin-top: 20px;
    background:#0f0f12;
    border:1px solid #252525;
    border-radius:8px;
    padding:12px;
}
#choices button {
    display: block;
    margin: 5px 0;
    padding: 12px;
    font-size: 16px;
    cursor: pointer;
    background:#222;
    color:#eee;
    border:1px solid #444;
    border-radius:8px;
}
input[type="text"] {
    background:#111; color:#e6e6e6; border:1px solid #333; border-radius:6px; padding:10px; font-size:16px;
}

h1 { margin-bottom: 6px; color:#ffffff; }
p { color: #c7c7c7; }
.grid { display:grid; grid-template-columns: 1fr; gap:16px; }
.card { border:1px solid #252525; background:#0f0f12; border-radius:8px; padding:16px; }
label { display:block; font-weight:600; margin-top:12px; }
input[type="text"], textarea, select { width:100%; padding:10px; font-size:16px; margin-top:6px; background:#111; color:#e6e6e6; border:1px solid #333; border-radius:6px; }
textarea { min-height: 96px; }
.row { display:flex; gap:12px; }
.row .col { flex:1; }
.actions { margin-top: 16px; display:flex; gap:10px; }
.button.secondary, button.secondary { background:#444; border-color:#555; }
.error { color:#ff6b6b; margin-top:8px; }
.success { color:#6bff95; margin-top:8px; }
table { width:100%; border-collapse: collapse; margin-top:12px; }
th, td { border:1px solid #2a2a2a; padding:10px; text-align: left; }
th { background:#131316; }
@media (max-width: 600px) {
    body { margin: 16px; }
    .row { flex-direction: column; }
}