/* Shared top word-card text for General Phonics 1-3 and Practice. */
#app#app#app .phonics-shared-word-display {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  font-family: "Pretendard Variable", Pretendard, sans-serif !important;
  font-size: 40px !important;
  font-weight: 1000 !important;
  font-kerning: none !important;
  font-variant-ligatures: none !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
}

/* Some game renderers position the text line independently inside the shared
   300 x 80 word card. Once the helper marks that verified card, make its word
   line fill the card so legacy per-unit top/bottom transforms cannot move the
   completed word away from the centre. Standalone result cards keep their own
   scene position and use the centring rule above. */
#app#app#app .phonics-shared-word-card > .phonics-shared-word-display {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  transform: none !important;
}

#app#app#app .phonics-shared-word-display > :is(span, b, strong) {
  position: static !important;
  inset: auto !important;
  display: inline !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-decoration: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

#app#app#app .phonics-shared-word-display__context {
  color: var(--phonics-shared-word-blue, #2474c8) !important;
}

#app#app#app .phonics-shared-word-display__target {
  color: var(--phonics-shared-word-red, #e34747) !important;
  border-bottom: 0 !important;
  text-decoration: none !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Legacy transient effects stay disabled. The completed target grapheme gets
   its one approved blink through the scoped overrides at the end of this file. */
#app#app#app :is(.p2u-game, .p3c-game, .p3v-game, .p3u812-game, .phonics1-game-screen) :is(
  .p2u-word-composite-pending,
  .p2u-word-composite-ready,
  .p2u-word-composite-sound-flash,
  .p3-composite-letter-flash,
  .is-integrating,
  .p1-target-letter-blink,
  .is-composite-flash
) {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

#app#app#app :is(.p1-single-screen-blank.is-filled, #p3cSlot.is-complete, #p3u812Slot.is-complete,
  .p2u-screen-word-answer, .p3c-composite-word-complete, .p3u812-composite-word-complete) {
  border: 0 !important;
  border-bottom: 0 !important;
  text-decoration: none !important;
  opacity: 1 !important;
  animation: none !important;
}

@media (max-width: 720px) {
  #app#app#app .phonics-shared-word-display {
    font-size: clamp(30px, 8vw, 40px) !important;
  }
}

/* Practice is an independent document without #app. Keep its completed word
   in one inline flow as well, so a compound such as TREE/EE cannot overlap R. */
