/* ===========================================================
   PICO CRAFT — design tokens v2
   Palette: void black, charcoal glass panels, gold + orange + ember accents
=========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg: #08080a;
  --bg-1: #0f0f12;
  --panel: #16161a;
  --panel-2: #1e1e23;
  --panel-glass: rgba(22,22,26,.6);
  --border: #2c2c33;
  --border-soft: #232328;

  --gold: #ffc83d;
  --gold-dim: #caa030;
  --orange: #ff8c2f;
  --ember: #ff5b3c;
  --toxic: #8fe34a;
  --frost: #6fd6ff;
  --violet: #b98bff;

  --text: #f6f1e6;
  --text-dim: #a39c8f;
  --text-faint: #6c6660;

  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 22px;

  --font-display: 'Press Start 2P', 'Vazirmatn', cursive;
  --font-body: 'Vazirmatn', 'Press Start 2P', Tahoma, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --shadow-gold: 0 0 0 1px rgba(255,200,61,.25), 0 8px 24px rgba(255,140,47,.16);
  --shadow-pop: 0 24px 60px rgba(0,0,0,.5);
  --container: 1180px;
  --nav-h: 66px;

  --ambient-1: rgba(255,200,61,.15);
  --ambient-2: rgba(255,140,47,.12);
  --ambient-3: rgba(185,139,255,.08);
  --voxel-bg-1: rgba(255,200,61,.18);
  --voxel-bg-2: rgba(255,140,47,.06);
  --voxel-border: rgba(255,200,61,.2);

  /* ---- depth-zone system (homepage) ---- */
  --z-sky-1: #0c1526;
  --z-sky-2: #16233d;
  --z-sky-accent: var(--orange);
  --z-sky-accent-2: var(--gold);

  --z-surface-1: #10160f;
  --z-surface-2: #1a2318;
  --z-surface-accent: #8bc76b;
  --z-surface-accent-2: #c99a55;

  --z-cave-1: #120c1c;
  --z-cave-2: #1c1330;
  --z-cave-accent: #b083f0;
  --z-cave-accent-2: #4fd3c4;

  --z-bedrock-1: #170a08;
  --z-bedrock-2: #200906;
  --z-bedrock-accent: #ff7a45;
  --z-bedrock-accent-2: #ff4d4d;

  --ruler-w: 54px;
}

html[data-theme="light"]{
  --bg: #f7f5f0;
  --bg-1: #ffffff;
  --panel: #ffffff;
  --panel-2: #f1ede4;
  --panel-glass: rgba(255,255,255,.72);
  --border: #ddd5c4;
  --border-soft: #e8e2d5;

  --gold: #c9931b;
  --gold-dim: #a87814;
  --orange: #d9691c;
  --ember: #c2410c;

  --text: #201a10;
  --text-dim: #5c5340;
  --text-faint: #8f8570;

  --ambient-1: rgba(201,147,27,.32);
  --ambient-2: rgba(217,105,28,.26);
  --ambient-3: rgba(140,90,220,.12);
  --voxel-bg-1: rgba(201,147,27,.38);
  --voxel-bg-2: rgba(217,105,28,.16);
  --voxel-border: rgba(180,120,20,.4);

  --z-sky-1: #dff1ff;
  --z-sky-2: #f2ecff;
  --z-sky-accent: var(--orange);
  --z-sky-accent-2: var(--gold);

  --z-surface-1: #e9f2e2;
  --z-surface-2: #f2ead6;
  --z-surface-accent: #4c8a34;
  --z-surface-accent-2: #a3691f;

  --z-cave-1: #ece3fb;
  --z-cave-2: #dcf3ef;
  --z-cave-accent: #7c4bc4;
  --z-cave-accent-2: #1f9d8c;

  --z-bedrock-1: #ffe6da;
  --z-bedrock-2: #ffd9d0;
  --z-bedrock-accent: #d5501f;
  --z-bedrock-accent-2: #c22626;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[dir="rtl"] body{ font-family: 'Vazirmatn', Tahoma, sans-serif; }

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
input, textarea, select{ font-family: inherit; }
::selection{ background: var(--gold); color: #14140f; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 22px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- pixel-y eyebrow / latin display text ---------- */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  background: var(--orange);
  display:inline-block;
  border-radius: 2px;
  box-shadow: 0 0 8px var(--orange);
  animation: pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.4); opacity:.6; } }

.pixel{ font-family: var(--font-display); }

.gradient-text{
  background: linear-gradient(95deg, var(--gold), var(--orange) 45%, var(--ember) 75%, var(--gold));
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientShift 6s ease-in-out infinite;
}
@keyframes gradientShift{ 0%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; } }

/* ===========================================================
   NAVBAR — floating capsule / oval header
=========================================================== */
.siteheader{
  position: sticky; top:0; z-index: 200;
  padding: 14px 18px 0;
  pointer-events: none;
}
.navbar{
  pointer-events: auto;
  max-width: 1080px;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--panel-glass);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--border-soft);
  box-shadow: 0 10px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
  transition: box-shadow .35s ease, border-color .35s ease, max-width .35s ease, background .35s ease, transform .35s ease;
}
.navbar.scrolled{
  max-width: 900px;
  border-color: rgba(255,200,61,.3);
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,200,61,.12), inset 0 1px 0 rgba(255,255,255,.04);
}
.navbar .container{ display:flex; align-items:center; justify-content:space-between; height: var(--nav-h); gap: 18px; padding: 0 10px 0 22px; }
[dir="rtl"] .navbar .container{ padding: 0 22px 0 10px; }

.brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size: 18px; letter-spacing:.5px; padding-inline-start: 8px; }
.brand .blocklogo{ height:38px; width:auto; filter: drop-shadow(0 0 10px rgba(255,200,61,.35)); transition: transform .3s ease; }
.brand:hover .blocklogo{ transform: rotate(-8deg) scale(1.08); }
.brand span{ font-family: var(--font-mono); }

