:root{--bg: #fff;--soft: #f6f3fa;--fg: #2a2433;--muted: #5d566b;--line: #e6e0ee;--accent: #6a4c9c;--accent-dk: #4e3577;--accent-fg: #fff;--lav: #f1ecf9;--gold: #e0a930;--table: #f4eff9;color-scheme:light}*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Noto Sans TC,PingFang TC,sans-serif;-webkit-tap-highlight-color:transparent}a{color:var(--accent)}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.top{display:flex;align-items:center;gap:16px;max-width:1000px;margin:0 auto;padding:12px 16px}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px;color:var(--accent);text-decoration:none;white-space:nowrap}.logo{width:34px;height:34px;flex:none}.top-right{display:flex;align-items:center;gap:10px;margin-left:auto}.lang select{font:inherit;font-size:14px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--fg)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:700;cursor:pointer;padding:9px 20px;border-radius:14px;border:2px solid var(--accent);background:#fff;color:var(--accent);box-shadow:0 4px 0 var(--line);transition:transform .1s,box-shadow .1s}.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--line)}.btn.primary{background:var(--accent);color:var(--accent-fg);box-shadow:0 4px 0 var(--accent-dk)}.btn.primary:active:not(:disabled){box-shadow:0 1px 0 var(--accent-dk)}.btn.big{padding:13px 28px;font-size:18px}.btn.icon{border-radius:999px;padding:6px 12px;border-width:1px;border-color:var(--line);color:var(--fg);box-shadow:none}.btn:disabled{opacity:.45;cursor:default}.main:not(.play){max-width:1000px;margin:0 auto;padding:0 16px 48px}.lobby{display:grid;gap:20px}.lobby h1{font-size:clamp(28px,5vw,40px);line-height:1.15;margin:0 0 6px;color:var(--accent);font-weight:900}.lobby h2{font-size:22px;margin:0 0 6px;color:var(--accent)}.lead{color:var(--muted);margin:0 0 14px}.l-card{border-radius:20px;padding:20px;background:var(--soft)}.l-daily{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:center;background:var(--lav)}.l-daily p{margin:0 0 10px;color:var(--muted)}.l-daily .l-result{color:var(--fg);font-weight:700}.l-daily .l-streak{color:var(--accent-dk);font-weight:700}.l-daily-art svg{width:100%;height:auto;max-height:220px}.l-resume{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;background:#fdf7e3}.l-resume p{margin:0;color:var(--muted)}.l-layouts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}.l-layout{display:flex;flex-direction:column;gap:4px;text-align:left;font:inherit;color:var(--fg);cursor:pointer;padding:14px;border-radius:18px;background:#fff;border:1px solid var(--line);transition:transform .15s,border-color .15s}.l-layout:hover{border-color:var(--accent);transform:translateY(-2px)}.l-layout strong{font-size:19px}.l-layout em{font-style:normal;color:var(--accent);font-weight:700;font-size:14px}.l-desc{color:var(--muted);font-size:14px;line-height:1.45}.l-prev svg{display:block;width:100%;height:96px}.l-records table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:15px}.l-records th,.l-records td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line)}.l-records th{background:var(--accent);color:#fff;font-size:13px}.l-records tr:last-child td{border-bottom:0}.l-records td:not(:first-child),.l-records th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}.l-note{color:var(--muted);font-size:14px;margin:10px 0 0}@media(max-width:640px){.l-daily{grid-template-columns:1fr}.l-daily-art{order:-1}.l-layouts{grid-template-columns:1fr 1fr}.l-prev svg{height:70px}.brand span{font-size:18px}}body.playing{background:var(--table);overflow:hidden;overscroll-behavior:none}.main.play{height:100vh;height:100dvh}.game{display:flex;flex-direction:column;height:100%;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.hud{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#fff;border-bottom:1px solid var(--line)}.hud-title{font-weight:800;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.hud-stats{display:flex;gap:14px;margin:0 0 0 auto}.hud-stats div{text-align:center;line-height:1.15}.hud-stats dt{font-size:11px;color:var(--muted)}.hud-stats dd{margin:0;font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}.hud-stats dd.zero{color:#b8322a}.hud-btn{font:inherit;font-size:14px;font-weight:700;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--fg);cursor:pointer}.hud-btn.icon{padding:6px 10px}.board-box{position:relative;flex:1;min-height:0;margin:10px}.board{position:absolute;left:50%;top:50%;transform-origin:center center}.tile{position:absolute;padding:0;margin:0;border:0;background:none;cursor:pointer;touch-action:manipulation;transition:transform .12s,opacity .25s,filter .2s}.tile img{display:block;width:100%;height:100%;pointer-events:none;user-select:none}.tile:before{content:"";position:absolute;left:2px;top:4px;width:58px;height:86px;border-radius:8px;box-shadow:3px 4px 6px #37235547;z-index:-1}.tile:after{content:"";position:absolute;left:1px;top:1px;width:58px;height:78px;border-radius:7.5px;pointer-events:none;transition:background .2s,box-shadow .15s}.tile.blocked{cursor:default}.tile.dim:after{background:#46375f52}.tile.free:hover:after{box-shadow:inset 0 0 0 2px #6a4c9c73}.tile.sel{transform:translateY(-4px)}.tile.sel:after{box-shadow:inset 0 0 0 4px var(--accent);background:#6a4c9c1f}.tile.hint:after{animation:hint 1s ease-in-out infinite}@keyframes hint{0%,to{box-shadow:inset 0 0 0 3px var(--gold),0 0 #e0a93000}50%{box-shadow:inset 0 0 0 4px var(--gold),0 0 14px 4px #e0a930bf}}.tile.shake{animation:shake .35s}@keyframes shake{20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}.tile.leaving{opacity:0;transform:translateY(-14px) scale(1.05);pointer-events:none}.tile:focus-visible{outline:3px solid var(--accent);outline-offset:1px;border-radius:8px}.toolbar{display:flex;justify-content:center;gap:8px;padding:8px 10px 10px;background:#fff;border-top:1px solid var(--line)}.tool{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:64px;font:inherit;font-size:13px;font-weight:700;color:var(--accent);padding:6px 10px;border-radius:14px;border:2px solid var(--accent);background:#fff;cursor:pointer;box-shadow:0 3px 0 var(--line)}.tool span{font-size:18px;line-height:1.1}.tool:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--line)}.tool:disabled{opacity:.4;cursor:default}.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%);z-index:50;max-width:min(92vw,460px);padding:10px 16px;border-radius:14px;background:var(--fg);color:#fff;font-size:14px;text-align:center;box-shadow:0 6px 20px #0003}@media(max-width:520px){.hud{padding:6px 8px;gap:6px}.hud-title{font-size:14px}.hud-stats{gap:10px}.hud-stats dd{font-size:15px}.board-box{margin:6px 2px}.tool{min-width:0;flex:1;padding:6px 4px}}.modal{border:0;border-radius:22px;padding:0;max-width:min(92vw,440px);width:100%;color:var(--fg);box-shadow:0 20px 60px #2814464d}.modal::backdrop{background:#2a243373}.modal-body{padding:22px}.modal h2{margin:0 0 10px;color:var(--accent);font-size:22px}.modal-actions{text-align:right;margin:16px 0 0}.check{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line);cursor:pointer}.check input{width:20px;height:20px;accent-color:var(--accent);margin-top:3px;flex:none}.check small{display:block;color:var(--muted);font-size:13px}.end-modal{text-align:center}.end-badge{font-size:44px;line-height:1;margin:4px 0 8px}.end-sub{color:var(--muted);margin:0 0 6px;font-variant-numeric:tabular-nums}.end-best{color:var(--accent-dk);font-weight:800;margin:0 0 6px}.end-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}.end-actions .btn{width:100%}@media(prefers-reduced-motion:reduce){.tile,.btn,.tool{transition:none}.tile.hint:after{animation:none;box-shadow:inset 0 0 0 4px var(--gold)}.tile.shake{animation:none}}