.bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3em 1.2em;
    padding: 0.6em 1em; background: #10181f; color: #ccd; font-family: sans-serif;
    font-size: 16px; line-height: 1.45; }
.bar a { color: #9cf; text-decoration: none; }
.bar a:hover { text-decoration: underline; }
.bar .site { color: #fff; font-weight: bold; margin-right: 0.6em; }
.bar .who { margin-left: auto; }
.bar .who strong { color: #fff; }
.bar form { display: inline; margin: 0 0 0 0.8em; }
.bar button { margin: 0; padding: 0; border: 0; background: none; color: #9cf;
    font-size: 1em; font-family: inherit; cursor: pointer; }
.bar button:hover { text-decoration: underline; }

html, body { height: 100%; margin: 0; font-family: sans-serif; background: #05080c;
    color: #fff; overflow: hidden; }
.bar { position: absolute; top: 0; left: 0; right: 0; height: 2.6em; box-sizing: border-box;
    flex-wrap: nowrap; white-space: nowrap; overflow: hidden; padding: 0 1em; z-index: 4; }
@media (max-width: 480px) { .bar .site { display: none; } }
#top { position: absolute; top: 2.6em; left: 0; right: 0; height: 2.6em; padding: 0 0.6em;
    background: rgba(16,24,32,0.9); z-index: 3; display: flex; align-items: center;
    gap: 0.8em; white-space: nowrap; overflow: hidden; }
#top a { color: #7cf; text-decoration: none; }
#count { color: #9ab; }
#view { margin-left: auto; font-size: 0.9em; padding: 0.25em 0.8em; flex: none; }
#chosen { display: none; align-items: center; gap: 0.6em; min-width: 0; flex: 1; }
body.chosen #chosen { display: flex; }
#who { font-weight: bold; overflow: hidden; text-overflow: ellipsis; }
#tuned { font-family: monospace; color: #ffd23c; flex: none; }
#state { color: #9ab; overflow: hidden; text-overflow: ellipsis; }
#chosen button { font-size: 1.15em; line-height: 1; padding: 0.25em 0.5em; background: #1c2834;
    color: #fff; border: 1px solid #405060; border-radius: 4px; flex: none; }
@media (max-width: 760px) {
    body.chosen #count { display: none; }
    #hint { display: none; }
}
#globe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; touch-action: none;
    cursor: grab; }
#heard { display: none; position: absolute; right: 0; top: 5.2em; bottom: 0;
    width: 28em; max-width: 88vw; background: rgba(16,24,32,0.93);
    border-left: 1px solid #405060; z-index: 2; flex-direction: column; overflow: hidden; }
#heard.shown { display: flex; }
#heard-head { display: flex; align-items: center; border-bottom: 1px solid #405060; }
#heard-title { flex: 1; padding: 0.5em 0.8em; color: #7cf; font-size: 0.9em; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
#heard-close, #heard-tab { font-size: 1.1em; background: #1c2834; color: #7cf;
    border: 1px solid #405060; padding: 0.35em 0.8em; }
#heard-close { border-width: 0 0 0 1px; align-self: stretch; }
#heard-tab { display: none; position: absolute; right: 0; top: 5.8em; z-index: 2;
    border-right: 0; border-radius: 6px 0 0 6px; }
#heard-tab.shown { display: block; }
#heard-list { flex: 1; overflow-y: auto; padding: 0.3em 0.8em; font: 12px/1.5 monospace;
    white-space: pre; color: #dde; -webkit-overflow-scrolling: touch; }
#heard-list .cq { color: #50ff8c; }
#heard-list .sent { color: #ff6060; }
#hint { position: absolute; right: 1em; bottom: 1em; color: #678; font-size: 0.85em; z-index: 2;
    text-align: right; line-height: 1.5; }
#hint a { color: #789; }