:root{--app-height: 100dvh;--bg-main: #159ed9;--bg-panel: #063d78;--bg-panel-2: #075898;--hud-blue: #063d78;--gold: #edae28;--gold-light: #fff1a0;--cyan-glow: #75e8ff;--text-main: #ffffff;--text-muted: #d7efff;--border-soft: rgba(255, 205, 75, .72);--panel-shadow: inset 0 2px 7px rgba(0, 22, 54, .76), 0 3px 0 rgba(92, 45, 5, .72), 0 6px 14px rgba(0, 47, 85, .32)}html,body,#app{width:100%;height:100%;margin:0}html{background-color:#159ed9;color-scheme:dark}*,*:before,*:after{box-sizing:border-box}body{overflow:hidden;color:var(--text-main);background-color:#159ed9;background-image:url(../assets/gem-kingdom-game-bg.png);background-position:center;background-size:cover;font-family:Inter,Microsoft JhengHei,PingFang TC,sans-serif}button{border:2px solid var(--border-soft);color:var(--text-main);background:linear-gradient(180deg,#172b3d,#07101c 62%,#03070d);box-shadow:inset 0 1px #ffffff1f,inset 0 -3px 6px #000000b3,0 3px 8px #00000061;font:inherit;font-weight:800;letter-spacing:0;cursor:pointer;touch-action:manipulation}button:active:not(:disabled){box-shadow:inset 0 3px 8px #000000db;transform:translateY(1px)}button:focus-visible{outline:2px solid var(--cyan-glow);outline-offset:2px}button:disabled{cursor:not-allowed;filter:grayscale(.7);opacity:.46}.game-shell{position:relative;display:flex;width:100%;height:var(--app-height);min-height:0;flex-direction:column;align-items:center;gap:6px;overflow:hidden;padding:max(7px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom));background:url(../assets/gem-kingdom-game-bg.png) center / cover no-repeat}.top-hud,.gem-legend,.bottom-controls{z-index:2;width:min(100%,590px);flex:none}.top-hud{display:grid;height:clamp(112px,16dvh,132px);grid-template-columns:minmax(0,.96fr) minmax(0,1.34fr);gap:6px}.brand-timer-panel,.hud-data-panel,.gem-legend,.overlay-card{border:3px solid var(--gold);background:linear-gradient(180deg,#095d97fa,#032b5cfc);box-shadow:var(--panel-shadow),inset 0 0 0 1px #fff6acb8}.brand-timer-panel{display:grid;height:100%;min-width:0;min-height:0;overflow:hidden;grid-template-rows:minmax(0,1fr) 34px;border:0;border-radius:14px;background:transparent;box-shadow:none}.game-logo{display:block;width:100%;height:100%;min-height:0;place-self:center;object-fit:contain;transform:translateY(2px);filter:drop-shadow(0 3px 0 rgba(93,42,4,.9)) drop-shadow(0 5px 7px rgba(0,63,97,.48))}.timer-well{display:grid;height:34px;min-height:0;grid-template-columns:25px auto 1fr;align-items:center;gap:5px;padding:2px 8px 3px 4px;border:3px solid var(--gold);border-radius:12px;background:linear-gradient(180deg,#0b5d9b,#06366d);box-shadow:var(--panel-shadow),inset 0 0 0 1px #fff6ac94;overflow:hidden}.timer-well:before{content:"⌛";display:grid;width:23px;height:23px;place-items:center;border-radius:50%;color:#fff1a0;background:#075394;font-size:17px;text-shadow:0 2px 1px #75420b}.timer-label{color:#fff;font-size:10px;font-weight:700;white-space:nowrap}.hud-main-timer{min-width:0;color:var(--gold-light);font-family:Trebuchet MS,Microsoft JhengHei,sans-serif;font-size:24px;font-weight:800;line-height:1;text-align:right;text-shadow:0 2px 0 #75420b,0 0 8px rgba(255,225,102,.44);white-space:nowrap}.hud-main-timer.low{color:#ff6f8b;text-shadow:0 0 10px rgba(255,58,96,.45)}.hud-data-panel{display:grid;min-width:0;min-height:0;grid-template-rows:auto 1fr;gap:5px;padding:5px;border-radius:15px}.hud-stats-row{display:grid;min-width:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.hud-stat-card{display:grid;min-width:0;min-height:40px;align-content:center;justify-items:center;overflow:hidden;padding:3px 2px;border:2px solid var(--border-soft);border-radius:9px;background:linear-gradient(180deg,#0a548f,#052e65);box-shadow:inset 0 3px 7px #001437b8,inset 0 0 0 1px #fff6ac4d}.hud-stat-label{color:#fff;font-size:9px;font-weight:700}.hud-stat-value{max-width:100%;overflow:hidden;color:var(--text-main);font-size:16px;font-weight:900;line-height:1.05;text-overflow:ellipsis;white-space:nowrap}.score-stat .hud-stat-value{color:#fff}.hud-info-panel{display:grid;min-width:0;min-height:0;align-content:center;gap:4px;padding:4px 7px;border:1px solid rgba(0,37,82,.8);border-radius:10px;background:linear-gradient(180deg,#08528be6,#043163f5);box-shadow:inset 0 3px 8px #001d44a6}.hud-info-row{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:6px;color:#fff;font-size:9px;font-weight:700;line-height:1.1;white-space:nowrap}.hud-info-row strong,.hud-info-row span:last-child{overflow:hidden;color:var(--text-main);text-overflow:ellipsis}.best-row{padding-top:1px;border-top:1px solid rgba(255,224,113,.35)}.progress-track{height:6px;overflow:hidden;border:2px solid #d68e17;border-radius:6px;background:#031d3c;box-shadow:inset 0 2px 4px #000}#ui-progress{width:0%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#63e73b,#fff34f 58%,#ff9e27);box-shadow:0 0 7px #ffed568c;transition:width .2s ease}.gem-legend{display:flex;min-height:38px;align-items:center;justify-content:space-around;padding:5px 14px;border-width:3px;border-radius:999px;background:linear-gradient(180deg,#0b66a8,#043f7e)}.legend-gem{display:block;width:24px;aspect-ratio:1;clip-path:polygon(50% 0,88% 18%,100% 58%,72% 100%,28% 100%,0 58%,12% 18%);filter:drop-shadow(0 2px 2px rgba(0,0,0,.72))}.legend-ruby{background:linear-gradient(135deg,#fff 0 8%,#ff7897 12% 31%,#b50f42 58%,#ff9eb4 74%,#5e092b)}.legend-gold{background:linear-gradient(135deg,#fff8ba 0 8%,#ffd450 13% 31%,#a86d0b 58%,#ffe48e 74%,#5b3908)}.legend-emerald{background:linear-gradient(135deg,#f0fff8 0 8%,#50e4bd 13% 31%,#087c67 58%,#77f9d7 74%,#03443c)}.legend-sapphire{background:linear-gradient(135deg,#e9f9ff 0 8%,#58bfff 13% 31%,#175fb3 58%,#a0dcff 74%,#09296a)}.legend-amethyst{background:linear-gradient(135deg,#f9ddff 0 8%,#bd68ec 13% 31%,#64219c 58%,#e29cff 74%,#35105a)}.legend-diamond{background:linear-gradient(135deg,#fff 0 8%,#d8eef1 13% 31%,#78959e 58%,#f7ffff 74%,#40545c)}#game-wrap{position:relative;display:grid;width:min(100%,560px);min-width:0;min-height:0;flex:1 1 0;overflow:hidden;place-items:start center;border:0;border-radius:0;background:transparent;box-shadow:none;filter:none}#game{display:grid;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;place-items:start center}canvas{display:block;max-width:100%;max-height:100%;margin:0 auto!important;touch-action:none;-webkit-user-select:none;user-select:none}.bottom-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.control-button{display:grid;min-width:0;min-height:64px;grid-template-rows:1fr auto;align-items:center;justify-content:center;gap:2px;overflow:hidden;padding:5px 4px 6px;border:3px solid #ffd45b;border-radius:13px;color:#fff;font-size:13px;line-height:1;text-overflow:ellipsis;text-shadow:0 2px 1px rgba(0,35,70,.72);white-space:nowrap;box-shadow:inset 0 3px #ffffff61,inset 0 -5px #00254c42,0 0 0 2px #663707db,0 5px 9px #002e4352}.control-button:before{display:grid;width:28px;height:28px;place-items:center;color:#fff4a8;font-size:26px;line-height:1;text-shadow:0 2px 0 #75420b,0 0 6px rgba(255,240,132,.5)}#hint-btn{background:linear-gradient(180deg,#b440e8,#6415ac)}#shuffle-btn{background:linear-gradient(180deg,#20bdec,#0875bf)}#pause-btn{background:linear-gradient(180deg,#6fdc25,#269d13)}#sound-btn{background:linear-gradient(180deg,#ffb52c,#ed7114)}#hint-btn:before{content:"💡"}#shuffle-btn:before{content:"↻"}#pause-btn:before{content:"Ⅱ";font-family:Georgia,serif;font-size:15px}#sound-btn:before{content:"♪"}#sound-btn.off{color:#ffffffb8;background:linear-gradient(180deg,#ba7f26,#8a4d16)}#combo-toast{position:absolute;top:16px;left:50%;z-index:4;padding:6px 14px;border:1px solid var(--gold);border-radius:999px;color:#07101a;background:linear-gradient(90deg,var(--gold-light),#5ff0d1);box-shadow:0 4px 14px #00000080;font-size:16px;font-weight:900;opacity:0;pointer-events:none;transform:translate(-50%) scale(.86);white-space:nowrap}#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:max(24px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom));background:#010308d1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.overlay.hidden,.hidden{display:none!important}.overlay-card{width:min(350px,100%);padding:18px;border-radius:12px;text-align:center}.overlay-logo{display:block;width:min(250px,82%);margin:0 auto 6px;filter:drop-shadow(0 5px 8px rgba(0,0,0,.7))}.overlay-card h1{margin:4px 0 8px;color:var(--gold-light);font-size:25px;line-height:1.1}.overlay-card p{margin:0;color:var(--text-muted);font-size:14px;line-height:1.55}.overlay-big{margin:13px 0 0;color:var(--gold-light);font-size:23px;font-weight:900}#overlay-button{width:100%;min-height:44px;margin-top:15px;border-radius:8px;color:#07101a;background:linear-gradient(90deg,var(--gold-light),#5ceacb)}.menu-actions{width:100%}#rules-button{display:none}.overlay[data-mode=menu]{padding:0;background:#06131a;-webkit-backdrop-filter:none;backdrop-filter:none}.overlay[data-mode=menu] .overlay-card{position:relative;display:flex;width:min(100%,590px);height:100%;min-height:100%;flex-direction:column;align-items:center;overflow:hidden;padding:0 max(14px,4vw);border:0;border-radius:0;background:linear-gradient(180deg,transparent 64%,rgba(5,45,31,.08) 76%,rgba(2,21,18,.3) 100%),url(../assets/gem-blocks-start-screen.png) center / cover no-repeat;box-shadow:0 0 46px #000000b8}.overlay[data-mode=menu] .overlay-logo{width:min(94%,460px);max-height:34%;margin:max(10px,env(safe-area-inset-top)) auto 0;object-fit:contain;filter:drop-shadow(0 5px 0 rgba(65,20,80,.82)) drop-shadow(0 9px 12px rgba(0,0,0,.48))}.overlay[data-mode=menu] .overlay-card h1,.overlay[data-mode=menu] .overlay-card p,.overlay[data-mode=menu] .overlay-big{display:none}.overlay[data-mode=menu] .menu-actions{display:grid;width:100%;justify-items:center;gap:13px;margin-top:auto;margin-bottom:max(4dvh,calc(env(safe-area-inset-bottom) + 22px))}.overlay[data-mode=menu] #overlay-button{width:min(82%,370px);min-height:66px;margin:0;border:3px solid #fff0a8;border-radius:16px;color:#3e1e06;background:linear-gradient(180deg,#fff76d,#ffd526 54%,#f39a0a);box-shadow:inset 0 4px #ffffffc2,inset 0 -6px #b6500057,0 0 0 4px #6c320ce6,0 8px 18px #0000005c,0 0 24px #ffdc3485;font-size:clamp(22px,6vw,30px);font-weight:900;text-shadow:0 1px 0 rgba(255,255,255,.52)}.overlay[data-mode=menu] #rules-button{display:block;width:min(58%,265px);min-height:50px;border:3px solid #efffbc;border-radius:14px;color:#fff;background:linear-gradient(180deg,#78e82e,#32b815 55%,#17820c);box-shadow:inset 0 3px #ffffff7a,inset 0 -5px #0f5b036b,0 0 0 4px #34520ce6,0 7px 14px #00000052;font-size:clamp(17px,4.8vw,23px);font-weight:900;text-shadow:0 2px 2px rgba(12,74,3,.8)}.overlay[data-mode=menu] #overlay-button:active:not(:disabled){box-shadow:inset 0 5px 8px #a6490061,0 0 0 4px #6c320ce6,0 4px 10px #00000052}.rules-panel{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:max(22px,env(safe-area-inset-top)) 20px max(22px,env(safe-area-inset-bottom));background:#020811c2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.rules-card{width:min(100%,350px);padding:22px 20px 18px;border:2px solid var(--gold);border-radius:14px;background:linear-gradient(155deg,#0b1f30fa,#03080ffa);box-shadow:var(--panel-shadow),0 16px 40px #0000008f}.rules-card h2{margin:0 0 14px;color:var(--gold-light);font-size:25px;text-align:center}.rules-card ul{display:grid;gap:10px;margin:0;padding-left:21px;color:var(--text-main);font-size:14px;line-height:1.55}#rules-close{width:100%;min-height:44px;margin-top:18px;border-radius:8px;color:#07101a;background:linear-gradient(90deg,var(--gold-light),#5ceacb)}@media(max-width:390px){.game-shell{padding-right:6px;padding-left:6px}.top-hud,.gem-legend,.bottom-controls{width:100%}.hud-main-timer{font-size:22px}.hud-stat-value{font-size:15px}.control-button{gap:3px;padding-right:3px;padding-left:3px;font-size:12px}}@media(max-height:720px){.game-shell{gap:4px;padding-top:max(5px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom))}.top-hud{height:108px;gap:4px}.hud-data-panel{gap:3px;padding:4px}.hud-stat-card{min-height:36px;padding:2px}.hud-stat-label,.hud-info-row,.timer-label{font-size:8px}.hud-main-timer{font-size:21px}.hud-info-panel{gap:3px;padding:3px 6px}.gem-legend{min-height:32px;padding-top:3px;padding-bottom:3px}.legend-gem{width:20px}.control-button{min-height:52px}.control-button:before{width:23px;height:23px;font-size:22px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}