/* shipyard.css — Batch 1: the per-world SHIPYARD (fleet landing).
   Cosmic "title screen" over the rendered hero plate; the fleet grid of the world's ships.
   Uses global tokens (tokens.css). Locked palette; reduced-motion safe.
   Layout note: shared topbar sits ABOVE the content (no absolute-position overlap — the v1-mock
   top-left collision is avoided by flex-column flow). */
.shipyard{--good:#5fd0a0;--red:#ff6b6b;position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden;animation:sy-enter .65s cubic-bezier(.4,0,.2,1) both}
@keyframes sy-enter{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:none}}

/* backdrop: hero plate + scrim + cheap glow accents */
.sy-plate{position:absolute;inset:0;z-index:0;background-image:var(--sy-plate,none);background-size:cover;background-position:center;opacity:.92}
.sy-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,5,12,.5) 0%,rgba(4,5,12,.14) 26%,rgba(4,5,12,.5) 64%,rgba(4,5,12,.84) 100%),
    radial-gradient(70% 46% at 50% 54%,rgba(4,5,12,.45),transparent 72%)}
/* subtle, cheap nebula glow + slow lens-flare accent (Director ask — nothing heavy) */
.sy-glow{position:absolute;z-index:1;pointer-events:none;border-radius:50%;filter:blur(40px);mix-blend-mode:screen}
.sy-glow.a{top:-8%;right:18%;width:340px;height:240px;background:radial-gradient(closest-side,rgba(139,139,255,.5),transparent);animation:sy-glowpulse 9s ease-in-out infinite}
.sy-glow.b{bottom:6%;left:8%;width:260px;height:200px;background:radial-gradient(closest-side,rgba(54,214,224,.34),transparent);animation:sy-glowpulse 13s ease-in-out infinite 1.5s}
@keyframes sy-glowpulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.08)}}
.sy-flare{position:absolute;z-index:1;top:9%;right:30%;width:120px;height:120px;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.5) 0,rgba(207,224,255,.25) 18%,transparent 42%);filter:blur(2px);animation:sy-flare 14s ease-in-out infinite}
@keyframes sy-flare{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:.7;transform:scale(1.05)}}
.sy-bloom{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 46%,rgba(207,224,255,.45),rgba(139,139,255,.18) 26%,transparent 56%);animation:sy-bloom .8s ease forwards}
@keyframes sy-bloom{0%{opacity:0}38%{opacity:.85}100%{opacity:0}}

