*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{color-scheme:dark;--bg:#1c2028;--panel:#262c36;--panel2:#303743;--text:#f8fafc;--muted:#919cad;--line:rgba(255,255,255,.07);--accent:#f3b24f;--accent2:#e6962e}
html,body{margin:0;min-height:100%;background:#151920;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;overscroll-behavior:none}
body{display:flex;justify-content:center;min-width:320px;overflow-x:hidden}button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:2px solid rgba(243,178,79,.8);outline-offset:2px}
.app{width:min(100%,520px);min-height:100vh;padding:max(11px,env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;background:radial-gradient(circle at 50% -8%,rgba(118,147,191,.14),transparent 38%),linear-gradient(180deg,#252b35 0%,#1d222b 58%,#191e26 100%);box-shadow:0 0 80px rgba(0,0,0,.32)}
.hud{display:grid;grid-template-columns:minmax(94px,1fr) auto auto;align-items:center;gap:9px;min-height:58px}.brand{min-width:0}.brand strong{display:block;font-size:18px;line-height:1.18;letter-spacing:.01em}.brand-mode{padding:0;background:transparent;font-size:11px;font-weight:900;letter-spacing:.17em;color:#aab5c6}.brand-mode i{font-style:normal;margin-left:4px;color:#6f7b8d}.scores{display:flex;gap:15px;text-align:right}.scores div{min-width:56px}.scores span{display:block;font-size:10px;letter-spacing:.08em;color:#7f8b9d;font-weight:800}.scores strong{display:block;font-size:19px;line-height:1.22;font-variant-numeric:tabular-nums}.hud-actions{display:flex;gap:7px}
.icon-btn,.side-btn{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:linear-gradient(180deg,#353d49,#2a303a);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 5px 13px rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.035);transition:transform .1s,filter .1s}.icon-btn:active,.side-btn:active{transform:translateY(2px);filter:brightness(.95)}.icon-btn svg,.side-btn svg{width:23px;height:23px;fill:#edf2f8;stroke:#edf2f8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.sound-off{display:none}.sound-muted .sound-on{display:none}.sound-muted .sound-off{display:block}
.play-area{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:0;flex:1}.mode-status{font-size:12px;color:#aeb8c7;min-height:18px;text-align:center;font-weight:650}.next-chip{position:absolute;z-index:8;right:9px;top:27px;display:flex;align-items:center;gap:7px;padding:5px 7px 5px 9px;border-radius:14px;background:rgba(18,22,29,.68);backdrop-filter:blur(10px);font-size:10px;font-weight:800;letter-spacing:.08em;color:#8895a8;box-shadow:0 6px 18px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.04)}.next-chip b{display:grid;place-items:center;width:37px;height:37px;border-radius:11px;background:#f25479;color:#fff;font-size:14px;letter-spacing:-.03em;box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 4px 8px rgba(0,0,0,.22);transition:background .2s,transform .15s}.next-chip.bump b{transform:scale(1.12)}
.board-shell{width:min(100%,430px);aspect-ratio:5/7;position:relative;border-radius:27px;overflow:hidden;background:#171b22;box-shadow:0 22px 54px rgba(5,8,12,.36),inset 0 1px 0 rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.055)}#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#1b2028;outline:none;touch-action:none}.board-glass{pointer-events:none;position:absolute;inset:0;z-index:2;background:linear-gradient(145deg,rgba(255,255,255,.025),transparent 34%,transparent 73%,rgba(0,0,0,.09));box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.loading{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#2b323e,#1d222b 64%);color:#aab4c2;font-size:13px;transition:opacity .28s}.loading.hidden{opacity:0;pointer-events:none}.loading-box{text-align:center;width:64%}.loading-box b{display:block;color:#e9edf3;font-size:14px}.loading-box small{display:block;margin-top:5px;color:#7f8b9c}.loading-bar{height:4px;margin-top:13px;border-radius:99px;background:#343b46;overflow:hidden}.loading-bar i{display:block;width:20%;height:100%;border-radius:99px;background:linear-gradient(90deg,#687a96,#a3b2c6);transition:width .18s}.combo{position:absolute;z-index:7;top:61px;left:50%;transform:translate(-50%,-6px) scale(.92);opacity:0;padding:7px 13px;border-radius:999px;background:rgba(17,21,27,.73);backdrop-filter:blur(8px);font-size:12px;font-weight:900;letter-spacing:.09em;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:.18s}.combo.show{opacity:1;transform:translate(-50%,0) scale(1)}.value-pop{pointer-events:none;position:absolute;z-index:6;left:50%;top:45%;font-size:24px;font-weight:950;color:#fff;opacity:0;text-shadow:0 3px 14px rgba(0,0,0,.45);transform:translate(-50%,0) scale(.85)}.value-pop.show{animation:valuePop .6s cubic-bezier(.18,.72,.2,1)}@keyframes valuePop{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}25%{opacity:1;transform:translate(-50%,-5px) scale(1.12)}100%{opacity:0;transform:translate(-50%,-36px) scale(.96)}}
.controls{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;gap:9px;align-items:center;width:min(100%,430px);margin:0 auto}.side-btn{width:52px;height:52px}.drop-btn{height:56px;border-radius:18px;background:linear-gradient(180deg,#f6c063 0%,#eda73a 56%,#df8e24 100%);color:#31281d;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 5px 0 #a9661b,0 10px 22px rgba(0,0,0,.2);transition:transform .08s,box-shadow .08s,filter .08s}.drop-btn:active,.drop-btn.active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 0 #a9661b,0 5px 12px rgba(0,0,0,.18);filter:brightness(.98)}.drop-btn .arrow{font-size:28px;font-weight:1000;line-height:1}.drop-btn b,.drop-btn small{display:block}.drop-btn b{font-size:14px}.drop-btn small{font-size:11px;opacity:.62;margin-top:1px}.tip{margin:0;text-align:center;color:#788497;font-size:11px;line-height:1.35;min-height:16px}
.overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;padding:16px;background:rgba(10,13,18,.66);backdrop-filter:blur(8px)}.overlay.hidden{display:none}.dialog{width:min(100%,470px);max-height:min(88vh,760px);overflow:auto;border-radius:28px;padding:22px;background:linear-gradient(180deg,#2c333e,#252b34);box-shadow:0 28px 70px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.045)}.dialog>span{font-size:11px;color:#8390a2;font-weight:900;letter-spacing:.15em}.dialog h2{margin:5px 0 18px;font-size:24px}.compact-dialog{max-width:410px}.mode-list{display:grid;grid-template-columns:1fr;gap:8px}.mode-card{width:100%;padding:13px 14px;border-radius:17px;background:#333b47;text-align:left;border:1px solid rgba(255,255,255,.035);transition:.12s}.mode-card:active{transform:scale(.99)}.mode-card.selected{background:#3b4553;border-color:#667891;box-shadow:inset 3px 0 0 #f1b34f}.mode-card b,.mode-card small{display:block}.mode-card b{font-size:15px}.mode-card small{font-size:12px;color:#9ba6b7;margin-top:4px}.platform-card{margin-top:12px;padding:14px;border-radius:18px;background:#20262e;border:1px solid rgba(255,255,255,.045)}.platform-copy span,.platform-copy b,.platform-copy small{display:block}.platform-copy span{font-size:10px;letter-spacing:.12em;color:#707d91;font-weight:900}.platform-copy b{font-size:14px;margin-top:4px}.platform-copy small{font-size:11px;color:#8d98aa;margin-top:3px}.platform-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:12px}.mini-btn,.primary,.secondary,.rank-tab{min-height:44px;border-radius:14px;background:#39424f;font-size:12px;font-weight:850}.mini-btn.accent,.primary{background:linear-gradient(180deg,#f1b95d,#e7a139);color:#30271c;box-shadow:inset 0 1px 0 rgba(255,255,255,.32)}.secondary{width:100%;margin-top:8px;background:#343c48}.primary{width:100%;font-size:14px}.result{display:flex;justify-content:space-between;align-items:end;padding:15px;margin-bottom:14px;border-radius:17px;background:#20262f}.result span{font-size:12px;color:#98a3b4}.result strong{font-size:28px}.rank-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.rank-tab.selected{background:#e7a53e;color:#2d261c}.rank-state{padding:14px 0;color:#929cad;font-size:12px;text-align:center}.rank-list{padding:0;margin:0 0 10px;list-style:none}.rank-list li{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:8px;padding:10px 6px;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px}.rank-list li.me{background:rgba(231,165,62,.08);border-radius:12px}.rank-pos{color:#818da0}.rank-name{min-width:0}.rank-name small{display:block;font-size:11px;color:#747f91}.rank-score{font-size:14px}
@media (min-width:700px){.overlay{align-items:center}}@media (max-width:370px){.app{padding-left:9px;padding-right:9px}.scores{gap:8px}.scores div{min-width:46px}.brand strong{font-size:16px}.icon-btn{width:42px;height:42px}.hud-actions{gap:5px}.controls{gap:7px}.dialog{padding:18px}}
@media (orientation:landscape) and (max-height:620px){.app{width:min(100%,820px);display:grid;grid-template-columns:minmax(290px,430px) minmax(270px,330px);grid-template-rows:auto 1fr auto;padding:8px 12px;column-gap:18px}.hud{grid-column:1/3}.play-area{grid-column:1;grid-row:2/4}.controls{grid-column:2;grid-row:2;align-self:end}.tip{grid-column:2;grid-row:3}.board-shell{height:min(72vh,470px);width:auto}.mode-status{display:none}}

/* v7.1 visual + motion polish: keep layout/gameplay, improve material depth and clarity */
:root{--panel:#28303a;--panel2:#333d49;--muted:#98a5b7;--line:rgba(255,255,255,.075);--accent:#f4b64f;--accent2:#e99b31}
.app{
  background:
    radial-gradient(circle at 52% -10%,rgba(130,161,205,.16),transparent 34%),
    radial-gradient(circle at 18% 42%,rgba(70,94,126,.08),transparent 32%),
    linear-gradient(180deg,#272e39 0%,#1e242d 57%,#191e26 100%);
}
.hud{padding:2px 2px 0}.brand strong{font-weight:850;letter-spacing:.01em}.scores strong{font-weight:850;letter-spacing:-.025em}.scores span{color:#8794a7}
.icon-btn,.side-btn{
  background:linear-gradient(180deg,#39424f 0%,#2d3540 100%);
  border:1px solid rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.24),0 6px 14px rgba(0,0,0,.19);
}
.icon-btn:active,.side-btn:active{transform:translateY(1px) scale(.985)}
.board-shell{
  background:#151a21;
  border:1px solid rgba(255,255,255,.065);
  box-shadow:0 24px 58px rgba(4,7,11,.39),0 2px 0 rgba(255,255,255,.018),inset 0 1px 0 rgba(255,255,255,.055),inset 0 -14px 28px rgba(0,0,0,.12);
}
.board-glass{
  background:linear-gradient(145deg,rgba(255,255,255,.032),transparent 31%,transparent 76%,rgba(0,0,0,.075));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018),inset 0 1px 18px rgba(255,255,255,.018);
}
.next-chip{
  right:10px;top:28px;padding:6px 7px 6px 10px;border-radius:15px;
  background:linear-gradient(180deg,rgba(24,29,37,.84),rgba(15,19,25,.78));
  border:1px solid rgba(255,255,255,.045);
  box-shadow:0 8px 20px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.055);
}
.next-chip b{border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 6px rgba(0,0,0,.10),0 5px 10px rgba(0,0,0,.22)}
.drop-btn{
  background:linear-gradient(180deg,#f8c86f 0%,#f2b34e 50%,#e6972b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -1px 0 rgba(131,72,13,.23),0 5px 0 #a76519,0 11px 24px rgba(0,0,0,.21);
}
.drop-btn:active,.drop-btn.active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 3px 0 #a76519,0 6px 15px rgba(0,0,0,.18)}
.mode-status{color:#b4bfce;text-shadow:0 1px 0 rgba(0,0,0,.2)}
.tip{color:#8491a4}.combo{border:1px solid rgba(255,255,255,.055);box-shadow:0 8px 20px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.05)}
.loading{background:radial-gradient(circle at 50% 28%,#303846,#1c222b 66%)}
.dialog{background:linear-gradient(180deg,#303844,#252c35);border:1px solid rgba(255,255,255,.055);box-shadow:0 30px 76px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.08)}
.mode-card{background:linear-gradient(180deg,#37414e,#303844);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}.mode-card.selected{background:linear-gradient(180deg,#414d5b,#384451)}