/* Colours are the game's own: ShellPalette.kt for the shell, the brick tiers from play. */
:root{
  --space:#05070c;
  --deep:#0a0e16;
  --card:#1a2438;
  --picked:#294266;
  --line:#1f2a40;
  --text:#ebf2ff;
  --muted:#9eadcc;
  --faint:#66728c;
  --accent:#59d9ff;
  --mint:#3ddc97;
  --danger:#ff5470;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{
  margin:0;color:var(--text);background-color:var(--space);
  font:1rem/1.6 "Liberation Sans",Arimo,Arial,"Helvetica Neue",Helvetica,sans-serif;
  background-image:
    radial-gradient(1px 1px at 23px 41px,#3b4d6b,transparent),
    radial-gradient(1px 1px at 131px 97px,#6b5b3b,transparent),
    radial-gradient(1.5px 1.5px at 77px 173px,#34506a,transparent);
  background-size:190px 210px,260px 230px,330px 290px;
}
img{max-width:100%;height:auto}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h2{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.1rem);line-height:1.2;letter-spacing:-.01em;margin:0 0 1rem}
h3{font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin:0 0 .3rem}
p{margin:0 0 1rem}
.wrap{max-width:70rem;margin-inline:auto;padding-inline:1.25rem}
section{padding-block:3.5rem}
.measure{max-width:46rem}
.note{color:var(--muted);font-size:.9rem}

/* Top bar */
.bar{position:sticky;top:0;z-index:10;background:var(--space);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:3.5rem}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--text);text-decoration:none;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.brand img{border-radius:6px}
.bar nav{display:flex;gap:1.25rem}
.bar nav a{color:var(--muted);text-decoration:none;font-size:.92rem}
.bar nav a:hover{color:var(--text)}
@media (max-width:30rem){.brand span{display:none}.bar nav{gap:1rem}}

/* Hero */
.hero{padding-block:1rem 3rem}
.hero h1{margin:0 auto;max-width:72rem;line-height:0}
.key{
  display:block;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 5%,#000 85%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 5%,#000 85%,transparent);
  mask-composite:intersect;
}
.hero-copy{display:grid;gap:1.5rem 3rem;align-items:end;margin-top:.5rem}
@media (min-width:56rem){.hero-copy{grid-template-columns:1.3fr 1fr}}
.lede{font-size:clamp(1.2rem,1rem + 1.1vw,1.65rem);line-height:1.35;margin:0}
.cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem}
.btn{
  display:inline-block;padding:.85rem 1.3rem .8rem;
  background:var(--picked);color:var(--text);border-left:5px solid var(--accent);box-shadow:0 3px 0 #0c1424;
  text-decoration:none;text-transform:uppercase;letter-spacing:.05em;font-size:.95rem;
}
.btn:hover{background:#31507a}
.btn.alt{background:var(--card);border-left-color:var(--muted);color:var(--muted)}
.btn.alt:hover{background:#223049;color:var(--text)}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;color:var(--muted);font-size:.9rem}

/* How it plays */
.band{background:var(--deep);border-block:1px solid var(--line)}
.split{display:grid;gap:2.5rem}
@media (min-width:56rem){.split{grid-template-columns:1fr 25rem;gap:4rem;align-items:start}}
.steps{list-style:none;padding:0;margin:1.5rem 0 0;counter-reset:step}
.steps li{counter-increment:step;position:relative;padding:1rem 0 1rem 3.25rem;border-top:1px solid var(--line);color:var(--muted);transition:color .3s}
.steps li strong{color:var(--text);font-weight:600}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:1rem;width:2.1rem;height:2.1rem;
  display:grid;place-items:center;background:var(--card);color:var(--muted);font-weight:700;transition:background .3s,color .3s;
}
.steps li.on{color:var(--text)}
.steps li.on::before{background:var(--picked);color:var(--accent);box-shadow:inset 3px 0 var(--accent)}

/* Warp diagram. main.js reads brick positions from layout, so these numbers can change freely. */
.demo{margin:0;padding:1rem;background:var(--space);border:1px solid var(--line)}
.hud{text-align:center;transition:opacity .3s}
.count{display:block;font-size:2.4rem;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.track{display:block;width:60%;height:4px;margin:.4rem auto .15rem;background:rgb(255 255 255/.16)}
.track i{display:block;height:100%;background:var(--accent);transform-origin:left}
[data-phase=breakout] .track i{animation:drain 6s 1s linear both}
@keyframes drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.label{font-size:.8rem;letter-spacing:.06em;color:var(--muted)}
[data-phase=warp] .hud,[data-phase=shooter] .hud{opacity:0}
.field{position:relative;aspect-ratio:4/5;margin-top:.5rem;overflow:hidden;background:#000}
.wall{position:absolute;inset:0}
.brick{
  position:absolute;left:calc(5% + var(--c) * 11.25%);top:calc(10% + var(--r) * 5.5%);width:10%;aspect-ratio:5/2;
  background:linear-gradient(rgb(255 255 255/.28),transparent 55%),var(--k);border-radius:2px;
  box-shadow:inset 0 0 0 1px rgb(0 0 0/.35);
  --dy:calc(var(--r) * 130% + 200%);
  transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .25s,scale .25s;
}
.brick:nth-child(even){--dy:calc(var(--r) * 130% + 265%)}
.brick[data-t=y]{--k:#ecea84}
.brick[data-t=o]{--k:#e8960c}
.brick[data-t=r]{--k:#e0485a}
.brick[data-t=g]{--k:#3cbd3c}
.brick[data-t=t]{--k:#12898a}
.brick.drop{transform:translateY(-900%);opacity:0}
.brick.gone{opacity:0;scale:1.8}
[data-phase=warp] .brick,[data-phase=shooter] .brick{transform:translateY(var(--dy)) rotate(90deg);animation:sway 1.8s ease-in-out calc(var(--c) * -.37s + var(--r) * -.61s) infinite alternate}
@keyframes sway{from{translate:-25% 0}to{translate:25% 0}}
.bolt{position:absolute;width:2.4%;aspect-ratio:1/2.2;translate:-50% -50%;background:radial-gradient(#fff 25%,#ffc46b 50%,#e0485a 85%);clip-path:polygon(50% 0,100% 45%,50% 100%,0 45%)}
.ball,.paddle,.ship,.shot{position:absolute;left:50%;translate:-50% -50%}
.ball{top:87.5%;width:2.6%;aspect-ratio:1;border-radius:50%;background:#f4f8ff;box-shadow:0 0 6px 2px rgb(89 217 255/.55);transition:left .5s linear,top .5s linear,opacity .3s}
.paddle{top:90%;width:18%;aspect-ratio:7/1;background:linear-gradient(#e8edf5,#8793a8);border-inline:3px solid var(--mint);border-radius:2px;transition:left .45s ease-out,rotate .6s,scale .6s,opacity .6s}
.ship{top:88%;width:7%;height:auto;opacity:0;scale:.4;transition:left .15s ease-out,opacity .6s .3s,scale .6s .3s}
.shot{top:84%;width:.8%;aspect-ratio:1/5;border-radius:2px;background:var(--mint);box-shadow:0 0 4px var(--mint);opacity:0}
[data-phase=warp] .ball,[data-phase=shooter] .ball{opacity:0}
[data-phase=warp] .paddle,[data-phase=shooter] .paddle{rotate:-90deg;scale:.35;opacity:0}
[data-phase=warp] .ship,[data-phase=shooter] .ship{opacity:1;scale:1}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:.75rem;padding:4px;background:var(--card)}
.tabs button{
  font:inherit;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);background:#10151f;border:0;padding:.55rem .25rem;cursor:pointer;
}
.tabs button:hover{color:var(--text)}
.tabs button[aria-pressed=true]{background:var(--picked);color:var(--text);box-shadow:inset 0 -3px var(--accent)}
.demo figcaption{margin-top:.6rem;font-size:.82rem;color:var(--muted)}

/* Screenshots: a swipe row on phones, a grid from tablet up */
.shots{
  list-style:none;margin:1.5rem 0 0;padding:0 0 .5rem;
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(12rem,62%);gap:1rem;
  overflow-x:auto;scroll-snap-type:x mandatory;
}
.shots li{scroll-snap-align:start}
@media (min-width:48rem){.shots{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible}}
.shots figure{margin:0}
.shots a{display:block;border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:border-color .2s}
.shots a:hover{border-color:var(--accent)}
.shots img{display:block;width:100%}
.shots figcaption{margin-top:.6rem;font-size:.88rem;line-height:1.45;color:var(--muted)}
.wide{margin:2rem 0 0;max-width:48rem}
.pair{display:grid;gap:1rem;margin:1.5rem 0 0;max-width:46rem}
@media (min-width:40rem){.pair{grid-template-columns:1fr 1fr}}
.pair figure{margin:0}
.wide a,.pair a{display:block;border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:border-color .2s}
.wide a:hover,.pair a:hover{border-color:var(--accent)}
.wide img,.pair img{display:block;width:100%}
.wide figcaption,.pair figcaption{margin-top:.6rem;font-size:.88rem;line-height:1.45;color:var(--muted)}
.upgrades tbody th small{display:block;font-size:.78rem;font-weight:400;color:var(--muted)}
.unlocks li:last-child:nth-child(odd){grid-column:1/-1}

/* Drops */
.drops{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.5rem}
.drops li{display:flex;align-items:center;gap:.75rem;padding:.45rem .75rem;background:var(--card);border-left:3px solid var(--muted)}
.drops img{width:3.5rem;height:1.75rem;flex:none}
.drops small{display:block;font-size:.78rem;line-height:1.3;color:var(--muted)}
.drops .rare{border-left-color:var(--accent)}
.drops .bad{border-left-color:var(--danger)}

/* Shop table */
.table{overflow-x:auto;margin-top:1.5rem}
.upgrades{width:100%;border-collapse:separate;border-spacing:0 6px}
.upgrades th,.upgrades td{text-align:left;vertical-align:top;padding:.8rem 1rem}
@media (max-width:40rem){.upgrades th,.upgrades td{padding:.6rem;font-size:.9rem}}
.upgrades thead th{padding-block:0 .2rem;font-size:.78rem;font-weight:400;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.upgrades tbody th,.upgrades tbody td{background:var(--card)}
.upgrades tbody th{border-left:4px solid var(--muted);font-weight:600;white-space:nowrap}
.upgrades .no{color:var(--faint)}

/* Unlocks, drawn like the EXTRAS rows */
.unlocks{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.6rem}
@media (min-width:48rem){.unlocks{grid-template-columns:1fr 1fr}}
.unlocks li{padding:1rem 1.25rem;background:var(--picked);border-left:5px solid var(--accent)}
.unlocks p{margin:0;color:#c3cde2}
.sw{display:inline-block;width:1.1rem;height:1.1rem;margin-right:.25rem;vertical-align:-.2rem;background:var(--k);border:1px solid rgb(255 255 255/.3)}

/* Details */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr));gap:1px;margin:1.5rem 0 0;background:var(--line);border:1px solid var(--line)}
.facts div{padding:1.1rem 1.25rem;background:var(--space)}
.facts dt{margin-bottom:.3rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.facts dd{margin:0}

.get{padding:clamp(1.5rem,4vw,2.5rem);background:var(--card);border-left:5px solid var(--mint)}
.get h2{margin-bottom:.5rem}
.get p:last-child{margin:0}
footer{padding-block:1.5rem 2.5rem;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)}

/* Changelog page */
.changelog{padding-block:3rem 4rem}
.changelog h1{font-size:clamp(1.8rem,1.3rem + 2vw,2.6rem);line-height:1.1;margin:0 0 .5rem}
.release{display:grid;gap:.4rem 2rem;padding-block:1.5rem;border-top:1px solid var(--line)}
.release:first-of-type{margin-top:2rem}
@media (min-width:48rem){.release{grid-template-columns:10rem 1fr}}
.release h2{margin:0;font-size:1.5rem;color:var(--accent);font-variant-numeric:tabular-nums}
.release time{font-size:.85rem;color:var(--muted)}
.release ul{margin:0;padding-left:1.1rem;max-width:46rem}
.release li{margin:.3rem 0}
.release li::marker{color:var(--mint)}

/* Screenshot viewer */
.viewer{padding:0;border:0;background:none;max-width:94vw;max-height:94vh;overflow:visible}
.viewer::backdrop{background:rgb(2 3 6/.88)}
.viewer img{display:block;width:auto;height:auto;max-width:94vw;max-height:94vh;border-radius:12px;cursor:zoom-out}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}