@charset "UTF-8";
:root { color-scheme:dark; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",sans-serif; --mint:#a1e9cc; --text:#edf4ef; --muted:#829b9c; --surface:#16292f; --n:4; --board-side:340px; --cell:85px; --photo:url('./landscape.svg'); }
* { box-sizing:border-box; } [hidden] { display:none!important; }
body { margin:0; background:#0c171d; color:var(--text); min-height:100svh; background-image:radial-gradient(ellipse at 50% 0,#213b3c66,transparent 65%); }
button,select,input { font:inherit; } button,a,select,input { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; touch-action:manipulation; } button:disabled { cursor:default; opacity:.35; }
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible { outline:2px solid var(--mint); outline-offset:4px; }
svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.app { width:min(100% - 36px,460px); margin:auto; padding-top:max(20px,env(safe-area-inset-top)); padding-bottom:max(18px,env(safe-area-inset-bottom)); }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.brand { display:flex; align-items:center; gap:11px; color:var(--text); text-decoration:none; font-size:21px; letter-spacing:3px; font-weight:600; line-height:1.2; }
.brand small { display:block; font-size:8px; letter-spacing:2.7px; color:var(--muted); font-weight:500; margin-top:4px; }
.brand-icon { display:grid; grid-template-columns:repeat(2,11px); gap:3px; transform:rotate(-7deg); }
.brand-icon i { width:11px; height:11px; border-radius:2px; background:var(--mint); }.brand-icon i:nth-child(2){opacity:.55}.brand-icon i:nth-child(3){opacity:.75}.brand-icon i:last-child{transform:translate(3px,3px);background:transparent;border:1px solid var(--mint)}
.header-actions {display:flex;gap:6px}.icon-button { width:42px;height:42px;border-radius:50%;border:1px solid #48636266;background:#172a2f77;color:#bdd2ca;display:grid;place-items:center; }
.icon-button[aria-expanded=true] { background:#2c4945;color:var(--mint); }
.intro { min-height:83px;margin-bottom:14px; }.eyebrow { font-size:9px;letter-spacing:2px;color:var(--mint);margin-bottom:9px; }.intro h1 { font-size:clamp(18px,5vw,24px);letter-spacing:-1px;font-weight:600;margin:0 0 8px; }.intro p { font-size:12px;color:var(--muted);margin:0;line-height:1.5; }.intro.won .eyebrow { color:#f5ce8b; }.intro.won h1 {color:var(--mint);}
.stats { display:grid;grid-template-columns:repeat(3,1fr);padding:12px 0;border-top:1px solid #354b4d;border-bottom:1px solid #354b4d;margin-bottom:22px; }.stats>div {text-align:center;border-right:1px solid #354b4d;display:flex;align-items:center;justify-content:center;gap:12px;}.stats>div:last-child{border:0}.stats span{font-size:10px;color:var(--muted)}.stats strong{font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.4px}.stats small{font-size:10px;color:var(--muted);margin-left:4px}
.play-area { width:100%; }.stage { position:relative;width:var(--board-side);height:calc(var(--board-side) + var(--cell) + 25px);margin:auto;isolation:isolate; }.board-background{position:absolute;top:0;left:0;width:var(--board-side);height:var(--board-side);border:1px solid #60837755;background:#0a1419;border-radius:9px;box-shadow:0 8px 30px #0003,0 0 0 5px #29413e55;}
.tile { position:absolute;top:0;left:0;width:calc(var(--cell) - 4px);height:calc(var(--cell) - 4px);border:0;border-radius:4px;background-image:var(--photo);background-repeat:no-repeat;padding:0;box-shadow:0 2px 4px #0003;transition:transform 160ms cubic-bezier(.2,.7,.25,1),filter .15s;overflow:hidden;opacity:1!important;cursor:default; }
.tile.movable { cursor:pointer; }.tile.movable:hover { filter:brightness(1.1); }.tile.movable:active {filter:brightness(1.2)}.tile .number { position:absolute;top:5px;left:5px;min-width:19px;height:19px;padding:0 4px;display:grid;place-items:center;border-radius:5px;background:#0c222899;color:#f8fcf8;font-size:10px;font-variant-numeric:tabular-nums;backdrop-filter:blur(6px); }.hide-numbers .number {display:none;}.tile.last { outline:1px solid var(--mint);outline-offset:2px;box-shadow:0 0 0 6px #29413e55,0 4px 15px #0003; }.stage.returning .tile.last {transition:transform 500ms cubic-bezier(.2,.7,.25,1);}.stage.solved .tile{visibility:hidden;}.complete-image{position:absolute;top:0;left:0;width:var(--board-side);height:var(--board-side);background:var(--photo) center/cover;border-radius:6px;z-index:2;box-shadow:0 0 24px #a1e9cc15;}
.dock-label { position:absolute;top:calc(var(--board-side) + 23px);left:0;width:calc(var(--board-side) - var(--cell) - 16px);text-align:right;color:var(--muted);font-size:10px;letter-spacing:.3px; }.dock-label span{color:var(--mint);margin-left:5px;font-size:20px;vertical-align:middle}.hint { font-size:10px;color:var(--muted);text-align:center;line-height:1.6;margin:5px 0 19px;min-height:16px; }
.game-actions {display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:8px}.game-actions button{height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;}.secondary{background:#1a2e33;border:1px solid #3d595866;color:#c1d5cf}.primary{background:var(--mint);color:#122e2a;border:1px solid var(--mint);font-weight:650}.primary svg{width:18px}.game-actions .secondary svg{width:18px}
footer{display:flex;align-items:center;gap:6px;font-size:9px;color:var(--muted);margin-top:18px;letter-spacing:.2px}.live-dot{width:4px;height:4px;background:var(--mint);border-radius:50%}.edition{margin-left:auto;font-size:7px;letter-spacing:1.5px;opacity:.65}.install-hint{color:#6e898c;font-size:9px;text-align:center;margin:14px 0 0;line-height:1.7}.settings{border:1px solid #3e5e5966;border-radius:12px;padding:8px 16px 14px;background:#172c31;margin-bottom:22px}.setting-row{display:flex;align-items:center;justify-content:space-between;min-height:47px;border-bottom:1px solid #38514f55;font-size:12px}.setting-row select{border:1px solid #45655e;background:#203b3c;color:var(--text);padding:7px 12px;border-radius:7px}.setting-row input{width:18px;height:18px;accent-color:var(--mint)}.settings p{font-size:10px;color:var(--muted);line-height:1.5}.text-button{border:0;background:none;color:var(--mint);padding:12px 0 2px;font-size:12px}.preview{display:flex;gap:12px;align-items:center;justify-content:center;margin:4px 0 18px;color:var(--muted);font-size:11px}.preview img{width:112px;height:112px;border-radius:7px;border:1px solid #496c5f;object-fit:cover}.notice{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(90vw,420px);border:1px solid #709689;background:#203e3a;color:#e0f7eb;font-size:12px;padding:15px 18px;border-radius:12px;box-shadow:0 10px 50px #0008;line-height:1.6;z-index:50}#celebration{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:20}
html:fullscreen {background:#0c171d;overflow:auto}html:fullscreen .install-hint{display:none}.no-transitions .tile{transition:none!important}
@media(min-width:600px){.app{margin-top:24px;padding:26px 24px 22px;width:480px;border:1px solid #3b555455;border-radius:24px;background:#101e24;box-shadow:0 30px 120px #0005}.topbar{margin-bottom:24px}}
@media(max-height:720px){.app{padding-top:max(12px,env(safe-area-inset-top))}.topbar{margin-bottom:15px}.intro{margin-bottom:6px;min-height:72px}.stats{margin-bottom:15px;padding:10px 0}.hint{margin-bottom:12px}.game-actions button{height:44px}footer{margin-top:12px}.install-hint{margin-top:9px}}
@media(prefers-reduced-motion:reduce){.tile{transition:none!important}#celebration{display:none}}