.title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  background-color: rgb(225, 225, 225);
  font-size: 60%;
  margin-bottom: 2vmin;
}

.title zizi-hanzi, .title zizi-punctuation {
  width: 10vmin;
}

.primary-small {
  margin-top: 8vmin;
  font-size: 80%;
}

.secondary {
  font-size: 60%;
  padding: 1.5vmin 1vmin;
  opacity: 0.5;
  overflow: hidden;
}

.secondary>* {
  margin-bottom: 2vmin;
}


.secondary>*:last-child {
  margin-bottom: 0;
}

.secondary zizi-hanzi, .secondary zizi-punctuation {
  width: 9vmin;
}


  .main-word.focus-secondary>.secondary {
    font-size: 77%;

  }

  .main-word.focus-secondary>.secondary zizi-hanzi, .main-word.focus-secondary>.secondary zizi-punctuation {
    width: 11.5vmin;
  }


@media (orientation: landscape) {
  .secondary {
    font-size: 45%;
  }

  .secondary>* {
    margin-bottom: 1vmin;
  }

  .secondary zizi-hanzi, .secondary zizi-punctuation {
    width: 7vmin;
  }

  .main-word.focus-secondary>.secondary {
    font-size: 90%;
    padding: 2.5vmin 1.5vmin;

  }

  .main-word.focus-secondary>.secondary zizi-hanzi, .main-word.focus-secondary>.secondary zizi-punctuation {
    width: 13vmin;
  }


}

/* --- MainWordElement transition for character removal --- */
.main-word>figure>*,
.main-word>figure>a>* {
  /* This targets both <a> and <zizi-hanzi> elements for the transition */
  transition: opacity 0.4s ease-out;
  overflow: hidden;
}

.main-word>figure>.removing {
  opacity: 0;
  /* width: 0 !important; /* Use important to override inline styles * /
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;*/
}



/* --- MainWordElement sliding animation --- */

@keyframes slide-to-center {
  from {
    left: 0;
  }

  to {
    left: var(--slide-from-left);
    /* The target 'left' value will be set via a CSS variable */
  }
}

.sliding-to-center {
  animation: slide-to-center 0.4s ease-in-out 0.1s forwards;
}

@keyframes slide-from-center {
  from {
    left: var(--slide-from-left);
  }

  to {
    left: 0;
  }
}

.sliding-from-center {
  animation: slide-from-center 0.4s ease-in-out forwards;
}

/* zizi-phrase, .main-word ===================================================================================== */


zizi-phrase, zizi-punctuation, zizi-other {
  display: block;
  position: relative;
}

/*
 * This just creates the top bar that extends the pinyin bar to the full width of the phrase
 */
zizi-phrase>.top-bar,
.main-word>.top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 80%;
  background-color: rgb(225, 225, 225);
  z-index: -99;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.main-word>.say-button,
.main-word>.slow-say-button {
  z-index: 100;
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 80%;
  padding: 0 1rem;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.main-word>.slow-say-button {
  right: 10vmin;
}

.main-word>.say-button:hover {
  opacity: 1;
}

zizi-phrase>.zizi-phrase__container,
zizi-phrase>a>.zizi-phrase__container {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
}



zizi-phrase>.phrase-english,
zizi-phrase>a>.phrase-english, zizi-phrase>a>.phrase-meaning {
  text-align: center;
  background-color: rgb(225, 225, 225);
  white-space: nowrap;
  padding: 0 0.3vmin
}

.phrase-meaning-ref {
  font-size: 85%;
  color: #999;
}

zizi-phrase>.phrase-description {
  font-size: 66%;
  text-align: center;
  background-color: rgb(225, 225, 225);
  padding: 0 1vmin;
}

zizi-phrase>.secondary>.phrase-related {
  display: flex;
  overflow-x: none;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2vmin;

}

zizi-phrase>.secondary>.example-sentence {
  text-align: center;
}

/* .main-word ===================================================================================== */

.main-word {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
}

.main-word>.meanings-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid rgb(225, 225, 225);
  font-size: 60%;
  height: 5vmin;
  box-sizing: border-box;
}

.main-word>.meanings-bar .meaning-item {
  color: #666;
  text-decoration: none;
  padding: 0 0.5rem 0.3rem 0.5rem;
  cursor: pointer;
}

.main-word>.meanings-bar .meaning-item.selected {
  color: #000;
    background-color: rgb(225, 225, 225);
}

.main-word>figure {
  height: 40vmin;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  justify-content: center;
}

.main-word>figure zizi-hanzi {
  width: 30vmin;
  max-width: 20rem;
  position: relative;
  left: 0;
}

.main-word>.caption {
  position: relative;
  height: 25vmin;
  background-color: rgb(225, 225, 225);
  text-align: center;
  overflow: hidden;
}

.main-word>.caption>.level {
  position: absolute;
  top: 2vmin;
  right: 3vmin;
  font-size: 60%;
  opacity: 0.5;
}

.main-word>.caption>.name {
  white-space: nowrap;
}

.main-word>.caption>.description {
  font-size: 66%;
  padding: 0 1vmin;
}

