/* ---------------------------

   Polyglot Trainer — refined UI

---------------------------- */



/* Theme tokens */

:root{

  --bg0: #0b1220;

  --bg1: #101b2e;

  --surface: rgba(255,255,255,0.78);

  --surface-strong: rgba(255,255,255,0.92);

  --border: rgba(20, 30, 50, 0.12);

  --text: #0f172a;

  --muted: rgba(15, 23, 42, 0.65);



  --pill: rgba(255,255,255,0.6);

  --pill-border: rgba(20, 30, 50, 0.12);



  --shadow: 0 18px 55px rgba(0,0,0,0.20);

  --shadow-soft: 0 10px 30px rgba(0,0,0,0.10);



  --radius: 18px;

  --radius-sm: 12px;



  --focus: rgba(59, 130, 246, 0.35);

}



/* Base */

* { box-sizing: border-box; }



html, body {
  min-height: 100%;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 22px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: #f3eedf;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #f3eedf url("../img/english-writing-background.jpg");



  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.portraitOnlyOverlay {
  display: none;
}

.practiceOverlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 15, 30, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.practiceOverlay[hidden] { display: none; }

.practiceOverlay__panel {
  width: min(720px, 100%);
  height: min(var(--practice-height, 540px), calc(100dvh - 36px));
  overflow: hidden;
  border-radius: 22px;
  background: #f8fafc;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

.practiceOverlay__frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #f8fafc;
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  body {
    overflow: hidden;
  }

  .portraitOnlyOverlay {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.72);
    color: #0f172a;
  }

  .portraitOnlyOverlay__box {
    max-width: 360px;
    padding: 22px 24px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.95);
    text-align: center;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  }

  .portraitOnlyOverlay__title {
    font-weight: 900;
    font-size: 1.2rem;
    margin-bottom: 6px;
  }

  .portraitOnlyOverlay__text {
    color: rgba(15, 23, 42, 0.68);
    font-weight: 650;
  }
}








/* Card */

.card {
  position: relative;
  overflow: hidden;
  width: min(960px, calc(100vw - 44px));
  padding: 30px 34px 32px;
  border-radius: var(--radius);

  border: 1px solid rgba(255,255,255,0.20);



  background: linear-gradient(180deg, var(--surface), rgba(255,255,255,0.62));

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);



  box-shadow: var(--shadow);
}

.card.perfectCelebration {
  animation: perfectCardGlow 1.1s ease-out;
}

.confettiBurst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

.confettiPiece {
  position: absolute;
  top: 18%;
  left: var(--x);
  width: 8px;
  height: 14px;
  border-radius: 2px;
  background: hsl(var(--hue), 88%, 58%);
  opacity: 0;
  animation: confettiFall 1.05s ease-out var(--delay) forwards;
}

.confettiPiece:nth-child(3n) {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.confettiPiece:nth-child(4n) {
  width: 12px;
  height: 6px;
}

@keyframes perfectCardGlow {
  0% {
    background: linear-gradient(180deg, rgba(220,252,231,0.96), rgba(187,247,208,0.78));
    box-shadow: 0 0 0 0 rgba(34,197,94,0.38), var(--shadow);
  }
  45% {
    background: linear-gradient(180deg, rgba(220,252,231,0.94), rgba(255,255,255,0.72));
    box-shadow: 0 0 0 12px rgba(34,197,94,0.10), var(--shadow);
  }
  100% {
    background: linear-gradient(180deg, var(--surface), rgba(255,255,255,0.62));
    box-shadow: var(--shadow);
  }
}

@keyframes confettiFall {
  0% {
    opacity: 0;
    transform: translate(-50%, -20px) rotate(0deg) scale(0.7);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), var(--dy)) rotate(var(--rot)) scale(1);
  }
}


/* Header */

h1 {

  text-align: center;

  margin: 4px 0 16px;

  font-size: clamp(1.6rem, 2.3vw, 2rem);

  letter-spacing: -0.02em;

}



/* Layout helpers */

.row {

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

}



/* Pills */

.pill {

  padding: 7px 14px;

  border-radius: 999px;

  font-size: 1rem;

  color: rgba(15,23,42,0.75);



  background: var(--pill);

  border: 1px solid var(--pill-border);

  box-shadow: 0 6px 16px rgba(0,0,0,0.06);



  flex: 1 1 auto;

  min-width: 0;

  max-width: 42%;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



/* Prompt (BIGGER & CLEARER) */

.prompt {

  text-align: center;

  margin: 18px 0 20px;

  font-size: clamp(1.8rem, 3vw, 2.4rem);

  font-weight: 700;

  letter-spacing: -0.015em;

}



/* Labels / muted text */

.muted {

  color: var(--muted);

  text-align: center;

  margin-top: 12px;

  font-size: 1.05rem;

}



.label {

  margin: 8px 0 10px;

}



/* Input (BIGGER TYPING) */

textarea {
  width: 100%;
  min-height: 120px;
  padding: 16px 18px;
  font-family: inherit;
  font-size: 1.6rem;
  line-height: 1.4;


  border-radius: var(--radius-sm);

  border: 1px solid var(--border);



  background: var(--surface-strong);

  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), var(--shadow-soft);



  outline: none;

  transition: box-shadow 160ms ease, border-color 160ms ease;

}



