/* .darkMode { 
  background-color: #fff !important;
  color: #121212 !important;
}  */

/* @font-face {
  font-family: "Noto Sans";
  src: url("../fonts/noto-sans.woff2") format("woff2");
} */

#app,
html,
body {
  height: 100%;
  margin: 0;
  /* panda bottom fix */
  scrollbar-width: none; 
}

/* beta 110725 | make ai output selection invisible */
/* hold Option and that's enough */
/* #ai pre:first-of-type::selection {
  background-color: transparent;
} */

/* DEBUG */
/* html::-webkit-scrollbar {
  display: none;
} */

body {
  opacity: 0.87;
  cursor: default;
  /* 080924 | transition looks awful */
  /* transition: background-color .2s cubic-bezier(0.22, 0.61, 0.36, 1); */
  /* overflow: hidden; */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

/* to be able to select text */
.pinyin,
.zhuyin,
.char,
.english,
.output,
#wordsSeen,
#wordsSeenNumber {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
}

p {
  /* 080924 | transition looks awful */
  /* transition: color .2s cubic-bezier(0.22, 0.61, 0.36, 1); */
}

#app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}

#welcome {
  animation: fadeInPanda .2s;
}

/* for Safari AI output */
/* .fadeIn {
  animation: fadeIn .4s
} */

.fadeIn {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-duration: .1s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}



#pandaPoof {
  /* filter: grayscale(0.5); */
  /* opacity: .7; */
  position: absolute;
  bottom: -12px;
  /* cursor: pointer; */
  /* width: 240px; */
  z-index: 1;
  /* transition-property: bottom; */
  /* transition-duration: .1s; */
  /* transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); */
  
}





#panda {
  filter: grayscale(0.5);
  /* opacity: .7; */
  position: absolute;
  bottom: -120px;
  cursor: pointer;
  /* width: 240px; */
  z-index: 1;
  transition-property: bottom;
  transition-duration: .1s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Initial animation on appearance */
#panda.animate-in {
  animation: floatIn .2s ease-out forwards;
}

/* hover 的浮起還是用 bottom：只在滑鼠移上去時才跑，不影響載入，
   而且它在三個中斷點各有不同的目標值（-12px 相對於 -120/-80/-60），
   換成 transform 要為每個中斷點重算，划不來。 */

/* Hover to float fully up */
#panda:hover {
  filter: none;
  opacity: 1;
  bottom: -12px;
}

/* Keyframes */
/* 進場動畫用 transform，不要用 bottom。
   改 bottom 每一格都會觸發 layout（實測熊貓在動畫期間持續產生 layout-shift
   事件）；transform 只在合成層做，完全不碰版面。

   這裡刻意用相對位移（往下 40px 再滑回原位），而不是絕對座標 ——
   #panda 的 bottom 在不同螢幕尺寸有 -120 / -80 / -60 三種值，
   用相對位移就不必為每個中斷點各寫一份。 */
@keyframes floatIn {
  from { transform: translateY(40px); }
  to { transform: translateY(0); }
}

#panda.fade {
  opacity: 0;
  cursor: default !important;
}





#wordsSeen,
#welcome {
  font-family: "Noto Sans", Fallback, sans-serif;
  font-size: 2em;
  position: absolute;
  /* bottom: 0px; */
  top: 0px;
  /* z-index: -99; */
  opacity: 1;
  /* padding-bottom: 1em; */
  padding-top: 1em;
  transition: opacity .2s ease-in-out;
  transition-delay: 0.6s;
}

/* #welcome {
    top: 0px;
}

#wordsSeen {
  bottom: 0px;
} */

#wordsSeenNumber,
#welcome {
  vertical-align: middle;
  font-size: 4em !important;
}

#easter {
  position: absolute;
  z-index: 100;
}

#wordsSeen.invisible {
  opacity: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.87;
  }
}

.char {
  margin: 0 0.1em;
  /* font-size: 20rem; */
  font-size: clamp(3rem, 23vw, 20rem);
  /* white-space: nowrap; */
  /* overflow: hidden; */
}

