.puzzle-shell{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;box-sizing:border-box}.puzzle-controls{display:flex;align-items:center;gap:.4rem;padding:.35rem .5rem;flex-shrink:0;flex-wrap:nowrap;min-height:0}.diff-selector{display:flex;gap:.25rem;flex-shrink:0}.btn-diff.active,.btn-char.active{transform:scale(1.05)}.char-selector{display:flex;gap:.25rem;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0}.char-selector::-webkit-scrollbar{display:none}.char-selector .btn-char{padding:2px;width:34px;height:34px;min-width:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.char-selector .btn-char img{width:100%;height:100%;object-fit:contain;pointer-events:none}.puzzle-actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0}#btn-preview{padding:4px 8px;font-size:.95rem;min-width:0}.stats{font-size:.95rem;font-family:var(--font-heading);color:var(--color-leo);white-space:nowrap}.puzzle-play{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:.4rem;padding:0 .5rem .5rem;box-sizing:border-box}.puzzle-wrapper{position:relative;width:min(100%,52dvh);max-width:420px;margin:0 auto;aspect-ratio:1 / 1;max-height:52%;flex:0 1 auto;border-radius:var(--radius-sm)}#puzzle-watermark{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.15;border-radius:var(--radius-sm);pointer-events:none;z-index:1}.puzzle-board{display:grid;position:relative;z-index:2;width:100%;height:100%;gap:2px;background:#fff6;border:4px solid var(--color-zuna-sky);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);grid-template-columns:repeat(var(--grid),1fr);grid-template-rows:repeat(var(--grid),1fr);overflow:hidden}.puzzle-cell{background:#fff3;border:1px dashed rgba(0,0,0,.1);position:relative}.staging-area{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-content:center;align-items:center;flex:1 1 auto;min-height:0;max-height:42%;overflow:hidden;padding:8px;background:#00000008;border-radius:var(--radius-sm);border:2px dashed rgba(0,0,0,.1);touch-action:none}.puzzle-piece{box-sizing:border-box;width:min(28vw,72px);height:min(28vw,72px);aspect-ratio:1 / 1;background-size:calc(var(--grid) * 100%) calc(var(--grid) * 100%);border:3px solid white;border-radius:8px;box-shadow:0 4px 8px #00000026;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:box-shadow .2s,filter .2s;z-index:10;flex-shrink:0}.puzzle-piece *{pointer-events:none}.puzzle-piece:active{cursor:grabbing}.puzzle-piece[data-dragging=true]{opacity:.5}.puzzle-cell .puzzle-piece{width:100%;height:100%;border:3px solid #4CAF50;border-radius:0;box-shadow:0 0 12px #4caf5099,inset 0 0 10px #4caf504d;cursor:default;animation:snapPop .3s cubic-bezier(.175,.885,.32,1.275);z-index:5}@keyframes snapPop{0%{transform:scale(1.1)}to{transform:scale(1)}}.piece-placeholder{width:min(28vw,72px);height:min(28vw,72px);aspect-ratio:1 / 1;border:2px dashed rgba(0,0,0,.2);border-radius:8px;background:#0000000d;flex-shrink:0}.puzzle-preview{position:absolute;inset:0;z-index:20;border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-lg)}.puzzle-preview img{width:100%;height:100%;object-fit:cover}.puzzle-preview.hidden{display:none}@media(max-width:768px){.puzzle-controls{gap:.25rem;padding:.25rem .4rem}.char-selector .btn-char{width:30px;height:30px;min-width:30px}.puzzle-wrapper{width:min(100%,46dvh);max-height:48%}.staging-area{max-height:44%;gap:6px;padding:6px}.puzzle-piece,.piece-placeholder{width:min(22vw,58px);height:min(22vw,58px)}}