:root{--bg:#0b1020;--panel:#151d33;--line:rgba(255,255,255,.10);--text:#e8eefc;--dim:#8fa0c4;--gold:#ffd34a;--cyan:#5fd7ff;--green:#4ade80;--red:#ff6b6b;}
*{-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;}
body{background:radial-gradient(1200px 600px at 50% -10%,#1a2647 0%,#0b1020 60%);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,sans-serif;overflow:hidden;display:flex;flex-direction:column;height:100vh;height:100dvh;}
.gbar{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:10px;height:56px;padding:0 12px;background:linear-gradient(180deg,#1a2440 0%,#111829 100%);border-bottom:1px solid var(--line);box-shadow:0 6px 22px rgba(0,0,0,.35);z-index:30;overflow-x:auto;overflow-y:hidden;}
.gback{flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:10px;color:var(--text);background:rgba(255,255,255,.06);border:1px solid var(--line);text-decoration:none;transition:.18s;}
.gback:hover,.gback:focus{background:rgba(95,215,255,.16);color:#fff;text-decoration:none;border-color:rgba(95,215,255,.45);}
.gtitle{flex:0 0 auto;min-width:0;margin-right:4px;}
.gtitle h1{font-size:16px;font-weight:800;margin:0;line-height:1.15;letter-spacing:.5px;white-space:nowrap;background:linear-gradient(90deg,#fff,#9fd7ff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.gtitle p{font-size:11px;color:var(--dim);margin:1px 0 0;white-space:nowrap;max-width:400px;overflow:hidden;text-overflow:ellipsis;}
.mode-tag{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);}
.mode-tag.online{color:#7ee787;border-color:rgba(126,231,135,.45);background:rgba(126,231,135,.1);}
.mode-tag.solo{color:#b9a4ff;border-color:rgba(185,164,255,.4);background:rgba(185,164,255,.08);}
.mode-tag .dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;}
.gstats{flex:1 1 auto;display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;min-width:0;}
.gstats li{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:12px;line-height:1;white-space:nowrap;}
.gstats li .glyphicon{font-size:11px;opacity:.85;}
.gstats li b{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;}
.gstats li i{font-style:normal;color:var(--dim);font-size:10px;}
.gstats li.s-wpm .glyphicon{color:var(--cyan);}
.gstats li.s-acc .glyphicon{color:var(--green);}
.gstats li.s-score .glyphicon{color:var(--gold);}
.gstats li.s-gap .glyphicon{color:#ff9a7a;}
.gstats li.s-time .glyphicon{color:#b9a4ff;}
.gstats li.is-danger{background:rgba(255,107,107,.18);border-color:rgba(255,107,107,.5);}
.gstats li.is-danger b{color:#ffb3b3;}
.gtools{flex:0 0 auto;display:flex;align-items:center;gap:5px;}
.gtool{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;color:var(--text);background:rgba(255,255,255,.06);border:1px solid var(--line);cursor:pointer;outline:none;transition:.18s;font-size:13px;}
.gtool:hover{background:rgba(95,215,255,.16);border-color:rgba(95,215,255,.45);}
.gtool:active{transform:scale(.94);}
.gtool.is-off{opacity:.42;}
.gprog{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.07);}
.gprog i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#5fd7ff,#ffd34a);transition:width .18s linear;box-shadow:0 0 10px rgba(95,215,255,.7);}
.stage-wrap{flex:1 1 auto;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:8px;}
#gameCanvas{display:block;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);background:#0e1526;touch-action:manipulation;}
.cc-toast-layer{position:fixed;left:50%;top:80px;transform:translateX(-50%);z-index:2000;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.cc-toast{padding:10px 18px;border-radius:10px;background:rgba(20,30,55,.94);color:#e8eefc;font-size:13px;font-weight:600;border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 22px rgba(0,0,0,.45);animation:toastIn .25s ease-out;max-width:90vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cc-toast.warn{border-color:rgba(255,154,122,.5);color:#ffd8c4;}
.cc-toast.ok{border-color:rgba(126,231,135,.5);color:#c8f5d0;}
.cc-toast.out{animation:toastOut .35s ease-in forwards;}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{to{opacity:0;transform:translateY(-8px)}}
/* ===== 撒花 / 雨滴层（浮在结算面板之上，pointer-events 关闭） ===== */
.celebration-layer{position:fixed;inset:0;pointer-events:none;z-index:2000;overflow:hidden;}
.confetti-piece{position:absolute;top:-24px;width:10px;height:14px;border-radius:2px;opacity:0;animation:confettiFall linear forwards;will-change:transform,opacity;}
@keyframes confettiFall{
    0%{transform:translateY(0) rotate(0deg);opacity:0;}
    10%{opacity:1;}
    100%{transform:translateY(108vh) rotate(900deg);opacity:.65;}
}
.rain-drop{position:absolute;top:-24px;width:2px;height:20px;background:linear-gradient(to bottom,rgba(170,190,220,0.05),rgba(170,190,220,0.9));opacity:0;animation:rainFall linear forwards;will-change:transform,opacity;}
@keyframes rainFall{
    0%{transform:translateY(0);opacity:0;}
    12%{opacity:1;}
    100%{transform:translateY(108vh);opacity:.15;}
}
.ovl{position:fixed;inset:0;z-index:1080;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(6,10,20,.74);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);animation:ovlIn .18s ease-out;}
.ovl.on{display:flex;}
@keyframes ovlIn{from{opacity:0}to{opacity:1}}
.ovl-card{position:relative;width:100%;max-width:560px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;background:linear-gradient(180deg,#1c2743 0%,#131b2e 100%);border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:22px 24px 20px;color:var(--text);box-shadow:0 28px 70px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.08);animation:cardPop .26s cubic-bezier(.2,.9,.3,1.35);}
@keyframes cardPop{from{transform:scale(.92) translateY(8px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.ovl-card::-webkit-scrollbar{width:6px;}.ovl-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:6px;}
.ovl-card h2{margin:0 0 4px;font-size:22px;font-weight:800;background:linear-gradient(90deg,#ffd34a,#ff9a7a);-webkit-background-clip:text;background-clip:text;color:transparent;}
.ovl-card h3{font-size:14px;font-weight:700;margin:18px 0 8px;color:#bcd3ff;}
.ovl-card p{font-size:13px;line-height:1.75;color:#c3d0e8;margin:6px 0;}
.ovl-card ul{padding-left:18px;margin:6px 0;}
.ovl-card li{font-size:13px;line-height:1.8;color:#c3d0e8;}
.ovl-card .kbd{display:inline-block;padding:1px 7px;margin:0 2px;border-radius:6px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:#fff;}
.ovl-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);cursor:pointer;font-size:16px;line-height:1;transition:.18s;}
.ovl-x:hover{background:rgba(255,107,107,.22);border-color:rgba(255,107,107,.5);}
.ovl-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.btn-g{flex:1 1 auto;min-width:120px;padding:10px 16px;border-radius:11px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--text);font-size:13px;font-weight:700;cursor:pointer;outline:none;transition:.18s;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;}
.btn-g:hover{background:rgba(255,255,255,.12);text-decoration:none;color:var(--text);}
.btn-g:active{transform:scale(.97);}
.btn-g.gold{background:linear-gradient(180deg,#ffd968,#f0a72c);border-color:#ffd968;color:#3a2600;box-shadow:0 8px 22px rgba(240,167,44,.35);}
.btn-g.gold:hover{filter:brightness(1.07);color:#3a2600;}
.btn-g.cyan{background:linear-gradient(180deg,#6fdcff,#2f9fe0);border-color:#6fdcff;color:#04263a;box-shadow:0 8px 22px rgba(47,159,224,.32);}
.btn-g.cyan:hover{color:#04263a;}
#endCard{text-align:center;}
#endCard h2{text-align:center;font-size:26px;margin:4px 0 6px;}
#endCard .gp-score{text-align:center;}
#endCard .gp-lines{text-align:left;}
.end-win #ovlEndTitle{background:linear-gradient(90deg,#ffe27a,#ffb347);-webkit-background-clip:text;background-clip:text;color:transparent;animation:endWinTitle .65s cubic-bezier(.2,.9,.3,1.3) both;filter:drop-shadow(0 0 14px rgba(255,211,74,.45));}
@keyframes endWinTitle{0%{transform:scale(.5);opacity:0}55%{transform:scale(1.16);opacity:1}78%{transform:scale(.97)}100%{transform:scale(1)}}
.end-lose #ovlEndTitle{background:linear-gradient(90deg,#ff9a8a,#ff6b6b);-webkit-background-clip:text;background-clip:text;color:transparent;animation:endLoseTitle .55s ease-in-out both;}
@keyframes endLoseTitle{0%,100%{transform:translateX(0)}15%,55%{transform:translateX(-7px)}35%,75%{transform:translateX(7px)}}
@keyframes scorePop{0%{transform:scale(.3) rotate(-10deg);opacity:0}60%{transform:scale(1.15) rotate(3deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
#endScore.animate{animation:scorePop .8s cubic-bezier(.2,.9,.3,1.4) both;}
.gp-score{font-size:52px;font-weight:900;line-height:1.05;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff,#ffd34a);-webkit-background-clip:text;background-clip:text;color:transparent;margin:8px 0 2px;}
.end-lose .gp-score{background:linear-gradient(180deg,#fff,#ff9a8a);-webkit-background-clip:text;background-clip:text;}
.gp-score small{font-size:13px;font-weight:600;color:var(--dim);margin-left:6px;-webkit-text-fill-color:var(--dim);}
.gp-stats{display:flex;gap:8px;margin:16px 0 8px;}
.gp-stats > div{flex:1;text-align:center;padding:12px 6px 10px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line);position:relative;}
.gp-stats > div .glyphicon{display:block;font-size:16px;margin-bottom:4px;opacity:.9;}
.gp-stats > div:nth-child(1) .glyphicon{color:var(--cyan);}
.gp-stats > div:nth-child(2) .glyphicon{color:var(--green);}
.gp-stats > div:nth-child(3) .glyphicon{color:#b9a4ff;}
.gp-stats b{display:block;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;}
.gp-stats span{display:block;font-size:11px;color:var(--dim);margin-top:2px;}
.gp-lines{margin-top:8px;border-top:1px solid var(--line);}
.gp-lines > div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:12.5px;align-items:center;}
.gp-lines > div span{color:var(--dim);flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;}
.gp-lines > div span .glyphicon{color:#9fc4ff;font-size:11px;opacity:.9;}
.gp-lines > div b{text-align:right;font-weight:700;}
.set-row{margin:14px 0;}
.set-row > label{display:block;font-size:12px;font-weight:700;color:#bcd3ff;margin-bottom:7px;letter-spacing:.3px;}
.seg{display:flex;flex-wrap:wrap;gap:7px;}
.seg button{flex:1 1 auto;min-width:92px;padding:9px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#c3d0e8;font-size:12.5px;font-weight:600;cursor:pointer;transition:.16s;outline:none;}
.seg button:hover{background:rgba(95,215,255,.14);}
.seg button.on{background:linear-gradient(180deg,rgba(95,215,255,.30),rgba(47,159,224,.22));border-color:rgba(95,215,255,.75);color:#eaf7ff;box-shadow:0 0 0 2px rgba(95,215,255,.16);}
.seg button small{display:block;font-size:10.5px;opacity:.7;font-weight:500;margin-top:2px;}
.seg button .emoji{font-size:15px;margin-right:3px;}
.tip-strip{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-top:14px;border-radius:12px;background:rgba(95,215,255,.10);border:1px solid rgba(95,215,255,.28);font-size:12.5px;color:#bfe6ff;}
.tip-strip .glyphicon{color:var(--cyan);}
#ovlMatch .ovl-card{max-width:460px;text-align:center;}
.match-ring{position:relative;width:140px;height:140px;margin:6px auto 12px;}
.match-ring svg{width:140px;height:140px;transform:rotate(-90deg);}
.match-ring .bg{fill:none;stroke:rgba(255,255,255,.10);stroke-width:8;}
.match-ring .fg{fill:none;stroke:url(#matchGrad);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .3s linear;}
.match-ring .num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;}
.match-status{font-size:12.5px;color:#c3d0e8;line-height:1.6;margin-top:4px;min-height:36px;}
.match-status .glyphicon{color:var(--cyan);margin-right:4px;}
body.online-mode #btnSet,
body.online-mode #btnPause,
body.online-mode #btnStartSet,
body.online-mode #btnSetPause,
body.online-mode #btnSetApply {display:none !important;}
body.online-mode .set-row{pointer-events:none;opacity:.5;}
body.online-mode #ovlSetTitle::after{content:"（双人模式不可修改）";font-size:12px;color:var(--dim);display:block;margin-top:4px;-webkit-text-fill-color:var(--dim);background:none;}
@media(max-width:860px){.gtitle p{display:none;}.gstats li i{display:none;}.gstats li{padding:5px 8px;}}
@media(max-width:620px){.gtitle h1{font-size:14px;}.gstats li:nth-child(n+5){display:none;}}