html,div,dl,dt,dd,ul,ol,li,pre,form,label,fieldset,p,blockquote,input{margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;margin:0;padding:0}
html{background:#FFF;color:#333;font:.875em/1.5 "Helvetica Neue",Arial,sans-serif;text-align:center}
body{max-width:40em;margin:0 auto;padding:.5em}

h1{font-weight:700;font-size:2em;margin:0}
h2{font-weight:400;color:#666;font-size:1.25em;font-style:italic;font-family:Georgia,serif;margin:.25em 0 .5em}

p,ul,ol{margin:0 0 1em}
article,section{margin:1em 0}

a,button.text{color:#000;text-decoration:none;border-bottom:1px solid #AAA}
a:hover,button.text:hover{color:#666}

fieldset{border:0;cursor:default;line-height:2;margin:1em 0}
label{white-space:nowrap}
label,select,button{margin-right:1em}
label select,button:last-child{margin:0}
input[type="checkbox"]{vertical-align:baseline;margin-right:.25em}
button,input[type="button"],input[type="submit"]{cursor:pointer}
#controls input[type="submit"]{font-size:1em;padding:.125em .25em}
abbr{cursor:help;border-bottom:1px dotted;text-decoration:none}
.clear{clear:both}
.hidden{visibility:hidden}
.invisible{display:none !important}
.male{color:blue}
.female{color:deeppink}

header{margin:1em 0}

.menu,.menu:before{border:1px solid #000;border-radius:2px}
.menu{padding:.5em 1em;border-bottom-width:2px;position:relative;z-index:10;margin:0 auto}
.menu:before{border-top-width:2px;content:"";display:block;position:absolute;z-index:-1;top:1px;left:1px;right:1px;bottom:1px}

.dropdown{position:relative;display:inline-block}
.dropdown > button:after{content:"";border:.3em solid transparent;border-top-color:currentColor;
	display:inline-block;margin-left:.25em;transform:translateY(0.15em)}
.dropdown .popup{position:absolute;top:calc(100% - 0.25rem);background:#EEE;box-shadow:0 0 .25em currentColor;
	line-height:1.5;text-align:left;display:none;padding:.5em;border-radius:2px;z-index:20}
.dropdown .popup.visible{display:block}
.dropdown > .popup ul{margin:0;padding:0}
.dropdown > .popup li{list-style:none;margin:.25em 0}

.loading:after{position:absolute;top:50%;right:4%;z-index:-2;content:"";width:1em;height:1em;margin:-1em 0 0;
	border-radius:1em;border:.25em solid;border-color:currentColor transparent;
	animation:1.25s linear infinite rotate, .5s ease-out 0s 1 fadeIn}

#history{margin:1em 0 0;display:flex;justify-content:space-between}
button.text{background:transparent;color:inherit;border:0;padding:0}

#results li,#shinies li{display:inline-block;height:3em;padding-top:128px;width:33%;min-width:138px;margin-bottom:1em;position:relative;list-style:none}
#results li{animation:0.5s ease-out 0s 1 fadeIn}
#results .nature{color:#888}.star{color:#F4D04D}
#results li.shiny:before,#results li.shiny:after,#results li.shiny .star:before,#results li.shiny .star:after{
	content:"\2605";position:absolute;top:64px;left:50%;font-size:.75em;opacity:0;pointer-events:none;z-index:100}
#results li.shiny:before      {animation:.6s steps(8) .075s 1 rotateStar, .075s alternate steps(2) infinite shine;font-size:1.5em}
#results li.shiny:after       {animation:.6s steps(8) .150s 1 rotateStar, .075s alternate steps(2) infinite shine}
#results li.shiny .star:before{animation:.6s steps(8) .225s 1 rotateStar, .075s alternate steps(2) infinite shine}
#results li.shiny .star:after {animation:.6s steps(8) .300s 1 rotateStar, .075s alternate steps(2) infinite shine}
#results img,#shinies img{position:absolute;bottom:3em;left:50%;transform:translateX(-50%)}
#results li.imageless{font-weight:700;margin:2em 0;height:auto;padding:0}

#shiny-toggler{margin-bottom:.5em}
#shinies{margin-top:1em}
#shinies li{width:30%}
#shinies .date{color:#888}
#shiny-container button{margin-bottom:1em}
#shiny-toggler.is-showing .is-hiding,#shiny-toggler.is-hiding .is-showing{display:none}

footer{font-size:.875em;padding:3em 0;color:#666;clear:both}

@media screen and (max-width:27em){header{font-size:.75em}}
@media screen and (max-width:21em){header{font-size:.625em}}

@media screen and (prefers-color-scheme: dark) {
	html{background:#222;color:#FFF}
	h2,footer{color:#CCC}
	.menu,.menu:before{border-color:#FFF}
	.dropdown .popup{background:#111}

	a,button.text{color:#DDD;border-bottom-color:#777}
	a:hover,button.text:hover{color:#FFF}

	.male{color:lightblue}
	.female{color:pink}
}

/* Mobile Safari doesn't display this animation smoothly unless I add another CSS declaration. */
@keyframes fadeIn { from {opacity:0} to {opacity:1;color:inherit} }
@keyframes rotate { from {transform:rotate(0deg)} to {transform:rotate(360deg)} }
@keyframes shine {
	from{color:#F8F838;text-shadow:2px 0 #F88008, -2px 0 #F88008, 0 2px #F88008, 0 -2px #F88008}
	to  {color:#F8F8F8;text-shadow:2px 0 #F8F838, -2px 0 #F8F838, 0 2px #F8F838, 0 -2px #F8F838}
}
@keyframes rotateStar {
	from{opacity:1;transform:rotate( .4turn) translate(45px) rotate(-.4turn)}
	to  {opacity:1;transform:rotate(-.5turn) translate(45px) rotate( .5turn)}
}

/*
 * Pokémon Official + Manga-inspired Theme
 * - Bold primary colors, outlined typography, halftone textures
 * - Card-like results, accent borders, comic-style buttons
 * - No external assets; pure CSS; respects prefers-color-scheme
 */

:root {
  --poke-red: #e3350d;
  --poke-blue: #2a75bb;
  --poke-yellow: #ffcc00;
  --ink: #111111;
  --paper: #ffffff;
  --paper-2: #f6f7fb;
  --shadow: 0 4px 0 rgba(0,0,0,0.25), 0 8px 16px rgba(0,0,0,0.08);
}

html {
  background:
    radial-gradient(circle at 0 0, rgba(0,0,0,0.06) 1px, transparent 1px) 0 0/8px 8px,
    linear-gradient(180deg, var(--paper), var(--paper-2));
}

body {
  padding-top: 1rem;
}

/* Header with bold outlined title */
header {
  margin: 0.75em 0 0.5em;
  padding: 0.25em 0 0.5em;
  background:
    linear-gradient(180deg, rgba(42,117,187,0.15), transparent 70%),
    linear-gradient(90deg, var(--poke-blue), var(--poke-red));
  border-bottom: 4px solid var(--ink);
}
header h1 {
  color: #fff;
  -webkit-text-stroke: 1px #000;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow:
     0    0   8px rgba(0,0,0,0.25);
}

/* Panel/menu with comic-like outline and halftone */
.menu {
  background:
    radial-gradient(circle at 12px 10px, rgba(0,0,0,0.06) 1px, transparent 1px) 0 0/10px 10px,
    linear-gradient(180deg, #fff, #fafafa);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.menu:before { display: none; }

/* Dropdowns */
.dropdown > button {
  background: linear-gradient(180deg, #fff, #f1f4f8);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 0.25em 0.75em;
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0,0,0,0.2);
}
.dropdown .popup {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.dropdown .popup li label:hover {
  background: rgba(42,117,187,0.08);
}

/* Primary action button (Generate) */
#controls input[type="submit"] {
  appearance: none;
  background: linear-gradient(180deg, #ff4d2a, var(--poke-red));
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 0.25em 0.9em;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 4px 0 #00000033, 0 8px 14px rgba(227,53,13,0.25);
  transition: transform .06s ease, box-shadow .06s ease, filter .2s ease;
}
#controls input[type="submit"]:hover {
  filter: brightness(1.05) saturate(1.1);
}
#controls input[type="submit"]:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #00000033, 0 6px 10px rgba(227,53,13,0.2);
}

/* History nav buttons */
#history button.text {
  border: 3px solid var(--ink);
  border-radius: 8px;
  padding: 0.2em 0.6em;
  background: linear-gradient(180deg, #fff, #f1f4f8);
  box-shadow: 0 2px 0 rgba(0,0,0,0.2);
}
#history button.text:hover { filter: brightness(1.05); }

/* Results as cards */
#results li,
#shinies li {
  width: 32.5%;
  min-width: 160px;
  margin-bottom: 1.25em;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background:
    radial-gradient(circle at 10px 8px, rgba(0,0,0,0.05) 1px, transparent 1px) 0 0/9px 9px,
    linear-gradient(180deg, #fff, #f7f8fb);
  box-shadow: var(--shadow);
}
#results li.imageless {
  border: 0;
  background: transparent;
  box-shadow: none;
}
#results .nature { color: #5c6b7a; }
.star { color: var(--poke-yellow); text-shadow: 0 1px 0 rgba(0,0,0,0.3); }

/* Sprite presentation */
#results img, #shinies img {
  bottom: 3.25em;
  image-rendering: -webkit-optimize-contrast;
}

/* Shiny sparkle boost */
#results li.shiny:before,
#results li.shiny:after,
#results li.shiny .star:before,
#results li.shiny .star:after {
  color: var(--poke-yellow);
  text-shadow: 0 0 6px rgba(255,204,0,0.6);
}

/* Shiny history container */
#shiny-container .menu,
#shiny-container {
  background: transparent;
}
#shiny-container button.text {
  border: 3px solid var(--ink);
  border-radius: 8px;
  padding: 0.3em 0.8em;
}

/* Footer */
footer {
  color: #5c6b7a;
  border-top: 4px solid var(--ink);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.03));
}

/* Focus visibility */
button:focus, input:focus, select:focus {
  outline: 3px solid var(--poke-yellow);
  outline-offset: 2px;
}

/* Dark theme overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1f1f26;
    --paper-2: #16161a;
  }
  html {
    background:
      radial-gradient(circle at 0 0, rgba(255,255,255,0.06) 1px, transparent 1px) 0 0/8px 8px,
      linear-gradient(180deg, var(--paper-2), var(--paper));
  }
  .menu {
    background:
      radial-gradient(circle at 12px 10px, rgba(255,255,255,0.08) 1px, transparent 1px) 0 0/10px 10px,
      linear-gradient(180deg, #2a2b31, #202127);
  }
  .dropdown > button { background: linear-gradient(180deg, #2a2b31, #202127); color: #fff; }
  .dropdown .popup { background: #1d1e24; color: #fff; }
  #results li, #shinies li {
    background:
      radial-gradient(circle at 10px 8px, rgba(255,255,255,0.08) 1px, transparent 1px) 0 0/9px 9px,
      linear-gradient(180deg, #2a2b31, #202127);
  }
  #results .nature { color: #c3cad3; }
  footer { color: #c3cad3; }
}

/* Mobile: first label, regions button, and types button on their own lines */
@media screen and (max-width: 40em) {
  #controls fieldset:first-of-type {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0.5em;
  }
  /* First label takes a full row */
  #controls fieldset:first-of-type > label {
    grid-column: 1 / -1;
  }
  /* Regions and Types dropdowns each on their own row */
  #controls fieldset:first-of-type #regions,
  #controls fieldset:first-of-type #types {
    grid-column: 1 / -1;
    width: 100%;
  }
  #controls fieldset:first-of-type #regions > button,
  #controls fieldset:first-of-type #types > button {
    width: 100%;
    text-align: left;
  }
}

/* Mobile override: first label full row; regions and types share one row */
@media screen and (max-width: 40em) {
  #controls fieldset:first-of-type {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5em;
  }
  #controls fieldset:first-of-type > label {
    grid-column: 1 / -1;
  }
  #controls fieldset:first-of-type #regions,
  #controls fieldset:first-of-type #types {
    grid-column: auto;
    width: 100%;
  }
  #controls fieldset:first-of-type #regions > button,
  #controls fieldset:first-of-type #types > button {
    width: 100%;
    text-align: left;
  }
}

