@font-face {
  font-family: lemonmilk;
  src: url("assets/fonts/LemonMilk-Regular.otf") format("opentype");
}

:root {
  font-family: "lemonmilk", sans-serif;
}

* {
  font-family: inherit;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-transform: uppercase;
  text-align: center;
}

body {
  line-height: 1.6;
  color: #e0e0e0;
  background-color: #050505;
}

#title {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2vmax;
}

#title-inner {
  position: relative;
  display: inline-block;
}

#logo {
  width: 40vmax;
  display: block;
}

.version {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(1.2vmax, -50%);
  font-size: 1vmax;
  white-space: nowrap;
  text-align: left;
  text-transform: none;
}

#subtitle {
  margin-top: 5vmax;
  margin-bottom: 1.5em;
  text-align: center;
}

a {
  color: #66b3ff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  cursor: pointer;
  border: none;
  background-color: #3a3a3a;
  color: #fff;
  margin-top: 20px;
  width: 90%;
  max-width: 500px;
  padding: 0.8em 1.5em;
  font-size: 1.4em;
  
  border-radius: 12px;
  box-shadow: 0 6px rgba(45, 45, 45, 0.7);
  transition: transform 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  margin-left: auto;
  margin-right: auto;
}

button:hover {
  background-color: #4a4a4a;
}

button:active {
  transform: scale(0.95);
}

.btn-yes {
  background-color: #2cd134;
  box-shadow: 0 8px #0e7413;
}

.btn-yes:hover {
  background-color: #2bdf34;
}

/* NO button */
.btn-no {
  background-color: #c62828;
  box-shadow: 0 8px #660a0a;
}

.btn-no:hover {
  background-color: #e53935;
}

.btn-icon {
  font-weight: 900;
  font-size: 1.1em;
}

/* Non-Yes/No buttons */

.btn-nostate {
  position: relative;
  justify-content: center;
  white-space: nowrap;
  background-color: #6a1b9a;
}

.btn-nostate:hover {
  background-color: #7b1fa2;
}

.btn-nostate .btn-icon-left {
  position: absolute;
  left: 1.1em;
}

.btn-nostate .btn-label {
  display: inline-block;
}

.btn-organizational {
    background-color: #e53935;
    box-shadow: 0 8px #660a0a;
}

.btn-organizational:hover {
    background-color: #c62828;
}

.btn-election {
  background-color: #ff9800;
  box-shadow: 0 8px #a16100;
}

.btn-election:hover {
  background-color: #fb8c00;
}

.btn-revolution {
  background-color: #d32f2f;
  box-shadow: 0 8px #7a0000;
}

.btn-revolution:hover {
  background-color: #e53935;
}

.btn-christianity {
  background-color: #1976d2;
  box-shadow: 0 8px #0b3c78;
}

.btn-christianity:hover {
  background-color: #1e88e5;
}

.btn-islam {
  background-color: #388e3c;
  box-shadow: 0 8px #1b4d1b;
}

.btn-islam:hover {
  background-color: #43a047;
}

.btn-judaism {
  background-color: #fbc02d;
  box-shadow: 0 8px #7a5c00;
}

.btn-judaism:hover {
  background-color: #fdd835;
}

.btn-confucianism {
  background-color: #00796b;
  box-shadow: 0 8px #004d40;
}

.btn-confucianism:hover {
  background-color: #00897b;
}

.btn-illegaltrade {
    background-color: #424242;
    box-shadow: 0 8px #1b1b1b;
}

.btn-illegaltrade:hover {
    background-color: #616161;
}

.btn-insurrection {
    background-color: #880e4f;
    box-shadow: 0 8px #4a0026;
}

.btn-insurrection:hover {
    background-color: #ad1457;
}

.btn-electedofficials {
    background-color: #283593;
    box-shadow: 0 8px #0b1f6b;
}

.btn-electedofficials:hover {
    background-color: #303f9f;
}

