:root,:host {
    --background: var(--playpass-cms-primaryColor);
    --background-body: var(--playpass-cms-primaryColor);
    --background-alt: var(--playpass-cms-primaryColor);
    --form-text: var(--playpass-cms-primaryColor);
    --text-main: var(--playpass-cms-textColor);
    --text-bright: var(--playpass-cms-textColor);
    --text-main-filter: invert(100%) sepia(45%) saturate(2%) hue-rotate(327deg) brightness(117%) contrast(100%);
    --brand-color: var(--playpass-cms-titleColor);
    --color-primary: var(--playpass-cms-tertiaryColor);
    --color-primary-text: var(--form-text);
    --color-secondary: var(--playpass-cms-secondaryColor);
    --color-danger: #BF616A;
    --color-info: var(--playpass-cms-secondaryColor);
    --color-info-text: var(--form-text);
    --input-border-radius: 0px;
    --button-font: sans-serif;
    --button-text-color: var(--color-primary);
    --autocomplete-hover-color: var(--color-primary);
    --autocomplete-focus-color: var(--color-primary);
    --autocomplete-border-color: var(--color-primary);
    --autocomplete-background-color: var(--color-primary)
}

[playpass-cms-theme=default] {
    --playpass-cms-primaryColor: #2E3440;
    --playpass-cms-secondaryColor: #88C0D0;
    --playpass-cms-tertiaryColor: #A3BE8C;
    --playpass-cms-textColor: #fff;
    --playpass-cms-titleColor: #fff
}

[playpass-cms-theme=blackLime] {
    --playpass-cms-primaryColor: #262626;
    --playpass-cms-secondaryColor: #6AB033;
    --playpass-cms-tertiaryColor: #A3BE8D;
    --playpass-cms-textColor: #6AB033;
    --playpass-cms-titleColor: #6AB033
}

[playpass-cms-theme=blackBerry] {
    --playpass-cms-primaryColor: #262626;
    --playpass-cms-secondaryColor: #A67CFF;
    --playpass-cms-tertiaryColor: #56D3C4;
    --playpass-cms-textColor: #56D3C4;
    --playpass-cms-titleColor: #56D3C4
}

[playpass-cms-theme=blackCherry] {
    --playpass-cms-primaryColor: #262626;
    --playpass-cms-secondaryColor: #E24112;
    --playpass-cms-tertiaryColor: #FF4C00;
    --playpass-cms-textColor: #FF4C00;
    --playpass-cms-titleColor: #FF4C00
}

[playpass-cms-theme=pinkLemonade] {
    --playpass-cms-primaryColor: #FCF9ED;
    --playpass-cms-secondaryColor: #FAC91E;
    --playpass-cms-tertiaryColor: #F5BE9F;
    --playpass-cms-textColor: #FF8C8C;
    --playpass-cms-titleColor: #FF8C8C
}

[playpass-cms-theme=vintagePop] {
    --playpass-cms-primaryColor: #E9DFCB;
    --playpass-cms-secondaryColor: #F29513;
    --playpass-cms-tertiaryColor: #697F33;
    --playpass-cms-textColor: #201E1C;
    --playpass-cms-titleColor: #F55812
}

[playpass-cms-theme=grapeSoda] {
    --playpass-cms-primaryColor: #CEBCFF;
    --playpass-cms-secondaryColor: #6843D3;
    --playpass-cms-tertiaryColor: #D5FF60;
    --playpass-cms-textColor: #1C1C1E;
    --playpass-cms-titleColor: #FFFFFF
}

.modal {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 90vh;
    overflow: auto;
    z-index: 0;
    pointer-events: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity .2s;
    box-sizing: border-box;
    padding: 16px
}

.modal[open] {
    pointer-events: unset;
    opacity: 1
}

.modal[open] .modal-fade:hover {
    cursor: pointer
}

.modal .modal-fade {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.5)
}

.modal .modal-body {
    pointer-events: filled;
    background: var(--background-body);
    width: 100%;
    max-width: 500px;
    border: inset 1px rgba(255,255,255,.7);
    box-shadow: 0 6px 3px #000c;
    border-radius: 12px;
    color: var(--text-main);
    text-align: center;
    opacity: 0;
    transition: opacity .2s,transform .2s;
    padding: 16px;
    z-index: 1;
    box-sizing: border-box
}

.modal-body-minimal {
    border: none!important;
    background: transparent!important;
    padding: 0!important;
    margin: 0!important;
    box-shadow: none!important
}

.modal-close-button {
    width: 60px;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 40px;
    cursor: pointer
}

.modal-close-button:after {
    content: "\d7"
}

.modal-close-button:hover {
    transform: scale(1.1)
}

.modal .modal-body p {
    font-size: 1rem
}

.modal[open] .modal-body {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .2s .2s,transform .3s .2s
}

.modal .modal-controls:empty {
    display: none
}

.modal .modal-controls {
    padding: 8px;
    justify-content: end;
    display: flex
}

.modal .modal-controls:last-child {
    margin-top: 16px;
    justify-content: center
}

.modal button:hover {
    cursor: pointer
}

.help-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    text-align: left
}

.help-list .item {
    display: flex;
    flex-direction: row;
    margin-top: 20px
}

.help-list .item .text {
    margin-left: 10px;
    font-size: 1em
}

