/* ═══════════════════════════════════════════════════════════
   ShadowDemonHD — shared stylesheet
   ═══════════════════════════════════════════════════════════ */

:root{
  /* nickname gradient — the "Эфирные сумерки" paint */
  --g1:#E86FDC; --g2:#B98CFF; --g3:#8FB6FF; --g4:#5BE1F2;
  --tw:#9146FF; --tg:#2AABEE; --da:#F5A623; --ppl:#3CD07A;

  /* dark (default) — flat neutral, like pepeland */
  --bg:#0A0A0C;
  --card:#141416;
  --card-2:#1C1C20;
  --hair:rgba(255,255,255,.08);
  --hair-2:rgba(255,255,255,.15);
  --text:#F2F2F4;
  --text-2:rgba(242,242,244,.62);
  --text-3:rgba(242,242,244,.40);
  --glass:rgba(16,16,19,.78);
  --shadow:0 20px 50px rgba(0,0,0,.45);

  --wrap:min(720px, 100% - 32px);
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:26px;
  color-scheme:dark;
}

:root[data-theme="light"]{
  --bg:#F5F5F7;
  --card:#FFFFFF;
  --card-2:#F0F0F3;
  --hair:rgba(16,16,22,.09);
  --hair-2:rgba(16,16,22,.16);
  --text:#16161A;
  --text-2:rgba(22,22,26,.62);
  --text-3:rgba(22,22,26,.42);
  --glass:rgba(255,255,255,.8);
  --shadow:0 20px 50px rgba(30,30,50,.12);
  color-scheme:light;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:400 100%/1.55 system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color .35s ease, color .35s ease;
}
body.is-locked{ overflow:hidden; }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
button{ font:inherit; color:inherit; background:none; border:0; -webkit-tap-highlight-color:transparent; }
::selection{ background:rgba(185,140,255,.35); }
:focus-visible{ outline:2px solid var(--g2); outline-offset:3px; border-radius:8px; }

/* ───────── typography ───────── */
.display{ font-size:clamp(2rem,6vw,3.2rem); line-height:1.05; letter-spacing:-.035em; font-weight:700; margin:0; }
.h2{ font-size:clamp(1.5rem,3.6vw,2.15rem); line-height:1.12; letter-spacing:-.03em; font-weight:660; margin:0; }
.h3{ font-size:1.05rem; line-height:1.3; letter-spacing:-.018em; font-weight:620; margin:0; }

.body{ color:var(--text-2); margin:0; }

@keyframes nickshift{ to{ background-position:-260% 0; } }

/* ───────── layout ───────── */
.wrap{ width:var(--wrap); margin:0 auto; position:relative; z-index:1; }
.section{ padding:clamp(44px,7vh,76px) 0; }
.section-head{ display:grid; gap:10px; margin-bottom:22px; text-align:center; justify-items:center; }

/* ───────── top bar (pepeland layout: menu · logo · action) ───────── */
.top{
  position:sticky; top:0; z-index:50;
  display:grid; grid-template-columns:40px 1fr 40px; align-items:center; gap:10px;
  padding:12px max(16px, calc((100% - var(--wrap)) / 2));
  background:var(--glass);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--hair);
}
.top .center-slot{ display:flex; align-items:center; justify-content:center; gap:9px; min-width:0; }
.top .avatar{
  width:28px; height:28px; flex:none; border-radius:50%; overflow:hidden;
  border:1px solid var(--hair-2); background:var(--card);
}
.top .avatar img{ width:100%; height:100%; object-fit:cover; object-position:56% 26%; }

.icon-btn{
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:12px;
  background:var(--card);
  border:1px solid var(--hair);
  color:var(--text-2);
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, transform .1s ease-out;
}
.icon-btn:hover{ background:var(--card-2); color:var(--text); }
.icon-btn:active{ transform:scale(.92); }

/* sheet menu */
.sheet-scrim{
  position:fixed; inset:0; z-index:70;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  opacity:0; visibility:hidden;
  transition:opacity .28s ease, visibility .28s;
}
.sheet-scrim.open{ opacity:1; visibility:visible; }
.sheet{
  position:fixed; z-index:71; left:12px; right:12px; bottom:12px;
  max-width:520px; margin:0 auto;
  padding:12px;
  border-radius:24px;
  background:var(--glass);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--hair-2);
  box-shadow:0 26px 60px rgba(0,0,0,.5);
  transform:translate3d(0,140%,0);
  will-change:transform;
  padding-bottom:max(12px, env(safe-area-inset-bottom));
}
.sheet .grab{ width:38px; height:4px; border-radius:99px; background:var(--hair-2); margin:2px auto 10px; }
.sheet a{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-radius:15px;
  font-weight:560;
  transition:background-color .2s ease, transform .1s ease-out;
}
.sheet a:hover{ background:var(--card); }
.sheet a:active{ transform:scale(.98); }
.sheet a[aria-current="page"]{ background:var(--card); }
.sheet a svg{ width:19px; height:19px; color:var(--text-3); }