.btn-strongman {
    background-color: #c2185b;
    box-shadow: 0 8px #6a0f2e;
}

.btn-strongman:hover {
    background-color: #e91e63;
}

.btn-strongman {
    background-color: #d81d1d;
    box-shadow: 0 8px #6a0f0f;
}

.btn-strongman:hover {
    background-color: #f44336;
}

.btn-sovereign {
    background-color: #cabf20;
    box-shadow: 0 8px #7a5c00;
}

.btn-sovereign:hover {
    background-color: #fdd835;
}

.btn-biology {
    background-color: #388e3c;
    box-shadow: 0 8px #1b4d1b;
}

.btn-biology:hover {
    background-color: #43a047;
}

.btn-spirits {
    background-color: #6a1b9a;
    box-shadow: 0 8px #3a007a;
}

.btn-spirits:hover {
    background-color: #7b1fa2;
}

.btn-apathy {
    background-color: #616161;
    box-shadow: 0 8px #1b1b1b;
}

.btn-apathy:hover {
    background-color: #757575;
}

.btn-terror {
    background-color: #b71c1c;
    box-shadow: 0 8px #6a0f0f;
}

.btn-terror:hover {
    background-color: #f44336;
}

.btn-inheritance {
    background-color: #283593;
    box-shadow: 0 8px #0b1f6b;
}

.btn-inheritance:hover {
    background-color: #303f9f;
}

.btn-wisdom {
    background-color: #00796b;
    box-shadow: 0 8px #004d40;
}

.btn-wisdom:hover {
    background-color: #00897b;
}

.btn-god {
    background-color: #a717d3;
    box-shadow: 0 8px #3d0166;
}

.btn-god:hover {
    background-color: #b715e9;
}

.btn-selection {
    background-color: #ff9800;
    box-shadow: 0 8px #a16100;
}

.btn-selection:hover {
    background-color: #fb8c00;
}

.btn-strength {
    background-color: #940f0f;
    box-shadow: 0 8px #4a0000;
}

.btn-strength:hover {
    background-color: #c62828;
}

.btn-directdemocracy {
    background-color: #0097a7;
    box-shadow: 0 8px #004d40;
}

.btn-directdemocracy:hover {
    background-color: #00acc1;
}

.btn-peacefully {
    background-color: #43a047;
    box-shadow: 0 8px #1b4d1b;
}

.btn-peacefully:hover {
    background-color: #66bb6a;
}

.btn-aggressively {
    background-color: #d32f2f;
    box-shadow: 0 8px #7a0000;
}

.btn-aggressively:hover {
    background-color: #e53935;
}

.btn-trade {
    background-color: #1976d2;
    box-shadow: 0 8px #0b3c78;
}

.btn-trade:hover {
    background-color: #1e88e5;
}

.btn-military {
    background-color: #c6a128;
    box-shadow: 0 8px #7a5c00;
}

.btn-military:hover {
    background-color: #fbc02d;
}

.result {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 22px;
}

.result h1 {
  margin: 0;
  letter-spacing: 2px;
}

