@import"https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap";@import"https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css";.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;
    border-color: #fff transparent transparent transparent
}

.lds-ring div:nth-child(1) {
    animation-delay: -.45s
}

.lds-ring div:nth-child(2) {
    animation-delay: -.3s
}

.lds-ring div:nth-child(3) {
    animation-delay: -.15s
}

@keyframes lds-ring {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

:root {
    --color-danger-text: #fff
}

body {
    margin: 0 auto;
    padding: 0;
    display: flex;
    width: 100vw;
    max-width: 940px;
    min-height: 100vh;
    flex-direction: column;
    box-sizing: border-box
}

body.isLoggedIn .showIfLoggedOut {
    display: none
}

body:not(.isLoggedIn) .showIfLoggedIn {
    display: none
}

button {
    background: var(--color-info);
    color: var(--color-info-text);
    font-weight: 700;
    font-family: var(--button-font)
}

button>svg,button>img {
    vertical-align: middle
}

button[color=danger] {
    background: var(--color-danger)!important;
    color: var(--color-danger-text)!important
}

button[color=clear] {
    background: transparent!important;
    color: var(--text-main)!important
}

button[outline] {
    background: transparent!important;
    border: 2px solid var(--color-info)!important;
    color: var(--text-main)!important
}

button[outline][color=primary] {
    background: transparent!important;
    border: 2px solid var(--color-primary)!important
}

button[outline][color=danger] {
    background: transparent!important;
    border: 2px solid var(--color-danger)!important
}

button:hover {
    filter: brightness(.8)
}

button,input,select,textarea {
    border-radius: var(--input-border-radius)
}

select,textarea,input {
    background-color: var(--color-info)
}

.fork-ribbon {
    position: fixed;
    bottom: 55px;
    right: -135px;
    width: 400px;
    text-align: center;
    background: #ed7118;
    padding: .25em;
    transform: rotate(-45deg);
    font: 700 15px sans-serif;
    color: #fff
}

body:not([ready]) {
    overflow: hidden
}

body[ready]>.splash {
    pointer-events: none;
    opacity: 0
}

body>.splash {
    background-color: var(--background-body);
    display: flex;
    position: fixed;
    z-index: 99999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    transition: opacity linear .3s
}

game-header *[slot=brand] {
    font-size: 1.5rem;
    vertical-align: middle;
    align-items: center
}

game-header *[slot=brand] img {
    height: 1.5rem
}

[toggleable]:not([open]),[toggle][open] *[open=false],[toggle]:not([open]) *[open=true] {
    display: none!important
}

.fieldset {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px
}

.fieldset label {
    display: inline-block
}

.fieldset select,.fieldset input,.fieldset textarea {
    display: block;
    flex: 1
}

.flex {
    display: flex
}

.flex.center {
    justify-content: center;
    align-items: center
}

.flex-fill {
    flex: 1
}

.fill-w {
    width: 100%
}

@media only screen and (max-width: 600px) {
    .fieldset {
        flex-direction:column;
        flex: 1;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 8px
    }

    .fieldset select,.fieldset input,.fieldset textarea {
        width: 100%
    }
}

.hide {
    display: none!important
}

*:not([loading])>[loading-placeholder],*[loading]>*:not([loading-placeholder]) {
    display: none!important
}

: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%
}

: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
}

body {
    padding: 0 1em;
    font-family: Noto Sans,sans-serif;
    background: var(--background-body)
}

game-controls button {
    background: var(--color-info);
    color: var(--color-info-text)
}

button[color=primary] {
    background: var(--color-primary)!important;
    color: #000!important;
    text-transform: uppercase
}

button[color=secondary] {
    background: var(--color-secondary)!important;
    color: #000!important
}

game-header .button {
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: opacity .2s
}

game-header {
    background: var(--background-body);
    font-weight: 700
}

game-header *[slot=buttons-left] {
    margin-right: .5em
}

game-header .button:hover {
    opacity: .5
}

game-header .button img {
    filter: var(--text-main-filter)
}

game-header .button img,game-header .button svg {
    height: 100%
}

game-header *[slot=brand] {
    display: flex;
    gap: .5em;
    margin: 0;
    justify-content: center;
    color: var(--text-main)
}

game-header *[slot=brand] img {
    filter: var(--text-main-filter)
}

game-controls {
    background: var(--background-body);
    padding-bottom: 16px
}

screen-router>* {
    text-align: center
}

.splash h1 {
    padding: 8px;
    display: inline-block;
    line-height: 1.5em;
    text-align: center;
    vertical-align: middle;
    color: var(--text-main)
}

audio-ext {
    display: none;
    width: 100%;
    height: 56.25vw;
    max-width: 600px;
    max-height: 337.5px;
    aspect-ratio: 16 / 9;
    margin: 0 auto
}

audio-ext iframe {
    width: 100%;
    height: 100%
}

screen-router[open="#results-screen"] audio-ext {
    display: block
}

body[mode=free] *[mode]:not([mode="free"]),body[mode=genius] *[mode]:not([mode="genius"],[mode="timed"]),body[mode=challenge] *[mode]:not([mode="challenge"]),body[mode=timed] *[mode]:not([mode="timed"]),body[type=audio] *[game-type]:not([game-type="audio"]),body[type=text] *[game-type]:not([game-type="text"]) {
    display: none!important
}

footer {
    margin-top: 40px;
    font-size: .8em
}

.results {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 500px;
    flex-grow: 1
}

.results .result {
    display: block;
    border: 1px solid var(--text-main);
    padding: 8px;
    line-height: 1.2em;
    margin-bottom: 8px;
    box-sizing: border-box;
    text-align: left;
    opacity: 1
}

.results .result[s] {
    opacity: .6
}

.results .result:not([s])~.result:not([s]) {
    opacity: .2
}

.results .result:before {
    content: "";
    background-image: url(https://icons.getbootstrap.com/assets/icons/square.svg);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    margin-right: .5em;
    width: 1em;
    height: 1em;
    vertical-align: -.1em
}

.results .result[s=c]:before {
    background-image: url(https://icons.getbootstrap.com/assets/icons/x-square-fill.svg)
}

.results .result[s=b]:before {
    background-image: url(https://icons.getbootstrap.com/assets/icons/check-square-fill.svg)
}

.results .result[s=_]:before {
    background-image: url(https://icons.getbootstrap.com/assets/icons/slash-square.svg)
}

.lds-ring div {
    border-color: var(--brand-color) transparent transparent transparent
}

button[name=startGeniusMode][disabled]:before {
    content: "\1f512  "
}

button[disabled] {
    opacity: .25
}

.line-cd1 {
    animation: line-cd1-spin 1s infinite linear;
    -webkit-animation: line-cd1-spin 1s infinite linear;
    -moz-animation: line-cd1-spin 1s infinite linear
}

@keyframes line-cd1-spin {
    to {
        transform: rotate(360deg)
    }
}

.shareImage {
    width: 61vw;
    max-width: 330px
}

.shareImageSmall {
    margin-top: 10px;
    width: 30vw
}

@media (max-width: 660px) {
    audio-ext {
        height:100vw;
        max-width: 200px;
        max-height: 200px;
        aspect-ratio: 1 / 1
    }
}