/*
 * Chengyu Dragon King 1.22.0
 * Lightweight learning presentation layer.
 *
 * This file intentionally changes presentation only. Existing layout hooks,
 * screen IDs, game states and WordPress integration remain untouched.
 */

:root{
  --cdk-bg:#f5f7f5;
  --cdk-surface:#ffffff;
  --cdk-surface-soft:#f0f7f2;
  --cdk-surface-muted:#f1f3f1;
  --cdk-text:#1d211f;
  --cdk-muted:#68716c;
  --cdk-green:#248a4b;
  --cdk-green-strong:#19713c;
  --cdk-green-soft:#e7f5eb;
  --cdk-green-border:#cfe7d6;
  --cdk-border:rgba(35,50,41,.11);
  --cdk-divider:rgba(35,50,41,.09);
  --cdk-shadow:0 1px 2px rgba(25,42,31,.03),0 10px 28px rgba(25,42,31,.055);
  --cdk-shadow-raised:0 8px 24px rgba(25,42,31,.08);
  --ink:var(--cdk-text);
  --muted:var(--cdk-muted);
  --green:var(--cdk-green);
  --green2:#4aac6e;
  --shadow:var(--cdk-shadow);
  --soft:0 2px 10px rgba(25,42,31,.05);
  --m-bg:var(--cdk-bg);
  --m-paper:var(--cdk-surface);
  --m-ink:var(--cdk-text);
  --m-muted:var(--cdk-muted);
  --m-green:var(--cdk-green);
  --m-green-dark:var(--cdk-green-strong);
  --m-green-soft:var(--cdk-green-soft);
  --m-border:var(--cdk-border);
  --m-shadow:var(--cdk-shadow);
}

html,
body{
  background:var(--cdk-bg)!important;
  color:var(--cdk-text)!important;
}

body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

#app{
  background:var(--cdk-bg)!important;
  color:var(--cdk-text)!important;
}

#app .screen{
  background:var(--cdk-bg)!important;
}

#app .card{
  background:var(--cdk-surface)!important;
  border:1px solid var(--cdk-border)!important;
  border-radius:20px!important;
  box-shadow:var(--cdk-shadow)!important;
  backdrop-filter:none!important;
}

#app button,
#app input,
#app select{
  min-height:44px;
}

#app button{
  touch-action:manipulation;
}

#app button:focus-visible,
#app input:focus-visible,
#app select:focus-visible{
  outline:3px solid rgba(36,138,75,.22)!important;
  outline-offset:2px;
}

#app .primary{
  background:var(--cdk-green)!important;
  color:#fff!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
  transform:none;
}

#app .primary:active{
  background:var(--cdk-green-strong)!important;
  box-shadow:none!important;
  transform:scale(.985)!important;
}

#app .secondary{
  background:var(--cdk-surface)!important;
  color:var(--cdk-text)!important;
  border:1px solid var(--cdk-border)!important;
  box-shadow:none!important;
}

#app .pill{
  background:var(--cdk-green-soft)!important;
  color:var(--cdk-green-strong)!important;
  border:0!important;
}

#app :is(.progress-track,.track,.meter,.lesson-progress-line,.healthy-progress,.puzzle-progress-line){
  background:#e4e8e5!important;
  box-shadow:none!important;
}

#app :is(.progress-track,.track,.meter,.lesson-progress-line,.healthy-progress,.puzzle-progress-line)>i,
#app :is(.progress-track,.track,.meter,.lesson-progress-line,.healthy-progress,.puzzle-progress-line) i{
  background:var(--cdk-green)!important;
  box-shadow:none!important;
}

/* Navigation and headers */
#app .topbar,
#app .game-top,
#app .challenge-play-top,
#app .elim-top{
  color:var(--cdk-text)!important;
}

#app .icon-btn{
  background:var(--cdk-surface)!important;
  color:var(--cdk-text)!important;
  border:1px solid var(--cdk-border)!important;
  border-radius:16px!important;
  box-shadow:none!important;
}

#app .top-title span,
#app .level-label small,
#app .challenge-clock small,
#app .challenge-score-mini small{
  color:var(--cdk-muted)!important;
}

