:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#050a12;--bg-deep:#02050a;--panel:#091523cc;--panel-strong:#0b1725;--line:#85d6ff26;--line-strong:#85d6ff52;--text:#eaf6ff;--muted:#8ba6bb;--dim:#60788c;--cyan:#5ee7ff;--orange:#ff9b54;--mint:#78f0c8;--danger:#ff6b6b;--accent:var(--cyan);--radius-lg:24px;--radius-md:16px;--radius-sm:10px;--font:"Segoe UI", "Noto Sans TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif;--mono:"Cascadia Code", "SFMono-Regular", "Consolas", "Liberation Mono", monospace;--shadow:0 24px 60px #0000006b}*{box-sizing:border-box}html{background:var(--bg);min-height:100%}body{background:radial-gradient(circle at 50% -14%, #5ee7ff1f, transparent 42%), radial-gradient(circle at 100% 100%, #ff9b5412, transparent 38%), linear-gradient(180deg, #07101b 0%, var(--bg) 44%, var(--bg-deep) 100%);min-height:100dvh;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;overflow-x:hidden}body:before{content:"";z-index:0;pointer-events:none;background-image:linear-gradient(#5ee7ff08 1px,#0000 1px),linear-gradient(90deg,#5ee7ff08 1px,#0000 1px);background-size:48px 48px;position:fixed;inset:0;-webkit-mask-image:radial-gradient(circle at 50% 28%,#000,#0000 76%);mask-image:radial-gradient(circle at 50% 28%,#000,#0000 76%)}#app{z-index:1;position:relative}button{font:inherit}button,[role=button]{-webkit-tap-highlight-color:transparent}button:focus-visible,[role=button]:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}img{max-width:100%}::selection{color:#fff;background:#5ee7ff4d}.shell{width:min(1180px,100% - 48px);margin:0 auto;padding:22px 0 40px}.eyebrow{font-family:var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin:0;font-size:10px;line-height:1.5}.mono{font-family:var(--mono);letter-spacing:.04em}.muted{color:var(--muted)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.loading-screen,.error-screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-height:100dvh;padding:32px;display:flex}.loading-screen h1,.error-screen h1{letter-spacing:-.03em;margin:0;font-size:clamp(30px,5vw,52px)}.loading-screen p,.error-screen p{margin:0;line-height:1.7}.loading-orbit{width:88px;height:88px;margin-bottom:12px;position:relative}.loading-orbit span{border:1px solid #5ee7ff52;border-radius:50%;animation:1.8s linear infinite orbit;position:absolute;inset:0}.loading-orbit span:before{content:"";background:var(--cyan);width:6px;height:6px;box-shadow:0 0 12px var(--cyan);border-radius:50%;position:absolute;top:-3px;left:50%}.loading-orbit span:nth-child(2){border-color:#ff9b5457;animation-duration:1.35s;animation-direction:reverse;inset:11px}.loading-orbit span:nth-child(2):before{background:var(--orange);box-shadow:0 0 12px var(--orange)}.loading-orbit span:nth-child(3){border-color:#78f0c861;animation-duration:1s;inset:23px}.loading-orbit span:nth-child(3):before{background:var(--mint);box-shadow:0 0 12px var(--mint)}.error-screen .primary-button{margin-top:14px}.primary-button,.secondary-button,.ghost-button,.icon-button,.difficulty-button{border:1px solid var(--line);color:var(--text);cursor:pointer;background:#ffffff08;border-radius:999px;transition:transform .16s,border-color .16s,background .16s,box-shadow .16s,filter .16s}.primary-button{background:var(--accent);color:#031018;border-color:#0000;padding:12px 20px;font-weight:750;box-shadow:0 10px 28px #5ee7ff2e}.secondary-button{background:#5ee7ff12;border-color:#5ee7ff47;padding:11px 18px}.ghost-button{color:var(--muted);background:0 0;padding:10px 14px}.icon-button{color:var(--muted);background:#09152394;padding:8px 12px;font-size:12px}.primary-button:active,.secondary-button:active,.ghost-button:active,.icon-button:active,.difficulty-button:active{transform:translateY(1px)}@media (hover:hover){.primary-button:hover{filter:brightness(1.07);transform:translateY(-1px)}.secondary-button:hover,.icon-button:hover,.ghost-button:hover{border-color:var(--line-strong);color:var(--text);background:#5ee7ff14}}.topbar{justify-content:space-between;align-items:flex-start;gap:24px;padding:10px 0 34px;display:flex}.brand{min-width:0}.brand-kicker{font-family:var(--mono);letter-spacing:.22em;color:var(--cyan);font-size:10px}.brand-title{letter-spacing:-.045em;margin:8px 0;font-size:clamp(32px,4.4vw,58px);font-weight:800;line-height:1.02}.brand-sub{max-width:36rem;color:var(--muted);margin:0;font-size:14px;line-height:1.7}.topbar-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.resume-card{border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(100deg, #5ee7ff14, #091523d1 46%), var(--panel);box-shadow:var(--shadow);align-items:center;gap:18px;margin-bottom:28px;padding:14px;display:flex}.resume-card img{object-fit:cover;border:1px solid var(--line-strong);border-radius:14px;flex:none;width:92px;height:92px}.resume-body{flex:1;min-width:0}.resume-body h2{margin:4px 0;font-size:21px}.resume-body p{margin:0;font-size:12px}.mini-progress{background:#ffffff12;border-radius:999px;width:min(280px,100%);height:4px;margin-top:10px;overflow:hidden}.mini-progress span{background:var(--accent);height:100%;display:block}.resume-actions{flex-wrap:wrap;flex:none;gap:8px;display:flex}.menu-hero{grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);align-items:end;gap:28px;margin:8px 0 24px;display:grid}.menu-intro h2{letter-spacing:-.03em;margin:8px 0 10px;font-size:clamp(24px,2.8vw,38px)}.menu-intro p{margin:0;font-size:14px;line-height:1.75}.how-to{border-left:1px solid var(--line);padding-left:24px}.how-to ol{color:var(--muted);margin:8px 0 0;padding-left:20px;font-size:13px;line-height:1.85}.poster-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;display:grid}.poster-card{border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);background:linear-gradient(#0e1e30f5,#060e18f7);flex-direction:column;display:flex;position:relative;overflow:hidden}.poster-card:before{content:"";z-index:2;background:linear-gradient(90deg, transparent, var(--accent), transparent);opacity:.82;height:2px;position:absolute;inset:0 0 auto}.poster-thumb{aspect-ratio:1;background:#040b12;position:relative;overflow:hidden}.poster-thumb img{object-fit:cover;width:100%;height:100%;transition:transform .55s;display:block}.poster-scan{pointer-events:none;mix-blend-mode:multiply;background:repeating-linear-gradient(0deg,#00000029 0 1px,#0000 1px 4px);position:absolute;inset:0}.poster-body{flex-direction:column;flex:1;gap:8px;padding:18px;display:flex}.poster-body h3{letter-spacing:-.02em;margin:0;font-size:22px}.poster-description{color:var(--muted);flex:1;margin:0;font-size:12px;line-height:1.7}.difficulty-row{gap:8px;margin-top:10px;display:flex}.difficulty-button{text-align:left;border-radius:12px;flex-direction:column;flex:1;align-items:flex-start;gap:2px;padding:10px 12px;display:flex}.difficulty-button span{font-size:15px;font-weight:750}.difficulty-button small{color:var(--muted);letter-spacing:.05em;font-size:10px}.difficulty-button.is-recommended{border-color:#5ee7ff57;border-color:color-mix(in srgb, var(--accent) 46%, transparent);background:#5ee7ff14;background:color-mix(in srgb, var(--accent) 10%, transparent)}.difficulty-button.is-recommended small{color:var(--accent)}@media (hover:hover){.poster-card:hover .poster-thumb img{transform:scale(1.035)}.difficulty-button:hover{border-color:var(--line-strong);background:#ffffff0f}}.credits{border-top:1px solid var(--line);color:var(--dim);justify-content:space-between;gap:18px;margin-top:28px;padding-top:16px;font-size:11px;line-height:1.65;display:flex}.game-shell{padding-top:16px}.game-topbar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;display:flex}.game-heading{text-align:center;flex:1;min-width:0}.game-heading h1{letter-spacing:-.02em;margin:4px 0 0;font-size:clamp(20px,2.4vw,30px)}.game-top-actions{align-items:center;gap:8px;display:flex}.game-progress{color:var(--accent);font-size:13px}.game-layout{grid-template-columns:minmax(0,1fr) minmax(320px,380px);align-items:start;gap:24px;display:grid}.game-main{flex-direction:column;align-items:center;gap:12px;min-width:0;display:flex}.board-frame{border:1px solid #5ee7ff3d;border-color:color-mix(in srgb, var(--accent) 26%, transparent);background:linear-gradient(145deg,#10263aeb,#040a12f7);border-radius:28px;padding:14px;position:relative;box-shadow:0 26px 70px #00000080,inset 0 0 0 1px #ffffff08}.board-frame:before,.board-frame:after{content:"";pointer-events:none;border-color:var(--accent);opacity:.58;border-style:solid;width:34px;height:34px;position:absolute}.board-frame:before{border-width:2px 0 0 2px;border-top-left-radius:14px;top:-1px;left:-1px}.board-frame:after{border-width:0 2px 2px 0;border-bottom-right-radius:14px;bottom:-1px;right:-1px}.board{grid-template-columns:repeat(var(--cols), var(--piece-size));grid-template-rows:repeat(var(--rows), var(--piece-size));width:var(--board-size);height:var(--board-size);touch-action:manipulation;background:#06111b;border-radius:10px;transition:box-shadow .2s;display:grid;position:relative;overflow:hidden}.board-ghost{object-fit:cover;opacity:.15;filter:saturate(.82)contrast(1.04);pointer-events:none;width:100%;height:100%;transition:opacity .2s;position:absolute;inset:0}.board-ghost.is-hidden{opacity:0}.slot{width:var(--piece-size);height:var(--piece-size);outline:none;position:relative;box-shadow:inset 0 0 0 1px #5ee7ff1f}.slot[role=button]{cursor:pointer;touch-action:manipulation}.slot[role=button]:hover{background:#5ee7ff0b}.slot:focus-visible{z-index:1;outline:2px solid var(--cyan);outline-offset:-2px;box-shadow:inset 0 0 0 1px #5ee7ff59,0 0 18px #5ee7ff33}.slot.is-filled{cursor:default}.board.is-magnet{box-shadow:inset 0 0 0 2px #78f0c880,0 0 44px #78f0c824}.board.is-complete{box-shadow:inset 0 0 0 2px var(--accent), 0 0 70px #5ee7ff3d}.placed-piece{background-image:var(--poster-url);background-repeat:no-repeat;border-radius:0;width:100%;height:100%;animation:.2s ease-out snap-in}.board-caption{width:min(100%, var(--board-size));color:var(--dim);justify-content:space-between;gap:12px;font-size:11px;display:flex}.side-panel{flex-direction:column;gap:12px;min-width:0;display:flex}.panel-card{border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#091523c7;border-radius:18px;padding:14px}.panel-heading{color:var(--muted);letter-spacing:.07em;text-transform:uppercase;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;font-size:11px;display:flex}.panel-heading strong{color:var(--text);letter-spacing:0;font-size:13px}.progress-bar{background:#ffffff12;border-radius:999px;height:6px;overflow:hidden}.progress-bar>span{border-radius:inherit;background:var(--accent);background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, white));width:0;height:100%;transition:width .28s;display:block}.instruction{color:var(--muted);margin:10px 0 0;font-size:12px;line-height:1.6}.reference{align-items:center;gap:12px;display:flex}.reference img{object-fit:cover;border:1px solid var(--line);border-radius:12px;flex:none;width:74px;height:74px}.reference strong{margin-bottom:4px;display:block}.reference p{margin:0;font-size:11px;line-height:1.55}.tray-grid{grid-template-columns:repeat(var(--tray-cols), var(--tray-piece-size));gap:var(--tray-gap);justify-content:center;display:grid}.tray-cell{width:var(--tray-piece-size);height:var(--tray-piece-size);background:#ffffff06;border-radius:8px;box-shadow:inset 0 0 0 1px #ffffff09}.tray-cell.is-empty{background:#ffffff03}.piece{background-color:#0000;background-image:var(--poster-url);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;background-repeat:no-repeat;border:0;padding:0}.tray-piece{cursor:grab;border-radius:8px;width:100%;height:100%;transition:transform .14s,box-shadow .14s,opacity .14s,filter .14s;box-shadow:0 8px 18px #00000061,inset 0 0 0 1px #ffffff29}.tray-piece.is-selected{z-index:1;outline:3px solid var(--cyan);outline-offset:2px;transform:translateY(-3px)scale(1.03);box-shadow:0 14px 28px #00000080,0 0 26px #5ee7ff38}.tray-piece.is-dragging-source{opacity:.18;filter:grayscale(.5)}@media (hover:hover){.tray-piece:hover{transform:translateY(-2px);box-shadow:0 12px 24px #00000073,inset 0 0 0 1px #ffffff4d}}.game-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.drag-layer{z-index:1000;pointer-events:none;position:fixed;inset:0}.drag-piece{z-index:1001;pointer-events:none;will-change:transform;border-radius:4px;position:fixed;top:0;left:0;box-shadow:0 30px 60px #0009,0 0 0 2px #ffffff5c,0 0 34px #5ee7ff42}.drag-piece.is-near{box-shadow:0 30px 60px #0000008c, 0 0 0 3px var(--mint), 0 0 44px #78f0c88c}body.is-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.complete-overlay{z-index:1200;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;background:#02060cb8;place-items:center;padding:24px;transition:opacity .24s;display:grid;position:fixed;inset:0}.complete-overlay.is-visible{opacity:1}.complete-card{border:1px solid #5ee7ff57;border-color:color-mix(in srgb, var(--accent) 34%, transparent);text-align:center;background:linear-gradient(160deg,#102437fa,#050c15fc);border-radius:28px;width:min(560px,100%);max-height:calc(100dvh - 48px);padding:26px;position:relative;overflow:auto;box-shadow:0 40px 100px #000000a6,inset 0 0 0 1px #ffffff0a}.complete-stamp{border:1px solid #5ee7ff52;border-color:color-mix(in srgb, var(--accent) 32%, transparent);color:var(--accent);font-family:var(--mono);letter-spacing:.2em;border-radius:999px;padding:5px 10px;font-size:10px;display:inline-block}.complete-poster{object-fit:cover;border:1px solid var(--line-strong);border-radius:18px;width:150px;height:150px;margin:16px auto 14px;display:block;box-shadow:0 20px 40px #00000073}.complete-card h2{letter-spacing:-.04em;margin:6px 0;font-size:clamp(28px,5vw,42px)}.complete-card p{margin:0}.complete-time{justify-content:center;align-items:baseline;gap:10px;margin:18px 0 22px;display:flex}.complete-time span{color:var(--muted);font-size:12px}.complete-time strong{color:var(--accent);font-family:var(--mono);letter-spacing:-.04em;font-size:clamp(34px,7vw,48px)}.complete-actions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes snap-in{0%{filter:brightness(1.45);transform:scale(1.06)}to{filter:none;transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.shake{animation:.34s shake}@media (width<=1080px){.poster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=861px) and (height<=840px){.reference-card{display:none}}@media (width<=860px){.shell{width:calc(100% - 32px);padding-top:16px}.topbar{flex-direction:column;gap:16px;padding-bottom:24px}.topbar-actions{justify-content:flex-start}.menu-hero{grid-template-columns:1fr;gap:16px}.how-to{border-top:1px solid var(--line);border-left:0;padding:14px 0 0}.poster-grid{grid-template-columns:1fr}.resume-card{flex-wrap:wrap}.resume-actions{justify-content:flex-end;width:100%}.game-shell{padding-top:12px}.game-topbar{gap:8px}.game-heading{text-align:left}.game-layout{grid-template-columns:1fr;gap:14px}.reference-card{display:none}.side-panel{gap:10px}.game-actions{justify-content:center}.board-caption{font-size:10px}.credits{flex-direction:column;gap:6px}}@media (width<=860px) and (height<=700px){.board-caption{display:none}.panel-card{padding:10px}.panel-heading{margin-bottom:6px}.side-panel,.game-main{gap:8px}}@media (width<=520px){.brand-title{font-size:34px}.topbar-actions{width:100%}.topbar-actions .icon-button{text-align:center;flex:1}.poster-body{padding:14px}.game-topbar{flex-wrap:nowrap;align-items:center;gap:6px}.game-heading{flex:1;order:0;width:auto;min-width:0}.game-heading .eyebrow{display:none}.game-heading h1{text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:20px;overflow:hidden}.game-top-actions{justify-content:flex-end;gap:6px;width:auto}.game-top-actions .game-progress{display:none}.game-top-actions .icon-button{flex:none}.game-shell>.game-topbar>.ghost-button{padding:9px 11px}.complete-card{padding:20px}.complete-actions{flex-direction:column}.complete-actions button{width:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}