:root[data-mg-palette="black"] body.mosaicglass-site {
    --mg-glass-rgb: 9 12 17;
    --mg-button-rgb: 22 26 33;
    --mg-edge-rgb: 190 201 218;
    --mg-edge: #bec9da;
    --mg-selected: #d4dfed;
}

:root[data-mg-palette="deep-blue"] body.mosaicglass-site {
    --mg-glass-rgb: 8 19 51;
    --mg-button-rgb: 16 36 77;
    --mg-edge-rgb: 82 187 242;
    --mg-edge: #74cafa;
    --mg-selected: #edcb8b;
    --mg-focus: #a4dcff;
    --mg-muted: #bbcce3;
    --mg-engraving-rgb: 162 199 241;
}

:root[data-mg-palette="emerald"] body.mosaicglass-site {
    --mg-glass-rgb: 8 29 22;
    --mg-button-rgb: 17 48 35;
    --mg-edge-rgb: 96 211 170;
    --mg-edge: #85d9b4;
    --mg-selected: #cae3b4;
    --mg-focus: #adf0ca;
    --mg-muted: #bad2c8;
    --mg-engraving-rgb: 165 220 191;
}

:root[data-mg-palette="amber"] body.mosaicglass-site {
    --mg-glass-rgb: 35 24 13;
    --mg-button-rgb: 57 39 20;
    --mg-edge-rgb: 237 186 103;
    --mg-edge: #edc18a;
    --mg-selected: #f4d6a3;
    --mg-focus: #ffe0ae;
    --mg-muted: #d2c6b5;
    --mg-engraving-rgb: 234 199 148;
}

:root[data-mg-palette="violet"] body.mosaicglass-site {
    --mg-glass-rgb: 25 17 42;
    --mg-button-rgb: 43 30 66;
    --mg-edge-rgb: 193 164 245;
    --mg-edge: #c9b0f2;
    --mg-selected: #b4e5ee;
    --mg-focus: #dec8ff;
    --mg-muted: #cec3df;
    --mg-engraving-rgb: 207 183 236;
}

.mosaicglass-site {
    --mg-fx-strength: .62;
}

:root[data-mg-effects="full"] .mosaicglass-site {
    --mg-fx-strength: 1;
}

:root[data-mg-effects="off"] .mosaicglass-site {
    --mg-fx-strength: 0;
}

.mosaicglass-site :is(.mg-surface, .mg-action)::before {
    opacity: calc(.6 * var(--mg-fx-strength));
}

.mosaicglass-site :is(.mg-surface, .mg-action)::after {
    opacity: calc((.3 + var(--mg-reactive, 0) + var(--mg-afterglow, .14)) * var(--mg-fx-strength));
}

html body.mosaicglass-site [data-mg-template="primary"] {
    --mg-source-alpha: 1;
    --mg-opacity: 1;
    --mg-bevel: 3px;
    --mg-bevel-light: .23;
    --mg-edge-emission: .27;
    --mg-edge-boost: .2;
    --mg-crack: 0;
    --mg-crack-flow: 0;
    --mg-scan: .3;
    --mg-lift: 1.5px;
    --mg-tilt-limit: 1;
    --mg-motion-enabled: 1;
    min-height: 46px;
    padding: 11px 22px;
    border-color: rgb(var(--mg-edge-rgb) / .62);
    border-radius: 2px;
    font-weight: 650;
    letter-spacing: .025em;
    box-shadow: inset 0 3px 0 rgb(var(--mg-edge-rgb) / .2), inset 0 -3px 0 rgb(0 0 0 / .36), inset 0 0 0 1px rgb(var(--mg-edge-rgb) / .16), 0 5px 10px rgb(0 0 0 / .27);
}

:root[data-theme="light"] body.mosaicglass-site [data-mg-template="primary"] {
    --mg-button-rgb: 232 239 247;
}

html body.mosaicglass-site [data-mg-semantic="launch"] {
    --mg-button-rgb: 22 59 27;
    --mg-edge-rgb: 169 231 153;
    --mg-edge: #b5eda6;
    --mg-text: #f0ffe9;
    --mg-focus: #d7ffc6;
    --mg-frost-rgb: 182 236 160;
    color: var(--mg-text);
}

:root[data-theme="light"] body.mosaicglass-site [data-mg-semantic="launch"] {
    --mg-button-rgb: 29 74 35;
    --mg-edge-rgb: 88 151 68;
    --mg-frost-rgb: 183 235 169;
    --mg-focus: #1b6630;
}