#app .bottom-nav,
#app .bottom-nav.five{
  background:rgba(250,252,250,.94)!important;
  border-top:1px solid var(--cdk-border)!important;
  box-shadow:0 -1px 12px rgba(25,42,31,.035)!important;
  backdrop-filter:saturate(160%) blur(18px)!important;
  -webkit-backdrop-filter:saturate(160%) blur(18px)!important;
}

#app .bottom-nav button,
#app .bottom-nav button span{
  color:#7d8580!important;
  background:transparent!important;
}

#app .bottom-nav button.active,
#app .bottom-nav button.active span{
  color:var(--cdk-green)!important;
  background:transparent!important;
}

#app .bottom-nav button.active:after{
  display:none!important;
}

/* Home */
#app #screen-home .mobile-profile-head{
  padding:4px 2px 16px!important;
}

#app #screen-home .mini-avatar,
#app #screen-home .platform-account,
#app #screen-home .home-streak{
  background:var(--cdk-surface)!important;
  border:1px solid var(--cdk-border)!important;
  box-shadow:none!important;
}

#app #screen-home .mini-avatar{
  border-radius:18px!important;
}

#app #screen-home .mini-user-copy>span,
#app #screen-home .platform-account span{
  background:var(--cdk-green-soft)!important;
  color:var(--cdk-green-strong)!important;
}

#app #screen-home .mini-user-copy h1{
  color:var(--cdk-text)!important;
  letter-spacing:-.35px!important;
}

#app #screen-home .mini-user-copy p,
#app #screen-home .continue-copy>p,
#app #screen-home .continue-meta,
#app #screen-home .home-puzzle-copy>p{
  color:var(--cdk-muted)!important;
}

#app #screen-home .continue-card{
  background:var(--cdk-surface-soft)!important;
  border-color:var(--cdk-green-border)!important;
  box-shadow:none!important;
}

#app #screen-home .continue-card:before,
#app #screen-home .mascot-halo{
  display:none!important;
}

#app #screen-home .continue-kicker span{
  color:var(--cdk-green-strong)!important;
}

#app #screen-home .continue-mascot img{
  filter:none!important;
}

#app #screen-home .mobile-primary{
  border-radius:15px!important;
}

#app #screen-home :is(.mission-card,.weekly-card,.healthy-card,.home-puzzle,.compact-stage-card,.home-mastery){
  background:var(--cdk-surface)!important;
  border-color:var(--cdk-border)!important;
  box-shadow:none!important;
}

#app #screen-home .mission-kicker,
#app #screen-home .mission-status{
  color:var(--cdk-green-strong)!important;
}

#app #screen-home .mission-status,
#app #screen-home .mission-index,
#app #screen-home .mission-done-note,
#app #screen-home .weekly-mission.done,
#app #screen-home .healthy-setting-fixed{
  background:var(--cdk-green-soft)!important;
}

#app #screen-home .mission-item,
#app #screen-home .weekly-mission{
  background:#f8faf8!important;
  border:1px solid var(--cdk-divider)!important;
  box-shadow:none!important;
}

#app #screen-home .mission-item.done .mission-index{
  background:var(--cdk-green)!important;
}

#app #screen-home .healthy-card{
  background:var(--cdk-surface)!important;
}

#app #screen-home .healthy-icon,
#app #screen-home .grade-adapt-icon{
  background:var(--cdk-green-soft)!important;
  box-shadow:none!important;
}

#app #screen-home .practice-grid-mobile{
  gap:10px!important;
}

#app #screen-home .quick-card,
#app #screen-home :is(.quick-practice,.quick-review,.quick-weak,.quick-challenge){
  background:var(--cdk-surface)!important;
  border:1px solid var(--cdk-border)!important;
  border-radius:18px!important;
  box-shadow:none!important;
}

#app #screen-home .quick-card:active{
  background:#f7faf8!important;
  transform:scale(.985)!important;
}

#app #screen-home .quick-icon{
  background:var(--cdk-green-soft)!important;
}

