/* Reset & base */
*, *::before, *::after { box-sizing: border-box; }
body, html { margin: 0; padding: 0; height: 100%; font-family: sans-serif; }

/* Screen layout */
.screen {
  display: none;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}
.screen.active { display: flex; }

/* Headings */
h1, h2 { font-size: 2rem; margin: 1rem 0; }

/* Buttons */
button {
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: .5rem;
  padding: .75rem 1.5rem;
  font-size: 1rem;
  font-weight: bold;
  margin: .5rem;
  cursor: pointer;
  transition: background-color .3s ease, transform .1s ease;
}
button:hover { background-color: #0056b3; }
button:active { transform: scale(.97); }

/* Icon button (speaker) */
.icon-button {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  margin-top: 1rem;
}

/* Home button */
.home-btn {
  position: absolute; top: 10px; left: 10px;
  display: none; z-index: 1000;
}

/* ───────────── Dropdowns (shared) ───────────── */
#week-filter,
#test-week-filter,
#char-week-filter,
#picture-difficulty-filter,
#picture-category-filter,
#picture-week-filter,
#image-difficulty-filter,
#image-category-filter,
#image-week-filter,
#phrase-rec-diff-filter,
#phrase-rec-cat-filter,
#phrase-rec-week-filter {
  position: absolute; top: 20px;
  padding: .5rem;
  font-size: 1rem;
  border-radius: .25rem;
  border: 1px solid #ccc;
  background: #fff;
  z-index: 1000;
}

/* offsets (shared) */
#week-filter,
#test-week-filter,
#char-week-filter,
#picture-difficulty-filter,
#image-difficulty-filter,
#phrase-rec-diff-filter { left: 100px; }

#picture-category-filter,
#image-category-filter,
#phrase-rec-cat-filter   { left: 240px; }

#picture-week-filter,
#image-week-filter,
#phrase-rec-week-filter  { left: 380px; }

/* Phrase styling */
.phrase-container {
  font-family: "KaiTi","STKaiti",serif;
  font-weight: bold;
  font-size: 8rem;
  color: black;
  cursor: default;
  margin: 2rem 0 1.5rem;
}

/* Hanzi chars */
.hanzi-char { display: inline-block; transition: color .1s ease; }

/* Revision controls */
#revision-controls { display: flex; align-items: center; z-index: 1; }

/* Pinyin display */
#pinyin-display {
  position: absolute; bottom: 10px; width: 100%;
  text-align: center; font-family: Calibri, sans-serif;
  font-weight: bold; display: none; color: black;
}

#test-chars-screen .phrase-container { letter-spacing: 4rem; }

/* ───────────── Score boxes (shared) ───────────── */
#score-display,
#char-score-display,
#picture-score-display,
#image-hanzi-score-display,
#phrase-rec-score-display {
  position: absolute; top: 20px; right: 20px;
  text-align: right; font-family: sans-serif; color: #333;
}
.percent { font-size: 2rem; font-weight: bold; line-height:1; }
.count   { font-size: 1rem; line-height:1; }