html body.mosaicglass-site .mg-facets,
html body.mosaicglass-site .mg-glints,
html body.mosaicglass-site .mg-response {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.mosaicglass-site .mg-facets {
    background: rgb(var(--mg-edge-rgb) / .52);
    mask: url("../images/mosaicglass/start-game-facets.svg") center / 100% 100% no-repeat;
    -webkit-mask: url("../images/mosaicglass/start-game-facets.svg") center / 100% 100% no-repeat;
    opacity: .76;
}

.mosaicglass-site .mg-glints {
    background:
        radial-gradient(ellipse 13px 1px at 86% 2px, rgb(var(--mg-edge-rgb) / .9), transparent),
        radial-gradient(ellipse 1px 8px at 86% 2px, rgb(var(--mg-edge-rgb) / .85), transparent),
        radial-gradient(ellipse 8px 1px at 13% calc(100% - 2px), rgb(var(--mg-edge-rgb) / .6), transparent),
        radial-gradient(ellipse 1px 5px at 13% calc(100% - 2px), rgb(var(--mg-edge-rgb) / .6), transparent),
        radial-gradient(ellipse 7px 1px at 53% 2px, rgb(var(--mg-edge-rgb) / .45), transparent);
    opacity: calc(.25 * var(--mg-fx-strength));
    transition: opacity .22s ease;
}

.mosaicglass-site [data-mg-template="primary"]:is(:hover, :focus-visible) .mg-glints,
.mosaicglass-site [data-mg-preview="hover"] .mg-glints {
    opacity: var(--mg-fx-strength);
}

.mosaicglass-site .mg-response {
    padding: 2px;
    background: radial-gradient(ellipse at var(--mg-press-x, 50%) var(--mg-press-y, 50%), rgb(var(--mg-edge-rgb) / .7), transparent 68%);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    opacity: 0;
}

.mosaicglass-site [data-mg-template="primary"]:is(:active, .mg-pressing),
.mosaicglass-site [data-mg-preview="pressed"] {
    transform: translateY(1px);
    box-shadow: inset 0 2px 5px rgb(var(--mg-shadow-rgb) / .32), inset 0 -1px 0 rgb(var(--mg-edge-rgb) / .27), 0 1px 3px rgb(var(--mg-shadow-rgb) / .2);
}

.mosaicglass-site .mg-pressing .mg-response,
.mosaicglass-site [data-mg-preview="pressed"] .mg-response {
    opacity: var(--mg-fx-strength);
}

.mosaicglass-site .mg-released .mg-response {
    animation: mg-button-afterglow .48s ease-out both;
}

@keyframes mg-button-afterglow {
    from { opacity: var(--mg-fx-strength); }
    to { opacity: 0; }
}

.mosaicglass-site .mg-play-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.mosaicglass-site .mg-play-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: .85rem;
}

.mosaicglass-site [data-mg-template="country"] {
    --mg-bevel: 1.5px;
    --mg-bevel-light: .16;
    --mg-crack: .025;
}

.mosaicglass-site [data-mg-template="relationships"] {
    --mg-bevel: 0px;
    --mg-bevel-light: 0;
    --mg-motion-enabled: 0;
    --mg-crack: .025;
    --mg-edge-emission: .036;
}

.mosaicglass-site [data-mg-template="research"] {
    --mg-source-alpha: .283;
    --mg-crack: .025;
    --mg-bevel: 1.5px;
    --mg-motion-enabled: 0;
}

.mosaicglass-site .mg-authored-art {
    position: absolute;
    z-index: -1;
    inset: 0 0 0 auto;
    width: 36%;
    background: rgb(var(--mg-engraving-rgb));
    mask: var(--mg-authored-art) right center / auto 100% no-repeat;
    -webkit-mask: var(--mg-authored-art) right center / auto 100% no-repeat;
    opacity: .1;
    pointer-events: none;
}

.mosaicglass-site [data-mg-art="researches"] {
    --mg-authored-art: url("../images/mosaicglass/researches-engraving.png");
}

.mosaicglass-site [data-mg-art="maps"] {
    --mg-authored-art: url("../images/mosaicglass/maps-engraving.png");
}

.mosaicglass-site [data-mg-art="settings"] {
    --mg-authored-art: url("../images/mosaicglass/settings-engraving.png");
}

.mosaicglass-site [data-mg-art="main"] {
    --mg-authored-art: url("../images/mosaicglass/main-engraving.png");
    inset: auto 0 0;
    width: 100%;
    height: 36px;
    mask-size: 100% auto;
    -webkit-mask-size: 100% auto;
    opacity: .16;
}

.mosaicglass-site [data-mg-template="relationships"] .mg-authored-art {
    --mg-authored-art: url("../images/mosaicglass/relationships-engraving.png");
    width: 52%;
    opacity: .13;
}