.nav-links{ display:flex; align-items:center; gap: 6px; }
.nav-links a{
  font-size: 13.5px; color: var(--text-dim); transition: color .15s, background .15s;
  position:relative; padding: 8px 14px; border-radius: 999px;
}
.nav-links a:hover{ color: var(--text); background: rgba(255,255,255,.05); }
.nav-links a.active{ color: #15140d; background: linear-gradient(95deg, var(--gold), var(--orange)); font-weight:700; }

.nav-actions{ display:flex; align-items:center; gap: 8px; }
.lang-switch{
  display:flex; border:1px solid var(--border); border-radius: 999px; overflow:hidden;
  font-family: var(--font-mono); font-size: 11px;
}
.lang-switch button{
  background: transparent; border:none; color: var(--text-dim); padding: 7px 11px; transition: background .15s, color .15s;
}
.lang-switch button.active{ background: var(--gold); color:#14140f; font-weight:700; }

.theme-toggle{ display:inline-flex; border:1px solid var(--border); border-radius:999px; overflow:hidden; }
.theme-toggle button{
  background: transparent; border:none; color: var(--text-dim); padding:10px 20px; font-size:14px;
  display:flex; align-items:center; gap:6px; transition: background .15s, color .15s;
}
.theme-toggle button.active{ background: linear-gradient(95deg, var(--gold), var(--orange)); color:#15140d; font-weight:700; }

.burger{ display:none; background:none; border:1px solid var(--border); border-radius:999px; color:var(--text); padding:9px 12px; }
@media (max-width: 880px){
  .navbar{ border-radius: 26px; }
  .navbar.scrolled{ max-width: 94%; }
  .nav-links{
    position:absolute; top: calc(var(--nav-h) + 12px); inset-inline:14px;
    background: var(--panel-glass); backdrop-filter: blur(18px);
    border: 1px solid var(--border-soft); border-radius: 22px;
    flex-direction:column; align-items:stretch; padding: 12px; gap: 4px; display:none;
    box-shadow: var(--shadow-pop);
  }
  .nav-links a{ text-align:center; }
  .nav-links.open{ display:flex; animation: dropIn .25s ease-out; }
  .burger{ display:inline-block; }
}
@keyframes dropIn{ from{ opacity:0; transform: translateY(-8px); } to{ opacity:1; transform: translateY(0); } }

/* ===========================================================
   BUTTONS
=========================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 22px; border-radius: 999px;
  font-weight:700; font-size: 14px; border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .15s;
  white-space: nowrap;
  position: relative; overflow: hidden;
}
.btn:active{ transform: translateY(1px) scale(.98); }
.btn-primary{
  background: linear-gradient(95deg, var(--gold), var(--orange));
  color: #15140d;
  box-shadow: var(--shadow-gold);
}
.btn-primary::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
  background-size: 220% 100%; background-position: 120% 0;
  transition: background-position .55s ease;
}
.btn-primary:hover{ box-shadow: 0 0 0 1px rgba(255,200,61,.4), 0 12px 30px rgba(255,140,47,.32); transform: translateY(-2px); }
.btn-primary:hover::after{ background-position: -20% 0; }
.btn-ghost{
  background: transparent; border-color: var(--border); color: var(--text);
}
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.btn-block{ width:100%; }
.btn-sm{ padding: 8px 16px; font-size: 13px; }
.btn-danger{ background: rgba(255,91,60,.12); color: var(--ember); border-color: rgba(255,91,60,.35); }
.btn-danger:hover{ background: rgba(255,91,60,.2); }

/* command-block style IP button */
.cmd-block{
  font-family: var(--font-mono);
  display:flex; align-items:center; gap:14px;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 999px;
  padding: 10px 10px 10px 22px;
  position: relative;
  box-shadow: 0 8px 26px rgba(0,0,0,.3);
}
[dir="rtl"] .cmd-block{ padding: 10px 22px 10px 10px; }
.cmd-block .ip-text{ color: var(--gold); font-size: 15px; letter-spacing: .03em; }
.cmd-block button{
  background: linear-gradient(95deg, var(--gold), var(--orange)); border:none; color:#15140d; font-weight:700;
  padding: 9px 16px; border-radius: 999px; font-family: var(--font-mono); font-size:12px;
  transition: all .2s;
}
.cmd-block button:hover{ filter: brightness(1.1); transform: scale(1.04); }

/* ===========================================================
   HERO — animated voxel field (signature element)
=========================================================== */
.hero{
  position: relative;
  overflow: hidden;
  padding: 120px 0 90px;
  isolation: isolate;
}
.hero-bg{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255,140,47,.22), transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 10%, rgba(255,200,61,.13), transparent 60%),
    radial-gradient(ellipse 50% 40% at 8% 30%, var(--ambient-3), transparent 60%),
    var(--bg);
  animation: bgBreathe 12s ease-in-out infinite;
}
@keyframes bgBreathe{ 0%,100%{ filter: brightness(1); } 50%{ filter: brightness(1.08); } }
.voxel-field{
  position:absolute; inset:0; z-index:-1;
  perspective: 900px;
  overflow:hidden;
}
.voxel{
  position:absolute;
  width: 26px; height:26px;
  background: linear-gradient(145deg, var(--voxel-bg-1), var(--voxel-bg-2));
  border: 1px solid var(--voxel-border);
  border-radius:4px;
  animation: drift 14s ease-in-out infinite;
  box-shadow: 0 0 18px rgba(255,140,47,.1);
}
@keyframes drift{
  0%, 100%{ transform: translateY(0) rotate(0deg) scale(1); opacity:.5; }
  50%{ transform: translateY(-38px) rotate(10deg) scale(1.08); opacity:1; }
}
.scanline{
  position:absolute; inset-inline:0; height:2px; top:0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.5;
  animation: scan 6s linear infinite;
}
@keyframes scan{ 0%{ top:0; } 100%{ top:100%; } }

.hero-inner{ position:relative; text-align:center; max-width: 760px; margin:0 auto; }
.hero h1{
  font-family: var(--font-display);
  font-size: clamp(30px, 6vw, 56px);
  line-height:1.35;
  margin: 18px 0 14px;
  letter-spacing: 1px;
  animation: heroPop .7s cubic-bezier(.2,.9,.25,1.2) both;
}
@keyframes heroPop{ from{ opacity:0; transform: translateY(18px) scale(.96); } to{ opacity:1; transform: translateY(0) scale(1); } }
.hero .eyebrow{ animation: heroPop .6s cubic-bezier(.2,.9,.25,1.2) both; }
.hero p.subtitle{
  color: var(--text-dim);
  font-size: 16px;
  max-width: 560px;
  margin: 0 auto 30px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom: 36px; animation: heroPop .7s .85s cubic-bezier(.2,.9,.25,1.2) both; }
.hero-ip{ display:flex; justify-content:center; animation: heroPop .7s .7s cubic-bezier(.2,.9,.25,1.2) both; }

.stat-row{
  display:flex; justify-content:center; gap: 40px; margin-top: 48px; flex-wrap:wrap;
  animation: heroPop .8s 1s cubic-bezier(.2,.9,.25,1.2) both;
}
.stat{ text-align:center; }
.stat b{ display:block; font-family: var(--font-mono); font-size: 26px; color: var(--z-sky-accent,var(--gold)); text-shadow: 0 0 18px rgba(255,140,47,.35); }
.stat span{ font-size: 12px; color: var(--text-faint); text-transform:uppercase; letter-spacing:.08em; }

/* ===========================================================
   SECTIONS / CARDS
=========================================================== */
.section{ padding: 84px 0; }
.section-head{ text-align:center; max-width: 600px; margin: 0 auto 48px; }
.section-head h2{ font-size: clamp(24px,4vw,34px); margin: 10px 0; font-weight:800; }
.section-head p{ color: var(--text-dim); }

.grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap:20px; }
@media (max-width: 980px){ .grid-4{ grid-template-columns: repeat(2,1fr);} .grid-3{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .grid-4, .grid-3, .grid-2{ grid-template-columns: 1fr; } }

.card{
  display:block;
  background: linear-gradient(180deg, var(--panel), var(--panel) 60%, var(--panel-2));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 26px;
  transition: border-color .25s, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
  position: relative;
}
.card:hover{ border-color: rgba(255,200,61,.4); transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,200,61,.15); }
.card .icon-box{
  width:44px; height:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(255,200,61,.2), rgba(255,140,47,.08));
  border: 1px solid rgba(255,200,61,.25);
  margin-bottom:16px; font-size:20px;
  transition: transform .3s ease;
}
.card:hover .icon-box{ transform: rotate(-8deg) scale(1.1); }
.card h3{ margin: 0 0 8px; font-size:17px; }
.card p{ margin:0; color: var(--text-dim); font-size:14px; }

