/* ── 1) Color vars ───────────────────────────────── */
:root {
  --blue: #007aff;
  --gray-light: #f2f2f2;
  --gray-separator: #d1d1d1;
  --text-black: #000;
  --text-white: #fff;
}

/* ── 2) Base & layout ───────────────────────────── */
body {
  margin: 0;
  background: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* desktop: stick at top */
  min-height: 100vh;
  font-family: Arial, sans-serif;
  overflow-x: hidden;      /* no horizontal scroll ever */
  overscroll-behavior: none;     /* stop rubber‑band bounce */
}

/* ── 3) Game container (desktop) ───────────────── */
#game-container {
  position: fixed;
  top: 0;                  /* stick to the top */
  left: 50%;               /* center horizontally */
  transform: translateX(-50%);
  width: 100%;
  max-width: 360px;        /* never wider than 360px */
  height: 600px;           /* desktop height */
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* ── 4) Start Screen ────────────────────────────── */
#start-screen {
  position: absolute;
  inset: 0;
  background: white;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 10;
}
#start-screen h1 {
  font-size: 2rem;
  margin: 0;
  
}
#start-screen p {
  margin: 0 0 1em;
  line-height: 1.4;
  font-size: 0.9rem;
}
#start-screen h1 + p::first-line {
  font-weight: bold;
}
#start-button {
  padding: 10px 20px;
  background: var(--blue);
  color: var(--text-white);
  border: none;
  border-radius: 5px;
  font-size: 1em;
  cursor: pointer;
  margin-bottom: 10px;
}
#intro-image {
  max-width: 80%;
  width: auto;
  height: auto;
  border-radius: 8px;
}

/* ── 5) Header (iMessage style) ───────────────── */
#header {
  height: 80px;
  display: flex;
  align-items: center;
  position: relative;      /* so that absolute children are measured from here */
  justify-content: center; /* keep the logo centered */
  padding: 15px 0;
  background: var(--gray-light);
  border-bottom: 1px solid var(--gray-separator);
}
#header-logo {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
}
/* +1 indicator next to the score */
#score-wrapper {
  position: absolute;
  left: 12px;            /* your existing */
  top: 50%;              /* your existing */
  transform: translateY(-50%);
  /* shrink wrap its contents instead of full-width flex */
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
}

/* now fine-tune the label vs the number */
#score-label {
  font-size: 1.25rem;
  font-weight: normal;
}

#score-display {
  font-size: 1.25rem;
  font-weight: bold;
}
/* absolutely‐position the +1 relative to #score-wrapper */
#plus-one {
  position: absolute;
  /* lift it above the text, and over to the right */
  top: -0.6em;
  left: 2.2em;
  font-size: 2rem;
  font-weight: bold;
  color: green;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#plus-one.show {
  opacity: 1;
}

#logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#header-subtitle {
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--text-black);
  line-height: 1;
}

/* ── 6) Chat area ──────────────────────────────── */
#chat-container {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain; 
  border-top: 1px solid var(--gray-separator);
}

/* ── 7) Messages ───────────────────────────────── */
.message {
  position: relative;
  max-width: 80%;
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 18px;
  clear: both;
  word-wrap: break-word;
  border: 1px solid #ccc;
  animation: fadeIn 100ms ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
.message.ai {
  float: left;
  background: var(--gray-light);
  color: var(--text-black);
}
.message.user {
  float: right;
  background: var(--blue);
  color: var(--text-white);
}

/* ── 8) Typing indicator ───────────────────────── */
.typing-indicator {
  float: left;
  background: var(--gray-light);
  color: #555;
  font-style: italic;
  border: 1px solid #ccc;
  border-radius: 18px;
  margin-bottom: 10px;
  padding: 6px 12px;
  box-sizing: border-box;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* ── 9) Timer bar ──────────────────────────────── */
#timer-container {
  height: 4px;
  background-color: #ccc;
  width: 100%;
  margin: 5px 0;
}
#timer-bar {
  height: 100%;
  background-color: var(--blue);
  width: 0%;
  transition: width 0.1s linear;
}

