:root{--tile-size: 60px;--gap: 6px;--green: #6aaa64;--orange: #c9b458;--gray: #787c7e;--header-height: 56px;--ds-bg: #fdfaf3;--ds-bg2: #f2ede0;--ds-ink: #1a1510;--ds-ink2: rgba(26, 21, 16, .55);--ds-ink3: rgba(26, 21, 16, .3);--ds-rule: rgba(0, 0, 0, .08);--ds-gold: #9a6a00}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:DM Sans,ui-sans-serif,system-ui,-apple-system,sans-serif;height:100%;width:100%;-webkit-overflow-scrolling:touch;-webkit-font-smoothing:antialiased;background-color:var(--ds-bg);color:var(--ds-ink)}body{overscroll-behavior:none;touch-action:pan-y;overflow-x:hidden}.app{min-height:100vh;min-height:100dvh;width:100%;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;position:relative;background:var(--ds-bg)}.ds-nav-bar{position:sticky;top:0;z-index:50;width:100%;background:var(--ds-bg)}.ds-nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;gap:.5rem;flex-wrap:wrap;border-bottom:1px solid var(--ds-rule);background:var(--ds-bg);max-width:640px;margin:0 auto;width:100%}.ds-nav-logo{font-family:Fraunces,Georgia,serif;font-size:1.2rem;font-weight:900;color:var(--ds-ink);text-decoration:none;letter-spacing:-.02em;line-height:1;flex-shrink:0}.ds-nav-logo:hover{opacity:.9}.ds-nav-logo em{color:var(--ds-gold);font-style:italic}.ds-nav-r{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-left:auto;flex-shrink:0}.ds-sub-btn{display:inline-flex;align-items:center;gap:.4rem;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:#25d366;color:#fff;padding:.48rem .95rem;border-radius:100px;text-decoration:none;transition:opacity .2s,background .2s;border:none;cursor:pointer;white-space:nowrap;line-height:1}.ds-sub-btn:hover{opacity:.92;background:#20bd5a}.ds-sub-btn svg{flex-shrink:0;display:block}.ds-nav-icon{display:inline-flex;align-items:center;justify-content:center;padding:.25rem;border-radius:9999px;border:none;background:transparent;color:var(--ds-ink2);cursor:pointer;transition:color .2s,background .2s;line-height:0}.ds-nav-icon:hover{color:var(--ds-gold)}.ds-nav-icon.is-active{color:var(--ds-gold);background:#9a6a0017}.game-main{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;width:100%;max-width:640px;margin:0 auto;padding:.25rem 1rem 1rem}@media (min-width: 768px){.game-main{padding:.5rem 1rem 1.5rem}}.game-title-block{text-align:center;margin:.75rem 0 .5rem;padding:0 .25rem}.game-title{font-family:Fraunces,Georgia,serif;font-size:1.75rem;font-weight:900;letter-spacing:-.02em;line-height:1;margin:0;color:var(--ds-ink)}.game-title-accent{color:var(--ds-gold);font-style:italic}@media (min-width: 640px){.game-title{font-size:2rem}}.game-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:8px 0 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}.swaps-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}.board-wide{--tile-size: 52px}@media (max-width: 480px){.board-wide{--tile-size: 44px}}.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:DM Sans,ui-sans-serif,system-ui,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:DM Sans,ui-sans-serif,system-ui,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}.btn:disabled{opacity:.6;cursor:not-allowed}.btn:disabled:hover{background:inherit}.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:DM Sans,ui-sans-serif,system-ui,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-block{background:#f3f4f6;border-radius:8px;margin:16px 0;padding:16px 16px 14px}.verse-text{font-size:16px;font-style:italic;margin:0;padding:0;color:#1f2937}.verse-text-collapsed{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.verse-read-more{display:block;width:100%;margin:14px 0 0;padding:4px 0 0;border:none;background:none;font-size:14px;font-weight:600;color:#3b82f6;cursor:pointer;text-align:center;text-decoration:underline}.verse-read-more:hover{color:#2563eb}.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-two{max-width:100%}.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)}}