html body.mosaicglass-site [data-mg-template] > :is(.mg-authored-art, .mg-facets, .mg-glints, .mg-response, .mg-settings-fx) {
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.mosaicglass-site [data-mg-template="notification"].is-unread,
.mosaicglass-site .header-notification-row.is-unread {
    border-inline-start: 2px solid var(--mg-selected);
    background: linear-gradient(90deg, rgb(var(--mg-edge-rgb) / .1), transparent 70%), var(--site-surface);
}

html body.mosaicglass-site :is(#guide-progress, .mg-upload-meter, .mg-preview-progress) {
    display: block;
    appearance: none;
    width: 100%;
    height: 10px;
    padding: 1px;
    overflow: hidden;
    border: 1px solid rgb(var(--mg-edge-rgb) / .35);
    border-radius: 1px;
    background: rgb(var(--mg-shadow-rgb) / .3);
    color: var(--mg-selected);
    box-shadow: inset 0 1px 3px rgb(var(--mg-shadow-rgb) / .3);
}

.mosaicglass-site :is(#guide-progress, .mg-upload-meter, .mg-preview-progress)::-webkit-progress-bar {
    background: rgb(var(--mg-shadow-rgb) / .2);
}

.mosaicglass-site :is(#guide-progress, .mg-upload-meter, .mg-preview-progress)::-webkit-progress-value {
    background: linear-gradient(90deg, rgb(var(--mg-edge-rgb) / .3), rgb(var(--mg-edge-rgb) / .72));
    border-inline-end: 2px solid var(--mg-edge);
    box-shadow: inset 0 1px 0 rgb(var(--mg-frost-rgb) / .25);
}

.mosaicglass-site :is(#guide-progress, .mg-upload-meter, .mg-preview-progress)::-moz-progress-bar {
    background: linear-gradient(90deg, rgb(var(--mg-edge-rgb) / .3), rgb(var(--mg-edge-rgb) / .72));
    border-inline-end: 2px solid var(--mg-edge);
}

.mosaicglass-site .mg-upload-meter {
    margin: 8px 0 16px;
}

.mosaicglass-site .mg-appearance {
    position: relative;
}

.mosaicglass-site .policy-navigation {
    flex-wrap: wrap;
}

.mosaicglass-site .mg-appearance > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 10px;
    font-size: .76rem;
    cursor: pointer;
    list-style: none;
}

.mosaicglass-site .mg-appearance > summary::-webkit-details-marker {
    display: none;
}

.mosaicglass-site .mg-appearance svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
}

html body.mosaicglass-site .mg-appearance-panel {
    position: absolute;
    z-index: 120;
    top: calc(100% + 10px);
    right: 0;
    width: 310px;
    max-width: calc(100vw - 32px);
    padding: 20px;
    --mg-opacity: .98;
    --mg-blur: 0px;
    box-shadow: 0 16px 38px rgb(var(--mg-shadow-rgb) / .35), inset 0 1px 0 rgb(var(--mg-edge-rgb) / .4);
}

.mosaicglass-site .mg-appearance-title {
    margin: 0 0 16px;
    color: var(--mg-text);
    font-size: 1rem;
    font-weight: 650;
}

.mosaicglass-site .mg-appearance fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.mosaicglass-site .mg-appearance legend,
.mosaicglass-site .mg-effects-label {
    display: block;
    margin-bottom: 9px;
    color: var(--mg-muted);
    font-size: .76rem;
    font-weight: 600;
}

.mosaicglass-site .mg-palettes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 18px;
}

html body.mosaicglass-site .mg-palette-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: 65px;
    padding: 10px 4px;
    color: var(--mg-text);
    font: inherit;
    font-size: .66rem;
    line-height: 1.2;
}

.mosaicglass-site .mg-palette-swatch {
    width: 24px;
    height: 16px;
    border: 1px solid rgb(var(--mg-swatch-edge));
    background: linear-gradient(135deg, rgb(var(--mg-swatch-edge) / .4), transparent 70%), rgb(var(--mg-swatch));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .2);
}

.mosaicglass-site [data-mg-palette-choice="black"] { --mg-swatch: 12 15 21; --mg-swatch-edge: 165 175 190; }
.mosaicglass-site [data-mg-palette-choice="white"] { --mg-swatch: 232 238 248; --mg-swatch-edge: 115 137 163; }
.mosaicglass-site [data-mg-palette-choice="deep-blue"] { --mg-swatch: 12 31 87; --mg-swatch-edge: 76 178 241; }
.mosaicglass-site [data-mg-palette-choice="emerald"] { --mg-swatch: 13 58 34; --mg-swatch-edge: 111 219 164; }
.mosaicglass-site [data-mg-palette-choice="amber"] { --mg-swatch: 79 48 16; --mg-swatch-edge: 240 185 99; }
.mosaicglass-site [data-mg-palette-choice="violet"] { --mg-swatch: 52 30 87; --mg-swatch-edge: 185 149 235; }

