/* ========================================================= */
/* CONTENT.CSS — ÉCRANS DE CONTENU PÉDAGOGIQUE              */
/* Projet : Le Monde d’Euriko                               */
/* Rôle : affichage des JSON content dans le parchemin       */
/* ========================================================= */

/* ========================= */
/* ÉCRAN CONTENT */
/* ========================= */

.content-screen {
  position: absolute;
  inset: 0;
  z-index: var(--z-content);

  width: 100%;
  height: 100%;

  overflow: hidden;

  background: #140d07;
  color: #2b1a0f;
}

.content-screen[hidden] {
  display: none !important;
}

/* ========================= */
/* FOND PARCHEMIN */
/* ========================= */

.content-screen .map-container {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;
}

.parchment-bg {
  position: absolute;
  inset: 0;
  z-index: 1;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: fill;

  pointer-events: none;
  user-select: none;
}

/* ========================= */
/* COUCHE CONTENT */
/* ========================= */

.content-inner {
  position: absolute;
  inset: 0;
  z-index: 2;

  width: 100%;
  height: 100%;

  overflow: hidden;

  color: #2b1a0f;
}

/* ========================= */
/* SAFE AREA SCROLLABLE */
/* ========================= */

.content-safe {
  position: absolute;

  top: clamp(42px, 6%, 82px);
  left: clamp(80px, 8vw, 150px);
  right: clamp(52px, 10%, 170px);
  bottom: clamp(118px, 16%, 178px);

  overflow-y: auto;
  overflow-x: hidden;

  padding:
    clamp(12px, 1.6vw, 26px)
    clamp(12px, 2vw, 34px)
    clamp(40px, 5vw, 90px);

  scroll-behavior: smooth;
}

/* ========================= */
/* SCROLLBAR */
/* ========================= */

.content-safe {
  scrollbar-width: auto;

  scrollbar-color:
    rgba(92, 43, 12, 0.88)
    rgba(255, 238, 190, 0.28);
}

.content-safe::-webkit-scrollbar {
  width: 22px;
}

.content-safe::-webkit-scrollbar-track {
  background: rgba(255, 238, 190, 0.28);

  border-radius: 999px;

  box-shadow:
    inset 0 0 0 1px rgba(80, 45, 18, 0.18);
}

.content-safe::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      to bottom,
      rgba(132, 65, 20, 0.95),
      rgba(82, 38, 12, 0.95)
    );

  border: 2px solid rgba(255, 236, 190, 0.75);
  border-radius: 999px;
}

.content-safe::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(
      to bottom,
      rgba(165, 78, 24, 0.98),
      rgba(98, 44, 12, 0.98)
    );
}

/* ========================= */
/* STRUCTURE GÉNÉRALE */
/* ========================= */

.content-wrapper,
.content-container,
.content-parchment {
  width: 100%;
  max-width: 980px;

  margin: 0 auto;
}

.content-wrapper {
  display: flex;
  flex-direction: column;

  gap: clamp(18px, 2.4vw, 30px);
}

.content-header {
  display: flex;
  flex-direction: column;

  gap: 8px;
}

/* ========================= */
/* TITRES */
/* ========================= */

.content-title {
  margin: 0;

  font-size: clamp(2rem, 3.1vw, 3.1rem);
  font-weight: 800;
  line-height: 1.05;

  color: #2a1508;
}

.content-subtitle {
  margin: 0;

  font-size: clamp(1.25rem, 2vw, 1.85rem);
  font-weight: 500;
  line-height: 1.25;

  color: rgba(43, 26, 15, 0.88);
}

.content-section-title {
  margin: 0 0 12px;

  font-size: clamp(1.45rem, 2vw, 2rem);
  font-weight: 800;
  line-height: 1.15;

  color: #2a1508;
}

.content-small-title {
  margin: 0 0 8px;

  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  font-weight: 800;
  line-height: 1.2;

  color: #2a1508;
}