.main-word>.caption.containsHanzi {
  height: 40vmin;
}

.main-word>.caption.containsHanzi>.name {
  font-size: 60%;
}


.main-word>.caption.containsHanzi>.name zizi-hanzi, .main-word>.caption.containsHanzi>.name zizi-punctuation {
  width: 10vmin;
}

.main-word>.caption.caption.containsHanzi>.description {
  margin-top: 2vmin;
  font-size: 52%;
}

.main-word>.secondary {
  /*height: 40vmin;*/
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  transition: opacity 0.4s ease-in-out;

}

.main-word>.secondary>* {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  overflow: hidden;
}

.main-word>.secondary.removing {
  opacity: 0;
}

/* --- MainWordElement focus-secondary transition --- */
.main-word>figure,
.main-word>.caption,
.main-word>.secondary {
  transition: height 0.4s ease-in-out, opacity 0.4s ease-in-out;

}

.main-word>figure zizi-hanzi {
  transition: width 0.4s ease-in-out;
}

.main-word.focus-secondary>figure {
  height: 20vmin;
  /* 40vmin * 0.66 */
}

.main-word.focus-secondary>figure zizi-hanzi, .main-word.focus-secondary>figure zizi-punctuation {
  width: 12vmin;
  /* 30vmin * 0.66 */

}

.main-word.focus-secondary>.caption {
  height: 18vmin;
  /* 25vmin * 0.66 */
  font-size: 80%;
}

.main-word.focus-secondary>.secondary {
  opacity: 1;
}

/* --- MainWordElement caption transition --- */
.main-word>.caption {
  transition: opacity 0.4s ease-in-out;
}

.main-word>.caption.removing {
  opacity: 0;
  position: absolute;
  /* Prevent layout shift */
}


.main-word>.secondary .words {
  display: flex;
  overflow: hidden;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 2vmin;
}



/*
.main-word > .secondary .words:last-child::after {
  content: "x";
  display: block;
  flex-grow: 0.4;
}
*/

/* zizi-hanzi ===================================================================================== */


zizi-hanzi {
  display: block;
}

zizi-hanzi > svg, zizi-hanzi > a > svg {
  width:100%;
  transform: scale(1.05, -1.05);

  margin: 0.7vmin 0;
}


.primary-small zizi-hanzi, .primary-small zizi-punctuation {
  width: 15vmin;
}


zizi-hanzi .hanzi-pinyin {
  text-align: center;
  font-size: clamp(16px, 80%, 80px);
  background-color: rgb(225, 225, 225);
}

zizi-hanzi>svg {
  display: block;
}


/* zizi-punctuation ===================================================================================== */

zizi-punctuation, zizi-other {
  display: block;
  position: relative;;
}

zizi-punctuation .content {
  aspect-ratio: 1 / 1;
}

zizi-punctuation > .content , zizi-other > .content {
  font-size: 160%;

}

.primary-small zizi-punctuation {
  width: 15vmin;
}


zizi-punctuation>.top-bar, zizi-other>.top-bar
{
  font-size: 80%;
  background-color: rgb(225, 225, 225);
}


zizi-punctuation>.bottom-bar, zizi-other>.bottom-bar
{
  font-size: 85%;
  background-color: rgb(225, 225, 225);
}

/* zizi-sentence ===================================================================================== */


zizi-sentence {
  display: block;
}

zizi-sentence a {
  display: block;
}

zizi-sentence .zizi-sentence__container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  /* Make all children have the same height */
  gap: 0.3em 0;
}

zizi-sentence .zizi-sentence__container>zizi-phrase,
zizi-sentence .zizi-sentence__punctuation-wrapper {
  position: relative;
}


zizi-sentence .sentence-english {
  margin-top: 2vmin;
  /* font-size: 66%; */
  text-align: center;
}

.secondary zizi-sentence zizi-phrase .phrase-english {
  font-size: 85%;
}


zizi-radical {
  display: block;
  text-align: center;
  overflow: hidden;
}





.radical-main {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.radical-description {
  text-align: center;
  background-color: rgb(225, 225, 225);
  font-size: 66%;
}

zizi-radical>.radical-used {
  display: flex;
  overflow-x: hidden;
  justify-content: center;
  gap: 2vmin;
}

/* --- Classifier Element --- */
zizi-classifier {
  display: block;
  text-align: center;
}

zizi-classifier>.classifier-title {
  /**  font-size: 50%; */
  background-color: rgb(225, 225, 225);
  padding: 0.5rem;
}

.classifier-main {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.classifier-description {
  text-align: center;
  background-color: rgb(225, 225, 225);
}

zizi-classifier>.classifier-examples {
  display: flex;
  overflow-x: hidden;
  justify-content: center;
  gap: 2vmin;
  /*    font-size: 50%; */
  margin-top: 2vmin;
  opacity: 0.6;
}

/* --- Pronounciation Element --- */
zizi-pronounciation {
  display: block;
  width: 100%;
}

zizi-pronounciation .pronounciation-tone-group {
  margin-bottom: 20vmin;
}

.pronounciation-title.other-tones-title {
  margin-top: 3rem;
}

zizi-pronounciation .pronounciation-other-tones-container {
  display: block;
  width: 100%;
  opacity: 0.7;
}



.pronounciation-other-tones-container>.pronounciation-tone-group {
  flex-grow: 1;
}


zizi-pronounciation .pronounciation-words {
  display: flex;
  overflow-x: hidden;
  justify-content: center;
  gap: 3vmin;
  /*    font-size: 50%; */
  margin-top: 4vmin;
  flex-wrap: wrap;
}

.pronounciation-tone-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  /* font-size: 66%; */
  background-color: rgb(225, 225, 225);
}

.pronounciation-tone-title zizi-sentence .zizi-sentence__container {
  padding: 0.25rem 0;
}

/* --- By English Meaning Element --- */
zizi-by-english-meaning {
  display: block;
  width: 100%;
}

.by-english__title {
  background-color: rgb(225, 225, 225);
  padding: 0.5rem;
  text-align: center;
}

.by-english__words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2vmin;
  /*  font-size: 50%; */
}

