html,body,#app{width:100%;height:100%;margin:0}body{color:#f7fdff;background:radial-gradient(circle at 18% 16%,#ffffff4d,#0000 18%),radial-gradient(circle at 82% 18%,#89f6ff42,#0000 22%),radial-gradient(circle at 14% 82%,#fface738,#0000 18%),radial-gradient(circle at 88% 78%,#fff3922e,#0000 20%),linear-gradient(#2b9cff 0%,#1266d8 40%,#0a3b91 100%);font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;overflow:hidden}#app{position:relative}#app canvas{margin:0 auto;display:block}.game-dom-ui{pointer-events:none;z-index:2;-webkit-user-select:none;user-select:none;position:absolute;top:0;left:0;overflow:hidden}.hud-panel{justify-content:center;align-items:center;display:flex;position:absolute}.hud-panel__card{width:var(--hud-card-width);border:3px solid #f8fdfff0;border-radius:26px;flex-direction:column;justify-content:flex-start;align-items:center;height:100%;padding-top:10px;display:flex;position:relative;overflow:visible;box-shadow:0 6px #23589729,0 0 0 6px #7bd8ff29}.hud-panel__card:before{content:"";background:#ffffff52;border-radius:8px;height:11px;position:absolute;top:8px;left:10px;right:10px}.hud-panel__card--score{background:linear-gradient(#73d1ff 0%,#4eb4ff 100%)}.hud-panel__card--moves{background:linear-gradient(#ffc0df 0%,#ffa9d3 100%)}.hud-panel__label,.hud-panel__value{z-index:1;line-height:1;position:relative}.hud-panel__label{font-size:var(--hud-label-size);color:#fff;letter-spacing:.08em;margin-bottom:2px;font-weight:700}.hud-panel__value-host{flex:auto;justify-content:center;align-items:center;min-height:0;display:flex;position:relative}.hud-panel__value{font-size:var(--hud-value-size);color:#24518d;text-shadow:0 0 1px #fff,0 1px #fff,0 -1px #fff,1px 0 #fff,-1px 0 #fff,1px 1px #fff,-1px 1px #fff,1px -1px #fff,-1px -1px #fff,0 4px 8px #4176bb33;font-weight:800;transition:transform .18s}.hud-panel__value.is-updating{animation:.26s cubic-bezier(.22,.9,.32,1) hud-value-bump}.hud-panel__value-layer{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.hud-panel__value-ghost,.hud-panel__value-delta{z-index:3;font-size:var(--hud-delta-size);white-space:nowrap;font-weight:900;line-height:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hud-panel__value-ghost{color:#24518d;opacity:.9;text-shadow:0 0 1px #fff,0 1px #fff,0 -1px #fff,1px 0 #fff,-1px 0 #fff,1px 1px #fff,-1px 1px #fff,1px -1px #fff,-1px -1px #fff;animation:.36s ease-out forwards hud-value-ghost-out}.hud-panel__value-delta{opacity:0}.hud-panel__value-delta--score{color:#fff8b5;text-shadow:0 2px #9b5f08,0 6px 12px #6f400c47;animation:.52s cubic-bezier(.2,.82,.24,1) forwards hud-value-delta-in}.hud-panel__value-delta--moves{color:#fff;text-shadow:0 2px #bf4b82,0 6px 12px #9e35653d;animation:.52s cubic-bezier(.2,.82,.24,1) forwards hud-value-delta-in}@keyframes hud-value-bump{0%{transform:scale(1)}45%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes hud-value-ghost-out{0%{opacity:.9;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-82%)scale(.9)}}@keyframes hud-value-delta-in{0%{opacity:0;transform:translate(-50%,-38%)scale(.82)}24%{opacity:1;transform:translate(-50%,-56%)scale(1.12)}62%{opacity:1;transform:translate(-50%,-50%)scale(1.02)}to{opacity:0;transform:translate(-50%,-50%)scale(.96)}}.pronunciation-panel{opacity:0;filter:drop-shadow(0 10px 20px #1b5fa538);transition:opacity .15s,transform .16s cubic-bezier(.18,.89,.32,1.28);position:absolute;transform:translate(-50%,-50%)scale(.88)}.pronunciation-panel.is-visible{opacity:1;transform:translate(-50%,-50%)scale(1)}.pronunciation-panel.is-hidden-immediate{transition:none}.pronunciation-panel__surface{background:linear-gradient(90deg,#0000 calc(50% - 1px),#99c8ffeb calc(50% - 1px) calc(50% + 1px),#0000 calc(50% + 1px)),linear-gradient(#0000 calc(50% - 1px),#99c8ffeb calc(50% - 1px) calc(50% + 1px),#0000 calc(50% + 1px)),linear-gradient(45deg,#0000 calc(50% - 1px),#99c8ffc7 calc(50% - 1px) calc(50% + 1px),#0000 calc(50% + 1px)),linear-gradient(-45deg,#0000 calc(50% - 1px),#99c8ffc7 calc(50% - 1px) calc(50% + 1px),#0000 calc(50% + 1px)),linear-gradient(#ffffff57 0 14px,#0000 14px),linear-gradient(#f5fcfffc,#eff9fffa);border:4px solid #72cffff0;border-radius:24px;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;box-shadow:0 0 0 10px #7bd8ff24,0 -6px #ffffff1f}.pronunciation-panel__char{font-size:var(--pronunciation-char-size);color:#24518d;text-shadow:0 2px #ffffffeb;font-weight:800;line-height:1}.result-overlay{opacity:0;transition:opacity .18s;position:absolute;inset:0}.result-overlay.is-visible{opacity:1;pointer-events:auto}.result-overlay__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0825558f;position:absolute;inset:0}.result-overlay__panel{width:var(--overlay-width);min-height:var(--overlay-height);background:linear-gradient(#ffffff73 0 18px,#0000 18px),linear-gradient(#f7fdfffc,#f1fafffa);border:4px solid #70cbfff5;border-radius:26px;flex-direction:column;justify-content:flex-start;align-items:center;padding:34px 22px 28px;transition:transform .18s;display:flex;position:absolute;transform:translate(-50%,-50%)scale(.96);box-shadow:0 20px 44px #0825553d,0 0 0 6px #84dcff2e}.result-overlay.is-visible .result-overlay__panel{transform:translate(-50%,-50%)scale(1)}.result-overlay__title{font-size:var(--overlay-title-size);color:#fff;text-shadow:0 0 1px #3285e7,0 1px #3285e7,0 -1px #3285e7,1px 0 #3285e7,-1px 0 #3285e7,1px 1px #3285e7,-1px 1px #3285e7,1px -1px #3285e7,-1px -1px #3285e7,0 3px #7bd7ffa6;margin-top:4px;font-weight:800;line-height:1.1}.result-overlay__score{font-size:var(--overlay-score-size);color:#25548f;margin-top:34px;font-weight:800;line-height:1.2}.result-overlay__subtitle{max-width:calc(var(--overlay-width) - 44px);font-size:var(--overlay-subtitle-size);text-align:center;color:#4a6a95;margin-top:18px;line-height:1.5}.result-overlay__button{color:#fff;min-width:132px;height:42px;font-size:var(--overlay-button-size);cursor:pointer;text-shadow:0 0 1px #ff7b7b,0 1px #ff7b7b,0 -1px #ff7b7b,1px 0 #ff7b7b,-1px 0 #ff7b7b,1px 1px #ff7b7b,-1px 1px #ff7b7b,1px -1px #ff7b7b,-1px -1px #ff7b7b,0 2px #ffb9b9d9;background:linear-gradient(#ffffff47 0 12px,#0000 12px),linear-gradient(#ff9d92,#ff8d7f);border:3px solid #fffffff5;border-radius:18px;margin-top:30px;padding:0 24px;font-weight:800;line-height:1;box-shadow:0 8px 16px #ff857a47}.result-overlay__button:focus-visible{outline-offset:2px;outline:2px solid #fff}