.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in-view{ opacity:1; transform: translateY(0); }

/* staff cards */
.staff-card{ text-align:center; }
.staff-avatar{
  width:84px; height:84px; border-radius: 14px; margin: 0 auto 14px;
  border: 2px solid var(--border);
  background: var(--panel-2);
  position: relative;
  transition: transform .3s ease;
}
.staff-card:hover .staff-avatar{ transform: scale(1.06) rotate(-2deg); }
.staff-avatar img{ width:100%; height:100%; object-fit:cover; image-rendering: pixelated; border-radius:12px; }
.staff-role{
  display:inline-block; font-family: var(--font-mono); font-size:11px;
  color: var(--orange); border:1px solid rgba(255,140,47,.35); border-radius:999px;
  padding:3px 10px; margin: 6px 0 10px;
}

/* homepage news carousel */
.news-carousel{ position:relative; height:340px; border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--border-soft); box-shadow: var(--shadow-pop); }
.carousel-track{ position:relative; width:100%; height:100%; }
.carousel-slide{
  position:absolute; inset:0; opacity:0; transition: opacity .7s ease, transform .9s ease; pointer-events:none; display:block; transform: scale(1.04);
}
.carousel-slide.active{ opacity:1; pointer-events:auto; z-index:1; transform: scale(1); }
.carousel-slide img{ width:100%; height:100%; object-fit:cover; }
.carousel-fallback{
  width:100%; height:100%;
  background: radial-gradient(ellipse 80% 60% at 30% 20%, rgba(255,140,47,.18), transparent 60%), var(--panel);
}
.carousel-slide::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,11,13,.05), rgba(11,11,13,.92));
}
.carousel-caption{ position:absolute; inset-inline:0; bottom:0; padding:24px 26px; z-index:1; }
.carousel-caption h3{ margin:0 0 8px; font-size: clamp(18px,3vw,24px); color: #f4efe4; }
.carousel-caption p{ margin:0; color: #cfcac0; font-size:14px; max-width:560px; }
.carousel-dots{ position:absolute; bottom:14px; inset-inline-end:20px; display:flex; gap:6px; z-index:2; }
.carousel-dot{
  width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,.35); border:none; padding:0; transition: all .25s;
}
.carousel-dot.active{ background: var(--gold); width:22px; border-radius:5px; }

.verified-check{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; background:#3ba7ff;
  color:#fff; font-size:10px; line-height:1; margin-inline-end:7px;
  box-shadow: 0 0 6px 1px rgba(70,170,255,.9), 0 0 14px 3px rgba(70,170,255,.5);
  animation: verifiedGlow 2.4s ease-in-out infinite;
}
@keyframes verifiedGlow{
  0%,100%{ box-shadow: 0 0 6px 1px rgba(70,170,255,.9), 0 0 14px 3px rgba(70,170,255,.5); }
  50%{ box-shadow: 0 0 9px 2px rgba(70,170,255,1), 0 0 20px 6px rgba(70,170,255,.7); }
}

.staff-avatar.framed{
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px rgba(255,200,61,.5), 0 0 16px rgba(255,200,61,.3);
}

.staff-group-title{
  font-family: var(--font-mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--gold); margin: 0 0 20px;
}
.staff-divider{ border:none; height:1px; margin: 48px 0; position:relative; background: var(--border-soft); overflow:visible; }
.staff-divider::after{
  content:""; position:absolute; top:-1px; inset-inline-start:0; height:1px; width:70px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* ===========================================================
   FOOTER
=========================================================== */
.footer{ border-top: 1px solid var(--border-soft); padding: 50px 0 30px; margin-top: 40px; position: relative; }
.footer::before{
  content:""; position:absolute; top:-1px; inset-inline:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.5;
}
.footer .container{ display:flex; justify-content:space-between; gap: 30px; flex-wrap:wrap; }
.footer h4{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; color: var(--text-faint); margin: 0 0 14px;}
.footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer ul a{ color: var(--text-dim); font-size:14px; transition: color .15s, padding .15s; }
.footer ul a:hover{ color: var(--gold); padding-inline-start:4px; }
.footer-bottom{ text-align:center; color: var(--text-faint); font-size:13px; margin-top: 40px; }

/* ===========================================================
   AUTH PAGES
=========================================================== */
.auth-wrap{
  min-height: calc(100vh - 100px);
  display:flex; align-items:stretch; justify-content:center;
  padding: 24px 20px 60px;
}
.auth-shell{
  width:100%; max-width: 980px; margin:0 auto;
  display:grid; grid-template-columns: 1.1fr 1fr;
  border-radius: var(--radius-lg);
  overflow:hidden;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-pop);
  min-height: 560px;
}
@media (max-width: 860px){ .auth-shell{ grid-template-columns: 1fr; } .auth-visual{ display:none; } }

.auth-visual{
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 90% 60% at 20% 0%, rgba(255,140,47,.28), transparent 60%),
    radial-gradient(ellipse 70% 50% at 90% 100%, rgba(185,139,255,.18), transparent 60%),
    var(--bg-1);
  display:flex; flex-direction:column; justify-content:space-between;
  padding: 40px 34px;
}
.auth-visual .voxel-field{ position:absolute; inset:0; z-index:0; perspective:900px; overflow:hidden; }
.auth-visual-top{ position:relative; z-index:1; display:flex; align-items:center; gap:10px; font-weight:800; }
.auth-visual-top img{ height:34px; }
.auth-visual-mid{ position:relative; z-index:1; }
.auth-visual-mid h2{ font-family: var(--font-display); font-size: 20px; line-height:1.9; margin:0 0 14px; }
.auth-visual-mid p{ color: var(--text-dim); font-size:14px; max-width:320px; }
.auth-visual-scan{ position:absolute; inset-inline:0; height:2px; top:0; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity:.5; animation: scan 7s linear infinite; z-index:1; }

