:root{--bg-color: #f8fafc;--text-color: #0f172a;--hex-bg: #ffffff;--hex-border: #cbd5e1;--hex-hover: #3b82f6;--initial-text: #64748b;--filled-text: #0f172a}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-color);color:var(--text-color);overflow:hidden;-webkit-user-select:none;user-select:none}.app-container{display:flex;flex-direction:column;height:100vh;max-width:600px;margin:0 auto}.game-wrapper{display:flex;flex-direction:column;height:100%;padding:.4rem}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.header h2{margin:0;font-size:1.5rem;background:linear-gradient(135deg,#60a5fa,#c084fc);-webkit-background-clip:text;color:transparent}.stats{font-size:.9rem;color:#94a3b8}.board-area{flex:1;display:flex;justify-content:center;align-items:center;min-height:0}.hex-board-container{width:100%;height:100%;max-height:100vw}.hex-path{transition:stroke .15s ease,stroke-width .15s ease}.selected-group .hex-path{filter:drop-shadow(0 0 8px rgba(0,0,0,.15))}@keyframes selectedPulse{0%,to{stroke-width:3}50%{stroke-width:5}}.selected-group .hex-path{animation:selectedPulse 1.5s ease-in-out infinite}@keyframes numberPop{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.3);opacity:1}to{transform:scale(1);opacity:1}}@keyframes errorFlash{0%{stroke:#ef4444;stroke-width:4}25%{stroke:#fbbf24;stroke-width:6}50%{stroke:#ef4444;stroke-width:4}75%{stroke:#fbbf24;stroke-width:6}to{stroke:#ef4444;stroke-width:3}}@keyframes hintGlow{0%,to{stroke:#fbbf24;stroke-width:3;filter:drop-shadow(0 0 4px rgba(251,191,36,.5))}50%{stroke:#f59e0b;stroke-width:5;filter:drop-shadow(0 0 12px rgba(251,191,36,.9))}}.cell-anim-pop .hex-text{transform-box:fill-box;transform-origin:center;animation:numberPop .3s cubic-bezier(.34,1.56,.64,1)}.cell-anim-error .hex-path{animation:errorFlash .5s ease}.cell-anim-hint .hex-path{animation:hintGlow 1.2s ease-in-out infinite}.cell-anim-shake .hex-path{transform-box:fill-box;transform-origin:center;animation:cellShake .5s ease}@keyframes cellShake{0%,to{transform:scale(1);stroke-width:1}20%{transform:scale(1.12);stroke:#3b82f6;stroke-width:4}40%{transform:scale(.95)}60%{transform:scale(1.08);stroke:#3b82f6;stroke-width:3}80%{transform:scale(.98)}}.hex-text{font-size:24px;font-weight:700;pointer-events:none}.cell-initial{fill:var(--initial-text);font-size:22px}.note-text{font-size:13px;fill:var(--initial-text);font-weight:500;pointer-events:none}.cell-filled{fill:var(--filled-text);stroke:#0000004d;stroke-width:.5px;paint-order:stroke fill}[data-theme=ocean] .cell-filled{stroke:#0009;stroke-width:1px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}.text-error{fill:#ef4444}.numpad{margin-top:.15rem;display:flex;flex-direction:column;gap:.35rem}.numpad-row{display:flex;justify-content:space-between;gap:.5rem}.numpad-row-actions{display:flex;justify-content:center;gap:.3rem}.num-btn{flex:1;background:#0000000a;border:1px solid rgba(0,0,0,.08);border-radius:8px;color:var(--text-color);font-size:1.25rem;padding:.4rem 0;cursor:pointer;transition:background .1s,transform .1s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.num-btn:active{background:#00000026;transform:scale(.9)}.num-btn.completed{opacity:.3;cursor:not-allowed;transform:none!important;background:#00000005}.action-btn{background:#0000000d;border:1px solid rgba(0,0,0,.05);border-radius:8px;color:var(--text-color);padding:.3rem .5rem;font-size:.78rem;cursor:pointer;transition:background .1s;white-space:nowrap;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.action-btn:disabled{opacity:.5;cursor:not-allowed}.action-btn.pencil.active{background:var(--hex-hover);color:#fff;border-color:var(--hex-hover)}.mode-switch{display:flex;gap:5px;background:var(--hex-bg);padding:4px;border-radius:12px;border:1px solid var(--hex-border)}.mode-switch button{background:transparent;border:none;padding:8px 16px;border-radius:8px;color:var(--initial-text);cursor:pointer;font-weight:600;font-size:14px;transition:all .2s}.mode-switch button.active{background:var(--hex-hover);color:#fff;box-shadow:0 4px 10px #0000001a}.action-btn.delete{background:#ef44441a;color:#ef4444}.victory-modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#00000073;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:100;animation:fadeIn .3s ease}.victory-modal:before,.victory-modal:after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:101}.victory-modal:before{animation:fireworkBurst1 1.8s ease-out forwards;box-shadow:0 0 0 2px #f59e0b,0 0 0 2px #ef4444,0 0 0 2px #3b82f6,0 0 0 2px #22c55e,0 0 0 2px #8b5cf6,0 0 0 2px #06b6d4,0 0 0 2px #ec4899,0 0 0 2px #f97316}.victory-modal:after{animation:fireworkBurst2 1.8s .15s ease-out forwards;opacity:0;box-shadow:0 0 0 2px #fbbf24,0 0 0 2px #fb7185,0 0 0 2px #60a5fa,0 0 0 2px #4ade80,0 0 0 2px #a78bfa,0 0 0 2px #22d3ee,0 0 0 2px #f472b6,0 0 0 2px #fb923c}@keyframes fireworkBurst1{0%{box-shadow:0 0 0 2px #f59e0b,0 0 0 2px #ef4444,0 0 0 2px #3b82f6,0 0 0 2px #22c55e,0 0 0 2px #8b5cf6,0 0 0 2px #06b6d4,0 0 0 2px #ec4899,0 0 0 2px #f97316;opacity:1}60%{box-shadow:-80px -120px 0 3px #f59e0b,80px -110px 0 3px #ef4444,-120px -40px 0 2px #3b82f6,120px -50px 0 2px #22c55e,-60px -140px 0 3px #8b5cf6,100px -20px 0 2px #06b6d4,-130px 20px 0 2px #ec4899,70px -130px 0 3px #f97316;opacity:1}to{box-shadow:-100px -160px 0 1px #f59e0b,100px -150px 0 1px #ef4444,-160px -60px 0 1px #3b82f6,160px -70px 0 1px #22c55e,-80px -180px 0 1px #8b5cf6,140px -30px 0 1px #06b6d4,-170px 30px 0 1px #ec4899,90px -170px 0 1px #f97316;opacity:0}}@keyframes fireworkBurst2{0%{box-shadow:0 0 0 2px #fbbf24,0 0 0 2px #fb7185,0 0 0 2px #60a5fa,0 0 0 2px #4ade80,0 0 0 2px #a78bfa,0 0 0 2px #22d3ee,0 0 0 2px #f472b6,0 0 0 2px #fb923c;opacity:1}60%{box-shadow:50px -100px 0 3px #fbbf24,-90px -80px 0 2px #fb7185,30px -130px 0 3px #60a5fa,-110px -20px 0 2px #4ade80,110px -70px 0 3px #a78bfa,-40px -140px 0 2px #22d3ee,130px 10px 0 2px #f472b6,-70px -120px 0 3px #fb923c;opacity:1}to{box-shadow:70px -140px 0 1px #fbbf24,-120px -110px 0 1px #fb7185,40px -180px 0 1px #60a5fa,-150px -30px 0 1px #4ade80,150px -100px 0 1px #a78bfa,-50px -190px 0 1px #22d3ee,170px 15px 0 1px #f472b6,-90px -160px 0 1px #fb923c;opacity:0}}.vc-new{background:#fff;border-radius:16px;width:80%;max-width:270px;padding:10px 12px;display:flex;flex-direction:column;align-items:center;box-shadow:0 20px 60px #00000040;animation:popIn .5s cubic-bezier(.175,.885,.32,1.275);color:#1e293b;font-size:.8rem}.vc-top-bar{display:flex;width:100%;align-items:center;margin-bottom:8px}.vc-icon-btn{background:none;border:none;font-size:1.2rem;cursor:pointer;color:#64748b;padding:4px 8px;border-radius:8px;transition:background .2s}.vc-icon-btn:hover{background:#0000000d}.vc-congrats{font-size:1.1rem;font-weight:800;margin-bottom:4px;background:linear-gradient(135deg,#f59e0b,#ef4444,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent}.vc-hex-flower{margin-bottom:8px}.vc-stats-grid{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-bottom:6px}.vc-stat-item{display:flex;flex-direction:column;align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:2px 4px;gap:1px;font-size:.75rem}.vc-stat-clickable{transition:background .15s,transform .15s}.vc-stat-clickable:hover{background:#e0e7ff}.vc-stat-clickable:active{transform:scale(.97)}[data-theme=ocean] .vc-stat-clickable:hover{background:#162d4d}.vc-stat-label{font-size:.75rem;color:#64748b;font-weight:600}.vc-stat-value{font-size:.95rem;font-weight:700;color:#1e293b}.vc-actions{width:100%;display:flex;flex-direction:column;gap:10px}.share-btn{background:linear-gradient(135deg,#3b82f6,#8b5cf6);border:none;padding:1rem 2rem;border-radius:12px;color:#fff;font-size:1.1rem;font-weight:600;cursor:pointer;margin-top:1.5rem;transition:transform .2s}.share-btn:hover{transform:scale(1.05)}@keyframes popIn{0%{opacity:0;transform:scale(.85) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.main-menu-container{display:flex;align-items:center;justify-content:center;height:100vh;background:linear-gradient(135deg,#f8fafc,#e2e8f0)}.menu-content{text-align:center;padding:2rem;background:#fff;border-radius:24px;box-shadow:0 20px 40px #00000014}.game-title{font-size:3rem;margin:0;background:linear-gradient(135deg,#3b82f6,#c084fc);-webkit-background-clip:text;color:transparent}.game-subtitle{color:#64748b;margin-bottom:2rem}.menu-buttons{display:flex;flex-direction:column;gap:1rem}.primary-btn{background:#fff;border:2px solid #e2e8f0;padding:1rem;border-radius:16px;font-size:1.2rem;font-weight:600;color:#0f172a;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:.5rem}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px #0000000d;border-color:#3b82f6}.btn-desc{font-size:.8rem;font-weight:400;color:#64748b}.profile-btn{margin-top:2rem;background:transparent;border:none;color:#64748b;font-size:1rem;cursor:pointer}.profile-btn:hover{color:#3b82f6;text-decoration:underline}.profile-container{max-width:600px;margin:0 auto;padding:1.5rem;padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,0px) + 60px);height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch}.profile-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.back-btn,.back-to-menu-btn{background:transparent;border:none;color:#3b82f6;font-size:1rem;cursor:pointer;font-weight:600}.stats-card,.settings-card{background:#fff;padding:1.5rem;border-radius:20px;margin-bottom:1.5rem;box-shadow:0 10px 30px #0000000d}.stat-row,.setting-item{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;border-bottom:1px solid #f1f5f9}.stat-row:last-child,.setting-item:last-child{border-bottom:none}.stat-value{font-weight:600;color:#3b82f6}.recent-games-list{display:flex;flex-direction:column;gap:0}.recent-game-row{display:flex;justify-content:space-between;align-items:center;padding:.6rem 0;border-bottom:1px solid #f1f5f9;gap:8px}.recent-game-row:last-child{border-bottom:none}[data-theme=ocean] .recent-game-row{border-bottom-color:#ffffff0f}.badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.badge-item{display:flex;flex-direction:column;align-items:center;padding:8px 4px;border-radius:12px;cursor:pointer;position:relative;transition:background .15s,transform .15s;text-align:center}.badge-item:active{transform:scale(.95)}.badge-item.unlocked{background:#3b82f60f}.badge-item.locked{opacity:.4}.badge-item.locked .badge-icon{filter:grayscale(1)}.badge-item.selected{background:#3b82f61f;border-radius:12px}.badge-icon{font-size:1.5rem;line-height:1;margin-bottom:2px;position:relative;display:inline-flex;align-items:center;justify-content:center}.badge-label{position:absolute;bottom:-2px;right:-6px;font-size:.5rem;font-weight:800;background:#3b82f6;color:#fff;border-radius:6px;padding:0 3px;line-height:1.3;min-width:14px;text-align:center;box-shadow:0 1px 3px #0003}.badge-name{font-size:.6rem;font-weight:600;line-height:1.2;color:var(--text-color, #1e293b)}.badge-lock{font-size:.55rem;margin-top:1px}.badge-tooltip{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%);background:#1e293b;color:#fff;padding:5px 8px;border-radius:8px;font-size:.65rem;white-space:nowrap;z-index:10;box-shadow:0 4px 12px #00000026;animation:fadeIn .15s ease}.badge-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:#1e293b}[data-theme=ocean] .badge-item.unlocked{background:#60a5fa1f}[data-theme=ocean] .badge-item.selected{background:#60a5fa33}[data-theme=ocean] .badge-tooltip{background:#334155}[data-theme=ocean] .badge-tooltip:after{border-top-color:#334155}.achievement-toast-container{position:fixed;top:16px;left:50%;transform:translate(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;pointer-events:none}.achievement-toast{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#1e293b,#334155);color:#fff;padding:10px 16px;border-radius:14px;box-shadow:0 8px 24px #00000040;animation:toastSlideIn .4s cubic-bezier(.34,1.56,.64,1);min-width:220px;max-width:300px}.achievement-toast-icon{font-size:1.8rem;flex-shrink:0}.achievement-toast-text{display:flex;flex-direction:column;gap:1px}.achievement-toast-title{font-size:.65rem;opacity:.7;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.achievement-toast-name{font-size:.95rem;font-weight:700}.achievement-toast-desc{font-size:.7rem;opacity:.6}@keyframes toastSlideIn{0%{transform:translateY(-30px);opacity:0}to{transform:translateY(0);opacity:1}}.tut-overlay{position:relative;z-index:50;display:flex;justify-content:center;pointer-events:none}.tut-bubble{margin-top:8px;background:linear-gradient(135deg,#1e40af,#3b82f6);color:#fff;padding:12px 18px;border-radius:16px;box-shadow:0 6px 20px #3b82f659;text-align:center;max-width:320px;animation:tutBubbleIn .4s cubic-bezier(.34,1.56,.64,1);pointer-events:auto}.tut-bubble p{margin:0 0 8px;font-size:.9rem;line-height:1.4}.tut-next-btn{background:#fff;color:#1e40af;border:none;padding:8px 24px;border-radius:20px;font-weight:700;font-size:.9rem;cursor:pointer;transition:transform .15s}.tut-next-btn:active{transform:scale(.95)}.tut-btn-shake{animation:btnShake .5s ease}@keyframes btnShake{0%,to{transform:translate(0)}15%{transform:translate(-8px)}30%{transform:translate(7px)}45%{transform:translate(-5px)}60%{transform:translate(4px)}75%{transform:translate(-2px)}}.tut-header{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 0}.tut-header h2{margin:0;font-size:1.1rem}.tut-step-badge{background:#3b82f6;color:#fff;font-size:.7rem;font-weight:700;padding:2px 10px;border-radius:12px}.tut-complete-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#00000080;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease}.tut-complete-card{background:#fff;border-radius:20px;padding:32px 40px;text-align:center;box-shadow:0 16px 48px #00000040;animation:tutCompleteIn .5s cubic-bezier(.34,1.56,.64,1)}.tut-complete-emoji{font-size:3rem;display:block;margin-bottom:8px;animation:tutBounce .6s ease .3s both}.tut-complete-card p{margin:0;font-size:1.1rem;font-weight:700;color:#1e293b}[data-theme=ocean] .tut-complete-card{background:#1e293b}[data-theme=ocean] .tut-complete-card p{color:#e2e8f0}@keyframes tutBubbleIn{0%{transform:translateY(-20px) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes tutCompleteIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes tutBounce{0%{transform:scale(0)}50%{transform:scale(1.3)}to{transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.toggle-btn{background:#e2e8f0;border:none;padding:.5rem 1rem;border-radius:20px;cursor:pointer;font-weight:600;color:#64748b;transition:all .2s}.toggle-btn.active{background:#22c55e;color:#fff}.extra-links{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}.text-btn{text-align:left;background:none;border:none;color:#64748b;font-size:1rem;cursor:pointer}.victory-card-inner{background-color:#fff;border-radius:16px;width:90%;max-width:360px;box-shadow:0 20px 40px #00000026;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#334155;display:flex;flex-direction:column}.vc-header{background-color:#f8fafc;padding:16px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #e2e8f0;border-top-left-radius:16px;border-top-right-radius:16px}.vc-title{font-weight:700;font-size:1.1rem;letter-spacing:.5px;color:#1e293b}.vc-cal-btn{background:none;border:none;color:#64748b;font-size:1.2rem;cursor:pointer;opacity:.8;transition:opacity .2s}.vc-cal-btn:hover{opacity:1;color:#3b82f6}.vc-body{padding:30px 20px;display:flex;flex-direction:column;align-items:center;gap:24px}.vc-hex-abstract{display:flex;flex-direction:column;align-items:center;gap:2px;opacity:.8}.hex-row{display:flex;gap:4px}.h{width:32px;height:38px;background-color:#f1f5f9;border:2px solid #cbd5e1;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}.vc-hex-graphic{margin-bottom:10px}.vc-tiles{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}.vc-tile{background-color:#93c5fd;color:#1e3a8a;width:36px;height:40px;display:flex;justify-content:center;align-items:center;font-weight:800;font-size:1.2rem;border-radius:6px;box-shadow:0 4px #60a5fa}.vc-hint-note{font-size:.8rem;color:#94a3b8;margin-top:-10px;font-style:italic}.vc-footer{width:100%;margin-top:10px}.vc-btn{width:100%;padding:8px;border:none;border-radius:8px;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .2s}.vc-btn.share-btn{background-color:#3b82f6;color:#fff;box-shadow:none}.vc-btn.share-btn.success{background-color:#22c55e;color:#fff}.vc-btn.share-btn:active{background-color:#2563eb}.vc-btn.primary{background-color:#8b5cf6;color:#fff;box-shadow:0 4px #7c3aed}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#00000080;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:200;animation:fadeIn .25s ease}.modal-content{background:#fff;border-radius:20px;box-shadow:0 20px 60px #00000040;position:relative;animation:popIn .35s cubic-bezier(.175,.885,.32,1.275)}.close-btn{position:absolute;top:14px;right:14px;background:none;border:none;font-size:1.2rem;cursor:pointer;color:#64748b;padding:4px 8px;border-radius:8px;transition:background .2s}.close-btn:hover{background:#0000000f}.calendar-modal{width:90%;max-width:400px;padding:24px}.cal-header{display:flex;justify-content:space-between;align-items:center;margin:1rem 0;font-weight:700;font-size:1.2rem}.cal-header .nav-btn{background:#f1f5f9;border:none;width:36px;height:36px;border-radius:50%;cursor:pointer;font-weight:700;font-size:1.1rem;color:#334155;display:flex;align-items:center;justify-content:center}.cal-header .nav-btn:disabled{opacity:.3;cursor:not-allowed}.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:1rem}.cal-weekday{text-align:center;font-size:.8rem;font-weight:600;color:#64748b;margin-bottom:8px}.cal-day{aspect-ratio:1;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:all .2s}.cal-day:hover:not(.disabled):not(.empty){background:#e0e7ff;border-color:#818cf8}.cal-day.empty{background:transparent;border:none;cursor:default}.cal-day.disabled{background:#f1f5f9;color:#cbd5e1;cursor:not-allowed;border-style:dashed}.cal-day .day-number{font-weight:600;font-size:1rem}.cal-day.completed{background:#ecfdf5;border-color:#34d399;color:#065f46}.cal-day .day-stamp{font-size:.8rem;position:absolute;bottom:2px}.highlighted-group .hex-path{fill:#facc1566!important;stroke:#facc15!important;stroke-width:3px!important;filter:url(#glow)!important}[data-theme=ocean]{--bg-color: #0b1a2e;--text-color: #e2e8f0;--hex-bg: #132d4f;--hex-border: #1e3d5f;--hex-hover: #3b82f6;--initial-text: #ffffff;--filled-text: #FFD700}[data-theme=ocean] body{background-color:var(--bg-color)}[data-theme=ocean] .main-menu-container{background:linear-gradient(135deg,#0b1a2e,#132d4f)}[data-theme=ocean] .menu-content{background:#132d4fe6;border:1px solid rgba(59,130,246,.2);box-shadow:0 20px 60px #0006}[data-theme=ocean] .game-subtitle{color:#94a3b8}[data-theme=ocean] .primary-btn{background:#132d4f;border-color:#1e3d5f;color:#e2e8f0}[data-theme=ocean] .primary-btn:hover{border-color:#3b82f6;box-shadow:0 10px 20px #3b82f633}[data-theme=ocean] .btn-desc{color:#64748b}[data-theme=ocean] .profile-btn{color:#94a3b8}[data-theme=ocean] .profile-btn:hover{color:#60a5fa}[data-theme=ocean] .header h2{background:linear-gradient(135deg,#60a5fa,#38bdf8);-webkit-background-clip:text;color:transparent}[data-theme=ocean] .stats{color:#64748b}[data-theme=ocean] .num-btn{background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:#e2e8f0}[data-theme=ocean] .num-btn:hover,[data-theme=ocean] .num-btn:active{background:#ffffff1f}[data-theme=ocean] .num-btn.completed{background:#ffffff05;opacity:.25}[data-theme=ocean] .action-btn{background:#ffffff0f;border-color:#ffffff1a;color:#e2e8f0}[data-theme=ocean] .action-btn.delete{background:#ef444426;color:#f87171}[data-theme=ocean] .action-btn.pencil.active{background:#3b82f6;color:#fff;border-color:#3b82f6}[data-theme=ocean] .mode-switch{background:#132d4f;border-color:#1e3d5f}[data-theme=ocean] .mode-switch button{color:#64748b}[data-theme=ocean] .mode-switch button.active{background:#3b82f6;color:#fff;box-shadow:0 4px 10px #3b82f64d}[data-theme=ocean] .victory-modal{background:#0009}[data-theme=ocean] .share-btn{background:linear-gradient(135deg,#3b82f6,#0ea5e9)}[data-theme=ocean] .note-text{fill:#ffffffb3}[data-theme=ocean] .text-error{fill:#f87171}[data-theme=ocean] .profile-container{background:var(--bg-color)}[data-theme=ocean] .stats-card,[data-theme=ocean] .settings-card{background:#132d4f;box-shadow:0 10px 30px #0000004d;color:#e2e8f0}[data-theme=ocean] .stat-row,[data-theme=ocean] .setting-item{border-bottom-color:#ffffff0f}[data-theme=ocean] .stat-value{color:#60a5fa}[data-theme=ocean] .toggle-btn{background:#1e3d5f;color:#94a3b8}[data-theme=ocean] .toggle-btn.active{background:#22c55e;color:#fff}[data-theme=ocean] .back-btn{color:#60a5fa}[data-theme=ocean] .text-btn{color:#94a3b8}[data-theme=ocean] .modal-overlay{background:#000000a6}[data-theme=ocean] .modal-content{background:#132d4f;color:#e2e8f0;box-shadow:0 20px 60px #00000080}[data-theme=ocean] .close-btn{color:#94a3b8}[data-theme=ocean] .close-btn:hover{background:#ffffff14}[data-theme=ocean] .calendar-modal{background:#132d4f;color:#e2e8f0}[data-theme=ocean] .cal-header .nav-btn{background:#1e3d5f;color:#e2e8f0}[data-theme=ocean] .cal-day{background:#1e3d5f;border-color:#2d4a6f;color:#e2e8f0}[data-theme=ocean] .cal-day:hover:not(.disabled):not(.empty){background:#3b82f64d;border-color:#3b82f6}[data-theme=ocean] .cal-day.completed{background:#22c55e26;border-color:#22c55e;color:#4ade80}[data-theme=ocean] .cal-day.disabled{background:#132d4f;color:#334155}[data-theme=ocean] .cal-weekday{color:#64748b}[data-theme=ocean] .vc-new{background:#132d4f;color:#e2e8f0;box-shadow:0 20px 60px #00000080}[data-theme=ocean] .vc-icon-btn{color:#94a3b8}[data-theme=ocean] .vc-icon-btn:hover{background:#ffffff14}[data-theme=ocean] .vc-stat-item{background:#0b1a2e;border-color:#1e3d5f}[data-theme=ocean] .vc-stat-label{color:#64748b}[data-theme=ocean] .vc-stat-value{color:#e2e8f0}[data-theme=ocean] .vc-btn.share-btn{background-color:#3b82f6;color:#fff;box-shadow:none}[data-theme=ocean] .vc-btn.share-btn.success{background-color:#22c55e;color:#fff}[data-theme=ocean] .vc-btn.primary{background-color:#7c3aed;box-shadow:0 4px #6d28d9}.tutorial-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-color, #f8f9fa);padding:1rem}.tutorial-content{max-width:400px;width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem}.tutorial-header{display:flex;align-items:center;justify-content:space-between;width:100%}.tutorial-header h2{margin:0;font-size:1.3rem;color:var(--text-color)}.tutorial-step-indicator{font-size:.8rem;color:var(--text-secondary, #64748b);font-weight:600}.tutorial-progress{width:100%;height:4px;background:#00000014;border-radius:2px;overflow:hidden}.tutorial-progress-fill{height:100%;background:var(--brand-gradient, linear-gradient(135deg, #f59e0b, #ef4444));border-radius:2px;transition:width .4s ease}.tutorial-board{display:flex;justify-content:center;width:100%;padding:.5rem 0}.tutorial-instruction{text-align:center;padding:.75rem 1rem;background:#3b82f614;border-radius:12px;border:1px solid rgba(59,130,246,.15);width:100%}.tutorial-instruction p{margin:0;font-size:.95rem;line-height:1.5;color:var(--text-color)}.tutorial-numpad{display:flex;gap:.4rem;justify-content:center;width:100%}.tutorial-numpad .num-btn{flex:1;max-width:48px;font-size:1.2rem;padding:.5rem 0}.tutorial-hint-btn:not(:disabled){animation:tutorialBtnPulse 1.5s infinite;border-color:#3b82f6!important}.tutorial-actions{display:flex;gap:.75rem;width:100%;justify-content:space-between}.tutorial-skip-btn{padding:.6rem 1.5rem;border:1px solid rgba(0,0,0,.1);border-radius:10px;background:transparent;color:var(--text-secondary, #64748b);font-size:.9rem;cursor:pointer}.tutorial-next-btn{flex:1;padding:.6rem 1.5rem;border:none;border-radius:10px;background:var(--brand-gradient, linear-gradient(135deg, #f59e0b, #ef4444));color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;transition:opacity .2s,transform .2s}.tutorial-next-btn:hover{transform:translateY(-1px)}.tutorial-next-btn.disabled{opacity:.4;cursor:not-allowed;transform:none}.tutorial-pulse{animation:tutorialPulse 1.2s infinite}@keyframes tutorialPulse{0%,to{stroke-opacity:1}50%{stroke-opacity:.3}}@keyframes tutorialBtnPulse{0%,to{box-shadow:0 0 #3b82f666}50%{box-shadow:0 0 0 6px #3b82f600}}@media (max-width: 375px){.game-wrapper{padding:.5rem}.header h2{font-size:1rem}.stats{font-size:.75rem}.numpad{gap:.25rem}.num-btn{font-size:1.1rem;padding:.35rem 0;border-radius:6px}.action-btn{padding:.3rem .4rem;font-size:.68rem}.numpad-row-actions{gap:.2rem}.game-title{font-size:2.2rem}.menu-content{padding:1.2rem}.primary-btn{padding:.75rem;font-size:1rem}.btn-desc{font-size:.7rem}.mode-switch button{padding:6px 10px;font-size:12px}}@media (max-height: 640px){.game-wrapper{padding:.3rem .5rem}.header{margin-bottom:.15rem}.numpad{margin-top:0;gap:.15rem}.num-btn{padding:.25rem 0;font-size:1rem}.action-btn{padding:.2rem .45rem;font-size:.7rem}.numpad-row-actions{gap:.15rem}.hex-board-container{max-height:52vh}.board-area{min-height:0}}@media (min-height: 800px) and (max-width: 420px){.board-area{flex:1.2}.hex-board-container{max-height:52vh}}@media (min-width: 768px){.app-container{max-width:700px}.game-wrapper{padding:1.5rem 2rem}.num-btn{font-size:1.5rem;padding:.7rem 0;border-radius:10px}.action-btn{padding:.5rem 1rem;font-size:.9rem;border-radius:10px}.numpad-row-actions{gap:.5rem}.numpad-row{gap:.6rem}.hex-text{font-size:28px}.cell-initial{font-size:26px}.note-text{font-size:13px}.game-title{font-size:3.5rem}.menu-content{padding:3rem}.vc-new{max-width:420px;padding:28px}.profile-container{max-width:700px}}