:root{--tile-size: 60px;--gap: 6px;--green: #6aaa64;--orange: #c9b458;--gray: #787c7e;--header-height: 56px;--ad-height: 50px}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Glacial Indifference,ui-sans-serif,system-ui,-apple-system,sans-serif;height:100%;width:100%;-webkit-overflow-scrolling:touch}body{overscroll-behavior:none;touch-action:pan-y;overflow-x:hidden}.app{min-height:100vh;width:100vw;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;position:relative;background:#fff}.ad-space{position:sticky;top:0;z-index:100;width:100%;height:var(--ad-height);background:#f5f5f5;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;justify-content:center}.ad-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#999;font-size:12px;background:#fafafa}.game-header{position:sticky;top:var(--ad-height);z-index:99;width:100%;height:var(--header-height);background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;justify-content:space-between;padding:0 12px}.header-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#f3f4f6;border-radius:8px;border:none;cursor:pointer;color:#111827;padding:0;transition:background-color .2s}.header-icon:hover{background:#e5e7eb}.header-icon:active{background:#d1d5db}.header-icon svg{width:20px;height:20px}.game-logo{font-family:Glacial Indifference,sans-serif;font-size:24px;font-weight:400;margin:0;color:#111827;letter-spacing:.5px;flex-shrink:1;min-width:0}.logo-green{color:var(--green)}.header-actions{display:flex;gap:8px;flex-shrink:0}.game-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:16px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;min-height:0}.game-status-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:10px}.moves-counter{font-size:14px;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:1px;text-align:center}.swap-hint{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;font-size:13px;font-weight:500;color:#6b7280;letter-spacing:.02em}.swap-hint-dismiss{padding:0;font-size:inherit;font-weight:600;color:#374151;background:none;border:none;border-radius:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.swap-hint-dismiss:hover{color:#111827}.new-version-banner{position:fixed;bottom:0;left:0;right:0;z-index:9999;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom));background:var(--green);color:#fff;box-shadow:0 -2px 12px #00000026}.new-version-banner-text{font-size:14px;font-weight:600}.new-version-banner-btn{padding:8px 16px;font-size:14px;font-weight:600;color:var(--green);background:#fff;border:none;border-radius:8px;cursor:pointer}.new-version-banner-btn:hover{background:#f0fdf4}.board{display:grid;gap:var(--gap);-webkit-user-select:none;user-select:none;min-height:200px;touch-action:none}.row{display:contents}.tile{width:var(--tile-size);height:var(--tile-size);display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:#f3f4f6;border:none;box-shadow:0 1px 2px #0000000f;font-weight:800;letter-spacing:1px;font-size:22px;cursor:grab;-webkit-user-select:none;user-select:none;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;touch-action:manipulation;-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent}.tile-drag-image{width:60px;height:60px;border-radius:12px;background:#f3f4f6;border:2px solid #e5e7eb;box-shadow:0 8px 24px #0003;font-weight:800;font-size:22px;display:none;align-items:center;justify-content:center;letter-spacing:1px}.tile.blank{visibility:hidden}.tile.tile-drag-origin{visibility:visible;background:#e5e7eb;box-shadow:0 1px 2px #0000000f;cursor:grabbing}.tile.tile-dragging-floating{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;border:none;font-weight:800;font-size:26px;letter-spacing:1px;visibility:hidden;transform:translate3d(-9999px,-9999px,0);will-change:transform;backface-visibility:hidden;box-shadow:0 20px 40px #00000038;z-index:1000;transition:none!important}.tile.tile-dragging-floating.green{background:var(--green);color:#fff}.tile.tile-dragging-floating.orange{background:var(--orange);color:#fff}.tile.tile-dragging-floating.gray{background:#e5e7eb;color:#111827}.tile.tile-dragging-floating:not(.green):not(.orange):not(.gray){background:#f3f4f6;color:#111827}.tile:active{cursor:grabbing;transform:translateY(1px)}.tile.selected{box-shadow:0 0 0 2px #60a5fa}.tile.swap-target{box-shadow:0 1px 3px #0000001a}.tile.dragging{opacity:.98;transform:scale(1.28) translateY(-10px);z-index:1000;box-shadow:0 20px 40px #00000038,0 0 0 3px #3b82f666;cursor:grabbing!important;transition:none!important;filter:brightness(1.03);font-size:26px}.tile.drop-target-active{z-index:50}.tile.just-swapped{animation:just-swapped-pulse .25s ease-out forwards}@keyframes just-swapped-pulse{0%{transform:scale(1.08)}to{transform:scale(1)}}.tile.green{background:var(--green);color:#fff;border-color:var(--green)}.tile.orange{background:var(--orange);color:#fff;border-color:var(--orange)}.tile.gray{background:#e5e7eb;color:#111827;border-color:var(--gray)}.tile.lost-black{background:#1a1a1a;color:#fff;border-color:#1a1a1a;opacity:.9}.tile.lost-black.lost-bounce{animation:lost-bounce .8s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes lost-bounce{0%{transform:scale(1)}25%{transform:scale(1.12)}55%{transform:scale(.96)}80%{transform:scale(1.04)}to{transform:scale(1);background:#1a1a1a;color:#fff;border-color:#1a1a1a}}.tile.green.solved-wave{animation:solved-rainbow-wave 1.2s cubic-bezier(.34,1.56,.64,1) forwards;background-image:linear-gradient(120deg,#f97316,#facc15,#22c55e,#0ea5e9,#6366f1,#ec4899);background-size:300% 300%}@keyframes solved-rainbow-wave{0%{transform:scale(1);background-position:0% 50%}25%{transform:scale(1.12);background-position:50% 50%}55%{transform:scale(.96);background-position:100% 50%}80%{transform:scale(1.04);background-position:200% 50%}to{transform:scale(1);background-position:200% 50%;background-image:none;background-color:var(--green);border-color:var(--green)}}@keyframes drop-target-pulse{0%{transform:scale(1.02);box-shadow:0 0 0 6px #10b98138,0 0 18px #10b9813d,0 4px 12px #0000001f}to{transform:scale(1.04);box-shadow:0 0 0 8px #10b98129,0 0 26px #10b98147,0 6px 16px #00000029}}.orientation-message{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;display:flex;align-items:center;justify-content:center;z-index:10000}.orientation-content{text-align:center;padding:32px}.orientation-content svg{margin-bottom:24px;color:#666}.orientation-content h2{font-family:Glacial Indifference,sans-serif;font-size:24px;margin:0 0 12px;color:#111827}.orientation-content p{font-size:16px;color:#666;margin:0}.btn{padding:8px 12px;border-radius:8px;border:1px solid #ccc;background:#f7f7f7;cursor:pointer;font-size:14px;font-family:Glacial Indifference,sans-serif}.btn:hover{background:#e5e7eb}.btn-icon{padding:8px 16px}.btn-primary{background:#3b82f6;color:#fff;border-color:#3b82f6;font-weight:600;padding:12px 24px}.btn-primary:hover{background:#2563eb}.btn-secondary{background:#f3f4f6;color:#374151;border:1px solid #d1d5db}.btn-secondary:hover{background:#e5e7eb}.btn-share{background:#10b981;color:#fff;border-color:#10b981;font-weight:600;padding:12px 24px;margin-right:8px}.btn-share:hover{background:#059669}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease;padding:12px;box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch}.modal{background:#fff;border-radius:16px;padding:32px;max-width:500px;width:100%;max-height:min(90vh,calc(100dvh - 24px));overflow-y:auto;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;animation:slideUp .3s ease;margin:auto;box-sizing:border-box}@media (max-width: 480px){.modal{padding:20px 16px;max-height:min(85vh,calc(100dvh - 24px))}.modal h2{font-size:22px;margin-bottom:16px}.modal-content{margin-bottom:16px;font-size:14px}}.modal h2{margin:0 0 20px;font-size:28px;text-align:center;color:#111827;font-family:Glacial Indifference,sans-serif}.modal-content{margin-bottom:24px;color:#374151;line-height:1.6}.modal-content ul{margin:12px 0;padding-left:24px}.modal-content li{margin:8px 0}.verse-ref{font-size:18px;margin-bottom:12px;color:#3b82f6}.verse-text{font-size:16px;font-style:italic;padding:16px;background:#f3f4f6;border-radius:8px;margin:16px 0;color:#1f2937}.stats-summary{display:flex;gap:24px;justify-content:center;margin-top:16px;padding-top:16px;border-top:1px solid #e5e7eb}.stats-summary p{margin:0;font-size:16px;font-weight:600}.modal-buttons{display:flex;gap:8px;margin-top:16px}.modal-buttons button{flex:1}.your-stats{text-align:center;padding:12px;background:#f9fafb;border-radius:8px;margin-top:16px}.your-stats p{margin:0;font-size:14px;color:#374151}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:20px}.stat-item{text-align:center;padding:16px;background:#f9fafb;border-radius:8px}.stat-value{font-size:32px;font-weight:700;color:#111827;margin-bottom:4px}.stat-label{font-size:12px;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.stats-details{margin:16px 0;padding:16px;background:#f9fafb;border-radius:8px}.stats-details p{margin:8px 0;font-size:14px}.history-section{margin-top:20px}.history-section h3{font-size:16px;margin:0 0 12px;color:#374151}.history-calendar{display:flex;gap:8px;justify-content:center}.calendar-day{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#f3f4f6;border-radius:6px;font-size:20px}.calendar-day.today{outline:2px solid #3b82f6;outline-offset:2px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.app-desktop{background:#f5f5f5}.desktop-layout{display:flex;max-width:1600px;margin:0 auto;min-height:100vh;background:#fff}.desktop-ad-left,.desktop-ad-right{width:300px;flex-shrink:0;background:#f5f5f5;position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden}.desktop-ad-left .ad-space,.desktop-ad-right .ad-space{position:relative;height:100%;width:100%;background:#f5f5f5}.desktop-ad-left .ad-space{border-right:1px solid #e0e0e0}.desktop-ad-right .ad-space{border-left:1px solid #e0e0e0}.desktop-ad-left .ad-placeholder,.desktop-ad-right .ad-placeholder{height:100%;width:100%;display:flex;align-items:center;justify-content:center;color:#999;font-size:14px;background:#fafafa;padding:20px;text-align:center}.desktop-game-center{flex:1;display:flex;flex-direction:column;min-width:0;background:#fff;max-width:800px;margin:0 auto}.desktop-game-center .game-header{position:sticky;top:0;z-index:99}.desktop-game-center .game-content{flex:1;padding:24px;display:flex;flex-direction:column;align-items:center}.app-mobile{display:flex;flex-direction:column;height:100vh;height:100svh;height:100dvh;overflow:hidden;position:fixed;top:0;right:0;bottom:0;left:0;width:100%;box-sizing:border-box;padding-bottom:calc(12px + env(safe-area-inset-bottom,0))}.app-mobile .game-content{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}.app-mobile .ad-space{position:sticky;top:0;z-index:100}.app-mobile .game-header{position:sticky;top:var(--ad-height);z-index:99}@media (max-width: 1024px){.app-desktop .desktop-layout{flex-direction:column}.app-desktop .desktop-ad-left,.app-desktop .desktop-ad-right{width:100%;height:auto;position:relative;display:none}.app-desktop .desktop-game-center{width:100%;max-width:100%}}.app-footer{flex-shrink:0;width:100%;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0));text-align:center;font-size:12px;color:#666;background:#fff;border-top:1px solid #e5e7eb;margin-top:auto}@media (max-width: 768px){.app-footer{padding:12px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0));font-size:11px;line-height:1.4}.app-footer .footer-bug-link{margin-bottom:4px}}.footer-bug-link{color:#16a34a;text-decoration:none;display:inline-block;margin-bottom:8px}.footer-bug-link:hover{text-decoration:underline}.footer-copyright{margin:0;line-height:1.5}.footer-copyright a{color:#16a34a;text-decoration:none}.footer-copyright a:hover{text-decoration:underline}