textarea::placeholder {

  color: rgba(15,23,42,0.35);

}



textarea:focus {
  border-color: rgba(37,99,235,0.35);
  box-shadow: 0 0 0 4px var(--focus), inset 0 1px 0 rgba(255,255,255,0.85), var(--shadow-soft);
}

#userAnswer {
  min-height: 0;
  height: calc(1.4em + 32px);
  max-height: 34vh;
  overflow-y: hidden;
  resize: none;
}

.studentClozeAnswer {
  padding: 18px 20px;
  border: 2px solid rgba(99, 102, 241, 0.35);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  color: #111827;
  font: 700 clamp(1.35rem, 3vw, 2rem)/1.9 "Comic Sans MS", "Segoe Print", system-ui, sans-serif;
  text-align: center;
  overflow-wrap: anywhere;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.10), var(--shadow-soft);
}

.studentClozeBlank {
  width: calc(var(--cloze-chars, 6) * 1ch);
  min-width: 4ch;
  margin: 0 0.18em;
  padding: 0.05em 0.18em;
  border: 0;
  border-bottom: 3px solid #111827;
  border-radius: 0;
  background: rgba(238, 242, 255, 0.75);
  color: #172554;
  font: inherit;
  line-height: 1.25;
  text-align: center;
  outline: none;
}

.studentClozeBlank:focus {
  border-bottom-color: #4f46e5;
  background: #eef2ff;
  box-shadow: 0 3px 0 rgba(79, 70, 229, 0.18);
}

.studentClozeBlank[readonly] { opacity: 0.75; }

.langDirection--single .pill:not([hidden]) {
  flex: 1 1 100%;
  max-width: none;
  text-align: center;
}

/* Smartboard mode */
body.smartboard-mode {
  align-items: flex-start;
  padding: 16px;
  overflow-y: auto;
}

body.smartboard-mode .portraitOnlyOverlay {
  display: none !important;
}

body.smartboard-mode .card {
  width: min(1500px, calc(100vw - 32px));
  min-height: calc(100vh - 32px);
  padding: 20px 28px;
}

body.smartboard-mode .langDirection {
  display: none;
}

body.smartboard-mode .progressWrap {
  margin-top: 10px;
}

.smartboardPromptGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: center;
  gap: clamp(8px, 1.5vw, 24px);
  margin: clamp(18px, 3vh, 34px) 1.5vw clamp(12px, 2vh, 24px);
  padding: 4px 10px;
}

.smartboardPromptCard {
  --bubble-color: rgba(255, 255, 255, 0.72);
  position: relative;
  min-height: 112px;
  padding: 18px 22px;
  border: 0;
  border-radius: 46% 54% 48% 52% / 55% 46% 54% 45%;
  background: var(--bubble-color);
  display: flex;
  isolation: isolate;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 12px 28px rgba(51, 65, 85, 0.12);
  transform: rotate(-1.2deg) translateY(2px);
}

.smartboardDictationListen {
  color: #172554;
  font: 700 clamp(1.65rem, 2.7vw, 2.7rem) "Comic Sans MS", "Segoe Print", system-ui, sans-serif;
  cursor: pointer;
}

.smartboardDictationListen:hover,
.smartboardDictationListen:focus-visible {
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.24);
  outline: 3px solid rgba(37, 99, 235, 0.38);
  outline-offset: 4px;
}

.smartboardPromptCard::before,
.smartboardPromptCard::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: inherit;
}

.smartboardPromptCard::before {
  width: 34px;
  height: 34px;
  left: 7%;
  bottom: -7px;
}

.smartboardPromptCard::after {
  width: 17px;
  height: 17px;
  right: 9%;
  top: -3px;
}

.smartboardPromptCard[data-position="2"] {
  --bubble-color: rgba(254, 215, 170, 0.76);
  transform: rotate(1.3deg) translateY(-8px);
}

.smartboardPromptCard[data-position="3"] {
  --bubble-color: rgba(191, 219, 254, 0.76);
  transform: rotate(-0.7deg) translateY(10px);
}

.smartboardPromptCard[data-position="4"] {
  --bubble-color: rgba(221, 214, 254, 0.78);
  transform: rotate(1deg) translateY(-2px);
}

.smartboardPromptCard[data-position="5"] {
  --bubble-color: rgba(187, 247, 208, 0.76);
  transform: rotate(-1.4deg) translateY(7px);
}

