@import url('./trials.css');
@font-face{font-family:Archivo;src:url('../../game/fonts/archivo.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:GeistMono;src:url('../../game/fonts/geist-mono.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--water:#082c33;--deep:#062127;--ink:#ecebd9;--muted:#adc5c2;--line:#366067;--accent:#e0e9bb;--active:#e8c87d;--focus:#fff2b7;--font:Archivo,Arial,sans-serif;--mono:GeistMono,monospace;--radius:5px}
*{box-sizing:border-box}body{margin:0;background:var(--water);color:var(--ink);font:400 16px/1.55 var(--font)}[hidden]{display:none!important}button,a,input{touch-action:manipulation}a{color:inherit;text-underline-offset:.25em}button{font:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:4px}button{background:transparent;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);padding:.6rem .95rem;min-height:44px}button:hover:not(:disabled){border-color:var(--ink)}.primary{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);border-color:var(--accent);color:var(--deep);font-weight:650;text-decoration:none;padding:.7rem 1.1rem;border-radius:var(--radius);min-height:46px}.skip{position:absolute;left:1rem;top:-5rem;z-index:20;padding:.75rem;background:var(--accent);color:var(--deep)}.skip:focus{top:1rem}
header{display:flex;justify-content:space-between;align-items:center;padding:1.15rem clamp(1rem,4vw,4rem);border-bottom:1px solid var(--line);gap:1rem}header img{display:block;width:100px;height:30px}header nav{display:flex;gap:clamp(1rem,2vw,2rem);font-size:.9rem}header nav a{text-decoration:none}header nav a[aria-current]{color:var(--accent);text-decoration:underline}main{max-width:1600px;margin:auto;padding:0 clamp(1rem,4vw,4rem)}.heading{padding:2rem 0 1.25rem;display:flex;justify-content:space-between;align-items:end;gap:2rem}.eyebrow{font:500 .72rem/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 .6rem}h1{font-size:clamp(2rem,3.7vw,3.65rem);font-weight:550;letter-spacing:-.045em;line-height:1.04;margin:0;max-width:20ch}h2{font-size:clamp(1.5rem,2.5vw,2.2rem);font-weight:550;letter-spacing:-.035em;line-height:1.12;margin:0 0 .8rem}.heading>p{margin:0;max-width:28ch;color:var(--muted)}.play-area{position:relative;border:1px solid var(--line);background:var(--deep);overflow:hidden}.scene{height:clamp(400px,62vh,710px);position:relative;isolation:isolate}.scene canvas{position:absolute;inset:0}.scene[aria-busy=true]:before{content:'Opening the currents…';position:absolute;inset:40% 0;text-align:center;color:var(--muted);z-index:2}.map-layer{position:absolute;inset:0;pointer-events:none;z-index:2}.node-target{position:absolute;transform:translate(-50%,-50%);width:42px;height:42px;min-height:42px;padding:0;border:0;pointer-events:auto;border-radius:50%;background:transparent}.node-target:after{content:'';position:absolute;left:16px;top:16px;width:10px;height:10px;background:var(--accent);border:2px solid var(--deep);border-radius:50%}.node-target:hover:after,.node-target:focus-visible:after{width:16px;height:16px;left:13px;top:13px}.node-target:focus-visible{outline-offset:0}.node-target[data-hint=true]{outline:2px solid var(--active)}.scene-tools{position:absolute;left:1rem;right:1rem;top:1rem;display:flex;justify-content:space-between;align-items:start;gap:.7rem;z-index:4;pointer-events:none}.scene-tools>*{pointer-events:auto}.counter{font:550 .9rem/1.2 var(--font);background:var(--water);padding:.8rem 1rem;border:1px solid var(--line);border-radius:var(--radius)}.sound{background:var(--water);font-size:.8rem}.scene-note{position:absolute;left:1rem;bottom:1rem;margin:0;color:var(--ink);background:var(--water);padding:.3rem .65rem;border:1px solid var(--line);border-radius:var(--radius);font:400 .65rem/1.4 var(--mono);z-index:4}.play-controls{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.2rem;border-top:1px solid var(--line)}.action-copy{flex:1;min-width:0}.action-copy p{margin:0}.action-copy .small{font-size:.8rem;color:var(--muted);margin-top:.3rem}.move-controls{display:flex;gap:.35rem}.move-controls button{width:44px;padding:.4rem;font-size:1.25rem}.turn{min-width:135px}.under-controls{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 0;align-items:start}.under-controls p{color:var(--muted);font-size:.85rem;margin:0;max-width:70ch}.quiet-actions{display:flex;gap:1.2rem;white-space:nowrap}.text-button{border:0;padding:0;min-height:30px;text-decoration:underline;text-underline-offset:.25em;font-size:.85rem}.victory{position:absolute;z-index:5;left:50%;bottom:2rem;transform:translateX(-50%);width:min(460px,90%);background:var(--water);border:1px solid var(--line);padding:1.2rem 1.5rem;text-align:center}.victory h2{margin:0 0 .4rem}.victory p{margin:0;color:var(--muted)}.victory button{margin-top:1rem}.provenance{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,7vw,8rem);padding:3rem 0;border-top:1px solid var(--line);margin-top:1.5rem}.provenance p{max-width:54ch}.provenance .sub{font-size:.9rem;color:var(--muted)}details{border-top:1px solid var(--line);padding:.9rem 0}summary{cursor:pointer;font-weight:550;min-height:30px}.receipt-body{padding:.5rem 0;color:var(--muted);font-size:.9rem;overflow-wrap:anywhere}.receipt-body dl{display:grid;grid-template-columns:minmax(100px,1fr) minmax(0,2fr);gap:.4rem 1rem}.receipt-body dt,.receipt-body dd{margin:0}.receipt-body ul{padding-left:1.2rem}.receipt-body li{margin-bottom:.6rem}.receipt-body a{color:var(--ink)}.receipt-body code{font:400 .75rem/1.5 var(--mono)}.result-error{padding:4rem 0;max-width:55ch}.recent{border-top:1px solid var(--line);padding:2rem 0}.recent ul{padding:0;list-style:none;display:flex;gap:2rem;flex-wrap:wrap}.fallback-map{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;padding:4rem 1rem 2rem;max-width:500px;margin:auto}.fallback-map button{font-size:.8rem;aspect-ratio:1}.fallback-map button[data-current=true]{border-color:var(--active);background:var(--water)}footer{max-width:1600px;margin:auto;border-top:1px solid var(--line);padding:1.5rem clamp(1rem,4vw,4rem);display:flex;justify-content:space-between;gap:1rem;color:var(--muted);font-size:.85rem}
@media(max-width:650px){header{padding:.9rem 1rem}header img{width:78px}header nav{gap:1rem;font-size:.8rem}header nav .wide-link{display:none}.heading{display:block;padding:1.5rem 0 1rem}.heading>p{margin:.75rem 0 0;max-width:40ch;font-size:.9rem}.scene{height:440px}.scene-tools{left:.6rem;right:.6rem;top:.6rem}.counter{padding:.7rem .8rem}.play-controls{flex-wrap:wrap;padding:.9rem}.action-copy{flex-basis:100%}.move-controls{order:2}.turn{order:3;flex:1;min-width:110px;padding:.5rem}.under-controls{flex-wrap:wrap}.quiet-actions{width:100%;justify-content:space-between}.provenance{grid-template-columns:1fr;gap:2rem;padding:2rem 0}.scene-note{left:.6rem;bottom:.6rem}.victory{bottom:2.5rem}.receipt-body dl{grid-template-columns:1fr}.receipt-body dd{margin-bottom:.6rem}footer{flex-wrap:wrap}.node-target{width:38px;height:38px;min-height:38px}.node-target:after{left:14px;top:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.player-label{position:absolute;z-index:3;pointer-events:none;transform:translate(-50%,0);padding:.18rem .4rem;background:var(--water);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);font-size:.7rem;white-space:nowrap}.first-move{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--deep);padding:.2rem .4rem;border-radius:var(--radius);font-size:.7rem;white-space:nowrap}

