/* AW Chinese Interactive Design Layer v4
   Loaded after legacy page CSS so Games + Tools share one professional visual language
   without changing game/business logic. */
:root{
  --aw-blue:#1d4ed8;--aw-blue-2:#315fcb;--aw-navy:#102b63;--aw-ink:#17233b;
  --aw-muted:#61708a;--aw-line:#dbe5f2;--aw-soft:#eef5ff;--aw-bg:#f4f7fc;
  --aw-panel:rgba(255,255,255,.94);--aw-radius:20px;--aw-shadow:0 18px 52px rgba(18,47,102,.11);
  --primary:#1d4ed8;--gold:#7a9fe8;--mint:#eef5ff;--ivory:#f4f7fc;--bg:#f4f7fc;--line:#dbe5f2;
  --aw-forest:#1d4ed8;--aw-canvas:#f4f7fc;--aw-accent:#6c62d6;
}
html{background:var(--aw-bg)}
body{background:
 radial-gradient(circle at 8% 2%,rgba(49,95,203,.10),transparent 26rem),
 radial-gradient(circle at 92% 8%,rgba(108,98,214,.08),transparent 24rem),
 var(--aw-bg)!important;color:var(--aw-ink);isolation:isolate}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(115deg,rgba(255,255,255,.42),transparent 42%)}
