/* 深色聲韻盤面；翻牌與搖晃只變動格子或輸入框自身。 */
:root{color-scheme:dark;--dl-paper:var(--ink);--dl-ink:var(--text);--dl-green:#206452;--dl-yellow:#735000;--dl-gray:#535c67}
.dl-shell{max-width:480px;margin:auto;padding:16px 18px 24px}.dl-shell header{text-align:center}.dl-shell h1{font-size:30px;color:var(--dl-ink);margin:0}.dl-intro{font-size:13px;line-height:1.6;margin:8px 0}.dl-legend{display:flex;justify-content:center;gap:5px;font-size:11px;flex-wrap:wrap;margin:8px 0}
#dl-category{text-align:center;font-size:13px;font-weight:700;margin:10px 0}.dl-board{display:grid;gap:5px;margin:0 auto 12px}.dl-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.dl-cell{height:116px;min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--ink2);display:flex;flex-direction:column;overflow:hidden}.dl-char{display:flex;align-items:center;justify-content:center;gap:5px;height:40px;flex-shrink:0;font-size:28px;font-weight:700}.dl-cell.correct>.dl-char,.dl-sound.correct{background:var(--dl-green);color:#fff}.dl-cell.present>.dl-char,.dl-sound.present{background:var(--dl-yellow);color:#fff}.dl-cell.absent>.dl-char,.dl-sound.absent{background:var(--dl-gray);color:#fff}.dl-sounds{display:grid;grid-template-columns:1fr;gap:2px;padding:3px 4px}.dl-sound{display:flex;align-items:center;justify-content:center;font-size:16px;line-height:21px;min-height:21px;border-radius:3px;white-space:nowrap}.dl-sound.neutral{background:transparent}.dl-empty-sounds{margin:auto;text-align:center;color:var(--muted)}.dl-pending{opacity:0}
#dl-form{display:grid;grid-template-columns:minmax(0,1fr) 74px;gap:8px}#dl-input{min-width:0;width:100%;line-height:1.5;font-family:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--muted);border-radius:9px;background:var(--ink2);color:var(--dl-ink);min-height:44px}.dl-button{min-height:44px;border-radius:9px;padding:10px 12px;background:var(--dl-green);color:#fff;font-weight:700;font-size:14px;line-height:1.5;font-family:inherit;border:1px solid var(--dl-green);cursor:pointer}.dl-secondary{background:var(--ink2);color:var(--text);border-color:var(--muted)}.dl-button:disabled{opacity:.55;cursor:default}#dl-error{grid-column:1/-1;min-height:20px;color:#ffb4a6;font-size:13px;margin:0}
#dl-hints{font-size:13px;margin:12px 0;color:var(--dl-ink)}#dl-hints p{background:var(--ink3);border-left:3px solid var(--dl-green);padding:8px;line-height:1.6;margin:6px 0}.dl-hint-controls{display:flex;align-items:center;gap:12px}.dl-hint-controls>span{font-size:12px}.dl-known{font-size:12px;border-top:1px solid var(--line);margin-top:10px;padding-top:5px}.dl-known p{display:grid;grid-template-columns:88px 1fr;gap:8px;line-height:1.8;margin:6px 0}.dl-known span{overflow-wrap:anywhere}#dl-storage{font-size:12px;color:#ffb4a6}.dl-shell footer{text-align:center;font-size:14px}.dl-shell a{color:var(--civ);display:inline-flex;align-items:center;min-height:44px}.dl-shell a.dl-button{justify-content:center;text-decoration:none}
#dl-end{padding:14px;background:var(--ink3);border:1px solid var(--line);border-radius:12px;font-size:14px;display:grid;gap:8px}#dl-end h2{font-size:21px;color:var(--civ);line-height:1.5}#dl-end p{margin:0;line-height:1.6}#dl-mascot{border-radius:12px 12px 12px 0;background:var(--ink2);padding:10px;animation:dl-pop .25s ease-out}.dl-actions{display:flex;gap:8px;flex-wrap:wrap}#dl-fallback{width:100%;min-height:180px;font-size:16px;background:var(--ink2);color:var(--dl-ink)}.dl-answer-sounds{font-size:13px}.dl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.dl-shake{animation:dl-shake .32s ease-in-out}@keyframes dl-shake{0%,100%{transform:translateX(0)}25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}@keyframes dl-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.dl-shake,#dl-mascot{animation:none!important}}

.dl-sound-guide{text-align:center;font-size:12px;color:var(--text);margin:8px 0}
.dl-legend{font-size:12px;white-space:nowrap}
.dl-help{font-size:13px;margin:0 auto;text-align:left}
.dl-help summary{display:flex;align-items:center;justify-content:center;min-height:44px;color:var(--civ);text-decoration:underline;cursor:pointer;list-style:none}
.dl-help summary::-webkit-details-marker{display:none}
.dl-help-content{padding:12px;background:var(--ink2);border:1px solid var(--line);border-radius:10px}
.dl-help-content p{line-height:1.6;margin-top:6px}
.dl-example{margin-bottom:8px}
@media(max-width:759px){
  .dl-row-empty .dl-cell{height:36px;flex-direction:row;align-items:center;justify-content:center}
  .dl-row-empty .dl-char{font-size:18px;height:auto}
  .dl-row-empty .dl-empty-sounds{display:none}
  #dl-form{position:sticky;bottom:0;z-index:2;background:var(--dl-paper);padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
}
@media(min-width:760px){
  .dl-shell{max-width:980px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:32px;align-items:start;grid-template-areas:"header header" "category category" "board form" "board hints" "board known" "board storage" "board footer"}
  .dl-shell header{grid-area:header}
  #dl-category{grid-area:category}
  .dl-board{grid-area:board;width:100%}
  #dl-form,#dl-end{grid-area:form}
  #dl-hints{grid-area:hints}
  .dl-known{grid-area:known}
  #dl-storage{grid-area:storage}
  .dl-shell footer{grid-area:footer}
}
/* 字盤按鈕只變動自身；灰字仍可點。 */
#dl-form{display:flex;flex-direction:column;gap:8px;position:static;padding:0}
#dl-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dl-slot{display:flex;align-items:center;justify-content:center;height:56px;border:2px solid var(--muted);border-radius:9px;font-size:28px;background:var(--ink2)}
.dl-slot.locked{border-color:#69d8b5;background:var(--dl-green)}
.dl-slot.locked::after{content:'鎖定';font-size:10px;margin-left:3px}
#dl-mode{align-self:flex-end;min-height:32px;background:none;border:0;color:var(--civ);text-decoration:underline;cursor:pointer}
#dl-letter-board{display:grid;grid-template-columns:repeat(4,minmax(56px,1fr));gap:8px}
#dl-letter-board[hidden],#dl-input[hidden]{display:none}
.dl-letter{min-width:56px;min-height:56px;font:700 28px/1.3 inherit;font-size:28px;font-family:inherit;border:1px solid var(--muted);border-radius:10px;background:var(--ink3);color:var(--text);cursor:pointer;transition:transform .1s,opacity .1s}
.dl-letter:active{transform:scale(.92);opacity:.8}
.dl-letter.correct{background:var(--dl-green);color:white}
.dl-letter.present{background:var(--dl-yellow);color:white}
.dl-letter.absent{background:#282d34;color:#b8bdc5;border-color:#424851}
.dl-entry-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#dl-remaining{font-size:12px;color:var(--muted);text-align:right;margin:0}
@media(max-width:759px){
  .dl-shell{padding:8px 18px 24px}
  .dl-shell h1{font-size:26px}
  .dl-shell header{display:grid;grid-template-columns:1fr auto;align-items:center}
  .dl-shell header h1,.dl-intro{grid-column:1/-1}
  .dl-legend{font-size:11px;gap:0}
  .dl-help{margin:0}
  .dl-help[open]{grid-column:1/-1}
  .dl-intro{margin:4px 0}
  .dl-legend{margin:4px 0}
  .dl-help summary{min-height:32px}
  #dl-category{margin:6px 0}
  .dl-board{gap:4px;margin-bottom:6px}
  .dl-cell{height:40px;flex-direction:row;align-items:center}
  .dl-char{height:100%;width:30px;font-size:22px}
  .dl-sounds{flex:1;min-width:0;gap:1px;padding:1px 2px}
  .dl-sound{font-size:11px;line-height:11px;min-height:11px}
  #dl-form{gap:4px}
  #dl-slots{gap:6px}
  .dl-slot{height:44px}
  #dl-mode{min-height:28px}
  #dl-letter-board{gap:4px}
}
@media(prefers-reduced-motion:reduce){.dl-letter{transition:none}.dl-letter:active{transform:none}}