/* boruto.fan — the look of the game itself: jade lacquer, gold, ink brush, paper scrolls.
   Frames and ornaments are the game's own UI art (assets/ui), fonts are the game's fonts. */

@font-face { font-family: "Russo One"; src: url(../assets/fonts/RussoOne-Regular.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Nunito"; src: url(../assets/fonts/Nunito.woff2) format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
  --ink: #050a08;
  --jade-950: #07110e;
  --jade-900: #0b1a15;
  --jade-800: #0f241d;
  --jade-600: #1b4a3a;
  --gold: #e8b24a;
  --gold-hi: #ffd987;
  --gold-lo: #a8742a;
  --orange: #ff8a1f;
  --red: #c4322a;
  --pink: #ff6aa6;
  --paper-ink: #3a200f;
  --text: #f2eee3;
  --muted: #b7c2b8;
  --font-h: "Russo One", "Arial Black", sans-serif;
  --font-b: "Nunito", "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --z: 1;                    /* the page's zoom on big screens; screen-height sizes are divided by it */
}
@media (min-width: 2000px) { :root { --z: 1.15; } }
@media (min-width: 2300px) { :root { --z: 1.3; } }
@media (min-width: 3000px) { :root { --z: 1.6; } }
@media (min-width: 3600px) { :root { --z: 1.9; } }
html { zoom: var(--z); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
html, body { margin: 0; overflow-x: clip; }
body {
  background: var(--jade-950) url(../assets/img/paper_dark.webp) repeat;
  background-size: 1024px auto;
  color: var(--text);
  font: 400 18px/1.6 var(--font-b);
  -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-hi); }
b { font-weight: 800; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pink { color: var(--pink); }
.gold { color: var(--gold-hi); }
.red { color: var(--red); }
.center { text-align: center; }

/* ------------------------------------------------------------------ headings: the logo's lettering */
.title-big, .title-mid, h3 {
  font-family: var(--font-h);
  font-weight: 400;
  letter-spacing: .01em;
  margin: 0;
}
.title-big {
  font-size: clamp(42px, 6.5vw, 92px);
  line-height: 1;
  background: linear-gradient(180deg, #ffe7a0 0%, #ffb53a 48%, #e0601b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 2px #2a1004;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.55)) drop-shadow(0 10px 24px rgba(0,0,0,.6));
}
.title-mid {
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.05;
  background: linear-gradient(180deg, #ffe7a0, #ffae35 55%, #e3641e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1.5px #2a1004;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.5));
  margin-bottom: 18px;
}

/* the game's quest banner as a section title (objective_banner: its strip is the top 41/67) */
.ribbon {
  display: flex; justify-content: center;
  margin: 0 auto 34px;
}
.ribbon span {
  display: inline-block;
  font: 400 clamp(22px, 2.6vw, 30px)/44px var(--font-h);
  color: #ffe6a6;
  text-shadow: 0 2px 0 #1b0d02, 0 0 14px rgba(0,0,0,.6);
  -webkit-text-stroke: 1px #2a1505;
  padding: 0 34px;
  border-style: solid;
  border-width: 0 78px 27px 78px;
  border-image: url(../assets/ui/objective_banner.png) 0 253 87 253 fill;
  white-space: nowrap;
}
.ribbon.pinkish span { color: #ffd0e3; }
.banner-in .ribbon { justify-content: flex-start; margin: 0 0 18px -20px; }

/* ------------------------------------------------------------------ buttons (NinjaButton) */
.btn {
  --h: 54px;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 30px;
  font: 400 19px/1 var(--font-h); letter-spacing: .02em;
  text-decoration: none; cursor: pointer; border: 0;
  transition: transform .18s ease, filter .18s ease, color .18s;
  -webkit-tap-highlight-color: transparent;
}
.btn::before {             /* the ink brush behind, as in the game's menu: painted in left to right with a soft
                              edge (a moving mask - the stroke itself is never stretched), fades out on leave */
  content: ""; position: absolute; inset: -10px -26px; z-index: -1;
  background: url(../assets/ui/brush_r.webp) center/100% 100% no-repeat;
  opacity: 0; transform: scale(.94);
  -webkit-mask: linear-gradient(90deg, #000 42%, transparent 58%) 100% 0 / 300% 100% no-repeat;
          mask: linear-gradient(90deg, #000 42%, transparent 58%) 100% 0 / 300% 100% no-repeat;
  transition: opacity .22s ease, transform .3s ease, -webkit-mask-position .3s ease, mask-position .3s ease;
}
.btn:hover::before, .btn:focus-visible::before {
  opacity: .95; transform: none;
  -webkit-mask-position: 0 0; mask-position: 0 0;
  transition: opacity .18s ease, transform .55s cubic-bezier(.2,.8,.2,1),
    -webkit-mask-position .6s cubic-bezier(.35,.7,.2,1), mask-position .6s cubic-bezier(.35,.7,.2,1);
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn-gold {
  color: #2b1600;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 45%),
    linear-gradient(180deg, #ffd987, #f0a63a 60%, #d27a1e);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  filter: drop-shadow(0 6px 14px rgba(255,150,40,.25));
}
.btn-gold::before { display: none; }
.btn-gold:hover { filter: drop-shadow(0 6px 22px rgba(255,170,60,.55)) brightness(1.06); transform: translateY(-1px); }
.btn-gold::after {         /* a fine dark line inside the edge */
  content: ""; position: absolute; inset: 3px; z-index: -1;
  clip-path: inherit;
  box-shadow: inset 0 0 0 1.5px rgba(70,35,0,.55);
  pointer-events: none;
}
.btn-big { --h: 66px; font-size: 24px; padding: 0 44px; }
.btn-sm { --h: 40px; font-size: 15px; padding: 0 22px; }
.btn-ghost {
  color: var(--gold-hi);
  background: rgba(5,14,11,.55);
  box-shadow: inset 0 0 0 1.5px var(--gold-lo), inset 0 0 0 3px rgba(0,0,0,.5);
  border-radius: 2px;
}
.btn-ghost:hover { color: #fff3cf; }
.btn-ico { font-family: var(--font-b); font-weight: 900; }

/* ------------------------------------------------------------------ frames */
.frame {                   /* a lacquered gold frame with the game's corner ornaments */
  position: relative;
  background: linear-gradient(160deg, #13342a, #0b1d17 60%, #08150f);
  box-shadow:
    inset 0 0 0 1px rgba(255,214,140,.55),
    inset 0 0 0 4px #0a1712,
    inset 0 0 0 5px rgba(232,178,74,.35),
    0 18px 40px rgba(0,0,0,.55);
  border-radius: 6px;
}
.frame::before, .frame::after {
  content: ""; position: absolute; width: 46px; height: 46px; z-index: 3; pointer-events: none;
  background: url(../assets/ui/corner.png) center/contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.8));
}
.frame::before { left: 4px; top: 4px; }
.frame::after { right: 4px; bottom: 4px; transform: rotate(180deg); }

/* ------------------------------------------------------------------ the 18+ gate */
#gate {
  position: fixed; inset: 0; z-index: 100;
  display: flex; padding: var(--gutter);   /* the card centres with margin:auto, and still scrolls on a low screen */
  overflow-y: auto;
  transition: opacity .7s ease, visibility .7s;
}
#gate.gone { opacity: 0; visibility: hidden; }
.gate-bg {
  position: fixed; inset: 0;
  background: url(../assets/video/konoha_poster.jpg) center/cover;
  filter: blur(6px) brightness(.38) saturate(1.1);
  transform: scale(1.06);
}
.gate-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.75)); }
.gate-card {
  position: relative; width: min(560px, 100%); margin: auto;
  padding: 34px 34px 26px; text-align: center;
  background: rgba(8,22,17,.92);
  animation: rise .8s cubic-bezier(.2,.8,.2,1) both;
}
.gate-logo { width: min(400px, 85%, calc(46vh / var(--z))); margin: -8px auto 4px; filter: drop-shadow(0 8px 20px rgba(0,0,0,.6)); }
.seal {
  width: 78px; height: 78px; margin: 4px auto 14px;
  display: grid; place-items: center;
  font: 400 26px var(--font-h); color: #fff;
  background: radial-gradient(circle at 35% 30%, #ff5a46, #b8221a 60%, #7a120d);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px #2a0d06, 0 8px 22px rgba(196,50,42,.5);
  transform: rotate(-8deg);
}
.gate-q {
  margin: 0 0 10px; font: 400 clamp(24px, 4.2vw, 34px)/1.15 var(--font-h); letter-spacing: .01em;
  background: linear-gradient(180deg, #fff1c4, #ffd06a 55%, #f08a1c); -webkit-background-clip: text; background-clip: text;
  color: transparent; filter: drop-shadow(0 2px 0 #1a0c00) drop-shadow(0 4px 12px rgba(0,0,0,.6));
}
.gate-card p { margin: 0 0 22px; color: #e8e2d2; }
.gate-btns .btn { min-width: 150px; }
.gate-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.gate-card small { display: block; margin-top: 18px; color: var(--muted); font-size: 14px; }

/* ------------------------------------------------------------------ the top bar */
#bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 18px;
  height: 64px; padding: 0 var(--gutter);
  transition: background .3s, box-shadow .3s, transform .3s;
}
#bar.solid {
  background: rgba(6,16,12,.9);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(232,178,74,.35), 0 10px 30px rgba(0,0,0,.4);
}
.bar-logo img { height: 46px; width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); }
#bar nav { display: flex; gap: 6px; margin-left: auto; }
#bar nav a {
  color: #e9e3d2; text-decoration: none;
  font: 400 15px var(--font-h); letter-spacing: .03em;
  padding: 8px 12px; border-radius: 3px;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
  transition: color .2s, background .2s;
}
#bar nav a:hover { color: var(--gold-hi); background: rgba(232,178,74,.1); }
#bar nav a.hot { color: var(--pink); }

/* EN / RU */
.lang { display: inline-flex; border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--gold-lo); flex: none; }
.lang button {
  font: 400 13px/1 var(--font-h); letter-spacing: .04em;
  color: #cfc7b2; background: rgba(5,14,11,.6); border: 0; padding: 8px 10px; cursor: pointer;
}
.lang button + button { box-shadow: inset 1px 0 0 var(--gold-lo); }
.lang button.on { color: #2b1600; background: linear-gradient(180deg, #ffd987, #e9a23a); }
.lang button:not(.on):hover { color: var(--gold-hi); }
.lang-gate { position: absolute; top: 14px; right: 16px; z-index: 4; }

/* ------------------------------------------------------------------ hero */
#hero {
  position: relative; min-height: calc(100svh / var(--z));
  display: grid; align-items: center;
  padding: 90px var(--gutter) 90px;
  overflow: hidden;
}
#konoha, #leaves {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
#konoha { object-fit: cover; background: #0b1814 url(../assets/video/konoha_poster.jpg) center/cover; }
#leaves { pointer-events: none; }
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(4,10,8,.86) 0%, rgba(4,10,8,.55) 38%, rgba(4,10,8,0) 70%),
    linear-gradient(0deg, var(--jade-950) 0%, rgba(7,17,14,0) 26%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 18%);
}
.hero-in { position: relative; max-width: 700px; }
.hero-logo {
  width: min(640px, 92vw, calc(75svh / var(--z))); margin: 0 0 8px -14px;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.65));
  animation: rise 1s .2s cubic-bezier(.2,.8,.2,1) both;
}
.hero-line {
  margin: 0 0 6px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800;
  text-shadow: 0 2px 10px rgba(0,0,0,.85);
  animation: rise 1s .45s both;
}
.hero-line em { font-style: normal; color: var(--gold-hi); }
.hero-tags { margin: 0 0 28px; color: #d9d4c5; font-weight: 700; letter-spacing: .02em; text-shadow: 0 2px 8px #000; animation: rise 1s .6s both; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center; animation: rise 1s .75s both; }
.hero-meta { margin: 18px 0 0; color: var(--muted); font-size: 15px; text-shadow: 0 1px 6px #000; animation: rise 1s .9s both; }
.scroll-hint {
  position: absolute; left: 50%; bottom: 22px; translate: -50% 0;
  width: 30px; height: 50px; border-radius: 16px;
  box-shadow: inset 0 0 0 2px rgba(255,217,135,.7);
}
.scroll-hint span {
  position: absolute; left: 50%; top: 9px; width: 4px; height: 10px; margin-left: -2px;
  background: var(--gold-hi); border-radius: 2px;
  animation: wheel 1.8s ease-in-out infinite;
}

/* ------------------------------------------------------------------ sections */
.sec { position: relative; padding: clamp(70px, 9vw, 120px) var(--gutter); max-width: 1320px; margin: 0 auto; }

/* the paper scroll (the game's quest scroll) */
.scroll-paper {
  max-width: 900px; margin: 0 auto 70px;
  padding: 26px clamp(22px, 5vw, 70px) 30px;
  color: var(--paper-ink);
  border-style: solid;
  border-width: 38px 66px;
  border-image: url(../assets/ui/quest_scroll.png) 60 100 60 100 fill;
  font-size: 19px;
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.6));
}
.scroll-paper .ink {
  font: 400 clamp(26px, 3vw, 36px)/1.15 var(--font-h);
  color: #7a1d0f; margin: 0 0 12px;
  text-shadow: 0 1px 0 rgba(255,240,200,.6);
}
.scroll-paper p { margin: 0 0 12px; }
.scroll-paper .sign { font-weight: 800; color: #5a2c10; margin: 6px 0 0; }

.feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.feat { display: grid; grid-template-columns: 1.05fr 1fr; overflow: hidden; min-height: 240px; }
.feat-pic { position: relative; overflow: hidden; border-radius: 6px 0 0 6px; }
.feat-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.feat:hover .feat-pic img { transform: scale(1.06); }
.feat-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, #0e2a21); }
.feat-txt { padding: 26px 26px 24px 22px; }
.feat-ico { width: 52px; height: 52px; margin: 0 0 8px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.feat h3 { font-size: 24px; color: var(--gold-hi); margin-bottom: 8px; text-shadow: 0 2px 0 #000; }
.feat p { margin: 0; color: #d6dbd2; font-size: 16.5px; }

/* big art banners (story, after dark) */
.banner-sec {
  position: relative; min-height: min(calc(82vh / var(--z)), 760px);
  display: grid; align-items: center;
  padding: 90px var(--gutter);
  background: var(--art) center/cover no-repeat;
  overflow: hidden;
}
.banner-sec::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(4,8,7,.9) 0%, rgba(4,8,7,.62) 34%, rgba(4,8,7,0) 62%),
    linear-gradient(0deg, var(--jade-950), rgba(7,17,14,0) 22%),
    linear-gradient(180deg, var(--jade-950), rgba(7,17,14,0) 22%);
}
.banner-in { position: relative; max-width: 620px; }
.banner-in blockquote {
  margin: 22px 0 6px; padding-left: 20px;
  border-left: 3px solid var(--gold);
  font-size: clamp(19px, 1.8vw, 23px); font-style: italic; color: #f4ecd8;
  text-shadow: 0 2px 10px #000;
}
.banner-in .who { margin: 0; color: #c7a6ff; font-weight: 800; }
.banner-in .lead { font-size: clamp(18px, 1.7vw, 22px); text-shadow: 0 2px 10px #000; margin-top: 18px; }
.banner-sec.dark::before {
  background:
    linear-gradient(90deg, rgba(10,4,12,.92) 0%, rgba(10,4,12,.6) 36%, rgba(10,4,12,0) 62%),
    linear-gradient(0deg, var(--jade-950), rgba(7,17,14,0) 20%),
    linear-gradient(180deg, var(--jade-950), rgba(7,17,14,0) 20%);
}
.banner-sec.dark .title-big { background: linear-gradient(180deg, #ffe0ee 0%, #ff8fbf 50%, #d93a7a 100%); -webkit-background-clip: text; background-clip: text; }

/* screenshots */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.shot { display: block; overflow: hidden; padding: 6px; }
.shot.wide { grid-column: span 2; }
.shot img { width: 100%; height: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 3px; transition: transform .5s ease, filter .3s; }
.shot:hover img { transform: scale(1.04); filter: brightness(1.08); }

/* 18+ screenshots */
.x-sec { padding-top: 20px; }
.xgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.xcard { display: block; padding: 6px; overflow: hidden; }
.xcard img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 30%; border-radius: 3px; transition: transform .5s ease; }
.xcard:hover img { transform: scale(1.05); }
.plate {
  position: absolute; left: 50%; bottom: 16px; translate: -50% 0; z-index: 4;
  font: 400 18px/30px var(--font-h); color: #ffe6a6; white-space: nowrap;
  padding: 0 14px;
  border-style: solid; border-width: 7px 22px;
  border-image: url(../assets/ui/name_plate.png) 70 160 70 160 fill;
  text-shadow: 0 2px 0 #000;
}
.fine { color: var(--muted); font-size: 14px; text-align: center; margin: 22px 0 0; }

/* download */
.dl { display: grid; grid-template-columns: 1fr 1.1fr; overflow: hidden; min-height: 460px; }
.dl-art { background: center/cover; border-radius: 6px 0 0 6px; position: relative; }
.dl-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, #0c2019); }
.dl-in { padding: 40px clamp(22px, 4vw, 54px) 34px; }
.dl-in .ribbon { justify-content: flex-start; margin: 0 0 16px -24px; }
.dl-meta { color: var(--muted); margin: 14px 0 18px; font-size: 15px; }
.req { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 16px; color: #d6dbd2; }
.req li { padding-left: 26px; position: relative; }
.req li::before { content: "✦"; position: absolute; left: 2px; color: var(--gold); }
.dl .fine { text-align: left; margin-top: 18px; }

/* patreon */
.lead { font-size: 19px; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 36px 0 32px; align-items: start; }
.tier { display: block; text-decoration: none; color: inherit; padding: 6px; transition: transform .25s ease, box-shadow .25s; }
.tier img { width: 100%; aspect-ratio: 460/200; object-fit: cover; border-radius: 3px; }
.tier-in { padding: 14px 14px 10px; }
.tier h3 { font-size: 26px; color: #ffe2a0; display: flex; justify-content: space-between; align-items: baseline; text-shadow: 0 2px 0 #000; }
.tier h3 span { font-size: 30px; color: var(--orange); }
.tier p { margin: 6px 0 0; color: #d6dbd2; font-size: 15.5px; }
.tier:hover { transform: translateY(-4px); }
.tier.main { transform: scale(1.04); box-shadow: inset 0 0 0 1px rgba(255,214,140,.8), inset 0 0 0 4px #0a1712, inset 0 0 0 5px rgba(232,178,74,.6), 0 0 40px rgba(255,170,60,.25), 0 18px 40px rgba(0,0,0,.55); }
.tier.main:hover { transform: scale(1.04) translateY(-4px); }

/* footer */
footer {
  text-align: center; padding: 56px var(--gutter) 120px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  color: var(--muted); font-size: 14px;
  border-top: 1px solid rgba(232,178,74,.25);
}
footer img { width: 210px; margin: 0 auto 16px; opacity: .9; }
footer p { margin: 4px auto; max-width: 760px; }
footer .copy { margin-top: 14px; opacity: .7; }

/* ------------------------------------------------------------------ the music */
#music {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  width: 262px; padding: 12px 11px 10px;
  background: rgba(8,22,17,.94);
  transform: translateY(140%); transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
#music.on { transform: none; }
#music::before, #music::after { width: 28px; height: 28px; }
.music-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.disc {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold) 0 3px, #111 4px 9px, #2b2b2b 10px 11px, #111 12px);
  box-shadow: 0 0 0 1.5px var(--gold-lo);
  animation: spin 3s linear infinite; animation-play-state: paused;
}
#music.playing .disc { animation-play-state: running; }
.music-txt { min-width: 0; line-height: 1.15; }
.music-txt small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.music-txt b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-player { width: 240px; height: 200px; background: #000; border-radius: 3px; overflow: hidden; }
.music-player iframe { width: 240px; height: 200px; display: block; }
.music-ctl { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.music-ctl button {
  font: 700 14px var(--font-b); color: var(--gold-hi); cursor: pointer;
  background: #0d2219; border: 1px solid var(--gold-lo); border-radius: 3px;
  min-width: 32px; height: 30px;
}
.music-ctl button:hover { background: #163a2c; }
.music-ctl input { flex: 1; accent-color: var(--gold); min-width: 0; }
#music-pill {               /* "Music": gold, with moving sound bars and a slow glow - easy to see */
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: inline-flex; align-items: center; gap: 11px;
  height: 52px; padding: 0 24px 0 20px;
  font: 400 18px/1 var(--font-h); letter-spacing: .03em; color: #2b1600;
  background:
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 48%),
    linear-gradient(180deg, #ffd987, #f0a63a 60%, #d27a1e);
  border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 0 0 2px #3a1c00, 0 0 0 4px var(--gold), 0 10px 26px rgba(0,0,0,.6);
  animation: pill-glow 2.6s ease-in-out infinite;
  transition: transform .18s ease, filter .18s ease;
}
#music-pill[hidden] { display: none; }
#music-pill:hover { transform: translateY(-2px); filter: brightness(1.07); }
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; }
.eq i { width: 4px; height: 100%; border-radius: 2px; background: #3a1c00; transform-origin: 50% 100%; animation: eq 1.1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.45s; }
.eq i:nth-child(3) { animation-delay: -.2s; }
.eq i:nth-child(4) { animation-delay: -.7s; }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes pill-glow {
  0%, 100% { box-shadow: 0 0 0 2px #3a1c00, 0 0 0 4px var(--gold), 0 10px 26px rgba(0,0,0,.6), 0 0 0 rgba(255,170,60,0); }
  50% { box-shadow: 0 0 0 2px #3a1c00, 0 0 0 4px var(--gold-hi), 0 10px 26px rgba(0,0,0,.6), 0 0 34px rgba(255,170,60,.75); }
}

/* contact: «Write to me» */
.contact { max-width: 820px; margin: 0 auto; padding: 38px clamp(20px, 4vw, 52px) 30px; display: grid; gap: 16px; }
.ct-lead { margin: 0 0 6px; color: #d6dbd2; font-size: 17px; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct-field { display: grid; gap: 6px; font: 400 15px/1.2 var(--font-h); color: #ffe2a0; letter-spacing: .02em; }
.ct-field input, .ct-field textarea {
  width: 100%; padding: 12px 14px; font: 500 17px/1.45 var(--font-b); color: var(--text);
  background: rgba(3,10,8,.6); border: 0; border-radius: 3px; resize: vertical;
  box-shadow: inset 0 0 0 1px rgba(232,178,74,.45), inset 0 2px 8px rgba(0,0,0,.5);
  transition: box-shadow .18s;
}
.ct-field textarea { min-height: 150px; }
.ct-field input:focus, .ct-field textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--gold-hi), 0 0 0 3px rgba(232,178,74,.18); }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* ловушка для ботов */
.ct-foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 4px; }
.ct-foot .btn[disabled] { opacity: .6; cursor: wait; }
.ct-status { margin: 0; font-weight: 800; font-size: 16px; min-height: 1.4em; }
.ct-status.ok { color: #9be7a8; }
.ct-status.bad { color: #ff9b8a; }
.ct-fine { text-align: left; margin: 0; }
@media (max-width: 600px) { .ct-row { grid-template-columns: 1fr; } .ct-foot .btn { width: 100%; } }

/* the download choice: from this site or MEGA */
.dlp {
  position: fixed; inset: 0; z-index: 92; display: flex; padding: var(--gutter); overflow-y: auto;
  background: rgba(2,7,5,.82); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.dlp[hidden] { display: none; }
.dlp-card { position: relative; margin: auto; width: min(640px, 100%); padding: 40px clamp(20px, 4vw, 48px) 28px; text-align: center; animation: rise .35s ease both; }
.dlp-card .ribbon { margin-bottom: 10px; }
.dlp-x {
  position: absolute; top: 12px; right: 14px; z-index: 4; width: 40px; height: 40px;
  font: 700 22px/1 var(--font-b); color: var(--gold-hi); background: none; border: 0; cursor: pointer; opacity: .8;
}
.dlp-x:hover { opacity: 1; color: #fff3cf; }
.dlp-meta { margin: 0 0 22px; color: var(--muted); font-size: 15px; }
.dlp-opts { display: grid; gap: 18px; }
.dlp-opt { display: grid; justify-items: center; gap: 8px; }
.dlp-opt[hidden] { display: none; }
.dlp-opt .btn { min-width: min(360px, 100%); }
.dlp-opt small { color: #c9d2c8; font-size: 15px; }
.dlp-fine { margin-top: 24px; }
body.dlp-open { overflow: hidden; }
@media (max-width: 600px) { .dlp-opt .btn { width: 100%; min-width: 0; font-size: 20px; padding: 0 20px; } }

/* lightbox, toast */
#lb { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.9); display: grid; place-items: center; padding: 24px; cursor: zoom-out; }
#lb[hidden] { display: none; }
#lb img { max-width: calc(96vw / var(--z)); max-height: calc(90vh / var(--z)); box-shadow: 0 0 0 2px var(--gold-lo), 0 20px 60px #000; border-radius: 4px; }
#lb-x { position: absolute; top: 14px; right: 18px; font: 700 26px var(--font-b); color: #fff; background: none; border: 0; cursor: pointer; }
#toast {
  position: fixed; left: 50%; bottom: 28px; translate: -50% 0; z-index: 95;
  padding: 12px 22px; background: #0d2219; color: var(--gold-hi); font-weight: 800;
  box-shadow: inset 0 0 0 1px var(--gold-lo), 0 10px 30px rgba(0,0,0,.6); border-radius: 4px;
}
#toast[hidden] { display: none; }

/* ------------------------------------------------------------------ motion */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(16px); opacity: 0; } 100% { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ smaller screens */
@media (max-width: 1100px) {
  .feats { grid-template-columns: 1fr; }
  .xgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  #bar nav { display: none; }
  .bar-logo { margin-right: auto; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .shot.wide { grid-column: span 2; }
  .dl { grid-template-columns: 1fr; }
  .dl-art { min-height: 220px; border-radius: 6px 6px 0 0; }
  .dl-art::after { background: linear-gradient(0deg, #0c2019, transparent 60%); }
  .tiers { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .tier.main, .tier.main:hover { transform: none; }
  .banner-sec { min-height: 0; }
  .banner-sec::before, .banner-sec.dark::before { background: linear-gradient(0deg, rgba(4,8,7,.94) 0%, rgba(4,8,7,.55) 55%, rgba(4,8,7,.2)), linear-gradient(180deg, var(--jade-950), transparent 20%); }
  .banner-sec { padding-top: 46vw; }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  .feat { grid-template-columns: 1fr; }
  .feat-pic { aspect-ratio: 16/9; border-radius: 6px 6px 0 0; }
  .feat-pic::after { background: linear-gradient(0deg, #0e2a21, transparent 50%); }
  .gallery { grid-template-columns: 1fr; }
  .shot.wide { grid-column: auto; }
  .xgrid { gap: 12px; }
  .scroll-paper { border-width: 26px 40px; padding: 18px 12px 20px; font-size: 17px; }
  .ribbon span { border-width: 0 56px 20px 56px; padding: 0 16px; line-height: 36px; font-size: 20px; }
  .banner-in .ribbon, .dl-in .ribbon { margin-left: -8px; }
  #music { left: 8px; right: 8px; bottom: 8px; width: auto; display: grid; grid-template-columns: 200px 1fr; gap: 8px; }
  .music-player { width: 200px; height: 200px; grid-row: span 2; }
  .music-player iframe { width: 200px; height: 200px; }
  .music-ctl { flex-wrap: wrap; align-self: end; }
  .music-head { margin: 0; align-self: start; }
  .btn-big { --h: 58px; font-size: 20px; padding: 0 30px; }
  .hero-logo { margin-left: -8px; }
}
@media (max-width: 420px) {
  #music-pill { height: 44px; padding: 0 16px 0 14px; gap: 8px; font-size: 15px; right: 12px; bottom: 12px; }
  .eq { height: 16px; }
}
/* very small or low screens: a round gold button with the sound bars only, so it does not cover the page's buttons */
@media (max-width: 359px), (max-height: 560px) and (orientation: landscape) {
  #music-pill { width: 50px; height: 50px; padding: 0; gap: 0; justify-content: center; right: 12px; bottom: 12px; }
  #music-pill [data-i18n] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .eq { height: 20px; }
}
/* phones on their side and other low screens: the first screen must still show the title and the buttons */
@media (max-height: 560px) and (orientation: landscape) {
  #bar { height: 54px; }
  .bar-logo img { height: 38px; }
  #hero { padding: 70px var(--gutter) 30px; }
  .hero-logo { width: min(52vw, 58svh); margin-bottom: 2px; }
  .hero-line { font-size: 20px; }
  .hero-tags { margin-bottom: 14px; font-size: 15px; }
  .btn-big { --h: 50px; font-size: 18px; padding: 0 26px; }
  .hero-meta { margin-top: 10px; }
  .scroll-hint { display: none; }
  .banner-sec { min-height: 0; }
  .gate-card { padding: 22px 26px 16px; }
  .gate-logo { width: min(240px, 60%); margin-top: 0; }
  .seal { width: 52px; height: 52px; font-size: 19px; margin: 0 auto 8px; }
  .gate-card p { margin-bottom: 14px; }
  .gate-card small { margin-top: 10px; }
}
@media (max-height: 420px) and (orientation: landscape) { .gate-logo { display: none; } .lang-gate { top: 10px; } }