/* topbar (shared chrome) */
.sy-top{position:relative;z-index:5;display:flex;align-items:center;gap:14px;padding:14px 24px;flex-wrap:wrap}
.sy-top .sf-brand{font-size:12px}
.sy-back{display:inline-flex;align-items:center;gap:6px;font:600 11px var(--sans);color:var(--ink2);border:1px solid var(--panel-line);background:rgba(10,14,30,.5);border-radius:999px;padding:6px 13px;cursor:pointer}
.sy-back:hover{border-color:var(--violet-line);color:var(--ink)}
.sy-ascend{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);border:1px solid var(--violet-line);border-radius:999px;padding:6px 13px;cursor:pointer;background:rgba(139,139,255,.06)}
.sy-ascend:hover{background:var(--violet-dim);box-shadow:0 0 16px rgba(139,139,255,.28)}
/* K3a · first-class Studios affordance (the authoring kernel) — gold register, kin to sy-ascend */
.sy-studios{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#ffd27a;border:1px solid rgba(255,210,122,.32);border-radius:999px;padding:6px 13px;cursor:pointer;background:rgba(255,210,122,.06)}
.sy-studios:hover{background:rgba(255,210,122,.13);box-shadow:0 0 16px rgba(255,210,122,.26)}
.sy-who{margin-left:auto;display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);border:1px solid var(--panel-line);border-radius:999px;padding:5px 12px}
.sy-who .av{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#cdd0ff,#8b8bff 55%,#5a5ad6)}

/* fleet header + grid */
.sy-head{position:relative;z-index:5;padding:4px 26px 0}
.sy-head .sub{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:5px}
.sy-head .h{font-size:24px;font-weight:300;text-shadow:0 2px 24px rgba(0,0,0,.7)}.sy-head .h b{font-weight:700}
.sy-fleet{position:relative;z-index:5;flex:1;min-height:0;overflow-y:auto;padding:18px 26px 30px;display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:16px;align-content:start}
.sy-msg{grid-column:1/-1;color:var(--ink3);font-size:13px}
.sy-ship{position:relative;border:1px solid var(--panel-line);border-radius:16px;background:rgba(10,14,30,.62);backdrop-filter:blur(8px);cursor:pointer;overflow:hidden;transition:.2s;opacity:0;transform:translateY(16px);animation:sy-cardin .55s ease forwards}
.sy-del{position:absolute;top:9px;right:9px;z-index:6;width:24px;height:24px;border-radius:50%;border:1px solid var(--panel-line);background:rgba(10,14,30,.7);color:var(--ink3);font-size:12px;line-height:1;cursor:pointer;opacity:0;transition:.15s;display:flex;align-items:center;justify-content:center}
.sy-ship:hover .sy-del{opacity:1}
.sy-del:hover{border-color:#ff6b6b;color:#ff6b6b;background:rgba(255,107,107,.12)}
.sy-del:disabled{opacity:.4;cursor:default}
.sy-ship:hover{border-color:var(--violet-line);transform:translateY(-4px);box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 28px rgba(139,139,255,.16)}
@keyframes sy-cardin{to{opacity:1;transform:none}}
.sy-berth{height:104px;position:relative;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--panel-line);
  background:radial-gradient(80% 120% at 30% 10%,rgba(139,139,255,.14),transparent),linear-gradient(120deg,rgba(54,214,224,.06),rgba(255,178,77,.04))}
.sy-berth svg{width:92%;max-width:230px;height:98px}
.sy-ship.build .sy-berth::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--heat),transparent);animation:sy-weld 2.4s ease-in-out infinite}
@keyframes sy-weld{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.sy-body{padding:13px 15px 16px}
.sy-name{font-size:16px;font-weight:650}.sy-cls{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);margin-top:2px}
.sy-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.sy-chip{font-family:var(--mono);font-size:9px;letter-spacing:.03em;border:1px solid var(--panel-line);border-radius:999px;padding:3px 9px;color:var(--ink2)}
.sy-chip.live{color:var(--good);border-color:rgba(95,208,160,.4)}.sy-chip.build{color:var(--heat);border-color:rgba(255,178,77,.4)}
.sy-chip.wo{color:var(--cyan);border-color:rgba(54,214,224,.4)}.sy-chip.boss{color:var(--red);border-color:rgba(255,107,107,.5);animation:sy-boss 2s ease-in-out infinite}
@keyframes sy-boss{0%,100%{box-shadow:0 0 0 0 rgba(255,107,107,0)}50%{box-shadow:0 0 12px 0 rgba(255,107,107,.5)}}
/* live in-place patch (2026-07-05): a CHANGED chip value lands as a brief charge-flash on the
   strip — streaming, not a tick-jump. JS clears .tick after ~900ms so the boss-chip pulse
   (which this glow briefly outranks in specificity) resumes its infinite loop. */
.sy-meta.tick .sy-chip{animation:sy-chiptick .8s ease-out}
@keyframes sy-chiptick{0%{box-shadow:0 0 0 0 rgba(139,139,255,0)}25%{box-shadow:0 0 12px 1px rgba(139,139,255,.55)}100%{box-shadow:0 0 0 0 rgba(139,139,255,0)}}
.sy-ship--new{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-style:dashed;min-height:218px;color:var(--ink2)}
.sy-ship--new .plus{font-size:34px;color:var(--violet);margin-bottom:8px;text-shadow:0 0 18px rgba(139,139,255,.6)}

.sy-toast{position:fixed;left:50%;top:64px;transform:translateX(-50%) translateY(-12px);z-index:40;opacity:0;pointer-events:none;border:1px solid var(--violet-line);background:rgba(10,14,30,.92);backdrop-filter:blur(8px);border-radius:12px;padding:11px 16px;font-size:12.5px;color:var(--ink2);transition:.3s;max-width:520px;text-align:center}
.sy-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion:reduce){.shipyard *{animation-duration:.001s!important;animation-iteration-count:1!important}}

