/* ══════════════════════════════════════════
   Kersune — site styles
   themes: dark (default) / light / gray
   ══════════════════════════════════════════ */

:root{
  --r: 20px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --maxw: 940px;
  --glass-b: rgba(255,255,255,.05);
  --glass-br: rgba(255,255,255,.10);
  --shadow: 0 24px 70px rgba(0,0,0,.45);
}

/* ── тёмная (по умолчанию) ── */
[data-theme="dark"]{
  --bg: #0b0b0d;
  --bg2: #121216;
  --fg: #f2f2f4;
  --mut: #9a9aa6;
  --acc: #cfd3e0;
  --acc2: #8f95b0;
  --glass: rgba(255,255,255,.045);
  --glass-hi: rgba(255,255,255,.075);
  --br: rgba(255,255,255,.10);
  --br-hi: rgba(255,255,255,.22);
  --o1: rgba(120,130,190,.20);
  --o2: rgba(60,90,140,.16);
  --o3: rgba(160,150,190,.10);
  --grid: rgba(255,255,255,.028);
  --ok: #4ade80;
  --off: #55565e;
  --shadow: 0 24px 70px rgba(0,0,0,.55);
}

/* ── белая ── */
[data-theme="light"]{
  --bg: #f4f4f6;
  --bg2: #ffffff;
  --fg: #16161a;
  --mut: #6a6a76;
  --acc: #2c2c36;
  --acc2: #7a7a8c;
  --glass: rgba(255,255,255,.55);
  --glass-hi: rgba(255,255,255,.78);
  --br: rgba(20,20,30,.10);
  --br-hi: rgba(20,20,30,.22);
  --o1: rgba(140,150,210,.22);
  --o2: rgba(110,150,210,.16);
  --o3: rgba(210,180,200,.16);
  --grid: rgba(20,20,40,.030);
  --ok: #16a34a;
  --off: #9a9aa4;
  --shadow: 0 24px 60px rgba(30,30,50,.14);
}

/* ── тёмно-серая ── */
[data-theme="gray"]{
  --bg: #17181a;
  --bg2: #1e2023;
  --fg: #e6e7e9;
  --mut: #93969b;
  --acc: #d3d6da;
  --acc2: #8b8f96;
  --glass: rgba(255,255,255,.038);
  --glass-hi: rgba(255,255,255,.06);
  --br: rgba(255,255,255,.085);
  --br-hi: rgba(255,255,255,.18);
  --o1: rgba(160,165,175,.14);
  --o2: rgba(120,130,140,.10);
  --o3: rgba(180,180,190,.07);
  --grid: rgba(255,255,255,.022);
  --ok: #58c07d;
  --off: #5c5e63;
  --shadow: 0 24px 65px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; scroll-padding-top:110px; }

body{
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background .6s var(--ease), color .6s var(--ease);
}

::selection{ background: var(--acc); color: var(--bg); }

/* ─────────── ФОН: орбы + сетка ─────────── */
.bg-field{ position:fixed; inset:0; z-index:-1; overflow:hidden; background: var(--bg2); }
.orb{
  position:absolute; border-radius:50%;
  filter: blur(90px); opacity:.9;
  animation: float 26s var(--ease) infinite;
}
.orb-1{ width:46vw; height:46vw; top:-14vw; left:-8vw;  background: radial-gradient(circle, var(--o1), transparent 70%); }
.orb-2{ width:40vw; height:40vw; bottom:-12vw; right:-10vw; background: radial-gradient(circle, var(--o2), transparent 70%); animation-delay:-9s; }
.orb-3{ width:32vw; height:32vw; top:38%; left:52%; background: radial-gradient(circle, var(--o3), transparent 70%); animation-delay:-16s; }
@keyframes float{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  33%    { transform: translate3d(4vw,-3vw,0) scale(1.08); }
  66%    { transform: translate3d(-3vw,4vw,0) scale(.94); }
}
.grid{
  position:absolute; inset:0;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 78%);
}

.glass{
  background: var(--glass);
  border: 1px solid var(--br);
  border-radius: var(--r);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow);
}

