:root{--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 2px 4px 0 #0000001a;--shadow-lg:0 4px 8px 0 #0000001f;--shadow-xl:0 8px 16px 0 #00000026;--shadow-primary:0 4px 12px 0 #746dec4d;--shadow-success:0 4px 12px 0 #6cb7564d;--ease-out:cubic-bezier(.33,1,.68,1);--ease-in-out:cubic-bezier(.65,0,.35,1);--ease-bounce:cubic-bezier(.68,-.55,.265,1.55);--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem}@keyframes slot-cube-roll{0%{transform:perspective(400px)rotateX(0)}50%{transform:perspective(400px)rotateX(-90deg)}51%{transform:perspective(400px)rotateX(90deg)}to{transform:perspective(400px)rotateX(0)}}@keyframes slot-reveal{0%{opacity:.9}to{opacity:1}}.placement-slot.animating{animation:slot-cube-roll 1s var(--ease-in-out)forwards;transform-style:preserve-3d;backface-visibility:hidden}.placement-slot.revealed{animation:slot-reveal .2s var(--ease-out)forwards}.guess-row.completed .placement-slot{height:60px!important;min-height:60px!important;font-size:1.125rem!important}.guess-row.completed .column-group{gap:.125rem!important}@media (max-width:640px){.guess-row.completed .placement-slot{min-height:60px!important;font-size:1rem!important}}@media (max-width:440px){.guess-row.completed .placement-slot{width:56px!important;height:56px!important;min-height:56px!important;font-size:.9rem!important}}@media (max-width:375px){.guess-row.completed .placement-slot{width:54px!important;height:54px!important;min-height:54px!important;font-size:.875rem!important}}@media (max-width:320px){.guess-row.completed .placement-slot{width:48px!important;height:48px!important;min-height:48px!important;font-size:.8125rem!important}}.guess-row.compact .placement-slot{font-weight:600;width:48px!important;height:48px!important;min-height:48px!important;max-height:48px!important;font-size:.8125rem!important}.guess-row.compact .column-group{gap:.0625rem!important}.guess-row.compact{margin-bottom:.25rem}.guess-row{transition:margin-bottom .3s var(--ease-out)}.guess-row .placement-slot{transition:width .3s var(--ease-out),height .3s var(--ease-out),min-height .3s var(--ease-out),max-height .3s var(--ease-out),font-size .3s var(--ease-out)}.guess-row .column-group{transition:gap .3s var(--ease-out)}@media (max-width:440px){.guess-row.compact .placement-slot{width:44px!important;height:44px!important;min-height:44px!important;max-height:44px!important;font-size:.75rem!important}}@media (max-width:375px){.guess-row.compact .placement-slot{width:42px!important;height:42px!important;min-height:42px!important;max-height:42px!important;font-size:.6875rem!important}}@media (max-width:320px){.guess-row.compact .placement-slot{width:38px!important;height:38px!important;min-height:38px!important;max-height:38px!important;font-size:.625rem!important}}.placement-slot{aspect-ratio:1;flex-shrink:0;max-height:60px;position:relative}.column-group{align-items:center!important}.mode-selector-wrapper{transition:max-height .3s var(--ease-out),opacity .3s var(--ease-out);opacity:1;max-height:100px;overflow:hidden}.mode-selector-wrapper.animate-in{animation:mode-selector-slide-in .3s var(--ease-out)forwards}@keyframes mode-selector-slide-in{0%{opacity:0;max-height:0}to{opacity:1;max-height:100px}}.mode-selector-bar{border-radius:var(--radius-md)!important;color:#374151!important;letter-spacing:.02em!important;min-height:44px!important;transition:all .15s var(--ease-out)!important;background-color:#f3f4f6!important;border:1px solid #e5e7eb!important;justify-content:center!important;align-items:center!important;gap:.5rem!important;padding:.625rem 1rem!important;font-weight:600!important;display:flex!important}.mode-selector-bar:after{content:"▼";opacity:.5;margin-left:.25rem;font-size:.625rem}.mode-selector-bar:hover{background-color:#e5e7eb!important;border-color:#d1d5db!important}.solution-box{border-radius:var(--radius-xl);box-shadow:var(--shadow-md);background:linear-gradient(135deg,#f5f9ff 0%,#fff 100%);gap:var(--space-4)!important;margin-bottom:var(--space-4)!important;padding:var(--space-4)!important}.solution-slot{box-shadow:var(--shadow-sm);transition:all .3s var(--ease-out);border-radius:var(--radius-lg)!important;border:3px solid #d1d5db!important;font-size:1.5rem!important;font-weight:700!important}.solution-slot.correct{box-shadow:var(--shadow-success)!important;color:#fff!important;background:linear-gradient(135deg,#6cb756 0%,#7dc766 100%)!important;border-color:#6cb756!important}.solution-box.compact-solution{gap:var(--space-2)!important;margin-bottom:var(--space-2)!important;padding:var(--space-2)!important}.solution-box.compact-solution .solution-slot{transition:all .3s var(--ease-out);width:56px!important;height:56px!important;font-size:1.25rem!important}@media (max-width:375px){.solution-box.compact-solution .solution-slot{width:48px!important;height:48px!important;font-size:1rem!important}}.solution-slot.hollow{color:#0000!important;background:0 0!important;border:3px solid #d1d5db!important}.letter-pair{position:relative;box-shadow:var(--shadow-md)!important;transition:all .15s var(--ease-out)!important;font-weight:600!important}@media (hover:hover){.letter-pair:hover:not(.used):not(.gray):not(.green){box-shadow:var(--shadow-lg)!important;transform:translateY(-1px)!important}}@media (hover:none){.letter-pair:active:not(.used):not(.gray):not(.green){transform:scale(.95)!important}}.letter-pair.selected{animation:pulse-selected 1.5s var(--ease-in-out)infinite!important;border:4px solid #ffcd3c!important;transform:scale(1.08)!important;box-shadow:0 0 0 2px #fff,0 0 0 6px #ffcd3c4d,0 6px 16px #746dec80!important}@keyframes pulse-selected{0%,to{box-shadow:0 0 0 2px #fff,0 0 0 6px #ffcd3c4d,0 6px 16px #746dec80}50%{box-shadow:0 0 0 2px #fff,0 0 0 8px #ffcd3c80,0 8px 20px #746dec99}}.letter-pair.green{cursor:default!important;background:linear-gradient(135deg,#6cb756 0%,#7dc766 100%)!important}:focus-visible{outline-offset:2px;outline:2px solid #746dec}.letter-pair:focus-visible{outline-offset:3px;outline:3px solid #746dec}.btn-primary:focus-visible{outline:3px solid #ffcd3c;box-shadow:0 0 0 3px #ffcd3c80}.placement-slot:focus-visible{outline-offset:2px;outline:3px solid #746dec}.progress-indicator{color:#6b7280;padding:0 var(--space-2);margin-bottom:var(--space-2);justify-content:space-between;align-items:center;font-size:.75rem;display:flex}.progress-bar-container{height:4px;margin-top:var(--space-1);background:#e5e7eb;border-radius:9999px;overflow:hidden}.progress-bar-fill{height:100%;transition:width .3s var(--ease-out);background:linear-gradient(90deg,#746dec 0%,#8680ee 100%);border-radius:9999px}.skeleton{border-radius:var(--radius-lg);background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%) 0 0/200% 100%;animation:1.5s infinite skeleton-shimmer}@keyframes skeleton-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton-solution{width:80px;height:80px}.skeleton-slot{width:60px;height:60px}.skeleton-tile{aspect-ratio:1;width:100%}@media (max-width:640px){.letter-pairs-container{max-height:none!important;overflow-y:visible!important}}@media (max-width:375px) and (max-height:700px){.letter-pairs-container{padding:.5rem!important}.letter-pair{width:40px!important;height:40px!important;font-size:.75rem!important}.letter-pairs-grid{gap:3px!important}.solution-slot{border-radius:6px!important;width:52px!important;height:32px!important;font-size:.875rem!important}.solution-box{gap:4px!important;margin-bottom:6px!important;padding:6px 8px!important}.placement-slot{width:44px!important;height:44px!important;min-height:44px!important;font-size:.75rem!important}.row-container{gap:4px!important}.sticky-bottom-controls{padding-bottom:max(12px,env(safe-area-inset-bottom))!important;gap:8px!important}.btn-primary{min-height:40px!important;padding:.5rem 1rem!important}.progress-indicator{margin-bottom:2px!important;padding:0 4px!important;font-size:.6875rem!important}.mode-selector-bar{min-height:36px!important;padding:.375rem .75rem!important;font-size:.75rem!important}.guess-row.compact .placement-slot{width:36px!important;height:36px!important;min-height:36px!important;font-size:.625rem!important}}@media (max-width:320px){.letter-pairs-grid{padding:var(--space-2)!important;grid-template-columns:repeat(6,1fr)!important;gap:2px!important}.letter-pair{width:100%!important;min-width:42px!important;height:46px!important;font-size:.75rem!important}.solution-box{gap:var(--space-2)!important;padding:var(--space-2)!important}.solution-slot{width:52px!important;height:52px!important;font-size:1rem!important}.row-container{gap:2px!important}.placement-slot{width:44px!important;height:44px!important;min-height:44px!important;font-size:.75rem!important}.letter-pairs-container{padding:var(--space-2)!important}}@media (max-width:640px){.sticky-bottom-controls{flex-direction:column-reverse!important}.sticky-bottom-controls .btn-primary{margin-top:var(--space-3)!important;margin-bottom:0!important}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.placement-slot.animating{animation:none!important;transform:none!important}.placement-slot.revealed,.letter-pair.selected{animation:none!important}}@media (max-width:640px){.game-topbar{padding-top:var(--space-2)!important;padding-bottom:var(--space-2)!important}}.confetti-container{pointer-events:none;z-index:9999;width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sr-only:focus{top:var(--space-4);left:var(--space-4);z-index:9999;width:auto;height:auto;padding:var(--space-3)var(--space-4);clip:auto;white-space:normal;color:#fff;border-radius:var(--radius-md);background:#746dec;margin:0;position:fixed;overflow:visible}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}.guess-button-shake{animation:shake .5s var(--ease-out)}.guess-error-message{color:#fff;padding:var(--space-2)var(--space-3);border-radius:var(--radius-md);white-space:nowrap;margin-bottom:var(--space-2);animation:fadeInOut 2s var(--ease-out)forwards;background:#ef4444;font-size:.75rem;font-weight:600;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%)translateY(10px)}15%{opacity:1;transform:translate(-50%)translateY(0)}85%{opacity:1;transform:translate(-50%)translateY(0)}to{opacity:0;transform:translate(-50%)translateY(-10px)}}.tip-tooltip{pointer-events:auto;max-width:280px}.tip-tooltip-content{border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:var(--space-4);background:#fff;border:1px solid #e5e7eb;position:relative}.tip-tooltip-close{top:var(--space-2);right:var(--space-2);border-radius:var(--radius-sm);color:#6b7280;cursor:pointer;width:24px;height:24px;transition:all .15s var(--ease-out);background:0 0;border:none;justify-content:center;align-items:center;display:flex;position:absolute}.tip-tooltip-close:hover{color:#374151;background:#f3f4f6}.tip-tooltip-message{color:#374151;padding-right:var(--space-6);margin:0;font-size:.875rem;line-height:1.5}.tip-tooltip-dismiss{align-items:center;gap:var(--space-2);margin-top:var(--space-3);color:#6b7280;cursor:pointer;font-size:.75rem;display:flex}.tip-tooltip-dismiss input[type=checkbox]{accent-color:#746dec;cursor:pointer;width:14px;height:14px}.tip-tooltip-dismiss span{-webkit-user-select:none;user-select:none}.tip-tooltip-arrow{background:#fff;border:1px solid #e5e7eb;width:12px;height:12px;position:absolute;transform:rotate(45deg)}.tip-tooltip-arrow-top{border-bottom:none;border-right:none;margin-left:-6px;top:-7px;left:50%}.tip-tooltip-arrow-bottom{border-top:none;border-left:none;margin-left:-6px;bottom:-7px;left:50%}.tip-tooltip-arrow-left{border-top:none;border-right:none;margin-top:-6px;top:50%;left:-7px}.tip-tooltip-arrow-right{border-bottom:none;border-left:none;margin-top:-6px;top:50%;right:-7px}.slot-shake{animation:slot-shake .5s var(--ease-out)}@keyframes slot-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-3px)}20%,40%,60%,80%{transform:translate(3px)}}.solution-box-highlight{animation:solution-box-pulse .6s var(--ease-out)}@keyframes solution-box-pulse{0%{box-shadow:var(--shadow-md)}50%{box-shadow:0 0 0 4px #ef44444d,var(--shadow-md)}to{box-shadow:var(--shadow-md)}}.current-row-highlight{animation:current-row-pulse 1s var(--ease-out)}@keyframes current-row-pulse{0%{box-shadow:none}25%{box-shadow:0 0 0 4px #6cb75666}75%{box-shadow:0 0 0 4px #6cb75666}to{box-shadow:none}}@media (max-width:640px){.tip-tooltip{max-width:calc(100vw - 32px)}.tip-tooltip-content{padding:var(--space-3)}.tip-tooltip-message{font-size:.8125rem}}@media (prefers-reduced-motion:reduce){.slot-shake,.solution-box-highlight,.current-row-highlight,.guess-button-shake{animation:none!important}.confetti-container{display:none!important}}.pv2-modal .game-grid,.pv2-solver-replay .game-grid,.modal-content .game-grid{max-width:100%}.pv2-modal .row-container,.pv2-solver-replay .row-container,.modal-content .row-container{grid-template-columns:minmax(44px,88px) 2px minmax(44px,88px) 2px minmax(44px,88px);gap:.375rem}.pv2-modal .placement-slot,.pv2-solver-replay .placement-slot,.modal-content .placement-slot{aspect-ratio:auto!important;flex-shrink:1!important;width:44px!important;height:44px!important;min-height:44px!important;max-height:44px!important;font-size:.85rem!important}.pv2-modal .guess-row.completed .placement-slot,.pv2-solver-replay .guess-row.completed .placement-slot,.modal-content .guess-row.completed .placement-slot{height:36px!important;min-height:36px!important;max-height:36px!important;font-size:.8rem!important}@media (max-width:375px){.pv2-modal .row-container,.pv2-solver-replay .row-container,.modal-content .row-container{gap:.375rem}.pv2-modal .placement-slot,.pv2-solver-replay .placement-slot,.modal-content .placement-slot{aspect-ratio:auto!important;flex-shrink:1!important;width:50px!important;height:50px!important;min-height:50px!important;max-height:50px!important}.pv2-modal .guess-row.completed .placement-slot,.pv2-solver-replay .guess-row.completed .placement-slot,.modal-content .guess-row.completed .placement-slot{height:32px!important;min-height:32px!important;max-height:32px!important}}@media (max-width:320px){.pv2-modal .row-container,.pv2-solver-replay .row-container,.modal-content .row-container{grid-template-columns:minmax(40px,70px) 2px minmax(40px,70px) 2px minmax(40px,70px);gap:.125rem}.pv2-modal .placement-slot,.pv2-solver-replay .placement-slot,.modal-content .placement-slot{aspect-ratio:auto!important;flex-shrink:1!important;width:40px!important;height:40px!important;min-height:40px!important;max-height:40px!important;font-size:.6875rem!important}.pv2-modal .guess-row.completed .placement-slot,.pv2-solver-replay .guess-row.completed .placement-slot,.modal-content .guess-row.completed .placement-slot{height:26px!important;min-height:26px!important;max-height:26px!important;font-size:.625rem!important}.pv2-modal .vertical-divider,.pv2-solver-replay .vertical-divider,.modal-content .vertical-divider{width:1px}}.dark body,.dark .min-h-screen{color:#e0e0e0!important;background-color:#18181b!important}.dark .solution-box{background:linear-gradient(135deg,#27272a 0%,#18181b 100%)!important;box-shadow:0 2px 8px #0006!important}.dark .solution-slot{color:#a1a1aa!important;background:#27272a!important;border-color:#52525b!important}.dark .solution-slot.correct{color:#fff!important;background:linear-gradient(135deg,#6cb756 0%,#7dc766 100%)!important;border-color:#6cb756!important}.dark .solution-slot.hollow{background:0 0!important;border-color:#52525b!important}.dark .placement-slot{color:#e0e0e0!important;background:#3f3f46!important}.dark .placement-slot:hover:not(.locked):not(.occupied){background:#52525b!important}.dark .placement-slot.occupied{color:#fff!important;background:#746dec!important}.dark .letter-pairs-container{background:#27272a!important;box-shadow:0 2px 8px #0006!important}.dark .letter-pair{color:#fff!important;background:#746dec!important;box-shadow:0 2px 4px #0000004d!important}.dark .letter-pair.used{color:#71717a!important;background:#3f3f46!important}.dark .letter-pair.gray{color:#a1a1aa!important;background:#52525b!important}.dark .letter-pair.yellow{color:#18181b!important;background:#ffcd3c!important}.dark .letter-pair.green{color:#fff!important;background:linear-gradient(135deg,#6cb756 0%,#7dc766 100%)!important}.dark .mode-selector-bar{color:#e0e0e0!important;background-color:#27272a!important;border-color:#3f3f46!important}.dark .mode-selector-bar:hover{background-color:#3f3f46!important;border-color:#52525b!important}.dark .column-label{color:#a1a1aa!important}.dark .vertical-divider{background:#52525b!important}.dark .modal-content{background:#27272a!important;border-color:#3f3f46!important}.dark .modal-title{color:#9b96f5!important}.dark .modal-message{color:#a1a1aa!important}.dark .modal-stats{color:#e0e0e0!important;background:#3f3f46!important}.dark .mode-card{background:#27272a!important;border-color:#52525b!important}.dark .mode-card:hover{border-color:#9b96f5!important}.dark .mode-card.active{background:#9b96f51a!important;border-color:#9b96f5!important}.dark .mode-card-name{color:#e0e0e0!important}.dark .mode-card-description{color:#a1a1aa!important}.dark .tip-tooltip-content{background:#27272a!important;border-color:#3f3f46!important}.dark .tip-tooltip-message{color:#e0e0e0!important}.dark .tip-tooltip-arrow{background:#27272a!important;border-color:#3f3f46!important}.dark .tip-tooltip-close{color:#a1a1aa!important}.dark .tip-tooltip-close:hover{color:#e0e0e0!important;background:#3f3f46!important}.dark .skeleton{background:linear-gradient(90deg,#3f3f46 25%,#52525b 50%,#3f3f46 75%)!important}.dark .progress-bar-container{background:#3f3f46!important}.dark .guess-error-message{background:#dc2626!important}.dark .bg-white{background-color:#18181b!important}.dark .border-gray-200{border-color:#3f3f46!important}.dark .text-gray-600{color:#a1a1aa!important}.dark .text-gray-700{color:#d4d4d8!important}.dark .compact-guess-row{background:#27272a!important}.dark .compact-guess-row .guess-label{color:#a1a1aa!important}.btn-shuffle{border-radius:var(--radius-lg);color:#746dec;cursor:pointer;letter-spacing:.05em;text-transform:uppercase;max-width:200px;transition:all .15s var(--ease-out);background:0 0;border:2px solid #746dec;margin:.5rem auto 0;padding:.5rem 1.25rem;font-size:.75rem;font-weight:600;display:block}.btn-shuffle:hover:not(:disabled){background:#746dec1a;border-color:#8680ee}.btn-shuffle:active:not(:disabled){transform:scale(.98)}.btn-shuffle:disabled{opacity:.4;cursor:not-allowed;color:#918baa;border-color:#918baa}.btn-shuffle:focus-visible{outline-offset:2px;outline:3px solid #746dec}.dark .btn-shuffle{color:#9b96f5;border-color:#9b96f5}.dark .btn-shuffle:hover:not(:disabled){background:#9b96f51a;border-color:#b0acf7}.dark .btn-shuffle:disabled{color:#71717a;border-color:#52525b}@media (max-width:375px) and (max-height:700px){.btn-shuffle{margin-top:.375rem;padding:.375rem 1rem;font-size:.6875rem}}.button-row{align-items:stretch;gap:.5rem;width:100%;max-width:400px;margin:0 auto;display:flex}.button-row .btn-primary{margin:0}.btn-shuffle-icon{border-radius:var(--radius-lg);cursor:pointer;width:52px;min-width:52px;transition:all .15s var(--ease-out);background:0 0;border:2px solid #746dec;flex-shrink:0;justify-content:center;align-items:center;padding:8px;display:flex}.btn-shuffle-icon img{width:28px;height:28px}.btn-shuffle-icon:hover:not(:disabled){background:#746dec1a;border-color:#8680ee}.btn-shuffle-icon:active:not(:disabled){transform:scale(.95)}.btn-shuffle-icon:disabled{opacity:.4;cursor:not-allowed;border-color:#918baa}.btn-shuffle-icon:focus-visible{outline-offset:2px;outline:3px solid #746dec}.dark .btn-shuffle-icon{border-color:#9b96f5}.dark .btn-shuffle-icon:hover:not(:disabled){background:#9b96f51a;border-color:#b0acf7}.dark .btn-shuffle-icon:disabled{border-color:#52525b}@media (max-width:375px) and (max-height:700px){.btn-shuffle-icon{width:44px;min-width:44px;padding:6px}.btn-shuffle-icon img{width:22px;height:22px}}.fixed-bottom-controls{z-index:40;padding:.75rem 1rem;padding-bottom:max(.75rem,env(safe-area-inset-bottom));background:#fff;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -2px 8px #0000001a}.fixed-bottom-controls .button-row{max-width:400px;margin:0 auto}.dark .fixed-bottom-controls{background:#18181b;box-shadow:0 -2px 8px #0006}.has-fixed-controls .letter-pairs-container{padding-bottom:80px}@media (max-width:640px){.has-fixed-controls .letter-pairs-container{max-height:none;overflow-y:visible}}@keyframes tutorial-tile-appear{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.tutorial-tile-appear{animation:tutorial-tile-appear .3s var(--ease-out)forwards}@keyframes tutorial-glow-flash{0%,to{opacity:1;box-shadow:0 0 0 4px #ffcd3c,0 0 16px 6px #ffcd3ccc}50%{box-shadow:none;opacity:.7}}.tutorial-tile-glow{animation:.6s ease-in-out infinite tutorial-glow-flash;transform:scale(1.08);border:3px solid #ffcd3c!important}.tutorial-word-highlight{color:#ffcd3c;text-shadow:0 0 12px #ffcd3ce6,0 0 20px #ffcd3c99;transition:all .3s var(--ease-out);font-weight:700;transform:scale(1.1)}.tutorial-tile-flip{animation:slot-cube-roll .8s var(--ease-in-out)forwards;transform-style:preserve-3d;backface-visibility:hidden}.tutorial-tile{transition:background-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}@media (prefers-reduced-motion:reduce){.tutorial-tile-appear,.tutorial-tile-glow,.tutorial-tile-flip{animation:none!important}.tutorial-word-highlight{transition:none!important;transform:none!important}}