.auth-card{
  width:100%;
  background: var(--panel);
  padding: 42px 38px;
  display:flex; flex-direction:column; justify-content:center;
  animation: heroPop .5s cubic-bezier(.2,.9,.25,1.2) both;
}
.auth-card .eyebrow{ margin-bottom: 10px; }
.auth-card h1{ font-size: 26px; margin: 0 0 4px; }
.auth-card .sub{ color: var(--text-dim); font-size: 14px; margin-bottom: 26px; }

.field{ margin-bottom: 16px; }
.field label{ display:block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.field input, .field textarea, .field select{
  width:100%; background: var(--bg-1); border: 1px solid var(--border);
  color: var(--text); padding: 11px 13px; border-radius: var(--radius-sm); font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,200,61,.15);
}
.field-hint{ font-size:12px; color: var(--text-faint); margin-top:5px; }

.code-inputs{ display:flex; gap:8px; justify-content:center; margin: 18px 0; direction:ltr; }
.code-inputs input{
  width: 44px; height: 52px; text-align:center; font-size: 20px; font-family: var(--font-mono);
  background: var(--bg-1); border:1px solid var(--border); border-radius: 10px; color: var(--text);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.code-inputs input:focus{ outline:none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,200,61,.15); transform: translateY(-2px); }

.auth-foot{ text-align:center; font-size:13px; color: var(--text-dim); margin-top: 18px; }
.auth-foot a{ color: var(--gold); font-weight:600; }

.alert{
  padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 16px;
  border: 1px solid transparent;
  animation: heroPop .3s ease both;
}
.alert-error{ background: rgba(255,91,60,.1); color:#ff8a73; border-color: rgba(255,91,60,.3); }
.alert-success{ background: rgba(143,227,74,.1); color:#a8e878; border-color: rgba(143,227,74,.3); }
.alert[hidden]{ display:none; }

/* ===========================================================
   DASHBOARD / APP SHELL
=========================================================== */
.app-shell{ display:grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 100px); gap: 18px; padding: 0 18px; max-width: 1300px; margin: 0 auto; }
.sidebar{ border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 26px 16px; background: var(--bg-1); height: fit-content; position: sticky; top: 100px; }
.sidebar .userbox{ display:flex; align-items:center; gap:10px; padding: 10px 10px 18px; border-bottom:1px solid var(--border-soft); margin-bottom: 16px; }
.sidebar .userbox img{ width:38px; height:38px; border-radius:8px; image-rendering: pixelated; }
.sidebar .userbox .name{ font-weight:700; font-size:14px; }
.sidebar .userbox .role{ font-size:11px; color: var(--orange); font-family: var(--font-mono); }
.side-link{
  display:flex; align-items:center; gap:10px; padding: 11px 12px; border-radius: 999px;
  color: var(--text-dim); font-size:14px; margin-bottom:4px; transition: all .2s;
}
.side-link:hover{ background: var(--panel-2); color: var(--text); transform: translateX(-2px); }
[dir="rtl"] .side-link:hover{ transform: translateX(2px); }
.side-link.active{ background: linear-gradient(95deg, rgba(255,200,61,.18), rgba(255,140,47,.07)); color: var(--gold); border: 1px solid rgba(255,200,61,.25); font-weight:700; }
.main-area{ padding: 32px 0 60px; max-width: 980px; }
@media (max-width: 880px){ .app-shell{ grid-template-columns: 1fr; padding: 0 14px; } .sidebar{ display:flex; overflow-x:auto; gap:6px; padding:14px; position: static; } .sidebar .userbox{ display:none; } .side-link{ white-space:nowrap; } }

.panel{ background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius); padding: 24px; margin-bottom: 22px; transition: border-color .2s; }
.panel:hover{ border-color: rgba(255,200,61,.18); }
.panel h2{ margin:0 0 18px; font-size: 18px; }