#app #screen-home .quick-card em{
  background:#f0f3f1!important;
  color:var(--cdk-muted)!important;
}

#app #screen-home .home-puzzle-thumb,
#app #screen-home .home-puzzle>button{
  background:var(--cdk-surface-muted)!important;
}

#app #screen-home .home-puzzle-copy>span{
  color:var(--cdk-green-strong)!important;
}

#app #screen-home .puzzle-inline-progress{
  background:#e4e8e5!important;
}

#app #screen-home .puzzle-inline-progress i{
  background:var(--cdk-green)!important;
}

/* Learning path */
#app #screen-map .grade-path-tabs{
  gap:8px!important;
}

#app #screen-map .grade-tab{
  background:var(--cdk-surface)!important;
  color:var(--cdk-muted)!important;
  border:1px solid var(--cdk-border)!important;
  box-shadow:none!important;
}

#app #screen-map .grade-tab.active,
#app #screen-map .grade-tab.selected{
  background:var(--cdk-green)!important;
  color:#fff!important;
  border-color:var(--cdk-green)!important;
}

#app #screen-map .grade-tab.active small,
#app #screen-map .grade-tab.selected small{
  color:rgba(255,255,255,.82)!important;
}

#app #screen-map .map-summary{
  box-shadow:none!important;
}

#app #screen-map .unit-guide{
  color:var(--cdk-muted)!important;
  padding:8px 2px!important;
}

#app #screen-map .level-node{
  background:var(--cdk-surface)!important;
  border:1px solid var(--cdk-border)!important;
  border-radius:18px!important;
  box-shadow:none!important;
}

#app #screen-map .level-node button{
  background:var(--cdk-green-soft)!important;
  color:var(--cdk-green-strong)!important;
  border:0!important;
  box-shadow:none!important;
  animation:none!important;
  outline:0!important;
}

#app #screen-map .level-node.open button{
  background:var(--cdk-green)!important;
  color:#fff!important;
}

#app #screen-map .level-node.current{
  background:#f4faf6!important;
  border-color:rgba(36,138,75,.42)!important;
  outline:0!important;
}

#app #screen-map .level-node.current button{
  animation:none!important;
}

#app #screen-map .level-node.locked{
  opacity:.58!important;
}

#app #screen-map .level-node.locked button{
  background:#eef1ef!important;
  color:#8b938e!important;
}

#app #screen-map .level-node.practice button{
  background:#edf4fa!important;
  color:#3977a3!important;
}

#app #screen-map .level-node.review button{
  background:#faf4e8!important;
  color:#987127!important;
}

#app #screen-map .level-node.boss button{
  background:#f8eeee!important;
  color:#a94d47!important;
}

/* Challenge hub */
#app #screen-challenge{
  background:var(--cdk-bg)!important;
}

#app #screen-challenge .challenge-hero{
  background:var(--cdk-surface-soft)!important;
  border-color:var(--cdk-green-border)!important;
  box-shadow:none!important;
}

#app #screen-challenge .challenge-trophy{
  opacity:.72!important;
  filter:saturate(.75)!important;
}

#app #screen-challenge .challenge-summary .card{
  background:var(--cdk-surface)!important;
  border-color:var(--cdk-border)!important;
  box-shadow:none!important;
}

#app #screen-challenge .challenge-list-v13 .challenge-card{
  --challenge-accent:var(--cdk-green)!important;
  --challenge-tint:var(--cdk-green-soft)!important;
  background:var(--cdk-surface)!important;
  border:1px solid var(--cdk-border)!important;
  border-radius:20px!important;
  box-shadow:none!important;
}

#app #screen-challenge .challenge-list-v13 .challenge-card:before{
  display:none!important;
}

#app #screen-challenge .challenge-list-v13 .challenge-card:active{
  background:#f9fbfa!important;
  box-shadow:none!important;
}

#app #screen-challenge .challenge-list-v13 .challenge-card-visual{
  border:1px solid var(--cdk-divider)!important;
  border-radius:15px!important;
  box-shadow:none!important;
}

#app #screen-challenge .challenge-list-v13 .challenge-type,
#app #screen-challenge .challenge-enter{
  background:var(--cdk-green-soft)!important;
  color:var(--cdk-green-strong)!important;
}

