*,*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,li,figure,figcaption,blockquote,dl,dd{margin:0}html{scroll-behavior:smooth;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body{line-height:1.5;min-height:100svh;text-rendering:optimizeSpeed;-webkit-font-smoothing:antialiased}:where(ul,ol):where([role=list]){list-style:none;margin:0;padding:0}h1,h2,h3,h4,button,input,label{line-height:1.15}h1,h2,h3,h4{text-wrap:balance}img,picture,svg{display:block;max-width:100%}img[width]{height:auto}button,input,select,textarea{font-family:inherit}textarea:not([rows]){min-height:10em}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}a:not([class]){text-underline-offset:.1em}a,button,input,textarea{--outline-color: currentColor;--outline-offset: 0px;--outline-size: max(2px, .08em);--outline-style: solid}a:focus,a:focus-visible,button:focus,button:focus-visible,input:focus,input:focus-visible,textarea:focus,textarea:focus-visible{outline:var(--outline-size) var(--outline-style) var(--outline-color);outline-offset:var(--outline-offset)}a:focus:not(:focus-visible),button:focus:not(:focus-visible),input:focus:not(:focus-visible),textarea:focus:not(:focus-visible){outline:none}:target{scroll-margin-block-start:2rem}:focus{scroll-margin-block-end:8vh}hr{box-sizing:content-box;height:0;overflow:visible}pre,code,kbd,samp{font-family:monospace,monospace;font-size:1em}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font:inherit;font-size:100%;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button;-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}table{border-collapse:collapse}table thead,table tbody,table tfoot,table tr,table th,table td{border-color:inherit;border-style:solid;border-width:1px}table th,table td{padding:.25rem .5rem}:root{--color-grey-darkest: oklch(27.9% .041 260.031);--color-grey-dark: oklch(37.2% .044 257.287);--color-grey: oklch(55.4% .046 257.417);--color-grey-mid: oklch(70.4% .04 256.788);--color-grey-light: oklch(.899 .02 252.894);--color-grey-faded: oklch(96.8% .007 247.896);--color-green: oklch(52.7% .154 150.069);--color-orange: oklch(.7513 .1184 83.19);--color-yellow: oklch(90.5% .182 98.111);--font-primary: "Roboto", sans-serif;--font-pixel-body: "VT323", monospace;--font-pixel-heading: "Silkscreen", monospace;--font-size-base: 1rem;--font-size-sm: .875rem;--line-height: 1.625;--line-height-sm: 1.125;--border-color: var(--color-grey-light);--border-radius: .9rem;--border-radius-sm: .45rem;--box-shadow-inset: inset 1px 1px 1px 0 rgba(255,255,255,.15), inset -1px -1px 1px 0px rgba(0,0,0,.15);--spacer: clamp(.75rem, .058rem + 1.92vw, 1.5rem);--type-color: #94a3b8;--type-bug: #84cc16;--type-dark: #334155;--type-dragon: #576fbc;--type-electric: #facc15;--type-fairy: #f472b6;--type-fighting: #ef4444;--type-fire: #f97316;--type-flying: #60a5fa;--type-ghost: #8c4e8d;--type-grass: #22c55e;--type-ground: #915121;--type-ice: #38bdf8;--type-normal: #a3a3a3;--type-poison: #a855f7;--type-psychic: #ec4899;--type-steel: #77b2cb;--type-rock: #a16207;--type-water: #3b82f6}:root{font-size:calc(.8125rem + .25vw)}h1,.h1{font-size:2.5rem}h2,.h2{font-size:2rem}h3,.h3{font-size:1.75rem}h4,.h4{font-size:1.5rem}h5,.h5{font-size:1.25rem}h6,.h6{font-size:1.125rem}body{background:radial-gradient(at 93% 33%,#2b5876 0px,transparent 50%),radial-gradient(at 81% 44%,#4e4376 0px,transparent 50%),radial-gradient(at 38% 30%,#3d3393 0px,transparent 50%),radial-gradient(at 67% 69%,#440cc7 0px,transparent 50%),radial-gradient(at 47% 54%,#c70c8f 0px,transparent 50%) #020618;mix-blend-mode:normal;color:var(--color-grey-dark);font-family:var(--font-primary);font-size:var(--font-size-base);line-height:var(--line-height)}header{padding:1rem 1.5rem}header a{display:block;text-decoration:none}header a h1{align-items:center;display:flex;flex-direction:column;font-family:var(--font-pixel-body);line-height:var(--line-height-sm)}header a h1 strong{color:var(--color-yellow);display:block}header a h1 span{color:#fff;font-size:1.125rem;font-weight:400;text-transform:uppercase}footer{color:#fff9;font-size:var(--font-size-sm);padding:1rem 1.5rem;text-align:center}.game{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background-color:#ffffff26;box-shadow:var(--box-shadow-inset);display:flex;flex-direction:column;gap:var(--spacer);justify-content:center;margin-inline:auto;max-width:576px;padding:var(--spacer)}@media(min-width:576px){.game{border-radius:var(--border-radius)}}.game h2{color:#fff;font-family:var(--font-pixel-body);font-size:2.5rem;margin-bottom:.25em;text-align:center}.game .meta{align-items:center;display:flex;gap:var(--spacer);justify-content:space-between;padding-block:var(--spacer)}.game .results{display:flex;flex-direction:column-reverse;gap:var(--spacer)}.game .results .guess{background:linear-gradient(to bottom,#0000004d,#00000026);border-radius:var(--border-radius);box-shadow:var(--box-shadow-inset);color:#fff;display:flex;flex-direction:column;font-family:var(--font-pixel-body);gap:12px;padding-block:1rem;padding-inline:var(--spacer)}.game .results .guess .name{font-family:var(--font-pixel-heading);font-size:1.25rem;text-align:center}.game .results .guess .row{display:grid;gap:8px;grid-template-columns:repeat(5,1fr)}.game .results .guess .row .cell{--size: 64px;align-items:center;aspect-ratio:1;background-color:var(--color-grey-light);border-radius:calc(var(--size) / 2);color:var(--color-grey-darkest);display:flex;flex-direction:column;font-size:1.5rem;justify-content:center;gap:4px;letter-spacing:-1px;margin-inline:auto;max-width:var(--size);overflow:hidden;position:relative;width:100%}.game .results .guess .row .cell:nth-child(1){--index: 1 }.game .results .guess .row .cell:nth-child(2){--index: 2 }.game .results .guess .row .cell:nth-child(3){--index: 3 }.game .results .guess .row .cell:nth-child(4){--index: 4 }.game .results .guess .row .cell:nth-child(5){--index: 5 }.game .results .guess .row .cell:before,.game .results .guess .row .cell:after{display:block;pointer-events:none;position:absolute;inset:0;transform:translateY(0);z-index:2}.game .results .guess .row .cell:before{background:radial-gradient(#dadada 5px,white 6px 9px,black 10px 13px,transparent 14px),linear-gradient(to bottom,red 0 calc(var(--size) / 2 - 2px),black calc(var(--size) / 2 - 1px) calc(var(--size) / 2 + 3px),transparent calc(var(--size) / 2 + 4px) 100%);height:var(--size);top:0;z-index:3}.game .results .guess .row .cell:after{background-color:#fff;height:calc(var(--size) / 2 - 3px);bottom:0;top:auto}.game .results .guess .row .cell.partial{background-color:var(--color-orange);color:#fff}.game .results .guess .row .cell.ok{background-color:var(--color-green);color:#fff}.game .results .guess .row .cell strong{font-size:11px;font-weight:900;letter-spacing:.4px;text-transform:uppercase}.game .results .guess .row .cell .arrow{--arrow-size: 6px;--arrow-color: var(--color-grey);border-color:transparent;border-style:solid;border-width:var(--arrow-size);position:absolute;width:0;height:0}.game .results .guess .row .cell .arrow--up{border-bottom-color:var(--arrow-color);border-top-width:0px;top:10px}.game .results .guess .row .cell .arrow--down{border-top-color:var(--arrow-color);border-bottom-width:0px;bottom:10px}.game .results .guess .row .cell--type{flex-direction:row}.game .results .guess .row.reveal .cell:before,.game .results .guess .row.reveal .cell:after{animation-delay:calc(var(--index) * .35s);animation-duration:1.5s;animation-timing-function:cubic-bezier(.14,.4,.82,.79);animation-fill-mode:forwards;content:""}@media(prefers-reduced-motion:reduce){.game .results .guess .row.reveal .cell:before,.game .results .guess .row.reveal .cell:after{animation:none;transform:translateY(110%)}}.game .results .guess .row.reveal .cell:before{animation-name:pokeTopOpen}@media(prefers-reduced-motion:reduce){.game .results .guess .row.reveal .cell:before{transform:translateY(-110%)}}.game .results .guess .row.reveal .cell:after{animation-name:pokeBottomOpen}.game .results .guess .row.win-bounce .cell{animation:cellBounce .52s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(3s + var(--index) * .25s)}@media(prefers-reduced-motion:reduce){.game .results .guess .row.win-bounce .cell{animation:none}}.game .results .guess .row .col{text-align:center;text-transform:uppercase}.game .success{background:linear-gradient(to bottom,#0000004d,#00000026);border-radius:var(--border-radius);box-shadow:var(--box-shadow-inset);color:#fff;opacity:0;padding-block:1rem;padding-inline:var(--spacer);text-align:center;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease}.game .success:not([hidden]){opacity:1;transform:translateY(0)}.game .success__answer{background-color:#00000040;border-radius:var(--border-radius-sm);display:flex;flex-direction:column;font-family:var(--font-pixel-body);font-size:1.125rem;gap:8px;line-height:var(--line-height-sm);margin-block:calc(var(--spacer) / 2);padding:var(--spacer)}.game .success__stats{border:solid rgba(255,255,255,.25);border-width:1px 0;display:grid;gap:1rem;grid-template-columns:repeat(5,1fr);margin-block:calc(var(--spacer) / 2);padding-block:calc(var(--spacer) / 2)}.game .success__stats>div{display:flex;flex-direction:column;font-size:1.25rem;text-align:center}.game .success__stats>div strong{display:block;font-size:1rem}.game .success__grid{font-size:1.5rem;line-height:1.25;margin-block:0 var(--spacer)}.game .success button{margin-inline:auto}.confetti-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9999}@keyframes pokeTopOpen{to{transform:translateY(-110%)}}@keyframes pokeBottomOpen{to{transform:translateY(110%)}}@keyframes cellBounce{0%{transform:translateY(0)}35%{transform:translateY(-10px)}60%{transform:translateY(0)}80%{transform:translateY(-4px)}to{transform:translateY(0)}}input{background-color:#fff;border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--color-grey-dark);font-family:inherit;font-size:1rem;font-size:max(16px,1em);min-block-size:3.5rem;padding:.5rem 1rem;transition:box-shadow .18s ease-in-out}input::placeholder{color:var(--color-grey-mid)}input[disabled]{background-color:var(--color-grey-faded);color:var(--color-grey-faded)}input:focus{--outline-color: transparent;border-color:var(--color-blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-blue),#fff 80%)}.combo{position:relative}.combo__control{display:grid;grid-template-columns:1fr;gap:.5rem}.combo__list{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--border-radius);box-shadow:0 10px 30px #0000001f;display:flex;flex-direction:column;gap:4px;overflow:hidden;padding:6px;position:absolute;top:calc(100% + .35rem);left:0;right:0;z-index:50}.combo__list:empty{pointer-events:none;visibility:hidden}.combo__option{border-radius:var(--border-radius-sm);cursor:pointer;display:grid;gap:.75rem;grid-template-columns:5ch 1fr auto;padding:.6rem .75rem}.combo__option:hover,.combo__option.is-active{background:var(--color-grey-faded)}.combo__option.is-guessed{cursor:default;opacity:.45}.combo__option.is-guessed:hover,.combo__option.is-guessed.is-active{background:transparent}.combo__dex{color:var(--color-grey-mid);font-variant-numeric:tabular-nums}.combo__name mark{background:transparent;font-weight:700;padding:0}.combo__types{display:inline-flex;gap:.25rem}.combo__empty{color:var(--color-grey-mid);padding:1.5rem 1rem;text-align:center}.button{align-items:center;align-self:start;background-color:var(--button-bg, transparent);border-radius:var(--border-radius-sm);color:var(--button-color, inherit);display:inline-flex;font-weight:700;gap:.5em;line-height:1.125;min-block-size:3rem;min-inline-size:10ch;padding:.75rem 1.25rem;text-align:center;text-decoration:none}.button[disabled]{--button-bg: var(--color-grey-faded);--button-color: var(--color-grey-dark);cursor:not-allowed;opacity:.5}.button--primary{--button-bg: var(--color-yellow);--button-color: var(--color-grey-darkest)}.button:hover:not([disabled]){background-color:color-mix(in srgb,var(--button-bg),#000 20%)}.button:focus:not(:focus-visible){background-color:color-mix(in srgb,var(--button-bg),#000 30%)}.button:focus-visible{--outline-offset: -.35em;--outline-style: dashed}.button:is(button){border:none;cursor:pointer;font-family:inherit}.type{--size: 26px;align-items:center;aspect-ratio:1;background:var(--type-color);border-radius:calc(var(--size) / 2);box-shadow:inset 0 0 0 1px #0000001a;display:inline-flex;justify-content:center;width:var(--size);height:var(--size)}.type--normal{--type-color: var(--type-normal)}.type--fire{--type-color: var(--type-fire)}.type--water{--type-color: var(--type-water)}.type--electric{--type-color: var(--type-electric)}.type--grass{--type-color: var(--type-grass)}.type--ice{--type-color: var(--type-ice)}.type--fighting{--type-color: var(--type-fighting)}.type--poison{--type-color: var(--type-poison)}.type--ground{--type-color: var(--type-ground)}.type--flying{--type-color: var(--type-flying)}.type--psychic{--type-color: var(--type-psychic)}.type--bug{--type-color: var(--type-bug)}.type--rock{--type-color: var(--type-rock)}.type--ghost{--type-color: var(--type-ghost)}.type--dragon{--type-color: var(--type-dragon)}.type--dark{--type-color: var(--type-dark)}.type--steel{--type-color: var(--type-steel)}.type--fairy{--type-color: var(--type-fairy)}.type svg{aspect-ratio:1;color:#fff;width:16px;height:auto}.type svg *{fill:currentColor;stroke:currentColor}