/* ───────────── Picture Test ───────────── */
#picture-test-screen .phrase-container {
  display: flex; justify-content: center; align-items: center;
  margin-top: 4rem;
}
.picture-btn {
  background: #fff; border: 2px solid #ccc;
  margin: 0 1.5rem; padding: .5rem;
  cursor: pointer; transition: transform .1s ease, box-shadow .3s ease;
  border-radius: .5rem;
}
.picture-btn:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
.picture-btn img { width: 12rem; height: 12rem; object-fit: contain; display: block; }
.picture-btn.correct   { background-color: #28a745; border-color: #28a745; }
.picture-btn.incorrect { background-color: #dc3545; border-color: #dc3545; }

/* ───────────── Image→Hanzi Test ───────────── */
.image-hanzi-test-container {
  position: relative; width: 60rem; height: 60rem; margin-top: 4rem;
}
.image-hanzi-test-container img {
  position: absolute; top:50%; left:50%;
  transform: translate(-50%,-50%);
  width: 24rem; height: 24rem; object-fit: contain;
}
.image-hanzi-btn {
  position: absolute;
  background: #fff; border: 2px solid #ccc;
  font-family: "KaiTi","STKaiti",serif;
  font-size: 3.75rem;
  font-weight: bold; color: black;
  cursor: pointer; transition: box-shadow .3s ease, transform .1s ease;
}
.image-hanzi-btn:hover {
  background-color: #fff !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.top-left     { top:5%;  left:2%; }
.top-right    { top:5%;  right:2%; }
.bottom-left  { bottom:5%; left:2%; }
.bottom-right { bottom:5%; right:2%; }
.image-hanzi-btn.correct   { color: #28a745; }
.image-hanzi-btn.incorrect { color: #dc3545; }

/* ───────────── Phrase Recognition (NEW) ───────────── */

/* container for vertical list */
.phrase-rec-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  margin-top: 3.5rem;   /* pushes below dropdowns */
}

/* answer buttons: same visual look as Image→Hanzi but not absolute */
.phrase-rec-btn {
  background: #fff;
  border: 2px solid #ccc;
  border-radius: .5rem;
  padding: .5rem 1rem;
  font-family: "KaiTi","STKaiti",serif;
  font-size: 3.75rem;
  font-weight: bold;
  color: black;
  cursor: pointer;
  transition: box-shadow .3s ease, transform .1s ease;
  max-width: 420px;
  min-width: 60%;
  text-align: center;
}
.phrase-rec-btn:hover     { box-shadow: 0 4px 8px rgba(0,0,0,.2); }
.phrase-rec-btn.correct   { color: #28a745; }
.phrase-rec-btn.incorrect { color: #dc3545; }

/* keep buttons clear of replay icon */
#phrase-rec-choices { margin-bottom: 2.5rem; }

/* ─── Revision in-place test buttons ───────────────────────────*/
#test-this-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ff9800;          /* orange */
}

#test-this-btn { background-color: #ff9800; }        /* default orange */
#test-this-btn:hover { background-color: #cc7a00; }  /* darker on hover */


/* replay icon centred below navigation */
#rev-replay-btn {
  display: block;        /* start on a new line */
  margin: 1.2rem auto 0; /* auto left/right centres it, top gap 1.2 rem */
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
}

#rev-replay-btn:hover { transform: scale(1.05); }


/* --- Revision in-place test additions ----------------------------------- */

/* score box in same top-right spot as other modes */
#rev-score {
  position: absolute;
  top: 20px;
  right: 20px;
  text-align: right;
  font-family: sans-serif;
  color: #333;
}

/* ─────────── Responsive adjustments ─────────── */
.screen {               /* allow scroll on very tall pages           */
  overflow-y: auto;
  padding: 1rem;        /* keep content off the edges on phones      */
}

/* everything up here (≥ 769 px) keeps its desktop sizing  */

/* ≤ 768 px  –– “tablet” */
@media (max-width: 768px) {

  /* scale big Hanzi line gracefully: 4–8 rem depending on width */
  .phrase-container       { font-size: clamp(4rem, 10vw, 8rem); }

  /* phrase-recognition & image→Hanzi answer buttons             */
  .phrase-rec-btn,
  .image-hanzi-btn        { font-size: clamp(2.5rem, 6vw, 3.75rem); }

  /* test-chars wide spacing                                      */
  #test-chars-screen .phrase-container { letter-spacing: 2rem; }

  /* score box in top-right                                       */
  .percent { font-size: clamp(1.5rem, 4vw, 2rem); }
  .count   { font-size: clamp(.875rem, 2vw, 1rem); }

  /* dropdown toolbar –– stack in a single row that wraps         */
  #week-filter,
  #test-week-filter,
  #char-week-filter,
  #picture-difficulty-filter,
  #picture-category-filter,
  #picture-week-filter,
  #image-difficulty-filter,
  #image-category-filter,
  #image-week-filter,
  #phrase-rec-diff-filter,
  #phrase-rec-cat-filter,
  #phrase-rec-week-filter {
    position: static;       /* let normal flow handle placement     */
    width: auto;
    margin: .25rem .5rem;
  }

.screen.active {           /* mobile layout tweaks */
  flex-direction: column;
  align-items: center;
}


/* ≤ 480 px  –– “phone” */
@media (max-width: 480px) {

  /* buttons should fill most of the width for easy tapping        */
  button,
  .phrase-rec-btn,
  .image-hanzi-btn,
  .picture-btn {
    width: 100%;
    max-width: 100%;
  }

  /* picture test thumbnails smaller                               */
  .picture-btn img { width: 9rem; height: 9rem; }

  /* tighten spacing                                               */
  .phrase-container { margin-top: 1rem; }
  #revision-controls button { margin: .25rem; }
}