/* 移動設備適配 */
@media screen and (max-width: 768px) {
  .char {
    /* font-size: 10rem; */
    font-size: clamp(2rem, 20vw, 11rem);
  }
  
  .pinyin {
    font-size: 1.5rem !important;
  }
  
  .english {
    font-size: 1rem;
  }
  
  .zhuyin {
    font-size: 2rem !important;
  }

  #wordsSeen {
    font-size: 1rem !important;
  }

  #wordsSeenNumber {
    font-size: 2rem !important;
  }

  #panda {
    width: 160px;
    bottom: -80px;
  }

  #ai {
    margin-bottom: 3rem !important;
    min-height: 4rem !important;
    /* align-self: center; */
    /* HACK prevents mobile Safari from moving the line */
    left:0;
    right:0;
  }


  #ai pre:first-of-type {
    font-size: 2rem !important;
  } 

  .output {
    font-size: 1rem !important;
  }

  /* this hack doesn't work well */
  /* ::-webkit-scrollbar {
    display: none;
  } */
}

/* 更小的屏幕 */
@media screen and (max-width: 480px) {
  .char {
    /* font-size: 6rem; */
    font-size: clamp(2rem, 20vw, 6rem);
  }
  
  .pinyin {
    font-size: 1.2rem !important;
  }
  
  .english {
    font-size: 1.5rem !important;
  }
  
  .zhuyin {
    font-size: 1.6rem !important;
  }

  #wordsSeen {
    font-size: 0.9rem !important;
  }

  #wordsSeenNumber {
    font-size: 1.8rem !important;
  }

  #panda {
    width: 120px;
    bottom: -60px;
  }

  #ai {
    margin-bottom: 3rem !important;
    min-height: 2rem !important;
    /* align-self: center; */
    /* HACK prevents mobile Safari from moving the line */
    left:0;
    right:0;
  }

  #ai pre:first-of-type {
    font-size: 1.5rem !important;
  } 

  .output {
    font-size: 1rem !important;
  }

  /* this hack doesn't work well */
  /* ::-webkit-scrollbar {
    display: none;
  } */
}


/* BETA */
/* why 'sans-serif' or 'serif' ? */
/* different fonts */
:root {
  --font-PingFang: "PingFang SC", "PingFang", "-apple-system", sans-serif;
  --font-Wawati: "Wawati SC", "Wawati", sans-serif;
  --font-Xingkai: "Xingkai SC", "Xingkai", serif;
  --font-HanziPen: "HanziPen SC", "HanziPen", sans-serif;
  --font-Hannotate: "Hannotate SC", "Hannotate", sans-serif;
  --font-Baoli: "Baoli SC", "Baoli", sans-serif;
  --font-LingWai: "LingWai SC", "LingWai", sans-serif;
  --font-Yuanti: "Yuanti SC", "Yuanti", sans-serif;
  --font-Libian: "Libian SC", "Libian", serif;
  --font-Songti: "Songti SC", "Songti", serif;
  --font-Yuppy: "Yuppy SC", "Yuppy", sans-serif;
  --font-BiauKaiTC: "BiauKaiTC", "BiauKai", serif;
  --font-Lantinghei: "Lantinghei SC", "Lantinghei", sans-serif;
  --font-Weibei: "Weibei SC", "Weibei", serif;
  --font-Times: "Times New Roman", "Times", serif;
  --font-Kaiti: "STKaiti", "Kaiti", "KaiTi", serif;
  --font-Heiti: "Heiti SC", "Heiti", sans-serif;
}