.flag-wrap {
  width: min(680px, 86vw);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.result-flag {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.quote-box {
  width: min(900px, 90vw);
  padding: 0;
  background: transparent;
  border: none;
  margin: 0;
}

.quote-text,
.quote-author {
  text-transform: none;
  text-align: center;
}

.quote-text {
  font-size: 1.6rem;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0;
}

.quote-author {
  margin-top: 12px;
  font-size: 1.2rem;
  font-weight: 700;
  opacity: 0.85;
}

.result button {
  margin-top: 10px;
  padding: 0.8em 1.8em;
  border-radius: 14px;
  font-size: 1.3em;
  width: 90%;
  max-width: 400px;
}

.quiz {
  margin-top: 5vmax;
  margin-bottom: 5vmax;
}

.btn-icon-img {
  width: 1.2em;
  height: 1.2em;
  object-fit: contain;
}
@media (max-width: 600px) {
  button {
    font-size: 1.05em;
    padding: 0.75em 1em;
    width: 92%;
    border-radius: 10px;
  }

  .btn-nostate .btn-icon-left {
    position: static; /* Allows icon and text to stack/flow cleanly on small screens */
  }

  .result button {
    font-size: 1.1em;
    padding: 0.75em 1.2em;
  }
}

.btn-reconstruction {
    background-color: #DC0640;
    box-shadow: 0 8px #760322;
}

.btn-reconstruction:hover {
    background-color: #DC0640;
}


.btn-abolition {
    background-color: #00074F;
    box-shadow: 0 8px #000329;
}

.btn-abolition:hover {
    background-color: #00074F;
}

.btn-vanguard {
    background-color: #7F0000;
    box-shadow: 0 8px #400000;
}

.btn-vanguard:hover {
    background-color: #7F0000;
}

.btn-parliament {
    background-color: #007F7F;
    box-shadow: 0 8px #003F3F;
}

.btn-parliament:hover {
    background-color: #007F7F;
}

.btn-directdemocracy {
    background-color: #007F46;
    box-shadow: 0 8px #003F23;
}

.btn-directdemocracy:hover {
    background-color: #007F46;
}

.btn-planneddevelopment {
  background-color: #B2054A;
  box-shadow: 0 8px #620329;
}

.btn-planneddevelopment:hover {
  background-color: #B2054A;;
}

.btn-organicdevelopment {
  background-color: #4F7F46;
  box-shadow: 0 8px #284024;
}

.btn-organicdevelopment:hover {
  background-color: #4F7F46;
}



/* PRO-PP EXTRA BUTTON STYLES */

.btn-institutions {
  background-color: hsl(240, 35%, 40%);
  box-shadow: 0 8px hsl(250, 35%, 25%);
}

.btn-institutions:hover {
  background-color: hsl(240, 35%, 46%);
}


.btn-identity {
  background-color: hsl(80, 60%, 40%);
  box-shadow: 0 8px hsl(80, 60%, 25%);
}

.btn-identity:hover {
  background-color: hsl(80, 60%, 46%);
}


.btn-values {
  background-color: hsl(10, 60%, 40%);
  box-shadow: 0 8px hsl(10, 60%, 25%);
}

.btn-values:hover {
  background-color: hsl(10, 60%, 46%);
}


.btn-national {
  background-color: hsl(220, 50%, 30%);
  box-shadow: 0 8px hsl(220, 50%, 20%);
}

.btn-national:hover {
  background-color: hsl(220, 50%, 37%);
}


.btn-regional {
  background-color: hsl(40, 65%, 40%);
  box-shadow: 0 8px hsl(40, 65%, 25%);
}

.btn-regional:hover {
  background-color: hsl(40, 65%, 47%);
}


.btn-faircompetition {
  background-color: hsl(20, 65%, 45%);
  box-shadow: 0 8px hsl(20, 65%, 30%);
}

.btn-faircompetition:hover {
  background-color: hsl(20, 65%, 52%);
}


.btn-fairoutcomes {
  background-color: hsl(150, 65%, 35%);
  box-shadow: 0 8px hsl(150, 65%, 20%);
}

.btn-fairoutcomes:hover {
  background-color: hsl(150, 65%, 42%);
}


.btn-charisma {
  background-color: hsl(20, 40%, 30%);
  box-shadow: 0 8px hsl(20, 40%, 15%);
}

.btn-charisma:hover {
  background-color: hsl(20, 40%, 38%);
}


.btn-armedforces {
  background-color: hsl(80, 40%, 30%);
  box-shadow: 0 8px hsl(80, 40%, 15%);
}

.btn-armedforces:hover {
  background-color: hsl(80, 40%, 38%);
}


.btn-connections {
  background-color: hsl(200, 40%, 30%);
  box-shadow: 0 8px hsl(200, 40%, 15%);
}

.btn-connections:hover {
  background-color: hsl(200, 40%, 38%);
}


.btn-politics {
  background-color: hsl(30, 50%, 35%);
  box-shadow: 0 8px hsl(30, 50%, 20%);
}

.btn-politics:hover {
  background-color: hsl(30, 50%, 43%);
}


.btn-guerrilla {
  background-color: hsl(345, 50%, 35%);
  box-shadow: 0 8px hsl(345, 50%, 20%);
}

.btn-guerrilla:hover {
  background-color: hsl(345, 50%, 43%);
}


.btn-terrorism {
  background-color: hsl(60, 50%, 35%);
  box-shadow: 0 8px hsl(60, 50%, 20%);
}

.btn-terrorism:hover {
  background-color: hsl(60, 50%, 43%);
}


.btn-state {
  background-color: hsl(200, 65%, 45%);
  box-shadow: 0 8px hsl(200, 65%, 30%);
}

.btn-state:hover {
  background-color: hsl(200, 65%, 52%);
}


.btn-labor {
  background-color: hsl(350, 65%, 45%);
  box-shadow: 0 8px hsl(350, 65%, 30%);
}

.btn-labor:hover {
  background-color: hsl(350, 65%, 52%);
}


.btn-business {
  background-color: hsl(45, 70%, 45%);
  box-shadow: 0 8px hsl(45, 70%, 30%);
}

.btn-business:hover {
  background-color: hsl(45, 70%, 52%);
}


.btn-clerics {
  background-color: hsl(210, 65%, 35%);
  box-shadow: 0 8px hsl(210, 65%, 25%);
}

.btn-clerics:hover {
  background-color: hsl(210, 65%, 43%);
}


.btn-warriors {
  background-color: hsl(350, 70%, 30%);
  box-shadow: 0 8px hsl(350, 70%, 20%);
}

.btn-warriors:hover {
  background-color: hsl(350, 70%, 38%);
}


.btn-judgment {
  background-color: hsl(20, 45%, 50%);
  box-shadow: 0 8px hsl(20, 45%, 35%);
}

.btn-judgment:hover {
  background-color: hsl(20, 45%, 57%);
}


.btn-commandment {
  background-color: hsl(270, 50%, 50%);
  box-shadow: 0 8px hsl(270, 50%, 35%);
}

.btn-commandment:hover {
  background-color: hsl(270, 50%, 57%);
}


.btn-management {
  background-color: hsl(135, 45%, 40%);
  box-shadow: 0 8px hsl(135, 45%, 25%);
}

.btn-management:hover {
  background-color: hsl(135, 45%, 47%);
}


.btn-spiritual {
  background-color: hsl(245, 35%, 45%);
  box-shadow: 0 8px hsl(245, 35%, 30%);
}

.btn-spiritual:hover {
  background-color: hsl(245, 35%, 52%);
}


.btn-temporal {
  background-color: hsl(85, 40%, 35%);
  box-shadow: 0 8px hsl(85, 40%, 20%);
}

.btn-temporal:hover {
  background-color: hsl(85, 40%, 43%);
}


.btn-birthright {
  background-color: hsl(350, 60%, 50%);
  box-shadow: 0 8px hsl(350, 60%, 35%);
}

.btn-birthright:hover {
  background-color: hsl(350, 60%, 57%);
}


.btn-shareholding {
  background-color: hsl(25, 75%, 55%);
  box-shadow: 0 8px hsl(25, 75%, 40%);
}

.btn-shareholding:hover {
  background-color: hsl(25, 75%, 62%);
}


.btn-landownership {
  background-color: hsl(100, 50%, 55%);
  box-shadow: 0 8px hsl(100, 50%, 40%);
}

.btn-landownership:hover {
  background-color: hsl(100, 50%, 62%);
}


.btn-militaryhonors {
  background-color: hsl(230, 40%, 55%);
  box-shadow: 0 8px hsl(230, 40%, 40%);
}

.btn-militaryhonors:hover {
  background-color: hsl(230, 40%, 62%);
}