/* ── 10) Binary choices ────────────────────────── */
#binary-choices {
  display: none;
  text-align: center;
  margin-bottom: 10px;
}
#binary-choices button {
  padding: 8px 12px;
  margin: 0 5px;
  border: none;
  background: var(--blue);
  color: var(--text-white);
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}

/* ── 11) Input form ───────────────────────────── */
#input-form {
  display: flex;
  align-items: center;
  border-top: 1px solid #ddd;
  padding: 5px 4px;
  background: #fafafa;
  flex: 0 0 auto;  /* so it always stays visible at the bottom */

}
#user-input {
  flex: 1;
  margin-right: 8px;
  border: none;
  padding: 10px;
  font-size: 16px;
}
#user-input:focus { outline: none; }
#input-form button {
  margin: 0;
  background: var(--blue);
  color: var(--text-white);
  border: none;
  padding: 10px 15px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
}

/* ── 12) Game-over overlay ─────────────────────── */
#game-over {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 90%; height: 100%;
  background: rgba(255,255,255,0.95);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  z-index: 10;
}
#game-over p {
  font-size: 18px;
  margin: 0 auto 20px;
}
#game-over-buttons button {
  border: none;
  background: var(--blue);
  color: var(--text-white);
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
  margin: 6px 0;
}
#tip-container {
  margin-top: auto;      /* push to bottom of flex container */
  padding: 10px 0;
  width: 100%;
  text-align: center;
  font-style: italic;
  color: #555;
  border-top: 1px solid var(--gray-separator);
}

/* ── 13) Toast ─────────────────────────────────── */
#toast {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background: rgba(0,0,0,0.75);
  color: white;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  font-size: 0.9em;
  z-index: 20;
}
#toast.show {
  opacity: 1;
}

/* ── 14) Mobile-only pin & scroll behavior ─────── */
@media (max-width: 360px) {
  #game-container {
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
  }
  #game-container {
    position: fixed;              
    top: 0; left: 0; right: 0; bottom: 0;
    margin: 0 auto;
    width: 360px;
    height: 100vh;
  }
  #chat-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
  #input-form {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    flex: 0 0 auto;
  }
}
/* ─── Scrollable leaderboard list ───────────────── */
#leaderboard-container {
  /* keep the outer container as-is for padding & background */
  /* no height rules here */
}
#leaderboard-container ol#leaderboard {
  max-height: 180px;     /* or whatever feels right */
  overflow-y: auto;
  margin: 0;
  padding: 0 8px;
  list-style-position: inside;
}
#leaderboard-container li {
  border-bottom: 1px solid #ddd;
  padding: 4px 0;
}
/* 1) Always hide that tiny “Restart” in the leaderboard */
#leaderboard-restart {
  display: none !important;
}

/* 2) Push your Game-Over content down a bit & center it nicely */
#game-over {
  /* override the “margin-top: auto” trick that’s pushing everything up */
  justify-content: flex-start;  
  /* give some breathing room from the very top */
  padding-top: 80px;                 
}

/* 3) Pin the tip at the bottom, out of the flex flow */
#tip-container {
  /* remove auto-margin */
  margin-top: 0;    
  /* pull it out of the flow and stick to the bottom */
  position: absolute;
  bottom: 20px;
}

/* 4) Turn your big buttons into a flex row with spacing */
#game-over-buttons {
  display: flex;
  flex-wrap: wrap;        /* allow wrapping on narrow screens */
  justify-content: center;/* center them horizontally */
  gap: 10px;              /* space them out */
  margin-top: 20px;       /* lift them away from the message */
}

/* 5) Remove the old vertical margins on each button */
#game-over-buttons button {
  margin: 0;
}
/* ─── Multiple-Choice Buttons: Base Styling ───────────────── */
#choice-container button {
  background: var(--blue);
  color: var(--text-white);
  border: none;
  border-radius: 5px;
  padding: 12px 18px;
  font-size: 1rem;
  cursor: pointer;
}

/* ─── Mobile: Make them roughly 2× bigger ───────────────── */
@media (max-width: 360px) {
  #choice-container button {
    padding: 24px 36px;   /* doubled */
    font-size: 2rem;      /* doubled from 1rem */
  }
}
#logo-container #header-logo {
  margin: 0 !important;
}