:root{color:#2a241a;background:#d8d0bd;font-family:Inter,PingFang TC,Noto Sans TC,Microsoft JhengHei,system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--panel: rgba(251, 247, 235, .76);--line: rgba(73, 58, 33, .24);--gold: #a8751f;--jade: #167a63;--ink: #2a241a;--danger: #d8745f}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{background:radial-gradient(circle at 74% 18%,rgba(255,255,255,.46),transparent 30%),linear-gradient(135deg,#d8d0bd,#c9bea7 52%,#eee5d1)}.app-shell{position:relative;width:100%;height:100%}.stage{position:absolute;inset:0}.stage canvas{display:block;width:100%;height:100%;touch-action:none}.topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:78px;padding:10px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fbf7ebe6,#fbf7eb94);box-shadow:0 10px 28px #4d3a1b1a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none;z-index:3}.brand,.panel,.controls,.piece-chip,.explode-panel{border:1px solid var(--line);background:var(--panel);box-shadow:0 16px 34px #4d3a1b24;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.brand{flex:0 0 auto;display:flex;align-items:center;gap:14px;min-width:max-content;border:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:auto}.brand-logo{width:58px;height:38px;object-fit:contain;padding:4px 5px;border:1px solid rgba(73,58,33,.14);background:#ffffff75;opacity:.82}.brand>div{min-width:max-content}.eyebrow{margin:0 0 2px;color:var(--gold);font-size:11px;letter-spacing:0}h1{margin:0;font-size:clamp(22px,2.4vw,30px);line-height:1.05;font-weight:720;white-space:nowrap;overflow:visible;text-overflow:clip}.subtitle{margin:17px 0 0;color:#2a241ab8;font-size:13px;line-height:1.35}.panel{flex:1 1 min(690px,54vw);display:grid;grid-template-columns:minmax(120px,1fr) minmax(84px,112px) minmax(62px,72px);align-items:center;gap:12px;width:auto;padding:0;border:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:auto}.progress-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:7px}.progress-head strong{font-size:13px}.progress-head span{color:var(--gold);font-variant-numeric:tabular-nums}.bar{height:7px;overflow:hidden;border:1px solid rgba(73,58,33,.16);background:#493a2114}.bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--jade),var(--gold));transition:width .24s ease}.layer-menu,.settings-menu{position:relative;height:36px}.layer-menu summary,.settings-menu summary{display:grid;place-items:center;height:36px;min-width:0;padding:0 10px;border:1px solid var(--line);background:#ffffff3d;color:#2a241ae6;font-size:13px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}.layer-menu summary::-webkit-details-marker,.settings-menu summary::-webkit-details-marker{display:none}.layer-menu[open] summary,.settings-menu[open] summary{color:#fff8e7;background:#8a6425}.layer-menu:not([open]) .layers{display:none}.layer-menu[open] .layers{display:grid}.settings-menu:not([open]) .settings-panel{display:none}.settings-menu[open] .settings-panel{display:grid}.settings-panel{position:absolute;top:44px;right:0;width:min(330px,calc(100vw - 36px));gap:12px;padding:12px;border:1px solid var(--line);background:#fbf7ebf0;box-shadow:0 16px 34px #4d3a1b24;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.settings-panel fieldset{min-width:0;margin:0;padding:0;border:0}.settings-panel legend,.toggle-row span:first-child{margin-bottom:7px;color:#2a241ab8;font-size:12px}.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border:1px solid var(--line);overflow:hidden}.theme-btn,.difficulty-btn,.settings-action-btn{min-width:0;min-height:34px;padding:0 8px;border-right:1px solid var(--line);font-size:clamp(11px,1.2vw,13px);line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.theme-btn.active,.difficulty-btn.active{color:#fff8e7;background:#8a6425}.settings-action-btn{display:grid;place-items:center;flex:none;width:100%;min-height:42px;border:1px solid var(--line);color:#fff8e7;background:#93671e;font-size:14px;font-weight:720;text-align:center}.settings-action-btn.active{background:#167a63}#languageSelect{width:100%;height:36px;border:1px solid var(--line);color:var(--ink);background:#ffffff57;font:inherit;font-size:13px}.toggle-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;color:#2a241adb;font-size:13px}.toggle-row span:first-child{margin-bottom:0}.toggle-row input{width:18px;height:18px;accent-color:var(--gold)}.layers{position:absolute;top:44px;right:0;width:280px;gap:8px;max-height:min(46vh,360px);overflow:auto;padding:12px;border:1px solid var(--line);background:#fbf7ebeb;box-shadow:0 16px 34px #4d3a1b24;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.layer-row{display:grid;grid-template-columns:82px 1fr 48px;gap:8px;align-items:center;color:#2a241ab8;font-size:13px}.layer-row.active{color:var(--ink);font-weight:650}.layer-row.locked{opacity:.52}.layer-toggle{display:flex;align-items:center;gap:6px;min-width:0;cursor:pointer}.layer-toggle input{width:14px;height:14px;margin:0;accent-color:var(--gold)}.layer-toggle span{white-space:nowrap}.mini-bar{height:6px;overflow:hidden;background:#493a2114}.mini-fill{width:0%;height:100%;background:var(--gold);transition:width .24s ease}.controls{position:absolute;left:50%;bottom:22px;display:flex;width:min(720px,calc(100vw - 36px));transform:translate(-50%);overflow:hidden;pointer-events:auto}button{min-width:0;flex:1 1 0;min-height:44px;padding:0 10px;border:0;border-right:1px solid var(--line);color:#2a241a;background:#ffffff3d;font:inherit;font-size:clamp(12px,1.4vw,14px);line-height:1.1;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.control-btn{display:grid;grid-template-rows:22px 15px;place-items:center;gap:2px;min-height:54px;padding:7px 8px 6px}.control-icon{width:22px;height:22px;fill:currentColor}.control-label{max-width:78px;overflow:hidden;text-overflow:ellipsis;font-size:10px;line-height:1;white-space:nowrap}button:last-child{border-right:0}button:hover,button:focus-visible{background:#a8751f2e;outline:none}button:disabled{color:#2a241a61;cursor:not-allowed;background:#ffffff1f}.primary-cta{position:relative;color:#fff8e7;background:#93671e;font-weight:720;box-shadow:0 0 0 1px #93671e59,0 10px 26px #93671e3d;animation:cta-glow 1.45s ease-in-out infinite}.primary-cta:before{content:"點擊開始";position:absolute;left:50%;bottom:calc(100% + 8px);padding:4px 8px;color:#93671e;background:#fff8e7eb;border:1px solid rgba(147,103,30,.28);font-size:12px;line-height:1;white-space:nowrap;pointer-events:none;transform:translate(-50%);animation:cta-label-bounce 1.1s ease-in-out infinite}.primary-cta:after{content:"";position:absolute;inset:-4px;border:1px solid rgba(147,103,30,.45);pointer-events:none;animation:cta-pulse 1.45s ease-out infinite}@keyframes cta-glow{0%,to{filter:brightness(1)}50%{filter:brightness(1.12)}}@keyframes cta-label-bounce{0%,to{transform:translate(-50%)}48%{transform:translate(-50%,-5px)}}@keyframes cta-pulse{0%{opacity:.65;transform:scale(1)}to{opacity:0;transform:scale(1.08,1.22)}}.piece-chip{position:absolute;left:18px;bottom:82px;max-width:min(360px,calc(100vw - 36px));padding:10px 12px;color:#2a241adb;font-size:14px;opacity:0;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease;pointer-events:none}.piece-chip.visible{opacity:1;transform:translateY(0)}.explode-panel{position:absolute;left:18px;top:50%;z-index:3;display:grid;gap:14px;width:150px;padding:14px 12px;opacity:0;pointer-events:none;transform:translateY(-50%) translate(-12px);transition:opacity .18s ease,transform .18s ease}.explode-panel.visible{opacity:1;pointer-events:auto;transform:translateY(-50%) translate(0)}.range-control{display:grid;gap:8px;color:#2a241ad1;font-size:12px}.range-control input{width:100%;accent-color:var(--jade)}.confetti-canvas{position:absolute;inset:0;z-index:5;pointer-events:none}.completion-banner{position:absolute;top:18px;left:50%;z-index:6;display:grid;place-items:center;width:min(520px,calc(100vw - 36px));height:78px;border:2px solid #f6d77a;color:#ffe9a8;background:linear-gradient(90deg,#750000f5,#ca1610fa,#750000f5);box-shadow:0 18px 44px #5a000052,inset 0 0 0 5px #ffd87229;font:inherit;font-size:clamp(28px,4vw,46px);font-weight:860;letter-spacing:0;opacity:0;pointer-events:none;transform:translate(-50%,-130%) rotateX(82deg) scale(.92);transform-origin:top center}.completion-banner span{text-shadow:0 2px 0 rgba(80,0,0,.45),0 0 18px rgba(255,218,106,.48)}.completion-banner.visible{opacity:1;pointer-events:auto;animation:banner-drop-flip 1.15s cubic-bezier(.2,.84,.22,1) forwards}.completion-banner.visible:before,.completion-banner.visible:after{content:"";position:absolute;top:50%;width:42px;height:92px;border:2px solid #f6d77a;background:#b50d0b;transform:translateY(-50%)}.completion-banner.visible:before{left:-44px}.completion-banner.visible:after{right:-44px}.copyright-watermark{position:absolute;left:50%;top:84px;z-index:2;width:min(820px,calc(100vw - 36px));color:#2a241a8a;font-size:11px;line-height:1.25;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.42);pointer-events:none;transform:translate(-50%)}.app-shell.final-mode .copyright-watermark{top:auto;bottom:18px;color:#2a241a94}.app-shell.final-mode .topbar,.app-shell.final-mode .controls,.app-shell.final-mode .explode-panel,.app-shell.final-mode .piece-chip{opacity:0;pointer-events:none}@keyframes banner-drop-flip{0%{opacity:0;transform:translate(-50%,-130%) rotateX(82deg) scale(.92)}58%{opacity:1;transform:translate(-50%,8px) rotateX(-10deg) scale(1.03)}to{opacity:1;transform:translate(-50%) rotateX(0) scale(1)}}.loader{position:absolute;inset:0;display:grid;place-items:center;background:#d8d0bdc2;z-index:4}.loader-card{width:min(340px,calc(100vw - 36px));border:1px solid var(--line);background:#fbf7ebe0;padding:18px;text-align:center}.loader-card strong{display:block;margin-bottom:10px;font-size:17px}.loader-card span{color:#2a241ab3;font-size:13px}.error{color:var(--danger)}@media(pointer:coarse){.topbar{padding:12px 18px}.layer-menu,.settings-menu,.layer-menu summary,.settings-menu summary,#languageSelect{height:48px}.settings-panel{top:56px;width:min(390px,calc(100vw - 36px));gap:14px;padding:16px}.theme-btn,.difficulty-btn,.settings-action-btn{min-height:48px;font-size:14px}.controls{width:min(820px,calc(100vw - 28px));bottom:18px}.control-btn{min-height:68px;padding:9px 8px 8px}.control-icon{width:28px;height:28px}.control-label{max-width:92px;font-size:11px}.layer-toggle input,.toggle-row input{width:22px;height:22px}.range-control{gap:12px;font-size:14px}.range-control input{min-height:32px}}@media(max-width:760px){.topbar{min-height:auto;padding:8px 10px;flex-direction:column;align-items:stretch;gap:7px}.brand,.panel{flex:none;width:100%;max-width:none}.brand{min-width:0;justify-content:space-between;gap:10px}.brand-logo{width:48px;height:32px;flex:0 0 auto}h1{font-size:21px;overflow:hidden;text-overflow:ellipsis}.panel{grid-template-columns:1fr auto;gap:8px}.progress{grid-column:1 / -1}.subtitle{display:none}.settings-menu{width:112px}.layer-menu{width:66px}.settings-panel{right:0;width:min(330px,calc(100vw - 20px))}.layers{right:0;width:min(280px,calc(100vw - 20px))}.controls{left:10px;right:10px;bottom:12px;transform:none;width:auto}button{min-width:0;flex:1;padding:0 8px;font-size:clamp(11px,2.9vw,13px)}.control-btn{min-height:50px;padding:6px 4px 5px}.control-label{max-width:52px;font-size:9px}.piece-chip{left:10px;bottom:74px}.copyright-watermark{top:112px;width:calc(100vw - 20px);font-size:9px}.explode-panel{left:10px;top:auto;bottom:132px;width:min(210px,calc(100vw - 20px));transform:translateY(10px)}.explode-panel.visible{transform:translateY(0)}}:lang(en) .brand{flex-basis:300px}:lang(en) h1{font-size:clamp(20px,2vw,26px)}:lang(en) .subtitle{font-size:12px}:lang(en) .panel{flex-basis:min(620px,52vw);grid-template-columns:minmax(130px,1fr) minmax(78px,96px) minmax(58px,66px)}:lang(en) .settings-panel legend,:lang(en) #languageSelect,:lang(en) .settings-menu summary,:lang(en) .layer-menu summary,:lang(en) .theme-btn,:lang(en) .difficulty-btn,:lang(en) button{font-size:12px}:lang(en) .primary-cta:before{content:"Start"}