:root{--navy: #0a1428;--navy-light: #1a2740;--cream: #e8d9b8;--cream-dim: #b8a888;--orange: #ff9a3c;--orange-dim: #c47020;--rock: #2a2520;--font: "Cormorant Garamond", "Iowan Old Style", "Apple Garamond", Georgia, serif;--font-ui: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:var(--navy);color:var(--cream);font-family:var(--font);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}#game{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:grab}#game:active{cursor:grabbing}.hidden{display:none!important}#splash{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#0a142899,#0a1428f2 70%);text-align:center;padding:2rem;z-index:10;animation:fadeIn 1.2s ease-out}#splash h1{font-size:clamp(3rem,12vw,6rem);font-weight:400;letter-spacing:.08em;color:var(--cream);text-shadow:0 0 40px rgba(255,154,60,.4);margin-bottom:1rem}#splash .tagline{font-size:clamp(1rem,3.5vw,1.4rem);font-style:italic;color:var(--cream-dim);margin-bottom:1.5rem;max-width:32ch;line-height:1.5}.splash-steps{list-style:none;padding:0;margin:0 0 1.5rem;display:flex;flex-direction:column;gap:.5rem;max-width:360px}.splash-steps li{display:flex;align-items:center;gap:.7rem;font-size:.95rem;color:var(--cream);text-align:left;font-style:italic;opacity:.9}.splash-steps li span{flex-shrink:0;width:1.5rem;height:1.5rem;border:1px solid var(--orange);color:var(--orange);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-size:.75rem;font-style:normal}#splash button{background:transparent;border:none;cursor:pointer;padding:.4rem .6rem;margin-top:.5rem}#splash button .word{font-family:var(--font);font-style:italic;font-size:clamp(1.4rem,4vw,1.9rem);letter-spacing:.05em;color:var(--orange);position:relative;display:inline-block;padding-bottom:.2em}#splash button .word:after{content:"";position:absolute;left:50%;bottom:0;width:30%;height:1px;background:var(--orange);transform:translate(-50%);transition:width .3s ease}#splash button:hover .word:after,#splash button:focus-visible .word:after{width:100%}#splash button:hover .word{text-shadow:0 0 20px rgba(255,154,60,.5)}#splash .hint{margin-top:2rem;font-size:.85rem;color:var(--cream-dim);font-style:italic;opacity:.7}#topbar{position:fixed;top:1rem;right:1rem;display:flex;gap:.4rem;z-index:6}.iconbtn{width:36px;height:36px;background:#0a142880;border:1px solid rgba(232,217,184,.18);color:var(--cream);font-size:1rem;font-family:var(--font-ui);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease;backdrop-filter:blur(6px)}.iconbtn:hover{border-color:var(--orange);color:var(--orange);background:#0a1428cc}.iconbtn.muted{opacity:.45;text-decoration:line-through}#pause-overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0a1428d9;z-index:9;backdrop-filter:blur(4px);animation:fadeIn .2s ease-out}#pause-overlay h2{font-family:var(--font);font-style:italic;font-size:clamp(2.5rem,8vw,4rem);color:var(--cream);margin-bottom:1.5rem;letter-spacing:.03em}#pause-overlay button{font-family:var(--font);font-size:1.1rem;letter-spacing:.12em;text-transform:uppercase;background:transparent;color:var(--orange);border:1px solid var(--orange);padding:.7rem 2rem;cursor:pointer;transition:all .2s ease}#pause-overlay button:hover{background:var(--orange);color:var(--navy)}#pause-overlay .kbd-hint{margin-top:1rem;font-size:.8rem;color:var(--cream-dim);opacity:.6;letter-spacing:.08em;text-transform:uppercase}@media (pointer: coarse){#pause-overlay .kbd-hint{display:none}}#howto{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0a1428eb;z-index:9;backdrop-filter:blur(8px);animation:fadeIn .25s ease-out}.howto-card{max-width:520px;padding:2.5rem 2.5rem 2rem;text-align:left;font-family:var(--font)}.howto-card h3{font-style:italic;font-size:2rem;color:var(--cream);margin-bottom:1.4rem;letter-spacing:.02em}.howto-card ol{list-style:none;counter-reset:step;padding:0;margin-bottom:1.5rem}.howto-card ol li{counter-increment:step;position:relative;padding-left:2.4rem;margin-bottom:.9rem;font-size:1.05rem;line-height:1.5;color:var(--cream)}.howto-card ol li:before{content:counter(step);position:absolute;left:0;top:0;width:1.8rem;height:1.8rem;border:1px solid var(--orange);color:var(--orange);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-size:.85rem;font-style:normal}.howto-card strong{color:var(--orange);font-weight:500;font-style:normal}.howto-card .quiet{color:var(--cream-dim);font-size:.92rem;font-style:italic;margin-bottom:1.5rem;opacity:.8}.howto-card button{font-family:var(--font);font-size:1rem;letter-spacing:.1em;background:var(--orange);color:var(--navy);border:none;padding:.7rem 2rem;cursor:pointer;text-transform:uppercase}#hud{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:1.2rem 1.5rem;z-index:5;pointer-events:none;font-family:var(--font-ui);letter-spacing:.12em;text-transform:uppercase;font-size:.7rem}#hud .label{display:block;color:var(--cream-dim);opacity:.8;font-size:.65rem}#hud #score,#hud #harbor-count{display:flex;flex-direction:column}#hud #saved-count,#hud #harbor-total{font-family:var(--font);font-size:1.8rem;font-weight:400;color:var(--cream);letter-spacing:.02em;text-transform:none}#storm-meter{position:relative;width:140px;height:2px;background:#e8d9b81a;align-self:center;margin-top:1rem}#storm-meter .label{display:none}#storm-fill{height:100%;width:0%;background:var(--cream-dim);transition:width .2s linear,background-color .6s,box-shadow .6s}#storm-vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 35%,rgba(40,14,14,.55) 100%);opacity:0;transition:opacity 1s ease-out;z-index:3;mix-blend-mode:multiply}#endcard{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0a1428f0;text-align:center;padding:2rem;z-index:8;animation:fadeIn 2s ease-out}#constellation{width:min(80vw,700px);height:min(35vw,320px);max-height:40vh;margin-bottom:1.2rem;display:block}#endcard h2{font-size:clamp(2rem,8vw,3.5rem);font-weight:400;font-style:italic;color:var(--cream);margin-bottom:1.5rem}#endcard p{font-size:clamp(1rem,3vw,1.25rem);color:var(--cream-dim);margin-bottom:.5rem}#endcard #end-saved{color:var(--orange);font-size:1.3em;font-style:italic}#endcard .harbor-note{margin-top:.5rem;margin-bottom:2.5rem;font-style:italic;font-size:.95rem;opacity:.7}.end-buttons{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}.end-buttons button{font-family:var(--font);font-size:1rem;letter-spacing:.12em;text-transform:uppercase;background:transparent;color:var(--cream);border:1px solid var(--cream-dim);padding:.7rem 1.6rem;cursor:pointer;transition:all .2s ease}.end-buttons button:hover{border-color:var(--orange);color:var(--orange)}#board-btn{border-color:var(--orange)!important;color:var(--orange)!important}#board-btn:hover{background:var(--orange);color:var(--navy)!important}#welcome{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;z-index:6;animation:welcomeFade 4s ease-out forwards}#welcome p{font-size:clamp(1.1rem,3vw,1.4rem);font-style:italic;color:var(--cream);text-shadow:0 0 20px var(--navy);margin-bottom:.4rem}#hint{position:fixed;bottom:18%;left:50%;transform:translate(-50%);text-align:center;pointer-events:none;z-index:6;opacity:0;transition:opacity .8s ease}#hint.show{opacity:1}#hint.fade-out{opacity:0;transition:opacity 1.2s ease}#hint p{font-size:clamp(.95rem,2.5vw,1.15rem);font-style:italic;font-family:var(--font);color:var(--cream);text-shadow:0 0 18px var(--navy),0 0 30px var(--navy);margin-bottom:.25rem;letter-spacing:.02em}.noscript{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font);color:var(--cream);text-align:center;padding:2rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes welcomeFade{0%{opacity:0;transform:translate(-50%,-45%)}20%{opacity:1;transform:translate(-50%,-50%)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-55%)}}#toasts{position:fixed;top:4.5rem;left:50%;transform:translate(-50%);z-index:7;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:.4rem}.toast{background:#0a1428b3;border:1px solid rgba(232,217,184,.2);color:var(--cream);font-family:var(--font);font-style:italic;font-size:.95rem;padding:.5rem 1rem;letter-spacing:.02em;white-space:nowrap;animation:toastIn .35s ease-out;backdrop-filter:blur(6px)}.toast.fade{animation:toastOut .8s ease-out forwards}@keyframes toastIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes toastOut{0%{opacity:1}to{opacity:0;transform:translateY(-4px)}}#keepers{position:fixed;bottom:1.2rem;left:1.2rem;z-index:5;font-family:var(--font-ui);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim);display:flex;align-items:center;gap:.4rem;pointer-events:none;opacity:.7}#keepers .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#a6c8ff;box-shadow:0 0 8px #a6c8ff;animation:pulseDot 1.6s ease-in-out infinite}@keyframes pulseDot{0%,to{opacity:.5}50%{opacity:1}}.save-flash{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at center,rgba(255,154,60,.18) 0%,transparent 60%);opacity:0;z-index:4}.save-flash.flash{animation:saveFlash .7s ease-out}@keyframes saveFlash{0%{opacity:0}20%{opacity:1}to{opacity:0}}.wreck-flash{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at center,rgba(150,50,50,.12) 0%,transparent 50%);opacity:0;z-index:4}.wreck-flash.flash{animation:wreckFlash .5s ease-out}@keyframes wreckFlash{0%{opacity:0}30%{opacity:1}to{opacity:0}}@media (max-width: 600px){#hud{padding:.8rem 1rem}#hud #saved-count,#hud #harbor-total{font-size:1.4rem}.end-buttons button{padding:.6rem 1.2rem;font-size:.9rem}}