/**
 * @name bg-wordle
 * @description Play BG Wordle with unlimited 5-letter words! Can you guess the hidden word in 6 tries?
 *
 * @version 1.0.0
 * @author Deyan 'stambolievv' Stamboliev
 * @license Apache-2.0
 */
:root{--word-length: 5;--max-guesses: 6;--tile-size: clamp( clamp(18px, 5vw, 44px), min( calc((100vw - 2em) / var(--word-length)), calc((100dvh - 6em - 5vh - min(40vmin + 32px, 196px)) / var(--max-guesses)) ), 110px );--font-size-ui: clamp(15px, 1em, 20px);--gap: clamp(3px, .4vh, 6px);--radius-sm: .4em;--radius-md: .65em;--radius-lg: .85em;--radius-pill: 100px;--clr-background: hsl(228, 20%, 8%);--clr-surface: hsl(228, 18%, 12%);--clr-border: hsl(228, 14%, 22%);--clr-keyboard: hsl(228, 12%, 48%);--clr-keyboard-keys: hsl(0, 0%, 96%);--clr-keyboard-hover: hsl(228, 12%, 48%);--clr-tile-text: hsl(0, 0%, 96%);--clr-correct-spot: hsl(142, 52%, 50%);--clr-wrong-spot: hsl(50, 72%, 54%);--clr-missing-spot: hsl(228, 10%, 26%);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);--shadow-md: 0 4px 16px rgba(0, 0, 0, .45);--shadow-lg: 0 16px 48px rgba(0, 0, 0, .6)}*,*:after,*:before{margin:0;padding:0;box-sizing:border-box;font-family:Rubik,Arial,sans-serif;-webkit-user-select:none;user-select:none}html{color-scheme:only dark;font-size:clamp(8px,min(2.877vw,2.326vh),24px)}html[data-theme=light]{color-scheme:only light;--clr-background: hsl(220, 20%, 97%);--clr-surface: hsl(0, 0%, 100%);--clr-border: hsl(220, 15%, 83%);--clr-keyboard: hsl(220, 12%, 82%);--clr-keyboard-keys: hsl(228, 25%, 16%);--clr-keyboard-hover: hsl(220, 12%, 70%);--clr-tile-text: hsl(228, 20%, 12%);--clr-correct-spot: hsl(142, 50%, 42%);--clr-wrong-spot: hsl(50, 69%, 48%);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1);--shadow-md: 0 4px 16px rgba(0, 0, 0, .12);--shadow-lg: 0 16px 48px rgba(0, 0, 0, .15)}body{display:flex;flex-direction:column;height:100vh;height:100dvh;padding:clamp(4px,.8vh,10px);background-color:var(--clr-background);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-overflow-scrolling:touch;text-rendering:optimizeLegibility;text-decoration-skip:objects}button{touch-action:manipulation}#main{display:flex;flex-direction:column;flex-grow:1;min-height:0}:root{--clr-score-text: hsl(0, 0%, 80%)}html[data-theme=light]{--clr-score-text: hsl(228, 20%, 30%)}#header{display:flex;justify-content:space-between;align-items:center;padding-inline:1em;padding-bottom:clamp(4px,.6vh,10px);border-bottom:1px solid var(--clr-border)}#title{font-size:2em;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--clr-tile-text)}.icon-btn{display:flex;justify-content:center;align-items:center;width:2.5em;height:2.5em;background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;color:var(--clr-tile-text);opacity:.75;transition:background-color .2s ease,opacity .2s ease}.icon-btn:hover,.icon-btn:focus-visible{background-color:var(--clr-border);opacity:1}.icon-btn:focus-visible{outline:2px solid var(--clr-correct-spot);outline-offset:2px}.icon-btn>svg{width:2em;height:2em}#score-text{display:flex;justify-content:space-around;align-items:center;padding-block:clamp(6px,1vh,16px);font-size:var(--font-size-ui);color:var(--clr-score-text);font-weight:600;text-transform:uppercase;letter-spacing:.06em}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000000c7;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:10;display:flex;justify-content:center;align-items:flex-start;padding-top:5vh;animation:modal-fade .2s ease}.modal-overlay[hidden]{display:none}.modal{background-color:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:min(480px,calc(100vw - 2rem));max-height:88vh;overflow-y:auto;color:var(--clr-tile-text);font-size:var(--font-size-ui);animation:modal-enter .22s ease}.modal-header{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:1.1em 1.25em;background-color:var(--clr-surface);border-bottom:1px solid var(--clr-border);border-radius:var(--radius-lg) var(--radius-lg) 0 0}.modal-header h2{font-size:1em;font-weight:700;text-transform:uppercase;letter-spacing:.18em}.modal-close{display:flex;justify-content:center;align-items:center;width:2em;height:2em;background:none;border:none;font-size:1em;line-height:1;cursor:pointer;color:var(--clr-tile-text);border-radius:var(--radius-sm);opacity:.55;transition:opacity .15s ease,background-color .15s ease}.modal-close:hover,.modal-close:focus-visible{background-color:var(--clr-border);opacity:1}.modal-body{padding:1.25em 1.5em;display:flex;flex-direction:column;gap:.9em;font-size:1em;line-height:1.1}#settings-modal .modal-body{font-size:1.1em}.modal-body hr{border:none;border-top:1px solid var(--clr-border)}.modal-body ul{padding-left:1.25em;display:flex;flex-direction:column;gap:.4em;list-style:disc}.example-row{display:flex;gap:.3em;margin-block:.25em}.example-tile{display:flex;justify-content:center;align-items:center;width:2.8em;height:2.8em;font-size:1.1em;font-weight:700;border:.05em solid var(--clr-border);border-radius:.12em;color:var(--clr-tile-text)}.example-tile.correct-spot{background-color:var(--clr-correct-spot);border-color:var(--clr-correct-spot);color:#fff}.example-tile.wrong-spot{background-color:var(--clr-wrong-spot);border-color:var(--clr-wrong-spot);color:#fff}.example-tile.missing-spot{background-color:var(--clr-missing-spot);border-color:var(--clr-missing-spot);color:#fff}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:.9em 0;border-bottom:1px solid var(--clr-border)}.setting-row:last-child{border-bottom:none}.setting-label{display:flex;flex-direction:column;gap:.3em}.setting-label strong{text-transform:uppercase;font-size:.9em;letter-spacing:.05em;font-weight:700}.setting-label span{font-size:.8em;opacity:.5;line-height:1.4}.setting-row--column{flex-direction:column;align-items:stretch;gap:.75em}.word-length-picker{display:flex;gap:.4em}.word-length-btn{flex:1;padding:.55em 0;background-color:var(--clr-keyboard);color:var(--clr-keyboard-keys);border:2px solid transparent;border-radius:var(--radius-sm);cursor:pointer;font-size:1em;font-weight:700;transition:background-color .15s ease,border-color .15s ease,transform .1s ease}.word-length-btn:hover{background-color:var(--clr-keyboard-hover)}.word-length-btn:active{transform:scale(.95)}.word-length-btn.active{background-color:var(--clr-correct-spot);border-color:var(--clr-correct-spot);color:#fff}.setting-btn{flex-shrink:0;padding:.55em 1.1em;background-color:var(--clr-keyboard);color:var(--clr-keyboard-keys);border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:inherit;text-transform:uppercase;font-weight:700;letter-spacing:.03em;transition:background-color .15s ease,transform .1s ease}.setting-btn:hover{background-color:var(--clr-keyboard-hover)}.setting-btn:active{transform:scale(.95)}.toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer;flex-shrink:0}.toggle input{position:absolute;opacity:0;width:0;height:0}.toggle-track{width:2.8em;height:1.5em;background-color:var(--clr-border);border-radius:1em;display:flex;align-items:center;padding:.17em;transition:background-color .22s ease}.toggle-thumb{width:1.15em;height:1.15em;background-color:#fff;border-radius:50%;transition:transform .22s ease;flex-shrink:0;box-shadow:0 1px 4px #00000059}.toggle input:checked+.toggle-track{background-color:var(--clr-correct-spot)}.toggle input:checked+.toggle-track .toggle-thumb{transform:translate(1.3em)}.toggle:focus-within .toggle-track{outline:2px solid var(--clr-correct-spot);outline-offset:2px}.toggle input:disabled+.toggle-track{opacity:.4;cursor:not-allowed}.toggle:has(input:disabled){cursor:not-allowed}@keyframes modal-fade{0%{opacity:0}to{opacity:1}}@keyframes modal-enter{0%{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}:root{--clr-active-spot: hsl(228, 20%, 52%)}html[data-theme=light]{--clr-active-spot: hsl(220, 20%, 55%)}#guess-grid{flex-grow:1;min-height:0;display:grid;justify-content:center;align-content:center;grid-template-columns:repeat(var(--word-length, 5),var(--tile-size));grid-template-rows:repeat(var(--max-guesses, 6),var(--tile-size));gap:var(--gap)}.tile{display:flex;justify-content:center;align-items:center;font-size:calc(var(--tile-size) * .5);font-weight:700;text-transform:uppercase;color:var(--clr-tile-text);border:.05em solid var(--clr-border);border-radius:.12em;transition:transform .25s linear}.tile[data-state=active-spot]{border-color:var(--clr-active-spot)}.tile[data-state=correct-spot]{border:none;background-color:var(--clr-correct-spot);color:#fff}.tile[data-state=wrong-spot]{border:none;background-color:var(--clr-wrong-spot);color:#fff}.tile[data-state=missing-spot]{border:none;background-color:var(--clr-missing-spot);color:#fff}.tile.shake{animation:shake .25s ease-in-out}.tile.dance{animation:dance .5s ease-in-out}.tile.flip{transform:rotateX(90deg)}@keyframes shake{10%{transform:translate(-5%)}30%{transform:translate(5%)}50%{transform:translate(-7.5%)}70%{transform:translate(7.5%)}90%{transform:translate(-5%)}to{transform:translate(0)}}@keyframes dance{20%{transform:translateY(-50%)}40%{transform:translateY(5%)}60%{transform:translateY(-25%)}80%{transform:translateY(2.5%)}90%{transform:translateY(-5%)}to{transform:translateY(0)}}#keyboard{display:grid;flex-shrink:0;grid-template-columns:repeat(22,minmax(auto,1.25em));grid-auto-rows:clamp(34px,13vmin,54px);gap:calc(var(--gap) * 1.5);justify-content:center;padding-block:clamp(6px,1.2vh,16px)}.key{display:flex;justify-content:center;align-items:center;grid-column:span 2;font-size:clamp(14px,2.2vh,1.2em);font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--clr-keyboard-keys);fill:var(--clr-keyboard-keys);background-color:var(--clr-keyboard);border:none;border-radius:var(--radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:color-mix(in srgb,currentColor 20%,transparent);box-shadow:var(--shadow-sm);transition:background-color .15s ease,box-shadow .15s ease}.key[data-key=Enter],.key[data-key=Delete]{grid-column:span 3}.key>svg{width:1.75em;height:1.75em}.key:hover,.key:focus-visible{background-color:var(--clr-keyboard-hover)}.key:focus-visible{outline:2px solid var(--clr-correct-spot);outline-offset:2px}.key:active{animation:key-pop .2s ease-out}.key.missing-spot{background-color:var(--clr-missing-spot);color:#f7f7f7;fill:#f7f7f7}.key.wrong-spot{background-color:var(--clr-wrong-spot);color:#fff;fill:#fff}.key.correct-spot{background-color:var(--clr-correct-spot);color:#fff;fill:#fff}@keyframes key-pop{0%{transform:scale(1)}35%{transform:scale(1.12)}to{transform:scale(1)}}@media(hover:none){.key:not(.missing-spot):not(.wrong-spot):not(.correct-spot):hover{background-color:var(--clr-keyboard)}}:root{--clr-alert-bg: hsl(228, 20%, 15%);--clr-alert-text: hsl(0, 0%, 97%)}html[data-theme=light]{--clr-alert-bg: hsl(228, 15%, 90%);--clr-alert-text: hsl(228, 20%, 12%)}#notification{display:flex;flex-direction:column;align-items:center;position:fixed;top:10vh;left:50%;z-index:1;transform:translate(-50%);width:calc(100vw - 2rem)}.alert{padding:.7em 1.4em;margin-bottom:.4em;background-color:var(--clr-alert-bg);color:var(--clr-alert-text);opacity:1;font-size:var(--font-size-ui);font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-align:center;white-space:normal;border-radius:var(--radius-pill);box-shadow:var(--shadow-md);pointer-events:none;transition:opacity .5s ease-in-out}.alert:last-child{margin-bottom:0}.alert.hide{opacity:0}.alert.retryable{pointer-events:auto;cursor:pointer}.alert.retryable:hover{opacity:.85}.alert .alert-word{color:var(--clr-wrong-spot)}