*,:before,:after{box-sizing:border-box}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul[role=list],ol[role=list]{list-style:none;margin:0;padding:0}
html:focus-within{scroll-behavior:smooth}
html,body{height:100%}
body{text-rendering:optimizeSpeed;line-height:1.5}
a:not([class]){text-decoration-skip-ink:auto}
img,picture{max-width:100%;display:block}
svg{display:block}
input,button,textarea,select{font:inherit;color:inherit;cursor:pointer}
@media (prefers-reduced-motion: reduce) {
html:focus-within{scroll-behavior:auto}
*,:before,:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
:root{--accent:hsl(142,76%,36%);--accent-hover:hsl(142,71%,45%);--gray-200:hsl(220,13%,91%);--gray-hover:hsl(220,13%,94%);--font-weight-light:300;--font-weight-heavy:500}
body{font-family:Outfit,sans-serif;font-weight:var(--font-weight-light);overflow:hidden;position:absolute;display:flex;justify-content:center;align-items:center;inset:0}
.visually-hidden{border:0;clip:rect(0 0 0 0);height:auto;margin:0;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;display:none}
hr{border:none;height:2px;color:var(--gray-200);background-color:var(--gray-200);margin-bottom:15px}
a{color:#000}
.dark a{color:#fff}
#app{width:clamp(500px,30%,500px);min-height:700px;height:100%;display:flex;flex-direction:column;position:relative}
.dark{background-color:#0f1729;color:#fff}
.dark #modal{background-color:#0f1729}
.dark select{background-color:#1d283a}
.dark .blank-guess-row,.dark .play-again-button,.dark .skip-button{background-color:#48566a}
.dark .play-again-button:hover,.dark .play-again-button:focus-visible,.dark .skip-button:hover,.dark .skip-button:focus-visible{color:#fff;background-color:#5b6d86}
.dark .country{filter:invert(1)}
.dark input{background-color:#1d283a;border:2px solid hsl(0,0%,100%)}
.dark .autocomplete .suggestions{background-color:#1d283a;padding:0}
.dark .autocomplete .suggestions>li{background-color:transparent;border:2px solid hsl(0,0%,100%);margin-bottom:0}
.dark .alert{background-color:#1d283a}
#app svg{width:auto;height:100%}
#app header{display:flex;width:100%;justify-content:space-between;align-items:center;margin-top:10px;border-bottom:2px solid var(--gray-200);margin-bottom:25px}
#app header button{border:none;outline:none;background-color:transparent;height:20px;padding:0;display:flex;transition:transform 75ms ease-in-out}
#app header button:hover,#app header button:focus-visible{transform:scale(1.15)}
#app header>div{display:flex}
#app header>div:first-of-type{margin-left:10px}
#app header>div:last-of-type{margin-right:10px}
#app header>div :first-child{margin-right:5px}
#app header img{height:20px;cursor:pointer}
#app header h1{text-transform:uppercase;font-size:2.25rem;letter-spacing:2px;margin-bottom:-15px;margin-top:10px}
#app header .logo{display:flex;flex-direction:column;align-items:center}
#app header h2{text-transform:uppercase;font-size:1.5rem;letter-spacing:1px}
#app header .logo>span{text-transform:uppercase;font-weight:700;letter-spacing:1px}
.accent{color:var(--accent);margin:0!important}
hr~hr{margin-top:15px}
.alert-container{position:fixed;top:10vh;left:50vw;transform:translate(-50%);z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center}
.alert{min-width:200px;pointer-events:none;user-select:none;background-color:#fff;box-shadow:0 1px 10px #0000001a,0 2px 15px #0000000d;padding:1em 2em;border-radius:.25em;opacity:1;transition:opacity 625ms ease-in-out;margin-bottom:.5em;display:flex}
.alert svg{height:24px!important;aspect-ratio:1;margin-right:20px}
.alert:last-child{margin-bottom:0}
.alert.hide{opacity:0}
#modal{width:100%;height:100%;position:absolute;top:0;left:0;background-color:#fff;z-index:100}
#modal header{position:relative;display:flex;justify-content:center;align-items:center;margin:40px 0 10px!important;padding-block:5px}
#modal .close-btn{position:absolute;right:0;background-color:transparent;border:none;outline:none;display:flex;justify-content:center;align-items:center;width:15px;height:15px;padding:0}
#modal .close-btn img{width:100%;height:100%}
#modal .content>p{margin-bottom:10px;font-size:.9em}
#modal .content>p img{height:.9em;display:inline;margin-left:2px}
#modal .guess-row:first-of-type{margin-top:10px}
#modal .guess-row{margin-bottom:10px}
#modal select{color:inherit;font-family:inherit;font-size:100%;line-height:inherit;margin:0 10px 0 0;padding:0;border:0 solid #e5e7eb;height:2rem;width:65px}
#modal select:first-of-type{margin-bottom:10px}
#modal .difficulty{margin-top:30px}
#modal .difficulty h3{margin-bottom:10px}
#modal .difficulty>div{margin-bottom:5px}
#modal .difficulty>div label{margin-left:5px}
.country{width:100%;height:min(25vh,225px);display:flex;justify-content:center;align-items:center;margin-bottom:25px}
.country img{max-height:100%}
.guesses{flex-grow:1;display:flex;flex-direction:column;align-items:center}
.guess-grid{display:flex;flex-direction:column;gap:.25em;width:100%;margin-bottom:.5em}
div.blank-guess-row{background-color:var(--gray-200);height:30px;padding:1em;width:100%;border-radius:5px}
div.guess-row.animated{grid-template-columns:6fr 1fr}
div.guess-row.animated>:first-child{display:flex;align-items:center;justify-content:space-evenly}
div.guess-row.animated .square{-webkit-animation:reveal .2s forwards;animation:reveal .2s forwards;opacity:0;user-select:none}
div.guess-row.animated>:first-child img{height:25px}
div.guess-row{background-color:transparent;min-height:32px;width:100%;border-radius:5px;display:grid;grid-template-columns:3fr 2fr 1fr 1fr;grid-template-rows:1fr;gap:5px}
div.guess-row img{height:15px}
div.guess-row>div{border:2px solid var(--gray-200);height:100%;border-radius:5px;text-align:center;display:flex;justify-content:center;align-items:center}
div.guess-row>div:first-of-type{text-transform:uppercase;overflow:hidden}
div.guess-row>div:first-of-type p{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.make-guess{width:100%;display:flex;flex-direction:column;align-items:center}
.autocomplete{position:relative;width:100%}
.autocomplete input{width:inherit;font-weight:300;padding:.3em;border:2px solid var(--gray-200);border-radius:5px;margin-bottom:.25em;cursor:text}
.autocomplete .suggestions{position:absolute;bottom:100%;max-height:25vh;overflow-y:auto;background-color:var(--gray-200);padding-top:10px;padding-inline:5px;width:inherit;margin:0}
.autocomplete .suggestions>li{background-color:#fff;margin-bottom:.25em;font-weight:300;font-size:1rem;text-transform:uppercase;cursor:pointer}
.guess-country{width:100%;display:flex;align-items:center;justify-content:center;border:2px solid var(--gray-200);outline:none;background-color:transparent;padding:.3em;border-radius:5px;font-weight:700}
.guess-country:hover{background-color:#e5e7eb40}
.guess-country:focus-visible{border:2px solid #000}
.guess-country img{max-height:1rem;margin-right:5px}
.skip-button{text-transform:uppercase;width:100%;display:flex;align-items:center;justify-content:center;border:none;outline:none;color:unset;background-color:var(--gray-200);margin-top:.5em;font-weight:700;padding:.3em;border-radius:5px;height:32px}
.share-button,.play-again-button{background-color:var(--accent);text-transform:uppercase;width:100%;border:none;outline:none;color:#fff;font-weight:500;border-radius:5px;height:32px}
.play-again-button{color:unset;background-color:var(--gray-200);margin-top:.25em}
.share-button:hover,.share-button:focus-visible{background-color:var(--accent-hover)}
.play-again-button:hover,.play-again-button:focus-visible,.skip-button:hover,.skip-button:focus-visible{background-color:var(--gray-hover)}
.view-on{margin-top:25px;width:50%;display:flex;justify-content:center;align-items:center}
.view-on+.view-on{margin-top:10px}
.view-on img{height:20px}
.view-on a{color:inherit;text-decoration:underline;margin-left:10px;cursor:pointer}
.top-stats{margin:auto auto 40px;width:75%;display:flex;justify-content:center}
.top-stats>div{padding-inline:1em;display:flex;flex-direction:column;align-items:center;text-align:center}
.average{font-size:2.5em;font-weight:700;display:block;text-align:center}
.average-label{font-size:1.2em;display:block;text-align:center;margin-bottom:25px}
.guess-distribution{margin:0;padding:0;margin-inline:.25rem;list-style:none}
.guess-distribution>li{display:flex;margin:.5rem}
.guess-distribution .index{font-weight:700;margin-right:.25rem;width:10px}
.guess-distribution .bar{background-color:#94a3b8}
.guess-distribution .count{font-weight:700;padding-inline:.25rem;background-color:#94a3b8}
@-webkit-keyframes reveal {
0%{opacity:0}
to{opacity:1}
}
@keyframes reveal {
0%{opacity:0}
to{opacity:1}
}
@-webkit-keyframes pop {
0%{-webkit-transform:scale(1);transform:scale(1)}
75%{-webkit-transform:scale(1.25);transform:scale(1.25)}
to{-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes pop {
0%{-webkit-transform:scale(1);transform:scale(1)}
75%{-webkit-transform:scale(1.25);transform:scale(1.25)}
to{-webkit-transform:scale(1);transform:scale(1)}
}
@media screen and (max-width: 768px) {
#app{width:100%}
#modal{padding-inline:10px}
.guesses{padding:10px}
.alert-container{top:0;width:100%}
.alert{width:100%;padding-block:1.5em;justify-content:unset;align-items:unset}
}