body[data-char="traditional"] {
  --font-PingFang: "PingFang TC", "PingFang SC", "PingFang", "-apple-system", sans-serif;
  --font-Wawati: "Wawati TC", "Wawati SC", "Wawati", sans-serif;
  --font-Xingkai: "Xingkai TC", "Xingkai SC", "Xingkai", serif;
  --font-HanziPen: "HanziPen TC", "HanziPen SC", "HanziPen", sans-serif;
  --font-Hannotate: "Hannotate TC", "Hannotate SC", "Hannotate", sans-serif;
  --font-Baoli: "Baoli TC", "Baoli SC", "Baoli", sans-serif;
  --font-LingWai: "LingWai TC", "LingWai SC", "LingWai", sans-serif;
  --font-Yuanti: "Yuanti TC", "Yuanti SC", "Yuanti", sans-serif;
  --font-Libian: "Libian TC", "Libian SC", "Libian", serif;
  --font-Songti: "Songti TC", "Songti SC", "Songti", serif;
  --font-Yuppy: "Yuppy TC", "Yuppy SC", "Yuppy", sans-serif;
  --font-BiauKaiTC: "BiauKaiTC", "BiauKai", serif;
  --font-Lantinghei: "Lantinghei TC", "Lantinghei SC", "Lantinghei", sans-serif;
  --font-Weibei: "Weibei TC", "Weibei SC", "Weibei", serif;
  --font-Times: "Times New Roman", "Times", serif;
  --font-Kaiti: "Kaiti TC", "STKaiti", "Kaiti", "KaiTi", serif;
  --font-Heiti: "Heiti TC", "Heiti SC", "Heiti", sans-serif;
}

.PingFang-font {
  font-family: var(--font-PingFang) !important;
}

.Wawati-font {
  font-family: var(--font-Wawati) !important;
}

.Xingkai-font {
  font-family: var(--font-Xingkai) !important;
}

.HanziPen-font {
  font-family: var(--font-HanziPen) !important;
}

.Hannotate-font {
  font-family: var(--font-Hannotate) !important;
}

.Baoli-font {
  font-family: var(--font-Baoli) !important;
}

.LingWai-font {
  font-family: var(--font-LingWai) !important;
}

.Yuanti-font {
  font-family: var(--font-Yuanti) !important;
}

.Libian-font {
  font-family: var(--font-Libian) !important;
}

.Songti-font {
  font-family: var(--font-Songti) !important;
}

.Yuppy-font {
  font-family: var(--font-Yuppy) !important;
}

.BiauKaiTC-font {
  font-family: var(--font-BiauKaiTC) !important;
}

.Lantinghei-font {
  font-family: var(--font-Lantinghei) !important;
}

.Weibei-font {
  font-family: var(--font-Weibei) !important;
}

.Times-font {
  font-family: var(--font-Times) !important;
}

.Kaiti-font {
  font-family: var(--font-Kaiti) !important;
  /* BETA fix zhuyin being too close */
  margin-bottom: 0.1em;
}

.Heiti-font {
  font-family: var(--font-Heiti) !important;
  /* BETA fix zhuyin being too close */
  margin-bottom: 0.1em;
}

/* nice fonts */


a {
  color: inherit;
  text-decoration: inherit;
}

.charClickable {
  cursor: pointer;
  transition: transform .6s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}



.charClickable:hover {
  /* transition: transform 0.225s ease-in; */
  transform: scale(1.01);
  transition-duration: .3s;
  
}

/* .zhuyin, */
.pinyin {
  /* not sure why it was disabled */
  font-family: "Noto Sans", Fallback, sans-serif !important;
  font-size: 2.5rem;
  margin: 0.1em;
  font-weight: bold;
  /* padding-top: 0.5em; */
}

.english {
  font-family: "Noto Sans", Fallback, sans-serif;
  font-size: 1.5rem;
  /* font-weight: bold; */
  /* margin: 0.1em 3em !important; */
  margin: 0.1em !important;
}

 .pos {
    opacity: .5;
  }

.zhuyin {
  /* apply selected font to make it fun */
  /* font-family: "Noto Sans", Fallback, sans-serif; */
  font-size: 3rem;
  font-weight: bold;
  /* margin: 0.1em 3em !important; */
  margin: 0.1em !important;
  /* padding-top: 0.5em; */
  /* padding-top: 0.1em; */
}

.hide {
  display: none;
}