/* ───────── live status ───────── */
.dot{
  width:8px; height:8px; flex:none; border-radius:50%;
  background:#F04A4A;
  transition:background-color .3s ease;
}
.is-live .dot{ background:#3CD07A; animation:pulse 2.4s ease-out infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(60,208,122,.55); }
  70%{ box-shadow:0 0 0 9px rgba(60,208,122,0); }
  100%{ box-shadow:0 0 0 0 rgba(60,208,122,0); }
}
@media (prefers-reduced-motion: reduce){ .is-live .dot{ animation:none; } }

/* ───────── wide link buttons (pepeland style) ───────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 22px; border-radius:15px;
  font-size:.95rem; font-weight:620; letter-spacing:-.01em;
  cursor:pointer;
  transition:transform .11s cubic-bezier(.2,.8,.3,1), background-color .2s ease, filter .2s ease;
  will-change:transform;
}
.btn:active{ transform:scale(.985); }

.btn svg{ flex:none; }

/* ───────── minecraft nick (font from pepeland.net) ───────── */
@font-face{
  font-family:"Minecraft";
  src:url("fonts/Minecraft.woff2") format("woff2");
  font-display:swap;
}
@font-face{
  font-family:"Minecraft Default";
  src:url("fonts/MinecraftDefault-Regular.woff2") format("woff2");
  size-adjust:150%;
  font-display:swap;
}

/* live community timer */
.timer{
  display:grid; gap:8px;
  padding:16px; border-radius:15px;
  background:var(--card-2); border:1px solid var(--hair);
}

.timer .val{
  display:flex; gap:12px; flex-wrap:wrap; align-items:baseline;
  font-variant-numeric:tabular-nums;
}
.timer .unit{ display:flex; align-items:baseline; gap:4px; }
.timer .unit b{ font-size:1.32rem; font-weight:700; letter-spacing:-.02em; line-height:1; }
.timer .unit span{ font-size:.74rem; color:var(--text-3); }

/* ───────── carousel ───────── */
.carousel{ position:relative; }

.credit{
  margin-left:auto; color:var(--text-3); font-size:.84rem;
  text-align:right;
}
.credit a{
  color:var(--text-2); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--hair-2);
  transition:color .2s ease, text-decoration-color .2s ease;
}
.credit a:hover{ color:var(--text); text-decoration-color:currentColor; }

/* ───────── tabs ───────── */
.tabs{
  position:relative;
  display:flex; gap:2px; padding:5px;
  border-radius:16px;
  background:var(--card); border:1px solid var(--hair);
  overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab-thumb{
  position:absolute; top:5px; bottom:5px; left:5px;
  border-radius:12px;
  background:var(--card-2); border:1px solid var(--hair-2);
  pointer-events:none; will-change:transform,width;
}
.tabs button{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px; border-radius:12px;
  font-size:.88rem; font-weight:560; white-space:nowrap;
  color:var(--text-3); cursor:pointer;
  transition:color .22s ease, transform .1s ease-out;
}
.tabs button svg{ width:16px; height:16px; }
.tabs button[aria-selected="true"]{ color:var(--text); }
.tabs button:active{ transform:scale(.97); }

/* ───────── lightbox ───────── */
.lb{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:clamp(12px,4vw,44px); visibility:hidden; }
.lb.open{ visibility:visible; }
.lb-scrim{
  position:absolute; inset:0; background:rgba(0,0,0,.9);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  opacity:0; will-change:opacity;
}
.lb-fig{
  position:relative; max-width:100%; max-height:100%;
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 40px 100px rgba(0,0,0,.7);
  opacity:0; touch-action:none; cursor:grab;
  will-change:transform,opacity; margin:0;
}
.lb-fig:active{ cursor:grabbing; }
.lb-fig.zoomed{ overflow:visible; border-color:transparent; box-shadow:none; }
.lb-fig img{ transform-origin:50% 50%; will-change:transform; }
.lb-fig img.ease{ transition:transform .32s cubic-bezier(.2,.8,.2,1); }
.lb-fig img{
  max-width:100%; max-height:calc(100svh - clamp(24px,8vw,88px));
  width:auto; height:auto; object-fit:contain;
  -webkit-user-drag:none; user-select:none;
}
.lb-cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:38px 18px 14px; color:#fff;
  font-size:.86rem; font-weight:560;
  background:linear-gradient(to top, rgba(0,0,0,.88), transparent);
  pointer-events:none;
}
.lb-btn{
  position:absolute; z-index:2;
  display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.2);
  cursor:pointer; opacity:0;
  transition:background-color .2s ease, transform .1s ease-out;
}
.lb-btn:hover{ background:rgba(255,255,255,.2); }
.lb-btn:active{ transform:scale(.9); }
.lb-close{ top:max(12px,env(safe-area-inset-top)); right:12px; width:40px; height:40px; }
.lb-prev,.lb-next{ top:50%; margin-top:-22px; width:44px; height:44px; }
.lb-prev{ left:12px; } .lb-next{ right:12px; }
@media (max-width:640px){ .lb-prev,.lb-next{ display:none; } }