/* ========================= */
/* TEXTES */
/* ========================= */

.content-text,
.content-block p {
  margin: 0;

  font-size: clamp(1rem, 1.28vw, 1.22rem);
  line-height: 1.65;

  color: #2f1d12;

  white-space: pre-line;
}

.content-instruction {
  margin: 8px 0 0;

  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.55;

  color: rgba(47, 29, 18, 0.86);

  white-space: pre-line;
}

.content-meta {
  margin-top: 10px;

  font-size: 0.95rem;
  line-height: 1.45;

  color: rgba(47, 29, 18, 0.75);

  white-space: pre-line;
}

.content-question {
  margin: 0 0 10px;

  font-weight: 700;

  white-space: pre-line;
}

/* ========================= */
/* BLOCS CONTENT */
/* ========================= */

.content-block {
  position: relative;

  padding:
    clamp(18px, 2.1vw, 32px)
    clamp(20px, 2.6vw, 38px);

  border-radius: 18px;

  background:
    linear-gradient(
      to bottom,
      rgba(255, 248, 230, 0.34),
      rgba(255, 238, 200, 0.18)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 4px 16px rgba(70, 35, 10, 0.08);

  overflow: hidden;
}

.content-block::before {
  content: "";

  position: absolute;
  top: 16px;
  left: 0;

  width: 5px;
  height: calc(100% - 32px);

  border-radius: 999px;

  background: rgba(90, 50, 20, 0.35);
}

.content-empty {
  opacity: 0.8;
}

.content-scene {
  border-left: 5px solid #5fae62;
}

/* ========================= */
/* PNJ CONTENT FLOTTANT */
/* ========================= */

.content-pnj {
  position: absolute;

  left: clamp(-10px, 1vw, 20px);
  bottom: clamp(320px, 29vh, 420px);

  z-index: 4;

  width: clamp(210px, 16vw, 220px);

  padding: 0;

  border-left: none;

  background: transparent;

  box-shadow: none;

  overflow: visible;

  pointer-events: none;
}

.content-pnj::before {
  display: none;
}

.content-pnj-inner {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;

  gap: 10px;
}

/* ========================= */
/* BULLE PNJ */
/* ========================= */

.content-pnj-bubble {
  position: relative;

  width: 100%;

  padding: 12px 14px;

  border: 3px solid rgba(90, 55, 24, 0.45);
  border-radius: 18px;

  background: rgba(255, 246, 218, 0.96);
  color: #2b1a0f;

  box-shadow:
    0 6px 18px rgba(45, 22, 8, 0.18);
}

.content-pnj-bubble::after {
  content: "";

  position: absolute;
  left: 50%;
  bottom: -17px;

  width: 26px;
  height: 26px;

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

  border-right: 3px solid rgba(90, 55, 24, 0.45);
  border-bottom: 3px solid rgba(90, 55, 24, 0.45);

  transform:
    translateX(-50%)
    rotate(45deg);
}

.content-pnj-bubble .content-text {
  margin: 0;

  font-size: clamp(0.82rem, 0.9vw, 1rem);
  line-height: 1.45;

  text-align: center;
}

/* ========================= */
/* IMAGE PNJ */
/* ========================= */

.content-pnj-image {
  width: clamp(180px, 15vw, 250px);
  max-width: none;
  height: auto;

  margin: 0;

  border-radius: 0;

  box-shadow: none;
}

/* ========================= */
/* VARIANTES MAISONS */
/* ========================= */

.content-maison-comprendre .content-block::before,
.block-comprendre::before {
  background: #4aa8d8;
}

.content-maison-jeux .content-block::before,
.block-jeux::before {
  background: #5fae62;
}

.content-maison-secret .content-block::before,
.block-secret::before {
  background: #d8953c;
}

.content-maison-mission .content-block::before,
.block-mission::before {
  background: #c96d5f;
}

/* ========================= */
/* LISTES */
/* ========================= */

.content-list,
.content-block ul,
.content-block ol {
  margin: 12px 0 0 22px;
  padding: 0;

  font-size: clamp(1rem, 1.22vw, 1.18rem);
  line-height: 1.55;
}

.content-list-item,
.content-block li {
  margin-bottom: 8px;
}

.content-question-item {
  margin-bottom: 18px;
}

/* ========================= */
/* BOUTONS / CHOIX */
/* ========================= */

.content-choices {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 10px;
}

.content-button,
.exercise-button,
.interaction-button,
.content-action-button,
.content-choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 40px;

  margin-top: 12px;

  padding: 9px 17px;

  border: none;
  border-radius: 12px;

  background: #7a3412;
  color: #fff8ee;

  font-size: 1rem;
  font-weight: 700;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    background 0.15s ease;
}