/* Trial guidance stays in the HUD and leaves manual controls available. */
.trial-room[data-guided=true] .play-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem 1rem}.trial-room[data-guided=true] .action-copy{grid-column:1/-1}.trial-room .guided-step{grid-column:1/-1;min-height:48px;width:100%}.trial-room[data-guided=true] .move-controls{grid-column:1;order:initial}.trial-room[data-guided=true] .turn{grid-column:2;order:initial;background:transparent;color:var(--ink);border-color:var(--line)}.trial-room .quiet-actions{white-space:normal;align-items:center}.trial-room .quiet-actions>a,.trial-room .quiet-actions>button{min-height:44px;display:inline-flex;align-items:center}.trial-room .guidance-toggle{border:1px solid var(--line);padding:.5rem .75rem;text-decoration:none}.trial-room .guidance-toggle[aria-pressed=true]{border-color:var(--active);color:var(--active)}.trial-room .node-target{width:48px;height:48px;min-height:48px}.trial-room .node-target:after{left:19px;top:19px}.trial-room .node-target:hover:after,.trial-room .node-target:focus-visible:after{left:16px;top:16px}.trial-room .node-target[data-hint=true]{outline:3px solid var(--active);outline-offset:2px;background:var(--water);box-shadow:0 0 0 6px var(--deep)}.trial-room .node-target[data-hint=true]:after{background:var(--active);width:16px;height:16px;left:16px;top:16px}.trial-room .node-target[data-hint=true]:disabled{opacity:.75}.trial-room .first-move{bottom:54px;background:var(--active);font-weight:650}.trial-room .fallback-map{gap:.3rem;padding-left:.5rem;padding-right:.5rem}.trial-room .fallback-map button{min-width:0;min-height:48px;padding:.2rem;overflow-wrap:anywhere;font-size:clamp(.65rem,2.5vw,.8rem)}.trial-room .fallback-map button[data-hint=true]{outline:3px solid var(--active);outline-offset:0;background:var(--active);color:var(--deep);font-weight:650}.trial-room .fallback-map button[data-hint=true]:disabled{opacity:.75}
@media(max-width:500px){.trial-room[data-guided=true] .move-controls,.trial-room[data-guided=true] .turn{grid-column:1/-1;width:100%}.trial-room[data-guided=true] .move-controls{justify-content:center}.trial-room .move-controls button{min-height:48px;flex:1}.trial-room .quiet-actions{justify-content:flex-start;gap:.4rem 1rem}}