.mosaicglass-site .mg-palette-button[aria-pressed="true"] {
    outline: 1px solid var(--mg-selected);
    outline-offset: -2px;
    background-color: rgb(var(--mg-edge-rgb) / .14);
}

html body.mosaicglass-site .mg-appearance select {
    width: 100%;
    min-height: 38px;
    margin-bottom: 16px;
    padding: 8px 10px;
    font-size: .8rem;
}

.mosaicglass-site .mg-motion-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--mg-text);
    font-size: .8rem;
}

.mosaicglass-site .mg-motion-note {
    margin: 8px 0 0;
    color: var(--mg-muted);
    font-size: .7rem;
    line-height: 1.5;
}

html body.mosaicglass-site .mg-settings-fx {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        radial-gradient(ellipse 44px 7px at 86% 1px, rgb(var(--mg-edge-rgb) / .45), transparent),
        radial-gradient(ellipse 14px 1px at 87% 1px, rgb(var(--mg-frost-rgb) / .9), transparent),
        radial-gradient(ellipse 1px 11px at 87% 1px, rgb(var(--mg-frost-rgb) / .7), transparent),
        radial-gradient(circle 1px at 95% 28%, rgb(var(--mg-edge-rgb) / .8), transparent),
        radial-gradient(circle 1px at 98% 72%, rgb(var(--mg-edge-rgb) / .6), transparent),
        radial-gradient(ellipse 35px 9px at 15% 100%, rgb(var(--mg-edge-rgb) / .26), transparent);
    opacity: var(--mg-fx-strength);
    pointer-events: none;
}

.mosaicglass-site .mg-appearance[open] .mg-settings-fx {
    animation: mg-settings-arrive .75s ease-out both;
}

@keyframes mg-settings-arrive {
    from { opacity: 0; }
    to { opacity: var(--mg-fx-strength); }
}

:root[data-mg-effects="off"] .mosaicglass-site [data-mg]::before,
:root[data-mg-effects="off"] .mosaicglass-site [data-mg]::after {
    opacity: 0;
}

:root[data-mg-motion="off"] .mosaicglass-site :is(.mg-action, [data-mg="button"], [data-mg="close"]) {
    --mg-lift: 0px;
    --mg-tilt-x: 0deg;
    --mg-tilt-y: 0deg;
    transition: none;
}

:root[data-mg-motion="off"] .mosaicglass-site :is(.mg-scanning, .mg-flowing, .mg-released .mg-response, .mg-settings-fx) {
    animation: none;
}

:root[data-mg-motion="off"] .mosaicglass-site [data-mg-template="primary"]:is(:active, .mg-pressing) {
    transform: none;
}

@media (max-width: 720px) {
    .mosaicglass-site .mg-appearance-label { display: none; }
    html body.mosaicglass-site .mg-appearance-panel { position: fixed; top: 76px; right: 16px; width: min(310px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 96px); overflow-y: auto; }
    .mosaicglass-site .mg-play-actions { gap: 10px; margin-top: 20px; }
    html body.mosaicglass-site .mg-play-button { padding: 11px 16px; }
    .mosaicglass-site .mg-authored-art { width: 30%; opacity: .075; }
}

@media (prefers-reduced-motion: reduce) {
    .mosaicglass-site :is(.mg-glints, .mg-response, .mg-settings-fx) { animation: none !important; transition: none; }
    .mosaicglass-site [data-mg-template="primary"] { --mg-lift: 0px; --mg-tilt-limit: 0; transition: none; }
    .mosaicglass-site [data-mg-template="primary"]:is(:active, .mg-pressing) { transform: none; }
}

:root[data-mg-effects="off"] body.mosaicglass-site :is([data-mg], .mg-surface, .mg-action) {
    --mg-blur: 0px;
    --mg-lift: 0px;
    --mg-tilt-x: 0deg;
    --mg-tilt-y: 0deg;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    transition: none;
}
:root[data-mg-effects="off"] body.mosaicglass-site :is([data-mg], .mg-surface, .mg-action)::before,
:root[data-mg-effects="off"] body.mosaicglass-site :is([data-mg], .mg-surface, .mg-action)::after,
:root[data-mg-effects="off"] body.mosaicglass-site :is(.mg-facets, .mg-glints, .mg-response, .mg-authored-art, .mg-settings-fx, .mg-engraving) {
    content: none !important;
    display: none !important;
    animation: none !important;
}
:root[data-mg-motion="off"] body.mosaicglass-site :is(.mg-action, [data-mg="button"], [data-mg="close"]) {
    transform: none;
}