#app #screen-challenge .challenge-list-v13 .challenge-tags span{
  background:#f1f3f1!important;
  color:var(--cdk-muted)!important;
}

#app #screen-challenge .challenge-list-v13 .challenge-tags span[id^="stat"]{
  color:var(--cdk-green-strong)!important;
}

/* Lessons and answer feedback */
#app #screen-game .battle-stage{
  height:120px!important;
  background:var(--cdk-surface-soft)!important;
  border:1px solid var(--cdk-green-border)!important;
  border-radius:20px!important;
  box-shadow:none!important;
}

#app #screen-game .battle-stage:before,
#app #screen-game .battle-stage:after,
#app #screen-game .stage-hills,
#app #screen-game .road-dots{
  display:none!important;
}

#app #screen-game .dragon-battle{
  bottom:9px!important;
}

#app #screen-game .dragon-battle img,
#app #screen-game .boss-box img{
  filter:none!important;
}

#app #screen-game .question-card{
  background:var(--cdk-surface)!important;
  border-color:var(--cdk-border)!important;
  box-shadow:none!important;
}

#app #screen-game .question-voice-btn,
#app #screen-game .skill-row>button,
#app #screen-game .combo-meter{
  background:var(--cdk-surface)!important;
  border:1px solid var(--cdk-border)!important;
  box-shadow:none!important;
}

#app #screen-game .question-voice-btn{
  color:var(--cdk-green-strong)!important;
}

#app #screen-game .question-voice-btn:after{
  color:var(--cdk-muted)!important;
  border-color:var(--cdk-border)!important;
  box-shadow:none!important;
}

#app #screen-game :is(.meaning-card,.scene-bubble,.idiom-box,.spell-cell,.chain-slot){
  background:#f7f9f7!important;
  border:1px solid var(--cdk-divider)!important;
  box-shadow:none!important;
}

#app #screen-game .answer{
  background:var(--cdk-surface)!important;
  color:var(--cdk-text)!important;
  border:1px solid var(--cdk-border)!important;
  border-radius:18px!important;
  box-shadow:none!important;
}

#app #screen-game .answer.correct{
  background:var(--cdk-green-soft)!important;
  border-color:#75ba89!important;
  color:var(--cdk-green-strong)!important;
}

#app #screen-game .answer.wrong{
  background:#fff1ef!important;
  border-color:#e0a09a!important;
  color:#a6413a!important;
}

#app #screen-game .skill-row>button small{
  background:var(--cdk-green-strong)!important;
}

#app #screen-game .feedback-sheet{
  background:rgba(255,255,255,.97)!important;
  border-top:1px solid var(--cdk-border)!important;
  box-shadow:0 -8px 28px rgba(25,42,31,.08)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}

#app #screen-game .feedback-sheet.wrong{
  background:rgba(255,248,247,.98)!important;
}

#app #screen-game .feedback-sheet button,
#app #screen-game .feedback-icon{
  background:var(--cdk-green)!important;
}

#app #screen-game .feedback-sheet.wrong .feedback-icon{
  background:#c85c52!important;
}

/* Elimination */
#app #screen-eliminate .elim-progress,
#app #screen-eliminate .elim-intel{
  background:var(--cdk-surface)!important;
  border-color:var(--cdk-border)!important;
  box-shadow:none!important;
}

#app #screen-eliminate .elim-mastery-chip,
#app #screen-eliminate .elim-message span{
  background:var(--cdk-green-soft)!important;
  color:var(--cdk-green-strong)!important;
}

#app #screen-eliminate .elim-target-bar{
  background:var(--cdk-surface)!important;
  border:1px solid var(--cdk-border)!important;
  box-shadow:none!important;
}

#app #screen-eliminate #elimClearBtn,
#app #screen-eliminate #elimHintBtn{
  background:var(--cdk-surface)!important;
  color:var(--cdk-text)!important;
  border:1px solid var(--cdk-border)!important;
  box-shadow:none!important;
}

