/* slap.monster shared UI.
   --jelly is rewritten every frame by the page script so the accent
   always matches the colour the slime happens to be right now. */
:root{
  --bg:#f2f5f7;
  --ink:#16242c;
  --jelly:#2fa9ee;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

/* wordmark */
.brand{
  position:fixed; z-index:14; pointer-events:none;
  top:max(14px,env(safe-area-inset-top)); left:max(16px,env(safe-area-inset-left));
  font-size:clamp(20px,5.4vw,26px); font-weight:800; letter-spacing:-.025em;
  color:var(--ink); opacity:.55;
}
.brand i{font-style:normal; font-weight:600; opacity:.55}
.brand a{color:inherit; text-decoration:none; pointer-events:auto}

/* button: two hairlines, same weight as the wordmark */
.mbtn{
  position:fixed; z-index:22;
  bottom:max(9px,env(safe-area-inset-bottom)); right:max(11px,env(safe-area-inset-right));
  width:66px; height:66px; border:0; background:transparent; cursor:pointer;
  display:grid; place-content:center; gap:9px;
  -webkit-tap-highlight-color:transparent;
}
.mbtn span{
  display:block; width:27px; height:2.25px; border-radius:2px;
  background:var(--ink); opacity:.5;
  transition:transform .2s ease, opacity .16s ease, background .2s linear;
}
.mbtn:active span{background:var(--jelly); opacity:1}
.nav-open .mbtn span{background:var(--jelly); opacity:1}
.nav-open .mbtn span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.nav-open .mbtn span:nth-child(2){transform:translateY(-5.6px) rotate(-45deg)}

/* menu: no panel, no shadow. Just the words. */
.nav{
  position:fixed; inset:0; z-index:20;
  visibility:hidden; transition:visibility 0s .2s;
}
.nav-open .nav{visibility:visible; transition:visibility 0s}
/* ボタンの上に、下から積み上がる */
.nav ul{
  list-style:none; position:absolute;
  bottom:calc(max(9px,env(safe-area-inset-bottom)) + 74px);
  right:max(28px,calc(env(safe-area-inset-right) + 28px));
  text-align:right;
}
.nav a, .nav .off{
  display:block; padding:12px 0;
  font-size:16px; font-weight:700; letter-spacing:.2em;
  color:var(--ink); text-decoration:none;
  opacity:0; transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease, color .2s linear;
}
.nav-open .nav a, .nav-open .nav .off{opacity:.62; transform:none}
/* ボタンに近い下の項目から出す。上から数えるので順番が逆になる */
.nav-open .nav li:nth-last-child(2) a,.nav-open .nav li:nth-last-child(2) .off{transition-delay:.02s}
.nav-open .nav li:nth-last-child(3) a,.nav-open .nav li:nth-last-child(3) .off{transition-delay:.04s}
.nav-open .nav a:hover,
.nav-open .nav a:active,
.nav-open .nav a[aria-current]{color:var(--jelly); opacity:1}
.nav-open .nav .off{opacity:.2; cursor:default}

@media (prefers-reduced-motion:reduce){
  .nav, .nav a, .nav .off, .mbtn span{transition-duration:.001s}
}