/* Pleco Tone Colors */
.tone1 { background-image: linear-gradient(rgba(227, 0, 0, 0.67), rgba(227, 0, 0, 1));}
.tone2 { background-image: linear-gradient(rgba(2, 179, 28, 0.67), rgba(2, 179, 28, 1));}
.tone3 { background-image: linear-gradient(rgba(36, 32, 255, 0.67), rgba(36, 32, 255, 1));}
.tone4 { background-image: linear-gradient(rgba(160, 16, 218, 0.67), rgba(160, 16, 218, 1));}
.tone5 { background-image: linear-gradient(rgba(0, 0, 0, 0.67), rgba(0, 0, 0, 1));}

.tone1,
.tone2,
.tone3,
.tone4,
.tone5 {
  /* padding-top: 0.3em; */
  /* background-clip: text;
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent; */
  color: transparent;
  background-clip: text;
}

.tone1::selection {
color: rgba(227, 0, 0, 0.67);
}
.tone2::selection {
color: rgba(2, 179, 28, 0.67);
}
.tone3::selection {
color: rgba(36, 32, 255, 0.67);
}
.tone4::selection {
color: rgba(160, 16, 218, 0.67);
}
.tone5::selection {
color: rgba(0, 0, 0, 0.67);
}
.tone1::selection,
.tone2::selection,
.tone3::selection,
.tone4::selection,
.tone5::selection {
background-color: #c4dbfc;
}

/* DARK MODE, these settings should be applied at the end */
@media (prefers-color-scheme: dark) {

.tone5 { background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 1)); }

.tone1::selection {
color: rgba(227, 0, 0, 1);
}
.tone2::selection {
color: rgba(2, 179, 28, 1);
}
.tone3::selection {
color: rgba(36, 32, 255, 1);
}
.tone4::selection {
color: rgba(160, 16, 218, 1);
}
.tone5::selection {
color: rgba(255, 255, 255, 0.67);
}
.tone1::selection,
.tone2::selection,
.tone3::selection,
.tone4::selection,
.tone5::selection {
background-color: #374964;
}
}

/* ============= AI ============ */


/* BETA AI */
/* #output {
  font-family: "Noto Sans", Fallback, sans-serif !important;
  font-size: 2rem;
  margin: 0.5em auto;
  font-weight: bold;
  text-align: center;
  display: block;
  max-width: 90%;
  white-space: pre-wrap;
  } */
  #ai {
    /* align-self: flex-start; */
    /* align-self: baseline; */
    /* margin: 0em; */
    
    /* absolute is messed up in Safari and requires left/right hack*/
    /* https://stackoverflow.com/questions/14023677/absolute-positioning-messed-up-in-safari */
    position: absolute;
    left:0;
    right:0;
    /* top: 2rem; */
    bottom: 0px;
    /* padding-bottom: 1em; */
    margin-top: 1em;
    margin-bottom: 4em;
    /* opacity: 0.8; */
    user-select: text;
    /* -webkit-user-select: text; */
  }
  /* .ai:hover {
    opacity: 1;
  } */
  
  .output {
    font-family: "Noto Sans", Fallback, sans-serif;
    font-size: 2rem;
    /* top: 0px; */
    /* z-index: -99; */
    opacity: 1;
    /* padding-top: 1em; */
    /* white-space: pre-wrap; */
    text-wrap: balance;

    /* user-select: all; */
    user-select: text;
    /* -webkit-user-select: all; */
    /* -moz-user-select: all; */
    transition: opacity .1s ease-in-out;
    text-align: center;
    /* to prevent content from moving */
    /* min-height: 2em;  */
    margin-top: 0;
    margin-bottom: 0.1em; 
    /* margin: 0 4rem 22rem 4rem; */
}

#ai pre:first-of-type {
  /* margin-top: 0.5em; */
  /* font-size: 3em; */
  font-size: 3rem;
  margin-bottom: 0.1em;
}

/* AI 例句是非同步填進來的，內容一定會變。
   #ai 本身是 position: absolute，所以它長高不會推動上面的字 ——
   但重繪還是會發生。contain 讓瀏覽器知道這個盒子裡的變化不會影響外面，
   重繪範圍就限制在這一塊，不必重算整頁。

   用 layout paint 而不是更激進的 content：#ai 的子元素都是 static 的 <pre>，
   不受 containing block 改變影響，但 style containment 對繼承下來的字型
   設定有風險，不必冒。 */