#app #screen-eliminate .eliminate-board{
  background:#edf2ee!important;
  border:1px solid var(--cdk-border)!important;
  border-radius:18px!important;
  box-shadow:none!important;
}

#app #screen-eliminate .elim-cell{
  background:#fff!important;
  color:var(--cdk-text)!important;
  border:1px solid rgba(35,50,41,.12)!important;
  border-radius:10px!important;
  box-shadow:none!important;
}

#app #screen-eliminate .elim-cell.selected{
  background:var(--cdk-green-soft)!important;
  color:var(--cdk-green-strong)!important;
  border-color:#69ad7d!important;
  box-shadow:inset 0 0 0 1px rgba(36,138,75,.12)!important;
}

#app #screen-eliminate .elim-cell.hint{
  background:#fff7da!important;
  border-color:#d6ae45!important;
  box-shadow:none!important;
}

#app #screen-eliminate .elim-cell.empty{
  background:rgba(255,255,255,.32)!important;
  border:1px dashed rgba(35,50,41,.1)!important;
}

#app #screen-eliminate .elim-found-strip i{
  background:#dde3df!important;
  box-shadow:none!important;
}

#app #screen-eliminate .elim-found-strip i.done{
  background:var(--cdk-green)!important;
  box-shadow:none!important;
}

#app #screen-eliminate .elim-word-learning{
  background:#26312a!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:16px!important;
  box-shadow:var(--cdk-shadow-raised)!important;
}

/* Mini challenges and crossword */
#app :is(#screen-mini-challenge,#screen-crossword) :is(.mini-question-card,.crossword-clue,.crossword-board-card,.crossword-words){
  background:var(--cdk-surface)!important;
  border-color:var(--cdk-border)!important;
  box-shadow:none!important;
}

#app #screen-mini-challenge .mini-question-head>span,
#app #screen-crossword .crossword-clue-top>span{
  background:var(--cdk-green-soft)!important;
  color:var(--cdk-green-strong)!important;
}

#app #screen-mini-challenge .mini-question-head button,
#app #screen-crossword .crossword-clue-top button{
  background:#f1f4f2!important;
  color:var(--cdk-green-strong)!important;
  border:1px solid var(--cdk-divider)!important;
  box-shadow:none!important;
}

#app #screen-mini-challenge :is(.mini-visual,.mini-story-box){
  background:#f5f8f6!important;
  border:1px solid var(--cdk-divider)!important;
}

#app #screen-mini-challenge .mini-options button{
  background:var(--cdk-surface)!important;
  color:var(--cdk-text)!important;
  border:1px solid var(--cdk-border)!important;
  box-shadow:none!important;
}

#app #screen-mini-challenge .mini-options button.correct{
  background:var(--cdk-green-soft)!important;
  color:var(--cdk-green-strong)!important;
  border-color:#75ba89!important;
}

#app #screen-mini-challenge .mini-options button.wrong{
  background:#fff1ef!important;
  color:#a6413a!important;
  border-color:#e0a09a!important;
}

#app #screen-mini-challenge .mini-explain{
  background:var(--cdk-green-soft)!important;
  color:#315c40!important;
}

#app #screen-crossword .crossword-board-card{
  background:#edf1ee!important;
}

#app #screen-crossword .crossword-cell,
#app #screen-crossword .crossword-choices button,
#app #screen-crossword .crossword-word-row{
  background:var(--cdk-surface)!important;
  color:var(--cdk-text)!important;
  border:1px solid var(--cdk-border)!important;
  box-shadow:none!important;
}

#app #screen-crossword .crossword-cell.given{
  background:#f0f3f1!important;
  color:var(--cdk-muted)!important;
}

#app #screen-crossword .crossword-cell.blank{
  background:#fbfaf6!important;
  border-color:#cfb66a!important;
}

#app #screen-crossword .crossword-cell.selected,
#app #screen-crossword .crossword-cell.blank.filled,
#app #screen-crossword .crossword-word-row.done{
  background:var(--cdk-green-soft)!important;
  border-color:#75ba89!important;
}