.smartboardPromptCard[data-position="6"] {
  --bubble-color: rgba(254, 202, 202, 0.76);
  transform: rotate(0.8deg) translateY(-5px);
}

.smartboardPromptLanguage {
  display: none;
}

.smartboardPromptPhrase {
  color: #172554;
  font-family: "Comic Sans MS", "Segoe Print", "Arial Rounded MT Bold", system-ui, sans-serif;
  font-size: clamp(1.65rem, 2.7vw, 2.7rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.72);
}

.smartboardPromptCard:nth-child(2n) .smartboardPromptPhrase {
  color: #7c2d12;
}

.smartboardPromptCard:nth-child(3n) .smartboardPromptPhrase {
  color: #4c1d95;
}

.smartboardPromptCard:nth-child(5n) .smartboardPromptPhrase {
  color: #14532d;
}

.smartboardWriting {
  position: relative;
}

.smartboardWriting:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.smartboardWriting canvas {
  display: block;
  width: 100%;
  height: clamp(240px, 36vh, 390px);
  border: 2px solid rgba(15, 23, 42, 0.22);
  border-radius: 14px;
  background: #fffef8;
  box-shadow: var(--shadow-soft);
  touch-action: none;
  cursor: crosshair;
}

.smartboardWriting[data-paper-size="small"] canvas {
  height: clamp(190px, 27vh, 280px);
}

.smartboardWriting[data-paper-size="large"] canvas {
  height: clamp(340px, 48vh, 520px);
}

.smartboardWriting[data-paper-size="extra-large"] canvas {
  height: clamp(430px, 60vh, 650px);
}

.smartboardPaperControls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 0 4px;
}

.smartboardPaperControls button {
  min-width: 54px;
  min-height: 48px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 1rem;
  touch-action: manipulation;
}

.smartboardPaperControls button:first-child,
.smartboardPaperControls button:nth-child(2) {
  padding: 6px;
  font-size: 1.65rem;
  font-weight: 800;
}

.smartboardPaperControls button:disabled {
  opacity: 0.38;
}

.smartboardPaperControls button[aria-pressed="true"] {
  color: #7c2d12;
  border-color: rgba(249, 115, 22, 0.7);
  background: #ffedd5;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
}

body.smartboard-mode #keyboardToggleBtn,
body.smartboard-mode #copyAnswerBtn,
body.smartboard-mode #saveNotesBtn,
body.smartboard-mode #readNotesBtn,
body.smartboard-mode #wasRightWrap {
  display: none !important;
}

body.smartboard-mode .mainActionBtn {
  min-width: 150px;
  min-height: 64px;
  font-size: 1.25rem;
}

.smartboardEndOverlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  overflow-y: auto;
  padding: 20px;
  background: rgba(15, 23, 42, 0.78);
}

.smartboardEndCard {
  width: min(1500px, 100%);
  margin: 0 auto;
  padding: 24px;
  border-radius: 20px;
  background: #f8fafc;
}

.smartboardEndCard > h2 {
  margin: 0 0 18px;
  font-size: 2rem;
}

.smartboardEndGallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(560px, 100%), 1fr));
  gap: 18px;
}

.smartboardEndItem {
  overflow: hidden;
  padding: 16px;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  background: white;
}

.smartboardEndItem h3 {
  margin: 0 0 10px;
  font-size:1.05rem;
}

.smartboardEndSources {
  display:grid;
  gap:7px;
  margin-top:10px;
  padding:12px 14px;
  border-radius:10px;
  background:#f1f5f9;
  color: #334155;
  font-size: 1.05rem;
  font-weight: 650;
}

.smartboardEndItem img {
  display: block;
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.smartboardEndTranslations {
  margin-top:12px;
  border-top:1px solid #e2e8f0;
  padding-top:10px;
}

.smartboardEndTranslations summary {
  width:fit-content;
  padding:8px 12px;
  border-radius:999px;
  color:#334155;
  background:#f1f5f9;
  font-size:0.98rem;
  font-weight:750;
  cursor:pointer;
  user-select:none;
}

.smartboardEndTranslations[open] summary {
  color:#1e3a8a;
  background:#dbeafe;
}

.smartboardEndActions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
  background: linear-gradient(transparent, #f8fafc 30%);
}

/* Buttons */
button {

  padding: 12px 18px;

  font-size: 1.05rem;

  border-radius: 999px;

  border: 1px solid var(--border);



  background: rgba(255,255,255,0.75);

  color: rgba(15,23,42,0.85);



  cursor: pointer;

  box-shadow: 0 10px 18px rgba(0,0,0,0.08);

  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;

}



button:hover {

  transform: translateY(-1px);

  background: rgba(255,255,255,0.92);

  box-shadow: 0 14px 22px rgba(0,0,0,0.11);

}



/* Answer block */

.answerBlock {

  margin-top: 18px;

}



/* Character-by-character diff (WHAT YOU TYPED) */

.diffText {

  margin-top: 8px;

  padding: 16px 18px;

  border-radius: var(--radius-sm);

  text-align: center;

  font-size: 1.6rem;

  line-height: 1.4;



  background: rgba(255,255,255,0.88);

  border: 1px solid rgba(20,30,50,0.12);

  box-shadow: var(--shadow-soft);

}



/* Wrong characters */

.bad {

  color: #b91c1c;

  font-weight: 700;

}



/* Expected answer */

.answer {

  margin-top: 10px;

  padding: 14px 16px;

  border-radius: var(--radius-sm);

  text-align: center;

  font-size: 1.3rem;

  font-weight: 600;



  border: 1px dashed rgba(37,99,235,0.35);

  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.76));

  box-shadow: 0 12px 24px rgba(0,0,0,0.10);

}



