html {
  font-size: clamp(12px, 1vw, 18px); /* smaller minimum + scales more on small screens */
}


:root{
  --bg:#f6efd9;
  --paper:#fff7e6;
  --accent:#8b5e3c;    /* antique brown */
  --muted:#b89a73;
  --text:#2b1b10;
  --success:#2f8f4e;
  --danger:#b93636;
  --glass: rgba(255,255,255,0.6);
  --max-width:900px;
  --radius:16px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Lora', 'Noto Serif Bengali', serif;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.02), transparent 40%),
    url('') repeat; /* optional texture image path */
  background-color:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Full screens */
.screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
}

/* Hidden helper */
.hidden{display:none}

/* Cards */
.popup-card, .center-card, .setup-card, .about-card, .quiz-card{
  width:100%;
  max-width:var(--max-width);
  background: linear-gradient(180deg, var(--paper), #fff3e6);
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow: 0 8px 30px rgba(23,15,9,0.12);
  border:1px solid rgba(0,0,0,0.04);
}

/* Portrait */
.portrait-wrap {
  width: 180px;
  height: 180px;
  border-radius: 999px;
  overflow: hidden;
  border: 6px solid rgba(139, 94, 60, 0.12);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
}

/* Intro popup layout */
.popup-card{
  display:flex;
  gap:1.125rem;
  align-items:center;
  transform:translateX(-120%);
  animation:popupIn 900ms cubic-bezier(.16,.84,.44,1) forwards;
}
.popup-card .speech{ max-width:700px; }
.speech{
  background: linear-gradient(180deg, rgba(255,250,240,0.95), rgba(255,246,233,0.96));
  padding:1.125rem;
  border-radius:12px;
  border:2px solid rgba(139,94,60,0.09);
  box-shadow: 4px 6px 20px rgba(0,0,0,0.06);
}
.speech p{ margin:0 0 0.5rem; line-height:1.45; }
.hint{ opacity:0.65; font-size:0.8125rem; }

/* Center card (main) */
.center-card{ text-align:center; padding:2.5rem 1.875rem; }
.main-actions{ display:flex; gap:1rem; justify-content:center; margin-top:0.5rem; }
.footer{ display:block; margin-top:1rem; opacity:0.65; }

/* Buttons */
.btn{
  font-family:inherit;
  border-radius:12px;
  padding:0.625rem 1.125rem;
  border:1px solid rgba(0,0,0,0.06);
  cursor:pointer;
  transition:transform 160ms ease, box-shadow 160ms ease;
  box-shadow:0 6px 18px rgba(17,11,6,0.06);
}
.btn:active{ transform:translateY(2px) }
.btn.primary{
  background:linear-gradient(180deg,var(--accent), #7a4f34);
  color:white;
  font-weight:600;
}

.btn.ghost{
  background:transparent;
  color:var(--accent);
  border:1px solid rgba(139,94,60,0.12);
}

/* Setup card */
.setup-card{ max-width:520px; text-align:left; }
.setup-card h2{ margin-top:0; font-size:1.375rem; }
.setup-card label{ display:block; margin:0.625rem 0 0.375rem; font-weight:600; }
.setup-card input[type="text"], .setup-card input[type="number"]{
  width:100%;
  padding:0.625rem 0.75rem;
  font-size:1rem;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.06);
  background:rgba(255,255,255,0.9);
}

/* Quiz card */
.quiz-card{ max-width:760px; }
.quiz-header{ display:flex; justify-content:space-between; margin-bottom:0.75rem; font-weight:600; }
.quiz-body{ background:var(--glass); padding:1.125rem; border-radius:12px; border:1px solid rgba(0,0,0,0.03); }
.question-text{ font-size:1.25rem; margin-bottom:0.875rem; text-align:center; }
.options-grid{ display:grid; gap:0.625rem; grid-template-columns:1fr 1fr; }
.options-grid button{
  padding:0.75rem;
  border-radius:10px;
  text-align:center;
  font-weight:600;
  cursor:pointer;
  border:1px solid rgba(0,0,0,0.04);
  background:linear-gradient(180deg,#fff,#fff7f0);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.options-grid button:hover{ transform:translateY(-3px) }

/* correct / wrong feedback */
.options-grid button.correct{
  background:linear-gradient(180deg, rgba(47,143,78,0.12), rgba(47,143,78,0.16));
  border-color: rgba(47,143,78,0.16);
  box-shadow:0 8px 20px rgba(47,143,78,0.06);
}
.options-grid button.wrong{
  background:linear-gradient(180deg, rgba(185,54,54,0.08), rgba(185,54,54,0.12));
  border-color: rgba(185,54,54,0.12);
  box-shadow:0 8px 20px rgba(185,54,54,0.06);
}

/* small helpers */
.row{ display:flex; gap:0.625rem; margin-top:0.75rem; }
.small{ font-size:0.8125rem; }

/* About card */
.about-card{ max-width:720px; 
  text-align:left;
font-size: 1.15rem; /* adjust size as you want */ }

/* Animations */
@keyframes popupIn{
  from{ transform:translateX(-120%); opacity:0 }
  to{ transform:translateX(0); opacity:1 }
}

/* Responsive */
@media (max-width:700px){
  .popup-card{ flex-direction:column; text-align:center; }
  .portrait-wrap{ width:140px; height:140px; }
  .options-grid{ grid-template-columns:1fr; }
  .center-card{ padding:1.25rem; }
}

.portrait-wrap-popup {
  width: 120px;      /* smaller size for popup */
  height: 120px;
  margin-bottom: 12px;
  border-radius: 999px;
  overflow: hidden;
  border: 6px solid rgba(139, 94, 60, 0.12);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.portrait-wrap-popup img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* For main menu image inside .portrait-wrap */
.portrait-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* For intro and result popup images inside .portrait-wrap-popup */
.portrait-wrap-popup img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 400px) {
  html {
    font-size: 11px; /* very small base font for tiny displays */
  }
  .portrait-wrap {
    width: 120px;
    height: 120px;
  }
  .portrait-wrap-popup {
    width: 100px;
    height: 100px;
  }
  .popup-card, .center-card, .setup-card, .quiz-card {
    padding: 12px;
  }
  .question-text {
    font-size: 1.2rem; /* smaller questions */
  }
  .options-grid button {
    padding: 8px;
    font-size: 0.9rem;
  }
}
.portrait-wrap-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* centers logo and portrait horizontally */
  gap: 8px;            /* space between logo and portrait */
}

.portrait-logo {
  width: 100px;        /* adjust as needed */
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal.hidden {
  display: none;
}
.modal-content {
  background: var(--paper);
  padding: 20px 30px;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: 0 8px 30px rgba(23,15,9,0.2);
}
.modal-content p {
  font-size: 1.2rem;
  margin-bottom: 20px;
}
#intro-quote {
  transition: opacity 0.4s ease;
}

.result-container {
  position: relative;
  padding: 2.5rem 1rem 1rem 1rem;  /* add extra top padding */

}

.result-score {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--accent);
  color: white;
  padding: 6px 12px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 10;
}

.result-quote-text {
  margin-top: 1.8rem;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.fade-in {
  animation: fadeIn 0.6s ease forwards;
}

.fade-out {
  animation: fadeOut 0.6s ease forwards;
}
/* Assuming your name input has a class or id to copy height from */
/* For example, if your name input has id="player-name" */

#player-name {
  height: 2.8em; /* example height */
  font-size: 1em;
  padding: 0 0.5em;
  box-sizing: border-box;
}

/* Container to align elements side by side */
#question-count-container {
  display: flex;
  width: 100%;          /* full width of parent */
  max-width: 300px;     /* or whatever max width you want */
  margin: 0 auto;       /* center container horizontally */
  gap: 0.2em;           /* small gap between elements */
}