#app #screen-crossword .crossword-actions button{
  background:var(--cdk-surface)!important;
  border:1px solid var(--cdk-border)!important;
  box-shadow:none!important;
}

/* Book, growth, puzzle and result */
#app #screen-book .book-count{
  background:var(--cdk-green)!important;
  color:#fff!important;
  border-radius:14px!important;
}

#app #screen-book .book-toolbar{
  background:var(--cdk-bg)!important;
}

#app #screen-book .book-toolbar input,
#app #screen-book .book-toolbar button{
  background:var(--cdk-surface)!important;
  color:var(--cdk-text)!important;
  border:1px solid var(--cdk-border)!important;
  box-shadow:none!important;
}

#app #screen-book .book-toolbar button.selected{
  background:var(--cdk-green)!important;
  color:#fff!important;
  border-color:var(--cdk-green)!important;
}

#app #screen-book .book-card{
  background:var(--cdk-surface)!important;
  border:1px solid var(--cdk-border)!important;
  border-radius:18px!important;
  box-shadow:none!important;
}

#app #screen-profile :is(.profile-hero,.stats-grid .card,.learning-diagnosis,.story-puzzle-section,.save-manager,.settings),
#app #screen-puzzle .puzzle-detail-card{
  background:var(--cdk-surface)!important;
  border:1px solid var(--cdk-border)!important;
  box-shadow:none!important;
}

#app #screen-profile .profile-hero{
  background:var(--cdk-surface-soft)!important;
  border-color:var(--cdk-green-border)!important;
}

#app #screen-profile .profile-hero img{
  filter:none!important;
}

#app #screen-profile .diagnosis-grid>div,
#app #screen-profile .puzzle-card,
#app #screen-profile .healthy-setting-fixed,
#app #screen-profile .voice-setting-note,
#app #screen-puzzle .story-voice-status{
  background:#f5f8f6!important;
  border:1px solid var(--cdk-divider)!important;
}

#app #screen-profile .diagnosis-line,
#app #screen-profile .save-status-row,
#app #screen-profile .settings label,
#app #screen-puzzle .puzzle-story{
  border-color:var(--cdk-divider)!important;
}

#app #screen-profile .save-manual-actions button,
#app #screen-profile .settings select,
#app #screen-puzzle .story-voice-btn{
  background:var(--cdk-green-soft)!important;
  color:var(--cdk-green-strong)!important;
  border:1px solid var(--cdk-green-border)!important;
  box-shadow:none!important;
}

#app #screen-profile input[type="checkbox"]{
  accent-color:var(--cdk-green);
}

#app #screen-puzzle .puzzle-mask-grid button{
  background:#e5e9e6!important;
  color:#8a928d!important;
  border-color:rgba(255,255,255,.72)!important;
  box-shadow:none!important;
}

#app #screen-puzzle .puzzle-mask-grid button.open{
  background:transparent!important;
}

#app :is(#screen-result,#screen-eliminate-result,#screen-mini-result) .result-burst{
  display:none!important;
}

#app :is(#screen-result,#screen-eliminate-result,#screen-mini-result) .result-dragon{
  filter:none!important;
  animation:none!important;
}

#app :is(#screen-result,#screen-eliminate-result,#screen-mini-result) .result-kicker{
  background:var(--cdk-green-soft)!important;
  color:var(--cdk-green-strong)!important;
}

#app :is(#screen-result,#screen-eliminate-result,#screen-mini-result) :is(.reward-card,.result-learning-note){
  background:var(--cdk-surface)!important;
  border:1px solid var(--cdk-border)!important;
  box-shadow:none!important;
}

#app :is(#screen-result,#screen-eliminate-result,#screen-mini-result) .reward-card div{
  border-color:var(--cdk-divider)!important;
}

#app .toast{
  background:#26312a!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:var(--cdk-shadow-raised)!important;
}

@media(max-width:390px){
  #app #screen-home .platform-account{
    width:auto!important;
  }
}

@media(max-width:360px){
  #app #screen-home .mobile-profile-head{
    gap:10px!important;
  }

  #app #screen-home .home-head-actions{
    gap:8px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #app *,
  #app *:before,
  #app *:after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}