/* --- Top level components -- */

body>main>zizi-phrase {
  width: 100%;
}

body>main>zizi-phrase>.phrase-main zizi-hanzi {
  width: 30vmin;
  max-width: 20rem;
}

body>main>zizi-classifier>.classifier-main zizi-hanzi {
  width: 30vmin;
  max-width: 20rem;
}

body>main>zizi-sentence .zizi-sentence__container {
  flex-wrap: wrap;
}

body>zizi-sentence .zizi-sentence__container zizi-hanzi {
  width: 12vmin;
}

body>main>zizi-sentence .zizi-sentence__container zizi-hanzi {
  width: 12vmin
}

body>main>zizi-radical>.radical-main zizi-hanzi {
  width: 30vmin;
  max-width: 20rem;
}







/* === Sentence Carousel Styles === */

.zizi-sentence-carousel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.zizi-sentence-carousel__window {
  overflow-x: auto;
  width: 100%;
  height: 100%;
  scrollbar-width: none;
  /* For Firefox */
  scroll-snap-type: x mandatory;
}

.zizi-sentence-carousel__filmstrip {
  display: flex;
  height: 100%;
}

.zizi-sentence-carousel__item {
  flex: 0 0 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0;
  scroll-snap-align: center;
}

.zizi-sentence-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zizi-sentence-carousel__arrow--left {
  left: 10px;
}

.zizi-sentence-carousel__arrow--right {
  right: 10px;
}


/* === Radical Carousel Styles === */

zizi-radical-carousel,
zizi-word-carousel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

}

.zizi-radical-carousel__title,
.zizi-word-carousel__title {
  /* padding: 0.75rem 1rem;*/
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid #eee;
  background-color: #f7f7f7;
  color: #333;
}

.zizi-radical-carousel__window {
  overflow: hidden;
  position: relative;
}

.zizi-radical-carousel__filmstrip {
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.zizi-radical-carousel__item,
.zizi-word-carousel__item {
  flex: 0 0 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.zizi-radical-carousel__arrow,
.zizi-word-carousel__arrow {

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  border: none;
  width: 20px;
  height: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

.zizi-radical-carousel__arrow:hover {
  background-color: white;
  border-color: #999;
}

.zizi-radical-carousel__arrow--left {
  left: 10px;
}

.zizi-word-carousel__arrow--right {
  right: 10px;
}

/* === Word Category Styles === */

.word-category-overview-container {
  padding: 2vmin;
}

.word-category-group {
  margin-bottom: 2vmin;
  font-size: 80%;
}

.word-category-group zizi-hanzi {
  width: 12vmin;
}

.word-category-link.top-level-category {
  font-size: 80%;
  background-color: transparent;
}

.word-category-link.top-level-category  .top-bar, .word-category-link.top-level-category .phrase-meaning, .word-category-link.top-level-category .hanzi-pinyin {
  background-color: transparent;
}


.word-category-link.top-level-category zizi-hanzi {
  width:11.33vmin;
}

.word-category-link {
  display: block;
  padding: 1vmin;
  margin-bottom: 1vmin;
  text-decoration: none;
  color: #333;
      background-color: rgb(225, 225, 225);

}

.word-category-sublist {
}

.word-category-sublist .word-category-link {
  font-weight: normal;
 margin: 1vmin 3vmin 5vmin 3vmin;
 
}

.word-category-words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8vmin;
  padding: 5vmin;
  font-size: 80%;
}

.word-category-words zizi-hanzi {
  width: 16vmin;
}


.category-back-link {
    text-decoration: none;
    color: #333;
    margin-right: 2vmin;
}

zizi-word-category h2 {
  font-size: 80%;
  font-weight: normal;
  margin-bottom: 5vmin;
}

zizi-word-category h2 zizi-hanzi {
  width: 12vmin;
}

.zizi-word-carousel__window {
  width: 100%;
  overflow: hidden;
}

.zizi-word-carousel__filmstrip {
  display: flex;
  transition: transform 0.3s ease-in-out;
}



.zizi-word-carousel__arrow--left {
  left: 10px;
}

.zizi-word-carousel__arrow--right {
  right: 10px;
}