:root{color-scheme:dark;--ink:#17191d;--panel:rgba(24,27,32,.94);--panel-2:rgba(37,40,46,.94);--text:#f5f0e8;--muted:#c8c3bb;--accent:#d8b06a;--accent-2:#f1d69c;--board-border:#e0c38c;--finished-width:1040px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;color:var(--text);font-family:Georgia,"Times New Roman",serif}html{background:#d8d4cd}body{min-height:100vh;overflow-x:hidden;background:radial-gradient(ellipse at 18% 12%,rgba(255,255,255,.92) 0 7%,transparent 19%),radial-gradient(ellipse at 83% 76%,rgba(255,255,255,.5) 0 5%,transparent 18%),repeating-linear-gradient(118deg,transparent 0 42px,rgba(97,102,109,.11) 43px 45px,transparent 46px 102px),repeating-linear-gradient(24deg,transparent 0 88px,rgba(255,255,255,.24) 89px 92px,transparent 93px 168px),linear-gradient(135deg,#ece9e3 0%,#cfcac2 42%,#e5e1da 70%,#c5c1bb 100%);background-attachment:fixed}body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.52;background:linear-gradient(104deg,transparent 0 27%,rgba(105,108,115,.18) 27.4%,transparent 28.1% 63%,rgba(91,95,103,.14) 63.4%,transparent 64.2%),linear-gradient(13deg,transparent 0 51%,rgba(255,255,255,.36) 51.4%,transparent 52%);mix-blend-mode:multiply}button,input{font:inherit}.app-shell{position:relative;z-index:1;width:min(1320px,calc(100% - 24px));margin:0 auto;padding:18px 0 38px}.topbar{display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(300px,auto);gap:18px;align-items:center;padding:14px 18px;border:1px solid rgba(255,255,255,.13);border-radius:15px;background:linear-gradient(180deg,rgba(43,46,52,.96),rgba(21,23,28,.97));box-shadow:0 12px 34px rgba(25,27,31,.28),inset 0 1px 0 rgba(255,255,255,.05)}h1{margin:0;font-size:clamp(1.45rem,2.6vw,2.15rem);letter-spacing:.015em}.topbar p{margin:3px 0 0;color:var(--muted);font-size:.95rem}.hud{display:flex;gap:9px}.stat{min-width:100px;padding:8px 11px;text-align:center;border-radius:10px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08)}.stat .label{display:block;margin-bottom:3px;color:var(--muted);font-size:.66rem;letter-spacing:.14em}.stat strong{font-variant-numeric:tabular-nums;font-size:1.05rem}.top-actions{display:grid;justify-items:end;gap:8px}.controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}.controls button,.completion-panel button,.size-options button,.music-toggle{border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:9px 13px;color:#211b12;background:linear-gradient(#f1d59d,#d3a85e);cursor:pointer;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 4px 12px rgba(0,0,0,.18)}.controls button:hover,.completion-panel button:hover,.size-options button:hover,.music-toggle:hover{filter:brightness(1.06)}button:disabled{opacity:.45;cursor:default;filter:none!important}.music-control{display:flex;align-items:center;gap:9px;padding:6px 8px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(0,0,0,.17)}.music-toggle{min-width:92px;padding:7px 10px}.music-toggle[aria-pressed="false"]{background:rgba(255,255,255,.09);color:var(--text)}.volume-control{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.78rem}.volume-control input{width:112px;accent-color:var(--accent);cursor:pointer}.game-wrap{margin-top:16px;overflow-x:auto;padding:6px 6px 18px}.game-area{position:relative;margin:0 auto;min-width:760px;user-select:none;touch-action:none;transition:opacity .22s ease,transform .22s ease}.game-area.finishing{opacity:0;transform:scale(1.018)}.board{position:absolute;left:0;top:0;overflow:hidden;border:3px solid var(--board-border);border-radius:8px;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),#1b1d20;box-shadow:0 14px 36px rgba(24,27,31,.35),inset 0 0 0 1px rgba(0,0,0,.65)}.board::after{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(255,255,255,.014)}.tray-label{position:absolute;left:4px;font-size:.88rem;color:#53565c;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px rgba(255,255,255,.4)}.tray-backdrop{position:absolute;left:0;border-radius:12px;background:radial-gradient(circle at 25% 15%,rgba(255,255,255,.05),transparent 34%),rgba(31,33,38,.89);border:1px solid rgba(255,255,255,.13);box-shadow:0 8px 24px rgba(47,49,54,.18),inset 0 1px 18px rgba(0,0,0,.25)}.piece{position:absolute;overflow:visible;cursor:grab;filter:drop-shadow(0 3px 3px rgba(0,0,0,.43));touch-action:none;z-index:5}.piece.dragging{cursor:grabbing;z-index:1000!important;filter:drop-shadow(0 8px 9px rgba(0,0,0,.55))}.piece.locked{cursor:default;filter:none;z-index:2!important}.piece path.piece-outline{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1.05;vector-effect:non-scaling-stroke;pointer-events:none}.preview-image{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%) scale(.94);width:min(88vw,1100px);max-height:86vh;object-fit:contain;z-index:4000;border:4px solid #e7c67f;border-radius:10px;box-shadow:0 18px 70px rgba(0,0,0,.58);opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease,visibility .15s;pointer-events:none}.preview-image.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}.completion-stage{width:min(1300px,100%);margin:20px auto 0;display:flex;justify-content:center;align-items:center;gap:24px;opacity:0;transform:translateY(8px);transition:opacity .28s ease,transform .28s ease}.completion-stage[hidden]{display:none}.completion-stage.show{opacity:1;transform:translateY(0)}.finished-picture-wrap{width:min(var(--finished-width),calc(100% - 270px));transform:scale(.985);transform-origin:center;animation:finishedZoom .55s ease forwards}.finished-picture{display:block;width:100%;height:auto;border:3px solid var(--board-border);border-radius:9px;box-shadow:0 18px 48px rgba(35,37,42,.33)}@keyframes finishedZoom{to{transform:scale(1.025)}}.completion-panel{flex:0 0 230px;padding:18px;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:linear-gradient(180deg,rgba(43,46,52,.98),rgba(21,23,28,.98));box-shadow:0 14px 34px rgba(27,29,33,.30)}.completion-panel h2{margin:0 0 14px;font-size:1.35rem}.completed-puzzle-name{margin:-2px 0 12px;color:var(--accent-2);font-size:.95rem;letter-spacing:.04em}#sizeSceneName{margin-bottom:8px;color:var(--accent-2);font-size:1rem}.completion-stat{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid rgba(255,255,255,.08);color:var(--muted)}.completion-stat strong{color:var(--text);font-variant-numeric:tabular-nums}.completion-panel button{width:100%;margin-top:9px}.completion-panel button.secondary{background:rgba(255,255,255,.08);color:var(--text)}.size-overlay{position:fixed;inset:0;z-index:6000;display:grid;place-items:center;padding:20px;background:rgba(28,30,34,.72);backdrop-filter:blur(6px)}.size-overlay[hidden]{display:none}.size-card{width:min(920px,100%);max-height:88vh;overflow-y:auto;padding:30px;text-align:center;border:2px solid #dfbf80;border-radius:17px;background:linear-gradient(180deg,#35383e,#1e2025);box-shadow:0 22px 60px rgba(0,0,0,.42)}.size-brand{margin-bottom:13px;color:var(--accent-2);font-size:1.05rem;letter-spacing:.05em;text-transform:uppercase}.size-card h2{margin:0 0 18px;font-size:2rem}.size-card p{margin:0 0 20px;color:var(--muted)}.size-card .music-note{margin:18px 0 0;font-size:.8rem}.picker-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;text-align:left}.picker-label{margin:0 0 10px;color:var(--accent-2);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}.picker-sizes{border-left:1px solid rgba(255,255,255,.12);padding-left:26px}.picker-sizes #sizeSceneName{margin:0 0 16px;color:var(--text);font-weight:700}.puzzle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;max-height:420px;overflow-y:auto;padding-right:4px}.puzzle-thumb{position:relative;padding:0;border:2px solid rgba(255,255,255,.14);border-radius:9px;overflow:hidden;cursor:pointer;background:#16181c;aspect-ratio:16 / 9;box-shadow:0 4px 12px rgba(0,0,0,.18)}.puzzle-thumb img{display:block;width:100%;height:100%;object-fit:cover}.puzzle-thumb:hover{border-color:rgba(223,191,128,.55)}.puzzle-thumb.selected{border-color:#dfbf80;box-shadow:0 0 0 2px rgba(223,191,128,.5),0 4px 12px rgba(0,0,0,.28)}.puzzle-thumb .thumb-name{position:absolute;left:0;right:0;bottom:0;padding:4px 6px;font-size:.62rem;line-height:1.2;font-weight:700;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,0))}.puzzle-thumb .thumb-check{position:absolute;top:5px;right:5px;width:18px;height:18px;border-radius:50%;background:#dfbf80;color:#211b12;font-size:.68rem;font-weight:900;display:none;align-items:center;justify-content:center}.puzzle-thumb.selected .thumb-check{display:flex}.size-options{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.size-options button:last-child{grid-column:1 / -1}.size-options button{padding:14px 8px;font-size:1.08rem}.load-error{padding:2rem;color:#2b2d32}.game-area,.piece,.piece image,.finished-picture,.preview-image{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}@media (max-width:1120px){.topbar{grid-template-columns:1fr auto}.top-actions{grid-column:1 / -1;width:100%;grid-template-columns:1fr auto;align-items:center}.music-control{justify-self:start}}@media (max-width:780px){.topbar{grid-template-columns:1fr}.hud{justify-content:flex-start;flex-wrap:wrap}.top-actions{grid-template-columns:1fr;justify-items:stretch}.music-control{justify-self:stretch;justify-content:space-between}.controls{justify-content:flex-start}.completion-stage{flex-direction:column;align-items:stretch}.finished-picture-wrap{width:100%}.completion-panel{flex-basis:auto;width:min(440px,100%);margin:0 auto}.picker-grid{grid-template-columns:1fr}.picker-sizes{border-left:none;padding-left:0;border-top:1px solid rgba(255,255,255,.12);padding-top:20px;margin-top:20px}.puzzle-grid{grid-template-columns:repeat(3,1fr);max-height:280px}.size-options{grid-template-columns:repeat(2,1fr)}.size-options button:last-child{grid-column:1 / -1}}.home-btn{position:fixed;right:16px;bottom:16px;z-index:20;display:flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;background:rgba(23,25,29,.75);border:1px solid var(--accent);color:var(--accent);text-decoration:none;font-size:13px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.35)}.home-btn:hover{opacity:.82}@media(max-width:760px){.home-btn{top:12px;right:12px;bottom:auto;padding:7px 12px;font-size:12px}}