/* Small screens */

@media (max-width: 520px) {

  .card { padding: 20px 18px 18px; }

  textarea { font-size: 1.4rem; min-height: 110px; }

  .prompt { font-size: 1.9rem; }

}



/* Selection */

::selection {

  background: rgba(37,99,235,0.22);

}



/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

  * { transition: none !important; }

}



.prompt { cursor: pointer; }
.prompt:hover { text-decoration: underline; }

.ttsVoiceDialog {
  width: min(92vw, 30rem);
  padding: 0;
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 1.25rem 4rem rgba(0, 0, 0, 0.28);
}

.ttsVoiceDialog::backdrop { background: rgba(15, 23, 42, 0.58); }

.ttsVoiceDialog__panel {
  display: grid;
  gap: 0.8rem;
  padding: 1.25rem;
}

.ttsVoiceDialog__panel h2,
.ttsVoiceDialog__panel p { margin: 0; }

.ttsVoiceDialog__panel select {
  width: 100%;
  min-height: 2.75rem;
}

.ttsVoiceDialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}
.prompt--audio {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 82px;
  text-decoration: none;
}
.prompt--audio:hover { text-decoration: none; }
.prompt__speakerIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid rgba(37,99,235,0.28);
  background: rgba(255,255,255,0.76);
  box-shadow: 0 12px 26px rgba(0,0,0,0.12);
  font-size: 2.2rem;
  line-height: 1;
}

/* Progress bar (10 per set) */
.progressWrap {

  margin: 16px 0 10px;

}



.progressTop {

  display: flex;

  justify-content: center;

  margin-bottom: 8px;

}



.progressLabel {

  font-size: 1rem;

  color: var(--muted);

  background: rgba(255,255,255,0.55);

  border: 1px solid var(--pill-border);

  border-radius: 999px;

  padding: 6px 12px;

  box-shadow: 0 6px 16px rgba(0,0,0,0.06);

}



.progressBar {

  height: 14px;

  border-radius: 999px;

  overflow: hidden;

  border: 1px solid rgba(20, 30, 50, 0.12);

  background: rgba(255,255,255,0.55);

  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), var(--shadow-soft);

}



.progressFill {

  height: 100%;

  width: 0%;

  border-radius: 999px;

  background: rgba(37,99,235,0.55);

  transition: width 200ms ease;

}

.sm_quickpicks{

  display:flex; flex-wrap:wrap; gap:8px;

  margin: 4px 0 12px;

}

.sm_chip{

  padding:8px 12px;

  border-radius:999px;

  border:1px solid rgba(0,0,0,0.14);

  background:rgba(255,255,255,0.75);

  cursor:pointer;

  font-size:0.9rem;

}

.sm_chip:hover{ background:rgba(255,255,255,0.95); }

.sm_chip_secondary{

  border-color: rgba(37,99,235,0.25);

  background: rgba(37,99,235,0.08);

}

.sm_quickwrap{

  margin: 4px 0 10px;

  padding-top: 6px;

  border-top: 1px solid rgba(0,0,0,0.06);

}

.sm_quicksummary{

  display:flex; align-items:center; gap:8px;

  cursor:pointer;

  user-select:none;

  color: rgba(15,23,42,0.70);

  font-size: 0.92rem;

  padding: 6px 2px;

}

.sm_quicksummary:hover{ color: rgba(15,23,42,0.85); }

.sm_quickpicks{

  display:flex; flex-wrap:wrap; gap:8px;

  margin-top: 8px;

}

.sm_chip{

  padding:7px 10px;

  border-radius:999px;

  border:1px solid rgba(0,0,0,0.10);

  background: rgba(255,255,255,0.55);

  cursor:pointer;

  font-size:0.88rem;

}

.sm_chip:hover{ background: rgba(255,255,255,0.85); }

.sm_chip_select{

  border-color: rgba(37,99,235,0.18);

}

.sm_chip_clear{

  opacity: 0.85;

}

.bigTick {

  font-size: 4rem;          /* MUCH bigger */

  display: inline-block;

  animation: popTick 0.3s ease-out;

}