.banner-preview{
  height: 110px; border-radius: var(--radius-sm); margin-bottom: 18px; position:relative; overflow:hidden;
  border: 1px solid var(--border);
}
.banner-blocks{ background: repeating-linear-gradient(45deg, #1f1f24 0 18px, #232328 18px 36px); }
.banner-nether{ background: linear-gradient(120deg, #3a0d0d, #7a1f0d, #2b0606); }
.banner-aurora{ background: linear-gradient(120deg, #0d2b2b, #1f6f5c, #0d1a3a); }
.banner-void{ background: radial-gradient(circle at 30% 30%, #2a1a3a, #0b0b0d 70%); }

.swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.swatch{
  width:34px; height:34px; border-radius:50%; border:2px solid transparent; cursor:pointer; position:relative; transition: transform .2s;
}
.swatch:hover{ transform: scale(1.12); }
.swatch.selected{ border-color:#fff; }
.swatch[data-c="gold"]{ background: var(--gold); }
.swatch[data-c="orange"]{ background: var(--orange); }
.swatch[data-c="ember"]{ background: var(--ember); }
.swatch[data-c="toxic"]{ background: var(--toxic); }
.swatch[data-c="frost"]{ background: var(--frost); }

.skin-preview-box{ display:flex; align-items:center; gap:18px; }
.skin-preview-box img{ width:90px; image-rendering: pixelated; background: var(--bg-1); border-radius:8px; border: 1px solid var(--border); }

/* ===========================================================
   TICKETS
=========================================================== */
.ticket-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding: 16px; border:1px solid var(--border-soft); border-radius: var(--radius-sm); margin-bottom:10px;
  transition: border-color .2s, transform .2s;
}
.ticket-row:hover{ border-color: rgba(255,200,61,.3); transform: translateY(-2px); }
.ticket-row .subj{ font-weight:700; font-size:14px; }
.ticket-row .meta{ font-size:12px; color: var(--text-faint); margin-top:4px; }
.badge{ font-family: var(--font-mono); font-size:11px; padding: 4px 10px; border-radius:999px; border:1px solid; white-space:nowrap; }
.badge-open{ color:var(--frost); border-color: rgba(111,214,255,.4); background: rgba(111,214,255,.08); }
.badge-answered{ color:var(--toxic); border-color: rgba(143,227,74,.4); background: rgba(143,227,74,.08); }
.badge-closed{ color:var(--text-faint); border-color: var(--border); background: var(--panel-2); }

.message{
  padding: 14px 16px; border-radius: var(--radius-sm); margin-bottom: 12px; max-width: 80%;
  border: 1px solid var(--border-soft);
  animation: cardIn .35s ease-out both;
}
.message.staff{ background: rgba(255,200,61,.07); border-color: rgba(255,200,61,.25); margin-inline-start:auto; }
.message.mine{ background: var(--panel-2); }
.message .who{ font-size:12px; color: var(--orange); font-weight:700; margin-bottom:6px; }
.message .when{ font-size:11px; color: var(--text-faint); margin-top:6px; }

.empty-state{ text-align:center; padding: 50px 20px; color: var(--text-dim); }
.empty-state .glyph{ font-size: 40px; margin-bottom: 14px; opacity:.6; }

/* misc */
.spinner{ width:18px; height:18px; border:2px solid rgba(255,255,255,.2); border-top-color: var(--gold); border-radius:50%; animation: spin .7s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.flex-between{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.mt-24{ margin-top:24px; }
.mb-2{ margin-bottom:16px; }
.text-dim{ color: var(--text-dim); }
.hidden{ display:none !important; }

/* ===========================================================
   AMBIENT BACKGROUND — subtle floating glow on every inner page
=========================================================== */
@keyframes orbFloat{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(36px, 26px); } }

body[data-page="login"]::before, body[data-page="register"]::before, body[data-page="forgot"]::before, body[data-page="reset"]::before,
body[data-page="dashboard"]::before, body[data-page="tickets"]::before, body[data-page="ticket"]::before,
body[data-page="staff"]::before, body[data-page="news"]::before, body[data-page="news-post"]::before, body[data-page="admin"]::before, body[data-page="404"]::before {
  content:""; position: fixed; top:-110px; left:-110px; width:360px; height:360px; z-index:-1; pointer-events:none;
  background: radial-gradient(circle, var(--ambient-1), transparent 70%);
  filter: blur(6px);
  animation: orbFloat 17s ease-in-out infinite;
}
body[data-page="login"]::after, body[data-page="register"]::after, body[data-page="forgot"]::after, body[data-page="reset"]::after,
body[data-page="dashboard"]::after, body[data-page="tickets"]::after, body[data-page="ticket"]::after,
body[data-page="staff"]::after, body[data-page="news"]::after, body[data-page="news-post"]::after, body[data-page="admin"]::after, body[data-page="404"]::after {
  content:""; position: fixed; bottom:-130px; right:-130px; width:400px; height:400px; z-index:-1; pointer-events:none;
  background: radial-gradient(circle, var(--ambient-2), transparent 70%);
  filter: blur(8px);
  animation: orbFloat 21s ease-in-out infinite reverse;
}

.ambient-particles{ position: fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.scanline-fixed{
  position:fixed; inset-inline:0; height:2px; top:0; z-index:-1; pointer-events:none;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.3;
  animation: scan 9s linear infinite;
}

/* ===========================================================
   NEWS
=========================================================== */
.news-card{ position:relative; }
.news-card.pinned{ border-color: rgba(255,200,61,.4); }
.news-pin-tag{
  position:absolute; inset-inline-end:16px; top:16px;
  font-family: var(--font-mono); font-size:10px; color:var(--gold);
  border:1px solid rgba(255,200,61,.4); border-radius:999px; padding:3px 9px;
}
.news-meta{ font-size:12px; color: var(--text-faint); margin-bottom:10px; }
.news-body{ color: var(--text-dim); font-size:14px; white-space:pre-wrap; }
.news-card h3{ margin-inline-end: 90px; }
.news-thumb{ width:100%; max-height:220px; object-fit:cover; border-radius: var(--radius-sm); margin-bottom:14px; }
.news-readmore{ display:inline-block; margin-top:12px; color: var(--gold); font-size:13px; font-weight:600; }

.news-post-body{ color: var(--text-dim); font-size:15px; line-height:1.9; white-space:pre-wrap; }

.comment-row{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--border-soft); }
.comment-row:last-child{ border-bottom:none; }
.comment-avatar{ width:40px; height:40px; border-radius:8px; image-rendering: pixelated; flex-shrink:0; }
.comment-body{ flex:1; }
.comment-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.comment-user{ font-weight:700; font-size:14px; }
.comment-rank{ font-family: var(--font-mono); font-size:11px; color: var(--orange); border:1px solid rgba(255,140,47,.35); border-radius:999px; padding:2px 8px; }
.comment-date{ font-size:12px; color: var(--text-faint); }
.msg-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.msg-avatar{ width:28px; height:28px; border-radius:6px; image-rendering:pixelated; flex-shrink:0; }
.msg-avatar.staff-ring{ box-shadow: 0 0 0 2px var(--panel-2), 0 0 0 3px var(--gold); }
.comment-text{ margin:0; color: var(--text-dim); font-size:14px; white-space:pre-wrap; }
.comment-avatar.staff-ring{ box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold); }

.news-meta-dot{ color: var(--text-faint); }
.news-card-footer{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; }
.news-comment-count{ font-family: var(--font-mono); font-size:12px; color: var(--text-faint); }

@keyframes cardIn{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform: translateY(0); } }
.news-card-anim{ opacity:0; animation: cardIn .5s ease-out forwards; }
.comment-anim{ opacity:0; animation: cardIn .4s ease-out forwards; }

.post-hero{
  position:relative; border-radius: var(--radius-lg); overflow:hidden; min-height:220px;
  display:flex; align-items:flex-end;
  background:
    radial-gradient(ellipse 90% 70% at 30% 0%, rgba(255,140,47,.16), transparent 60%),
    var(--panel);
  border: 1px solid var(--border-soft);
  animation: cardIn .5s ease-out;
}
.post-hero.has-image{ background-size: cover; background-position: center; }
.post-hero.has-image::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,11,13,.15), rgba(11,11,13,.92));
}
.post-hero-overlay{ position:relative; padding: 28px 26px 22px; z-index:1; }
.post-hero-overlay h1{ margin: 8px 0 0; font-size: clamp(22px, 4vw, 32px); }
.post-hero.has-image .post-hero-overlay h1{ color: #f4efe4; }

.post-meta-strip{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding: 16px 0; margin-bottom: 6px; border-bottom: 1px solid var(--border-soft);
  color: var(--text-dim); font-size:13px;
}
.post-author-avatar{ width:24px; height:24px; border-radius:6px; image-rendering:pixelated; }
.post-share-btn{ margin-inline-start:auto; }

.author-card{
  display:flex; align-items:center; gap:14px;
  background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius);
  padding: 16px 18px;
}
.author-card img{ width:48px; height:48px; border-radius:10px; image-rendering:pixelated; }
.author-card-label{ font-size:11px; color: var(--text-faint); text-transform:uppercase; letter-spacing:.06em; }
.author-card-name{ font-weight:700; font-size:15px; }

/* ===========================================================
   STORE
=========================================================== */
.product-card{ display:flex; flex-direction:column; text-align:center; position:relative; }
.product-badge{
  position:absolute; top:-10px; inset-inline-start:50%; transform:translateX(-50%);
  background: linear-gradient(95deg, var(--gold), var(--orange)); color:#15140d;
  font-size:11px; font-weight:800; padding:4px 14px; border-radius:999px;
  font-family: var(--font-mono); white-space:nowrap;
}
.product-title{ font-size:19px; font-weight:800; margin: 10px 0 4px; }
.product-price{ font-family: var(--font-mono); font-size:26px; color: var(--gold); margin-bottom:12px; }
.product-icon{ display:flex; justify-content:center; margin-top:6px; }
.product-price span{ font-size:13px; color: var(--text-faint); }
.product-desc{ color: var(--text-dim); font-size:13px; margin-bottom:14px; }
.product-features{ list-style:none; padding:0; margin: 0 0 20px; text-align:start; display:flex; flex-direction:column; gap:8px; flex:1; }
.product-features li{ font-size:13px; color: var(--text-dim); display:flex; align-items:center; gap:8px; }
.product-features li::before{ content:"✓"; color: var(--toxic); font-weight:800; }

.order-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding: 14px 16px; border:1px solid var(--border-soft); border-radius: var(--radius-sm); margin-bottom:10px;
}
.order-row .meta{ font-size:12px; color: var(--text-faint); margin-top:4px; }
.badge-pending_payment{ color:var(--orange); border-color: rgba(255,140,47,.4); background: rgba(255,140,47,.08); }
.badge-paid{ color:var(--toxic); border-color: rgba(143,227,74,.4); background: rgba(143,227,74,.08); }
.badge-failed{ color:var(--ember); border-color: rgba(255,91,60,.4); background: rgba(255,91,60,.08); }
.badge-fulfilled{ color:var(--frost); border-color: rgba(111,214,255,.4); background: rgba(111,214,255,.08); }

.result-box{ text-align:center; padding: 60px 20px; }
.result-icon{ font-size:56px; margin-bottom: 18px; }

/* ===========================================================
   ADMIN
=========================================================== */
.admin-tabs{ display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap; }
.admin-tab{
  padding:9px 18px; border-radius:999px; border:1px solid var(--border); color: var(--text-dim);
  font-size:13px; font-weight:600; background:transparent; transition: all .2s;
}
.admin-tab:hover{ border-color: var(--gold); color: var(--gold); }
.admin-tab.active{ background: linear-gradient(95deg, var(--gold), var(--orange)); color:#15140d; border-color:transparent; }
.admin-list-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 16px; border:1px solid var(--border-soft); border-radius: var(--radius-sm); margin-bottom:10px;
  opacity:0; animation: cardIn .4s ease-out forwards;
  transition: border-color .2s, transform .2s;
}
.admin-list-row:hover{ border-color: rgba(255,200,61,.3); transform: translateY(-2px); }
.admin-list-row .title{ font-weight:700; font-size:14px; }
.admin-list-row .sub{ font-size:12px; color: var(--text-faint); margin-top:4px; }
.admin-actions{ display:flex; gap:8px; }
.checkbox-row{ display:flex; align-items:center; gap:8px; font-size:13px; color: var(--text-dim); }
.checkbox-row input{ width:auto; }

.admin-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
@media (max-width:700px){ .admin-stats{ grid-template-columns:1fr; } }
.admin-stat-tile{
  display:flex; align-items:center; gap:14px;
  background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius);
  padding: 18px 20px; opacity:0; animation: cardIn .5s ease-out forwards;
  transition: transform .25s, border-color .25s;
}
.admin-stat-tile:hover{ transform: translateY(-4px); border-color: rgba(255,200,61,.3); }
.admin-stat-tile:nth-child(2){ animation-delay:.08s; }
.admin-stat-tile:nth-child(3){ animation-delay:.16s; }
.admin-stat-icon{
  width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px;
  background: linear-gradient(135deg, rgba(255,200,61,.18), rgba(255,140,47,.08));
  border: 1px solid rgba(255,200,61,.25); flex-shrink:0;
}
.admin-stat-tile b{ display:block; font-family: var(--font-mono); font-size:22px; color: var(--gold); }
.admin-stat-tile span{ font-size:12px; color: var(--text-faint); }

/* ===========================================================
   DEPTH ZONES — homepage redesign (v3)
   Scrolling the homepage = digging through the world:
   Sky (Y320) -> Surface (Y64) -> Caves (Y0) -> Bedrock (Y-64)
=========================================================== */
body[data-page="home"]{ background: var(--z-sky-1); }

.zone{ position:relative; overflow:hidden; isolation:isolate; }
.zone .container{ position:relative; z-index:2; }

.zone::before{ /* seam blend from previous zone */
  content:""; position:absolute; inset-inline:0; top:-1px; height:160px; z-index:0;
  background: linear-gradient(180deg, var(--seam-from,transparent), transparent);
  pointer-events:none;
}
.zone::after{ /* ambient grain/vignette per zone */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(ellipse 120% 60% at 50% 100%, rgba(0,0,0,.35), transparent 70%);
}
html[data-theme="light"] .zone::after,
html[data-theme="light"] .zone::before{ content:none; }

/* ---- SKY ---- */
.zone-sky{
  background:
    radial-gradient(ellipse 70% 45% at 22% -5%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(ellipse 60% 45% at 85% 8%, var(--z-sky-accent-2), transparent 62%),
    radial-gradient(ellipse 90% 60% at 50% 0%, var(--z-sky-accent), transparent 70%),
    linear-gradient(180deg, var(--z-sky-1), var(--z-sky-2));
  padding: 130px 0 100px;
}
.zone-sky::after{ background: radial-gradient(ellipse 130% 70% at 50% 115%, rgba(0,0,0,.55), transparent 70%); }
.sun-glow{
  position:absolute; top:-120px; inset-inline-end:8%; width:280px; height:280px; border-radius:50%; z-index:0;
  background: radial-gradient(circle, var(--z-sky-accent) 0%, rgba(255,184,77,.3) 45%, transparent 72%);
  filter: blur(2px);
  animation: sunPulse 8s ease-in-out infinite;
}
@keyframes sunPulse{ 0%,100%{ transform: scale(1); opacity:.9;} 50%{ transform: scale(1.08); opacity:1;} }
.cloud{
  position:absolute; z-index:0; border-radius:40px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  filter: blur(.5px);
  animation: cloudDrift linear infinite;
}
@keyframes cloudDrift{ from{ transform: translateX(-8%);} to{ transform: translateX(8%);} }

.zone-sky .voxel{ background: linear-gradient(145deg, rgba(255,255,255,.5), rgba(255,184,77,.18)); border-color: rgba(255,255,255,.35); border-radius:5px; box-shadow: 0 0 16px rgba(255,140,47,.25); }

.eyebrow.zone-eyebrow{ color: var(--z-sky-accent); }
.eyebrow.zone-eyebrow::before{ background: var(--z-sky-accent-2); box-shadow: 0 0 8px var(--z-sky-accent-2); }

.split-title{
  font-family: var(--font-display);
  font-size: clamp(32px, 7vw, 64px);
  line-height:1.3; letter-spacing: 1px; margin: 20px 0 14px;
  display:flex; flex-wrap:wrap; justify-content:center; gap: .05em;
  direction: ltr;
}
.split-title .ch{
  display:inline-block; opacity:0; transform: translateY(28px) rotate(6deg);
  animation: chIn .6s cubic-bezier(.2,.8,.2,1) forwards;
  background: linear-gradient(95deg, var(--z-sky-accent), var(--z-sky-accent-2) 55%, var(--z-sky-accent));
  background-size: 260% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@keyframes chIn{ to{ opacity:1; transform: translateY(0) rotate(0deg); } }

.hero .subtitle{ color: var(--text-dim); font-size:16px; max-width:560px; margin:0 auto 30px; opacity:0; animation: heroPop .7s .5s cubic-bezier(.2,.9,.25,1.2) forwards; }

.stat b.counting{ font-variant-numeric: tabular-nums; animation: statPop .5s cubic-bezier(.2,.9,.25,1.2); }
@keyframes statPop{ 0%{ transform: scale(.7); opacity:.3; } 60%{ transform: scale(1.12); opacity:1; } 100%{ transform: scale(1); } }

/* ---- SURFACE ---- */
.zone-surface{
  --seam-from: rgba(16,22,15,.9);
  background:
    radial-gradient(ellipse 70% 50% at 15% 0%, rgba(139,199,107,.14), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(201,154,85,.10), transparent 60%),
    linear-gradient(180deg, var(--z-surface-1), var(--z-surface-2));
}
.zone-surface .eyebrow{ color: var(--z-surface-accent); }
.zone-surface .eyebrow::before{ background: var(--z-surface-accent-2); box-shadow: 0 0 8px var(--z-surface-accent-2); }

/* inventory-slot style feature cards */
.feature-slot{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12));
  border: 2px solid #000; outline: 1px solid rgba(255,255,255,.06); outline-offset: -3px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.06), inset 0 -3px 0 rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.3);
  border-radius: 10px;
  transform-style: preserve-3d; will-change: transform;
}
.feature-slot:hover{ border-color: var(--z-surface-accent); box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -3px 0 rgba(0,0,0,.35), 0 18px 34px rgba(0,0,0,.4), 0 0 0 1px rgba(139,199,107,.3); }
.feature-slot .icon-box{
  background: linear-gradient(135deg, rgba(139,199,107,.22), rgba(201,154,85,.10));
  border-color: rgba(139,199,107,.35);
}
.feature-slot:hover .icon-box{ transform: rotate(-8deg) scale(1.1); }

/* ---- CAVE ---- */
.zone-cave{
  --seam-from: rgba(18,12,28,.9);
  background:
    radial-gradient(ellipse 55% 45% at 12% 15%, rgba(176,131,240,.16), transparent 60%),
    radial-gradient(ellipse 55% 45% at 92% 85%, rgba(79,211,196,.12), transparent 60%),
    linear-gradient(180deg, var(--z-cave-1), var(--z-cave-2));
}
.zone-cave .eyebrow{ color: var(--z-cave-accent); }
.zone-cave .eyebrow::before{ background: var(--z-cave-accent-2); box-shadow: 0 0 8px var(--z-cave-accent-2); }
.crystal{
  position:absolute; z-index:0; width:10px; height:26px;
  background: linear-gradient(180deg, var(--z-cave-accent), transparent);
  clip-path: polygon(50% 0, 100% 30%, 78% 100%, 22% 100%, 0 30%);
  opacity:.55; animation: crystalGlow 3.2s ease-in-out infinite;
}
@keyframes crystalGlow{ 0%,100%{ opacity:.35; filter: brightness(1);} 50%{ opacity:.8; filter: brightness(1.4);} }

.news-carousel{ box-shadow: 0 0 0 1px rgba(176,131,240,.25), var(--shadow-pop); }
.carousel-slide.active .carousel-caption h3{ animation: heroPop .5s cubic-bezier(.2,.9,.25,1.2) both; }
.carousel-dot.active{ background: var(--z-cave-accent); }

/* ---- BEDROCK ---- */
.zone-bedrock{
  --seam-from: rgba(23,10,8,.92);
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,122,69,.16), transparent 60%),
    radial-gradient(ellipse 60% 60% at 50% 120%, rgba(255,77,77,.18), transparent 70%),
    linear-gradient(180deg, var(--z-bedrock-1), var(--z-bedrock-2));
}
.zone-bedrock .eyebrow{ color: var(--z-bedrock-accent); }
.zone-bedrock .eyebrow::before{ background: var(--z-bedrock-accent-2); box-shadow: 0 0 8px var(--z-bedrock-accent-2); }
.ember-particle{
  position:absolute; z-index:0; border-radius:2px;
  background: var(--z-bedrock-accent);
  box-shadow: 0 0 10px var(--z-bedrock-accent);
  animation: emberRise linear infinite;
}
@keyframes emberRise{
  0%{ transform: translateY(0) scale(1); opacity:0; }
  10%{ opacity:1; }
  100%{ transform: translateY(-420px) scale(.4); opacity:0; }
}
.zone-bedrock .staff-avatar{ animation: bob 3.6s ease-in-out infinite; }
.zone-bedrock .staff-card:nth-child(2) .staff-avatar{ animation-delay:.3s; }
.zone-bedrock .staff-card:nth-child(3) .staff-avatar{ animation-delay:.6s; }
.zone-bedrock .staff-card:nth-child(4) .staff-avatar{ animation-delay:.9s; }
@keyframes bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} }
.zone-bedrock .staff-avatar.framed{
  border-color: var(--z-bedrock-accent);
  box-shadow: 0 0 0 3px var(--z-bedrock-1), 0 0 0 4px rgba(255,122,69,.5), 0 0 18px rgba(255,122,69,.4);
}
.zone-bedrock .btn-ghost:hover{ border-color: var(--z-bedrock-accent); color: var(--z-bedrock-accent); }

