/* "Buy me an Ether": the tip button. It sits in the header, just left of Menu, on every page, from the first screen,
   on desktop and phone (2026-11-09, his ask: "at the top somewhere so i can see it on desktop and mobile").
   It used to float in the bottom-left corner and only showed up after the cover film had scrolled away.
   The markup is in each page's header; assets/ether-top.js plays the drink on click. A spin on "buy me a coffee"
   with the Ether potion from LANTHORNE: hover wobbles the potion and shows the line, click tips it back, the MP bar fills,
   "+50 MP" floats up like a game number, then itch.io opens in a new tab.
   Label: "Buy me an Ether" where the header has room, "Tip" where it does not (phone, small tablets, 1101 to 1279 px).
   The header links move one column left once they are a row (each page's own CSS) to make that room.
   New file name on purpose: netlify.toml caches /assets/* for 7 days, so a changed file must get a new name. */
.ether{position:relative;display:inline-flex;align-items:center;gap:8px;height:36px;margin:-9px 0;padding:0 15px 0 3px;
  background:rgba(13,13,13,.9);color:#FAFAF8;border:1px solid var(--gold-line,rgba(227,177,94,.46));border-radius:999px;
  text-decoration:none;white-space:nowrap;transition:transform .12s var(--ease-out,ease)}   /* the site animates only cheap properties: the gold border on hover just switches */
.ether::after{content:"";position:absolute;inset:-5px -3px}   /* a 46 px tall tap area around the 36 px button */
.ether:active{transform:scale(.97)}
.ether:focus-visible{outline:2px solid var(--gold,#E3B15E);outline-offset:3px;border-color:var(--gold,#E3B15E)}
.chrome .rt{gap:20px}

/* the potion: the game's 16 px sprite at exactly 2x, so every pixel stays square */
.eth-pot{position:relative;flex:0 0 32px;width:32px;height:32px;animation:eth-bob 4.2s steps(1,end) infinite}
.eth-pot img{display:block;width:32px;height:32px;image-rendering:pixelated;transform-origin:50% 90%}
@keyframes eth-bob{0%,78%,100%{transform:translateY(0)}82%{transform:translateY(-4px)}86%{transform:translateY(0)}90%{transform:translateY(-2px)}}
@keyframes eth-wob{0%{transform:rotate(-9deg)}100%{transform:rotate(9deg)}}
/* bubbles: three blue pixels that rise out of the neck on hover */
.eth-pot i{position:absolute;left:14px;top:4px;width:4px;height:4px;background:#9FE3FF;opacity:0}
.eth-pot i:nth-child(3){left:9px;animation-delay:.35s!important}
.eth-pot i:nth-child(4){left:19px;width:3px;height:3px;animation-delay:.7s!important}
@keyframes eth-bub{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}

/* the words, with the dev's MP bar under them: low on purpose, it fills when you click */
.eth-txt{display:flex;flex-direction:column;gap:5px}
.eth-t{font-family:var(--lab,inherit);font-size:var(--fs-lab,.75rem);font-weight:500;line-height:1;letter-spacing:.1em;text-transform:uppercase}
.eth-sh{display:none}
.eth-bar{position:relative;display:block;height:4px;background:#0B1A26;box-shadow:0 0 0 1px rgba(159,227,255,.4)}
.eth-bar b{position:absolute;inset:0;background:linear-gradient(90deg,#2F7BFF,#6FC3FF);transform:scaleX(.16);transform-origin:0 50%;transition:transform .5s cubic-bezier(.23,1,.32,1)}

/* the line: under the button now (it is at the top of the screen), right edges lined up */
.eth-s{position:absolute;right:0;top:calc(100% + 12px);padding:7px 12px 6px;background:rgba(13,13,13,.94);border:1px solid var(--gold-line,rgba(227,177,94,.46));
  border-radius:4px;font-family:var(--sans,inherit);font-size:12.5px;line-height:1.3;letter-spacing:0;text-transform:none;color:#FAFAF8;white-space:nowrap;
  pointer-events:none;opacity:0;transform:translateY(-6px);transition:opacity .2s var(--ease-out,ease),transform .25s var(--ease-out,ease)}
.ether:focus-visible .eth-s{opacity:1;transform:none}
.ether:focus-visible .eth-pot img{animation:eth-wob .5s steps(2,end) infinite}
.ether:focus-visible .eth-pot i{animation:eth-bub 1.1s steps(5,end) infinite}
/* everything a mouse hover does, only for a real mouse (a phone tap never leaves a stuck hover) */
@media (hover:hover) and (pointer:fine){
  .ether:hover{border-color:var(--gold,#E3B15E)}
  .ether:hover .eth-pot img{animation:eth-wob .5s steps(2,end) infinite}
  .ether:hover .eth-pot i{animation:eth-bub 1.1s steps(5,end) infinite}
  .ether:hover .eth-s{opacity:1;transform:none}
}

/* click: drink it */
.ether.drink .eth-pot img{animation:none!important;transform:rotate(-38deg) translateY(-2px);transition:transform .18s var(--ease-out,ease)}
.ether.drink .eth-bar b{transform:scaleX(1)}
.ether.drink .eth-bar{box-shadow:0 0 0 1px rgba(159,227,255,.7),0 0 10px rgba(111,195,255,.75)}
.ether.drink .eth-s{opacity:0!important;transform:translateY(-6px)!important}   /* the line steps aside for the +50 MP */
.eth-pop{position:fixed;z-index:61;pointer-events:none;font-family:var(--lab,inherit);font-weight:700;font-size:23px;letter-spacing:.06em;color:#B5ECFF;
  text-shadow:2px 0 #06131D,-2px 0 #06131D,0 2px #06131D,0 -2px #06131D,2px 2px #06131D,-2px -2px #06131D,0 0 14px rgba(111,195,255,.9);
  animation:eth-pop 1.1s cubic-bezier(.23,1,.32,1) forwards}
@keyframes eth-pop{0%{opacity:0;transform:translateY(6px) scale(.7)}18%{opacity:1;transform:translateY(-6px) scale(1.15)}30%{transform:translateY(-10px) scale(1)}100%{opacity:0;transform:translateY(-40px)}}

/* the short label where the header has no room for the long one */
@media (max-width:939px),(min-width:1101px) and (max-width:1279px){
  .eth-l{display:none}
  .eth-sh{display:inline}
}
@media (max-width:760px){
  .chrome .rt{gap:14px}
  .ether{padding-right:13px}
}
@media (prefers-reduced-motion:reduce){
  .eth-pot,.eth-pot img,.eth-pot i{animation:none!important}
  .ether,.ether:active{transform:none}
}