:root {
    --fg-light: 85%;
    --bg-light: 20%;
    --dir-light: 1;
}

@media (prefers-color-scheme: light) {
    :root {
        --color-scheme: light;
        --fg-light: 40%;
        --bg-light: 89%;
        --dir-light: -1;
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --color-scheme: dark;
    }
}

body.light {
    --color-scheme: light;
    --fg-light: 40%;
    --bg-light: 89%;
    --dir-light: -1;
    --button-weight: 700;

    --bg-color: oklch(90% 0.00 120);
    --fg-color: oklch(30% 0.00 0);
    --head-bg-color: oklch(80% 0.00 0);
    --head-fg-color: oklch(20% 0.00 0);
    --btn-bg-color: oklch(55% 0.00 0);
    --btn-fg-color: oklch(95% 0.00 0);
    --btn-bg-hover: oklch(25% 0.00 0);
    --btn-bg-active: oklch(33% 0.08 22);
    --btn-bg-focus: oklch(63% 0.11 301);
    --kbd-bg-color: oklch(82% 0.07 291);
    --key-bg-color: oklch(98% 0.00 0);
    --focus-color: oklch(.88 .1 200);
    --date-bg-color: oklch(0 0 0 / .8);
    --date-fg-color: oklch(.95 0 0);

    --alpha-color-a: oklch(0.55 0.11 226);
    --alpha-color-b: oklch(0.62 0.27 311);
    --alpha-color-c: oklch(0.5 0.13 111);
    --alpha-color-d: oklch(0.69 0.31 331.84);
    --alpha-color-e: oklch(0.57 0.26 331);
    --alpha-color-f: oklch(0.57 0.23 26);
    --alpha-color-g: oklch(0.6 0.12 78.06);
    --alpha-color-h: oklch(0.6 0.24 29.46);
    --alpha-color-i: oklch(0.6 0.13 100.66);
    --alpha-color-j: oklch(0.51 0.24 321.06);
    --alpha-color-k: oklch(0.6 0.11 181);
    --alpha-color-l: oklch(0.62 0.25 26);
    --alpha-color-m: oklch(0.69 0.17 156);
    --alpha-color-n: oklch(0.53 0.29 298);
    --alpha-color-o: oklch(0.54 0.11 101.16);
    --alpha-color-p: oklch(0.64 0.16 52);
    --alpha-color-q: oklch(0.55 0.12 70);
    --alpha-color-r: oklch(0.55 0.16 132.72);
    --alpha-color-s: oklch(0.52 0.11 108.75);
    --alpha-color-t: oklch(0.61 0.18 149.3);
    --alpha-color-u: oklch(0.6 0.24 27);
    --alpha-color-v: oklch(0.54 0.24 266);
    --alpha-color-w: oklch(0.6 0.1 203.49);
    --alpha-color-x: oklch(0.69 0.31 331.12);
    --alpha-color-y: oklch(0.56 0.28 313);
    --alpha-color-z: oklch(0.58 0.24 29.7);
    --alpha-color-4: oklch(.24 0 0);
}
body.dark {
    --color-scheme: dark;
    --fg-light: 85%;
    --bg-light: 20%;
    --dir-light: 1;

    --bg-color: oklch(18% 0.00 120);
    --fg-color: oklch(95% 0.00 0);
    --head-bg-color: oklch(32% 0.00 0);
    --head-fg-color: oklch(85% 0.00 0);
    --btn-bg-color: oklch(55% 0.00 0);
    --btn-fg-color: oklch(95% 0.00 0);
    --btn-bg-hover: oklch(25% 0.00 0);
    --btn-bg-active: oklch(33% 0.08 22);
    --btn-bg-focus: oklch(63% 0.11 301);
    --kbd-bg-color: oklch(23% 0.11 301);
    --key-bg-color: oklch(0% 0.00 0);
    --focus-color: oklch(.7 .15 200);
    --date-bg-color: oklch(1 0 0 / .8);
    --date-fg-color: oklch(.05 0 0);

    --alpha-color-a: oklch(0.91 0.11 249.24);
    --alpha-color-b: oklch(0.91 0.07 315.7);
    --alpha-color-c: oklch(0.95 0.15 125.42);
    --alpha-color-d: oklch(0.69 0.31 331.84);
    --alpha-color-e: oklch(0.79 0.14 351);
    --alpha-color-f: oklch(0.63 0.26 26);
    --alpha-color-g: oklch(0.94 0.12 97.06);
    --alpha-color-h: oklch(0.63 0.15 26.46);
    --alpha-color-i: oklch(0.95 0.13 100.66);
    --alpha-color-j: oklch(0.68 0.13 323.06);
    --alpha-color-k: oklch(0.74 0.13 181);
    --alpha-color-l: oklch(0.75 0.14 19.32);
    --alpha-color-m: oklch(0.91 0.1 159.78);
    --alpha-color-n: oklch(0.76 0.16 307.86);
    --alpha-color-o: oklch(0.68 0.14 101.16);
    --alpha-color-p: oklch(0.84 0.10 55.74);
    --alpha-color-q: oklch(0.82 0.17 84.87);
    --alpha-color-r: oklch(0.85 0.24 132.72);
    --alpha-color-s: oklch(0.92 0.2 108.75);
    --alpha-color-t: oklch(0.88 0.25 149.3);
    --alpha-color-u: oklch(0.76 0.14 21.05);
    --alpha-color-v: oklch(0.73 0.26 271.77);
    --alpha-color-w: oklch(0.83 0.14 203.49);
    --alpha-color-x: oklch(0.69 0.31 331.12);
    --alpha-color-y: oklch(0.63 0.29 314.97);
    --alpha-color-z: oklch(0.67 0.21 27.82);
    --alpha-color-4: oklch(1 0 0);
}

