html,body{width:100%;margin:0}:root{--app-height: 100vh;--bg-main: #030812;--bg-main-2: #071523;--bg-panel: #071421;--bg-panel-2: #0c1f31;--bg-recess: #030914;--gold: #d6b25e;--gold-light: #ffe6a3;--gold-dark: #7b5520;--cyan-glow: #00eaff;--cyan-soft: rgba(0, 234, 255, .22);--text-main: #fff6dc;--text-muted: #aeb9c4;--border-soft: rgba(214, 178, 94, .46);--shadow-gold: rgba(255, 207, 112, .22);--shadow-cyan: rgba(0, 234, 255, .18);--browser-bottom-reserve: clamp(108px, 15dvh, 150px)}*,*:before,*:after{box-sizing:border-box}html,body{min-height:100%;overflow:hidden;background:#02050b;color:var(--text-main);font-family:-apple-system,BlinkMacSystemFont,PingFang TC,Noto Sans TC,Microsoft JhengHei,sans-serif}body{background:radial-gradient(circle at 50% 2%,rgba(0,234,255,.13),transparent 25%),radial-gradient(circle at 10% 80%,rgba(214,178,94,.1),transparent 28%),linear-gradient(180deg,#02050b,#06111d 48%,#030812)}.game-shell{position:relative;isolation:isolate;display:flex;width:min(100vw,480px);height:calc(var(--app-height) - var(--browser-bottom-reserve));min-height:calc(var(--app-height) - var(--browser-bottom-reserve));margin:0 auto;flex-direction:column;gap:9px;overflow:hidden;padding:max(10px,env(safe-area-inset-top)) 12px 10px}.game-shell:before{position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,transparent 0 40%,rgba(255,255,255,.03) 41% 43%,transparent 44% 100%),radial-gradient(circle at 50% 22%,rgba(0,234,255,.08),transparent 22%);content:"";pointer-events:none}button{position:relative;border:0;font:inherit;cursor:pointer;transition:border-color .16s ease,filter .16s ease,transform .12s ease,opacity .16s ease}button:not(:disabled):hover{filter:brightness(1.08)}button:not(:disabled):active{transform:translateY(1px) scale(.99)}button:disabled{cursor:not-allowed;opacity:.42}.top-hud{position:relative;flex:0 0 auto;width:100%;overflow:hidden;padding:12px 12px 11px;border:1px solid rgba(255,230,163,.58);border-radius:24px;background:linear-gradient(180deg,#0e2234ed,#030a12f7),radial-gradient(circle at 50% 0%,rgba(0,234,255,.18),transparent 38%);box-shadow:0 0 0 1px #7b55208c inset,0 16px 30px #00000054,0 0 26px var(--shadow-cyan),0 0 16px var(--shadow-gold)}.top-hud:before,.top-hud:after{position:absolute;right:18px;left:18px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,230,163,.75),rgba(0,234,255,.5),rgba(255,230,163,.75),transparent);content:"";pointer-events:none}.top-hud:before{top:7px}.top-hud:after{bottom:7px}.hud-crest{position:absolute;top:1px;left:50%;z-index:3;width:32px;height:32px;border:2px solid var(--gold-light);border-radius:9px;background:linear-gradient(135deg,#083b67 0 18%,#38d8ff 31%,#06305b 50%,#4ddcff 72%,#071827);box-shadow:0 0 16px #00eaff73,0 0 10px #ffe6a359 inset;rotate:45deg;translate:-50% -18%}.hud-timer-label{margin-top:2px;color:var(--gold-light);font-size:14px;font-weight:800;letter-spacing:.12em;text-align:center;text-shadow:0 0 8px rgba(255,230,163,.22)}.hud-main-timer{width:68%;margin:2px auto 9px;padding:3px 10px 6px;border:1px solid rgba(255,230,163,.43);border-radius:22px;color:var(--text-main);background:linear-gradient(180deg,#040d18b8,#09192757);box-shadow:inset 0 10px 18px #0000007a,inset 0 -8px 16px #ffe6a312,0 0 16px #00eaff24;font-size:clamp(46px,12.5vw,72px);font-weight:850;font-variant-numeric:tabular-nums;letter-spacing:.06em;line-height:1;text-align:center;text-shadow:0 2px 0 rgba(0,0,0,.45),0 0 16px rgba(255,230,163,.3)}.hud-main-timer.low{color:#ff8095;text-shadow:0 2px 0 rgba(0,0,0,.45),0 0 16px rgba(255,95,125,.42)}.hud-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}.hud-stat-card,.hud-info-panel{border:1px solid var(--border-soft);background:linear-gradient(180deg,#081624f5,#02080ffa);box-shadow:inset 0 10px 18px #0000007a,inset 0 -7px 12px #ffe6a30e,0 0 0 1px #0000008c}.hud-stat-card{display:grid;min-height:62px;grid-template-columns:28px 1fr;align-items:center;column-gap:5px;padding:8px 7px 7px;border-radius:16px}.stat-icon{color:var(--gold-light);filter:drop-shadow(0 0 7px rgba(255,206,104,.35));font-size:24px;line-height:1;text-align:center}.stat-label{display:block;color:var(--gold-light);font-size:14px;letter-spacing:.08em}.stat-value{display:block;margin-top:1px;color:var(--text-main);font-size:26px;font-variant-numeric:tabular-nums;font-weight:780;line-height:1}.hud-info-panel{padding:10px 12px 11px;border-radius:17px}.info-row{display:flex;min-height:26px;align-items:center;justify-content:space-between;gap:10px}.info-row+.info-row{margin-top:8px;padding-top:8px;border-top:1px solid rgba(214,178,94,.24)}.info-title{display:flex;min-width:0;align-items:center;gap:8px;color:var(--text-main);font-size:16px;font-weight:750;letter-spacing:.04em}.info-title .mode{min-width:0;overflow:hidden;color:var(--gold-light);text-overflow:ellipsis;white-space:nowrap}.info-num{flex:0 0 auto;color:var(--text-main);font-size:17px;font-variant-numeric:tabular-nums;font-weight:850;letter-spacing:.03em}.progress-line{width:100%;height:5px;margin:7px 0 0;overflow:hidden;border:1px solid rgba(255,230,163,.12);border-radius:999px;background:#0000008c;box-shadow:inset 0 2px 4px #0009}.progress-line span{display:block;width:0%;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--gold-light),rgba(0,234,255,.75));box-shadow:0 0 8px #00eaff52;transition:width .2s ease}.gem-legend{display:flex;flex:0 0 auto;height:45px;align-items:center;justify-content:space-around;gap:6px;padding:6px 11px;border:1px solid rgba(255,230,163,.48);border-radius:19px;background:linear-gradient(180deg,#0c1f31c7,#030a12f0);box-shadow:inset 0 8px 14px #00000073,inset 0 -6px 10px #ffe6a30d,0 0 16px #00eaff1c}.gem,.gem-piece{--c1: #f64779;--c2: #ab153f;--c3: #ffd4e0;position:relative;width:min(86%,45px);aspect-ratio:1;background:radial-gradient(circle at 22% 18%,#fff 0 4%,transparent 5%),conic-gradient(from 15deg,var(--c3) 0 9%,var(--c1) 9% 21%,var(--c2) 21% 34%,var(--c3) 34% 43%,var(--c1) 43% 58%,var(--c2) 58% 72%,var(--c3) 72% 82%,var(--c1) 82% 100%);box-shadow:inset 0 0 0 1px #ffffff52,inset 6px 8px 12px #fff3,inset -8px -10px 15px #00000042;filter:drop-shadow(0 5px 4px rgba(0,0,0,.45)) drop-shadow(0 0 7px color-mix(in srgb,var(--c1),transparent 48%))}.gem:before,.gem-piece:before{position:absolute;inset:13%;background:linear-gradient(135deg,rgba(255,255,255,.55),transparent 38%),linear-gradient(225deg,rgba(0,0,0,.18),transparent 40%);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);content:"";opacity:.8}.gem:after,.gem-piece:after{position:absolute;top:12%;left:17%;width:18%;height:8%;border-radius:999px;background:#ffffffbf;content:"";filter:blur(.2px);rotate:-28deg}.gem.round{border-radius:50%;clip-path:polygon(50% 0,78% 8%,100% 35%,92% 72%,64% 100%,28% 94%,0 63%,6% 26%)}.gem.square{border-radius:18%;clip-path:polygon(18% 0,82% 0,100% 18%,100% 82%,82% 100%,18% 100%,0 82%,0 18%)}.gem.diamond{border-radius:10%;clip-path:polygon(50% 0,88% 22%,100% 50%,72% 100%,28% 100%,0 50%,12% 22%)}.gem.triangle{border-radius:12%;clip-path:polygon(50% 0,100% 92%,0 92%)}.gem.oct{border-radius:18%;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}.pink{--c1: #ff4778;--c2: #9e173b;--c3: #ffd0dc}.green{--c1: #13d69a;--c2: #056843;--c3: #c8ffef}.gold{--c1: #ffc736;--c2: #946900;--c3: #fff2a7}.blue{--c1: #31a8ff;--c2: #004a95;--c3: #d7f5ff}.purple{--c1: #b84cff;--c2: #501188;--c3: #f2d1ff}.white{--c1: #ecf9ff;--c2: #7a94a2;--c3: #ffffff}.board-frame{position:relative;display:flex;flex:1 1 auto;min-height:0;padding:7px;border:1px solid rgba(255,230,163,.72);border-radius:24px;background:linear-gradient(145deg,#ffe6a3b8,#7b55208c 17%,#ffe6a39e 50%,#5c3a14a6 78%,#ffe6a3b8),linear-gradient(180deg,#06121fdb,#02070dfa);box-shadow:0 16px 32px #00000061,0 0 20px #d6b25e33,0 0 22px #00eaff14}.board-frame:before,.board-frame:after{position:absolute;left:50%;z-index:2;width:24px;height:24px;border:1px solid rgba(255,246,220,.65);border-radius:7px;background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));box-shadow:0 0 14px #ffe6a34d;content:"";rotate:45deg;translate:-50% 0}.board-frame:before{top:-12px}.board-frame:after{bottom:-12px}.gem-board{display:flex;width:100%;height:100%;min-height:0;align-items:stretch;justify-content:stretch;overflow:hidden;padding:7px;border:1px solid rgba(0,234,255,.14);border-radius:17px;background:linear-gradient(180deg,#030b14fa,#040e18f5);box-shadow:inset 0 0 0 1px #ffe6a31f,inset 0 22px 38px #0000008a}canvas{display:block;width:100%!important;height:100%!important;margin:0;touch-action:none;-webkit-user-select:none;user-select:none}.bottom-controls{display:grid;flex:0 0 auto;grid-template-columns:repeat(4,1fr);gap:10px;padding:2px 9px 0}.control-button{display:flex;min-height:45px;flex-direction:column;align-items:center;justify-content:center;gap:0;border:1px solid rgba(255,230,163,.55);border-radius:16px;color:var(--gold-light);background:linear-gradient(180deg,#0d1d30eb,#030911f5);box-shadow:inset 0 8px 12px #ffe6a30e,inset 0 -9px 14px #0000006b,0 8px 18px #00000047,0 0 9px #00eaff14;font-size:11px;font-weight:750;letter-spacing:.05em}.control-button .icon{color:var(--gold-light);filter:drop-shadow(0 0 5px rgba(255,230,163,.22));font-size:20px;line-height:1}.control-button .x3{margin-left:-1px;padding:1px 4px;border:1px solid rgba(255,230,163,.55);border-radius:999px;font-size:10px}.control-label{font-size:11px;line-height:1.25;white-space:nowrap}#sound-btn.off{border-color:#aeb9c43d;color:#aeb9c4b8}#sound-btn.off .sound-icon:after{position:absolute;top:50%;right:-5px;left:-5px;height:2px;border-radius:999px;background:#ff6f87;box-shadow:0 0 8px #ff6f8780;content:"";transform:rotate(-35deg)}#combo-toast{position:absolute;top:14px;left:50%;z-index:5;padding:6px 14px;border:1px solid rgba(255,230,163,.6);border-radius:999px;color:#071421;background:linear-gradient(90deg,var(--gold-light),#44f3d1);box-shadow:0 8px 22px #00000052;font-size:17px;font-weight:900;opacity:0;pointer-events:none;transform:translate(-50%) scale(.86)}#combo-toast.show{animation:combo-pop .64s ease}@keyframes combo-pop{0%{opacity:0;transform:translate(-50%) scale(.75)}28%{opacity:1;transform:translate(-50%) scale(1.08)}to{opacity:0;transform:translate(-50%) scale(1)}}.overlay{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:22px;background:linear-gradient(180deg,#02050c9e,#02050cd1),#05060cb8;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.overlay.hidden,.hidden{display:none!important}.overlay-card{width:min(370px,100%);padding:24px;border:1px solid rgba(214,178,94,.5);border-radius:22px;background:linear-gradient(180deg,#0d1e2ff5,#030710fa),var(--bg-panel);box-shadow:inset 0 1px #fff6dc1a,inset 0 -20px 34px #00000047,0 24px 80px #00000094,0 0 26px #00eaff14;text-align:center}.eyebrow{margin:0 0 8px;color:#7ff7dc;font-size:12px;font-weight:900;letter-spacing:0;text-transform:uppercase}.overlay-card h1{margin:0 0 10px;color:var(--text-main);font-size:30px;line-height:1.1}.overlay-card p{margin:0;color:#fff6dcc7;font-size:15px;line-height:1.55}.overlay-big{margin:16px 0 2px;color:var(--gold-light);font-size:24px;font-weight:900}#overlay-button{width:100%;min-height:42px;margin-top:18px;border:1px solid rgba(255,230,163,.62);border-radius:13px;color:#071421;background:linear-gradient(90deg,var(--gold-light),#47f3d2);box-shadow:inset 0 1px #ffffff59,0 10px 22px #00000057;font-weight:900}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(max-height:760px){:root{--browser-bottom-reserve: clamp(96px, 13dvh, 128px)}.game-shell{gap:7px;padding-right:10px;padding-left:10px}.top-hud{padding:9px 10px}.hud-main-timer{margin-bottom:6px;font-size:44px}.hud-timer-label{font-size:12px}.hud-stat-card{min-height:54px;padding:6px}.stat-icon{font-size:21px}.stat-label{font-size:12px}.stat-value{font-size:22px}.hud-info-panel{padding:7px 9px}.info-row+.info-row{margin-top:5px;padding-top:5px}.gem-legend{height:39px}.board-frame,.gem-board{padding:6px}.bottom-controls{gap:8px}.control-button{min-height:39px;border-radius:14px}.control-button .icon{font-size:18px}}@media(min-width:681px){:root{--browser-bottom-reserve: 0px}}