/* ─────────── НАВИГАЦИЯ ─────────── */
.nav{
  position: fixed; top:22px; left:50%;
  transform: translateX(-50%);
  z-index: 100; display:flex; flex-direction:column; align-items:center; gap:10px;
}
.nav-toggle{
  display:flex; gap:5px; align-items:center;
  background: var(--glass); border:1px solid var(--br);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-radius: 999px; padding: 11px 15px; cursor:pointer;
  box-shadow: var(--shadow);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.nav-toggle:hover{ border-color: var(--br-hi); transform: translateY(-2px); }
.dot{ width:5px; height:5px; border-radius:50%; background: var(--fg); opacity:.75; }

.nav-panel{
  width: min(640px, calc(100vw - 32px));
  background: var(--glass);
  border:1px solid var(--br);
  backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 20px;
  opacity:0; visibility:hidden; transform: translateY(-14px) scale(.97);
  transform-origin: top center;
  transition: opacity .38s var(--ease), transform .38s var(--ease), visibility .38s;
}
.nav:hover .nav-panel,
.nav-panel:hover,
.nav-panel.open{ opacity:1; visibility:visible; transform: translateY(0) scale(1); }

.nav-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.nav-hint{
  font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--mut);
}
.nav-list{ list-style:none; display:grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap:8px; }
.nav-list a{
  display:flex; flex-direction:column; gap:2px;
  padding:13px 15px; border-radius:14px;
  color:var(--fg); text-decoration:none;
  border:1px solid transparent;
  transition: background .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
}
.nav-list a:hover{ background: var(--glass-hi); border-color: var(--br); transform: translateY(-2px); }
.nav-list b{ font-size:15px; font-weight:500; letter-spacing:.01em; }
.nav-list em{ font-style:normal; font-size:12px; color:var(--mut); line-height:1.45; }
.nav-foot{ margin-top:14px; padding-top:12px; border-top:1px solid var(--br); }
.theme-btn{
  width:100%; background:transparent; border:1px solid var(--br); border-radius:12px;
  padding:9px; color:var(--fg); cursor:pointer;
  font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.theme-btn:hover{ background: var(--glass-hi); border-color: var(--br-hi); }

/* ─────────── HERO ─────────── */
.hero{
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:26px;
  padding: 130px 20px 70px; text-align:center;
}
.hero-card{ position:relative; padding: 54px 62px 46px; max-width: 560px; width:100%; }

.status{ position:absolute; top:20px; right:20px; }
.status-dot{
  display:block; width:11px; height:11px; border-radius:50%;
  background: var(--off);
  box-shadow: 0 0 0 0 transparent;
  transition: background .5s var(--ease), box-shadow .5s var(--ease);
}
.status-dot.online{
  background: var(--ok);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 22%, transparent);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 30%, transparent); }
  70%{ box-shadow:0 0 0 13px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}

.avatar-ring{
  width: 132px; height:132px; margin: 0 auto 22px;
  border-radius:50%; padding:3px;
  background: conic-gradient(from 140deg, transparent, var(--acc2), transparent 42%);
  animation: spin 9s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.avatar{
  width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;
  animation: spin 9s linear infinite reverse;
  border: 3px solid var(--bg2);
}

.nick{
  font-size: clamp(38px, 8vw, 60px); font-weight: 300;
  letter-spacing: -.02em; line-height:1.05; margin-bottom: 6px;
  background: linear-gradient(180deg, var(--fg), var(--acc2));
  -webkit-background-clip: text; background-clip:text; -webkit-text-fill-color: transparent;
}
.uname{
  font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--mut);
  opacity:.75; margin-bottom: 18px;
}
.hero-tag{ font-size:14.5px; color:var(--mut); max-width: 340px; margin:0 auto; }

.scroll-hint{ color:var(--mut); opacity:.5; font-size:20px; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.35; } 50%{ transform:translateY(9px); opacity:.7; } }

/* ─────────── СЕКЦИИ ─────────── */
.sec{ max-width: var(--maxw); margin: 0 auto; padding: 96px 20px 0; }
.sec-head{ margin-bottom: 30px; }
.sec-num{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.28em;
  color:var(--mut); opacity:.6; display:block; margin-bottom:10px;
}
.sec-head h2{
  font-size: clamp(27px,5vw,38px); font-weight:300; letter-spacing:-.015em; line-height:1.15;
}
.sec-head p{ font-size:14px; color:var(--mut); margin-top:5px; }

.card{ padding: 34px 36px; }
.card p{ margin-bottom: 15px; color: var(--fg); opacity:.9; }
.card p:last-child{ margin-bottom:0; }
.card b{ font-weight:600; }
.card i{ font-style:italic; opacity:.85; }
.card h3{ font-size:19px; font-weight:500; margin:30px 0 13px; }
.card h3:first-of-type{ margin-top:24px; }

.inline-link{ color:var(--fg); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; opacity:.9; }
.inline-link:hover{ opacity:1; text-decoration-style:wavy; }
.smile{ font-weight:600; opacity:.8; }

/* появление при скролле */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ─────────── FAQ ─────────── */
.faq{ padding: 16px 20px; }
.faq details{ border-bottom:1px solid var(--br); }
.faq details:last-of-type{ border-bottom:none; }
.faq summary{
  list-style:none; cursor:pointer; padding: 17px 34px 17px 4px; position:relative;
  font-size:15.5px; font-weight:400; transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--acc); padding-left:8px; }