#ai {
  contain: layout paint;
}

/* ── 點熊貓之後的紙屑 canvas ────────────────────────────────────
   由 src/showSeenWords.js 動態建立、放完就移除。

   自己建 canvas 而不是讓 canvas-confetti 用它的預設值，是為了避開
   MV3 的 CSP —— 它預設會把繪製丟到 blob: URL 建出來的 Worker，而
   script-src 'self' 不放行 blob:。Safari 走的是 .webp 那條路，
   不會建立這個元素。 */

#confettiCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  /* 不要擋到底下的字與連結 */
  pointer-events: none;
  /* 熊貓是 z-index: 1，紙屑要蓋在上面 */
  z-index: 2;
}

/* ── FSRS 評分按鈕 ─────────────────────────────────────────────
   只有在設定裡同時開了「Spaced repetition」跟「Rating buttons」才會出現，
   而且是在瀏覽器閒下來之後才插進 DOM 的。

   位置在那個字的正上方、詞性／翻譯的正下方 —— 游標從按鈕移到字只有一行的距離。
   釘在畫面頂端的話，把翻譯關掉的人每按一次都要橫跨整個螢幕。

   刻意只有兩顆按鈕、沒有任何文字：這一列是水平置中的，按下之後才多出
   一段字的話，兩顆按鈕會被往左推，看起來就像按一下就跳位。
   換頁本身就是回饋，不需要再寫字。 */

/* 第一次繪製就留好的空位。按鈕之後填進來，版面不會動。
   高度寫成跟按鈕一致：18px 字級 × 1.2 行高 ＋ 上下 .42em 內距 ＋ 1px 框線。 */
.fsrs-slot {
  font-size: 18px;
  min-height: calc(1.2em + .84em + 2px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 離上面的詞性／翻譯遠一點，之前只隔 16px 太擠了 */
  margin-top: 1.6rem;
  margin-bottom: 1.5rem;
}

.fsrs-rate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  font-size: 18px;
  /* 只淡入，不位移 —— 位移會再觸發一次 layout */
  animation: fsrsRateIn .35s ease-out both;
  animation-delay: .1s;
}

.fsrs-rate-btn {
  font: inherit;
  color: inherit;
  cursor: pointer;
  /* padding 用 em，所以會跟著 font-size 一起放大 */
  padding: .42em 1.25em;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  /* 透明度刻意不動 —— 低調是這兩顆按鈕該有的樣子，
     它們不該跟那個字搶注意力。 */
  opacity: .38;
  transition: opacity .18s ease, border-color .18s ease;
}

.fsrs-rate-btn:hover,
.fsrs-rate-btn:focus-visible {
  opacity: .85;
}

.fsrs-rate-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* 評完之後：按下的那顆留著當作已選的記號，另一顆淡出 */
.fsrs-rate.is-rated .fsrs-rate-btn {
  cursor: default;
  pointer-events: none;
  opacity: .18;
}

.fsrs-rate.is-rated .fsrs-rate-btn.is-picked {
  opacity: .8;
}

@keyframes fsrsRateIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fsrs-rate {
    animation: none;
  }
}


/* ── 網頁版專屬（由 build-pwa.mjs 附加）─────────────────────────────────
   全部 position: fixed，脫離文件流 —— 不會造成任何版面位移。 */

.settings-gear {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 10;
  font-size: 20px;
  line-height: 1;
  padding: 8px;
  text-decoration: none;
  color: inherit;
  opacity: .25;
  transition: opacity .18s ease;
}

.settings-gear:hover,
.settings-gear:focus-visible {
  opacity: .8;
}

.install-hint {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 20;
  display: flex;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  background: rgba(127, 127, 127, .16);
  backdrop-filter: blur(8px);
}

.install-hint button {
  flex: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  opacity: .6;
  padding: 4px 8px;
}

.back-link {
  display: inline-block;
  margin-bottom: 1em;
  color: inherit;
  opacity: .6;
  font-size: 14px;
}