body{margin:0;background:#ede6d9;font-family:"Microsoft YaHei",sans-serif;color:#333631}#mount{position:relative;width:100vw;height:calc(100dvh - 40px)}[hidden]{display:none!important}#play-area{height:728px;padding:12px 40px 0;box-sizing:border-box;display:flex;flex-direction:column}.board-heading{height:40px;display:flex;justify-content:space-between;align-items:center;font-size:21px;color:#565447;padding:0 35px}#board-space{height:590px;display:grid;place-items:center}#board{display:grid;gap:16px;grid-template-columns:repeat(var(--cols),var(--card));grid-template-rows:repeat(var(--rows),var(--card));--green:#536b4e}#play-area button{cursor:pointer;font-family:inherit;color:#333631}#play-area button:focus-visible{outline:4px solid #305d70;outline-offset:4px}.tile{box-sizing:border-box}.guidance{height:76px}#settings{font-size:18px;--ink:#333631;--green:#536b4e;--muted:#666a5e}.dialog-head h2{font-size:27px}#settings button{font:inherit;cursor:pointer;border:1px solid #d4c8b5;border-radius:10px;background:#f6f1e6;padding:10px 15px}#settings .primary{background:#536b4e;color:white}.actions{display:flex;justify-content:center;gap:16px;margin-top:20px}#settings p{line-height:1.6}.review-strip{box-sizing:border-box}.review-strip button{cursor:pointer}.tile{position:relative;display:block;border:1px solid #f8f5e9;padding:0;border-radius:15px;background:linear-gradient(145deg,#faf6ec,#e9e1d0);box-shadow:0 4px 1px #8d806455,0 8px 12px #6a533436,inset 0 1px 3px #fff;transition:box-shadow .18s,background .18s;perspective:800px}.tile:before{content:"";position:absolute;inset:4px;border:1px solid #c7bba231;border-radius:11px;pointer-events:none}.tile .arch{display:block;position:absolute;width:54%;height:54%;left:23%;top:24%;border:3px solid #d1c4a995;border-bottom:0;border-radius:52% 52% 0 0;box-shadow:1px -1px 1px #fff7,-1px 0 1px #e2d7be;opacity:.8}.tile img{width:100%;height:100%;object-fit:contain;display:none;pointer-events:none}.tile.face{background:#faf7ef;box-shadow:0 3px 1px #95836655,0 5px 8px #6a533433,inset 0 1px 2px white}.tile.face img{display:block;animation:reveal .17s ease-out}.tile.face .arch,.tile.done .arch{display:none}.tile.done{background:#dfd9c9;box-shadow:inset 0 3px 8px #8f84665c;border-color:#b7aa914d}.tile.done:after{content:"✓";font-family:Arial,sans-serif;color:var(--green);font-size:calc(var(--card)*.42);font-weight:700}.tile.done img{display:none}.tile.teach-target{outline:5px solid #789269;outline-offset:3px}.tile.mismatch{outline:3px solid #b28a50;outline-offset:0}.guidance{flex-shrink:0;min-height:76px;display:flex;align-items:center;justify-content:center;gap:25px;font-size:27px;line-height:1.4;text-align:center}.guidance button{font-size:18px;padding:10px 16px}.review-strip{height:40px;display:flex;justify-content:space-between;align-items:center;padding:0 24px;font-size:13px;color:#676a60;background:#f4f0e9}.review-strip button{border:0;background:transparent;padding:4px 8px;font-size:14px;border-radius:4px}dialog{width:min(680px,94vw);border:1px solid #dbd0bc;border-radius:18px;padding:25px 30px;color:var(--ink);background:#faf6ed;max-height:92dvh}dialog::backdrop{background:#2228}.dialog-head{display:flex;align-items:center;justify-content:space-between}.dialog-head button{font-size:27px;padding:0 12px;border:0;background:none}dialog p{font-size:15px}dialog label{display:block;margin:20px 0;font-size:18px}dialog output{float:right;font-variant-numeric:tabular-nums}dialog input{display:block;width:100%;margin-top:12px;accent-color:var(--green)}.levels{display:flex;gap:6px;margin:20px 0}.levels button{flex:1;padding:12px 3px;font-size:17px}.levels small{display:block;font-size:11px;font-weight:400;margin-top:6px}.levels .active{background:var(--green);color:white}.levels .active:before{content:"✓ ";font-size:12px}@media(prefers-reduced-motion:reduce){#play-area *{animation:none!important}}