.faq summary::after{
  content:''; position:absolute; right:8px; top:50%;
  width:8px; height:8px; margin-top:-6px;
  border-right:1.5px solid var(--mut); border-bottom:1.5px solid var(--mut);
  transform: rotate(45deg); transition: transform .35s var(--ease);
}
.faq details[open] summary::after{ transform: rotate(-135deg); margin-top:-2px; }
.faq .body{ padding: 0 4px 19px; font-size:14.5px; color:var(--mut); animation: fadeUp .4s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.games{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.games li{ padding:5px 12px; border:1px solid var(--br); border-radius:999px; font-size:13px; }
.faq-foot{
  text-align:center; font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--mut); opacity:.5; padding:16px 0 8px;
}

/* ─────────── NOMETA ─────────── */
.nometa-lead{ font-size:21px; font-weight:500; line-height:1.45; }
.quote-list{ list-style:none; margin:18px 0 22px; display:flex; flex-direction:column; gap:9px; }
.quote-list li{
  padding:11px 17px; border-left:2px solid var(--acc2);
  background: var(--glass); border-radius:0 12px 12px 0;
  font-size:14.5px; color:var(--mut); font-style:italic;
}
.nometa-fig{ margin:26px 0 18px; text-align:center; }
.nometa-fig img{
  max-width:100%; border-radius:16px; border:1px solid var(--br);
  box-shadow: 0 14px 40px rgba(0,0,0,.3);
  transition: transform .5s var(--ease);
}
.nometa-fig:hover img{ transform: scale(1.02); }
.nometa-fig figcaption{ font-size:12.5px; color:var(--mut); margin-top:11px; }
.nometa-src{ font-size:13px; color:var(--mut); }

/* ─────────── ABOUT ─────────── */
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.tags span{
  padding:6px 14px; border:1px solid var(--br); border-radius:999px;
  font-size:13px; color:var(--acc); background:var(--glass);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.tags span:hover{ background:var(--glass-hi); transform: translateY(-2px); }
.quote-card{
  padding:22px 26px; margin:0 0 18px;
  border:1px solid var(--br); border-radius:16px;
  background: linear-gradient(135deg, var(--glass-hi), transparent);
  font-size:19px; font-weight:300; letter-spacing:.01em;
}

/* ─────────── LINKS ─────────── */
.links{ display:grid; gap:12px; }
.link-card{
  display:flex; align-items:center; gap:16px; padding:19px 24px;
  text-decoration:none; color:var(--fg);
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.link-card:hover{ transform: translateY(-3px); border-color: var(--br-hi); background: var(--glass-hi); }
.link-ic{ font-size:19px; opacity:.6; }
.link-txt{ display:flex; flex-direction:column; flex:1; }
.link-txt b{ font-weight:500; font-size:15.5px; }
.link-txt em{ font-style:normal; font-size:12.5px; color:var(--mut); }
.link-go{ opacity:0; transform: translateX(-8px); transition: all .3s var(--ease); color:var(--acc); }
.link-card:hover .link-go{ opacity:1; transform:none; }

/* ─────────── PRIMETIME ─────────── */
.pt-grid{ display:flex; flex-direction:column; gap:9px; margin-bottom:26px; }
.pt-day{
  display:grid; grid-template-columns: 46px 1fr; align-items:center; gap:14px;
  padding:13px 17px; border:1px solid var(--br); border-radius:14px;
  background:var(--glass); position:relative; overflow:hidden;
  transition: border-color .3s var(--ease);
}
.pt-day:hover{ border-color: var(--br-hi); }
.pt-name{ font-weight:500; font-size:14.5px; }
.pt-time{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--mut); }
.pt-bar{
  position:absolute; left:0; top:0; bottom:0; width: calc(var(--s) * 100%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 9%, transparent), transparent);
  pointer-events:none;
}
.pt-best .pt-name, .pt-best .pt-time{ color:var(--fg); }

.note{
  padding:15px 19px; border-radius:14px; font-size:14px; color:var(--mut);
  background:var(--glass); border:1px solid var(--br);
}
.note + .note{ margin-top:11px; }
.note b{ color:var(--fg); }
.ok{ color: var(--ok); font-weight:600; }
.off{ color: var(--off); font-weight:600; }

/* ─────────── FOOTER ─────────── */
.foot{ max-width: var(--maxw); margin: 0 auto; padding: 100px 20px 50px; }
.foot-card{
  display:inline-flex; align-items:center; gap:12px;
  padding:13px 24px; font-size:13.5px; color:var(--mut);
}
.foot-av{ width:28px; height:28px; border-radius:50%; object-fit:cover; }
.foot-u{ font-family:'JetBrains Mono',monospace; }
.foot-dot{ opacity:.4; }

/* ─────────── АДАПТИВ ─────────── */
@media (max-width: 640px){
  .hero{ padding: 120px 16px 60px; }
  .hero-card{ padding: 44px 26px 36px; }
  .sec{ padding: 70px 16px 0; }
  .card{ padding: 26px 22px; }
  .nav{ top:14px; }
  .nav-panel{ padding:15px; }
  .nav-list{ grid-template-columns: 1fr; }
  .avatar-ring{ width:108px; height:108px; }
  .nometa-lead{ font-size:18px; }
  .foot{ padding: 70px 16px 40px; }
}

/* уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}