:root {
    --autocomplete-input-color: rgba(0,0,0,.3);
    --autocomplete-input-text-color: #fff;
    --autocomplete-option-color: #000;
    --autocomplete-option-text-color: #fff;
    --autocomplete-hover-color: #e9e9e9;
    --autocomplete-hover-text-color: #fff;
    --autocomplete-focus-color: DodgerBlue;
    --autocomplete-focus-text-color: #fff
}

auto-complete {
    position: relative;
    display: inline-block
}

auto-complete input {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--autocomplete-input-color);
    color: var(--autocomplete-input-text-color);
    padding: 10px 31px;
    border-style: solid;
    border-color: var(--autocomplete-border-color)
}

auto-complete .items {
    position: absolute;
    border: 1px solid var(--color-primary);
    border-bottom: none;
    border-top: none;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0;
    list-style: none;
    text-align: left;
    padding: 0;
    margin: 0
}

auto-complete .option {
    padding: 10px;
    cursor: pointer;
    background-color: var(--autocomplete-option-color);
    border-bottom: 1px solid var(--autocomplete-border-color);
    color: var(--autocomplete-option-text-color);
    white-space: nowrap
}

auto-complete .option strong {
    background-color: var(--autocomplete-background-color);
    color: var(--autocomplete-option-text-color)
}

auto-complete .option:hover {
    background-color: var(--autocomplete-hover-color);
    color: var(--autocomplete-hover-text-color)
}

auto-complete .option:hover strong {
    color: var(--autocomplete-hover-text-color)
}

auto-complete .option:focus {
    background-color: var(--autocomplete-focus-color);
    color: var(--autocomplete-focus-text-color)
}

auto-complete input:focus {
    outline: 1px solid var(--autocomplete-focus-color);
    box-shadow: none
}

auto-complete .option:focus strong {
    color: var(--autocomplete-focus-text-color)
}

auto-complete .option p {
    margin: 0 0 -4px
}

auto-complete .option sub {
    opacity: .5
}

auto-complete label {
    position: relative;
    width: 100%
}

auto-complete label:after {
    content: "";
    position: absolute;
    right: 3px;
    top: 0;
    bottom: 0;
    width: 28px;
    background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22white%22%20class%3D%22bi%20bi-x%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20d%3D%22M4.646%204.646a.5.5%200%200%201%20.708%200L8%207.293l2.646-2.647a.5.5%200%200%201%20.708.708L8.707%208l2.647%202.646a.5.5%200%200%201-.708.708L8%208.707l-2.646%202.647a.5.5%200%200%201-.708-.708L7.293%208%204.646%205.354a.5.5%200%200%201%200-.708z%22%2F%3E%0A%3C%2Fsvg%3E) center / contain no-repeat
}

auto-complete label.hide-icon:after {
    display: none
}

auto-complete label:before {
    content: "";
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 16px;
    background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22white%22%20class%3D%22bi%20bi-search%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20d%3D%22M11.742%2010.344a6.5%206.5%200%201%200-1.397%201.398h-.001c.03.04.062.078.098.115l3.85%203.85a1%201%200%200%200%201.415-1.414l-3.85-3.85a1.007%201.007%200%200%200-.115-.1zM12%206.5a5.5%205.5%200%201%201-11%200%205.5%205.5%200%200%201%2011%200z%22%2F%3E%0A%3C%2Fsvg%3E) center / contain no-repeat
}

auto-complete .open {
    border-top: 1px solid var(--color-primary)
}

:root {
    --progress-range-color: #A7A7A7;
    --progress-fill-color: #89D041;
    --extra-time-color: #7F7CFF
}

#game-screen[active] {
    display: flex;
    flex-direction: column;
    align-items: center
}

#game-screen game-controls {
    flex-direction: column;
    border-top: 1px solid var(--text-muted);
    padding-top: 24px
}

#game-screen game-controls {
    border-top: none
}

#controls>* {
    flex: 1
}

#game-screen .progress {
    position: relative;
    display: block;
    width: 100%;
    height: 16px;
    border: 1px solid var(--text-main);
    margin: 8px 0;
    box-sizing: border-box
}

#game-screen .progress>.fill {
    position: absolute;
    display: block;
    left: 0;
    right: 100%;
    top: 0;
    bottom: 0;
    background: var(--progress-range-color)
}

#game-screen .progress>.fill[name=extra] {
    position: absolute;
    display: block;
    left: 0;
    right: 100%;
    top: 0;
    bottom: 0;
    background: var(--extra-time-color)
}

#game-screen .progress>.active {
    background: #0015fe
}

#game-screen .progress>.fill[name=time] {
    position: absolute;
    display: block;
    left: 0;
    right: 100%;
    top: 0;
    bottom: 0;
    background: var(--progress-fill-color)
}

#game-screen .form {
    width: 100%;
    max-width: 600px;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-direction: column
}

#game-screen .form button {
    display: inline-block;
    margin: 0
}

#game-screen auto-complete {
    display: block;
    margin-bottom: 15px
}

#game-screen .result:hover {
    cursor: pointer
}

#game-screen #game-input {
    display: none
}

#game-screen .extra-time-text {
    color: var(--extra-time-color)
}

#game-screen #extraTimeShare {
    margin-bottom: 20px
}

#results-screen[active] {
    display: flex;
    flex-direction: column;
    align-items: center
}

#results-screen[result=gameover] *[solved],#results-screen[result=solved] *[gameover] {
    display: none
}

button.twitter {
    background: #1DA1F2;
    color: #fff
}

button.reddit {
    background: #FF5700;
    color: #fff
}

button.facebook {
    background: #1877f2;
    color: #fff
}

#results-screen details {
    width: 100%
}