:root{--color-primary:#e07a5f;--color-primary-dark:#c96850;--color-primary-light:#f4a88b;--color-seq-1:#3d5a80;--color-seq-2:#98c1d9;--color-seq-3:#ee6c4d;--color-seq-4:#293241;--color-bg:#f8f7f4;--color-surface:#fff;--color-text:#2b2d42;--color-text-light:#5b6470;--color-border:#e0ddd5;--color-selected:#ffd166;--color-success:#06d6a0;--color-error:#ef476f;--space-xs:0.5rem;--space-sm:0.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--font-display:"DM Serif Display",serif;--font-body:"Work Sans",sans-serif;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--shadow-sm:0 2px 8px rgba(43,45,66,.08);--shadow-md:0 4px 16px rgba(43,45,66,.12);--shadow-lg:0 8px 24px rgba(43,45,66,.16);--transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--transition-base:250ms cubic-bezier(0.4,0,0.2,1);--transition-slow:350ms cubic-bezier(0.4,0,0.2,1)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}button{background:none;border:none;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent}.container{display:flex;flex-direction:column;margin:0 auto;max-width:600px;min-height:100vh;padding:var(--space-md)}.header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--space-xl);padding:var(--space-md) 0}.header-left,.header-right{flex:1}.header-left{align-items:center;display:flex;gap:var(--space-xs)}#hintBtn.icon-btn{transition:opacity var(--transition-fast)}#hintBtn.icon-btn:disabled{cursor:not-allowed;opacity:.3}#hintBtn.icon-btn:disabled:hover{background:transparent}.header-center{align-items:center;display:flex;flex-direction:column;gap:.5rem;text-align:center}.logo{color:var(--color-primary);font-family:var(--font-display);font-size:2.5rem;font-weight:400;letter-spacing:.02em;margin-bottom:.25rem}.puzzle-number{color:var(--color-text-light);font-size:.875rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase}.icon-btn{align-items:center;border-radius:var(--radius-sm);color:var(--color-text);display:flex;height:44px;justify-content:center;transition:all var(--transition-fast);width:44px}.icon-btn:hover{background:var(--color-surface);box-shadow:var(--shadow-sm)}.icon-btn:active{transform:scale(.95)}.header-right{text-align:right}.streak{color:var(--color-text-light);font-size:.75rem;font-weight:500;margin-bottom:.125rem}.timer{color:var(--color-text);font-size:1.125rem;font-variant-numeric:tabular-nums;font-weight:600}.game-area{display:flex;flex:1;flex-direction:column;gap:var(--space-lg)}.game-message{animation:fadeIn var(--transition-slow) ease-out;color:var(--color-text-light);display:none;font-size:1.125rem;font-weight:600;padding:var(--space-md) 0;text-align:center}.game-message.show{display:block}.game-message.game-over{color:var(--color-text)}.completed-group{background:var(--color-surface);border:2px solid transparent;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;grid-column:1/-1;justify-content:center;min-height:85px;opacity:0;overflow:visible;padding:var(--space-sm) var(--space-md);transition:opacity .2s ease-out}.completed-group.visible{opacity:1}.completed-group.easy{background:linear-gradient(135deg,#a7f3d0,#6ee7b7);border-color:#6ee7b7}.completed-group.medium{background:linear-gradient(135deg,#fde68a,#fcd34d);border-color:#fcd34d}.completed-group.hard{background:linear-gradient(135deg,#fca5a5,#f87171);border-color:#f87171}.completed-group.expert{background:linear-gradient(135deg,#c4b5fd,#a78bfa);border-color:#a78bfa}.completed-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:.25rem}.completed-title{color:var(--color-text);font-family:var(--font-display);font-size:1.25rem}.completed-group.easy .completed-title{color:#065f46;font-weight:600;text-shadow:none}.completed-group.medium .completed-title{color:#78350f;font-weight:600;text-shadow:none}.completed-group.hard .completed-title{color:#7f1d1d;font-weight:600;text-shadow:none}.completed-group.expert .completed-title{color:#4c1d95;font-weight:600;text-shadow:none}.completed-difficulty{backdrop-filter:blur(4px);border-radius:4px;font-size:.75rem;font-weight:600;letter-spacing:.05em;padding:.25rem .5rem;text-transform:uppercase}.completed-group.easy .completed-difficulty{background:rgba(6,95,70,.2);color:#065f46;font-weight:700}.completed-group.medium .completed-difficulty{background:rgba(120,53,15,.2);color:#78350f;font-weight:700}.completed-group.hard .completed-difficulty{background:rgba(127,29,29,.2);color:#7f1d1d;font-weight:700}.completed-group.expert .completed-difficulty{background:rgba(76,29,149,.2);color:#4c1d95;font-weight:700}.completed-items{align-items:center;display:flex;flex-wrap:nowrap;gap:var(--space-sm);justify-content:space-evenly;overflow-x:auto;padding:.75rem var(--space-md);position:relative}.completed-items:before{background:currentColor;content:"";height:2px;left:10%;opacity:.2;position:absolute;right:10%;top:50%;transform:translateY(-50%);z-index:0}.completed-item{align-items:center;background:var(--color-bg);border-radius:50%;color:var(--color-text-light);display:flex;flex-shrink:0;font-size:.75rem;height:90px;justify-content:center;padding:var(--space-md);position:relative;text-align:center;width:90px;word-wrap:break-word;animation:circlePulse 1.8s ease-in-out infinite;font-weight:600;hyphens:auto;line-height:1.2;overflow-wrap:break-word;transition:transform .3s ease,box-shadow .3s ease;z-index:1}.completed-item:first-child{animation-delay:0s}.completed-item:nth-child(2){animation-delay:.45s}.completed-item:nth-child(3){animation-delay:.9s}.completed-item:nth-child(4){animation-delay:1.35s}@keyframes circlePulse{0%,25%,to{transform:scale(1)}12.5%{transform:scale(1.04)}}@keyframes successBounce{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.completed-group.easy .completed-item{background:#d0f0e4;box-shadow:0 0 0 12px #a7f3d0;color:#065f46;font-weight:600}.completed-group.medium .completed-item{background:#f7e9c8;box-shadow:0 0 0 12px #fde68a;color:#78350f;font-weight:600}.completed-group.hard .completed-item{background:#f8d5d5;box-shadow:0 0 0 12px #fca5a5;color:#7f1d1d;font-weight:600}.completed-group.expert .completed-item{background:#e5dbf5;box-shadow:0 0 0 12px #c4b5fd;color:#4c1d95;font-weight:600}.instruction-message{animation:fadeIn var(--transition-slow);color:var(--color-text-light);font-size:1rem;font-weight:600;padding:var(--space-sm) 0;text-align:center}.game-grid-container{margin-bottom:var(--space-md);position:relative}.game-grid{display:grid;gap:var(--space-sm);grid-template-columns:repeat(4,1fr);transition:opacity var(--transition-base)}.tile{align-items:center;aspect-ratio:1;background:var(--color-surface);border:2px solid var(--color-border);border-radius:50%;box-shadow:var(--shadow-sm);box-sizing:border-box;color:var(--color-text);cursor:pointer;display:flex;font-size:1rem;font-weight:500;justify-content:center;padding:var(--space-md);position:relative;text-align:center;transition:all var(--transition-fast);user-select:none;-webkit-user-select:none;word-wrap:break-word;hyphens:auto;overflow:visible;overflow-wrap:break-word}.tile.success{animation:successBounce .15s cubic-bezier(.4,0,.2,1)}.tile.completing{transition:none!important;z-index:100}.tile.completing.ready-to-animate{transition:transform .5s cubic-bezier(.4,0,.2,1)!important}.tile.completing.transform-color{transition:transform .7s cubic-bezier(.2,0,0,1),background-color .2s ease-out,color .2s ease-out,box-shadow .2s ease-out}.tile.animating{transition:transform .5s cubic-bezier(.4,0,.2,1)}.tile:hover{border-color:var(--color-primary-light);box-shadow:var(--shadow-md);transform:translateY(-2px)}.tile:active{transform:scale(.98)}.tile.selected{background:var(--color-selected);border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-2px);z-index:5}.tile.disabled{cursor:not-allowed;opacity:.3;pointer-events:none}.tile-number{align-items:center;background:var(--color-primary);border:2px solid var(--color-surface);border-radius:50%;box-shadow:var(--shadow-sm);color:#fff;display:flex;font-size:.75rem;font-weight:700;height:24px;justify-content:center;position:absolute;right:4px;top:4px;width:24px;z-index:10}@keyframes shake{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-4px)}20%,40%,60%,80%{transform:translateX(4px)}}.tile.error{animation:shake .5s ease-in-out;border-color:var(--color-error)}@keyframes pulse{0%,to{border-color:var(--color-border);transform:scale(1)}50%{border-color:#fbbf24;box-shadow:0 0 0 3px rgba(251,191,36,.2);transform:scale(1.05)}}.tile.one-away{animation:pulse .6s ease-in-out 2}.guess-feedback-overlay{border-radius:var(--radius-lg);font-size:1.75rem;font-weight:700;left:50%;opacity:0;padding:1rem 2rem;pointer-events:none;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%) scale(0);transition:opacity .2s ease-out;white-space:nowrap;z-index:100}.guess-feedback-overlay.show{animation:feedbackPop .4s ease-out forwards}.guess-feedback-overlay.fade-out{animation:feedbackFadeOut .3s ease-out forwards}.guess-feedback-overlay.amber{background:linear-gradient(135deg,#fbbf24,#f59e0b);box-shadow:0 8px 32px rgba(251,191,36,.4);color:#1a1a2e}.guess-feedback-overlay.one-away{font-size:2rem}@keyframes feedbackPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}50%{transform:translate(-50%,-50%) scale(1.1)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes feedbackFadeOut{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.9)}}.tile.reordering{transition:all .5s cubic-bezier(.4,0,.2,1);z-index:100}@keyframes flyToCompleted{0%{opacity:1;transform:translateY(0) scale(1)}30%{opacity:.9;transform:translateY(-80px) scale(.95)}60%{opacity:.7;transform:translateY(-160px) scale(.85)}to{opacity:0;transform:translateY(-240px) scale(.7)}}.tile.success{animation:flyToCompleted .8s ease-out forwards;position:relative;z-index:10}.controls{display:grid;gap:var(--space-sm);grid-template-columns:auto auto 1fr}.btn{align-items:center;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);display:flex;font-size:1rem;font-weight:600;justify-content:center;padding:var(--space-md) var(--space-lg);transition:all var(--transition-fast);white-space:nowrap}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-primary-dark);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-primary:active:not(:disabled){transform:scale(.98)}.btn-primary:disabled{background:var(--color-border);box-shadow:none;color:var(--color-text-light);cursor:not-allowed}.btn-secondary{background:var(--color-surface);border:2px solid var(--color-border);color:var(--color-text)}.btn-secondary:hover{border-color:var(--color-primary-light);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-secondary:active{transform:scale(.98)}.btn svg{pointer-events:none}.btn-block{width:100%}#hintModal{align-items:flex-start;padding-top:15vh}.hint-modal-content{max-width:360px;padding:var(--space-xl) var(--space-lg);text-align:center}.hint-icon{font-size:3rem;margin-bottom:var(--space-md)}.hint-modal-content h3{color:var(--color-text);font-family:var(--font-display);font-size:1.5rem;margin-bottom:var(--space-sm)}.hint-modal-content p{color:var(--color-text-light);margin-bottom:var(--space-md)}.hint-category{background:rgba(79,70,229,.1);border-radius:var(--radius-md);color:var(--color-primary);font-family:var(--font-display);font-size:1.25rem;font-weight:600;margin-bottom:var(--space-lg);padding:var(--space-md)}.mistakes-counter{align-items:center;color:var(--color-text-light);display:flex;font-weight:500;gap:var(--space-md);justify-content:center;padding:var(--space-md)}.mistake-dots{display:flex;gap:var(--space-xs)}.dot{background:var(--color-border);border-radius:50%;height:12px;transition:all var(--transition-base);width:12px}.dot.active{background:var(--color-primary)}.dot.used{background:transparent;border:2px solid var(--color-error)}.modal{align-items:center;animation:fadeIn var(--transition-base);backdrop-filter:blur(8px);background:rgba(43,45,66,.6);display:none;inset:0;justify-content:center;padding:var(--space-md);position:fixed;z-index:1000}.modal.active{display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{animation:slideUp var(--transition-slow) ease-out;background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:500px;padding:var(--space-xl);position:relative;width:100%}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-content h2{color:var(--color-text);font-family:var(--font-display);font-size:2rem;margin-bottom:var(--space-lg);text-align:center}.modal-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--space-lg)}.modal-header h2{margin:0;text-align:left}.close-btn{align-items:center;border-radius:var(--radius-sm);color:var(--color-text-light);display:flex;height:36px;justify-content:center;position:absolute;right:var(--space-md);top:var(--space-md);transition:all var(--transition-fast);width:36px;z-index:1}.close-btn:hover{background:var(--color-bg);color:var(--color-text)}.stats{display:grid;gap:var(--space-md);grid-template-columns:1fr 1fr;margin-bottom:var(--space-xl)}.stat{background:var(--color-bg);border-radius:var(--radius-md);padding:var(--space-md);text-align:center}.stat-label{color:var(--color-text-light);font-size:.875rem;font-weight:600;letter-spacing:.05em;margin-bottom:var(--space-xs);text-transform:uppercase}.stat-value{color:var(--color-primary);font-size:2rem;font-variant-numeric:tabular-nums;font-weight:700}.share-section{margin-bottom:var(--space-xl)}.share-grid{background:var(--color-bg);border-radius:var(--radius-md);font-family:monospace;font-size:1.25rem;line-height:1.4;margin-bottom:var(--space-md);padding:var(--space-md);text-align:center;user-select:all;white-space:pre-wrap}.emoji-grid{display:inline-block;margin-bottom:var(--space-lg);padding-bottom:var(--space-sm);text-align:left;white-space:pre-wrap}.share-buttons{display:flex;gap:var(--space-sm)}.share-buttons .btn{align-items:center;display:flex;flex:1;justify-content:center}.next-puzzle{color:var(--color-text-light);font-size:.875rem;text-align:center}.next-puzzle span{color:var(--color-primary);font-variant-numeric:tabular-nums;font-weight:700}.menu-section{margin-bottom:var(--space-xl)}.menu-section:first-child{margin-top:0}.menu-section:last-child{margin-bottom:0}.menu-section h3{color:var(--color-text);font-family:var(--font-display);font-size:1.25rem;margin-bottom:var(--space-md)}.instructions{list-style-position:inside;padding-left:0}.instructions li,.menu-section p{color:var(--color-text-light);margin-bottom:var(--space-sm)}.menu-section p strong{color:var(--color-text);font-weight:600}@media (max-width:480px){.container{padding:var(--space-sm)}.header{margin-bottom:var(--space-sm);padding:var(--space-sm) 0}.logo{font-size:1.75rem}.puzzle-number{font-size:.75rem}.instruction-message{font-size:.875rem;padding:var(--space-sm) 0}.completed-group{padding:var(--space-sm)}.completed-group,.completed-header{margin-bottom:var(--space-xs)}.completed-title{font-size:.875rem}.completed-difficulty{font-size:.625rem;padding:.125rem .375rem}.completed-items{gap:var(--space-xs);padding:var(--space-md) var(--space-sm)}.completed-item{font-size:.65rem;height:70px;padding:var(--space-sm);width:70px}.tiles-grid{gap:.375rem;margin-bottom:var(--space-sm)}.tile{border-width:1.5px;font-size:.7rem;padding:.25rem}.tile-number{font-size:.625rem;height:18px;right:2px;top:2px;width:18px}.controls{gap:var(--space-xs);grid-template-columns:auto auto 1fr}.btn{font-size:.875rem;padding:var(--space-sm) var(--space-sm)}.btn svg{height:16px;width:16px}.btn-icon-text .btn-text{display:none}.mistakes{font-size:.75rem;padding:var(--space-xs) var(--space-sm)}.mistake-dot{height:6px;width:6px}.modal{align-items:flex-end;padding:var(--space-sm)}.modal-content{margin-bottom:0;max-height:85vh;overflow-y:auto;padding:var(--space-md)}.modal-content h2{font-size:1.5rem}.modal-content h2,.stats{margin-bottom:var(--space-md)}.stats{gap:var(--space-sm)}.stat{padding:var(--space-sm)}.stat-label{font-size:.75rem;margin-bottom:.25rem}.stat-value{font-size:1.5rem}.share-section{margin-bottom:var(--space-md)}.share-grid{font-size:1rem;margin-bottom:var(--space-sm);padding:var(--space-sm)}.share-buttons{gap:var(--space-xs)}.share-buttons .btn{font-size:.875rem;padding:var(--space-sm)}}@media (max-width:375px){.logo{font-size:1.5rem}.tile{font-size:.65rem}.btn{font-size:.8rem;padding:.5rem}.completed-items{gap:.375rem;padding:var(--space-sm) var(--space-xs)}.completed-item{font-size:.6rem;height:60px;padding:.375rem;width:60px}.completed-group.easy .completed-item{box-shadow:0 0 0 8px #a7f3d0}.completed-group.medium .completed-item{box-shadow:0 0 0 8px #fde68a}.completed-group.hard .completed-item{box-shadow:0 0 0 8px #fca5a5}.completed-group.expert .completed-item{box-shadow:0 0 0 8px #c4b5fd}.modal-content{max-height:80vh;padding:var(--space-sm)}.modal-content h2,.stat-value{font-size:1.25rem}.share-grid{font-size:.875rem}}.placeholder-tile{aspect-ratio:1}.hidden{display:none!important}