.content-button:hover,
.exercise-button:hover,
.interaction-button:hover,
.content-action-button:hover,
.content-choice:hover {
  background: #9a4316;

  transform: translateY(-1px);
}

.content-button:active,
.exercise-button:active,
.interaction-button:active,
.content-action-button:active,
.content-choice:active {
  transform: scale(0.98);
}

.content-choice.is-selected,
.content-action-button.is-done {
  background: #3f6f42;
}

/* ========================= */
/* REPÉRER / MOTS */
/* ========================= */

.content-selectable-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 8px;

  margin-top: 12px;
}

.content-selectable-entry {
  display: flex;
  align-items: center;

  gap: 14px;

  width: 100%;

  margin-bottom: 14px;
}

.word-button,
.content-selectable-item,
[data-word] {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 4px 6px 4px 0;

  padding: 6px 12px;

  border: 1px solid rgba(70, 40, 15, 0.22);
  border-radius: 10px;

  background: rgba(255, 255, 255, 0.5);
  color: #2b1a0f;

  font-weight: 600;

  cursor: pointer;

  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.word-button:hover,
.content-selectable-item:hover,
[data-word]:hover {
  background: rgba(255, 255, 255, 0.78);
}

.word-button.is-selected,
.content-selectable-item.is-selected,
[data-word].is-selected {
  background: #7a3412;
  color: #fff8ee;
}

.content-selectable-entry .content-media,
.content-selectable-entry .content-audio {
  width: auto;

  margin-top: 0;
}

.content-selectable-entry audio {
  width: 260px;
}

/* ========================= */
/* COMPARER */
/* ========================= */

.content-pairs {
  display: flex;
  flex-direction: column;

  gap: 10px;

  margin-top: 12px;
}

.content-pair,
.compare-pair {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 10px;
}

.content-pair-item,
.compare-left,
.compare-right {
  padding: 9px 13px;

  border: 1px solid rgba(90, 50, 20, 0.22);
  border-radius: 11px;

  background: rgba(255, 239, 195, 0.92);
  color: #2b1a0f;

  font-weight: 700;
}

.content-pair-separator,
.compare-arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 42px;
  height: 42px;

  border-radius: 999px;

  background: rgba(120, 70, 20, 0.08);
  color: #6b3415;

  font-size: 1.4rem;
  font-weight: 900;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ========================= */
/* TRANSFORMER */
/* ========================= */

.content-transform-list {
  display: flex;
  flex-direction: column;

  gap: 16px;

  margin-top: 14px;
}

.content-transform-item {
  display: block;

  margin-bottom: 1.4rem;
}

.content-transform-text {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;
}

.content-word-bank {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  margin: 10px 0;
}

.content-word {
  display: inline-flex;

  padding: 6px 11px;

  border-radius: 999px;

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

  font-weight: 700;
}

.content-transform-feedback {
  margin-top: 0.5rem;
}

/* ========================= */
/* INPUTS */
/* ========================= */

.content-input,
.exercise-input,
input[type="text"] {
  min-width: 120px;

  padding: 7px 11px;

  border: 2px solid rgba(90, 50, 20, 0.22);
  border-radius: 10px;

  background: rgba(255, 255, 255, 0.62);
  color: #2b1a0f;

  font-size: 1rem;
}

.content-transform-item .content-input {
  width: min(100%, 520px);

  min-width: 320px;
}

.content-input:focus,
.exercise-input:focus,
input[type="text"]:focus {
  outline: none;

  border-color: #a85a24;

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

.content-input.is-filled {
  border-color: #3f6f42;

  background: rgba(255, 255, 255, 0.9);
}

/* ========================= */
/* MISSION */
/* ========================= */

.content-mission-task,
.content-prompt-ia {
  margin-top: 14px;

  padding: 14px 16px;

  border-radius: 14px;

  background: rgba(255, 255, 255, 0.32);
}

.content-user-answer {
  display: block;

  margin-top: 18px;
}

.content-textarea {
  width: 100%;
  min-height: 140px;

  margin-top: 8px;

  padding: 12px 14px;

  border: 2px solid rgba(90, 50, 20, 0.22);
  border-radius: 12px;

  background: rgba(255, 255, 255, 0.72);
  color: #2b1a0f;

  font-size: 1rem;
  line-height: 1.5;

  resize: vertical;
}

.content-textarea:focus {
  outline: none;

  border-color: #a85a24;

  background: rgba(255, 255, 255, 0.9);
}

/* ========================= */
/* IMAGES */
/* ========================= */

.content-image,
img.content-media {
  display: block;

  width: 100%;
  max-width: 100%;

  margin-top: 18px;

  border-radius: 16px;

  object-fit: cover;

  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.14);
}

/* ========================= */
/* AUDIO / VIDÉO */
/* ========================= */

.content-media,
.content-audio,
.content-video {
  width: 100%;

  margin-top: 16px;
}

.content-audio audio,
.content-video video,
audio,
video {
  display: block;

  width: 100%;

  border-radius: 14px;
}

/* ========================= */
/* FEEDBACK */
/* ========================= */

.content-feedback-zone {
  margin-top: 14px;
}

.content-feedback {
  margin-top: 12px;

  padding: 11px 14px;

  border-radius: 12px;

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

  font-weight: 700;
}

.is-correct {
  background: #3f6f42 !important;
  color: #fff8ee !important;
}

.is-error {
  background: #d63b2f !important;
  color: #fff8ee !important;

  border: 2px solid rgba(255, 255, 255, 0.35) !important;

  box-shadow:
    0 0 0 2px rgba(180, 30, 20, 0.18),
    0 4px 10px rgba(120, 10, 10, 0.22) !important;
}

.content-feedback.is-success,
.content-question-feedback.is-success,
.content-transform-feedback.is-success,
.content-compare-feedback.is-success {
  background: rgba(70, 140, 70, 0.18);
  color: #204220;
}

.content-feedback.is-error,
.content-question-feedback.is-error,
.content-transform-feedback.is-error,
.content-compare-feedback.is-error {
  background: rgba(214, 59, 47, 0.16);

  border-left: 4px solid #d63b2f;

  color: #7a1f16;
}

/* ========================= */
/* TABS FUTURES */
/* ========================= */

.content-tabs {
  display: flex;

  gap: 10px;

  overflow-x: auto;
  overflow-y: hidden;

  padding-bottom: 4px;
}

.content-tab {
  padding: 9px 15px;

  border-radius: 999px;

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

  white-space: nowrap;

  cursor: pointer;
}

.content-tab:hover {
  background: rgba(255, 255, 255, 0.48);
}

/* ========================= */
/* RESPONSIVE DESKTOP ÉTROIT */
/* ========================= */

/*
 * Cette adaptation est volontairement réservée
 * aux appareils à pointeur fin.
 *
 * Le responsive tactile est géré exclusivement
 * dans responsive.css.
 */

@media
  (max-width: 1200px)
  and (hover: hover)
  and (pointer: fine) {

  .content-safe {
    left: clamp(250px, 20vw, 320px);
    right: clamp(42px, 8%, 120px);
    bottom: clamp(120px, 17%, 180px);
  }

  .content-wrapper,
  .content-container,
  .content-parchment {
    max-width: 920px;
  }

  .content-pnj {
    left: clamp(14px, 2vw, 34px);

    width: clamp(180px, 17vw, 220px);
  }

  .content-pnj-image {
    width: clamp(150px, 15vw, 210px);
  }

  .content-pnj-bubble .content-text {
    font-size: clamp(0.78rem, 0.9vw, 0.95rem);
  }
}

/* ========================= */
/* MISSION - PROMPT IA COMPACT */
/* ========================= */

.content-prompt-ia-compact .content-action-button {
  margin-top: 8px;
}

.content-copy-feedback {
  margin-top: 10px;
}

/* ========================= */
/* AMÉLIORATION COMPARER */
/* ========================= */

.content-pair-item,
.compare-left,
.compare-right {
  border: 2px solid rgba(90, 50, 20, 0.34);

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

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 2px 6px rgba(70, 35, 10, 0.12);
}

.content-pair-item:hover,
.compare-left:hover,
.compare-right:hover {
  background: #fff3c8;

  border-color: #8a4318;

  transform: translateY(-1px);
}

.compare-arrow {
  background: rgba(122, 52, 18, 0.16);

  border: 1px solid rgba(122, 52, 18, 0.28);

  color: #5a260c;
}

/* ========================= */
/* REPÈRE VISUEL DÉFILEMENT */
/* ========================= */

.content-safe {
  box-shadow:
    inset -14px 0 0 rgba(255, 248, 230, 0.72);
}

.content-safe:hover {
  box-shadow:
    inset -14px 0 0 rgba(255, 255, 255, 0.9);
}

/* ========================= */
/* TEST DE NIVEAU GUIDÉ */
/* ========================= */

.placement-result {
  max-width: 920px;

  margin: 0 auto;

  padding: 32px;

  color: #17375e;

  text-align: center;
}

.placement-result .content-title {
  color: #17375e;

  font-size: 32px;
  line-height: 1.2;
}

.placement-result .content-subtitle {
  color: #24496f;

  font-size: 20px;
  line-height: 1.45;
}

.placement-result .content-text {
  color: #24496f;

  font-size: 18px;
  line-height: 1.5;
}

.placement-result .content-choice {
  margin-top: 20px;
}

/* ========================= */
/* CHOIX NIVEAU GUIDÉ */
/* ========================= */

.guided-level-screen {
  width: 100%;
  max-width: 980px;

  margin: 0 auto;

  padding: 32px;

  box-sizing: border-box;
}

.guided-level-screen .content-header {
  margin-bottom: 28px;

  text-align: center;
}

.guided-level-screen .content-title {
  color: #17375e;

  font-size: 34px;
  line-height: 1.2;
}

.guided-level-screen .content-subtitle,
.guided-level-screen .content-instruction {
  color: #24496f;

  font-size: 18px;
  line-height: 1.45;
}

.guided-level-grid {
  display: grid;

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

  gap: 16px;

  width: 100%;
  min-width: 0;
}

.guided-level-card {
  width: 100%;
  min-width: 0;
  min-height: 104px;

  padding: 20px 22px;

  box-sizing: border-box;

  border: 2px solid rgba(23, 55, 94, 0.18);
  border-radius: 10px;

  background: rgba(255, 255, 255, 0.86);
  color: #17375e;

  text-align: left;

  cursor: pointer;

  box-shadow:
    0 8px 22px rgba(12, 26, 47, 0.12);

  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.guided-level-card strong {
  display: block;

  margin-bottom: 8px;

  font-size: 22px;
  line-height: 1.2;
}

.guided-level-card span {
  display: block;

  font-size: 16px;
  line-height: 1.35;

  color: #42617f;
}

.guided-level-card:hover {
  transform: translateY(-2px);

  border-color: rgba(47, 112, 178, 0.45);

  background: #ffffff;

  box-shadow:
    0 12px 28px rgba(12, 26, 47, 0.18);
}

/* ========================= */
/* VITESSE AUDIO */
/* ========================= */

.content-audio-speed {
  display: flex;

  gap: 8px;

  margin-top: 8px;
}

.content-audio-speed-button {
  padding: 6px 10px;

  border: none;
  border-radius: 999px;

  background: rgba(122, 52, 18, 0.16);
  color: #5a260c;

  font-weight: 800;

  cursor: pointer;
}

.content-audio-speed-button:hover,
.content-audio-speed-button.is-selected {
  background: #7a3412;
  color: #fff8ee;
}

/* ========================= */
/* AUDIO INLINE - MAISON JEUX */
/* ========================= */

.content-inline-audio-button {
  min-width: 42px;
  min-height: 42px;

  margin: 0 0 0 8px;

  padding: 0;

  border: 2px solid rgba(90, 50, 20, 0.28);
  border-radius: 999px;

  background: rgba(255, 247, 220, 0.96);
  color: #5a260c;

  font-size: 1.05rem;
  font-weight: 800;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 2px 6px rgba(70, 35, 10, 0.12);

  transition:
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}

.content-inline-audio-button:hover {
  background: #fff3c8;

  border-color: #8a4318;

  transform: translateY(-1px);
}

.content-inline-audio-button:active {
  transform: scale(0.96);
}

/* ========================= */
/* COMPRENDRE AUDIO */
/* ========================= */

.content-choice-line {
  display: flex;
  align-items: center;

  gap: 8px;

  margin: 6px 0;
}

.content-choice-line .content-choice {
  margin-top: 0;
}

/* ========================= */
/* COMPRENDRE - MAISON JEUX */
/* ========================= */

.content-maison-jeux
.content-choice-line
.content-choice {
  border: 2px solid rgba(90, 50, 20, 0.34);

  background: rgba(255, 247, 220, 0.96);
  color: #2b1a0f;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 2px 6px rgba(70, 35, 10, 0.12);
}

.content-maison-jeux
.content-choice-line
.content-choice:hover {
  background: #fff3c8;
  color: #2b1a0f;

  border-color: #8a4318;

  transform: translateY(-1px);
}

/* ========================= */
/* COMPARER AUDIO */
/* ========================= */

.content-pair-line {
  display: flex;
  align-items: center;

  gap: 8px;

  width: 100%;
}

.compare-pair {
  align-items: stretch;

  padding-bottom: 14px;
}

.content-compare-separator {
  width: 100%;

  margin: 12px 0 0;

  border: 0;
  border-top: 2px solid rgba(90, 50, 20, 0.18);
}

/* ========================= */
/* TRANSFORMER AUDIO */
/* ========================= */

.content-word-audio {
  border: 1px solid rgba(70, 40, 15, 0.22);

  cursor: pointer;

  transition:
    background 0.15s ease,
    transform 0.15s ease,
    border-color 0.15s ease;
}

.content-word-audio:hover {
  background: rgba(255, 255, 255, 0.78);

  border-color: rgba(122, 52, 18, 0.38);

  transform: translateY(-1px);
}

.content-word-audio:active {
  transform: scale(0.97);
}

/* ========================= */
/* TEXTE SYNCHRONISÉ AUDIO */
/* ========================= */

.euriko-synced-text {
  white-space: pre-line;
}

.euriko-sync-word {
  display: inline;

  border-radius: 4px;

  transition:
    background 0.12s ease,
    color 0.12s ease,
    box-shadow 0.12s ease;
}

.euriko-sync-word--active {
  background: #ffe66d;
  color: #111;

  box-shadow:
    0 0 0 2px rgba(255, 230, 109, 0.45);
}