/* Completion leaves the actual coral bloom visible; the result sits in the HUD. */
.victory{position:static;transform:none;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem 1rem;border:0;border-top:1px solid var(--line);padding:1rem 1.2rem;text-align:left}.victory .eyebrow,.victory h2,.victory p{grid-column:1}.victory h2{font-size:1.65rem;margin:0}.victory p:not(.eyebrow){font-size:.85rem}.victory button{grid-column:2;grid-row:1/4;align-self:center;margin:0}@media(max-width:390px){.victory{grid-template-columns:1fr}.victory button{grid-column:1;grid-row:auto;margin-top:.65rem}}

.victory #return-reef{grid-column:2;grid-row:1/3;align-self:center;white-space:nowrap}.victory #replay{grid-column:2;grid-row:3;justify-self:center;min-height:30px;background:none;color:var(--ink);font-weight:400}.quiet-actions{flex-wrap:wrap}.reef-return{display:inline-flex;align-items:center}
@media(max-width:500px){.victory{grid-template-columns:1fr}.victory #return-reef,.victory #replay{grid-column:1;grid-row:auto;justify-self:start;margin-top:.6rem}.victory #replay{margin-top:0}.quiet-actions{gap:.8rem 1.2rem}}

/* Optional feedback sits after the completed room, never over the scene. */
.victory .playtest{grid-column:1/-1;min-width:0;margin-top:.8rem;padding:.8rem 0 0;font-size:.9rem}
.playtest form{max-width:42rem;padding:.65rem 0 .2rem}.playtest fieldset{border:0;padding:0;margin:0 0 .8rem;display:flex;flex-wrap:wrap;gap:.5rem 1.2rem}.playtest legend{padding:0;margin-bottom:.6rem}.playtest label{display:flex;align-items:center;gap:.45rem;min-height:44px;cursor:pointer}.playtest input{accent-color:var(--active);width:1.1rem;height:1.1rem}.victory .playtest button{display:inline-flex;min-height:44px;margin:.35rem 0;grid-column:auto;grid-row:auto}.playtest p{max-width:64ch}.playtest .sub,.playtest-privacy{color:var(--muted)}.playtest-privacy{margin-top:.7rem;font-size:.8rem}.playtest-privacy summary{font-weight:400}.playtest:focus-within{scroll-margin-bottom:2rem}

.play-forward-banner{display:flex;align-items:center;justify-content:space-between;gap:2rem;border-top:1px solid var(--line,#436064);padding:1.4rem 0;margin-bottom:1.5rem}.play-forward-banner h2{font-size:1.35rem;margin:.25rem 0 .5rem}.play-forward-banner p{max-width:64ch}.play-forward-banner .eyebrow{margin:0}.play-forward-banner>a{flex-shrink:0}.play-forward-result{grid-column:1/-1;border-top:1px solid #436064;padding-top:1.2rem;margin-top:1rem}.play-forward-result h3{font-size:1.5rem;margin:.4rem 0}.play-forward-result>p{max-width:65ch}.play-forward-result .primary{margin:.75rem 1rem .75rem 0}@media(max-width:700px){.play-forward-banner{display:block}.play-forward-banner>a{display:inline-block;margin-top:.75rem}.play-forward-result .primary{width:100%}}

.trial-room .scene{height:clamp(280px,42svh,520px)}.trial-room .manual-swim{grid-column:1/-1;width:100%;padding:.25rem 0 0;border-top:1px solid var(--line)}.trial-room .manual-swim summary{color:var(--muted);font-size:.85rem;min-height:44px;display:flex;align-items:center}.trial-room .manual-swim[open] summary{margin-bottom:.4rem}.trial-room .manual-swim .move-controls{display:inline-flex;width:auto;vertical-align:middle;margin-right:1rem}.trial-room .manual-swim .turn{width:auto;min-height:48px}.trial-room .play-controls:has(.manual-swim){flex-wrap:wrap}.trial-room .manual-swim{flex-basis:100%}

.trial-room .scene{height:clamp(360px,58svh,660px)}.build-notes{margin-top:32px;border-top:1px solid #9ec9ce35;padding:20px 0}.build-notes>summary{cursor:pointer;color:#a8cbcf;font-weight:650}.build-notes .provenance{margin-top:20px}.trial-room .scene-note{display:none}@media(max-width:600px){.trial-room .scene{height:440px;max-height:65svh}}