@keyframes popTick {

  0%   { transform: scale(0.5); opacity: 0; }

  70%  { transform: scale(1.2); opacity: 1; }

  100% { transform: scale(1); }

}



.correctFlash {

  background: #d1fae5;      /* soft green */

  border-radius: 12px;

  padding: 10px;

  transition: background 0.3s ease;

}

.langDirection {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 16px;

  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}


.arrow {

  font-size: 1.9rem;

  font-weight: 900;

  color: #1d4ed8;

  margin: 0 4px;

  flex: 0 0 auto;

}

.sourceLang {

  background: rgba(37, 99, 235, 0.14);

  border: 1px solid rgba(37, 99, 235, 0.35);

  color: #1e40af;

  font-weight: 600;

  box-shadow: none;   /* remove glow */

}



.targetLang {

  background: rgba(37, 99, 235, 0.14);

  border: 1px solid rgba(37, 99, 235, 0.35);

  color: #1e40af;

  font-weight: 700;

  box-shadow: none;   /* remove glow */

}

/* Make mixed-direction text behave predictably */

#expectedText {

  unicode-bidi: plaintext; /* browser decides direction per paragraph */

}



/* When we mark it RTL, keep punctuation attached correctly */

#expectedText.rtl {

  direction: rtl;

  unicode-bidi: isolate;

}



/* Make prompt behave predictably with RTL punctuation */

#promptText {

  unicode-bidi: plaintext;

}



#promptText.rtl {

  direction: rtl;

  unicode-bidi: isolate;

}



.actionRow {

  display: flex;

  align-items: center;

  margin-top: 14px;

}



#mainActionBtn {

  margin-left: auto;   /* pushes this button to the right */

}



.leftActions,

.rightActions {

  display: flex;

  align-items: center;

}



.mainActionBtn {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.85);
  cursor: pointer;

  font: inherit;

}



.mainActionBtn:hover {
  background: rgba(255,255,255,0.98);
}

.exitToProgressBtn {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(99,102,241,0.24);
  background: rgba(255,255,255,0.74);
  color: rgba(49,46,129,0.9);
  cursor: pointer;
  font: inherit;
}

.exitToProgressBtn:hover {
  background: rgba(255,255,255,0.94);
}

.iconActionBtn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 50px;
  min-height: 42px;
  padding: 7px 10px;
  line-height: 1;
}

.iconActionBtn__icon {
  font-size: 1.1rem;
  line-height: 1;
}

.iconActionBtn__label {
  font-size: 0.62rem;
  line-height: 1;
  white-space: nowrap;
}

.mainActionBtn.iconActionBtn {
  min-width: 82px;
}

.inputTools {
  display: flex;
  justify-content: flex-end;
  margin: 8px 0;
}


.keyboardToggleBtn {

  padding: 8px 12px;

  border: 1px solid #ccc;

  border-radius: 10px;

  background: #fff;

  cursor: pointer;

  font: inherit;

}



.keyboardToggleBtn:hover {

  background: #f7f7f7;

}



/* keyboard container */

.keyboardPanel {

  margin-top: 10px;

  width: 100%;

  max-width: 100%;

  overflow: hidden;

}



/* virtual keyboard */

.vkbd {

  width: 100%;

  max-width: 100%;

  overflow: hidden;

}



.vkbd__rows {

  width: 100%;

  overflow: hidden;

  gap: 4px;

}



.vkbd--desktop .vkbd__row {

  display: flex;

  justify-content: center;

  gap: 4px;

  width: 100%;

}



.vkbd--desktop .vkbd__key {

  flex: 1 1 0;

  min-width: 0;

  max-width: 86px;

  padding: 10px 6px;

  font-size: 0.95rem;

}



.vkbd--desktop .vkbd__key--wide {

  flex: 1.45 1 0;

  min-width: 0;

}



.vkbd--desktop .vkbd__key--space {

  flex: 5 1 0;

  max-width: 520px;

  min-width: 0;

}



.vkbd--mobile .vkbd__row {

  display: flex;

  gap: 5px;

  width: 100%;

  justify-content: center;

}



.vkbd--mobile .vkbd__key {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}

.vkbd__key {
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 120ms ease;
}

.vkbd__key--pressed {
  background: rgba(99,102,241,0.24);
  border-color: rgba(79,70,229,0.42);
  box-shadow: inset 0 2px 7px rgba(79,70,229,0.24), 0 4px 10px rgba(79,70,229,0.16);
  transform: translateY(1px) scale(0.98);
}

.vkbd--mobile .vkbd__key--wide {
  flex: 1.5 1 0;
}


.vkbd--mobile .vkbd__key--space {

  flex: 5 1 0;

}



@media (max-width: 520px) {

  .vkbd__btn {

    padding: 7px 8px;

    font-size: 0.9rem;

  }



  .vkbd--mobile .vkbd__key {

    padding: 9px 4px;

    font-size: 0.85rem;

    border-radius: 10px;

  }



  .vkbd--mobile .vkbd__row {

    gap: 3px;

  }

}