body {
    color-scheme: var(--color-scheme, dark);

    --key-border-color: oklch(calc(var(--fg-light) + var(--dir-light) * 10%) 0.00 0);
    --grid-border-win: oklch(calc(var(--fg-light) - var(--dir-light) * 6%) 0.27 142);
    --grid-bg-sel-win: oklch(calc(var(--bg-light) + var(--dir-light) * 16%) 0.10 249);
    --grid-bg-nonword: oklch(calc(var(--bg-light) + var(--dir-light) * 5%) 0.1 30);
    --grid-key-focus: oklch(calc(var(--fg-light) - var(--dir-light) * 23%) 23 296 / 0.75);
    --grid-key-bg: oklch(calc(var(--fg-light) - var(--dir-light) * 23%) 23 296 / 0);
    --replay-bg-color: oklch(calc(var(--bg-light) + var(--dir-light) * 29%) 0.11 148);
    --replay-bg-hover: oklch(calc(var(--bg-light) + var(--dir-light) * 38%) 0.12 144);
    --replay-bg-active: oklch(calc(var(--bg-light) + var(--dir-light) * 17%) 0.09 157);
    --retry-bg-color: oklch(calc(var(--bg-light) + var(--dir-light) * 34%) .15 48);
    --retry-bg-hover: oklch(calc(var(--bg-light) + var(--dir-light) * 43%) .16 52);
    --retry-bg-active: oklch(calc(var(--bg-light) + var(--dir-light) * 16%) .1 46);
    --loading-bg-color: oklch(var(--bg-light) 0 0);
    --btn-bg-disabled: oklch(.8 0 0);
    --btn-padding: .5em 1em;

    --mandelics-install-bg: #f7fcff;

    --link-color: oklch(calc(var(--fg-light) - var(--dir-light) * 16%) .11 194);
    --link-color-active: oklch(calc(var(--fg-light) - var(--dir-light) * 23%) .09 230);
    --link-color-hover: oklch(calc(var(--fg-light) - var(--dir-light) * 6%) .11 194);
    --link-color-visited: oklch(calc(var(--fg-light) - var(--dir-light) * 16%) .05 194);

    --puzzle-font-size: min(3.5vw, 6vh);
}
@media (max-aspect-ratio: 1/1) {
    body {
        --puzzle-font-size: min(6vw, 3.5vh);
    }
}

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

button {
    touch-action: manipulation;
    user-select: none;
}

body {
    margin: 0;
    padding: 0;
    background: var(--bg-color);
    color: var(--fg-color);
}

a { color: var(--link-color); }
a:visited { color: var(--link-color-visited); }
a:active { color: var(--link-color-active); }
a:hover { color: var(--link-color-hover); }

