*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  width:100%;
  height:100%;
  background:#f6f3ed;
  color:#2b241c;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Serif JP","Noto Sans JP","Noto Sans TC",serif;
  overflow:hidden;
}

:root{
  --lf-page-pad:8px;
  --lf-button-size:54px;
  --lf-button-row:70px;
  --lf-card-h:calc(100svh - (var(--lf-page-pad) * 2) - env(safe-area-inset-bottom));
}

.app{
  width:100%;
  height:100svh;
  min-height:100svh;
  padding:var(--lf-page-pad);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  background:#f6f3ed;
  overflow:hidden;
}

.card{
  width:min(96vw,720px);
  height:var(--lf-card-h);
  max-height:var(--lf-card-h);
  display:grid;
  grid-template-rows:minmax(0,1fr) auto var(--lf-button-row);
  overflow:hidden;
  border-radius:28px;
}

.photo-wrap{
  width:100%;
  height:100%;
  overflow:hidden;
  background:#eee7dc;
  border-radius:28px 28px 0 0;
}

.photo,
img#photo.photo{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  object-position:center center;
  background:#eee7dc;
  opacity:1;
  transition:opacity 1.75s cubic-bezier(.45,0,.2,1);
  will-change:opacity;
}

.photo.is-changing{
  opacity:.22;
  filter:none;
  transform:none;
}

.photo.is-initializing{
  visibility:hidden;
  opacity:0;
}

.text-area{
  width:100%;
  min-height:0;
  background:#fffaf2;
  padding:0 clamp(16px,3vw,34px) 14px;
  text-align:center;
  box-shadow:0 18px 42px rgba(60,45,25,.12);
  border-radius:0 0 28px 28px;
  overflow:hidden;
  opacity:1;
  transition:opacity 1.05s cubic-bezier(.45,0,.2,1);
  will-change:opacity;
}

.text-area.is-changing{
  opacity:.03;
  filter:none;
  transform:none;
}

.text-area .meta-bar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  width:100%;
  margin:0 0 clamp(10px,1.6vw,16px);
  padding:clamp(10px,1.6vw,16px) 0 0;
  background:transparent;
  border:0;
  box-shadow:none;
  text-align:right;
  line-height:1.35;
  font-size:0;
}

#chapterTitle.chapter-title{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:#8a6b44;
  font-size:15px;
  font-weight:400;
  line-height:1.35;
  letter-spacing:0;
  opacity:1;
  white-space:nowrap;
  text-align:right;
  transform:none;
}

#playlistTitle.playlist-title,
#progress.progress-text{
  display:none;
}

.word-block{
  margin-top:0;
}

.word-zh{
  color:#2b241c;
  font-size:clamp(34px,4.8vw,52px);
  font-weight:500;
  line-height:1.1;
  letter-spacing:.08em;
}

.word-pinyin{
  margin-top:6px;
  color:#8a6b44;
  font-size:clamp(18px,2.2vw,24px);
  line-height:1.35;
}

.word-ja{
  margin-top:3px;
  color:#5f5144;
  font-size:clamp(17px,2.1vw,22px);
  line-height:1.35;
}

.sentence-block{
  width:min(420px,100%);
  margin:12px auto 0;
  padding-top:12px;
  border-top:1px solid rgba(138,107,68,.22);
}

.sentence-zh{
  color:#2b241c;
  font-size:clamp(22px,2.9vw,31px);
  line-height:1.4;
}

.sentence-pinyin{
  margin-top:6px;
  color:#8a6b44;
  font-size:clamp(17px,2.1vw,23px);
  line-height:1.4;
}

.sentence-ja{
  margin-top:4px;
  color:#5f5144;
  font-size:clamp(16px,2vw,22px);
  line-height:1.4;
}

.play-stop-button{
  position:static;
  justify-self:center;
  align-self:center;
  width:var(--lf-button-size);
  height:var(--lf-button-size);
  margin:8px auto;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.78);
  background:rgba(255,250,242,.88);
  color:#5d4323;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(55,38,18,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  z-index:3;
}

.play-stop-button:active{
  transform:scale(.96);
  box-shadow:0 6px 18px rgba(55,38,18,.16);
}

.play-stop-button.is-playing{
  background:rgba(43,36,28,.72);
  color:#fff;
  border-color:rgba(255,255,255,.42);
}

.play-stop-icon,
.play-stop-icon svg{
  width:34px;
  height:34px;
  display:block;
  fill:currentColor;
}

.error-message{
  max-width:560px;
  text-align:center;
  color:rgba(43,36,28,.68);
  line-height:1.7;
}