/* Search support for large language lists */

.sm_searchwrap{

  margin: 0 0 12px;

}



.sm_search{

  width: 100%;

  padding: 11px 13px;

  border-radius: 12px;

  border: 1px solid rgba(0,0,0,0.10);

  background: rgba(255,255,255,0.78);

  color: var(--text);

  font: inherit;

  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);

}



.sm_search:focus{

  outline: none;

  border-color: rgba(37,99,235,0.35);

  box-shadow: 0 0 0 4px rgba(59,130,246,0.18);

}



.sm_searchmeta{

  margin-top: 8px;

  font-size: 0.9rem;

  color: var(--muted);

}



.sm_empty{

  display: none;

  padding: 14px;

  border-radius: 12px;

  border: 1px dashed rgba(0,0,0,0.10);

  background: rgba(255,255,255,0.55);

  color: rgba(15,23,42,0.72);

  text-align: center;

  margin-bottom: 14px;

}



.sm_favourites {

  flex: 1 1 auto;

  min-height: 0;

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

  padding-right: 2px;

}



.sm_favouritesList {

  display: grid;

  gap: 10px;

  margin-bottom: 12px;

}



.sm_favouriteItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.sm_favouriteItem--readonly {
  grid-template-columns: minmax(0, 1fr);
}

.sm_favouriteMain {
  min-width: 0;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 4px;

  padding: 13px 14px;

  border-radius: 12px;

  border: 1px solid rgba(0,0,0,0.10);

  background: rgba(255,255,255,0.74);

  text-align: left;

  box-shadow: 0 10px 18px rgba(0,0,0,0.08);

}



.sm_favouriteName {

  max-width: 100%;

  overflow-wrap: anywhere;

  color: #0f172a;

  font-weight: 720;

}



.sm_favouriteMeta {

  color: var(--muted);

  font-size: 0.88rem;

}



.sm_favouriteRemove {

  align-self: stretch;

  padding: 10px 12px;

  border-radius: 12px;

  border: 1px solid rgba(185,28,28,0.16);

  background: rgba(255,255,255,0.66);

  color: #991b1b;

  box-shadow: 0 10px 18px rgba(0,0,0,0.06);

}



.sm_favouritesEmpty {

  padding: 16px;

  border-radius: 12px;

  border: 1px dashed rgba(0,0,0,0.12);

  background: rgba(255,255,255,0.56);

  color: rgba(15,23,42,0.72);

  text-align: center;

}



@media (max-width: 600px) {

  .sm_favouriteItem {

    grid-template-columns: 1fr;

  }

}





.inputWrap {

  position: relative;

}



.chineseImePanel {

  position: fixed;

  z-index: 99999;

  box-sizing: border-box;

  pointer-events: none;



  padding: 12px 14px;

  border-radius: 14px;



  background: #ffffff;   /* solid background */



  border: 1px solid rgba(0,0,0,0.12);



  box-shadow:

    0 16px 40px rgba(0,0,0,0.20),

    0 4px 10px rgba(0,0,0,0.12);

}



.chineseImePanel[hidden] {

  display: none !important;

}



.chineseImeComposition {

  display: block;

  width: 100%;

  font-size: 0.9rem;

  opacity: 0.65;

  padding: 0 2px 6px;

  margin: 0 0 8px 0;

  border-bottom: 1px solid rgba(0,0,0,0.08);

  text-align: left;

}



.chineseImeChoices {

  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 8px;

  width: 100%;

}



.chineseImeChip {

  display: flex;

  align-items: center;

  justify-content: flex-start;

  gap: 6px;



  width: 100%;

  min-width: 0;

  box-sizing: border-box;



  border: 1px solid #bbb;

  border-radius: 999px;

  background: white;

  padding: 6px 10px;

  cursor: pointer;

  font: inherit;

  pointer-events: auto;

}



.chineseImeChip small {

  opacity: 0.65;

  margin-left: 6px;

}



.chineseImePager {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  margin-top: 10px;

  pointer-events: auto;

}



.chineseImePagerBtn {

  border: 1px solid rgba(0,0,0,0.14);

  border-radius: 8px;

  background: #fff;

  padding: 6px 10px;

  cursor: pointer;

  font: inherit;

}



.chineseImePagerBtn:disabled {

  opacity: 0.45;

  cursor: default;

}



.chineseImePageLabel {

  font-size: 0.9rem;

  opacity: 0.7;

  text-align: center;

}



#chineseImePanel {

  background: rgba(255, 255, 255, 0.96);

  padding: 12px 14px;

  border-radius: 16px;



  border: 1px solid rgba(0,0,0,0.08);



  box-shadow:

    0 14px 36px rgba(0,0,0,0.18),

    0 3px 8px rgba(0,0,0,0.10);

}