/* Mobile: Legendaries + Stages on one row; Fully Evolved or Not on separate row */
@media screen and (max-width: 40em) {
  #controls fieldset:nth-of-type(2) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5em;
  }
  /* Legendaries and Stages share one row */
  #controls fieldset:nth-of-type(2) .dropdown[data-plural-name="Legendaries"],
  #controls fieldset:nth-of-type(2) .dropdown[data-plural-name="Stages"] {
    grid-column: auto;
    width: 100%;
  }
  /* Fully Evolved or Not takes full row */
  #controls fieldset:nth-of-type(2) .dropdown[data-all-name="Fully Evolved or Not"] {
    grid-column: 1 / -1;
    width: 100%;
  }
  #controls fieldset:nth-of-type(2) .dropdown > button {
    width: 100%;
    text-align: left;
  }
}

/* Increase spacing between result items */
#results li {
  margin: 0 0.5em 1.5em 0.5em;
}
#results ol {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  justify-content: center;
}

/* Placeholder styles for initial state */
.placeholder-container {
  text-align: center;
  padding: 1.5rem 1rem;
  max-width: 600px;
  margin: 0 auto;
}

.placeholder-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  animation: bounce 2s infinite;
}

.placeholder-container h2 {
  color: var(--poke-blue);
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.placeholder-container p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.placeholder-tips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.tip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: rgba(42, 117, 187, 0.1);
  border-radius: 8px;
  border: 2px solid rgba(42, 117, 187, 0.2);
}

.tip-icon {
  font-size: 1.5rem;
}

/* SEO and accessibility utilities */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.subtitle {
  color: #fff;
  font-size: 1.1rem;
  margin: 0.5rem 0 1rem;
  font-weight: normal;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Animation for placeholder icon */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Dark theme for placeholder */
@media (prefers-color-scheme: dark) {
  .placeholder-container h2 {
    color: #4a9eff;
  }
  .placeholder-container p {
    color: #ccc;
  }
  .tip {
    background: rgba(74, 158, 255, 0.1);
    border-color: rgba(74, 158, 255, 0.2);
  }
}

/* Inline logo replacing the first 'o' in Pokémon */
.logo-o {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  margin: 0 0.05em;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}

/* Larger on bigger headings */
header h1 .logo-o {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.2em;
}