@media (max-height:760px){
  .text-area{
    padding-bottom:10px;
  }

  .word-zh{
    font-size:clamp(30px,4.2vw,44px);
  }

  .word-pinyin,
  .word-ja{
    font-size:clamp(16px,2vw,21px);
  }

  .sentence-block{
    margin-top:10px;
    padding-top:10px;
  }

  .sentence-zh{
    font-size:clamp(20px,2.6vw,27px);
  }

  .sentence-pinyin,
  .sentence-ja{
    font-size:clamp(15px,1.9vw,20px);
  }
}

@media (orientation:portrait) and (max-width:700px){
  .card{
    width:min(96vw,430px);
  }

  #chapterTitle.chapter-title{
    font-size:15px;
  }

  .word-zh{
    font-size:clamp(34px,10vw,44px);
  }

  .sentence-zh{
    font-size:clamp(21px,6vw,25px);
  }

  .sentence-pinyin,
  .sentence-ja{
    font-size:clamp(16px,4.5vw,19px);
  }

  .photo,
  img#photo.photo{
    object-fit:cover;
  }
}

@media (max-height:690px){
  :root{
    --lf-button-size:48px;
    --lf-button-row:64px;
  }

  .word-zh{
    font-size:30px;
  }

  .word-pinyin,
  .word-ja{
    font-size:15px;
  }

  .sentence-zh{
    font-size:18px;
  }

  .sentence-pinyin,
  .sentence-ja{
    font-size:14px;
  }
}

@media (prefers-reduced-motion:reduce){
  .photo,
  .text-area{
    transition:none;
  }

  .photo.is-changing,
  .text-area.is-changing{
    opacity:1;
    filter:none;
    transform:none;
  }
}

@-moz-document url-prefix(){
  :root{
    --ff-page-pad:8px;
    --ff-text-row:320px;
    --ff-button-row:78px;
    --ff-card-h:calc(100vh - (var(--ff-page-pad) * 2));
    --ff-image-h:calc(var(--ff-card-h) - var(--ff-text-row) - var(--ff-button-row));
    --ff-card-w:min(96vw, calc(var(--ff-image-h) * 4 / 3));
  }

  html,
  body{
    height:100% !important;
    overflow:hidden !important;
  }

  .app{
    height:100vh !important;
    min-height:100vh !important;
    padding:var(--ff-page-pad) !important;
    overflow:hidden !important;
  }

  .card{
    width:var(--ff-card-w) !important;
    max-width:96vw !important;
    height:var(--ff-card-h) !important;
    max-height:var(--ff-card-h) !important;
    display:grid !important;
    grid-template-rows:var(--ff-image-h) var(--ff-text-row) var(--ff-button-row) !important;
    overflow:hidden !important;
  }

  .photo-wrap{
    height:100% !important;
    max-height:none !important;
  }

  .photo,
  img#photo.photo{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
  }

  .text-area{
    height:100% !important;
    min-height:0 !important;
    padding:0 18px 10px !important;
    overflow:hidden !important;
  }

  .text-area .meta-bar{
    margin-bottom:8px !important;
    padding-top:8px !important;
  }

  #chapterTitle.chapter-title{
    font-size:14px !important;
  }

  .word-zh{
    font-size:38px !important;
    line-height:1.08 !important;
  }

  .word-pinyin{
    margin-top:5px !important;
    font-size:18px !important;
    line-height:1.3 !important;
  }

  .word-ja{
    margin-top:2px !important;
    font-size:17px !important;
    line-height:1.3 !important;
  }

  .sentence-block{
    margin-top:9px !important;
    padding-top:9px !important;
  }

  .sentence-zh{
    font-size:23px !important;
    line-height:1.32 !important;
  }

  .sentence-pinyin{
    margin-top:5px !important;
    font-size:17px !important;
    line-height:1.32 !important;
  }

  .sentence-ja{
    margin-top:3px !important;
    font-size:16px !important;
    line-height:1.32 !important;
  }

  .play-stop-button{
    width:54px !important;
    height:54px !important;
    margin:0 !important;
  }

  @media (max-height:700px){
    :root{
      --ff-text-row:300px;
      --ff-button-row:70px;
    }

    .word-zh{
      font-size:32px !important;
    }

    .word-pinyin,
    .word-ja{
      font-size:15px !important;
    }

    .sentence-zh{
      font-size:19px !important;
    }

    .sentence-pinyin,
    .sentence-ja{
      font-size:14px !important;
    }

    .play-stop-button{
      width:48px !important;
      height:48px !important;
    }
  }
}

/* Phase118: disable text-area transition only for immediate first-card rendering. */
.text-area.no-text-transition{
  transition:none !important;
  opacity:1 !important;
}


/* Phase126: fallback play icon.
   If JavaScript fails before updateButton() runs, the button is no longer an empty circle.
*/
.play-stop-icon:empty::before{
  content:"";
  display:block;
  width:0;
  height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:16px solid currentColor;
  margin-left:4px;
}


/* Phase129: boot guard.
   The inline version in index.html prevents first paint flash before external CSS loads.
*/
body.is-booting .app{
  visibility:hidden;
}