/* ===========================================================
   DEPTH RULER — signature element
=========================================================== */
.depth-ruler{
  position: fixed; top: calc(var(--nav-h) + 34px); bottom: 26px;
  inset-inline-end: 18px; width: var(--ruler-w); z-index: 150;
  display:flex; flex-direction:column; align-items:center;
  pointer-events:none;
}
.depth-ruler-track{
  position:relative; width:2px; flex:1;
  background: linear-gradient(180deg, var(--z-sky-accent), var(--z-surface-accent), var(--z-cave-accent), var(--z-bedrock-accent));
  border-radius:2px; opacity:.55;
}
.depth-tick{ position:absolute; inset-inline-start:50%; transform: translateX(-50%); display:flex; align-items:center; }
.depth-tick::before{ content:""; width:8px; height:2px; background: var(--text-faint); }
.depth-tick span{ position:absolute; inset-inline-end: 14px; font-family: var(--font-mono); font-size:10px; color: var(--text-faint); white-space:nowrap; }
.depth-tick[data-y="320"]{ top:0; }
.depth-tick[data-y="64"]{ top:33%; }
.depth-tick[data-y="0"]{ top:66%; }
.depth-tick[data-y="-64"]{ top:100%; }

.depth-marker{
  position:absolute; inset-inline-start:50%; top:0; transform: translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition: top .08s linear;
}
.depth-marker-dot{
  width:12px; height:12px; border-radius:50%; background: var(--text);
  box-shadow: 0 0 0 3px var(--bg), 0 0 14px 3px currentColor;
  border:2px solid var(--bg);
}
.depth-marker-y{ font-family: var(--font-mono); font-size:11px; font-weight:700; margin-top:6px; }
.depth-marker-label{ font-size:9px; color: var(--text-faint); writing-mode: vertical-rl; text-orientation:mixed; letter-spacing:.1em; margin-top:2px; }