/* Buttons take same height as name input */
#decrease-questions, #increase-questions {
  flex: 0 0 15%;           /* fixed-ish width relative to container */
  height: 1.85em;           /* same height as #player-name */
  font-size: 1.5em;
  cursor: pointer;
  user-select: none;
  border: 1px solid #ccc;
  background: white;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Number input fills remaining space */
#question-count {
  flex: 1 1 auto;          /* flexible width fills rest */
  height: 2.8em;           /* same height as #player-name */
  font-size: 1em;
  padding: 0 0.5em;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid #ccc;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;        /* keep consistent with buttons if needed */
}

/* Optional: Remove default arrows on some browsers */
#question-count::-webkit-inner-spin-button,
#question-count::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#decrease-questions, #increase-questions, #question-count {
  border-radius: 6px;  /* small rounded corners */
}
.setup-buttons-row {
  display: flex;
  justify-content: center;
  gap: 1em;
  margin-top: 1em;
}
.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: #fff7e6;
  padding: 1.5em 2em;
  border-radius: 8px;
  color: #000000;
  max-width: 90%;
  text-align: center;
  box-shadow: none;
}

.modal-content p {
  margin-bottom: 1em;
  font-size: 1.1em;
}

.modal-content button {
  background: #8b5e3c;
  border: none;
  padding: 0.5em 1.5em;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  color: rgb(255, 255, 255);
  font-size: 1em;
}

.hidden {
  display: none;
}





#main-menu {
  max-width: 320px;
  margin: 0 auto;
  padding: 0 1em;
  text-align: center;
}

#main-menu button.btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0.5rem 0;
  padding: 0.75rem 1.25rem;
  font-size: 1.1rem;
  border-radius: 12px;
}



#about-btn.btn.ghost {
  color: #5a3e21;       /* darker brown */
  font-weight: 700;     /* bold text */
  border-color: rgba(90, 62, 33, 0.3); /* matching darker border */
}


.fade-out {
  animation: fadeOut 0.6s ease forwards;
}

.fade-in {
  animation: fadeIn 0.6s ease forwards;
}

.fact-hint {
  font-size: 0.8rem;
  color: rgba(43, 27, 16, 0.6); /* your text color with lower opacity */
  text-align: center;
  margin: 0.5rem 0 1rem 0;
  font-style: italic;
  user-select: none;
  cursor: default;
}



#rabindra-reaction {
  position: fixed;
  top: 50%;
  left: -200px; /* Start hidden off-screen */
  transform: translateY(-50%);
  width: min(40vw, 200px); /* Responsive size */
  max-width: 200px;
  height: auto;
  z-index: 9999;
  pointer-events: none;
  transition: left 0.8s ease-in-out;
}

#rabindra-reaction.show {
  left: 20px; /* Slide in */
}