@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap";:root{--bg-mat:#5c4030;--toolbar-bg:#161210e0;--toolbar-border:#ffffff1f;--toolbar-text:#e2e8f0;--toolbar-hover:#ffffff24;--toolbar-active:#e69d45;--gold-accent:#f59e0b;--gold-hover:#d97706;--card-bg:#1a1613f5;--card-border:#ffffff26;--font-main:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;--font-heading:"Outfit", var(--font-main)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{width:100%;height:100%;font-family:var(--font-main);color:var(--toolbar-text);-webkit-user-select:none;user-select:none;background-color:#1a1614;overflow:hidden}#app{flex-direction:column;width:100vw;height:100vh;display:flex;position:relative;overflow:hidden}.tabletop-toolbar{background:var(--toolbar-bg);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--toolbar-border);z-index:50;justify-content:space-between;align-items:center;min-height:36px;padding:.2rem .65rem;display:flex;box-shadow:0 2px 10px #00000059}.toolbar-left,.toolbar-center,.toolbar-right{align-items:center;gap:.35rem;display:flex}.tb-btn{color:#cbd5e1;cursor:pointer;font-size:.78rem;font-weight:600;font-family:var(--font-main);background:0 0;border:1px solid #0000;border-radius:5px;justify-content:center;align-items:center;gap:.3rem;padding:.25rem .5rem;transition:all .15s;display:inline-flex}.tb-btn:hover{background:var(--toolbar-hover);color:#fff}.tb-btn.active{border-color:var(--gold-accent);color:var(--gold-accent);background:#f59e0b33}.tb-btn.highlight-btn{color:#fbbf24;background:#f59e0b26;border-color:#f59e0b66}.tb-btn.highlight-btn:hover{color:#fff;background:#f59e0b4d}.tb-icon{vertical-align:middle;stroke:currentColor;display:inline-block}.piece-count-selector{border:1px solid var(--toolbar-border);background:#00000059;border-radius:6px;align-items:center;margin-left:.4rem;padding:2px;display:flex}.piece-count-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:.2rem .5rem;font-size:.78rem;font-weight:700;transition:all .15s}.piece-count-btn:hover{color:#f8fafc}.piece-count-btn.active{background:var(--gold-accent);color:#1e1610}.modal-piece-btn,.staging-diff-btn,.share-diff-btn{color:#cbd5e1;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff26;border-radius:6px;align-items:center;gap:.3rem;padding:.35rem .65rem;font-size:.82rem;font-weight:700;transition:all .15s;display:inline-flex}.modal-piece-btn:hover,.staging-diff-btn:hover,.share-diff-btn:hover{color:#fff;background:#ffffff26}.modal-piece-btn.active,.staging-diff-btn.active,.share-diff-btn.active{background:var(--gold-accent);border-color:var(--gold-accent);color:#1e1610}.diff-tier{opacity:.8;border-left:1px solid;margin-left:.15rem;padding-left:.3rem;font-size:.68rem;font-weight:600}.creation-staging-card{background:#f59e0b0f;border:1px solid #f59e0b4d;border-radius:10px;margin-bottom:1.25rem;padding:1rem;animation:.2s ease-out fadeIn}.staging-header{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;margin-bottom:.75rem;padding-bottom:.4rem;display:flex}.staging-title{font-family:var(--font-heading);color:#fbbf24;font-size:.95rem;font-weight:700}.staging-cancel-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;font-size:1.3rem;line-height:1}.staging-cancel-btn:hover{color:#fff}.staging-body{align-items:flex-start;gap:1rem;display:flex}.staging-thumb-wrap{background:#000;border:1px solid #ffffff26;border-radius:8px;flex-shrink:0;width:100px;height:100px;overflow:hidden}.staging-thumbnail{object-fit:cover;width:100%;height:100%;display:block}.staging-details{flex-direction:column;flex:1;gap:.5rem;display:flex}.staging-img-name{color:#f8fafc;word-break:break-all;font-size:.9rem;font-weight:700}.staging-grid-hint{color:#fbbf24;font-size:.75rem;font-weight:600}.staging-label{color:#94a3b8;margin-bottom:.3rem;font-size:.75rem;font-weight:600;display:block}.staging-diff-group,.share-diff-group{flex-wrap:wrap;gap:.35rem;display:flex}.staging-actions{margin-top:.5rem}.timer-badge{border:1px solid var(--toolbar-border);color:#e2e8f0;font-variant-numeric:tabular-nums;background:#0006;border-radius:6px;align-items:center;gap:.35rem;padding:.3rem .65rem;font-size:.85rem;font-weight:700;display:flex}.mat-dropdown-wrap{position:relative}.mat-menu{background:var(--card-bg);border:1px solid var(--card-border);z-index:60;border-radius:8px;flex-direction:column;gap:.2rem;min-width:150px;margin-top:.4rem;padding:.35rem;display:flex;position:absolute;top:100%;left:0;box-shadow:0 8px 24px #00000080}.mat-menu.hidden{display:none}.mat-option{color:#cbd5e1;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:4px;align-items:center;padding:.45rem .65rem;font-size:.8rem;font-weight:600;transition:all .15s;display:flex}.mat-option:hover{color:#fff;background:#ffffff1a}.workspace-wrap{flex:1;width:100%;height:100%;position:relative;overflow:hidden}#puzzle-canvas{touch-action:none;width:100%;height:100%;display:block}#confetti-canvas{pointer-events:none;z-index:45;width:100%;height:100%;position:absolute;top:0;left:0}.box-top-window{z-index:40;background:#14100ef0;border:2px solid #fff3;border-radius:8px;max-width:260px;animation:.2s fadeIn;position:absolute;top:1rem;right:1rem;overflow:hidden;box-shadow:0 12px 36px #0009}.box-top-window.hidden{display:none}.box-top-header{color:#cbd5e1;cursor:move;background:#0006;border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:.35rem .6rem;font-size:.75rem;font-weight:700;display:flex}.box-top-close{color:#94a3b8;cursor:pointer;background:0 0;border:none;font-size:1.1rem}.box-top-close:hover{color:#fff}.box-top-body img{object-fit:contain;background:#0a0a0a;width:100%;max-height:180px;display:block}.modal-backdrop{-webkit-backdrop-filter:blur(8px);z-index:100;background:#0a0807bf;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal-backdrop.hidden{display:none}.modal-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;width:100%;max-width:580px;max-height:90vh;padding:1.5rem;overflow-y:auto;box-shadow:0 16px 40px #000000b3}.modal-card-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:.75rem;display:flex}.modal-title{font-family:var(--font-heading);color:#f8fafc;font-size:1.3rem;font-weight:700}.modal-close-icon{color:#94a3b8;cursor:pointer;background:0 0;border:none;font-size:1.5rem}.modal-close-icon:hover{color:#fff}.menu-action-grid{grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.25rem;display:grid}.menu-action-card{color:#e2e8f0;cursor:pointer;text-align:left;background:#ffffff0a;border:1px solid #ffffff1a;border-radius:8px;align-items:center;gap:.75rem;padding:.85rem;transition:all .2s;display:flex}.menu-action-card:hover,.menu-action-card.active{border-color:var(--gold-accent);background:#f59e0b1f}.menu-action-card strong{color:#f8fafc;font-size:.9rem;display:block}.menu-action-card p{color:#94a3b8;margin-top:2px;font-size:.72rem}.action-icon{font-size:1.6rem}.upload-dropzone{text-align:center;cursor:pointer;background:#f59e0b08;border:2px dashed #f59e0b66;border-radius:8px;margin-bottom:1rem;padding:1.75rem 1.25rem;transition:all .2s}.upload-dropzone:hover,.upload-dropzone.drag-over{border-color:var(--gold-accent);background:#f59e0b1a}.drop-icon{margin-bottom:.35rem;font-size:2.2rem}.upload-dropzone h3{color:#f8fafc;font-size:.95rem;font-weight:700}.upload-dropzone .subtext{color:#94a3b8;margin-top:.25rem;font-size:.75rem}.url-input-row{gap:.5rem;margin-bottom:1.25rem;display:flex}.url-input{color:#f8fafc;background:#0006;border:1px solid #ffffff26;border-radius:6px;outline:none;flex:1;padding:.5rem .75rem;font-size:.85rem}.url-input:focus{border-color:var(--gold-accent)}.url-submit-btn{background:var(--gold-accent);color:#1e1610;cursor:pointer;border:none;border-radius:6px;padding:.5rem 1rem;font-size:.85rem;font-weight:700}.url-submit-btn:hover{background:var(--gold-hover)}.gallery-section{margin-top:1rem}.section-heading{color:#cbd5e1;margin-bottom:.65rem;font-size:.85rem;font-weight:700}.gallery-cards-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.6rem;display:grid}.gallery-preset-card{cursor:pointer;background:#00000059;border:1px solid #ffffff1f;border-radius:6px;transition:all .2s;overflow:hidden}.gallery-preset-card:hover{border-color:var(--gold-accent);transform:translateY(-2px)}.gallery-preset-card img{object-fit:cover;width:100%;height:75px;display:block}.gallery-preset-card .preset-name{color:#e2e8f0;white-space:nowrap;text-overflow:ellipsis;padding:.35rem .45rem;font-size:.72rem;font-weight:700;overflow:hidden}.btn-tabletop{color:#f8fafc;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:6px;padding:.6rem 1.25rem;font-size:.9rem;font-weight:700;transition:all .15s}.btn-tabletop:hover{background:#fff3}.btn-tabletop.primary{background:var(--gold-accent);border-color:var(--gold-accent);color:#1e1610}.btn-tabletop.primary:hover{background:var(--gold-hover)}.toast{border:1px solid var(--gold-accent);color:#fbbf24;opacity:0;pointer-events:none;z-index:120;background:#161210f2;border-radius:6px;padding:.5rem 1rem;font-size:.82rem;font-weight:600;transition:all .25s;position:fixed;top:3.5rem;left:50%;transform:translate(-50%)translateY(-20px);box-shadow:0 8px 24px #00000080}.toast-show{opacity:1;transform:translate(-50%)translateY(0)}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (width<=768px){.tabletop-toolbar{gap:.2rem;min-height:34px;padding:.15rem .35rem}.toolbar-left,.toolbar-center,.toolbar-right{gap:.2rem}.btn-label{display:none}.tb-btn{padding:.2rem .3rem;font-size:.72rem}.piece-count-selector{gap:1px;padding:1px;display:flex}.piece-count-btn{padding:.12rem .28rem;font-size:.65rem}.timer-badge{padding:.15rem .35rem;font-size:.72rem}.menu-action-grid{grid-template-columns:1fr}}