button {
    display: grid;
    align-items: center;
    justify-content: center;
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

.w4w-main,
.w4w-search-main,
.w4w-lex-main {
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    overflow: hidden;
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

.w4w-head {
    padding-right: .1em;
    gap: .25em;
    background: var(--head-bg-color);
    color: var(--head-fg-color);
}
.w4w-head > h1 {
    overflow: hidden;
    white-space: nowrap;
}
.w4w-head button {
    font-size: 161%;
    height: 1.5em;
}
.w4w-head button,
.solutions-hide {
    border: 1px solid var(--btn-bg-focus);
    color: var(--btn-fg-color);
    background: var(--btn-bg-color);
}
.w4w-head button:hover:not([disabled]),
.solutions-hide :hover:not([disabled]) {
    background: var(--btn-bg-hover)
}
.w4w-head button:active,
.solutions-hide :active {
    background: var(--btn-bg-active)
}
.w4w-head button:focus,
.solutions-hide :focus {
    border-color: var(--btn-bg-focus)
}
.w4w-head button[disabled],
.solutions-hide [disabled] {
    background: var(--btn-bg-disabled)
}

.w4w-main > .w4w-body,
.solutions-list {
    font-size: var(--puzzle-font-size);
}
.w4w-body {
    display: flex;
    flex-flow: row nowrap;
}
@media (max-aspect-ratio: 1/1) {
    .w4w-body {
        flex-flow: column nowrap;
    }
}

.w4w-grid-btn,
.w4w-key,
.solution-letters > span {
    appearance: none;
    font-size: inherit;
    aspect-ratio: 1 / 1;
    color: var(--fg-color);
    background: var(--key-bg-color);
    border: .1em solid var(--key-border-color);
    outline: none;
    font-weight: var(--button-weight);
}

.w4w-grid-btn,
.solution-letters > span {
    width: 2.5em;
    height: 2.5em;
}

.w4w-grid,
.w4w-keys {
    max-height: 75vh;
    position: relative;
}
.w4w-gridbox {
    flex: 1 1 48%;
    padding: .5em;
    display: flex;
    flex-flow: row nowrap;
    gap: 1em;
}
.w4w-grid-controls {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    margin-right: -3em;
    z-index: 2;
}
.w4w-grid-controls > button {
    font-size: var(--puzzle-font-size);
    padding: .25em;
}
.w4w-grid-controls > button.s-active {
    background: var(--kbd-bg-color);
}
.w4w-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    border: .1em solid var(--key-border-color);
    align-self: center;
}
.w4w-winning .w4w-grid {
    border-color: var(--grid-border-win);
}
.w4w-winning .w4w-grid button {
    border-color: unset;
}

.w4w-grid-btn.nonword {
    background: var(--grid-bg-nonword);
}
.w4w-grid-btn.w4w-gridsel,
.w4w-grid-btn.w4w-gridsel.nonword,
.w4w-winning .w4w-grid-btn.w4w-gridsel  {
    background: radial-gradient(circle at 50%, var(--grid-key-bg), var(--grid-key-bg) 35%, var(--grid-key-focus) 50%, var(--grid-key-bg) 65%);
}

.w4w-keybox {
    flex: 1 1 52%;
    padding: .5em;
}
.w4w-keys {
    width: 12em;
    height: 12em;
    border-radius: 50%;
    background: var(--kbd-bg-color);
    overflow: visible;
    position: relative;
}
.w4w-key {
    position: absolute;
    border-radius: 50%;
    width: 20.5%;
    height: 20.5%;
}

button.w4w-wins {
    position: absolute;
    top: .5rem;
    left: .5rem;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    padding: 1em;
    font-weight: bold;
    font-size: 62%;
    color: var(--btn-fg-color);
    border: .25rem solid oklch(.79 .05 195);
}

.w4w-playagain,
.w4w-samegame
 {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    font-size: 200%;
    letter-spacing: .16em;
    color: var(--key-border-color);
    width: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    opacity: 0.97;
    z-index: 1;
}
.w4w-playagain,
.w4w-samegame,
.w4w-wins {
    transition: all .31s ease-in-out;
    background: var(--replay-bg-color);
}
.w4w-playagain:hover,
.w4w-samegame:hover,
.w4w-wins:hover {
    background: var(--replay-bg-hover);
}
.w4w-playagain:active,
.w4w-samegame:active,
.w4w-wins:active {
    background: var(--replay-bg-active);
}
.w4w-winning .w4w-playagain {
    width: 6em;
    padding: 1em;
}
.w4w-won:not(.w4w-winning) .w4w-playagain *,
.w4w-winning:not(.w4w-won) .w4w-playagain * {
    display: none;
}

.w4w-samegame-block {
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    transition: opacity .31s;
    opacity: 99%;
    background-color: var(--bg-color);
}
.w4w-samegame {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 1em;
    font-size: 161%;
    background: var(--retry-bg-color);
}
.w4w-samegame:hover {
    background: var(--retry-bg-hover);
}
.w4w-samegame:active {
    background: var(--retry-bg-active);
}
.w4w-body:not(.w4w-won) .w4w-samegame-block {
    opacity: 1%;
}
.w4w-body:not(.w4w-won) .w4w-samegame {
    width: 0;
    height: 0;
    padding: 0;
}
.w4w-samegame-icon {
    font-size: 133%;
    transform: translateY(-.12em);
}

.w4w-discovered {
    text-shadow: 0 0 .12em;
}

.w4w-multi-2 {
    --alpha-color-sep: var(--alpha-color-b);
}

.w4w-multi-3 {
    --alpha-color-sep: var(--alpha-color-p);
}

.w4w-multi-4 {
    --alpha-color-sep: var(--alpha-color-r);
}

.w4w-multi-5 {
    --alpha-color-sep: var(--alpha-color-a);
}

.w4w-limited > span {
    font-size: 62%;
}

.show-credits {
    position: fixed;
    bottom: .5em;
    left: .5em;
}
.creditblock,
.solutionsblock {
    z-index: 1000;
    background: var(--bg-color);
    opacity: .98;
}
.creditblock {
    overflow-x: hidden;
    padding: 1rem 0;
}
@media (max-width: 512px) {
    .creditblock {
        padding: 0;
    }
}
.logo {
    aspect-ratio:1/1;
    max-width: 75svh;
    max-height: 100vw;
}
.solutionsblock {
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.solutions {
    margin: 1rem 0;
    display: flex;
    flex-flow: column nowrap;
}

.solutions > h2 {
    text-align: center;
}

.solutions-list {
    flex: 1 1 1em;
    display: flex;
    flex-flow: column nowrap;
    gap: .5em;
    overflow-y: auto;
}

.solutions-list > h2 {
    text-align: center;
}

.solutions-list > a {
    text-decoration: none;
    position: relative;
}

.solution-letters {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    border: .5rem solid transparent;
}

.solution-letters.selected {
    border-color: var(--focus-color);
}

.solution-letters > span {
    display: grid;
    align-items: center;
    justify-content: center;
    justify-items: center;
}

.solution-date {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    min-width: 4.1rem;
    font-size: max(7pt, 25%);
    padding: .1em;
    background: var(--date-bg-color);
    color: var(--date-fg-color);    
}

.solution-ctrls {
    margin-top: .5em;
    width: 100%;
    --btn-padding: .25em 1em;
}

.solutions-hide {
    position: absolute;
    top: .5rem;
    left: .25rem;
    padding: .5em .25em;
}

.credits {
  width: 35rem;
  max-width: 90vw;
  margin: 2rem;
}

.credits h2 {
    font-size: 2rem;
    font-variant: small-caps;
    text-align: center;
}

.credits p {
    margin: 1rem 1.5rem;
}

.credits .ctrl {
    padding: .5em
}
.credits .ctrl select,
.credits .ctrl input {
    padding: .5em
}

.credit {
    gap: 1em;
    margin-bottom: 1rem;
}
.credit > * {
    flex: 1 1 50%;
    max-width: 50%;
}
@media (max-width: 30rem) {
    .credits {
        margin: 1rem 0;
    }
    .credit {
        height: 3rem;
    }
    .credit > * {
        white-space: nowrap;
        overflow: visible;
    }
    .credit-role {
        transform: translateX(3vh);
    }
    .credit-due {
        align-self: flex-end;
        transform: translateX(-10vw);
    }
}
@media (max-width: 25rem) {
    .credit-role {
        transform: translateX(6vh);
    }
    .credit-due {
        transform: translateX(-20vw);
    }
}
@media (max-width: 20rem) {
    .credit-role {
        transform: translateX(9vh);
    }
    .credit-due {
        transform: translateX(-30vw);
    }
}

.credit-role {
    font-size: .9rem;
}

.credit-due {
    font-variant: small-caps;
    font-size: 1.44rem;
}

.loading-block {
    z-index: 999;
    background: var(--loading-bg-color);
    opacity: .72;
    animation: 1.8s infinite alternate throb;
}

@keyframes throb {
    from {
        opacity: .72;
    }
    to {
        opacity: .92;
    }
}

.flexr {
    display: flex;
    flex-flow: row nowrap;
}
.flexrw {
    display: flex;
    flex-flow: row wrap;
}
.flexc {
    display: flex;
    flex-flow: column nowrap;
}
.js-around {
    justify-content: space-around;
}
.js-between {
    justify-content: space-between;
}
.js-start {
    justify-content: flex-start;
}
.js-center {
    justify-content: center;
}
.js-end {
    justify-content: flex-end;
}
.al-stretch {
    align-items: stretch;
}
.al-baseline {
    align-items: baseline;
}
.al-start {
    align-items: start;
}
.al-center {
    align-items: center;
}
.al-end {
    align-items: flex-end;
}
.flex {
    flex: 1 1 auto;
}

.gridc {
    display: grid;
    align-items: center;
    justify-content: center;
    justify-items: center;
}

.positioned {
    position: relative;
}
.mg0 {
    margin: 0px;
}
.pad0 {
    padding: 0px;
}
.pad1 {
    padding: .1em;
}

.nosel {
    user-select:none;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

.fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.start-hidden:not(.hidden) {
    display: inherit;
}
.hidden {
    display: none;
}