body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  background: linear-gradient(135deg, #ededfa 0%, #e1e4f8 100%);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  transition: background 0.6s;
}

.container {
  max-width: 420px;
  margin: 62px auto 0;
  background: rgba(255,255,255,0.992);
  border-radius: 23px;
  box-shadow: 0 8px 44px -6px rgba(71,63,159,0.16), 0 2px 6px rgba(68,92,146,0.06);
  padding: 40px 38px 36px 38px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.container:before {
  content: '';
  position: absolute;
  left: -60px; top: -60px;
  width: 180px; height: 180px;
  background: linear-gradient(135deg, #9eaefb 0%, #e0c3fc 100%);
  opacity: 0.23;
  border-radius: 100%;
  z-index: 0;
  filter: blur(6px);
}
.container:after {
  content: '';
  position: absolute;
  right: -55px; bottom: -42px;
  width: 120px; height: 120px;
  background: linear-gradient(135deg, #93d6c1 10%, #b79af5 70%);
  opacity: 0.18;
  border-radius: 100%;
  z-index: 0;
  filter: blur(7px);
}

h1 {
  color: #6048ee;
  margin-bottom: 16px;
  font-size: 2.32em;
  letter-spacing: 0.02em;
  font-weight: 700;
  background: linear-gradient(to right, #815fd7 40%, #288fb4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

p {
  position: relative;
  z-index: 2;
}

form {
  margin-top: 22px;
  margin-bottom: 28px;
  display: flex;
  gap: 10px;
  justify-content: center;
  z-index: 2;
  position: relative;
  flex-wrap: wrap;
}
input[type="text"] {
  padding: 10px 14px;
  border: 1.5px solid #bbc7dd;
  border-radius: 8px;
  font-size: 1.14em;
  width: 62%;
  transition: border 0.17s, box-shadow 0.22s;
  background: #f8f8fe;
  font-family: inherit;
  box-shadow: 0 1px 7px 0 rgba(180,184,225,0.04);
}
input[type="text"]:focus {
  border-color: #815fd7;
  outline: none;
  background: #f3f0fa;
  box-shadow: 0 2px 14px 0 rgba(129,95,215,0.11);
}

select#country-select {
  padding: 10px 10px 10px 11px;
  border-radius: 7px;
  font-size: 1.05em;
  border: 1.5px solid #bbc7dd;
  background: #f7f6fe;
  font-family: inherit;
  color: #6048ee;
  transition: border 0.17s, box-shadow 0.16s;
  margin-bottom: 0.2em;
  outline: none;
  font-weight: 600;
  box-shadow: 0 1px 7px rgba(144, 133, 221, 0.026);
  cursor: pointer;
  min-width: 130px;
}
select#country-select:focus {
  border-color: #815fd7;
  box-shadow: 0 2px 12px 0 rgba(129,95,215,0.10);
}

button[type="submit"] {
  padding: 11px 23px;
  border: none;
  background: linear-gradient(95deg, #8368df 30%, #4fd7d7 110%);
  color: white;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1.08em;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 16px rgba(84,152,203,0.08), 0 1.5px 8px #5234c440;
  cursor: pointer;
  transition: background 0.14s, filter 0.13s;
  font-family: inherit;
  position: relative;
  z-index: 2;
}
button[type="submit"]:hover, button[type="submit"]:focus {
  background: linear-gradient(92deg, #6844cc 13%, #2bc3b5 96%);
  filter: brightness(1.08) contrast(1.06);
}
button[type="submit"]:focus {
  outline: 2.5px solid #6132ce60;
  outline-offset: 2px;
}

#result {
  margin-top: 18px;
  font-size: 1.65em;
  min-height: 60px;
  transition: color 0.3s;
  z-index: 2;
  position: relative;
  text-shadow: 0 2px 8px rgba(151,143,205,0.09);
}

#custom-country-input {
  padding: 10px 14px;
  border: 1.5px solid #bbc7dd;
  border-radius: 8px;
  font-size: 1.08em;
  background: #f8f8fe;
  box-shadow: 0 1px 7px 0 rgba(180,184,225,0.03);
  font-family: inherit;
  color: #4B3CA2;
  transition: border 0.16s, box-shadow 0.19s;
  width: 62%;
  max-width: 220px;
  display: block;
}
#custom-country-input:focus {
  border-color: #815fd7;
  outline: none;
  background: #f3f0fa;
  box-shadow: 0 2px 12px 0 rgba(129,95,215,0.09);
}

.rarity-very-common { 
  color: #11c850; font-weight: 900; text-shadow: 0 1px 7px #b4ffcb7a;
  letter-spacing: 0.012em;
}
.rarity-common { 
  color: #99da2c; font-weight: 800; text-shadow: 0 1px 3px #b5e44978;
}
.rarity-uncommon { 
  color: #d1a30f; font-weight: 800; letter-spacing: 0.01em; text-shadow: 0 1px 6px #ffec9888;
}
.rarity-rare { 
  color: #2176f7; font-weight: 800; text-shadow: 0 1px 8px #6fc1fd33;
}
.rarity-very-rare { 
  color: #b430f8; font-weight: 800; letter-spacing: 0.005em;
  text-shadow: 0 2px 15px #e6cbfb33;
}
.rarity-1pc { 
  color: #ffac38; font-weight: 800; font-style: italic;
  text-shadow: 0 1px 7px #fff2db64;
  letter-spacing: 0.009em;
}
.rarity-extremely-rare {
  color: #7e23b2;
  font-style: italic;
  font-weight: 800;
  text-shadow: 0 1px 12px #cc9ff94a;
}
.rarity-01pc {
  color: #18bddb;
  font-weight: 800;
  letter-spacing: 0.015em;
  font-style: italic;
  text-shadow: 0 2px 17px #78e2fc42, 0 0px 1px #cffafd88;
}
.rarity-barely-anyone {
  color: #6968db;
  font-weight: 800;
  letter-spacing: 0.022em;
  font-style: italic;
  text-shadow: 0 1px 12px #c7cfff33, 0 0px 1px #e9e6fa88;
  background: linear-gradient(90deg, #cfd6fa 0%, #e7fafd 87%);
  border-radius: 7px;
  padding: 2.7px 6px 2.7px 7px;
  margin: 0 2px;
}
.rarity-insanely-rare {
  color: #d60ce1;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.034em;
  background: linear-gradient(98deg, #f9d5fd 0%, #fff9dd 60%, #e5d7ff 100%);
  border-radius: 10px;
  padding: 4px 14px 2.7px 14px;
  margin: 0 3px;
  box-shadow: 0 4px 14px #e9c7fd77;
  text-shadow: 0 2.5px 18px #fca3ffad, 0 1px 0 #fdeffd61;
  filter: drop-shadow(0 1.5px 12px #f0defee2);
}
.rarity-username {
  color: #5b48ed;
  font-weight: 900;
  font-style: oblique;
  letter-spacing: 0.025em;
  background: linear-gradient(75deg, #f6ecff 18%, #e5e0ff 80%);
  border-radius: 8px;
  padding: 3px 7.5px 2px 8px;
  box-shadow: 0 2px 15px #cfcffb3c, 0 1px 0 #edeafd77;
  filter: drop-shadow(0 1.5px 7px #d7d5ff59);
  text-shadow: 0 2px 7px #baaafd33;
}
.rarity-impossible { 
  color: #ff274d; font-weight: 900; text-shadow: 0 2px 15px #ffb0be6b, 0 1px 0 #fff4;
  letter-spacing: 0.037em;
  filter: drop-shadow(0 2px 5px #ffeaea36);
}
.rarity-unheard {
  color: #2e3342;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 19px #c7cbddd7, 0 1px 0 #c0c6ee33;
  font-style: oblique;
}

.rarity-ancient {
  color: #735239;
  font-weight: 900;
  letter-spacing: 0.035em;
  background: linear-gradient(93deg, #e8e3ce 0%, #e5ccb4 60%, #e4dbc1 100%);
  border-radius: 9px;
  font-style: italic;
  text-shadow: 0 2px 20px #c2ab8791, 0 0.5px 1px #e1bc6f62;
  filter: drop-shadow(0 1.5px 10px #e1dd9b59);
  padding: 3px 10px 1.9px 10px;
  margin: 0 2.5px;
}

.rarity-nothingnamedthat {
  color: #ea573a;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.038em;
  background: linear-gradient(88deg, #fff2ef 3%, #ffeacc 50%, #ffe6e6 91%);
  border-radius: 8px;
  padding: 4px 12px 2.2px 11px;
  margin: 0 2.5px;
  text-shadow: 0 2.5px 21px #fdc8b477, 0 1px 0 #efc2b870;
  box-shadow: 0 4px 17px #ffe7d2cc;
  filter: drop-shadow(0 1.5px 10px #fbe4d5c0);
}

.rarity-theoretical {
  color: #32a3a2;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.029em;
  background: linear-gradient(98deg, #e9eefe 0%, #d8fbdc 49%, #c3eafc 100%);
  border-radius: 10px;
  padding: 4px 15px 3px 15px;
  margin: 0 3px;
  box-shadow: 0 4px 17px #d3e1ff99;
  text-shadow: 0 2.5px 14px #89fff0ad, 0 1px 0 #d1ffe461;
  filter: drop-shadow(0 1.5px 10px #c7fff7e2);
}

.rarity-futuristic {
  color: #1bbdff !important;
  font-weight: 900;
  background: linear-gradient(98deg, #d3f6ff 0%, #e1e3fe 93%);
  border-radius: 12px;
  padding: 5px 15px 4px 15px;
  margin: 0 3px;
  letter-spacing: 0.04em;
  font-style: italic;
  text-shadow: 0 2px 18px #88f0ffe0, 0 1px 0 #cce8f7c8;
  filter: drop-shadow(0 1.5px 10px #b1e6fee0);
}

.rarity-less-1000 {
  color: #4d44ff;
  font-weight: 900;
  letter-spacing: 0.024em;
  background: linear-gradient(95deg, #e6e0fd 0%, #dbf5ff 100%);
  border-radius: 9px;
  padding: 4px 11px 3px 13px;
  margin: 0 2px;
  font-style: italic;
  box-shadow: 0 3px 13px #c2ecffd8;
  text-shadow: 0 2.5px 14px #d8e2ffb8, 0 1px 0 #bde7ffaa;
  filter: drop-shadow(0 1.5px 7px #b0ccfeaf);
}

.rarity-gt10 {
  color: #4551a5;
  font-weight: 900;
  letter-spacing: 0.025em;
  background: linear-gradient(92deg, #f8fafe 20%, #f2e8ff 99%);
  border-radius: 9px;
  padding: 3.7px 11px 3px 11px;
  margin: 0 2.5px;
  font-style: italic;
  text-shadow: 0 2px 11px #bbc5ffcc;
  filter: drop-shadow(0 1.3px 8px #b0ccfe7f);
}

.rarity-one-of-one {
  color: #f950e3;
  font-weight: 900;
  letter-spacing: 0.035em;
  background: linear-gradient(99deg, #ffe8f8 11%, #eaf2ff 90%);
  border-radius: 13px;
  font-style: italic;
  text-shadow: 0 3px 19px #fbb8f8ad, 0 0.5px 1px #fdcaee91;
  filter: drop-shadow(0 1.2px 10px #f6daffcf);
  padding: 5px 13px 4px 13px;
  margin: 0 2.8px;
}

.rarity-unprecedented {
  color: #e418c4;
  font-weight: 900;
  letter-spacing: 0.026em;
  background: linear-gradient(104deg, #f8d8fa 9%, #c1e9ff 84%);
  border-radius: 9px;
  padding: 4px 14px 3px 13px;
  margin: 0 2.4px;
  font-style: italic;
  box-shadow: 0 5px 14px #efb5fcad;
  text-shadow: 0 2.5px 14px #e3b6efb8, 0 1px 0 #dbe5ff90;
  filter: drop-shadow(0 1.8px 9px #ebc0eefe);
}

.rarity-neologizing {
  color: #32a3d9;
  font-weight: 900;
  letter-spacing: 0.03em;
  background: linear-gradient(94deg, #e6faff 9%, #eef9ff 90%);
  border-radius: 13px;
  font-style: italic;
  text-shadow: 0 2.5px 19px #b9d2fbad, 0 1px 0 #c6effe91;
  filter: drop-shadow(0 1.2px 11px #addafeae);
  padding: 5px 13px 4px 13px;
  margin: 0 2.8px;
}

.rarity-alien {
  color: #14ffeb;
  font-weight: 900;
  letter-spacing: 0.04em;
  background: linear-gradient(100deg, #bafff9 8%, #defff9 84%);
  border-radius: 13px;
  font-style: italic;
  text-shadow: 0 2.5px 18px #5ffdffb2, 0 1px 0 #a6ffedb6;
  filter: drop-shadow(0 1.2px 11px #a2fff7f3);
  padding: 5px 14px 4px 14px;
  margin: 0 3px;
}

#result .rarity-very-common,
#result .rarity-common,
#result .rarity-uncommon,
#result .rarity-rare,
#result .rarity-very-rare,
#result .rarity-1pc,
#result .rarity-extremely-rare,
#result .rarity-01pc,
#result .rarity-barely-anyone,
#result .rarity-insanely-rare,
#result .rarity-username,
#result .rarity-impossible,
#result .rarity-unheard,
#result .rarity-ancient,
#result .rarity-nothingnamedthat,
#result .rarity-theoretical,
#result .rarity-futuristic,
#result .rarity-less-1000,
#result .rarity-gt10,
#result .rarity-one-of-one,
#result .rarity-unprecedented,
#result .rarity-neologizing,
#result .rarity-alien {
  animation: rarityPop 0.78s cubic-bezier(.22,1.3,.65,1) 1;
}

@keyframes rarityPop {
  0% { opacity: 0; transform: scale(0.98) translateY(12px);}
  65% { opacity: 1; transform: scale(1.03) translateY(-4px);}
  100% { opacity: 1; transform: scale(1.0) translateY(0);}
}

.rarity-explanation {
  margin-top: 11px;
  font-size: 0.99em;
  line-height: 1.62;
  color: #5b5c6e;
  max-width: 96%;
  background: rgba(245,243,254,0.93);
  border-radius: 7px;
  padding: 8px 12px 8px 13px;
  box-shadow: 0 2px 6px #b0bAFE38;
  font-weight: 520;
  letter-spacing: 0.009em;
}

input[type="text"]::selection, select::selection, textarea::selection {
  background: #dde7f6;
}

#recent-names-box {
  position: fixed;
  top: 85px;
  left: calc(50% + 270px); 
  min-width: 216px;
  max-width: 260px;
  background: rgba(245,246,254,0.96);
  box-shadow: 0 6px 26px #c0b8f79f;
  border-radius: 14px;
  margin-left: 0;
  padding: 22px 18px 15px 18px;
  z-index: 50;
  border: 1.2px solid #dfd9fa;
  font-family: 'Inter', Arial, sans-serif;
  word-break: break-word;
  line-height: 1.38;
  transition: box-shadow 0.19s, left 0.28s, top 0.28s;
  display: block !important;
}

@media (max-width:1300px) {
  #recent-names-box {
    left: calc(50% + 210px);
  }
}
@media (max-width:1150px) {
  #recent-names-box {
    left: calc(50% + 160px);
  }
}
@media (max-width:1000px) {
  #recent-names-box {
    left: calc(50% + 85px);
  }
}

@media (max-width:900px) {
  #recent-names-box {
    position: static !important;
    margin: 30px auto 0 auto;
    width: 98vw;
    max-width: 390px;
    min-width: 0;
    left: unset !important;
    top: unset !important;
    border-radius: 13px;
    box-shadow: 0 1px 12px #b2aef738;
    padding: 16px 8px 12px 8px;
    display: block !important;
  }
}
@media (max-width:650px) {
  #recent-names-box {
    position: static !important;
    margin: 19px auto 0 auto;
    width: 97vw; max-width: 365px;
    padding: 12px 3vw 10px 3vw;
  }
}

@media (max-width:500px) {
  .container {
    padding: 14px 2vw 21px 2vw;
  }
  h1 { font-size: 1.23em; }
  #result { font-size: 1.04em; }
  form { gap: 6px; }
  select#country-select { min-width: 94px; font-size: 1em; }
  input[type="text"] { width: 100%; min-width:100px;}
  #custom-country-input {
    width: 100%;
    min-width: 90px;
    max-width: 94vw;
    font-size: 1em;
  }
}

::-webkit-input-placeholder { color: #bfc2ed; }
::-moz-placeholder { color: #bfc2ed; }
:-ms-input-placeholder { color: #bfc2ed; }
::placeholder { color: #bfc2ed; }

::selection {
  background: #cfc9ff8c;
}