:root{--surface:#12132e;--line:#51427b;--quiet:#c5bbdb;--mint:#75eaff;--accent:#d7aaff}
body{background:radial-gradient(ellipse at 52% 0,#241343 0,transparent 55%),#080919}
.svg-defs{position:absolute;pointer-events:none}
.site-head{background:#0a0a1cd9;border-color:#9c76ff40}
.brand{display:flex;align-items:center;gap:.55rem;color:#fff}
.infinity{display:block;width:clamp(5.7rem,25vw,9.3rem);overflow:visible;filter:drop-shadow(0 0 5px #c36aff) drop-shadow(0 0 13px #28a1fa)}
.brand .infinity{width:2.55rem}
.landing{display:block;max-width:43rem;padding:clamp(.6rem,3vh,2rem) 0}
.welcome{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;padding:clamp(.85rem,3vw,1.6rem);border:1px solid #ab88fa82;border-radius:1.65rem;background:linear-gradient(160deg,#171435,#0b0b20 58%,#211134);box-shadow:0 0 26px #8355f43d,inset 0 0 24px #9447ff20;overflow:hidden}
.welcome h1{font:600 clamp(1.55rem,10.5vw,4.6rem)/1.14 system-ui,sans-serif;letter-spacing:.13em;margin:.24em 0 .16em;padding-left:.13em;color:#fbf6ff;background:none;text-shadow:0 0 22px #a56eff83;max-width:100%;overflow-wrap:anywhere}
.intro-type strong{margin:.24em 0 .16em;max-width:min(94vw,24rem);overflow-wrap:normal;text-align:center}
.welcome .eyebrow{font-size:.64rem;color:#d9c5ff}
.welcome-verse{font:italic clamp(.93rem,3.7vw,1.25rem)/1.45 Georgia,serif;margin:.45rem 0;color:#f5e9ff}
.welcome-art{width:min(100%,37rem);max-height:40svh;object-fit:cover;border-radius:1.05rem;box-shadow:0 0 24px #7251e546;border:1px solid #876fe479;margin:.3rem 0 .85rem}
.welcome-actions{width:min(100%,26rem);display:grid;gap:.55rem}
button.primary{background:linear-gradient(170deg,#a567ff,#5a24c6 58%,#41229a);color:#fff;border-color:#e1b9ff;box-shadow:inset 0 0 10px #e1b9ff60,0 0 17px #944aff66}
button.primary:hover:not(:disabled){background:linear-gradient(170deg,#ad76ff,#6631d4 60%,#472ba2)}
.welcome-actions button{min-height:48px;border-radius:100px;font-weight:760}
.welcome-actions #solo-open{background:#101b38;border-color:#65c9ff86;box-shadow:inset 0 0 12px #008bd335}
.welcome .landing-links{margin:.45rem 0 .35rem;display:flex;gap:.4rem}
.welcome .landing-links button{background:transparent;border:0;color:#ded2f7}
#together-dialog,.collection{background:radial-gradient(ellipse at 50% 0,#221643,#0d0e24 58%);border-color:#9877e9;box-shadow:0 0 42px #7844cd64}
#together-dialog{width:min(91vw,28rem);max-height:88dvh;padding:1rem 1.25rem 1.25rem}
.setup-top,.solo-head{display:flex;justify-content:space-between;align-items:center;gap:.7rem}
#together-title,#solo-title{margin:.3rem 0;font-size:clamp(1.5rem,6vw,2.2rem);letter-spacing:-.04em}
#together-dialog #create{width:100%;margin-top:.65rem}
#together-dialog #join input{flex:1;min-width:0}
#setup-status{color:#ffd2aa;margin:0}
.pilot-note{border:1px solid #7765ad80;border-radius:.65rem;padding:0 .5rem}
.pilot-note p{font-size:.83rem;margin:.25rem 0 .6rem}
.intro{background:radial-gradient(ellipse at center,#292051,#0b0920 53%,#060714 78%);overflow:hidden;place-items:center;text-align:center}
.intro-type{display:grid;justify-items:center;inset:auto;position:relative;transform:none;width:min(90vw,36rem);padding:0}
.intro-type strong{animation:atelier-in .8s .3s both}
.intro-type .infinity{width:min(43vw,13rem);animation:atelier-spark 3s ease-out both}
.intro-type span{animation:atelier-in .9s .6s both;font-size:clamp(.96rem,4vw,1.28rem)}
.intro-actions{position:absolute;z-index:3;left:0;right:0;bottom:max(1rem,env(safe-area-inset-bottom));display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;padding:0 .65rem}
@keyframes atelier-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes atelier-spark{0%{opacity:0;transform:scale(.65) rotate(-14deg)}40%{opacity:1;transform:scale(1.09) rotate(3deg)}100%{transform:none}}
.board,.studio-stage{border-color:#8273d2;box-shadow:0 0 18px #653fd449,inset 0 0 20px #5e52ba24;border-radius:1rem}
.board:has(canvas[data-environment=neon]){background:#0b0c1f}
#game .clock-strip{border-color:#65469570}
#clock-you{color:#80eaff}#clock-them{color:#ffc387}
.game-controls,.studio-tools{background:#101128;border:1px solid #7466a754;border-radius:.95rem;padding:.28rem .45rem;margin-top:.35rem}
.tool-panel{background:#151332f5;border-color:#9478ee;box-shadow:0 0 16px #7552db70}
.results{background:radial-gradient(ellipse at top,#272048,#101128 66%);border-color:#8a76ce;text-align:center}
.results .actions{justify-content:center}
.result-check{display:grid;place-items:center;margin:0 auto .55rem;width:2.5rem;height:2.5rem;border:1px solid #78f6cc;border-radius:50%;color:#a1ffdc;box-shadow:0 0 16px #38dfa361}
#solo{max-width:58rem;margin:0 auto;padding:.6rem 0}
#solo .studio-stage{height:min(59dvh,60rem);min-height:12rem}
.studio-tools .actions{margin:.25rem 0}
.studio-tools .small{margin:.4rem 0}
.solo-swatches{display:flex;justify-content:center;gap:clamp(.35rem,2vw,.8rem);padding:.3rem 0}
.solo-swatches button{width:44px;min-width:0;padding:0;border-radius:50%;background:radial-gradient(circle,var(--ink) 0 37%,transparent 42%);border-color:transparent}
.solo-swatches button[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 10px var(--ink)}
.studio-tools [aria-pressed=true]:not(.solo-swatches button){border-color:var(--mint)}
.collection h2{color:#eee0ff;text-shadow:0 0 14px #a476fc}
@media(max-width:430px){.welcome-art{max-height:31svh}.welcome{padding:.72rem}.solo-swatches button{width:42px}.studio-tools .actions{gap:.32rem}.studio-tools .actions>*{padding-inline:.46rem}}
@media(prefers-reduced-motion:reduce){.intro-type strong,.intro-type .infinity,.intro-type span{animation:none}}
.artist-badge{display:grid;place-items:center;width:5rem;height:5rem;margin:.6rem auto;border-radius:50%;border:1px solid #9aefff;color:#fff0ff;font-size:2.3rem;background:radial-gradient(circle,#5c37a6,#161337 66%);box-shadow:-4px 0 15px #55dfff63,5px 0 18px #ed65ff72}
.artist-rank{text-align:center;font-weight:700;color:#e5cbff;padding:.55rem;border:1px solid #9b70d8;border-radius:.65rem;background:#1c1437}

.lite-roadmap {
  margin-top: .85rem;
  border: 1px solid #655087;
  border-radius: 1rem;
  background: #101026;
  color: #f6edff;
}
.lite-roadmap summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .8rem 1rem;
  cursor: pointer;
  list-style: none;
  font-weight: 650;
}
.lite-roadmap summary::-webkit-details-marker { display: none; }
.lite-roadmap summary:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 1rem;
}
.lite-roadmap summary small {
  margin-inline-start: .55rem;
  color: #c8b5ed;
  font-size: .75rem;
  font-weight: 500;
}
.roadmap-chevron {
  width: .5rem;
  height: .5rem;
  margin-inline-end: .2rem;
  border: solid #c8b5ed;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.lite-roadmap[open] .roadmap-chevron { transform: rotate(225deg); }
.roadmap-body {
  border-top: 1px solid #655087;
  padding: 0 1rem .85rem;
  font-size: .9rem;
}
.roadmap-body h2 { font-size: 1rem; }
.roadmap-body strong, .roadmap-body dt { color: #f6edff; }
.roadmap-body dl {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,13rem),1fr));
  gap: .65rem;
}
.roadmap-body dl div {
  padding: .65rem;
  border-radius: .65rem;
  background: #1c1537;
}
.roadmap-body dt { font-weight: 650; }
.roadmap-body dd { margin: .25rem 0 0; color: #c5bbdb; }
.roadmap-body .roadmap-note { margin-bottom: 0; font-size: .82rem; }