/* ───────── toast ───────── */
.toast{
  position:fixed; left:50%; bottom:22px; z-index:120;
  transform:translate3d(-50%,140%,0);
  padding:12px 20px; border-radius:99px;
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--hair-2);
  font-size:.85rem; font-weight:560;
  box-shadow:var(--shadow);
  transition:transform .42s cubic-bezier(.2,.9,.3,1);
  will-change:transform;
}
.toast.in{ transform:translate3d(-50%,0,0); }

/* ───────── footer ───────── */
.foot{
  width:var(--wrap); margin:0 auto;
  padding:30px 0 44px;
  border-top:1px solid var(--hair);
  display:flex; flex-wrap:wrap; gap:10px;
  align-items:center; justify-content:space-between;
  color:var(--text-3); font-size:.82rem;
  position:relative; z-index:1;
}

.foot a:hover{ color:var(--text-2); }

/* ───────── a11y prefs ───────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.18s !important; }

}
@media (prefers-reduced-transparency: reduce){
  .top,.sheet,.toast,.lb-scrim,.lb-btn,.car-nav{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--card); }
}
@media (prefers-contrast: more){
  :root{ --text-2:rgba(242,242,244,.85); --text-3:rgba(242,242,244,.68); --hair:rgba(255,255,255,.28); }
  :root[data-theme="light"]{ --text-2:rgba(22,22,26,.85); --text-3:rgba(22,22,26,.7); --hair:rgba(16,16,22,.28); }
}

/* ───────── 3d tilt (native CSS 3d, no library) ───────── */
[data-tilt]{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.2,.8,.3,1);
}

[data-tilt] > *{ transform:translateZ(18px); }
[data-tilt] .go,[data-tilt] .ic,[data-tilt] .mark{ transform:translateZ(34px); }

/* glare follows the pointer across tilted cards */
[data-tilt]::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.10), transparent 60%);
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
[data-tilt]:hover::after{ opacity:1; }

/* hero gets depth: the art sits behind, the badge floats above it */

@media (prefers-reduced-motion: reduce){
  [data-tilt]{ transform:none !important; transition:none; }
  [data-tilt] > *,[data-tilt] .go,[data-tilt] .ic,[data-tilt] .mark{ transform:none; }
}

/* ───────── split: info left, abstraction right ───────── */
.split{
  display:grid; gap:clamp(20px,4vw,44px);
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  align-items:center;
}

@media (max-width:760px){
  .split{ grid-template-columns:1fr; }

}

/* the abstraction sits inside a glass pane */

@keyframes floaty{ 0%,100%{ transform:translateY(-6px) } 50%{ transform:translateY(6px) } }
@keyframes turn{ to{ rotate:360deg } }

/* ───────── levitating glass cube 3x3x3 ───────── */

.cube{
  --e:clamp(38px, 7.2vw, 74px);
  position:relative;
  width:calc(var(--e) * 3); height:calc(var(--e) * 3);
  transform-style:preserve-3d;
  transform:rotateX(-24deg) rotateY(-45deg);
  animation:cube-float 7s ease-in-out infinite;
  will-change:transform;
}
@keyframes cube-float{
  0%,100%{ transform:translateY(-9px) rotateX(-24deg) rotateY(-45deg); }
  50%    { transform:translateY(9px)  rotateX(-24deg) rotateY(-45deg); }
}
@keyframes cube-shadow{ 0%,100%{ opacity:.6; scale:1 } 50%{ opacity:.9; scale:1.15 } }
@media (prefers-reduced-motion: reduce){
  .cube{ animation:none; }

}

/* handwritten-style credit under the carousel */
.credit{ font-style:italic; letter-spacing:.01em; }
.credit a{ font-style:normal; }