:root {
    --ink: #161426;
    --panel: #242139;
    --line: #4d4762;
    --cream: #fff9eb;
    --muted: #c6c0d4;
    --lime: #d5fb65;
    --orange: #ff957c;
    --mint: #82e6e1;
    --lilac: #c2a9ff;
    --stamp: #211b35;
}
body {
    --zone: var(--lime);
    color: var(--cream);
    background: radial-gradient(ellipse at 8% 0%,#302445 0,transparent 43rem),var(--ink);
}
body[data-section=online] { --zone: var(--orange); }
body[data-section=studio] { --zone: var(--mint); }
body[data-section=solo]:has([data-mode=festival][aria-pressed=true]) { --zone: #ff9c79; }
body[data-section=solo]:has([data-mode=echo][aria-pressed=true]) { --zone: var(--lilac); }
.mast {
    grid-template-columns: 1fr auto 1fr auto;
    gap: 10px;
    border: 0;
    height: 76px;
}
.wordmark { color: var(--cream); width: fit-content; }
.wordmark svg { color: var(--lime); filter: drop-shadow(2px 2px 0 #643b78); }
.wordmark strong { font-size: clamp(18px,1.8vw,25px); text-transform: uppercase; white-space: nowrap; }
.main-nav { gap: 4px; padding: 4px; border: 1px solid #484056; border-radius: 14px; background: #1d192e; }
.main-nav a, #game-menu, .launch-bar button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.main-nav a {
    --tab: var(--lime);
    min-height: 38px;
    border-radius: 9px;
    color: #e5deeb;
    padding: 6px clamp(12px,1.9vw,30px);
    font-weight: 800;
}
#online-nav { --tab: var(--orange); }
#studio-nav { --tab: var(--mint); }
.main-nav a[aria-current] { background: var(--tab); color: var(--stamp); box-shadow: inset 0 -2px #0002; }
.main-nav a:not([aria-current]) svg { color: var(--tab); }
:is(.main-nav,#game-menu,.launch-bar,.route-grid,.menu-heading) svg { width: 19px; height: 19px; flex: none; }
.utilities { gap: 5px; }
.utilities button, #game-menu {
    width: 42px; height: 42px; border-radius: 11px; background: #242034; border: 1px solid #564c67; color: var(--cream);
}
#game-menu { width: auto; min-height: 42px; padding: 0 12px; background: var(--lilac); border-color: var(--lilac); color: var(--stamp); font-size: 12px; font-weight: 800; }
#language-switch {
    flex: none; display: inline-grid; place-items: center; min-width: 42px; min-height: 42px;
    padding: 0 6px; border: 1px solid #736782; border-radius: 11px;
    background: #2c253c; color: var(--mint); font: 800 14px/1 "Noto Sans Georgian",Arial,sans-serif;
}
.ballot-mast #language-switch { margin-inline-start: 8px; }
.ballot-mast #ballot-code { margin-inline-start: auto; }
.is-live #language-switch,.network:is([data-state=lobby],[data-state=playing]) #language-switch,
body:has(#intro:not([hidden])) #language-switch { display: none; }
@media (max-width:430px) {
    .mast #game-menu span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
    .mast #game-menu { min-width:44px; }
    .mast .wordmark { gap:4px; }.mast .wordmark strong { font-size:clamp(14px,4vw,17px); }
}

/* The title sits on the printed half of the ticket. The art has its own space. */
html:not(.game-expanded) body:not(.is-live) .heading {
    display: grid;
    grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) auto;
    align-items: center;
    gap: clamp(8px,2vw,32px);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: clamp(105px,9vw,147px);
    margin: 2px 0 14px;
    padding: 12px clamp(16px,2.3vw,36px);
    border: 1px solid #695a79;
    border-radius: 15px;
    background-color: #2a2241;
    background-image: linear-gradient(109deg,var(--zone) 0 52%,#191528 52% 52.5%,transparent 52.5%),
        radial-gradient(#9480aa4a 1px,transparent 1.4px);
    background-size: auto,7px 7px;
}
html:not(.game-expanded) body:not(.is-live) .heading::before {
    content: "";
    grid-column: 2; grid-row: 1;
    align-self: stretch; min-width: 0;
    margin-block: -13px;
    background: url("./studio/arcade-header.svg?v=19") no-repeat 100% center / contain;
}
html:not(.game-expanded) body:not(.is-live) .heading > div:first-child {
    grid-column: 1; grid-row: 1; min-width: 0; color: var(--stamp);
}
html:not(.game-expanded) body:not(.is-live) .heading h1 {
    font-size: clamp(32px,3.6vw,60px); line-height: 1.12; font-weight: 900; letter-spacing: -.055em; text-wrap: balance;
}
html:not(.game-expanded) body:not(.is-live) .location { color: #3a2e47; letter-spacing: .11em; margin-bottom: 5px; }
html:not(.game-expanded) body:not(.is-live) .metrics { grid-column: 3; grid-row: 1; gap: 5px; }
html:not(.game-expanded) body:not(.is-live) .metrics div {
    background: #201b31; border: 1px solid #625574; border-radius: 9px;
    min-width: 62px; padding: 8px 10px; gap: 4px;
}
.metrics small { color: var(--muted); }.metrics b { color: var(--cream); font-variant-numeric: tabular-nums; }
html:not(.game-expanded) .network:is([data-state=entry],[data-state=lobby],[data-state=closed]) .heading { grid-template-columns: 1.2fr 1fr; }
html:not(.game-expanded) .network:is([data-state=entry],[data-state=lobby],[data-state=closed]) .metrics { display:none; }
.launch-bar { margin: 0 0 15px; }
.launch-bar .mode-switch { display: flex; align-items: stretch; width: max-content; max-width: 100%; gap: 7px; padding: 0; border: 0; background: none; }
.launch-bar button {
    --chip: var(--lime);
    color: #ebe3f3; min-height: 40px; padding: 7px 14px;
    font-weight: 750; border-radius: 8px; background: #29243a; border: 1px solid #51465f;
}
.launch-bar [data-mode=echo] { --chip: var(--lilac); }
.launch-bar [data-mode=festival] { --chip: var(--orange); }
.launch-bar button svg { color: var(--chip); width: 16px; height: 16px; }
.launch-bar button[aria-pressed=true] { color: var(--cream); border-color: var(--chip); box-shadow: inset 0 -3px var(--chip); background: #342b40; }
.is-live .launch-bar,.game-expanded .launch-bar,.is-live #game-menu,.game-expanded #game-menu { display: none; }

.stage-column,.desk { border-color: #514961; border-radius: 14px; background: #211e30; }
.desk { background: linear-gradient(125deg,#2c253b,#221e32 75%); }
.fighter.rival { background: linear-gradient(110deg,#65394b,#302237 82%); box-shadow: inset 0 -3px var(--orange); }
.fighter.player { background: linear-gradient(255deg,#45482f,#242833 82%); box-shadow: inset 0 -3px var(--lime); }
.fighter.rival small,.fighter.rival .edit-mark { color: #ffc2ae; }
.fighter.player small,.fighter.player .edit-mark { color: #e0f5ac; }
.versus { background: #211b30; color: #fff2a8; font-size: 18px; }
.sound-deck { background: linear-gradient(105deg,#322b45,#211d30); }
.disc { background: radial-gradient(circle,#242038 0 5%,var(--orange) 6% 23%,transparent 24%), repeating-radial-gradient(circle,#554866 0 1px,#211d31 2px 3px); }
.options { padding-bottom: 6px; margin-bottom: 8px; }
.options label { min-width: 0; }.options select { max-width: 100%; min-width: 0; }
.sound-deck :is(#listen,#sync-open),#zoom,.preview-tools select,.options select,.quick-toggle { color: #f2eaf9; border-color: #655b73; background: #2b253a; }
.desk .deck-head h2,.net-head h2,.studio-panel h2 { color: var(--cream); }
.deck-head h2 { display: inline-flex; gap: 7px; align-items: center; }
.deck-head h2::before { content: ""; width: 5px; height: 1em; background: var(--zone); border-radius: 2px; transform: skewX(-10deg); }
#start,.net-controls button.primary,.net-actions button.primary,.studio-panel button.primary,.cast-footer .confirm,#sync-tap {
    min-height: 46px; border: 1px solid #fff5; border-radius: 9px;
    color: var(--stamp); background: var(--zone); box-shadow: inset 0 -3px #221a3424;
}
.net-controls button.primary { color: var(--stamp); }
.entry-tabs,.mode-card,.studio-panel :is(input,select),.net-controls :is(input,select) { background: #221f32; border-color: #5a5066; }
.entry-tabs button[aria-pressed=true] { background: var(--lilac); color: var(--stamp); }
.mode-card:has(:checked) { background: #42303d; border-color: var(--zone); }
.mode-card:has(:checked)::after { background: var(--zone); border-color: var(--zone); }
.mode-glyph { color: var(--zone); }
.lane span { background: #363044; color: #d0c8d9; border-bottom-color: #61566f; }
.lane span.active { background: var(--lime); border-color: var(--lime); color: var(--stamp); }
.combo-line { background: #29243b; }
.pads [data-family=toprock] { --family: var(--lime); }
.pads [data-family=footwork] { --family: var(--mint); }
.pads [data-family=power] { --family: var(--orange); }
.pads [data-family=freeze] { --family: var(--lilac); }
.pads button[data-family] {
    color: #fffaf1; border-color: #5c536a; border-inline-start: 3px solid var(--family);
    background: linear-gradient(115deg,color-mix(in srgb,var(--family) 13%,#292335),#292335);
    border-radius: 7px; min-height: 44px;
}
.pads [data-family] kbd { color: var(--family); border-color: #6c6178; background: #251f31; }
.pads button:is(.previewing,.next,.controlled,.pressed) { color: var(--family); border-color: var(--family); box-shadow: inset 0 0 0 1px var(--family); }
.pads button:active:not(:disabled) { background: var(--family,var(--lime)); color: var(--stamp); }
.family-guide,.family-guide p,.studio-panel p { color: var(--muted); }
.family-guide button,.studio-links a,.take-actions a { border-color: #6b5c7b; color: #f3eaff; background: #30283e; }
#cast-dialog,#sync-dialog,.take-actions,#round-report { color: var(--cream); background: #262035; border: 1px solid #655771; }
.cast-grid button[aria-pressed=true] { outline: 2px solid var(--lime); outline-offset: -2px; }
.ballot-page { --surface: #282236; --left: var(--orange); --right: var(--lime); background: var(--ink); }
.ballot-page .ballot-entry,.ballot-match,#screen-join { border-color: #62536f; }
.ballot-page .ballot-venue { color: var(--mint); }
.ballot-entry input,.screen-tools button { background: #211c2f; border-color: #685b78; }
.ballot-entry button { background: var(--lilac); color: var(--stamp); min-height: 44px; }
.ballot-card { border-top-color: var(--tone); background: linear-gradient(145deg,#583848,#292235); }
.ballot-card[data-side="1"] { background: linear-gradient(215deg,#434b34,#252432); }
.ballot-mast { border-color: var(--line); }
.role-switch,.cast-fields input { background: #221d30; border-color: #61556e; }
.role-switch [aria-pressed=true] { background: var(--lilac); color: var(--stamp); }
.intro-side.left { background-color: #61364b; }.intro-side.right { background-color: #4c5336; }
.finish-flag { filter: drop-shadow(2px 2px #7c4485); }
#result-card { background: linear-gradient(130deg,#21182edb,#1e1b30da); }
.signature-card,.phrase-editor,.takeover-panel { border-color: #5c506a; background: #211d30; }

#mode-menu {
    width: min(840px,calc(100% - 28px)); max-height: calc(100dvh - 32px); overflow: auto;
    padding: 0; color: var(--cream); border: 2px solid #a88cd1; border-radius: 18px;
    background: #241e32; box-shadow: 0 18px 80px #090514aa;
}
#mode-menu::backdrop { background: #100b20ce; }
.menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 15px 19px; background: var(--lilac); color: var(--stamp); }
.menu-heading h2 { font-size: clamp(21px,3vw,32px); line-height: 1.2; margin: 0; letter-spacing: -.04em; }
.menu-heading button { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #4e396e; color: var(--stamp); background: #ffffff35; border-radius: 10px; }
.route-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; align-items: start; padding: 18px; }
.route-grid section { --route-color: var(--lime); min-width: 0; }
.route-grid [data-zone=online] { --route-color: var(--orange); }.route-grid [data-zone=studio] { --route-color: var(--mint); }
.route-grid h3 { display: flex; align-items: center; gap: 7px; margin: 2px 0 10px; color: var(--route-color); font-size: 17px; }
.route-grid a { display: grid; grid-template-columns: 1fr auto; gap: 4px 6px; margin: 5px 0; padding: 10px; text-decoration: none; background: #342d43; border: 1px solid #5d516c; border-radius: 8px; color: var(--cream); }
.route-grid a strong { font-size: 13px; overflow-wrap: anywhere; }
.route-grid a small { grid-column: 1; color: var(--muted); font-size: 11px; line-height: 1.45; }
.route-grid a svg { width: 16px; grid-area: 1/2/3/3; align-self: center; color: var(--route-color); }
.route-grid a[aria-current] { border-color: var(--route-color); box-shadow: inset 3px 0 var(--route-color); }
:is(button,a,input,select,summary):focus-visible { outline: 3px solid #fff2a6; outline-offset: 2px; }
.menu-heading button:focus-visible { outline-color: var(--stamp); }
@media (hover:hover) {
    .main-nav a:not([aria-current]):hover,.launch-bar button:hover:not(:disabled) { background: #40354e; color: white; }
    .route-grid a:hover { border-color: var(--route-color); background: #40354e; }
    #game-menu:hover { background: #decaff; }
    .pads button[data-family]:hover:not(:disabled) { border-color: var(--family); }
}
@media (prefers-reduced-motion:no-preference) {
    .main-nav a,.launch-bar button,#game-menu,.route-grid a { transition: background-color .13s, border-color .13s, transform .13s; }
    .route-grid a:hover,#game-menu:hover { transform: translateY(-1px); }
    #mode-menu[open] { animation: show-menu .16s ease-out; }
    @keyframes show-menu { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
}
@media (max-width:900px) {
    .mast { gap: 7px; }.main-nav a { padding-inline: 13px; }
    html:not(.game-expanded) body:not(.is-live) .heading { grid-template-columns: minmax(0,1.35fr) minmax(0,.85fr) auto; gap: 6px; }
    html:not(.game-expanded) body:not(.is-live) .metrics div { min-width: 49px; padding: 6px; }
}
@media (max-width:720px) {
    .mast { height: auto; padding: 8px 0; row-gap: 6px; grid-template-columns: 1fr auto auto; }
    .mast .wordmark { grid-column: 1; grid-row: 1; }.wordmark strong { font-size: 19px; }
    .mast .utilities { grid-column: 2; grid-row: 1; }.mast #game-menu { grid-column: 3; grid-row: 1; padding: 0 9px; }
    .mast .utilities button,.mast #game-menu { min-height: 44px; height: 44px; }
    .mast .main-nav { grid-column: 1/-1; grid-row: 2; display: grid; grid-template-columns: repeat(3,1fr); padding: 2px; }
    .mast .main-nav a { min-height: 44px; padding: 4px; font-size: 12px; }
    .mast .main-nav svg { width: 17px; height: 17px; }
    .is-live .mast .main-nav,.game-expanded .mast .main-nav { display: none; }
    .is-live .mast,.game-expanded .mast { grid-template-columns: 1fr auto; padding: 0; }
    html:not(.game-expanded) body:not(.is-live) .heading {
        grid-template-columns: minmax(0,1.75fr) minmax(0,1fr);
        grid-template-rows: auto auto; gap: 4px 0;
        min-height: 90px; padding: 8px 12px; margin: 1px 0 8px; border-radius: 10px;
        background-image: linear-gradient(108deg,var(--zone) 0 61%,#221c35 61% 62%,transparent 62%),radial-gradient(#9480aa4a 1px,transparent 1.4px);
    }
    html:not(.game-expanded) body:not(.is-live) .heading::before { grid-area: 1/2/3/3; margin: -5px -11px -5px 0; background-position: center; }
    html:not(.game-expanded) body:not(.is-live) .heading h1 { font-size: clamp(20px,5.3vw,34px); }
    html:not(.game-expanded) body:not(.is-live) .location { font-size: 9px; margin-bottom: 2px; }
    html:not(.game-expanded) body:not(.is-live) .metrics { grid-area: 2/1; justify-self: start; gap: 5px; }
    html:not(.game-expanded) body:not(.is-live) .metrics div { min-width: 0; padding: 1px 6px; gap: 4px; flex-direction: row; align-items: center; border: none; background: #231e32; }
    html:not(.game-expanded) body:not(.is-live) .metrics small { font-size: 9px; }
    html:not(.game-expanded) body:not(.is-live) .metrics b { font-size: 12px; }
    html:not(.game-expanded) .network:is([data-state=entry],[data-state=lobby],[data-state=closed]) .heading > div:first-child { grid-row: 1/3; }
    .launch-bar { margin-bottom: 8px; }
    .launch-bar .mode-switch { width: 100%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; }
    .launch-bar button { min-height: 44px; gap: 4px; font-size: clamp(9px,2.6vw,12px); line-height: 1.2; padding: 4px; }
    .launch-bar button svg { width: 14px; height: 14px; }
    .desk,.stage-column { border-radius: 10px; }
    .route-grid { grid-template-columns: 1fr; gap: 12px; padding: 13px; }
    #mode-menu { width: min(450px,calc(100% - 18px)); }
    .menu-heading { position: sticky; top: 0; z-index: 1; padding: 10px 14px; }
    .route-grid h3 { margin-bottom: 6px; }.route-grid a { margin: 4px 0; padding: 8px 10px; }
}
@media (orientation:landscape) and (max-height:550px) {
    html:not(.game-expanded) body:not(.is-live) .mast { height: auto; min-height: 44px; padding: 2px 0; grid-template-columns: 1fr auto 1fr auto; }
    html:not(.game-expanded) body:not(.is-live) .mast > * { grid-column: auto; grid-row: 1; }
    html:not(.game-expanded) body:not(.is-live) .heading { min-height: 58px; padding-block: 5px; margin-bottom: 5px; }
    html:not(.game-expanded) body:not(.is-live) .heading h1 { font-size: 24px; }
    .launch-bar { margin-bottom: 6px; }
}

/* Mark an accepted input until its animation actually starts. */
:is(.pads,.family-guide) button[data-queued] {
    position: relative; border-color: var(--mint);
    box-shadow: inset 0 -3px var(--mint);
}
:is(.pads,.family-guide) button[data-queued]::after {
    content: '›' attr(data-queued);
    position: absolute; top: 1px; right: 1px;
    padding: 1px 4px; border-radius: 3px; pointer-events: none;
    background: var(--mint); color: var(--stamp);
    font: 800 10px/1.2 var(--mono);
}
.quick-key[data-queued] kbd,.has-variants[data-queued] i { visibility:hidden; }
.thumb-side { display:none; }
#echo-lesson { min-height:44px; margin:0; align-self:flex-start; }
.learning-echo .family-guide,.learning-echo .deck-head:has(.quick-toggle),
.learning-echo .pads>button[data-move]:not(.next) { display:none; }
.learning-echo #pads { grid-template-columns:minmax(0,1fr); }
.learning-echo .pads>button.next { justify-content:center; }
.learning-echo #lane { grid-template-columns:repeat(4,minmax(0,1fr)); }
.learning-echo #lane span:nth-child(n+5) { display:none; }

@media (max-width:720px), (pointer:coarse), (orientation:landscape) and (max-height:550px) {
    .quick-deck:not([hidden]) {
        display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
        grid-template-areas:"hand keys" "help help" "edit edit"; align-items:center; gap:6px 10px;
    }
    .quick-deck[data-hand=left]:not([hidden]) {
        grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
        grid-template-areas:"keys hand" "help help" "edit edit";
    }
    .quick-keys {
        grid-area:keys; justify-self:end; width:100%; max-width:220px;
        display:grid; grid-auto-flow:row; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px;
    }
    .quick-deck[data-hand=left] .quick-keys { justify-self:start; }
    .quick-deck[data-hand=right] .quick-keys { grid-template-areas:"two one" "three four"; }
    .quick-deck[data-hand=left] .quick-keys { grid-template-areas:"one two" "four three"; }
    .quick-keys button:nth-child(1) { grid-area:one; }.quick-keys button:nth-child(2) { grid-area:two; }
    .quick-keys button:nth-child(3) { grid-area:three; }.quick-keys button:nth-child(4) { grid-area:four; }
    .pads .quick-keys button { min-height:52px; justify-content:center; align-items:start; gap:3px; padding:4px 6px; }
    .quick-deck > p { grid-area:help; margin:0; }.quick-deck > a { grid-area:edit; justify-self:start; }
    .thumb-side { grid-area:hand; display:flex; flex-wrap:wrap; align-content:center; align-items:center; gap:4px; }
    .thumb-side span { width:100%; font-size:11px; font-weight:700; color:var(--muted); }
    .pads .thumb-side button {
        flex:1 1 45px; max-width:85px; min-height:44px; padding:4px;
        display:grid; place-items:center; border:1px solid #71637d; border-radius:7px;
        background:#282134; color:var(--cream); font-family:inherit; font-size:11px; font-weight:700; line-height:1.25;
    }
    .pads .thumb-side button[aria-pressed=true] { background:var(--mint); border-color:var(--mint); color:var(--stamp); }
    .is-live .quick-deck > p { display:none; }
}
@media (orientation:portrait) and (max-width:720px) and (min-height:480px) {
    html:not(.game-expanded) .play-layout:has(.pads.quick-open) .stage-column { position:sticky; top:0; z-index:2; }
    html:not(.game-expanded) body:not(.is-live) .play-layout:has(.pads.quick-open) .arena:not(.close-view) { height:clamp(150px,25svh,260px); }
}
@media (orientation:landscape) and (max-height:550px), (orientation:landscape) and (pointer:coarse) and (min-width:721px) {
    .play-layout:has(.quick-open .quick-deck[data-hand=left]) {
        grid-template-columns:minmax(218px,1fr) minmax(0,1.5fr);
    }
    .play-layout:has(.quick-open .quick-deck[data-hand=left]) .stage-column { grid-column:2; grid-row:1; }
    .play-layout:has(.quick-open .quick-deck[data-hand=left]) .desk { grid-column:1; grid-row:1; }
}
#best-watch,.best-controls a { background: var(--lime); color: var(--stamp); font-weight: 800; }
.best-preview {
    width: min(860px,95vw); max-height: 94dvh; box-sizing: border-box; padding: clamp(12px,2vw,23px);
    border: 1px solid #756383; border-radius: 15px; color: var(--cream); background: #252035;
}
.best-preview::backdrop { background: #120e20da; }
.best-preview header,.best-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.best-preview h2,.best-preview p { margin: 5px 0 12px; }
.best-preview p { font-size: 13px; }
.best-preview :is(button,a) { min-height: 44px; display:inline-grid; place-items:center; padding:6px 12px; border:1px solid #695a7d; border-radius:8px; text-decoration:none; font:inherit; }
.best-preview button { background:#383045;color:var(--cream); }
.best-preview header button { width:44px;font-size:22px; }
.best-screen { width:100%;height:clamp(140px,46dvh,500px);margin:8px 0;border-radius:9px;overflow:hidden;background:var(--ink); }
@media(max-height:450px){ .best-preview {padding:6px 10px;} .best-screen {height:43dvh;margin:2px 0;} .best-preview p {margin:1px 0;} .best-preview h2 {font-size:18px;margin:0;} }
.city-view-strip:not([hidden]){
    display:flex; align-items:center; flex-wrap:wrap; gap:3px 10px;
    padding:4px 12px; background:#211d2d; color:#f3edf6; border-bottom:1px solid #42394f;
}
.city-view-strip label{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700}
.city-view-strip label svg{width:17px;height:17px;color:#e3f785;flex:none}
.city-view-strip select{max-width:100%;min-width:0;min-height:33px;padding:3px 6px;border:1px solid #655973;border-radius:5px;background:#30283c;color:#fff;font:inherit;font-size:12px}
.city-view-strip details{margin-left:auto;color:#cfc2d5;font-size:12px}
.city-view-strip summary{cursor:pointer;padding:8px 2px}
.city-view-strip details[open]{flex:1 0 100%}
.view-credit-info{padding-bottom:6px}
.view-credit-info a{color:#dfebae;text-decoration:underline}
.view-credit-info small{margin-inline-start:8px}
.city-view-strip #view-status:empty{display:none}
.city-view-strip #view-status{font-size:11px;flex-basis:100%}
@media(max-width:440px){
    .city-view-strip:not([hidden]){display:grid;grid-template-columns:auto minmax(0,1fr) auto;padding:2px 7px;gap:2px 6px}
    .city-view-strip label,.city-view-strip select{font-size:11px}
    .city-view-strip details[open],.city-view-strip #view-status{grid-column:1/-1;margin-left:0}
}
.sound-selection { flex:1; min-width:0; }
.sound-selection #music-track { width:100%; max-width:330px; min-width:0; text-overflow:ellipsis; }
@media(max-width:720px) { .sound-selection #music-track { max-width:100%; } }