/* Slide Overdrive — teaser. Shared by /slide-overdrive/en/ and /jp/.
   Palette is the game's own (lib/ui/app_theme.dart); lime is reserved in the
   game for achievements, so it is only used here where achievements are named. */

:root{
  --ground:#07050f;
  --ground-2:#120c24;
  --ink:#eeeaf8;
  --muted:#9a93b8;
  --line:rgba(164,107,255,.18);
  --cyan:#22e7ff;
  --violet:#a46bff;
  --magenta:#ff2d95;
  --amber:#ffc93c;
  --lime:#7cff5a;

  /* One board cell. The board is eight cells wide and never wider than the
     screen minus a 16px gutter each side. */
  --cell:min(60px, calc((100vw - 32px) / 8));
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  background:var(--ground);
  color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
:lang(ja) body,body:lang(ja){
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",ui-sans-serif,system-ui,sans-serif;
  line-break:strict;
}

/* The game's wall, machined down to a texture, fading out below the hero. */
.bg{
  position:absolute;
  inset:0 0 auto 0;
  height:min(1100px,150vh);
  pointer-events:none;
  background:
    radial-gradient(60% 45% at 50% 18%, rgba(34,231,255,.10), transparent 70%),
    radial-gradient(40% 35% at 78% 30%, rgba(255,45,149,.09), transparent 70%),
    url("/slide-overdrive/img/board-mesh-16x4.webp") 0 0 / 512px 128px repeat;
  -webkit-mask-image:linear-gradient(#000 25%, transparent);
          mask-image:linear-gradient(#000 25%, transparent);
  opacity:.75;
}

a{color:inherit}
a:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:2px}

/* ── top bar ─────────────────────────────────────────────────────────── */
.top{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:960px;
  margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 18px) 16px 0;
  font-size:.78rem;
  letter-spacing:.18em;
}
.home{text-decoration:none;font-weight:600}
.home span{font-weight:200;color:var(--muted)}
.lang{display:flex;gap:14px}
.lang a{text-decoration:none;color:var(--muted);letter-spacing:.12em}
.lang a[aria-current]{color:var(--ink)}
.lang a:hover{color:var(--cyan)}

main{position:relative;z-index:1}

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{
  max-width:640px;
  margin:0 auto;
  padding:40px 16px 0;
  text-align:center;
}
.hero h1{margin:0}
.hero h1 img{
  display:block;
  width:min(560px,100%);
  height:auto;
  margin:0 auto;
}


.cta{
  margin:32px 0 0;
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cyan);
}
.cta span{
  display:inline-block;
  padding:12px 26px;
  border:1px solid rgba(34,231,255,.35);
  border-radius:999px;
  background:rgba(18,12,36,.8);
  box-shadow:0 0 24px rgba(34,231,255,.12), inset 0 0 18px rgba(34,231,255,.06);
}
/* ── the board vignette ──────────────────────────────────────────────────
   Nobody at the controls: the turn clock runs out, the game deals a row under
   the stack and pushes it up a cell, four times, until the pile is four high.
   Then it goes dark and starts over.

   The pile is laid out in its final position and slid up out of the floor as
   one piece — which is exactly what a deal does, so the row that surfaces
   first ends up on top. Rows are legal deals (4–7 cells, never full) and every
   block rests on something, so nothing would fall as the rows arrive.

   The block pictures carry 28px of air around a 138px cell, i.e. 0.2029 of a
   cell; --c is the column of a block's left end, --r its row up from the floor. */
.board{
  --rows:5;
  --air:calc(var(--cell) * -.2029);
  position:relative;
  width:calc(var(--cell) * 8);
  height:calc(var(--cell) * var(--rows));
  margin:32px auto 0;
  background:url("/slide-overdrive/img/board-mesh-8x2.webp") 0 100% / 100% calc(var(--cell) * 2) repeat-y;
  border-radius:calc(var(--cell) * .08);
  box-shadow:0 0 0 1px var(--line), 0 18px 60px rgba(0,0,0,.55);
  /* hide what is still under the floor, but let glow spill past the sides */
  clip-path:inset(-50% -50% 0 -50%);
}
.pile{
  position:absolute;
  inset:0;
  animation:so-deal 10s linear infinite;
}
.b{
  position:absolute;
  height:calc(var(--cell) * 1.4058);
  width:auto;
  left:calc(var(--cell) * var(--c) + var(--air));
  top:calc(var(--cell) * (var(--rows) - 1 - var(--r)) + var(--air));
}

/* Four deals a beat apart, each a quick push; then the stack sags and goes. */
@keyframes so-deal{
  0%,8%  {transform:translateY(calc(var(--cell) * 4));opacity:1;filter:none;animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  11%,26%{transform:translateY(calc(var(--cell) * 3));animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  29%,44%{transform:translateY(calc(var(--cell) * 2));animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  47%,62%{transform:translateY(var(--cell));animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  65%,82%{transform:none;opacity:1;filter:none}
  90%    {transform:translateY(calc(var(--cell) * .06));opacity:0;filter:brightness(.35) saturate(.4)}
  90.01% {transform:translateY(calc(var(--cell) * 4));opacity:0;filter:none}
  100%   {transform:translateY(calc(var(--cell) * 4));opacity:1;filter:none}
}

/* ── sections ────────────────────────────────────────────────────────── */
.section{
  max-width:640px;
  margin:0 auto;
  padding:56px 16px 0;
}
.hero + .section{padding-top:40px}
.label{
  margin:0 0 18px;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--amber);
  text-align:center;
}
.section p{margin:0 0 14px;color:var(--muted)}
.section p strong{color:var(--ink);font-weight:600}

.counts{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.counts li{
  padding:22px 8px 18px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(18,12,36,.72);
}
.counts b{
  display:block;
  font-size:clamp(2rem,9vw,2.8rem);
  font-weight:800;
  line-height:1;
  text-shadow:0 0 18px currentColor;
}
.counts li:nth-child(1) b{color:var(--cyan)}
.counts li:nth-child(2) b{color:var(--magenta)}
.counts li:nth-child(3) b{color:var(--lime)}
.counts span{
  display:block;
  margin-top:10px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
}
@media (max-width:380px){.counts span{letter-spacing:.08em}}
:lang(ja) .counts span{letter-spacing:.06em;font-size:.82rem}
.counts + p{margin-top:18px;text-align:center}

.center,.notify{text-align:center}
.notify a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid rgba(34,231,255,.4);
  padding-bottom:1px;
}
.nw{white-space:nowrap}
.notify a:hover{color:var(--cyan);border-bottom-color:var(--cyan)}

footer{
  position:relative;
  z-index:1;
  max-width:640px;
  margin:72px auto 0;
  padding:22px 16px calc(env(safe-area-inset-bottom,0px) + 28px);
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:.8rem;
  color:var(--muted);
}
footer a{text-decoration:none}
footer a:hover{color:var(--cyan)}

/* No motion: show the finished pile. */
@media (prefers-reduced-motion:reduce){
  .pile{animation:none}
}