@font-face{font-family:LiANN;src:url('/playtest/brand/nunito-black.ttf') format('truetype');font-display:swap}
@font-face{font-family:NotoSC;src:url('/playtest/tones/fonts/NotoSansSC-Bold.woff2') format('woff2');font-display:swap}
:root{color-scheme:light;--liann-ground:#FBF6EE;--liann-card:#FFFDF9;--liann-raised:#F3F0E9;--liann-hover:#E4EADF;--liann-hairline:#DCE4D7;--liann-border:#CBD6C5;--liann-border-strong:#8A9B7E;--liann-ink:#2B2B28;--liann-muted:#66705F;--liann-coral:#C24837;--liann-blush:#F6D9D3;--liann-on-coral:#fff;--liann-sage-deep:#5F7457;--porcelain-face:#FDEFCB;--porcelain-highlight:#FFF7DF;--porcelain-shade:#F4E2B8;--porcelain-rim:#CFB996;--porcelain-edge:#947641;--porcelain-edge-deep:#6E5730;--porcelain-glyph:#3D3C34}
:root[data-t=dark]{color-scheme:dark;--liann-ground:#1B1C18;--liann-card:#292B24;--liann-raised:#20221C;--liann-hover:#34392E;--liann-hairline:#34392E;--liann-border:#46503F;--liann-border-strong:#718267;--liann-ink:#F5EFE5;--liann-muted:#B9BDAF;--liann-coral:#EE7A67;--liann-blush:rgba(226,96,78,.2);--liann-on-coral:#24120E;--liann-sage-deep:#425544}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:hidden}body{font-family:LiANN,system-ui,sans-serif;color:var(--liann-ink);background:var(--liann-ground);line-height:1.45}button,input,select{font:inherit}button{cursor:pointer;border:1px solid var(--liann-border-strong);color:var(--liann-ink);background:var(--liann-card);border-radius:12px;padding:.7rem 1rem;transition:transform .18s,box-shadow .18s,background .18s}button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 20px #0002;background:var(--liann-hover)}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--liann-coral);outline-offset:2px}button:disabled{opacity:.45;cursor:not-allowed}.primary{background:var(--liann-coral);color:var(--liann-on-coral);border-color:var(--liann-coral)}.primary:hover:not(:disabled){background:var(--liann-coral)}.quiet{border:0;background:transparent;padding:.5rem}.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem max(1rem,calc((100vw - 1200px)/2));border-bottom:1px solid var(--liann-hairline);background:var(--liann-card)}.brand{display:flex;align-items:center;gap:.65rem;font-size:1.1rem}.brand small{display:block;font-size:.57rem;letter-spacing:.15em;color:var(--liann-muted)}.brand-mark{display:grid;place-items:center;width:2.3rem;height:2.3rem;background:var(--liann-coral);color:#fff;border-radius:9px}.top-actions{display:flex;gap:.25rem;flex-wrap:wrap}main{max-width:1200px;margin:auto;padding:clamp(1rem,2.7vw,2.5rem)}.screen[hidden],[hidden]{display:none!important}.eyebrow{letter-spacing:.18em;color:var(--liann-coral);font-size:.72rem;margin:0 0 .55rem}.menu-card,.result-card{max-width:900px;margin:0 auto;background:var(--liann-card);border:1px solid var(--liann-border);border-radius:22px;padding:clamp(1.2rem,4vw,2.5rem);box-shadow:0 22px 60px -50px #0008}.menu-card h1{font-size:clamp(2.35rem,6vw,5.3rem);line-height:1.03;margin:.2rem 0 1rem}.menu-card h1 em{color:var(--liann-coral);font-style:normal}.intro{max-width:620px;color:var(--liann-muted);font-family:system-ui,sans-serif;font-size:1rem}.setup{display:grid;gap:1.1rem;margin:1.7rem 0}fieldset{border:0;padding:0;margin:0}legend{font-size:.84rem;color:var(--liann-muted);margin-bottom:.5rem}.choices{display:flex;flex-wrap:wrap;gap:.45rem}.choices button{padding:.58rem .83rem}.choices button small{display:block;font-family:system-ui,sans-serif;font-size:.65rem;font-weight:600}.choices button.active{background:var(--liann-sage-deep);border-color:var(--liann-sage-deep);color:#fff}.menu-options{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-bottom:1.6rem}.menu-options label{display:flex;align-items:center;gap:.5rem}.menu-options input[type=text],.save-box input,.save-box select{max-width:250px;min-width:0;border:1px solid var(--liann-border-strong);background:var(--liann-card);color:var(--liann-ink);padding:.65rem;border-radius:10px}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}.actions .primary{padding:.75rem 1.4rem}#load-status{color:var(--liann-muted);font-size:.8rem;margin:1rem 0 0}.round-heading{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1rem}.round-heading h2{margin:0;font-size:clamp(1.5rem,3vw,2.2rem)}.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.55rem;margin-bottom:1rem}.metrics>div{background:var(--liann-card);border:1px solid var(--liann-border);border-radius:12px;padding:.55rem .8rem;min-width:0}.metrics span{display:block;color:var(--liann-muted);font-family:system-ui,sans-serif;font-size:.67rem}.metrics strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.25rem}.seed-metric strong{font-size:.73rem}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:1rem;align-items:start}.board-wrap{min-width:0;min-height:360px;display:grid;place-items:center;background:radial-gradient(circle at 40% 25%,#ffffff24,transparent 45%),var(--liann-sage-deep);border:8px solid color-mix(in srgb,var(--liann-sage-deep) 75%,#25251c);box-shadow:inset 0 0 35px #0003,0 14px 30px -18px #0008;border-radius:22px;padding:clamp(10px,2vw,28px);overflow:hidden}.board{position:relative;width:100%;max-width:780px;aspect-ratio:var(--board-ratio);--tile-size:calc(100% * 2 / var(--units-x));}.tile{position:absolute;left:calc(100% * var(--x) / var(--units-x));top:calc(100% * var(--y) / var(--units-y));width:calc(100% * 2 / var(--units-x));height:calc(100% * 2 / var(--units-y));z-index:var(--z);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;padding:2px;min-width:0;min-height:0;border-radius:clamp(5px,.7vw,10px);border:1px solid var(--porcelain-rim);color:var(--porcelain-glyph);background:radial-gradient(circle at 28% 18%,rgba(255,255,255,.72),transparent 22%),linear-gradient(145deg,var(--porcelain-highlight) 0%,var(--porcelain-face) 46%,var(--porcelain-shade) 100%);box-shadow:inset 0 1px 0 var(--porcelain-highlight),inset 0 -2px 0 var(--porcelain-edge),0 3px 2px #2225,0 7px 12px -5px #2229;transition:transform .26s,opacity .26s,filter .26s,box-shadow .26s}.tile[data-layer="1"]{transform:translate(-2px,-4px);box-shadow:inset 0 -2px 0 var(--porcelain-edge),0 7px 4px #2227,0 12px 13px -6px #222b}.tile[data-layer="2"]{transform:translate(-4px,-7px)}.tile[data-layer="3"]{transform:translate(-6px,-10px)}.tile:hover{transform:translateY(-4px)}.tile.selected{outline:3px solid var(--liann-ink);outline-offset:-4px;transform:translateY(-6px);box-shadow:0 0 0 3px var(--liann-blush),0 11px 12px #2228}.tile.highlight{outline:3px solid var(--liann-coral);outline-offset:1px;animation:hintPulse 1.1s ease-in-out 3}.tile.blocked-view{filter:brightness(.65) saturate(.6)}.tile.clearing{transform:translateY(-28px) scale(.76) rotate(8deg);opacity:0}.tile.shaking{animation:shake .35s}.tile .hanzi{font-family:NotoSC,sans-serif;font-size:clamp(.9rem,2.3vw,1.75rem);line-height:1.05;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tile .pinyin{font-size:clamp(.52rem,1.1vw,.82rem);line-height:1}.tile .english{font-family:LiANN,system-ui,sans-serif;font-size:clamp(.48rem,1.1vw,.9rem);line-height:1.04;overflow-wrap:anywhere;text-align:center;max-height:95%;overflow:hidden}.side-panel{background:var(--liann-card);border:1px solid var(--liann-border);border-radius:18px;padding:1rem}.side-panel h3{margin:.2rem 0 .5rem}.side-panel p{font-family:system-ui,sans-serif;font-size:.82rem;color:var(--liann-muted)}.feedback{padding:.8rem;border-radius:10px;background:var(--liann-raised);font-family:system-ui,sans-serif;font-size:.83rem;min-height:3.5rem}.feedback.bad{background:var(--liann-blush)}.feedback.good{background:var(--liann-hover)}.answer{margin:.7rem 0;padding:.7rem;border-left:3px solid var(--liann-coral);font-family:NotoSC,sans-serif}.tools{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:1rem}.tools button{padding:.55rem}.legend{border-top:1px solid var(--liann-hairline);padding-top:.8rem}.tone-picker{margin:1rem 0;padding:1rem;border:1px solid var(--liann-border-strong);border-radius:14px}.tone-picker h4{margin:0 0 .7rem}.syllable{margin-bottom:.65rem}.syllable-label{display:block;font-family:NotoSC,sans-serif;margin-bottom:.3rem}.tone-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.22rem}.tone-options button{font-family:NotoSC,sans-serif;padding:.35rem .1rem;border-radius:7px}.tone-options button[aria-pressed=true]{background:var(--liann-sage-deep);color:#fff}.result-card h2{font-size:clamp(2rem,4vw,3rem);margin:.2rem 0 1rem}.result-summary{display:flex;gap:1.2rem;font-size:1.2rem;margin-bottom:1.2rem}.result-words{max-height:45vh;overflow:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.4rem;margin-bottom:1.2rem}.result-word{display:flex;align-items:center;gap:.5rem;padding:.55rem;background:var(--liann-raised);border-radius:9px;font-family:NotoSC,sans-serif;font-size:.8rem}.result-word .hanzi{font-size:1.2rem}.result-word .flag{margin-left:auto;font-family:system-ui,sans-serif;font-size:.65rem;color:var(--liann-muted)}.result-word button{padding:.2rem .45rem}.save-box{padding:1rem;background:var(--liann-raised);border-radius:12px;margin-bottom:1rem}.save-box label{display:block;margin-bottom:.5rem}.save-box .actions>*{flex:1 1 140px}.save-box p{font-family:system-ui,sans-serif;font-size:.8rem}.help-steps{display:grid;gap:1rem;padding-left:1.5rem;font-family:system-ui,sans-serif}.help-steps li{padding:.5rem}.result-card>p:not(.eyebrow){font-family:system-ui,sans-serif;color:var(--liann-muted)}.sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}
@keyframes shake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}@keyframes hintPulse{50%{box-shadow:0 0 0 8px var(--liann-blush),0 8px 20px #0005}}
@media(max-width:850px){.game-layout{grid-template-columns:1fr}.board-wrap{min-height:0}.side-panel{max-width:none}.tools{grid-template-columns:repeat(5,1fr)}}@media(max-width:600px){.topbar{align-items:start}.top-actions .quiet{font-size:.68rem;padding:.3rem}.brand{font-size:.9rem}.brand-mark{width:1.7rem;height:1.7rem}.metrics{grid-template-columns:repeat(4,1fr)}.seed-metric{grid-column:1/-1}.board-wrap{padding:9px;border-width:5px;border-radius:12px}.board{min-height:175px}.tile .hanzi{font-size:clamp(.7rem,3.4vw,1.15rem)}.tile .pinyin{font-size:clamp(.48rem,2vw,.7rem)}.tile .english{font-size:clamp(.43rem,1.9vw,.72rem)}.tools{grid-template-columns:repeat(3,1fr)}.menu-card,.result-card{border-radius:15px}.round-heading{align-items:center}.round-heading button{font-size:.75rem;padding:.5rem}.result-words{grid-template-columns:1fr}}
@media(max-width:600px){.tile .pinyin{font-size:clamp(.56rem,2.1vw,.75rem)}.tile .english{font-size:clamp(.6rem,2.2vw,.78rem);line-height:1.02}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root[data-motion=reduce] *, :root[data-motion=reduce] *::before,:root[data-motion=reduce] *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
.account{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--liann-hairline)}.account p{font-family:system-ui,sans-serif;color:var(--liann-muted);font-size:.8rem}.account input{min-width:0;width:160px;border:1px solid var(--liann-border-strong);background:var(--liann-card);color:var(--liann-ink);border-radius:9px;padding:.6rem}
.tile.clearing,.tile.clearing:hover{transform:translate(var(--fly-x),var(--fly-y)) scale(.18) rotate(18deg);opacity:0;filter:brightness(1.35);pointer-events:none}.match-spark{position:absolute;z-index:99;width:12px;height:12px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);background:var(--liann-coral);box-shadow:0 0 0 3px var(--porcelain-highlight),0 0 18px 8px #ffefa2;animation:spark .7s ease-out both}.match-spark:before,.match-spark:after{content:'';position:absolute;inset:-12px;border:2px solid var(--porcelain-highlight);border-radius:50%;animation:sparkRing .7s ease-out both}.match-spark:after{inset:-20px;border-color:var(--liann-coral);animation-delay:.08s}.board.reshuffling .tile{animation:swirl .55s ease-in-out both;animation-delay:var(--stagger)}@keyframes spark{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.8)}100%{opacity:0;transform:translate(-50%,-50%) scale(.3)}}@keyframes sparkRing{0%{opacity:0;transform:scale(.25)}20%{opacity:1}100%{opacity:0;transform:scale(2.4)}}@keyframes swirl{0%{opacity:1;filter:blur(0);rotate:0deg}45%{opacity:.35;filter:blur(3px);rotate:8deg;scale:.85}100%{opacity:1;filter:blur(0);rotate:0deg;scale:1}}
.help-steps{list-style:none;counter-reset:help;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;padding:0}.help-steps li{counter-increment:help;position:relative;min-height:130px;margin:0;padding:1.1rem 1rem 1rem 4.1rem;border:1px solid var(--liann-border);background:var(--liann-raised);border-radius:14px;animation:helpIn .45s ease both}.help-steps li:nth-child(2){animation-delay:.1s}.help-steps li:nth-child(3){animation-delay:.2s}.help-steps li:nth-child(4){animation-delay:.3s}.help-steps li:before{content:counter(help);position:absolute;left:1rem;top:1.1rem;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:8px;color:var(--porcelain-glyph);background:linear-gradient(145deg,var(--porcelain-highlight),var(--porcelain-face) 58%,var(--porcelain-shade));border:1px solid var(--porcelain-rim);box-shadow:inset 0 -2px var(--porcelain-edge),0 4px 7px #0003}@keyframes helpIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){.help-steps{grid-template-columns:1fr}.help-steps li{min-height:0}}

.play-pronunciation{width:100%;margin:.65rem 0 0;border-color:var(--liann-coral);font-weight:900}.audio-status{margin:.35rem 0 .6rem;color:var(--liann-muted);font-family:system-ui,sans-serif;font-size:.78rem;line-height:1.4}.audio-status:empty{display:none}