.repeat-assembly-dialog.repeat-assembly-dialog.repeat-assembly-dialog .phonics-shared-word-display {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  color: var(--practice-word-blue, #2474c8) !important;
  font-family: "Pretendard Variable", Pretendard, sans-serif !important;
  font-size: 40px !important;
  font-weight: 1000 !important;
  font-kerning: none !important;
  font-variant-ligatures: none !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transform: none !important;
  animation: none !important;
}

.repeat-assembly-dialog.repeat-assembly-dialog.repeat-assembly-dialog .phonics-shared-word-display > :is(span, b, strong) {
  position: static !important;
  inset: auto !important;
  display: inline !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--practice-word-blue, #2474c8) !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-decoration: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.repeat-assembly-dialog.repeat-assembly-dialog.repeat-assembly-dialog .phonics-shared-word-display > .phonics-shared-word-display__target {
  display: inline !important;
  color: var(--practice-word-red, #e34747) !important;
  border: 0 !important;
  border-bottom: 0 !important;
  text-decoration: none !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.repeat-assembly-dialog.repeat-assembly-dialog.repeat-assembly-dialog:is(.is-word-applied, .is-merged)
  .repeat-assembly-word-applied > .phonics-shared-word-display__context {
  display: inline !important;
}

.repeat-assembly-dialog.repeat-assembly-dialog.repeat-assembly-dialog:is(.is-word-applied, .is-merged)
  .repeat-assembly-word-applied {
  animation: none !important;
  transform: none !important;
}

@media (max-width: 720px) {
  .repeat-assembly-dialog.repeat-assembly-dialog.repeat-assembly-dialog .phonics-shared-word-display {
    font-size: clamp(30px, 8vw, 40px) !important;
  }
}

/* Phonics 2/3 and Practice 2/3 share one completion rule: the completed word
   stays fixed in its original card while only the red target grapheme blinks
   once for each of the three composite-sound plays. These selectors are kept
   more specific than the legacy stability rules above. */
@keyframes phonics-shared-red-target-blink {
  0%, 100% { filter: opacity(1); }
  50% { filter: opacity(.12); }
}

#app#app#app .p2u-game .phonics-shared-word-display > .phonics-shared-word-display__target,
#app#app#app :is(.p3c-game, .p3v-game, .p3u812-game)
  .phonics-shared-word-display > .phonics-shared-word-display__target {
  color: var(--phonics-shared-word-red, #e34747) !important;
}

#app#app#app .p2u-game .phonics-shared-word-display__target.p2u-composite-target-flash {
  color: var(--phonics-shared-word-red, #e34747) !important;
  animation: phonics-shared-red-target-blink .72s ease-in-out both !important;
}

#app#app#app :is(.p3c-game, .p3v-game, .p3u812-game)
  :is(#p3cSlot, #p3u812Slot).p3-composite-word-blink,
#app#app#app :is(.p3c-game, .p3v-game, .p3u812-game)
  .p3-composite-word-blink {
  color: var(--phonics-shared-word-red, #e34747) !important;
  animation: phonics-shared-red-target-blink .64s ease-in-out both !important;
}

#app#app#app main.p2w-weekly-object-screen
  .p2w-completed-pattern.is-composite-flashing,
.repeat-assembly-dialog.repeat-assembly-dialog.repeat-assembly-dialog
  .p2w-completed-pattern.is-composite-flashing {
  color: var(--practice-word-red, #e34747) !important;
  animation: phonics-shared-red-target-blink .64s ease-in-out both !important;
}

.repeat-assembly-dialog.repeat-assembly-dialog.repeat-assembly-dialog
  :is(.p3c-game, .p3v-game, .p3u812-game) .p3-composite-word-blink {
  color: var(--practice-word-red, #e34747) !important;
  animation: phonics-shared-red-target-blink .64s ease-in-out both !important;
}

/* Practice 3 has its own isolated renderer. Blink only the red target inside
   the completed top word card; the central blend target remains hidden. */
.repeat-assembly-dialog.repeat-assembly-dialog.repeat-assembly-dialog--p3
  .repeat-assembly-letter-screen
  .phonics-shared-word-display__target.repeat-p3-composite-target-flash {
  color: var(--practice-word-red, #e53935) !important;
  animation: phonics-shared-red-target-blink .64s ease-in-out both !important;
}

/* Practice 2 marks its former centre Alphabet 1 circle hidden after a correct
   answer. Override the legacy flex rule so the hidden circle is truly gone. */
#app#app#app main.p2w-weekly-object-screen .p2w-alpha1[hidden],
#app#app#app main.p2w-weekly-object-screen .p2w-alpha1[aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Practice 2/3 result artwork belongs directly on the scene. Legacy result
   cards added a second white panel and, after the shared word rules loaded,
   could also reveal a duplicate completed word inside that panel. */
#app#app#app main.p2w-weekly-object-screen .p2w-result-image {
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app#app#app main.p2w-weekly-object-screen .p2w-result-image > img {
  background: transparent !important;
}

.repeat-assembly-root.repeat-assembly-root.repeat-assembly-root
  .repeat-assembly-dialog.repeat-assembly-dialog:is(.repeat-assembly-dialog--p2, .repeat-assembly-dialog--p3)
  .repeat-assembly-result {
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.repeat-assembly-root.repeat-assembly-root.repeat-assembly-root
  .repeat-assembly-dialog.repeat-assembly-dialog:is(.repeat-assembly-dialog--p2, .repeat-assembly-dialog--p3)
  .repeat-assembly-result > strong.phonics-shared-word-display {
  display: none !important;
  visibility: hidden !important;
}

.repeat-assembly-root.repeat-assembly-root.repeat-assembly-root
  .repeat-assembly-dialog.repeat-assembly-dialog:is(.repeat-assembly-dialog--p2, .repeat-assembly-dialog--p3)
  .repeat-assembly-result > img {
  background: transparent !important;
}