/* ── PERSISTENT cosmic backdrop (cosmicBackdrop.js) — shared across login → world → shipyard ── */
.sf-cosmos{position:fixed;inset:0;z-index:0;overflow:hidden;transition:opacity .6s ease}
.sf-cosmos--hidden{opacity:0;pointer-events:none}
.sf-cosmos__plate{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;animation:sf-plate-in 1.3s ease .2s forwards}
@keyframes sf-plate-in{to{opacity:.92}}
.sf-cosmos__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,5,12,.5) 0%,rgba(4,5,12,.14) 26%,rgba(4,5,12,.5) 64%,rgba(4,5,12,.84) 100%),radial-gradient(70% 46% at 50% 54%,rgba(4,5,12,.45),transparent 72%)}
.sf-cosmos__glow{position:absolute;border-radius:50%;filter:blur(40px);mix-blend-mode:screen}
.sf-cosmos__glow.a{top:-8%;right:18%;width:340px;height:240px;background:radial-gradient(closest-side,rgba(139,139,255,.5),transparent);animation:sf-glowp 9s ease-in-out infinite}
.sf-cosmos__glow.b{bottom:6%;left:8%;width:260px;height:200px;background:radial-gradient(closest-side,rgba(54,214,224,.32),transparent);animation:sf-glowp 13s ease-in-out infinite 1.5s}
@keyframes sf-glowp{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.08)}}
.sf-cosmos__flare{position:absolute;top:9%;right:30%;width:120px;height:120px;background:radial-gradient(circle,rgba(255,255,255,.5),rgba(207,224,255,.25) 18%,transparent 42%);filter:blur(2px);animation:sf-flare 14s ease-in-out infinite}
@keyframes sf-flare{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:.7;transform:scale(1.05)}}
.sf-cosmos__bloom{position:fixed;inset:0;z-index:9;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(207,224,255,.45),rgba(139,139,255,.18) 26%,transparent 56%)}
.sf-cosmos__bloom.run{animation:sf-bloom .8s ease forwards}
@keyframes sf-bloom{0%{opacity:0}38%{opacity:.85}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.sf-cosmos *{animation:none!important}}

/* the shipyard now sits OVER the shared backdrop (its own plate markup is dropped) */
.shipyard{z-index:3}

/* ── cosmic LOGIN (over the shared backdrop) ── */
.login.login--cosmic{position:relative;z-index:3;background:transparent}
.login--cosmic .login__main{flex:1;display:flex;align-items:center;justify-content:center}
.login--cosmic .login__card{background:rgba(10,14,30,.62);backdrop-filter:blur(10px);border:1px solid var(--panel-line);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:sf-authrise .8s cubic-bezier(.3,0,.2,1) .25s both}
@keyframes sf-authrise{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.login--cosmic .login__h{text-shadow:0 2px 24px rgba(0,0,0,.6)}
.login--cosmic .login__sub{color:var(--ink2)}
.login--cosmic .login__foot{position:relative;z-index:3}

/* ── cosmic WORLD-SELECT (over the shared backdrop) ── */
.setup.setup--cosmic{position:relative;z-index:3;background:transparent}
.setup--cosmic .setup__main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.setup--cosmic .setup__step{max-width:880px;animation:sy-enter .6s cubic-bezier(.4,0,.2,1) both}
.setup--cosmic .setup__eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--heat);margin-bottom:12px}
.setup--cosmic .setup__h{font-size:clamp(26px,4.6vw,46px);font-weight:200;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.setup--cosmic .setup__h b{font-weight:700;background:linear-gradient(90deg,var(--violet),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.setup--cosmic .setup__sub{color:var(--ink2);max-width:560px;margin:6px auto 26px;text-shadow:0 1px 16px rgba(0,0,0,.7)}
.setup--cosmic .setup__grid{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.setup--cosmic .setup__card{width:214px;border:1px solid var(--panel-line);border-radius:16px;background:rgba(10,14,30,.55);backdrop-filter:blur(7px);padding:18px;cursor:pointer;transition:.2s;display:flex;flex-direction:column;align-items:center;text-align:center}
.setup--cosmic .setup__card:hover{border-color:var(--violet-line);transform:translateY(-4px);box-shadow:0 16px 50px rgba(0,0,0,.5),0 0 30px rgba(139,139,255,.18)}
.setup--cosmic .setup__orb{width:60px;height:60px;border-radius:50%;margin-bottom:12px;box-shadow:0 0 28px rgba(139,139,255,.4);animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.setup--cosmic .setup__card-name{font-size:17px;font-weight:650}
.setup--cosmic .setup__card-meta{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan);margin-top:4px}
.setup--cosmic .setup__card-sub{font-family:var(--mono);font-size:9px;color:var(--ink3);margin-top:9px}
.setup--cosmic .setup__enter{margin-top:24px}
.setup--cosmic .setup__found{font:600 12px var(--sans);color:var(--ink2);border:1px solid var(--panel-line);background:rgba(10,14,30,.5);border-radius:999px;padding:9px 16px;cursor:pointer}
.setup--cosmic .setup__found:hover{border-color:var(--violet-line);color:var(--ink)}