/* Complete supplied PNG buttons, including their circle and light-blue rim. */
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls { background: #50b1c6; }
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls .btn,
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls .btn[status='off']:not(.btn-disabled),
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls .btn:hover,
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls .btn[status='off']:not(.btn-disabled):hover {
    border: 0; background: transparent; isolation: isolate;
}
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls .btn::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--utility-art) center / contain no-repeat;
    pointer-events: none;
}
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls .btn > .control-icon { visibility: hidden; }
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls .control-icon::before { content: none; }
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls .map-quality:disabled { cursor: not-allowed; }
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls .music-background { --utility-art: url('/bundles/arteneoproject/images/new/utility/music-on.png'); }
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls .music-background[status='off'] { --utility-art: url('/bundles/arteneoproject/images/new/utility/music-off.png'); }
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls .music-hit { --utility-art: url('/bundles/arteneoproject/images/new/utility/sound-on.png'); }
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls .music-hit[status='off'] { --utility-art: url('/bundles/arteneoproject/images/new/utility/sound-off.png'); }
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls .map-language { --utility-art: url('/bundles/arteneoproject/images/new/utility/language-en.png'); }
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls .map-language[href*='lang=cn'] { --utility-art: url('/bundles/arteneoproject/images/new/utility/language-cn.png'); }
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls .map-quality { --utility-art: url('/bundles/arteneoproject/images/new/utility/hd-on.png'); }
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls .map-quality[status='off'] { --utility-art: url('/bundles/arteneoproject/images/new/utility/hd-off.png'); }
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls .map-quality[aria-disabled='true'] { --utility-art: url('/bundles/arteneoproject/images/new/utility/hd-off.png'); }
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls .map-background { --utility-art: url('/bundles/arteneoproject/images/new/utility/map-minus.png'); }
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls .map-background[status='off'] { --utility-art: url('/bundles/arteneoproject/images/new/utility/map-plus.png'); }

/* Use one spacing value for every button gap and both ends of the pill. */
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls {
    --utility-gap: 16px;
    justify-content: flex-start;
    gap: var(--utility-gap);
    width: max-content;
    height: auto;
    padding: 8px var(--utility-gap);
    box-sizing: border-box;
}
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls > .btn {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    margin: 0;
}
/* The separator is a separate flex item, with one full gap on each side. */
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls > .btn::before {
    content: none;
}
#s .game-wrapper.ui-flat-v2 #pane-navigation .pane-controls > .utility-separator {
    display: block;
    flex: 0 0 2px;
    width: 2px;
    height: 38px;
    background: rgba(255, 255, 255, .7);
    pointer-events: none;
}