/* 寫我的字：日日學加的元件（原網站樣式在 writemyfont/style.css，不改原檔，這裡覆寫） */
/* 原網站：body margin-top 58px、#list-container 固定在 top:0；日日學頁首疊在最上面，其他往下推 36px */
body { margin-top: 94px; }
#list-container { top: 36px; }
#dl-bar { position: fixed; top: 0; left: 0; right: 0; height: 36px; box-sizing: border-box; z-index: 5;
  display: flex; align-items: center; gap: 10px; padding: 0 12px; background: #FFF7E8; border-bottom: 1px solid #F0E2C8; font-size: 15px; white-space: nowrap; overflow: hidden; }
#dl-bar a { color: #B45309; text-decoration: none; }
#dl-bar b { font-size: 16px; }
#dl-bar .credit { margin-left: auto; font-size: 12px; color: #78716C; overflow: hidden; text-overflow: ellipsis; }
#dl-bar .credit a { color: #78716C; text-decoration: underline; }
#dl-bar button { font: inherit; border: 1px solid #E7C98F; background: #fff; border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.dl-kid-row { display: flex; gap: 8px; margin: 8px 0; }
.dl-kid-row button, #dl-kid-add, #dl-lesson-go { font-size: 1.1em; padding: 6px 14px; border-radius: 10px; border: 0; cursor: pointer; }
.dl-kid-pick { flex: 1; text-align: left; }
.dialog select { font-size: 1.1em; padding: 4px; min-width: 60%; }
#dl-lesson-go { margin-top: 1em; background: #F59E0B; color: #fff; }
#dl-lesson-go:disabled { opacity: .4; }
/* 筆順提示層與提示列 */
#dl-guide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
#dl-guide .done { fill: #22C55E; fill-opacity: .35; }
#dl-guide .ghost { fill: #CBD5E1; fill-opacity: 1; }
#dl-guide .next { fill: #F59E0B; fill-opacity: .55; }
#dl-guide .start { fill: #EF4444; }
#dl-hints { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px auto 0; font-size: 15px; color: #57534E; }
#dl-hints[hidden] { display: none; }
#dl-hints > span { background: #fff; border: 1px solid #E7E5E4; border-radius: 8px; padding: 2px 8px; }
#dl-hints button { font: inherit; border: 0; border-radius: 999px; padding: 3px 12px; background: #F59E0B; color: #fff; cursor: pointer; }
#dl-hints #dl-challenge { background: #0EA5E9; }
#dl-hints #dl-challenge.on { background: #16A34A; }
#dl-stars { border: 0 !important; background: none !important; color: #F59E0B; letter-spacing: 2px; }
#dl-challenge-msg { position: absolute; left: 0; right: 0; bottom: -2px; text-align: center; font-size: 15px; color: #fff; pointer-events: none; z-index: 3; }
#dl-challenge-msg span { background: rgba(0,0,0,.6); border-radius: 999px; padding: 2px 10px; }
#dl-praise { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); z-index: 1000; }
#dl-praise[hidden] { display: none; }
#dl-praise .box { background: #fff; border-radius: 24px; padding: 24px 36px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.25); animation: dl-pop .35s ease-out; }
#dl-praise .msg { font-size: 34px; font-weight: 800; color: #B45309; }
#dl-praise .stars { font-size: 44px; letter-spacing: 6px; margin-top: 6px; }
@keyframes dl-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* 用我的字印字卡 */
#dl-print-button[hidden] { display: none; }
#dl-print { position: fixed; inset: 0; z-index: 1001; background: #E7E5E4; overflow: auto; -webkit-overflow-scrolling: touch; user-select: text; }
#dl-print[hidden] { display: none; }
.dl-print-tools { position: sticky; top: 0; display: flex; gap: 10px; align-items: center; padding: 10px 16px; background: #FFF7E8; border-bottom: 1px solid #F0E2C8; }
.dl-print-tools button { font-size: 16px; border: 0; border-radius: 999px; padding: 6px 16px; background: #F59E0B; color: #fff; cursor: pointer; }
.dl-print-tools button + button { background: #fff; color: #57534E; border: 1px solid #E7E5E4; }
#dl-print-note { font-size: 13px; color: #78716C; }
.dl-sheet { width: 210mm; min-height: 297mm; box-sizing: border-box; margin: 16px auto; padding: 14mm; background: #fff; color: #292524; font-family: DLKidFont, 'Noto Sans TC', sans-serif; }
.dl-sheet h1 { font: 700 20px 'Noto Sans TC', sans-serif; margin: 0 0 2px; }
.dl-sheet .sub { font: 13px 'Noto Sans TC', sans-serif; color: #78716C; margin-bottom: 8mm; }
.dl-sheet .chars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4mm; }
.dl-sheet .cell { border: 1.5px solid #D6D3D1; border-radius: 3mm; aspect-ratio: 1; position: relative; display: flex; align-items: center; justify-content: center; }
.dl-sheet .cell .c { font-size: 30mm; line-height: 1; }
.dl-sheet .cell .z { position: absolute; right: 2mm; top: 2mm; font: 11px 'Noto Sans TC', sans-serif; color: #A8A29E; writing-mode: vertical-rl; }
.dl-sheet .cell.std .c { color: #D6D3D1; }
.dl-sheet h2 { font: 700 16px 'Noto Sans TC', sans-serif; margin: 10mm 0 4mm; }
.dl-sheet .phrases { display: flex; flex-wrap: wrap; gap: 4mm 8mm; font-size: 14mm; }
.dl-sheet .foot { margin-top: 10mm; font: 11px 'Noto Sans TC', sans-serif; color: #A8A29E; }
@media print {
  @page { size: A4; margin: 0; }
  body { margin: 0 !important; background: #fff; overflow: visible; }
  body > *:not(#dl-print) { display: none !important; }
  #dl-print { position: static; background: #fff; overflow: visible; }
  .dl-print-tools { display: none; }
  .dl-sheet { margin: 0; }
}
/* 備份提醒：貼在原網站底部工具列（fixed bottom，約 64px 高）上方 */
#dl-backup-note { position: fixed; left: 0; right: 0; bottom: 66px; text-align: center; font-size: 12px; color: #A8A29E; pointer-events: none; }
@media print { #dl-backup-note { display: none; } }
#dl-hints .dl-moe { font-size: 11px; color: #A8A29E; text-decoration: underline; }
/* 大螢幕（iPad）放大寫字格：原網站固定 360px。取寬度與「扣掉上下工具列約 440px 的高度」較小者，最大 640px
   原網站每一筆開始時都會重算畫布比例（fontdrawer.js），所以只改 CSS 不影響筆跡位置；「我的字就是小」(.smallmode) 維持原設定 */
@media screen and (min-width: 700px) and (min-height: 900px) {
  #canvas-container:not(.smallmode), #canvas-container:not(.smallmode) canvas {
    width: min(640px, calc(100vw - 40px), calc(100vh - 440px));
    height: min(640px, calc(100vw - 40px), calc(100vh - 440px));
  }
}

/* 圖示（templates/play/_write_icons.html，取代原本的 emoji）。線條跟著文字色，點綴色寫在 symbol 屬性上 */
.dl-ic { width: 1.25em; height: 1.25em; vertical-align: -0.28em; color: var(--ink); overflow: visible; }
span.butt .dl-ic { width: 1.3em; height: 1.3em; vertical-align: middle; }
#button-container span.butt .dl-ic, #prevButton .dl-ic, #nextButton .dl-ic { width: 1em; height: 1em; }
#dl-hints button .dl-ic { color: #fff; }
#dl-stars .dl-ic { width: 1.1em; height: 1.1em; }
#dl-praise .stars .dl-ic { width: 1em; height: 1em; margin: 0 2px; }
#clearButton { display: inline-flex !important; flex-direction: column; align-items: center; }
#clearButton .dl-lbl { font-size: 12px; line-height: 1.2; color: var(--ink-2); white-space: nowrap; }