.actionRow {

  display: flex;

  align-items: center;

  gap: 10px;

}



#wasRightWrap {

  display: flex;

}



#notesWrap {

  margin-top: 8px;

}



#notesBox {
  font-size: 1.2em;
  line-height: 1.4;
  width: 100%;
  padding: 6px 8px;
  max-height: 45vh;
  resize: vertical;
}

@media (max-width: 768px), (pointer: coarse) {
  #notesBox {
    max-height: 38vh;
    resize: none;
  }
}


html, body {
  touch-action: manipulation;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

button,
.vkbd,
.vkbd__key,
.vkbd__btn,
[role="button"] {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 768px), (pointer: coarse) {
  input,
  select,
  textarea {
    font-size: 16px;
  }

  #userAnswer {
    font-size: 1.4rem;
    height: calc(1.4em + 32px);
  }
}


.startupSplash{

  position:fixed;

  inset:0;

  display:flex;

  align-items:center;

  justify-content:center;

  background:

    radial-gradient(circle at 20% 20%, rgba(99,102,241,0.22), transparent 28%),

    radial-gradient(circle at 80% 20%, rgba(168,85,247,0.20), transparent 26%),

    radial-gradient(circle at 50% 100%, rgba(56,189,248,0.16), transparent 22%),

    linear-gradient(135deg, #0b1020 0%, #070b1a 45%, #1b0640 100%);

  z-index:20000;

}



.startupSplash__box{

  min-width:260px;

  max-width:90vw;

  padding:28px 32px;

  border-radius:20px;

  background:rgba(255,255,255,0.10);

  border:1px solid rgba(255,255,255,0.16);

  box-shadow:0 20px 60px rgba(0,0,0,0.35);

  backdrop-filter:blur(10px);

  text-align:center;

  color:white;

}



.startupSplash--light{

  background: transparent;

  backdrop-filter: blur(6px);

}



.startupSplash--light .startupSplash__box{

  background: rgba(255,255,255,0.75);

  color: #0f172a;

}



.startupSplash__title{

  margin:0 0 10px;

  font-size:2rem;

  font-weight:800;

}



.startupSplash__text{

  font-size: 1rem;

  opacity: 0.88;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 1.5em;

}



.startupSplash__dots{

  display: inline-flex;

  width: 1.6em;

  justify-content: flex-start;

}



.startupSplash__dots span{

  opacity: 0.2;

  animation: startupDotPulse 1.4s infinite;

}



.startupSplash__dots span:nth-child(1){

  animation-delay: 0s;

}



.startupSplash__dots span:nth-child(2){

  animation-delay: 0.2s;

}



.startupSplash__dots span:nth-child(3){

  animation-delay: 0.4s;

}



@keyframes startupDotPulse{

  0%, 20% {

    opacity: 0.2;

  }

  40% {

    opacity: 1;

  }

  100% {

    opacity: 0.2;

  }

}



.expectedDiffWrong {

  color: #b91c1c;

  font-weight: 700;

  background: rgba(220, 38, 38, 0.12);

  padding: 0 2px;

  border-radius: 3px;

}



.pg_toast {

  position: fixed;

  top: 20px;

  left: 50%;

  transform: translate(-50%, -10px);

  font-size: 28px;

  opacity: 0;

  pointer-events: none;

  z-index: 99999;

}



.pg_toast_show {

  animation: pg_toast_anim 1.4s ease forwards;

}



@keyframes pg_toast_anim {

  0% {

    opacity: 0;

    transform: translate(-50%, -10px) scale(0.9);

  }



  15% {

    opacity: 1;

    transform: translate(-50%, 0) scale(1.1);

  }



  25% {

    transform: translate(-50%, 0) rotate(-10deg);

  }



  35% {

    transform: translate(-50%, 0) rotate(10deg);

  }



  45% {

    transform: translate(-50%, 0) rotate(-6deg);

  }



  55% {

    transform: translate(-50%, 0) rotate(6deg);

  }



  65% {

    transform: translate(-50%, 0) rotate(0deg);

  }



  85% {

    opacity: 1;

    transform: translate(-50%, 0) scale(1);

  }



  100% {

    opacity: 0;

    transform: translate(-50%, -10px) scale(0.9);

  }

}


.smartboardClozeSentence { grid-column: 1 / -1; font-size: clamp(1.5rem, 3vw, 3rem); line-height: 1.8; text-align: center; overflow-wrap: anywhere; padding: 16px; background: #fff; border-radius: 16px; white-space: pre-wrap; }

.smartboardRevealedAnswer { padding: 18px; border-radius: 16px; background: #fff; color: #17172d; text-align: center; font-family: 'Comic Sans MS', 'Comic Sans', cursive; font-size: clamp(1.5rem, 3vw, 3rem); overflow-wrap: anywhere; }

.studentClozeSentence { font-family: "Comic Sans MS", "Comic Sans", cursive; font-size: clamp(1.2rem, 3vw, 2rem); white-space: normal; overflow-wrap: anywhere; }

#practiceBtn[hidden] { display: none; }

/* Keep lesson navigation clear on phones; secondary tools open above it. */
#moreActionsBtn { display: none; }
.secondaryActions { display: contents; }
@media (max-width: 768px), (pointer: coarse) {
  .actionRow { position: relative; gap: 10px; flex-wrap: wrap; }
  #moreActionsBtn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 52px; min-height: 48px; padding: 5px 10px;
    font-size: 24px; line-height: 1; border-radius: 14px;
  }
  #moreActionsBtn span { font-size: 11px; margin-top: 3px; }
  .secondaryActions[hidden] { display: none; }
  .secondaryActions:not([hidden]) {
    display: flex; flex-direction: column; gap: 4px;
    position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 20;
    width: min(240px, 100%); padding: 8px; border-radius: 16px;
    background: #fff; border: 1px solid #dddce8; box-shadow: 0 8px 30px rgba(15,23,42,.18);
  }
  .secondaryActions .iconActionBtn {
    flex-direction: row; justify-content: flex-start; gap: 12px;
    width: 100%; min-height: 44px; border-radius: 10px; box-shadow: none;
    padding: 10px 12px; background: transparent;
  }
  .secondaryActions .iconActionBtn__label { font-size: 14px; }
  #wasRightWrap { width: 100%; }
  #practiceBtn, #mainActionBtn { min-height: 48px; border-radius: 14px; }
  #practiceBtn .iconActionBtn__label, #mainActionBtn .iconActionBtn__label { font-size: 11px; }
  #mainActionBtn { background: #5145cd; color: white; }
}

@media (max-width: 768px), (pointer: coarse) {
  .actionRow { gap: 8px; }
  .actionRow > #wasRightWrap { width: auto; }
  .actionRow > #exitToProgressBtn,
  .actionRow > #wasRightWrap .iconActionBtn {
    min-width: 44px; min-height: 48px; padding: 5px 8px; border-radius: 14px;
  }
  .actionRow > #exitToProgressBtn .iconActionBtn__label,
  .actionRow > #wasRightWrap .iconActionBtn__label { font-size: 10px; }
  #moreActionsBtn { min-width: 44px; padding: 5px 8px; }
  #practiceBtn { margin-left: auto; min-width: 54px; padding: 5px 8px; }
  #mainActionBtn { margin-left: 0; min-width: 60px; padding: 5px 8px; }
  #practiceBtn[hidden] ~ #mainActionBtn { margin-left: auto; }
}

@media (max-width: 768px), (pointer: coarse) {
  .actionRow > #wasRightWrap { min-width: 0; max-width: 90px; }
  .actionRow > #wasRightWrap .iconActionBtn__label { white-space: normal; line-height: 1.15; }
  #practiceBtn .iconActionBtn__label, #mainActionBtn .iconActionBtn__label { white-space: normal; max-width: 80px; line-height: 1.15; }
}

@media (max-width: 768px), (pointer: coarse) {
  .card.student-cloze { padding: 16px; }
  .student-cloze .prompt--audio { min-height: 58px; margin: 12px 0; }
  .student-cloze .prompt__speakerIcon { width: 56px; height: 56px; font-size: 1.8rem; }
  .student-cloze #inputHelpText { margin: 8px 0; font-size: .9rem; line-height: 1.4; }
  .student-cloze .studentClozeAnswer {
    padding: 12px; font: 600 1.25rem/2.2 system-ui, sans-serif;
    text-align: left; box-shadow: none;
  }
  .student-cloze .studentClozeBlank {
    box-sizing: border-box; max-width: calc(100% - 12px); min-height: 44px;
    padding: 6px 8px; margin: 3px 4px; border-radius: 8px 8px 0 0;
  }
  .student-cloze .studentClozeBlank.is-active:not([readonly]) {
    border-bottom-color: #4f46e5; background: #e8e5ff;
  }
  .student-cloze .keyboardPanel { margin-top: 10px; }
}

.clozeWordBank { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1.2rem; }
.clozeWord { font: inherit; padding: .6rem 1rem; cursor: grab; border: 2px solid #7895b8; border-radius: .7rem; background: #edf5ff; color: #173656; }
.clozeWord[aria-pressed="true"] { outline: 3px solid #3579cf; background: #cce3ff; }
.clozeWord:disabled { opacity: .35; cursor: default; }
.studentClozeBlank[readonly] { opacity: 1; cursor: pointer; }


/* Letter blanks stay connected to the surrounding letters of one word. */
.student-cloze .studentClozeAnswer--spelling .studentClozeBlank {
  box-sizing: content-box;
  width: 1ch;
  min-width: 1ch;
  max-width: none;
  margin: 0;
  padding: .05em .03em;
  border-radius: 0;
  vertical-align: baseline;
}