@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/dm-sans-latin-variable.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/outfit-latin-variable.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{color-scheme:dark;--bg:#211b35;--muted:#b7b0c9;--cream:#fff3dc;--mint:#a8e9d5;--coral:#ffac95;font-family:'DM Sans',sans-serif;color:var(--cream);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-width:280px;min-height:100svh;background:radial-gradient(ellipse at 50% 30%,#55427845,transparent 65%);font-size:14px}
button{font:inherit;color:inherit;cursor:pointer;border:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid var(--mint);outline-offset:3px}button:disabled{cursor:default;opacity:.45}button[hidden],[hidden]{display:none!important}
p,h1,h2{margin:0}.app{max-width:550px;margin:auto;padding:0 16px 10px;position:relative}
.ambient{position:fixed;pointer-events:none;z-index:-1}.ambient-one{width:500px;height:500px;left:-260px;top:150px;background:radial-gradient(ellipse,#78629430,transparent 65%)}.ambient-two{width:500px;height:500px;right:-200px;bottom:0;background:radial-gradient(ellipse,#5d538520,transparent 65%)}
.topbar{height:48px;display:flex;align-items:center;justify-content:space-between}.topbar h1{font:650 clamp(18px,5.3vw,27px) 'Outfit',sans-serif;letter-spacing:-.8px;white-space:nowrap}.topbar h1>span{font-size:12px;color:var(--mint);margin-left:3px;vertical-align:top}
.top-actions{display:flex;gap:4px}.icon-button{background:transparent;min-width:44px;min-height:44px;border-radius:12px;color:#c8bedb;font-size:24px;display:grid;place-items:center}.icon-button:hover{background:#a8e9d512}.top-actions #help{font:500 18px 'Outfit',sans-serif}
.tiny-label{display:block;font-size:9px;letter-spacing:1.4px;color:var(--muted);font-weight:600}
.score-card{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:4px 2px 8px;gap:3px 14px}
.score-group,.personal-record{display:flex;gap:12px;align-items:baseline}.personal-record{justify-content:flex-end}
.score{font:500 29px 'Outfit',sans-serif;letter-spacing:-.5px;font-variant-numeric:tabular-nums}.personal-record strong{font:400 20px 'Outfit',sans-serif;color:#d0d9be;font-variant-numeric:tabular-nums}
.forecast-hud{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(110px,1fr);gap:18px;align-items:center;border-top:1px solid #a8e9d512;padding:5px 2px 0}
.forecast-card{display:flex;gap:9px;align-items:center}.forecast-card>.tiny-label{font-size:8px;letter-spacing:1px}.upcoming{display:flex;gap:4px;min-height:47px;align-items:center}
.visitor{width:32px;height:40px;border-radius:9px;background:#44365270;position:relative;border:1px solid #b4dac71c;display:flex;align-items:center;justify-content:center;flex-shrink:0}.visitor svg{width:30px;height:30px;margin-top:-3px}.visitor-index{position:absolute;top:2px;left:3px;font-size:6px;color:#adc4b8}.visitor .charge-pips{bottom:4px;gap:2px}.visitor .charge-pips i{width:3px;height:3px}
.visitor.blocked{border-color:#ffac9580;background:#74483820}.visitor.blocked::after{content:'!';position:absolute;right:2px;top:-4px;color:var(--coral);font-size:12px;font-weight:700}
.tide-heading{display:flex;justify-content:space-between;align-items:center}.tide-heading>span:last-child{font-size:10px;font-variant-numeric:tabular-nums}
.tide-segments{display:flex;gap:3px;margin:5px 0 3px}.tide-segments i{height:10px;flex:1;border:1px solid #b6d7c437;background:#2c464033;border-radius:2px;transition:background .3s}.tide-segments i.filled{background:#efae86;border-color:#efba92}.tide-segments i.incoming{border-color:var(--coral);border-style:dashed;background:repeating-linear-gradient(135deg,#efae8640 0 2px,transparent 2px 5px)}
.capacity{font-size:8px;color:var(--muted);display:block;text-align:right}.tide-card.danger .tiny-label,.tide-card.danger .capacity{color:var(--coral)}
.board-topline{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.8px;height:28px;color:#a3bcb8;align-items:flex-start}.board-topline>span:first-child{display:flex;gap:7px;align-items:center}.board-topline>span:last-child{font-variant-numeric:tabular-nums;letter-spacing:1.2px;color:#a59ab9}.lagoon{aspect-ratio:1;position:relative;border:1px solid #8ec3ba35;border-radius:27px;padding:17px;isolation:isolate;background:radial-gradient(ellipse at 45% 30%,#59457765,transparent 72%),linear-gradient(150deg,#342a48,#29223e);box-shadow:0 20px 70px #0003,inset 0 0 0 5px #82cdb604,inset 0 0 75px #1b152a50;overflow:hidden}.lagoon::before{content:'';position:absolute;inset:8px;border:1px solid #a8d9cc0c;border-radius:21px;pointer-events:none;z-index:1}.board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:6px;width:100%;height:100%;position:relative;z-index:2}.cell{position:relative;display:flex;align-items:center;justify-content:center;border-radius:13px;border:1px solid #a9d5c309;background:linear-gradient(145deg,#76b7a507,#231b3512);padding:0;transition:background .18s,border-color .18s,box-shadow .18s;min-width:0;min-height:0}.cell.empty{cursor:default}.cell:not(.empty):hover,.cell:focus-visible{background:#9adcbd0f;border-color:#b8e8be54;box-shadow:0 0 24px #8ee8cc12}.cell.neighbor{border-color:#b8e8be32;background:#a1e0c50a}.creature{width:88%;height:88%;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 3px 7px color-mix(in srgb,var(--glow) 22%,transparent));animation:float 3.8s ease-in-out infinite;animation-delay:var(--delay)}.creature svg{width:100%;height:100%;overflow:visible}.cell.ready .creature{filter:drop-shadow(0 0 9px color-mix(in srgb,var(--glow) 37%,transparent))}.charge-pips{display:flex;gap:3px;position:absolute;bottom:6px;left:0;width:100%;justify-content:center}.charge-pips i{width:4px;height:4px;border:1px solid #b3d8c547;border-radius:50%;background:transparent}.charge-pips i.filled{border-color:var(--glow);background:var(--glow);box-shadow:0 0 5px color-mix(in srgb,var(--glow) 40%,transparent)}.arrival-marker{position:absolute;inset:13px;border:1px dashed #c1dacf50;border-radius:50%;display:grid;place-items:center;font-size:18px;color:#b8d6c659}.arrival-marker small{font-size:8px;position:absolute;right:-3px;bottom:-4px;background:#342b48;border-radius:10px;padding:1px 4px;color:#b9cdc2}.cell.suggested::after{content:'';position:absolute;inset:5px;border:1px solid #d8f9c6;border-radius:50%;animation:beckon 2.2s ease-out infinite;pointer-events:none}.water{position:absolute;z-index:0;left:0;right:0;bottom:0;height:0%;background:linear-gradient(0deg,#e7947540,#e69c6d14);border-top:1px solid #ffc3916b;transition:height .6s;pointer-events:none}.water::before{content:'';position:absolute;height:15px;top:-8px;width:200%;background:radial-gradient(ellipse at center,#e6b29615,transparent);animation:water-drift 6s linear infinite}.lagoon.danger{border-color:#eeba865a}.lagoon.critical{box-shadow:0 20px 70px #0003,inset 0 0 40px #df735c15}.effects{position:absolute;inset:17px;z-index:4;pointer-events:none}.combo-toast{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:5;pointer-events:none;text-align:center;white-space:nowrap;opacity:0}.combo-toast.active{animation:toast 1.35s ease-in-out forwards}.combo-toast strong{font-family:'Outfit',sans-serif;display:block;font-size:36px;letter-spacing:-1px;color:#edfacf;text-shadow:0 2px 24px #201a32,0 2px 8px #201a32}.combo-toast span{display:block;font-size:9px;letter-spacing:3px;color:#d4e6c7;text-shadow:0 0 8px #201a32;background:#211b3596;padding:5px 10px;border-radius:15px;display:inline-block}
.board-topline{height:23px;align-items:center;font-size:9px;letter-spacing:0;color:var(--muted);padding:0 2px}.board-topline>span:first-child{display:block}.board-topline>span:last-child{font-size:8px}.board-topline .urgent{color:var(--coral)!important}
.lagoon{width:min(100%,max(252px,calc(100svh - 330px)));max-width:510px;margin:auto;padding:10px;border-radius:23px}.board{gap:4px}.effects{inset:10px}
.cell{border-radius:9px}.creature{width:94%;height:94%}.charge-pips{bottom:4px;gap:3px}.charge-pips i{width:5px;height:5px;border-color:#b3d8c575}.cell.ready{border-color:color-mix(in srgb,var(--glow) 32%,transparent)}.cell.ready::before{content:'';position:absolute;bottom:2px;width:23px;height:8px;border-radius:6px;background:color-mix(in srgb,var(--glow) 16%,transparent)}
.arrival-marker{inset:10px;font-size:18px}.arrival-marker small{font-size:8px}.combo-toast strong{font-size:30px}.combo-toast span{font-size:8px;letter-spacing:1.4px}
.evolution-card{display:flex;align-items:center;justify-content:center;padding:5px 0 2px;gap:10px;min-height:44px}
.tier-list{display:flex;align-items:center;list-style:none;padding:0;margin:0;gap:10px}
.tier-list li{position:relative;display:flex;align-items:center;justify-content:center;width:32px;height:34px}
.tier-list li::after{content:'›';position:absolute;right:-9px;color:#6a9590;font-size:15px}
.tier-icon,.tier-icon svg{display:block;width:30px;height:30px}.tier-count{position:absolute;right:-2px;bottom:-1px;min-width:12px;text-align:center;padding:0 2px;font-size:9px;border-radius:8px;background:#2a243d;color:#c5dad0}.tier-list li.absent .tier-icon{opacity:.6}
.release-token{display:flex;align-items:center;gap:3px;color:#cdbaff;padding-left:1px}.release-token>span{font-size:26px}.release-token small{font-size:10px}
.feedback-row{height:31px;display:flex;align-items:center;gap:8px;padding:1px 2px}.feedback-row p{font-size:10px;color:var(--muted);line-height:1.35;flex:1}.feedback-row strong{color:#e1e7cb;font-weight:500}.chain-tag{font-size:10px;white-space:nowrap;color:#cde9bc;font-variant-numeric:tabular-nums}.chain-tag.record{color:#f4da80}
.bottom-controls{display:flex;align-items:center;gap:10px;height:47px;border-top:1px solid #a8e9d514}
.control-note{font-size:9px;color:var(--muted);flex:1}.bottom-controls #restart{margin-left:auto}
.result-backdrop{position:absolute;inset:0;z-index:10;background:#1a1529d9;backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:22px}.result-card{text-align:center;max-width:350px;width:100%}.result-spark{font-size:48px;color:#c4ead0;line-height:1}.result-card .eyebrow{display:block;font-size:8px;letter-spacing:2px;margin:15px 0}.result-card h2{font-family:'Outfit',sans-serif;font-size:29px;font-weight:500;letter-spacing:-1px}.result-card>p{font-size:11px;color:var(--muted);line-height:1.8;margin:10px auto;max-width:270px}.final-score{font-family:'Outfit',sans-serif;font-size:54px;line-height:1.15;font-weight:500}.result-card>.tiny-label{font-size:8px;color:#bdd5b5}.result-stats{display:flex;justify-content:center;gap:30px;margin:20px 0}.result-stats>div{display:flex;flex-direction:column;gap:4px}.result-stats strong{font-family:'Outfit',sans-serif;font-size:21px;font-weight:500}.result-stats span{font-size:9px;color:var(--muted)}.primary-button{display:flex;align-items:center;justify-content:space-between;gap:25px;background:var(--mint);color:#211b35;border-radius:9px;padding:14px 18px;font-size:12px;font-weight:700;transition:filter .2s,transform .2s}.primary-button:hover{filter:brightness(1.1);transform:translateY(-1px)}.result-card .primary-button{width:100%;justify-content:center}.result-card .text-button{margin-top:12px;font-size:9px}.close-button{position:absolute;right:21px;top:14px;background:none;font-size:28px;color:var(--muted)}dialog{background:#2d2641;border:1px solid #678b7955;border-radius:22px;padding:36px;color:var(--cream);max-width:460px;width:calc(100% - 35px);box-shadow:0 30px 100px #0008}dialog::backdrop{background:#17121fd9;backdrop-filter:blur(7px)}dialog h2{font-family:'Outfit',sans-serif;font-weight:500;letter-spacing:-1px;font-size:30px;margin:15px 0 23px;line-height:1.15}.help-rules>p{display:flex;gap:16px;margin:17px 0}.help-rules b{font-size:10px;color:var(--mint);padding-top:3px;font-weight:400}.help-rules span{font-size:11px;line-height:1.8;color:var(--muted)}.help-rules strong{color:#dce7d3;font-weight:500;display:block}.help-small{font-size:10px;line-height:1.8;color:#b7afc6;border-top:1px solid #8fac9b30;margin-top:22px;padding-top:17px}dialog .primary-button{margin-top:23px;width:100%}
.result-backdrop{position:fixed;inset:0;z-index:50;padding:20px;overflow-y:auto}.result-card{padding:24px 18px;border:1px solid #a8e9d535;border-radius:22px;background:#2a243d;max-height:100%;overflow-y:auto}.result-spark{font-size:27px}.result-card h2{font-size:24px}.result-card>p{font-size:11px;line-height:1.5;margin:10px auto}.final-score{font-size:42px}.result-stats{margin:16px 0;gap:25px}.result-stats strong{font-size:20px}.result-card .primary-button{padding:12px}.result-card .text-button{font-size:11px;margin-top:9px;min-height:44px}
.text-button{background:transparent;color:#b7d1c1}.primary-button{min-height:44px}.eyebrow{font-size:8px;letter-spacing:1.4px;color:var(--mint)}
dialog{max-height:calc(100svh - 30px);padding:25px;width:calc(100% - 24px);max-width:450px;overflow-y:auto}dialog h2{font-size:29px;margin:14px 0 19px}.close-button{min-width:44px;min-height:44px;right:8px;top:5px}
.visual-rules>section{display:grid;grid-template-columns:126px 1fr;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #a8e9d516}.visual-rules p{font-size:10px;color:var(--muted);line-height:1.6}.visual-rules strong{display:block;color:#dde9d0;font-weight:500}
.rule-visual{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--mint)}.rule-creature{position:relative;width:37px;height:43px;display:grid;place-items:center}.rule-creature svg{width:37px;height:37px}.rule-creature .charge-pips{bottom:0}.rule-visual>b{font-size:18px;font-weight:400}.rule-release{font-size:30px;color:#cdbaff}.rule-visual small{font-size:10px;color:#cdbaff}.help-small{font-size:10px;margin-top:12px;padding-top:12px;line-height:1.6}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rule-creature{min-width:0;flex:0 1 34px}.rule-creature svg{width:100%;max-height:37px}.rule-visual{gap:3px}.rule-visual>b{font-size:16px}
#sound{position:relative}#sound.muted::after{content:'';position:absolute;left:12px;top:22px;width:20px;height:1.5px;background:currentColor;transform:rotate(-45deg);pointer-events:none}
@keyframes float{0%,100%{transform:translateY(1px) rotate(-2deg)}50%{transform:translateY(-2px) rotate(2deg)}}@keyframes bloom{0%{transform:scale(.7)}35%{transform:scale(1.18)}70%{transform:scale(.95)}100%{transform:scale(1)}}@keyframes tap{0%{transform:scale(1)}40%{transform:scale(.78)}100%{transform:scale(1)}}@keyframes arrive{0%{transform:translateY(-12px) scale(.1);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}@keyframes beckon{0%{transform:scale(.55);opacity:0}25%{opacity:.7}100%{transform:scale(1.25);opacity:0}}@keyframes particle{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.1);opacity:0}}@keyframes points{0%{transform:translate(-50%,0);opacity:0}20%{opacity:1}100%{transform:translate(-50%,-45px);opacity:0}}@keyframes toast{0%{opacity:0;transform:translate(-50%,-45%) scale(.85)}15%,65%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(1.05)}}@keyframes water-drift{0%{transform:translateX(-40%)}100%{transform:translateX(0)}}
@keyframes spark-flow{from{stroke-dashoffset:40}to{stroke-dashoffset:0}}@keyframes receive{30%{transform:scale(1.5);filter:brightness(1.6)}}@keyframes milestone{from{filter:brightness(2)}to{filter:brightness(1)}}
@media(max-height:650px) and (max-width:699px){.topbar{height:44px}.score-card{padding-top:1px;padding-bottom:3px}.board-topline{height:20px}.evolution-card{min-height:40px;padding-top:3px;padding-bottom:0}}
@media(min-width:700px){.app{padding-top:15px}.topbar{height:55px}.lagoon{width:min(100%,max(300px,calc(100svh - 370px)))}}
@media(max-width:370px){.app{padding:0 12px 6px}.forecast-hud{gap:10px;grid-template-columns:minmax(0,1.3fr) minmax(108px,1fr)}.forecast-card{gap:4px}.visitor{width:28px;height:38px}.visitor svg{width:27px;height:27px}.upcoming{gap:3px}.forecast-card>.tiny-label{font-size:7px}.control-note{font-size:8px}.tier-list{gap:8px}.tier-list li{width:29px}.tier-list li::after{right:-7px}.evolution-card{gap:8px}.cell .charge-pips{bottom:3px}.cell .charge-pips i{width:3px;height:3px}.arrival-marker{inset:7px}.visual-rules>section{grid-template-columns:105px 1fr;gap:9px}.rule-creature,.rule-creature svg{width:30px}.rule-visual{gap:3px}.result-card h2{font-size:20px}.result-card>p{font-size:9px}.final-score{font-size:32px}.result-stats{margin:8px 0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.creature{animation:none!important}}
/* Drift runs continuously on the outer layer; reactions use the inner layer. */
.creature-shape{width:100%;height:100%;display:flex;align-items:center;justify-content:center;transform-origin:center}
.sky-row{grid-column:1 / -1;display:flex;align-items:center;gap:9px;height:22px;color:#c9bef0;min-width:0}
.sky-row .tiny-label{font-size:8px;letter-spacing:1px;white-space:nowrap;color:#b3c5c4}
.constellation{flex:1;min-width:35px;height:22px;overflow:visible}
.constellation path{fill:none;stroke-width:1.1}.sky-track{stroke:#bfb0ef30}
#sky-fill{stroke:#d6caff;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .35s ease-out}
#sky-stars circle{fill:#2f2843;stroke:#c3b3e96b;stroke-width:1.2;transition:fill .25s}
#sky-stars circle.lit{fill:#e4d6ff;stroke:#e4d6ff}
.sky-count{font-size:10px;white-space:nowrap;font-variant-numeric:tabular-nums}.sky-count>span:first-child{font-size:16px}
.sky-reward{font-size:9px;color:#b7b0c9;font-variant-numeric:tabular-nums;white-space:nowrap}
.result-card .final-skies{color:#d2bff4;font-size:11px;line-height:1.4;margin:10px 0 14px}
.effects{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);pointer-events:none;contain:strict}
#privacy{display:block;margin:14px auto 0;min-height:44px}#privacy-dialog h2{padding-right:15px;font-size:24px}#privacy-content{font-size:12px;line-height:1.65}#privacy-content h3{font-size:14px;color:var(--cream);margin:20px 0 5px}#privacy-content p{color:#c5bfd3}.privacy-version{margin-top:10px!important;font-size:10px}.privacy-licenses{margin:20px 0}.privacy-licenses summary{cursor:pointer;min-height:44px;padding:10px 0}.privacy-licenses pre{white-space:pre-wrap;overflow-wrap:anywhere;font:10px/1.6 monospace;color:var(--muted)}#privacy-back{width:100%;margin-top:20px}