@media (max-width: 980px){ .depth-ruler{ display:none; } }

.depth-pill{
  display:none; position: fixed; top: calc(var(--nav-h) + 14px); left:50%; transform: translateX(-50%);
  z-index:150; background: var(--panel-glass); backdrop-filter: blur(14px);
  border:1px solid var(--border-soft); border-radius:999px; padding:6px 16px;
  font-family: var(--font-mono); font-size:11px; gap:8px; align-items:center;
  box-shadow: var(--shadow-pop);
}
.depth-pill span:first-child{ font-weight:700; }
.depth-pill span:last-child{ color: var(--text-faint); }
@media (max-width: 980px){ .depth-pill{ display:flex; } }

/* reduced motion: kill ruler transition + particle loops (global rule already halts keyframe durations) */
@media (prefers-reduced-motion: reduce){
  .depth-marker{ transition:none; }
}

/* ===========================================================
   NEWS PAGE — cave atmosphere
=========================================================== */
body[data-page="news"]{ background: linear-gradient(180deg, var(--z-cave-1), var(--z-cave-2)); min-height:100vh; }
body[data-page="news"] .ambient-field{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 40% at 10% 10%, rgba(176,131,240,.14), transparent 60%),
    radial-gradient(ellipse 55% 40% at 92% 80%, rgba(79,211,196,.10), transparent 60%);
}
body[data-page="news"] .eyebrow{ color: var(--z-cave-accent); }
body[data-page="news"] .eyebrow::before{ background: var(--z-cave-accent-2); box-shadow: 0 0 8px var(--z-cave-accent-2); }
body[data-page="news"] .news-card{
  border: 1px solid var(--border-soft);
  transition: border-color .25s, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
body[data-page="news"] .news-card:hover{
  border-color: rgba(176,131,240,.45); transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(176,131,240,.2);
}
body[data-page="news"] .news-card.pinned{ border-color: rgba(176,131,240,.5); }
body[data-page="news"] .news-pin-tag{ color: var(--z-cave-accent); }
body[data-page="news"] .news-readmore{ color: var(--z-cave-accent); }
body[data-page="news"] .btn-ghost:hover{ border-color: var(--z-cave-accent); color: var(--z-cave-accent); }

/* ===========================================================
   STAFF PAGE — bedrock atmosphere
=========================================================== */
body[data-page="staff"]{ background: linear-gradient(180deg, var(--z-bedrock-1), var(--z-bedrock-2)); min-height:100vh; }
body[data-page="staff"] .ambient-field{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(255,122,69,.14), transparent 60%),
    radial-gradient(ellipse 60% 55% at 50% 115%, rgba(255,77,77,.16), transparent 70%);
}
body[data-page="staff"] .eyebrow{ color: var(--z-bedrock-accent); }
body[data-page="staff"] .eyebrow::before{ background: var(--z-bedrock-accent-2); box-shadow: 0 0 8px var(--z-bedrock-accent-2); }
body[data-page="staff"] .staff-avatar{ animation: bob 3.6s ease-in-out infinite; }
body[data-page="staff"] #staffOwners .staff-card:nth-child(2) .staff-avatar,
body[data-page="staff"] #staffOthers .staff-card:nth-child(2) .staff-avatar{ animation-delay:.3s; }
body[data-page="staff"] #staffOwners .staff-card:nth-child(3) .staff-avatar,
body[data-page="staff"] #staffOthers .staff-card:nth-child(3) .staff-avatar{ animation-delay:.6s; }
body[data-page="staff"] #staffOwners .staff-card:nth-child(4) .staff-avatar,
body[data-page="staff"] #staffOthers .staff-card:nth-child(4) .staff-avatar{ animation-delay:.9s; }
body[data-page="staff"] .staff-avatar.framed{
  border-color: var(--z-bedrock-accent);
  box-shadow: 0 0 0 3px var(--z-bedrock-1), 0 0 0 4px rgba(255,122,69,.5), 0 0 18px rgba(255,122,69,.4);
}
body[data-page="staff"] .btn-ghost:hover{ border-color: var(--z-bedrock-accent); color: var(--z-bedrock-accent); }

/* owner ring — molten badge ring for owner-tier cards (site-wide) */
.owner-ring{
  position:relative;
}
.owner-ring::before{
  content:""; position:absolute; inset:-6px; border-radius:16px; z-index:-1;
  background: conic-gradient(from 0deg, var(--z-bedrock-accent), var(--gold), var(--z-bedrock-accent-2), var(--gold), var(--z-bedrock-accent));
  animation: ringSpin 5s linear infinite;
  filter: blur(6px); opacity:.75;
}
@keyframes ringSpin{ to{ transform: rotate(360deg); } }

/* staff name / bio (used on homepage preview + full staff page, previously unstyled) */
.staff-name{ display:flex; align-items:center; justify-content:center; gap:4px; font-weight:700; font-size:15px; }
.staff-bio{ color: var(--text-dim); font-size:13px; margin: 6px 0 0; min-height: 34px; }
.staff-card-anim{ opacity:0; animation: cardIn .5s ease-out forwards; }