button,a,input,select{transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background-color .16s ease}
button:active:not(:disabled),a:active{transform:scale(.985)}
body>header,.topbar{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
body>header{background:rgba(255,255,255,.90)!important;border-color:var(--aw-line)!important;box-shadow:0 7px 28px rgba(17,45,95,.07)!important}
#game-card,.panel,.face,.controls,.page-main>section,.aw-audio-settings{border-color:var(--aw-line)!important;box-shadow:var(--aw-shadow)!important}
#game-card{position:relative;overflow:hidden!important;background:linear-gradient(155deg,#fff 0%,#fff 75%,#f7faff 100%)!important}
#game-card:before,.face:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-95px;top:-105px;background:radial-gradient(circle,rgba(49,95,203,.12),rgba(49,95,203,0) 70%);pointer-events:none}
#choices .choice-btn,.match-card,.tool-btn,.answer-btn,.small-btn,.chip-btn,.back-btn{border-radius:15px!important}
#choices .choice-btn,.match-card{box-shadow:0 6px 18px rgba(18,47,102,.04)!important}
#choices .choice-btn:hover:not(:disabled),.match-card:hover{transform:translateY(-2px);border-color:#8cadE8!important;box-shadow:0 12px 26px rgba(18,47,102,.10)!important}
#choices .choice-btn:focus-visible,.match-card:focus-visible{outline:3px solid rgba(29,78,216,.28)!important;outline-offset:3px!important}
#next-action{backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;background:rgba(255,255,255,.92)!important;border-color:#cfdaea!important}
#next-action button{background:linear-gradient(135deg,#1d4ed8,#315fcb)!important;box-shadow:0 10px 26px rgba(29,78,216,.20)!important}
.progress-bar,#next-action button,.btn-primary,.primary-btn{background-image:linear-gradient(135deg,#1d4ed8,#5369da)!important}
.flashcard{filter:drop-shadow(0 18px 24px rgba(17,45,95,.08))}
.flashcard:not(.flipped):hover{transform:translateY(-3px) rotateX(.8deg) rotateY(-.8deg)}
.flashcard.flipped:hover{transform:rotateY(180deg) translateY(-3px)}
.face{border-radius:30px!important}.face::before{height:6px!important;background:linear-gradient(90deg,#1d4ed8,#6d5bd0,#34a4d8)!important}
.controls{border-radius:24px!important}.controls,.deck-panel{box-shadow:0 14px 38px rgba(18,47,102,.07)!important}
.status-chip,.pill,.type-pill{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
/* Copybook converts botanical/green shell to AW blue while preserving printable document semantics. */
.app-shell>.topbar,.controls{position:relative}.controls{border-color:var(--aw-line)!important;background:linear-gradient(160deg,#fff 0%,#fff 78%,#f1f6ff 100%)!important}
.section-title,.brand h1,.pinyin,.stroke-label{color:var(--aw-blue)!important}.section-title::after{background:var(--aw-line)!important}
.field input:focus,.field select:focus{border-color:var(--aw-blue)!important;box-shadow:0 0 0 3px rgba(29,78,216,.12)!important}
.btn-secondary,.chip-btn:hover{background:#eef5ff!important;color:#1d4ed8!important}.btn-primary{background:#1d4ed8!important}.btn-primary:hover:not(:disabled){background:#173fae!important}
/* Floating experience dock shared by games/tools. */
.aw-game-nav{position:fixed!important;right:16px!important;bottom:max(16px,env(safe-area-inset-bottom))!important;z-index:9999!important;font-family:system-ui,'Noto Sans Thai','Sarabun',sans-serif!important}
.aw-game-nav-toggle{display:inline-flex!important;align-items:center!important;gap:9px!important;min-height:48px!important;border:1px solid rgba(255,255,255,.24)!important;border-radius:16px!important;padding:10px 15px!important;background:linear-gradient(135deg,#173d94,#1d4ed8)!important;color:#fff!important;box-shadow:0 16px 42px rgba(15,42,94,.30)!important;font-size:12px!important;font-weight:800!important;letter-spacing:.01em!important}
.aw-game-nav-toggle:before{content:"";width:8px;height:8px;border-radius:50%;background:#8fd8ff;box-shadow:0 0 0 4px rgba(143,216,255,.15)}
.aw-game-nav-toggle:hover{transform:translateY(-2px)!important;background:linear-gradient(135deg,#12337e,#1b49c5)!important}
.aw-game-nav-panel{position:absolute!important;right:0!important;bottom:60px!important;width:min(370px,calc(100vw - 26px))!important;max-height:min(78vh,620px)!important;overflow:auto!important;border:1px solid #d3deee!important;border-radius:22px!important;background:rgba(255,255,255,.96)!important;box-shadow:0 28px 80px rgba(15,42,94,.25)!important;padding:18px!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important}
.aw-game-nav-panel[hidden]{display:none!important}.aw-game-nav-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:13px;border-bottom:1px solid #e7edf6}.aw-game-nav-title{display:block;font-size:16px;font-weight:900;color:#142e68}.aw-game-nav-subtitle{display:block;font-size:10px;color:#71809a;margin-top:3px}.aw-game-nav-close{width:36px;height:36px;border:0;border-radius:11px;background:#f1f5fb;color:#53627a;font-size:18px}.aw-game-context-chip{display:inline-flex;margin:13px 0 3px;padding:6px 9px;border-radius:999px;background:#eef5ff;color:#1d4ed8;font-size:10px;font-weight:800}.aw-game-nav-panel label{margin-top:12px;color:#53627a!important}.aw-game-nav-panel select{border-color:#cbd8ea!important;border-radius:12px!important;background:#fff!important}.aw-game-nav-modes{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin:14px 0!important}.aw-game-nav-panel a{border-radius:12px!important;border-color:#dbe5f2!important;min-height:44px!important;background:#fff!important;color:#204da7!important;font-weight:750!important}.aw-game-nav-panel a:hover{background:#f3f7ff!important;border-color:#9eb9e7!important;transform:translateY(-1px)}.aw-game-nav-panel a[aria-current=page]{background:#eaf2ff!important;border-color:#7ba2e6!important;box-shadow:inset 0 0 0 1px #bfd3f5}.aw-game-nav-links{border-color:#e5ecf6!important}.aw-game-nav-links a{background:#f8fafc!important}.aw-tool-context{margin:8px 0 0!important}
/* feedback motion: never required to understand state */
.choice-btn.correct,.answer-btn.known{animation:aw-success-pop .28s ease}.choice-btn.wrong,.answer-btn.unknown{animation:aw-shake .22s ease}
@keyframes aw-success-pop{0%{transform:scale(.98)}60%{transform:scale(1.025)}100%{transform:scale(1)}}
@keyframes aw-shake{0%,100%{transform:translateX(0)}33%{transform:translateX(-3px)}66%{transform:translateX(3px)}}
@media(max-width:700px){.aw-game-nav{right:10px!important;bottom:max(10px,env(safe-area-inset-bottom))!important}.aw-game-nav-panel{bottom:57px!important}.aw-game-nav-modes{grid-template-columns:1fr!important}.aw-game-nav-toggle{min-height:46px!important}.controls{border-radius:18px!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.flashcard:not(.flipped):hover{transform:none}.flashcard.flipped:hover{transform:rotateY(180deg)}.aw-game-nav-toggle:hover,#choices .choice-btn:hover:not(:disabled),.match-card:hover{transform:none!important}}