:root{--c-bg:#fff8f0;--c-surface:#fff;--c-primary:#ff9b85;--c-mint:#7bd3c0;--c-butter:#ffd97d;--c-sky:#8ecae6;--c-text:#4a4238;--c-line:#efe3d6;--c-muted:#9a8e80;--r-card:24px;--r-tile:10px;--r-pill:999px;--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--shadow-1:0 2px 8px #4a423814;--shadow-2:0 8px 24px #4a423829;--tap:44px;--btn-h:56px;--font:system-ui, -apple-system, "PingFang TC", "Noto Sans TC", sans-serif}*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{background:var(--c-bg);color:var(--c-text);font-family:var(--font);-webkit-font-smoothing:antialiased;overscroll-behavior:none;font-size:16px;line-height:1.5}#app{max-width:560px;min-height:100%;padding:calc(env(safe-area-inset-top) + var(--s-4)) calc(env(safe-area-inset-right) + var(--s-4)) calc(env(safe-area-inset-bottom) + var(--s-4)) calc(env(safe-area-inset-left) + var(--s-4));flex-direction:column;margin:0 auto;display:flex}h1,h2{letter-spacing:.02em;margin:0;font-weight:800}h1{font-size:28px}h2{color:var(--c-muted);font-size:18px}img{max-width:100%;display:block}.btn,.icon-btn,.difficulty__card,.photo-card{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.btn{min-height:var(--btn-h);padding:0 var(--s-5);border-radius:var(--r-pill);font:inherit;cursor:pointer;border:none;font-size:17px;font-weight:700;transition:transform .12s ease-out,filter .12s ease-out}.btn:active{transform:scale(.96)}.btn--primary{background:var(--c-primary);color:#fff;box-shadow:var(--shadow-1)}.btn--ghost{color:var(--c-muted);background:0 0}.icon-btn{width:var(--tap);height:var(--tap);border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-text);box-shadow:var(--shadow-1);cursor:pointer;border:none;place-items:center;font-size:20px;display:grid}.icon-btn:active{transform:scale(.92)}.dialog-overlay{z-index:100;padding:var(--s-5);background:#4a423866;place-items:center;display:grid;position:fixed;inset:0}.dialog{background:var(--c-surface);border-radius:var(--r-card);width:100%;max-width:340px;box-shadow:var(--shadow-2)}.dialog__body{padding:var(--s-5);gap:var(--s-3);flex-direction:column;display:flex}.dialog__title{color:var(--c-text);font-size:20px}.dialog__message{color:var(--c-muted);margin:0}.dialog__actions{gap:var(--s-2);margin-top:var(--s-2);justify-content:flex-end;display:flex}@media (prefers-reduced-motion:reduce){.btn,.icon-btn{transition:none}.btn:active,.icon-btn:active{transform:none}}.tile-grid{--gap:3px;grid-template-columns:repeat(var(--n), 1fr);gap:var(--gap);aspect-ratio:1;width:min(92vw,60vh,560px);padding:var(--gap);border-radius:var(--r-card);background:var(--c-line);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;margin:0 auto;display:grid}.tile{border-radius:var(--r-tile);background-color:var(--c-surface);background-image:var(--puzzle-image);background-size:calc(var(--n) * 100% + (var(--n) - 1) * var(--gap)) calc(var(--n) * 100% + (var(--n) - 1) * var(--gap));background-position:var(--bg-x) var(--bg-y);touch-action:none;cursor:grab;box-shadow:var(--shadow-1);background-repeat:no-repeat;border:none;padding:0}.tile:focus-visible{outline:3px solid var(--c-sky);outline-offset:2px}.tile--selected{outline:4px solid var(--c-mint);outline-offset:-4px;animation:.3s ease-out tile-pop}.tile--hover{outline:4px dashed var(--c-butter);outline-offset:-4px}.tile--dragging{z-index:10;cursor:grabbing;box-shadow:var(--shadow-2)}@keyframes tile-pop{0%{transform:scale(1)}50%{transform:scale(1.06)}to{transform:scale(1)}}@media (prefers-reduced-motion:reduce){.tile--selected{animation:none}}.screen{gap:var(--s-4);flex-direction:column;flex:1;display:flex}.screen__hint{color:var(--c-muted);text-align:center}.game__header{align-items:center;gap:var(--s-3);display:flex}.game__badge{text-align:center;flex:1;font-size:18px;font-weight:800}.game__peek{min-height:var(--tap);padding:0 var(--s-3);background:var(--c-surface);box-shadow:var(--shadow-1);color:var(--c-text);font-size:15px}.game__stats{justify-content:center;gap:var(--s-4);color:var(--c-muted);font-variant-numeric:tabular-nums;display:flex}.game .tile-grid{margin-block:auto}.game__footer{justify-content:center;display:flex}.game--merged .tile-grid{--gap:0px;background:0 0;padding:0}.game--merged .tile{box-shadow:none;border-radius:0;transition:border-radius .3s ease-out,box-shadow .3s ease-out}.game__peek-overlay{z-index:50;padding:var(--s-5);pointer-events:none;background:#fff8f0f5;place-items:center;display:grid;position:fixed;inset:0}.game__peek-overlay[hidden]{display:none}.game__peek-overlay img{aspect-ratio:1;object-fit:cover;border-radius:var(--r-card);width:min(90vw,90vh,560px);box-shadow:var(--shadow-2)}.win{text-align:center;justify-content:center;align-items:center}.win__title{color:var(--c-primary);font-size:32px}.win__figure img{aspect-ratio:1;object-fit:cover;border-radius:var(--r-card);width:min(80vw,45vh,420px);box-shadow:var(--shadow-2)}.win__stats{color:var(--c-muted);margin:0}.win__actions{gap:var(--s-2);flex-direction:column;width:100%;max-width:280px;display:flex}.win__confetti{pointer-events:none;position:fixed;inset:0;overflow:hidden}.win__confetti i{border-radius:3px;width:10px;height:14px;animation:2.6s linear infinite confetti-fall;position:absolute;top:-12px}@keyframes confetti-fall{0%{opacity:1;transform:translateY(-10vh)rotate(0)}to{opacity:.9;transform:translateY(110vh)rotate(540deg)}}.screen__header{align-items:center;gap:var(--s-3);display:flex}.difficulty__list{gap:var(--s-3);grid-template-columns:repeat(2,1fr);display:grid}.difficulty__card{align-items:center;gap:var(--s-1);padding:var(--s-5) var(--s-3);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-1);color:var(--c-text);font:inherit;cursor:pointer;border:none;flex-direction:column;display:flex}.difficulty__card:active{transform:scale(.97)}.difficulty__icon{font-size:40px;line-height:1}.difficulty__label{font-size:18px;font-weight:800}.difficulty__size{color:var(--c-muted);font-variant-numeric:tabular-nums}.home__header{justify-content:space-between;align-items:center;display:flex}.home__section{gap:var(--s-3);flex-direction:column;display:flex}.photo-grid{gap:var(--s-3);grid-template-columns:repeat(2,1fr);display:grid}.photo-card{gap:var(--s-2);padding:var(--s-2);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-1);color:var(--c-text);font:inherit;cursor:pointer;min-height:var(--tap);border:none;flex-direction:column;display:flex;position:relative}.photo-card img{aspect-ratio:1;object-fit:cover;border-radius:var(--r-tile);background:var(--c-line);width:100%}.photo-card__caption{font-size:14px;font-weight:700}.photo-card--add{aspect-ratio:1;border:3px dashed var(--c-primary);box-shadow:none;color:var(--c-primary);background:0 0;justify-content:center;align-items:center;font-size:32px}.photo-card__wrap{position:relative}.photo-card__delete{background:var(--c-primary);color:#fff;position:absolute;top:-6px;right:-6px}.resume-banner{justify-content:space-between;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-card);background:var(--c-butter);font-weight:700;display:flex}.resume-banner .btn{min-height:var(--tap);padding:0 var(--s-4);font-size:15px}.settings__row{justify-content:space-between;align-items:center;gap:var(--s-3);min-height:var(--tap);cursor:pointer;display:flex}.settings__label{font-weight:700;display:block}.settings__hint{color:var(--c-muted);font-size:13px;display:block}.settings__toggle{width:28px;height:28px;accent-color:var(--c-primary)}.crop{align-items:center}.crop__frame{aspect-ratio:1;border-radius:var(--r-card);background:var(--c-line);width:min(86vw,50vh,420px);box-shadow:var(--shadow-2);touch-action:none;cursor:grab;position:relative;overflow:hidden}.crop__image{transform-origin:0 0;-webkit-user-select:none;user-select:none;pointer-events:none;max-width:none;position:absolute;top:0;left:0}.crop__actions{justify-content:center;width:100%;margin-top:auto;display:flex}.install-banner{justify-content:space-between;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-card);background:var(--c-mint);font-size:14px;font-weight:700;display:flex}.install-banner .btn{min-height:var(--tap);padding:0 var(--s-4);flex-shrink:0;font-size:15px}
