@font-face{font-family:Alibaba PuHuiTi;src:url(/fonts/AlibabaPuHuiTi-3-115-Black.ttf)format("truetype");font-weight:900;font-style:normal;font-display:swap}:root{--sky:#7ecfff;--court:#d6f23a;--coral:#ff3b5c;--coral-d:#d81b3a;--ink:#16181d;--cream:#fff6df;--lime:#c8f000;--lime-d:#8fb400;--display:"Chakra Petch", "Alibaba PuHuiTi", sans-serif;--cn:"Alibaba PuHuiTi", "Chakra Petch", sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--cn);color:var(--ink);background:#8ad4ff;overflow:hidden}.stage{justify-content:center;align-items:center;height:100dvh;padding:8px 12px;display:flex;position:relative;overflow:hidden}.sky{filter:saturate(1.15)brightness(1.08);background:linear-gradient(#9ee5ff 0%,#7ecfff 38%,#0000 38%),url(/art/bg-court.png) 50% 58%/cover no-repeat;position:absolute;inset:0}.sky:after{content:"";mix-blend-mode:overlay;pointer-events:none;background:repeating-linear-gradient(90deg,#0000 0 46px,#ffffff2e 46px 48px);position:absolute;inset:0}.shuttle{pointer-events:none;z-index:2;filter:drop-shadow(0 10px 8px #0000002e);width:88px;animation:3.2s ease-in-out infinite float;position:absolute}.shuttle.a{top:8%;right:7%}.shuttle.b{width:64px;animation-delay:-1.4s;bottom:10%;left:5%;transform:rotate(-24deg)}@keyframes float{0%,to{transform:translateY(0)rotate(8deg)}50%{transform:translateY(-14px)rotate(-6deg)}}.panel,.play{z-index:3;width:min(720px,100%);position:relative}.panel{text-align:center;background:#fff8e6e0;border:4px solid #fff;border-radius:28px;padding:28px 28px 32px;animation:.45s cubic-bezier(.2,1.4,.3,1) both popin;box-shadow:0 18px #16181d1f,0 28px 50px #16181d2e}@keyframes popin{0%{opacity:0;transform:translateY(24px)scale(.96)}to{opacity:1;transform:none}}.kicker{font-family:var(--display);letter-spacing:.28em;text-transform:uppercase;color:var(--coral-d);margin:0;font-size:12px}h1{font-size:clamp(64px,12vw,96px);line-height:.9;font-family:var(--cn);letter-spacing:.08em;margin:8px 0 0}.sub{font-family:var(--display);letter-spacing:.5em;margin:0 0 18px;font-size:22px;font-weight:700}h2{margin:8px 0 12px;font-size:36px}.hint{opacity:.75;margin:8px 0 18px}.hint.big{opacity:1;color:var(--coral-d);font-size:22px}.label{text-align:left;margin:12px 0 8px;font-weight:700}.stats{grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 6px;display:grid}.stat{background:#fff;border:2px solid #efe6c9;border-radius:16px;padding:10px 8px}.stat span{opacity:.55;font-size:12px;display:block}.stat strong{font-family:var(--display);font-size:20px}.cta-row{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.btn{font-family:var(--cn);cursor:pointer;color:#fff;min-width:160px;box-shadow:0 6px 0 var(--coral-d);border:0;border-radius:16px;padding:14px 28px;font-size:22px;transition:transform .12s,box-shadow .12s}.btn:hover{transform:translateY(-2px)}.btn:active{box-shadow:0 2px 0 var(--coral-d);transform:translateY(4px)}.btn.coral{background:linear-gradient(#ff5d75, var(--coral))}.btn.lime{color:var(--ink);box-shadow:0 6px 0 var(--lime-d);background:linear-gradient(#d8ff3a,#b4e000)}.btn.cream{color:var(--ink);background:#fff;box-shadow:0 6px #c7b56a}.btn.small{min-width:0;padding:8px 14px;font-size:16px}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.link,.back,.ghost{cursor:pointer;font-family:var(--cn);background:0 0;border:0;font-size:16px}.link{opacity:.7;margin-top:16px}.back{text-align:left;margin-bottom:8px;display:block}.ghost{color:var(--ink);background:#fff;border-radius:999px;padding:8px 14px;box-shadow:0 3px #0000001f}.field{justify-content:center;align-items:center;gap:8px;margin:12px 0;font-size:18px;display:flex}.field input{width:88px;font:700 22px var(--display);text-align:center;border:3px solid var(--ink);background:#fff;border-radius:12px;padding:8px}.pills{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.pill{border:3px solid var(--ink);font-family:var(--cn);cursor:pointer;background:#fff;border-radius:999px;padding:10px 16px;font-size:16px}.pill.on{background:var(--coral);color:#fff;border-color:var(--coral-d)}.play{flex-direction:column;width:min(560px,100%);height:calc(100dvh - 16px);min-height:0;display:flex}.hud{flex:none;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-bottom:6px;display:grid}.hud .ghost:last-child{justify-self:end}.clock{background:var(--coral);color:#fff;box-shadow:0 4px 0 var(--coral-d);text-align:center;border-radius:14px;padding:4px 16px 3px;animation:1.2s ease-in-out infinite pulse}.clock span{font-family:var(--display);letter-spacing:.4em;font-size:10px;display:block}.clock strong{font-family:var(--display);font-size:28px;line-height:1}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}.pause-mask{z-index:5;background:#fff6dfd1;border-radius:24px;place-items:center;font-size:28px;display:grid;position:absolute;inset:70px 0 0}.board-wrap{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}.board-meta{text-align:center;font-family:var(--cn);letter-spacing:.08em;flex:none;margin:0 0 6px;font-size:14px}.combo{font-family:var(--display);color:var(--coral);text-shadow:0 3px #fff;pointer-events:none;z-index:4;font-size:42px;animation:.6s cubic-bezier(.2,1.6,.3,1) both combo;position:absolute;top:-8px;left:50%;transform:translate(-50%)}@keyframes combo{0%{opacity:0;transform:translate(-50%,12px)scale(.4)}60%{opacity:1}to{opacity:0;transform:translate(-50%,-18px)scale(1.1)}}.grid{flex:1;grid-template-rows:repeat(4,minmax(0,1fr));grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;min-height:0;display:grid}.tile{cursor:pointer;height:100%;min-height:0;font-family:var(--display);color:var(--ink);background:linear-gradient(#fffdf4,#f3e4b8);border:0;border-radius:14px;justify-content:center;align-items:center;padding:6px 8px;font-size:clamp(12px,1.7vw,16px);font-weight:700;line-height:1.15;transition:transform .12s;display:flex;position:relative;box-shadow:0 5px #c7b56a,0 8px 12px #0000001f}.tile span{-webkit-line-clamp:3;-webkit-box-orient:vertical;place-self:center;max-height:100%;display:-webkit-box;overflow:hidden}.tile.zh{font-family:var(--cn);color:#fff;background:linear-gradient(#ff6b7f, var(--coral));box-shadow:0 5px 0 var(--coral-d), 0 8px 12px #0000001f;font-size:clamp(13px,1.9vw,17px)}.tile.on{z-index:2;box-shadow:0 0 0 7px var(--lime), 0 12px 0 #7a9a00, 0 16px 22px #00000047;filter:brightness(1.08);outline:4px solid #fff;transform:translateY(-8px)scale(1.08)}.tile.zh.on{box-shadow:0 0 0 7px var(--lime), 0 12px 0 var(--coral-d), 0 16px 22px #00000047}.tile.dead{opacity:0;pointer-events:none;transition:all .28s;transform:scale(.4)rotate(12deg)}.tile.bad{animation:.4s shake}.tile.long,.tile.long.zh{font-size:clamp(11px,1.7vw,15px)}@keyframes shake{25%{transform:translate(-8px)}75%{transform:translate(8px)}}.quiz{text-align:center;background:#fff8e6e6;border-radius:28px;padding:28px 22px;box-shadow:0 18px #16181d1a}.prompt{margin:8px 0 6px;font-size:clamp(32px,6vw,52px);line-height:1.2}.prompt.en{font-family:var(--display)}.pos{opacity:.55;margin:0 0 16px}.typein{width:min(420px,100%);font:700 28px var(--display);text-align:center;border:4px solid var(--ink);border-radius:16px;margin:8px auto 16px;padding:14px;display:block}.opts{gap:10px;display:grid}.opt{font-family:var(--cn);border:3px solid var(--ink);cursor:pointer;background:#fff;border-radius:16px;padding:14px;font-size:20px}.opt.good{background:var(--lime)}.opt.bad{background:#ffc1cb}.fb{font-size:20px}.fb.ok{color:#2a7a00}.fb.ng b{font-family:var(--display)}.result .stars{justify-content:center;gap:8px;margin:8px 0;display:flex}.result .stars img{object-fit:contain;width:72px;height:72px}.clock-lg{font-family:var(--display);color:var(--coral-d);margin:0;font-size:56px}.list-shell{z-index:3;background:#fff8e6eb;border:4px solid #fff;border-radius:24px;flex-direction:column;width:min(860px,100%);height:calc(100dvh - 16px);min-height:0;padding:12px 14px 14px;display:flex;position:relative;box-shadow:0 14px #16181d1a}.list-bar{flex:none;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-bottom:8px;display:grid}.list-status{text-align:center;color:var(--coral-d);margin:0;font-size:15px}.list-btns{gap:8px;display:flex}.table-scroll{background:#fff;border:2px solid #efe6c9;border-radius:16px;flex:1;min-height:0;overflow:auto}.list-table{border-collapse:collapse;width:100%;font-size:15px}.list-table th{background:var(--lime);text-align:left;padding:10px 12px;font-weight:700;position:sticky;top:0}.list-table td{vertical-align:top;border-top:1px solid #f0e6c4;padding:10px 12px}.list-table td.en{font-family:var(--display);white-space:nowrap;font-weight:700}.list-table td.ok{width:52px;font-weight:700}.list-table tr.active td{outline:3px solid var(--lime);outline-offset:-3px;background:#fff3c4}.list-table tr.pass td{background:#eaffb8}.list-table tr.fail td{background:#ffe1e6}.list-type{flex:none;gap:8px;margin-top:8px;display:flex}.list-type input{font:700 18px var(--cn);border:3px solid var(--ink);border-radius:12px;flex:1;padding:10px 12px}@media (width<=640px){.grid{gap:6px}.tile{border-radius:12px;padding:4px 6px}.shuttle{display:none}.clock strong{font-size:24px}.hud .ghost{padding:6px 10px;font-size:13px}.list-bar{grid-template-columns:1fr;justify-items:center}.list-table{font-size:13px}.btn{min-width:120px;padding:12px 16px;font-size:18px}}