.hql[data-hql="board"] { color: #f5f2ff; }
.hql[data-hql="board"] [data-title],
.hql[data-hql="board"] [data-progress] { color: inherit; }

.hql[data-hql="board"] .hql-guess-bar {
    margin: 16px 0 12px;
    padding: 6px 13px;
    background: #321050;
    border-top: 2px solid #57317f;
}
.hql[data-hql="board"] .hql-guess-bar form {
    display: flex;
    gap: 8px;
    margin: 0;
}
.hql[data-hql="board"] .hql-guess-bar input {
    box-sizing: border-box;
    flex: 1 1 480px;
    min-width: 0;
    max-width: 480px;
    height: 50px;
    margin: 0;
    padding: 0 11px;
    border: 2px solid #ff681f;
    border-radius: 5px;
    background: #fff;
    color: #252525;
    font-size: 20px;
}
.hql[data-hql="board"] .hql-guess-bar button {
    min-height: 50px;
    padding: 0 12px;
    border: 1px solid #8b65b6;
    border-radius: 5px;
    background: #513278;
    color: #fff;
}
.hql[data-hql="board"] .hql-guess-bar [data-status] {
    min-height: 1.5em;
    margin: 5px 0 0;
    padding: 0;
    color: #fff;
}
.hql[data-hql="board"] .hql-board-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
}
.hql[data-hql="board"] .city-table {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 30rem;
    gap: 0 8px;
}
.hql[data-hql="board"] .city-table ol {
    margin: 0;
    padding: 0 0 0 2.5em;
    list-style: decimal outside;
}
.hql[data-hql="board"] .city-table li {
    padding: 3px 4px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.hql[data-hql="board"] .city-table .solved {
    padding: 0 4px;
    background: #ffffe2;
    color: #40004a;
    font-weight: bold;
}
.hql[data-hql="board"] [data-ranges]:not([hidden]) {
    display: grid;
    gap: 4px;
}
.hql[data-hql="board"] [data-ranges] button {
    padding: 5px 8px;
    border: 1px solid #8b65b6;
    border-radius: 4px;
    background: #402967;
    color: #fff;
    white-space: nowrap;
}
.hql[data-hql="board"] [data-ranges] button[aria-pressed="true"] {
    background: #ffffe2;
    color: #40004a;
    font-weight: bold;
}
@media (max-width: 640px) {
    .hql[data-hql="board"] .hql-board-layout { grid-template-columns: 1fr; }
    .hql[data-hql="board"] .city-table { grid-template-columns: 1fr; min-height: 0; }
    .hql[data-hql="board"] .city-table li { border-bottom: 1px solid #59477d; }
    .hql[data-hql="board"] [data-ranges]:not([hidden]) {
        display: flex;
        flex-wrap: wrap;
        grid-row: 1;
    }
}

.hql[data-hql="board"] .city-table {
    background: #000;
    padding: 10px 8px;
}
body:has(.hql[data-hql="board"]) .quiz-container .guesses-box,
body:has(.hql[data-hql="board"]) .quiz-container .pause-box {
    display: none !important;
}
.hql[data-hql="board"] .hql-roster {
    margin: 0 0 12px;
    padding: 7px 12px;
    background: #321050;
    border-radius: 5px;
}
.hql[data-hql="board"] .hql-roster summary { cursor: pointer; font-weight: bold; }
.hql[data-hql="board"] .hql-roster-content { padding-top: 6px; }
.hql[data-hql="board"] .hql-roster-content p { margin: 0; }
.hql[data-hql="board"] [data-player-list] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    max-height: 12rem;
    overflow: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hql[data-hql="board"] [data-player-list] li { overflow-wrap: anywhere; }

.quiz-container:has(.hql[data-hql="board"]) #quiz-bottom-box {
    display: none !important;
}
.quiz-container:has(.hql[data-hql="board"]) .quiz-header,
.quiz-container:has(.hql[data-hql="board"]) .quiz-directions,
.quiz-container:has(.hql[data-hql="board"]) .quiz-inner {
    padding-bottom: 0 !important;
}
.quiz-container:has(.hql[data-hql="board"]) .quiz-header {
    border-bottom-width: 0 !important;
}