:root {
  --bg: #080b0a;
  --bg2: #0d110f;
  --panel: rgba(18, 24, 21, .72);
  --panel-solid: #121815;
  --text: #f5f7f5;
  --muted: #aab4ad;
  --line: rgba(255,255,255,.10);
  --green: #76d56f;
  --green2: #a5ef8b;
  --radius: 24px;
  --shadow: 0 25px 80px rgba(0,0,0,.36);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 75% 22%, rgba(89,143,72,.10), transparent 28rem),
    linear-gradient(180deg, #080b0a 0%, #0b0f0d 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.nav {
  position: fixed; z-index: 50; inset: 0 0 auto 0;
  transition: .28s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(8,11,10,.76);
  border-bottom-color: var(--line);
  backdrop-filter: blur(18px);
}
.nav-inner { height: 78px; display:flex; align-items:center; gap:30px; }
.brand { display:flex; align-items:center; gap:11px; font-weight:900; letter-spacing:-.03em; font-size:22px; margin-right:auto; }
.brand img { width:40px; height:40px; border-radius:10px; box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.navlinks { display:flex; gap:8px; align-items:center; }
.navlinks a, .social a {
  color:#e4e9e5; padding:11px 14px; border-radius:13px; font-size:15px; font-weight:650;
  transition:.2s ease;
}
.navlinks a:hover, .social a:hover { background:rgba(255,255,255,.08); color:#fff; }
.social { display:flex; align-items:center; gap:2px; }
.social a { display:grid; place-items:center; width:40px; height:40px; padding:0; }
.social svg { width:19px; height:19px; fill:currentColor; }
.login-btn {
  margin-left:8px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08);
  padding:11px 16px; border-radius:14px; font-weight:780; font-size:15px;
}
.login-btn:hover { background:rgba(255,255,255,.14); }
.mobile-toggle { display:none; margin-left:auto; width:42px; height:42px; background:rgba(255,255,255,.08); color:#fff; border:1px solid var(--line); border-radius:12px; }

.hero {
  position:relative; min-height: 96svh; display:grid; place-items:center; isolation:isolate;
  background-image: url("/assets/images/hero.webp");
  background-size:cover; background-position:center 52%;
}
.hero::before {
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(180deg, rgba(4,7,5,.38) 0%, rgba(4,7,5,.14) 38%, rgba(8,11,10,.62) 76%, var(--bg) 100%),
    linear-gradient(90deg, rgba(3,5,4,.25), transparent 38%, rgba(3,5,4,.08));
}
.hero::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(circle at 50% 48%, transparent 0 18%, rgba(0,0,0,.10) 58%, rgba(0,0,0,.36) 100%);
}
.hero-content { padding-top: 68px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero-logo { width:96px; height:96px; border-radius:28px; filter: drop-shadow(0 18px 35px rgba(0,0,0,.45)); margin-bottom:12px; }
.hero h1 { margin:0; font-size:clamp(54px, 9vw, 116px); letter-spacing:-.07em; line-height:.86; text-shadow: 0 7px 35px rgba(0,0,0,.45); }
.server-card {
  margin-top:30px; display:flex; align-items:center; gap:14px; padding:9px 10px 9px 18px;
  background:rgba(10,14,12,.62); border:1px solid rgba(255,255,255,.16);
  border-radius:18px; backdrop-filter:blur(16px); box-shadow:var(--shadow);
}
.ip { text-align:left; }
.ip strong { display:block; font-size:16px; letter-spacing:.01em; }
.ip small { color:#b7c1ba; }
.copy-btn {
  border:0; cursor:pointer; color:#0a0d0b; background:linear-gradient(135deg,#8edc7b,#68c861);
  border-radius:12px; padding:12px 16px; font-weight:820;
}
.hero-actions { margin-top:16px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.pill {
  min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:0 16px; border-radius:16px; background:rgba(11,15,13,.66); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px); font-weight:750; box-shadow:0 12px 35px rgba(0,0,0,.2);
}
.pill.primary { background:rgba(11,15,13,.66); color:#f5f7f5; border-color:rgba(255,255,255,.16); }
.pill.primary svg { fill:#ffffff; }
.dot { width:8px; height:8px; border-radius:50%; background:#91e584; box-shadow:0 0 16px #91e584; }
.status-offline .dot { background:#d86e6e; box-shadow:0 0 16px #d86e6e; }

.scroll-hint { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); opacity:.68; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.scroll-hint::after { content:""; display:block; width:1px; height:32px; background:linear-gradient(#fff,transparent); margin:9px auto 0; }

.gallery-wrap { padding: 82px 0 110px; position:relative; }
.gallery-wrap::before {
  content:""; position:absolute; width:360px; height:360px; border-radius:50%;
  background:rgba(91,168,75,.09); filter:blur(90px); left:-160px; top:24%;
}
.gallery {
  display:grid; grid-template-columns:repeat(12, 1fr); gap:18px;
}
.shot {
  border-radius:var(--radius); overflow:hidden; position:relative; border:1px solid var(--line);
  box-shadow:0 20px 50px rgba(0,0,0,.24); background:#111;
  min-height:280px;
}
.shot img { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .35s; }
.shot:hover img { transform:scale(1.035); filter:saturate(1.06); }
.shot::after {
  content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35));
  pointer-events:none;
}
.shot.big { grid-column:1/-1; height:min(61vw, 650px); }
.shot.left { grid-column:span 7; height:470px; }
.shot.right { grid-column:span 5; height:470px; }
.shot.half { grid-column:span 6; height:410px; }
.shot.medium { grid-column:span 6; height:460px; }
.shot.tall { grid-column:span 5; height:560px; }
.shot.wide { grid-column:span 7; height:560px; }
.shot.mapart { grid-column:2/12; height:min(52vw,620px); }
.shot button {
  position:absolute; inset:0; width:100%; border:0; background:transparent; cursor:zoom-in; z-index:3;
}

.cta-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; padding-bottom:100px; }
.cta {
  min-height:280px; border-radius:28px; border:1px solid var(--line); overflow:hidden; position:relative;
  padding:36px; display:flex; flex-direction:column; justify-content:flex-end; box-shadow:var(--shadow);
}
.cta.discord {
  background:
    radial-gradient(circle at 82% 18%, rgba(112,126,255,.34), transparent 17rem),
    linear-gradient(135deg, #171a2a 0%, #11141d 48%, #0e1110 100%);
}
.cta.shop {
  background:
    radial-gradient(circle at 82% 18%, rgba(118,218,107,.28), transparent 17rem),
    linear-gradient(135deg, #152019 0%, #101612 52%, #0d100e 100%);
}
.cta .kicker { color:#c8d1cb; font-size:13px; text-transform:uppercase; letter-spacing:.14em; font-weight:850; }
.cta h2 { margin:7px 0 5px; font-size:clamp(34px,4vw,54px); letter-spacing:-.05em; }
.cta p { margin:0 0 22px; color:#c2cbc5; max-width:480px; }
.cta-link {
  align-self:flex-start; background:#f5f7f5; color:#101411; padding:12px 16px; border-radius:13px; font-weight:850;
}

.footer { border-top:1px solid var(--line); padding:34px 0 44px; color:#9ca7a0; }
.footer-inner { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.footer-brand { display:flex; align-items:center; gap:10px; margin-right:auto; color:#e8ece9; font-weight:850; }
.footer-brand img { width:30px; height:30px; border-radius:8px; }
.footer a:hover { color:white; }
.footer-links { display:flex; gap:18px; flex-wrap:wrap; font-size:13px; }

.lightbox {
  position:fixed; z-index:100; inset:0; display:none; place-items:center; padding:28px;
  background:rgba(0,0,0,.88); backdrop-filter:blur(16px);
}
.lightbox.open { display:grid; }
.lightbox img { max-height:90vh; max-width:94vw; border-radius:18px; box-shadow:0 30px 100px rgba(0,0,0,.7); }
.lightbox-close { position:absolute; top:22px; right:22px; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.10); color:white; cursor:pointer; font-size:24px; }

.page-hero { min-height:46vh; display:grid; align-items:end; padding:130px 0 58px; border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.page-hero::after { content:""; position:absolute; width:500px; height:500px; border-radius:50%; background:rgba(103,190,84,.09); filter:blur(110px); right:-180px; top:-180px; }
.page-hero h1 { margin:0; font-size:clamp(52px,8vw,96px); letter-spacing:-.065em; position:relative; z-index:1; }
.page-content { padding:58px 0 110px; }
.panel { background:var(--panel-solid); border:1px solid var(--line); border-radius:24px; padding:28px; }
.panel h2 { margin-top:0; }
.muted { color:var(--muted); }
.simple-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.member-card { min-height:230px; padding:24px; border-radius:22px; border:1px solid var(--line); background:linear-gradient(180deg,#151b18,#0f1412); display:flex; flex-direction:column; justify-content:flex-end; }
.member-card span { color:var(--muted); font-size:13px; }

@media (max-width: 920px) {
  .navlinks, .social, .login-btn { display:none; }
  .mobile-toggle { display:block; }
  .nav.open { background:rgba(8,11,10,.96); backdrop-filter:blur(18px); }
  .nav.open .nav-inner { height:auto; min-height:78px; flex-wrap:wrap; padding-bottom:18px; }
  .nav.open .navlinks { width:100%; display:grid; grid-template-columns:1fr 1fr; order:3; }
  .nav.open .social { display:flex; order:4; width:100%; }
  .nav.open .login-btn { display:inline-flex; order:5; margin-left:0; }
  .shot.left,.shot.right,.shot.half,.shot.medium,.shot.tall,.shot.wide,.shot.mapart { grid-column:1/-1; height:min(66vw,520px); }
  .cta-grid { grid-template-columns:1fr; }
  .simple-grid { grid-template-columns:1fr; }
}
@media (max-width: 600px) {
  .container { width:min(100% - 24px,1180px); }
  .hero { min-height:92svh; }
  .hero-logo { width:84px; height:84px; border-radius:22px; }
  .server-card { padding-left:14px; }
  .ip strong { font-size:14px; }
  .shot.big,.shot.left,.shot.right,.shot.half,.shot.medium,.shot.tall,.shot.wide,.shot.mapart { height:64vw; min-height:230px; border-radius:18px; }
  .gallery { gap:12px; }
  .gallery-wrap { padding-top:48px; }
  .cta { min-height:260px; padding:26px; }
}


.cta { isolation:isolate; }
.cta > * { position:relative; z-index:2; }
.cta-symbol {
  position:absolute; z-index:1; right:34px; top:28px; width:150px; height:150px;
  opacity:.13; transform:rotate(-7deg); pointer-events:none;
}
.cta-symbol svg { width:100%; height:100%; fill:currentColor; }
.cta.discord .cta-symbol { color:#8992ff; }
.cta.shop .cta-symbol { color:#91e584; }
.cta.discord:hover .cta-symbol, .cta.shop:hover .cta-symbol { opacity:.19; transform:rotate(-4deg) scale(1.035); transition:.35s ease; }

.page-intro { max-width:760px; color:var(--muted); margin:0 0 28px; line-height:1.7; }
.rule-switch {
  display:inline-flex; gap:6px; padding:6px; border:1px solid var(--line); border-radius:16px;
  background:#0d120f; margin-bottom:26px; position:sticky; top:94px; z-index:8;
}
.rule-switch button {
  border:0; color:#aeb8b1; background:transparent; padding:10px 16px; border-radius:11px; cursor:pointer; font-weight:800;
}
.rule-switch button.active { background:#eef3ef; color:#0c110e; }
.rules-pane { display:none; }
.rules-pane.active { display:block; }
.rule-section { margin:0 0 32px; }
.rule-section-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:14px; }
.rule-section h2 { margin:0; font-size:clamp(25px,3vw,36px); letter-spacing:-.035em; }
.rule-section-head p { margin:0; color:var(--muted); font-size:13px; }
.rule-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.rule-card {
  border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg,#131916,#0f1412);
  padding:17px 18px; display:grid; grid-template-columns:44px 1fr; gap:13px; align-items:start;
}
.rule-no {
  width:42px; height:42px; display:grid; place-items:center; border-radius:12px; border:1px solid rgba(145,229,132,.22);
  background:rgba(145,229,132,.07); color:#a8ed9c; font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:12px; font-weight:800;
}
.rule-card p { margin:1px 0 0; color:#e0e5e1; line-height:1.5; font-size:14px; }
.rule-card.subrule { margin-left:38px; background:#0e1311; }
.end-rules {
  border:1px solid rgba(184,71,255,.28); border-radius:24px; padding:24px;
  background:radial-gradient(circle at 95% 0, rgba(184,71,255,.12), transparent 20rem), #101312;
}
.end-rules .rule-no { color:#d69cff; border-color:rgba(184,71,255,.28); background:rgba(184,71,255,.08); }
.report-box {
  border-radius:24px; padding:26px; border:1px solid rgba(118,213,111,.22);
  background:radial-gradient(circle at 100% 0, rgba(118,213,111,.10), transparent 22rem), #111713;
  margin-top:26px;
}
.report-box strong { color:#fff; }
.code-chip { display:inline-block; font-family:"IBM Plex Mono", ui-monospace, monospace; padding:3px 8px; border:1px solid var(--line); border-radius:8px; background:#090d0b; color:#b9f1af; }

.team-group { margin:0 0 36px; }
.team-title { display:flex; align-items:center; gap:12px; margin-bottom:15px; }
.team-title .bar { width:4px; height:31px; border-radius:6px; background:var(--role-color,#fff); box-shadow:0 0 25px color-mix(in srgb,var(--role-color,#fff) 40%,transparent); }
.team-title h2 { margin:0; font-size:28px; letter-spacing:-.035em; }
.team-title small { color:var(--muted); }
.team-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.staff-card {
  min-height:250px; position:relative; overflow:hidden; border:1px solid var(--line); border-radius:22px;
  background:linear-gradient(180deg,#161b19,#0d1210); padding:20px; display:flex; flex-direction:column; justify-content:flex-end;
}
.staff-card::before {
  content:""; position:absolute; width:160px; height:160px; border-radius:50%; right:-50px; top:-50px;
  background:var(--role-color,#fff); opacity:.09; filter:blur(28px);
}
.staff-render { position:absolute; height:185px; max-width:150px; object-fit:contain; top:13px; left:50%; transform:translateX(-50%); filter:drop-shadow(0 15px 18px rgba(0,0,0,.38)); }
.staff-card .role { color:var(--role-color,#fff); font-size:11px; text-transform:uppercase; letter-spacing:.12em; font-weight:900; }
.staff-card strong { font-size:18px; margin-top:3px; z-index:2; }
.staff-card .main-admin { font-size:11px; color:#b9c2bc; margin-top:3px; }

.shop-hero-card {
  position:relative; overflow:hidden; border:1px solid var(--line); border-radius:30px; padding:40px;
  background:radial-gradient(circle at 90% 10%, rgba(118,213,111,.18), transparent 25rem),linear-gradient(135deg,#172219,#0d120f);
  min-height:360px; display:flex; flex-direction:column; justify-content:center;
}
.shop-hero-card h2 { font-size:clamp(42px,6vw,70px); margin:0 0 10px; letter-spacing:-.055em; }
.shop-hero-card p { color:var(--muted); max-width:620px; line-height:1.65; }
.shop-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.shop-primary {
  display:inline-flex; align-items:center; gap:9px; padding:13px 18px; border-radius:14px; background:#eef4ef; color:#0c110e; font-weight:900;
}
.shop-secondary { display:inline-flex; padding:13px 18px; border:1px solid var(--line); border-radius:14px; font-weight:800; }
.shop-gem { position:absolute; right:7%; top:50%; transform:translateY(-50%) rotate(-8deg); width:210px; height:210px; opacity:.13; }
.shop-gem svg { fill:#8ae37d; width:100%; height:100%; }
.shop-note { margin-top:18px; color:#8f9a93; font-size:13px; }

.ban-toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.ban-tabs { display:flex; flex-wrap:wrap; gap:6px; padding:5px; border:1px solid var(--line); border-radius:15px; background:#0d120f; }
.ban-tabs button { border:0; cursor:pointer; background:transparent; color:#aeb8b1; padding:9px 13px; border-radius:10px; font-weight:800; }
.ban-tabs button.active { background:#eef3ef; color:#0c110e; }
.ban-search { display:flex; flex:1; min-width:260px; }
.ban-search input {
  width:100%; background:#0d120f; color:#fff; border:1px solid var(--line); border-radius:14px 0 0 14px; padding:12px 14px; outline:none;
}
.ban-search button { border:0; cursor:pointer; background:#eef3ef; color:#0c110e; border-radius:0 14px 14px 0; padding:0 16px; font-weight:900; }
.ban-meta { color:var(--muted); font-size:13px; margin:14px 2px; }
.punishments { display:grid; gap:10px; }
.punishment {
  border:1px solid var(--line); border-radius:18px; background:#111714; padding:16px 18px;
  display:grid; grid-template-columns:minmax(145px,.75fr) minmax(220px,1.45fr) minmax(130px,.65fr) auto; gap:16px; align-items:center;
}
.pun-player { font-weight:900; }
.pun-reason { color:#d8ded9; font-size:14px; }
.pun-staff,.pun-date { color:#8f9a93; font-size:12px; }
.pun-status { display:inline-flex; align-items:center; justify-content:center; min-width:82px; padding:7px 9px; border-radius:10px; font-size:11px; font-weight:900; }
.pun-status.active { color:#ffb4b4; background:rgba(232,85,85,.09); border:1px solid rgba(232,85,85,.22); }
.pun-status.inactive { color:#a9c4b0; background:rgba(126,166,137,.08); border:1px solid rgba(126,166,137,.18); }
.ban-pagination { display:flex; justify-content:center; align-items:center; gap:12px; margin-top:22px; }
.ban-pagination button { border:1px solid var(--line); background:#111714; color:#fff; border-radius:11px; padding:9px 13px; cursor:pointer; }
.ban-pagination button:disabled { opacity:.35; cursor:not-allowed; }
.ban-error { padding:18px; border:1px solid rgba(232,85,85,.24); background:rgba(232,85,85,.07); border-radius:16px; color:#ffc0c0; }

@media(max-width:920px){
  .rule-grid{grid-template-columns:1fr}
  .team-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .punishment{grid-template-columns:1fr auto}
  .pun-reason,.pun-staff{grid-column:1/-1}
  .shop-gem{opacity:.07}
}
@media(max-width:600px){
  .team-cards{grid-template-columns:1fr 1fr}
  .staff-card{min-height:225px;padding:15px}
  .staff-render{height:160px}
  .rule-switch{top:86px}
  .shop-hero-card{padding:28px 24px}
  .shop-gem{display:none}
}


/* ===== v5: auth, account, dynamic A-Team, sequential rules ===== */

.login-btn {
  display:inline-flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
}
.login-btn .nav-avatar {
  width:25px;
  height:25px;
  border-radius:7px;
  image-rendering:auto;
}

.auth-shell {
  width:min(520px,100%);
  margin:0 auto;
}
.auth-card {
  border:1px solid var(--line);
  border-radius:28px;
  background:
    radial-gradient(circle at 100% 0, rgba(118,213,111,.10), transparent 20rem),
    linear-gradient(180deg,#141a17,#0e1311);
  padding:32px;
  box-shadow:var(--shadow);
}
.auth-card h2 {
  font-size:34px;
  letter-spacing:-.045em;
  margin:0 0 8px;
}
.auth-card > p {
  color:var(--muted);
  margin:0 0 25px;
  line-height:1.65;
}
.auth-form {
  display:grid;
  gap:14px;
}
.auth-field {
  display:grid;
  gap:7px;
}
.auth-field label {
  color:#c7d0ca;
  font-size:13px;
  font-weight:800;
}
.auth-field input {
  width:100%;
  border:1px solid var(--line);
  background:#090d0b;
  color:#fff;
  border-radius:14px;
  padding:13px 14px;
  outline:none;
  transition:.2s ease;
}
.auth-field input:focus {
  border-color:rgba(145,229,132,.45);
  box-shadow:0 0 0 3px rgba(145,229,132,.07);
}
.auth-submit {
  margin-top:4px;
  border:0;
  cursor:pointer;
  background:linear-gradient(135deg,#8edc7b,#68c861);
  color:#0a0d0b;
  border-radius:14px;
  min-height:48px;
  font-weight:900;
}
.auth-submit:disabled { opacity:.55; cursor:not-allowed; }
.auth-help {
  margin-top:18px;
  padding:16px;
  border:1px solid var(--line);
  background:#0b100d;
  border-radius:16px;
  color:#aab4ad;
  font-size:13px;
  line-height:1.6;
}
.auth-help strong { color:#eef2ef; }
.auth-message {
  display:none;
  margin-top:14px;
  padding:12px 14px;
  border-radius:13px;
  font-size:13px;
}
.auth-message.show { display:block; }
.auth-message.error {
  border:1px solid rgba(232,85,85,.26);
  background:rgba(232,85,85,.07);
  color:#ffc2c2;
}
.auth-message.ok {
  border:1px solid rgba(118,213,111,.26);
  background:rgba(118,213,111,.07);
  color:#b8efb0;
}

.account-loading {
  min-height:240px;
  display:grid;
  place-items:center;
  color:var(--muted);
}
.account-wrap { display:none; }
.account-wrap.ready { display:block; }
.account-top {
  position:relative;
  min-height:330px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:30px;
  padding:38px;
  background:
    radial-gradient(circle at 85% 20%, rgba(118,213,111,.14), transparent 24rem),
    linear-gradient(135deg,#151d18,#0d120f 66%);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.account-top::before {
  content:"";
  position:absolute;
  inset:auto -100px -180px auto;
  width:450px;height:450px;
  border-radius:50%;
  background:rgba(118,213,111,.08);
  filter:blur(70px);
}
.account-skin {
  position:absolute;
  right:7%;
  bottom:-8px;
  height:315px;
  max-width:230px;
  object-fit:contain;
  filter:drop-shadow(0 24px 25px rgba(0,0,0,.48));
}
.account-status {
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  padding:7px 10px;
  border:1px solid var(--line);
  background:rgba(4,8,5,.55);
  border-radius:11px;
  font-size:12px;
  font-weight:850;
  margin-bottom:10px;
}
.account-status .dot.offline {
  background:#7f8a82;
  box-shadow:none;
}
.account-top h2 {
  position:relative;
  z-index:2;
  margin:0;
  max-width:70%;
  font-size:clamp(44px,7vw,78px);
  line-height:.95;
  letter-spacing:-.06em;
}
.account-rank {
  position:relative;
  z-index:2;
  margin-top:10px;
  color:var(--rank-color,#aab4ad);
  font-weight:900;
}
.account-actions {
  display:flex;
  gap:9px;
  position:absolute;
  left:38px;
  top:35px;
  z-index:4;
}
.account-actions button {
  border:1px solid var(--line);
  color:#fff;
  background:rgba(8,12,9,.68);
  border-radius:12px;
  padding:9px 12px;
  cursor:pointer;
  font-weight:800;
}
.account-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}
.account-card {
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  background:linear-gradient(180deg,#141a17,#0f1412);
}
.account-card .label {
  color:#8e9992;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:10px;
  font-weight:900;
}
.account-card .value {
  margin-top:7px;
  font-size:19px;
  font-weight:900;
}
.account-card .sub {
  margin-top:5px;
  color:#8e9992;
  font-size:12px;
}
.account-section {
  margin-top:34px;
}
.account-section-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:15px;
  margin-bottom:13px;
}
.account-section-head h3 {
  font-size:29px;
  margin:0;
  letter-spacing:-.035em;
}
.account-section-head span {
  color:var(--muted);
  font-size:13px;
}
.profile-punishments { display:grid; gap:10px; }

.team-status {
  min-height:170px;
  display:grid;
  place-items:center;
  color:var(--muted);
  border:1px dashed var(--line);
  border-radius:20px;
}
.staff-card.featured {
  grid-column:span 2;
  min-height:300px;
  border-color:rgba(255,0,88,.30);
  background:
    radial-gradient(circle at 80% 10%, rgba(255,0,88,.13), transparent 16rem),
    linear-gradient(180deg,#191716,#0e1210);
}
.staff-card.featured .staff-render {
  height:230px;
  left:65%;
}
.staff-card.featured strong {
  font-size:25px;
}
.staff-card.featured .role {
  font-size:12px;
}
.staff-card.featured .main-admin {
  display:inline-flex;
  width:max-content;
  margin-top:7px;
  padding:5px 8px;
  border:1px solid rgba(255,0,88,.25);
  border-radius:9px;
  color:#ff9abb;
  background:rgba(255,0,88,.06);
}
.team-group[data-team-key="owner"] .staff-card {
  min-height:285px;
}

.rule-linear {
  display:grid;
  gap:10px;
}
.rule-linear .rule-card {
  grid-template-columns:48px 1fr;
}
.rule-divider {
  margin:31px 0 13px;
  display:flex;
  align-items:center;
  gap:12px;
}
.rule-divider h2 {
  margin:0;
  font-size:24px;
  letter-spacing:-.035em;
}
.rule-divider::after {
  content:"";
  height:1px;
  flex:1;
  background:linear-gradient(90deg,var(--line),transparent);
}
.rule-card.child {
  margin-left:52px;
  background:#0c110e;
}
.rule-card.child .rule-no {
  border-color:rgba(255,144,186,.23);
  background:rgba(255,144,186,.06);
  color:#ffabd0;
}

@media(max-width:920px){
  .account-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .staff-card.featured{grid-column:1/-1}
}
@media(max-width:650px){
  .auth-card{padding:24px}
  .account-top{padding:28px;min-height:390px}
  .account-actions{top:22px;left:22px}
  .account-skin{height:240px;right:-6%;opacity:.45}
  .account-top h2{max-width:100%}
  .account-grid{grid-template-columns:1fr}
  .rule-card.child{margin-left:20px}
}


/* v5.1: ChatMod cards — keep skin clear of role/name */
.team-group[data-team-key="chatmod"] .staff-render {
  height: 158px;
  top: 16px;
}
.team-group[data-team-key="chatmod"] .staff-card {
  min-height: 250px;
}
.team-group[data-team-key="chatmod"] .role,
.team-group[data-team-key="chatmod"] strong {
  position: relative;
  z-index: 3;
}
.team-group[data-team-key="chatmod"] .staff-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 82px;
  background: linear-gradient(180deg, transparent, rgba(9,13,11,.94) 52%, rgba(9,13,11,1));
  pointer-events: none;
}


/* ===== v5.3 legal pages, shop terms, 404 ===== */
.legal-intro {
  max-width: 820px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 30px;
}
.legal-meta {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 0 0 28px;
}
.legal-meta span {
  border:1px solid var(--line);
  background:#0d1210;
  border-radius:999px;
  padding:7px 10px;
  color:#9ba69f;
  font-size:12px;
  font-weight:800;
}
.legal-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  gap:34px;
  align-items:start;
}
.legal-content {
  display:grid;
  gap:14px;
}
.legal-card {
  border:1px solid var(--line);
  background:linear-gradient(180deg,#141a17,#0e1311);
  border-radius:20px;
  padding:23px;
}
.legal-card h2 {
  margin:0 0 10px;
  font-size:22px;
  letter-spacing:-.025em;
}
.legal-card p,
.legal-card li {
  color:#a8b2ac;
  line-height:1.72;
  font-size:14px;
}
.legal-card p:last-child { margin-bottom:0; }
.legal-card ul {
  margin:10px 0 0;
  padding-left:20px;
}
.legal-card strong { color:#f0f4f1; }
.legal-card.highlight {
  border-color:rgba(145,229,132,.26);
  background:
    radial-gradient(circle at 100% 0,rgba(118,213,111,.08),transparent 22rem),
    linear-gradient(180deg,#151c18,#0f1412);
}
.legal-card.warning {
  border-color:rgba(255,144,186,.22);
  background:
    radial-gradient(circle at 100% 0,rgba(255,144,186,.06),transparent 20rem),
    linear-gradient(180deg,#171617,#0f1210);
}
.legal-side {
  position:sticky;
  top:96px;
  border:1px solid var(--line);
  background:#0d1210;
  border-radius:18px;
  padding:16px;
}
.legal-side strong {
  display:block;
  margin:0 0 10px;
  font-size:13px;
}
.legal-side a {
  display:block;
  padding:8px 9px;
  border-radius:9px;
  color:#98a39c;
  font-size:13px;
}
.legal-side a:hover { background:#141b17; color:#fff; }
.shop-terms-box {
  margin-top:16px;
  border:1px solid rgba(145,229,132,.22);
  background:rgba(118,213,111,.055);
  border-radius:16px;
  padding:16px 17px;
  color:#aeb8b1;
  line-height:1.6;
  font-size:13px;
}
.shop-terms-box strong { color:#eef5ef; }
.shop-terms-box a { color:#a7e59e; text-decoration:underline; text-underline-offset:3px; }
.not-found {
  min-height:58vh;
  display:grid;
  place-items:center;
  padding:70px 0;
  text-align:center;
}
.not-found-card {
  width:min(720px,100%);
  border:1px solid var(--line);
  border-radius:30px;
  padding:54px 28px;
  background:
    radial-gradient(circle at 50% 0,rgba(118,213,111,.11),transparent 22rem),
    linear-gradient(180deg,#141a17,#0d1210);
  box-shadow:var(--shadow);
}
.not-found-code {
  font-size:clamp(80px,18vw,160px);
  font-weight:1000;
  line-height:.8;
  letter-spacing:-.08em;
  color:#eaf3ec;
  opacity:.96;
}
.not-found-card h1 {
  margin:26px 0 9px;
  font-size:34px;
  letter-spacing:-.04em;
}
.not-found-card p {
  max-width:520px;
  margin:0 auto 24px;
  color:var(--muted);
  line-height:1.7;
}
.not-found-actions {
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.not-found-actions a {
  border:1px solid var(--line);
  border-radius:13px;
  padding:11px 15px;
  font-weight:850;
  background:#111713;
}
.not-found-actions a:first-child {
  background:linear-gradient(135deg,#8edc7b,#68c861);
  color:#0a0d0b;
  border-color:transparent;
}
.footer-links .footer-legal { color:#839087; }
@media(max-width:820px){
  .legal-layout{grid-template-columns:1fr}
  .legal-side{position:static;order:-1}
}

.footer-mail{display:inline-flex;align-items:center;gap:6px}
.shop-hero{padding:110px 0 52px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 82% 20%,rgba(118,213,111,.13),transparent 28rem),#0a0e0c}
.shop-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:52px;align-items:center}
.shop-hero h1{margin:10px 0 18px;max-width:860px;font-size:clamp(48px,6vw,82px);line-height:.96;letter-spacing:-.065em}.shop-hero h1 span{color:#8ede80}
.shop-hero p{max-width:700px;color:var(--muted);line-height:1.75;font-size:16px}.eyebrow{display:inline-block;color:#8ede80;font-size:11px;font-weight:950;letter-spacing:.18em}
.shop-preview{position:relative;overflow:hidden;min-height:290px;border:1px solid var(--line);border-radius:30px;background:linear-gradient(145deg,#141c17,#0b100d);display:flex;flex-direction:column;justify-content:flex-end;padding:28px;box-shadow:var(--shadow)}
.shop-preview-glow{position:absolute;width:260px;height:260px;right:-65px;top:-70px;border-radius:50%;background:rgba(118,213,111,.14);filter:blur(32px)}
.shop-preview-cube{position:absolute;top:34px;right:42px;width:118px;height:118px;display:grid;place-items:center;border-radius:24px;transform:rotate(8deg);border:1px solid rgba(255,255,255,.10);background:linear-gradient(135deg,rgba(142,222,128,.23),rgba(91,121,84,.07)),#101611;color:#b9efaf;font-weight:1000;font-size:35px;letter-spacing:-.08em;box-shadow:0 20px 45px rgba(0,0,0,.38)}
.shop-preview-copy{position:relative;z-index:2;display:grid;gap:5px}.shop-preview-copy strong{font-size:25px;letter-spacing:-.04em}.shop-preview-copy span{color:var(--muted);font-size:13px;line-height:1.55}
.shop-main{padding:36px 0 88px}.shop-note{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 20px;border:1px solid rgba(118,213,111,.17);border-radius:18px;background:rgba(118,213,111,.045);margin-bottom:24px}
.shop-note strong{display:block;font-size:15px}.shop-note p{margin:4px 0 0;color:var(--muted);font-size:13px}.shop-note-pill{flex:0 0 auto;border:1px solid rgba(118,213,111,.22);background:rgba(118,213,111,.08);color:#a9e7a2;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:900}
.rank-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch}.rank-card{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:590px;padding:23px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,#141a17,#0d1210);transition:transform .22s ease,border-color .22s ease}.rank-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.14)}.rank-card.featured{border-color:rgba(118,213,111,.30);box-shadow:0 18px 65px rgba(80,177,73,.08)}
.rank-popular{position:absolute;right:16px;top:15px;padding:5px 8px;border-radius:999px;background:rgba(118,213,111,.11);border:1px solid rgba(118,213,111,.23);color:#b6ecae;font-size:9px;font-weight:950;letter-spacing:.07em;text-transform:uppercase}
.rank-kicker{display:block;min-height:20px;color:#87928b;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.rank-card h2{margin:8px 0 4px;font-size:34px;letter-spacing:-.05em;color:var(--rank-accent,#fff)}.rank-price{font-size:25px;font-weight:950;color:#eef3ef}.rank-card-top p{min-height:68px;color:var(--muted);font-size:13px;line-height:1.55;margin:13px 0 0}
.rank-features{list-style:none;padding:17px 0 20px;margin:16px 0 0;border-top:1px solid var(--line);display:grid;gap:10px;flex:1}.rank-features li{position:relative;padding-left:20px;color:#bec7c1;font-size:12px;line-height:1.45}.rank-features li::before{content:"✓";position:absolute;left:0;color:#83d778;font-weight:1000}
.rank-buy{width:100%;border:1px solid var(--line);border-radius:14px;padding:12px 13px;background:#0a0e0c;color:#d8dfda;display:grid;gap:2px;cursor:not-allowed;text-align:left}.rank-buy span{font-weight:900;font-size:13px}.rank-buy small{color:#7f8a83;font-size:10px}
.rank-vip{--rank-accent:#76d56f}.rank-vipplus{--rank-accent:#78d9d2}.rank-premium{--rank-accent:#cf8cff}.rank-sponzor{--rank-accent:#ffd15c}
.shop-coupon-preview{margin-top:34px;padding:28px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,#131815,#0d1210);display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.65fr);gap:30px;align-items:center}.shop-coupon-preview h2{margin:8px 0 8px;font-size:31px;letter-spacing:-.04em}.shop-coupon-preview p{color:var(--muted);margin:0;line-height:1.6}.coupon-box{display:flex;gap:8px;padding:8px;border:1px solid var(--line);border-radius:16px;background:#090d0b}.coupon-box input{flex:1;min-width:0;border:0;background:transparent;color:#fff;padding:0 10px;outline:none}.coupon-box button{border:1px solid rgba(118,213,111,.18);border-radius:11px;background:rgba(118,213,111,.07);color:#87938a;padding:10px 13px;font-weight:850}
.shop-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:34px}.shop-info-grid article{border:1px solid var(--line);border-radius:20px;padding:21px;background:#0e1311}.shop-info-grid article>span{color:#79cb70;font-size:11px;font-weight:950}.shop-info-grid h3{margin:8px 0 7px;font-size:19px}.shop-info-grid p{margin:0;color:var(--muted);line-height:1.6;font-size:12px}
@media(max-width:1100px){.rank-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rank-card{min-height:530px}}@media(max-width:800px){.shop-hero-grid,.shop-coupon-preview{grid-template-columns:1fr}.shop-preview{min-height:240px}.shop-info-grid{grid-template-columns:1fr}}@media(max-width:620px){.shop-hero{padding-top:88px}.rank-grid{grid-template-columns:1fr}.rank-card{min-height:auto}.rank-card-top p{min-height:auto}.shop-note{align-items:flex-start}.coupon-box{flex-direction:column}.coupon-box button{width:100%}}


/* ===== v5.6 polish ===== */

.shop-preview-logo {
  position:absolute;
  top:26px;
  right:34px;
  width:138px;
  height:138px;
  display:grid;
  place-items:center;
  z-index:2;
  transform:rotate(4deg);
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.36));
}
.shop-preview-logo img {
  width:100%;
  height:100%;
  object-fit:contain;
}

.shop-auto-delivery {
  margin-top:34px;
  display:flex;
  align-items:center;
  gap:15px;
  padding:20px 22px;
  border:1px solid rgba(118,213,111,.18);
  border-radius:20px;
  background:rgba(118,213,111,.045);
}
.shop-auto-icon {
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#9be890;
  border:1px solid rgba(118,213,111,.22);
  background:rgba(118,213,111,.08);
  font-weight:1000;
}
.shop-auto-delivery strong {
  display:block;
  font-size:15px;
}
.shop-auto-delivery p {
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}

.rank-buy {
  text-align:center;
  min-height:45px;
  place-items:center;
}
.rank-buy span { font-size:13px; }

.footer-mail-icon {
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  padding:2px;
  display:inline-grid;
  place-items:center;
  cursor:pointer;
  transition:color .2s ease,transform .2s ease;
}
.footer-mail-icon:hover {
  color:#fff;
  transform:translateY(-1px);
}
.footer-mail-icon svg {
  width:18px;
  height:18px;
  fill:currentColor;
}

.mail-modal {
  position:fixed;
  inset:0;
  z-index:1500;
  display:none;
  place-items:center;
  padding:20px;
}
.mail-modal.open { display:grid; }
.mail-modal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(2,5,3,.79);
  backdrop-filter:blur(9px);
}
.mail-dialog {
  position:relative;
  z-index:1;
  width:min(500px,100%);
  padding:28px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
  background:
    radial-gradient(circle at 90% 0,rgba(118,213,111,.10),transparent 17rem),
    linear-gradient(180deg,#151b18,#0c110f);
  box-shadow:0 30px 90px rgba(0,0,0,.58);
}
.mail-dialog-close {
  position:absolute;
  top:14px;
  right:14px;
  width:37px;
  height:37px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#0a0f0c;
  color:#b7c0ba;
  cursor:pointer;
  font-size:23px;
}
.mail-dialog-icon {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  margin-bottom:15px;
  border-radius:14px;
  color:#9be890;
  border:1px solid rgba(118,213,111,.20);
  background:rgba(118,213,111,.07);
}
.mail-dialog-icon svg {
  width:22px;
  height:22px;
  fill:currentColor;
}
.mail-dialog h2 {
  margin:0;
  font-size:30px;
  letter-spacing:-.04em;
}
.mail-dialog > p {
  margin:7px 0 21px;
  color:var(--muted);
  font-size:13px;
}
.mail-form {
  display:grid;
  gap:14px;
}
.mail-form label {
  display:grid;
  gap:7px;
}
.mail-form label span {
  font-size:12px;
  font-weight:850;
  color:#c9d1cc;
}
.mail-form input,
.mail-form textarea {
  width:100%;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#090d0b;
  color:#f4f6f5;
  font:inherit;
  outline:none;
}
.mail-form input:focus,
.mail-form textarea:focus {
  border-color:rgba(118,213,111,.40);
  box-shadow:0 0 0 3px rgba(118,213,111,.055);
}
.mail-form textarea {
  min-height:135px;
  resize:vertical;
}
.mail-submit {
  min-height:45px;
  border:0;
  border-radius:13px;
  cursor:pointer;
  background:linear-gradient(135deg,#91df82,#67c75f);
  color:#09100a;
  font-weight:950;
}
body.mail-modal-open { overflow:hidden; }

@media(max-width:620px){
  .mail-dialog{padding:23px}
  .shop-preview-logo{width:112px;height:112px;right:22px}
}


/* ===== v5.7 contact sending ===== */
.mail-honeypot {
  position:absolute !important;
  left:-10000px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}
.mail-feedback {
  min-height:18px;
  margin-top:-3px;
  font-size:12px;
  color:#9da8a1;
}
.mail-feedback.success { color:#9be890; }
.mail-feedback.error { color:#ffadad; }
.mail-submit:disabled {
  opacity:.58;
  cursor:not-allowed;
}


/* ===== v5.8 Minecraft details ===== */

/* Rules — subtle nature */
.rules-hero {
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.rules-hero::after {
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:74px;
  z-index:-1;
  background:
    linear-gradient(180deg,transparent,rgba(41,76,37,.12)),
    linear-gradient(180deg,transparent,rgba(0,0,0,.12));
  pointer-events:none;
}
.rules-hero .container {
  position:relative;
  z-index:3;
}
.rules-nature {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
}
.rules-bee {
  position:absolute;
  width:78px;
  height:78px;
  object-fit:contain;
  right:max(7vw,70px);
  top:36%;
  opacity:.88;
  filter:drop-shadow(0 8px 13px rgba(0,0,0,.32));
  animation:rulesBeeFloat 5.4s ease-in-out infinite;
}
.rules-grass {
  position:absolute;
  bottom:-5px;
  object-fit:contain;
  transform-origin:bottom center;
  filter:drop-shadow(0 -4px 8px rgba(0,0,0,.18));
}
.rules-grass-a {
  width:98px;
  left:8%;
  opacity:.60;
  animation:rulesGrassSwayA 5.8s ease-in-out infinite;
}
.rules-grass-b {
  width:62px;
  left:18%;
  opacity:.48;
  animation:rulesGrassSwayB 7s ease-in-out infinite;
}
.rules-grass-c {
  width:82px;
  right:4%;
  opacity:.50;
  animation:rulesGrassSwayB 6.4s ease-in-out -1.2s infinite;
}

@keyframes rulesBeeFloat {
  0%,100% { transform:translate(0,0) rotate(-2deg); }
  25% { transform:translate(-18px,-9px) rotate(2deg); }
  50% { transform:translate(-7px,8px) rotate(-1deg); }
  75% { transform:translate(10px,-5px) rotate(2deg); }
}
@keyframes rulesGrassSwayA {
  0%,100%{transform:rotate(-1deg)}
  50%{transform:rotate(2deg)}
}
@keyframes rulesGrassSwayB {
  0%,100%{transform:rotate(1deg)}
  50%{transform:rotate(-2deg)}
}

/* Banlist — understated deepslate */
.banlist-hero {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#080c0a;
}
.banlist-hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:url('/assets/decor/deepslate.webp');
  background-size:360px 360px;
  background-position:center;
  opacity:.12;
  filter:saturate(.35) contrast(1.1);
}
.banlist-hero::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 75% 15%,rgba(180,42,42,.055),transparent 28rem),
    linear-gradient(90deg,rgba(8,12,10,.92),rgba(8,12,10,.68),rgba(8,12,10,.90));
}

/* Homepage redstone */
.redstone-zone {
  padding:18px 0 72px;
}
.redstone-rig {
  min-height:190px;
  display:grid;
  grid-template-columns:minmax(210px,.65fr) minmax(520px,1.35fr);
  align-items:center;
  gap:38px;
  overflow:hidden;
  position:relative;
  padding:28px 32px;
  border:1px solid var(--line);
  border-radius:26px;
  background:
    radial-gradient(circle at 83% 50%,rgba(214,46,41,.055),transparent 24rem),
    linear-gradient(180deg,#121815,#0d1210);
}
.redstone-copy {
  display:grid;
  gap:5px;
}
.redstone-kicker {
  color:#a04a46;
  font-size:9px;
  font-weight:950;
  letter-spacing:.16em;
}
.redstone-copy strong {
  font-size:27px;
  letter-spacing:-.035em;
}
.redstone-copy small {
  color:var(--muted);
  font-size:12px;
}
.redstone-machine {
  position:relative;
  height:125px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:0;
  padding-bottom:18px;
}

/* stone button */
.mc-stone-button {
  position:relative;
  z-index:4;
  width:52px;
  height:30px;
  margin-right:10px;
  margin-bottom:4px;
  border:0;
  cursor:pointer;
  background:#8d8e8a;
  box-shadow:
    inset 0 0 0 4px #a8a9a5,
    inset 0 -7px 0 #70716e,
    0 6px 0 #3d403d,
    0 10px 18px rgba(0,0,0,.30);
  image-rendering:pixelated;
  transform:perspective(120px) rotateX(18deg);
  transition:transform .08s ease,box-shadow .08s ease;
}
.mc-stone-button::after {
  content:"";
  position:absolute;
  inset:7px 11px;
  border:2px solid rgba(255,255,255,.09);
}
.mc-stone-button:hover {
  filter:brightness(1.08);
}
.redstone-rig.active .mc-stone-button {
  transform:translateY(5px) perspective(120px) rotateX(18deg);
  box-shadow:
    inset 0 0 0 4px #9a9b97,
    inset 0 -3px 0 #686a67,
    0 2px 0 #3d403d;
}

/* redstone line */
.redstone-wire {
  width:205px;
  height:25px;
  display:flex;
  align-items:center;
  gap:4px;
  margin:0 4px 5px 0;
}
.redstone-wire span {
  flex:1;
  height:7px;
  background:#521513;
  border-radius:2px;
  box-shadow:0 0 0 2px rgba(0,0,0,.22);
  transition:background .08s linear,box-shadow .08s linear;
}
.redstone-rig.active .redstone-wire span {
  background:#e3322d;
  box-shadow:0 0 8px rgba(238,46,40,.65),0 0 0 2px rgba(0,0,0,.18);
}
.redstone-rig.active .redstone-wire span:nth-child(1){transition-delay:.08s}
.redstone-rig.active .redstone-wire span:nth-child(2){transition-delay:.16s}
.redstone-rig.active .redstone-wire span:nth-child(3){transition-delay:.24s}
.redstone-rig.active .redstone-wire span:nth-child(4){transition-delay:.32s}

/* piston */
.mc-piston {
  position:relative;
  width:80px;
  height:70px;
  margin-right:12px;
  margin-bottom:0;
}
.piston-body {
  position:absolute;
  left:0;
  bottom:0;
  width:58px;
  height:58px;
  background:
    linear-gradient(#7d7868 0 0) 50% 50%/62% 62% no-repeat,
    #98947d;
  border:6px solid #5c594d;
  box-shadow:inset 0 0 0 4px #aea98f;
}
.piston-head {
  position:absolute;
  left:47px;
  bottom:9px;
  width:25px;
  height:42px;
  background:#a9915f;
  border:5px solid #66583b;
  box-shadow:inset 0 0 0 3px #c2aa74;
  transition:transform .13s steps(2,end);
}
.redstone-rig.active .piston-head {
  animation:pistonPunch .48s steps(2,end) .40s 1;
}
@keyframes pistonPunch {
  0%,100%{transform:translateX(0)}
  35%,68%{transform:translateX(22px)}
}

/* dispenser */
.mc-dispenser {
  position:relative;
  z-index:3;
  width:69px;
  height:69px;
  margin-bottom:-1px;
  background:#747875;
  border:6px solid #4d514f;
  box-shadow:inset 0 0 0 4px #8b908d;
}
.dispenser-face {
  position:absolute;
  inset:9px;
  border:4px solid #343836;
  background:#5d625f;
}
.dispenser-face i {
  position:absolute;
  top:7px;
  width:8px;height:8px;
  background:#252826;
}
.dispenser-face i:first-child{left:7px}
.dispenser-face i:nth-child(2){right:7px}
.dispenser-face b {
  position:absolute;
  left:50%;
  bottom:8px;
  width:16px;height:9px;
  transform:translateX(-50%);
  background:#252826;
}
.redstone-rig.active .mc-dispenser {
  animation:dispenserFlash .32s steps(2,end) .80s 1;
}
@keyframes dispenserFlash {
  0%,100%{filter:none}
  50%{filter:brightness(1.5)}
}

/* firework */
.firework {
  position:absolute;
  right:4%;
  bottom:25px;
  width:90px;
  height:190px;
  pointer-events:none;
}
.rocket {
  position:absolute;
  left:42px;
  bottom:0;
  width:7px;
  height:28px;
  opacity:0;
  background:linear-gradient(#e34d41 0 45%,#f1d991 45% 68%,#a99763 68%);
  box-shadow:0 0 6px rgba(255,192,93,.25);
}
.redstone-rig.active .rocket {
  animation:rocketLaunch .75s cubic-bezier(.33,.03,.22,1) .88s 1 both;
}
@keyframes rocketLaunch {
  0%{opacity:0;transform:translateY(0)}
  12%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;transform:translateY(-135px)}
}
.firework-burst {
  position:absolute;
  left:45px;
  top:16px;
  width:1px;height:1px;
  opacity:0;
}
.firework-burst i {
  --a:0deg;
  position:absolute;
  width:5px;
  height:5px;
  border-radius:1px;
  background:#f4d15f;
  box-shadow:0 0 8px rgba(255,216,90,.72);
}
.firework-burst i:nth-child(2n){background:#74d96e}
.firework-burst i:nth-child(3n){background:#e65e57}
.redstone-rig.active .firework-burst {
  animation:burstVisible .55s ease 1.58s 1 both;
}
.redstone-rig.active .firework-burst i {
  animation:spark .55s ease-out 1.58s 1 both;
  transform:rotate(var(--a)) translateX(0);
}
@keyframes burstVisible {
  0%{opacity:0}
  10%,75%{opacity:1}
  100%{opacity:0}
}
@keyframes spark {
  from{transform:rotate(var(--a)) translateX(2px) scale(1)}
  to{transform:rotate(var(--a)) translateX(42px) scale(.3)}
}

.redstone-rig.cooldown .mc-stone-button {
  cursor:wait;
}

@media(max-width:900px){
  .redstone-rig{grid-template-columns:1fr;gap:18px}
  .redstone-machine{justify-content:flex-start;transform-origin:left center;transform:scale(.88)}
}
@media(max-width:620px){
  .rules-bee{width:62px;height:62px;right:4%;top:44%}
  .rules-grass-a{left:2%;width:78px}
  .rules-grass-b{left:18%;width:52px}
  .redstone-rig{padding:23px 20px;min-height:230px}
  .redstone-machine{width:620px;transform:scale(.68);margin-right:-210px}
}

/* Honor reduced-motion */
@media(prefers-reduced-motion:reduce){
  .rules-bee,.rules-grass{animation:none!important}
  .redstone-rig.active .piston-head,
  .redstone-rig.active .mc-dispenser,
  .redstone-rig.active .rocket,
  .redstone-rig.active .firework-burst,
  .redstone-rig.active .firework-burst i{animation:none!important}
}


/* ===== v5.8.1 cleanup ===== */

/* Rules: bee only */
.rules-grass,
.rules-hero::after {
  display:none !important;
}
.rules-bee {
  width:72px;
  height:72px;
  right:max(7vw,70px);
  top:38%;
  opacity:.82;
}

/* Hide the old large redstone presentation if cached markup ever appears */
.redstone-zone { display:none !important; }

/* Tiny easter egg, intentionally not a content section */
.redstone-peek-zone {
  padding:0 0 20px;
}
.redstone-peek-zone .container {
  display:flex;
  justify-content:flex-end;
}
.redstone-peek {
  position:relative;
  min-width:350px;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  padding-right:78px;
  opacity:.72;
  transition:opacity .2s ease;
}
.redstone-peek:hover {
  opacity:1;
}

.redstone-item {
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  position:relative;
}
.redstone-item img {
  width:56px;
  height:56px;
  object-fit:contain;
  image-rendering:pixelated;
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.28));
}

.redstone-button-item {
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  transform:scale(.78);
  transition:transform .09s ease, filter .15s ease;
}
.redstone-button-item:hover {
  transform:scale(.86);
  filter:brightness(1.12);
}
.redstone-peek.active .redstone-button-item {
  transform:scale(.72) translateY(4px);
}

.redstone-mini-wire {
  width:125px;
  display:flex;
  align-items:center;
  gap:4px;
  margin:0 1px;
}
.redstone-mini-wire span {
  flex:1;
  height:5px;
  border-radius:2px;
  background:#4b1513;
  box-shadow:0 1px 0 rgba(0,0,0,.35);
  transition:background .08s linear, box-shadow .08s linear;
}
.redstone-peek.active .redstone-mini-wire span {
  background:#f0322c;
  box-shadow:0 0 8px rgba(240,50,44,.62);
}
.redstone-peek.active .redstone-mini-wire span:nth-child(1){transition-delay:.08s}
.redstone-peek.active .redstone-mini-wire span:nth-child(2){transition-delay:.16s}
.redstone-peek.active .redstone-mini-wire span:nth-child(3){transition-delay:.24s}

.redstone-piston-item {
  transition:transform .12s steps(2,end);
}
.redstone-peek.active .redstone-piston-item {
  animation:realPistonNudge .48s steps(2,end) .34s 1;
}
@keyframes realPistonNudge {
  0%,100%{transform:translateX(0)}
  35%,70%{transform:translateX(12px)}
}

.redstone-dispenser-item {
  transition:filter .1s ease;
}
.redstone-peek.active .redstone-dispenser-item {
  animation:realDispenserFlash .28s steps(2,end) .72s 1;
}
@keyframes realDispenserFlash {
  0%,100%{filter:none}
  50%{filter:brightness(1.45)}
}

.redstone-rocket-wrap {
  position:absolute;
  right:2px;
  bottom:14px;
  width:70px;
  height:160px;
  pointer-events:none;
}
.redstone-rocket-img {
  position:absolute;
  left:18px;
  bottom:0;
  width:48px;
  height:48px;
  object-fit:contain;
  image-rendering:pixelated;
  opacity:0;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.28));
}
.redstone-peek.active .redstone-rocket-img {
  animation:realRocket .72s cubic-bezier(.30,.03,.20,1) .84s 1 both;
}
@keyframes realRocket {
  0%{opacity:0;transform:translateY(0) scale(.82)}
  10%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;transform:translateY(-112px) scale(.9)}
}

.redstone-sparks {
  position:absolute;
  left:43px;
  top:18px;
  width:1px;
  height:1px;
  opacity:0;
}
.redstone-sparks i {
  --a:0deg;
  position:absolute;
  width:4px;
  height:4px;
  background:#f4cf58;
  box-shadow:0 0 6px rgba(244,207,88,.8);
}
.redstone-sparks i:nth-child(2n){background:#78dc72}
.redstone-sparks i:nth-child(3n){background:#e45e58}
.redstone-peek.active .redstone-sparks {
  animation:realBurstVisible .50s ease 1.53s 1 both;
}
.redstone-peek.active .redstone-sparks i {
  animation:realSpark .50s ease-out 1.53s 1 both;
}
@keyframes realBurstVisible {
  0%{opacity:0}
  12%,75%{opacity:1}
  100%{opacity:0}
}
@keyframes realSpark {
  from{transform:rotate(var(--a)) translateX(2px) scale(1)}
  to{transform:rotate(var(--a)) translateX(34px) scale(.3)}
}

.redstone-peek.cooldown .redstone-button-item {
  cursor:wait;
}

@media(max-width:700px){
  .rules-bee{right:4%;width:60px;height:60px}
  .redstone-peek-zone .container{justify-content:center}
  .redstone-peek{
    min-width:315px;
    transform:scale(.88);
    transform-origin:center;
    padding-right:64px;
  }
  .redstone-mini-wire{width:105px}
  .redstone-item,.redstone-item img{width:50px;height:50px}
}

@media(prefers-reduced-motion:reduce){
  .redstone-peek.active .redstone-piston-item,
  .redstone-peek.active .redstone-dispenser-item,
  .redstone-peek.active .redstone-rocket-img,
  .redstone-peek.active .redstone-sparks,
  .redstone-peek.active .redstone-sparks i{
    animation:none!important;
  }
}


/* ===== v5.8.2 — real redstone mechanism ===== */

.redstone-v582 {
  min-width:440px;
  height:88px;
  padding-right:82px;
  gap:3px;
}

/* Disable previous simplified line/piston layout */
.redstone-v582 .redstone-mini-wire,
.redstone-v582 .redstone-piston-item {
  display:none !important;
}

/*
  This uses the actual vanilla redstone_dust_line0 texture.
  Minecraft tints this texture in-game according to power level;
  here the same texture acts as a mask and only its red tint changes.
*/
.vanilla-redstone-wire {
  display:flex;
  align-items:center;
  width:150px;
  height:38px;
  margin:0 5px 0 0;
}
.vanilla-redstone-wire span {
  width:38px;
  height:38px;
  margin-left:-1px;
  background:#641713;
  -webkit-mask-image:url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/redstone_dust_line0.png');
  mask-image:url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/redstone_dust_line0.png');
  -webkit-mask-size:38px 38px;
  mask-size:38px 38px;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  transform:rotate(90deg);
  image-rendering:pixelated;
  transition:background .08s linear,filter .08s linear;
}
.redstone-v582.active .vanilla-redstone-wire span {
  background:#ee322b;
  filter:drop-shadow(0 0 4px rgba(238,50,43,.72));
}
.redstone-v582.active .vanilla-redstone-wire span:nth-child(1){transition-delay:.06s}
.redstone-v582.active .vanilla-redstone-wire span:nth-child(2){transition-delay:.12s}
.redstone-v582.active .vanilla-redstone-wire span:nth-child(3){transition-delay:.18s}
.redstone-v582.active .vanilla-redstone-wire span:nth-child(4){transition-delay:.24s}

.redstone-mechanism {
  display:flex;
  align-items:center;
  position:relative;
  height:72px;
}

/* Actual Sticky Piston item render, rotated so the mechanism lies horizontally. */
.sticky-piston-real {
  position:relative;
  z-index:3;
  width:65px;
  height:65px;
  display:grid;
  place-items:center;
}
.sticky-piston-real img {
  width:62px;
  height:62px;
  object-fit:contain;
  image-rendering:pixelated;
  transform:rotate(90deg);
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.28));
}
.redstone-v582.active .sticky-piston-real {
  animation:stickyPistonBody .66s steps(2,end) .30s 1;
}
@keyframes stickyPistonBody {
  0%,100% { transform:translateX(0); }
  32%,72% { transform:translateX(8px); }
}

/* Real vanilla redstone_block texture. The piston pushes this next to the dispenser. */
.moving-redstone-block {
  position:relative;
  z-index:4;
  width:49px;
  height:49px;
  margin-left:-7px;
  margin-right:11px;
  transform:translateX(0);
}
.redstone-block-face {
  position:absolute;
  inset:0;
  background-image:url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/redstone_block.png');
  background-size:100% 100%;
  image-rendering:pixelated;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.04),
    0 7px 9px rgba(0,0,0,.30);
}
.redstone-v582.active .moving-redstone-block {
  animation:redstoneBlockPush 1.22s steps(3,end) .42s 1;
}
@keyframes redstoneBlockPush {
  0%   { transform:translateX(0); }
  28%  { transform:translateX(25px); }
  68%  { transform:translateX(25px); }
  100% { transform:translateX(0); }
}

.redstone-v582 .redstone-dispenser-item {
  z-index:2;
  margin-left:2px;
}

/* The dispenser only reacts once the redstone block reaches it. */
.redstone-v582.active .redstone-dispenser-item {
  animation:poweredDispenser .32s steps(2,end) .77s 1;
}
@keyframes poweredDispenser {
  0%,100% { filter:none; transform:scale(1); }
  50% { filter:brightness(1.45); transform:scale(1.035); }
}

/* Firework starts after the block powers the dispenser. */
.redstone-v582.active .redstone-rocket-img {
  animation:realRocket .72s cubic-bezier(.30,.03,.20,1) .96s 1 both;
}
.redstone-v582.active .redstone-sparks {
  animation:realBurstVisible .50s ease 1.65s 1 both;
}
.redstone-v582.active .redstone-sparks i {
  animation:realSpark .50s ease-out 1.65s 1 both;
}

@media(max-width:700px){
  .redstone-v582{
    min-width:390px;
    transform:scale(.80);
  }
  .vanilla-redstone-wire{
    width:132px;
  }
  .vanilla-redstone-wire span{
    width:34px;
    height:34px;
    -webkit-mask-size:34px 34px;
    mask-size:34px 34px;
  }
}

@media(prefers-reduced-motion:reduce){
  .redstone-v582.active .sticky-piston-real,
  .redstone-v582.active .moving-redstone-block,
  .redstone-v582.active .redstone-dispenser-item {
    animation:none!important;
  }
}


/* ===== v5.8.3 — proper sticky piston extension ===== */

/* Hide v5.8.2 pieces if cached classes remain */
.redstone-v583 .redstone-mechanism,
.redstone-v583 .sticky-piston-real,
.redstone-v583 .moving-redstone-block {
  display:none !important;
}

.redstone-v583 {
  min-width:470px;
  height:92px;
  padding-right:86px;
  gap:4px;
}

.redstone-v583 .vanilla-redstone-wire {
  width:150px;
}

/* Real vanilla redstone texture, off by default. */
.redstone-v583 .vanilla-redstone-wire span {
  background:#651613 !important;
  transition:background .06s linear,filter .06s linear !important;
}

/* Power propagates left -> right */
.redstone-v583.powered .vanilla-redstone-wire span {
  background:#f0332c !important;
  filter:drop-shadow(0 0 4px rgba(240,51,44,.7));
}
.redstone-v583.powered .vanilla-redstone-wire span:nth-child(1){transition-delay:.04s}
.redstone-v583.powered .vanilla-redstone-wire span:nth-child(2){transition-delay:.09s}
.redstone-v583.powered .vanilla-redstone-wire span:nth-child(3){transition-delay:.14s}
.redstone-v583.powered .vanilla-redstone-wire span:nth-child(4){transition-delay:.19s}

/*
  Side-view sticky piston:
  body does NOT move; rod, head and redstone block do.
*/
.piston-v583 {
  position:relative;
  width:150px;
  height:58px;
  flex:0 0 150px;
  margin-right:4px;
}

/* Piston body: actual vanilla piston_side texture */
.piston-base-v583 {
  position:absolute;
  left:0;
  top:5px;
  width:50px;
  height:50px;
  background-image:url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/piston_side.png');
  background-size:100% 100%;
  image-rendering:pixelated;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.20),
    0 7px 9px rgba(0,0,0,.26);
}

/* Dark inner slot on the side that the rod comes out of */
.piston-base-v583::after {
  content:"";
  position:absolute;
  right:-1px;
  top:12px;
  width:8px;
  height:26px;
  background:#3c3b32;
  box-shadow:inset 2px 0 0 rgba(255,255,255,.06);
}

/* Actual piston inner texture stretched only as the piston extends */
.piston-rod-v583 {
  position:absolute;
  left:44px;
  top:22px;
  width:8px;
  height:16px;
  z-index:2;
  background-image:url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/piston_inner.png');
  background-size:16px 16px;
  background-repeat:repeat-x;
  image-rendering:pixelated;
  transform-origin:left center;
  transition:width .16s steps(3,end);
}

/* Head slab is separate from the piston body */
.piston-head-v583 {
  position:absolute;
  z-index:4;
  left:47px;
  top:7px;
  width:17px;
  height:46px;
  background-image:url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/piston_side.png');
  background-size:46px 46px;
  background-position:center;
  image-rendering:pixelated;
  box-shadow:
    inset -2px 0 0 rgba(0,0,0,.22),
    0 5px 7px rgba(0,0,0,.20);
  transition:transform .16s steps(3,end);
}

/* Sticky green face on the front edge of the head */
.piston-head-green-v583 {
  position:absolute;
  right:-5px;
  top:2px;
  width:9px;
  height:42px;
  background-image:url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/piston_top_sticky.png');
  background-size:42px 42px;
  background-position:center;
  image-rendering:pixelated;
  border-left:2px solid rgba(0,0,0,.25);
}

/* The block starts touching the piston head */
.moving-redstone-block-v583 {
  position:absolute;
  z-index:5;
  left:64px;
  top:8px;
  width:44px;
  height:44px;
  transition:transform .16s steps(3,end);
}
.redstone-block-face-v583 {
  position:absolute;
  inset:0;
  background-image:url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/redstone_block.png');
  background-size:100% 100%;
  image-rendering:pixelated;
  box-shadow:0 6px 8px rgba(0,0,0,.28);
}

/* Only head / rod / block extend. Base remains stationary. */
.redstone-v583.extended .piston-rod-v583 {
  width:34px;
}
.redstone-v583.extended .piston-head-v583,
.redstone-v583.extended .moving-redstone-block-v583 {
  transform:translateX(26px);
}

/* Dispenser is fixed after the piston mechanism */
.redstone-dispenser-v583 {
  z-index:2;
  margin-left:-28px;
}
.redstone-dispenser-v583 img {
  width:56px;
  height:56px;
}

/* A small pulse precisely when the pushed block powers the dispenser */
.redstone-v583.firing .redstone-dispenser-v583 {
  animation:v583DispenserPulse .28s steps(2,end) 1;
}
@keyframes v583DispenserPulse {
  0%,100%{filter:none;transform:scale(1)}
  50%{filter:brightness(1.48);transform:scale(1.035)}
}

/* Firework only starts after the block reaches the dispenser */
.redstone-v583.firing .redstone-rocket-img {
  animation:v583Rocket .72s cubic-bezier(.30,.03,.20,1) .04s 1 both;
}
@keyframes v583Rocket {
  0%{opacity:0;transform:translateY(0) scale(.82)}
  10%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;transform:translateY(-112px) scale(.9)}
}
.redstone-v583.firing .redstone-sparks {
  animation:v583BurstVisible .50s ease .72s 1 both;
}
.redstone-v583.firing .redstone-sparks i {
  animation:v583Spark .50s ease-out .72s 1 both;
}
@keyframes v583BurstVisible {
  0%{opacity:0}
  12%,75%{opacity:1}
  100%{opacity:0}
}
@keyframes v583Spark {
  from{transform:rotate(var(--a)) translateX(2px) scale(1)}
  to{transform:rotate(var(--a)) translateX(34px) scale(.3)}
}

@media(max-width:700px){
  .redstone-v583 {
    min-width:410px;
    transform:scale(.78);
  }
  .redstone-v583 .vanilla-redstone-wire {
    width:130px;
  }
}

@media(prefers-reduced-motion:reduce){
  .redstone-v583 .piston-rod-v583,
  .redstone-v583 .piston-head-v583,
  .redstone-v583 .moving-redstone-block-v583 {
    transition:none!important;
  }
  .redstone-v583.firing .redstone-dispenser-v583,
  .redstone-v583.firing .redstone-rocket-img,
  .redstone-v583.firing .redstone-sparks,
  .redstone-v583.firing .redstone-sparks i {
    animation:none!important;
  }
}


/* ===== v5.8.4 — clean functional redstone layout ===== */

/* Completely hide pieces from older redstone iterations if their styles survive. */
.redstone-v584 .vanilla-redstone-wire,
.redstone-v584 .piston-v583,
.redstone-v584 .redstone-mechanism,
.redstone-v584 .redstone-dispenser-v583,
.redstone-v584 .sticky-piston-real,
.redstone-v584 .moving-redstone-block,
.redstone-v584 .piston-v583,
.redstone-v584 .piston-base-v583,
.redstone-v584 .piston-head-v583,
.redstone-v584 .piston-rod-v583,
.redstone-v584 .moving-redstone-block-v583 {
  display:none !important;
}

.redstone-v584 {
  position:relative;
  min-width:540px;
  height:96px;
  padding-right:88px;
  gap:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

/* Small stone button on the left. */
.redstone-button-v584 {
  appearance:none;
  width:38px;
  height:38px;
  border:0;
  padding:0;
  margin-right:13px;
  display:grid;
  place-items:center;
  background:transparent;
  cursor:pointer;
  opacity:.82;
  transition:transform .08s ease,opacity .15s ease,filter .15s ease;
}
.redstone-button-v584 img {
  width:31px;
  height:31px;
  object-fit:contain;
  image-rendering:pixelated;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.25));
}
.redstone-button-v584:hover {
  opacity:1;
  transform:scale(1.06);
}
.redstone-v584.powered .redstone-button-v584 {
  transform:translateY(3px) scale(.94);
}

/*
  Actual vanilla redstone_dust_line0 texture.
  Minecraft itself tints this white source texture; here it is used as a mask,
  with off/on colors matching the two power states.
*/
.redstone-wire-v584 {
  width:177px;
  height:42px;
  margin-right:11px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.redstone-wire-v584 span {
  width:37px;
  height:37px;
  margin-left:-2px;
  background:#641713;
  -webkit-mask:url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/redstone_dust_line0.png') center/37px 37px no-repeat;
  mask:url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/redstone_dust_line0.png') center/37px 37px no-repeat;
  transform:rotate(90deg);
  image-rendering:pixelated;
  transition:background .055s linear,filter .055s linear;
}
.redstone-v584.powered .redstone-wire-v584 span {
  background:#ef332c;
  filter:drop-shadow(0 0 4px rgba(239,51,44,.68));
}
.redstone-v584.powered .redstone-wire-v584 span:nth-child(1){transition-delay:.03s}
.redstone-v584.powered .redstone-wire-v584 span:nth-child(2){transition-delay:.07s}
.redstone-v584.powered .redstone-wire-v584 span:nth-child(3){transition-delay:.11s}
.redstone-v584.powered .redstone-wire-v584 span:nth-child(4){transition-delay:.15s}
.redstone-v584.powered .redstone-wire-v584 span:nth-child(5){transition-delay:.19s}

/*
  One piston body + ONE moving piston head.
  The base texture is rotated so the piston visually faces RIGHT.
*/
.piston-machine-v584 {
  position:relative;
  width:166px;
  height:62px;
  flex:0 0 166px;
  margin-right:2px;
}

.piston-base-v584 {
  position:absolute;
  left:0;
  top:4px;
  width:54px;
  height:54px;
  overflow:hidden;
  z-index:4;
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.24));
}
.piston-base-texture-v584 {
  position:absolute;
  inset:0;
  background:url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/piston_side.png') center/100% 100% no-repeat;
  image-rendering:pixelated;
  transform:rotate(90deg);
}

/* The wooden piston rod is visible only between the body and the single head. */
.piston-rod-v584 {
  position:absolute;
  z-index:2;
  left:46px;
  top:23px;
  width:12px;
  height:17px;
  background:
    repeating-linear-gradient(
      90deg,
      #755b34 0 5px,
      #a17c46 5px 10px,
      #5c482c 10px 12px
    );
  border-top:3px solid #bbb9a5;
  border-bottom:3px solid #5a584e;
  box-sizing:border-box;
  transform-origin:left center;
  transition:width .16s steps(3,end);
}

/*
  Single sticky piston head.
  This is deliberately a narrow vertical plate: no duplicate second head.
*/
.piston-head-v584 {
  position:absolute;
  z-index:5;
  left:52px;
  top:7px;
  width:16px;
  height:48px;
  background:
    linear-gradient(90deg,#6b5737 0 26%,#9d804e 26% 65%,#5e4b30 65% 100%);
  border-top:4px solid #a9aa9e;
  border-bottom:4px solid #56584f;
  box-sizing:border-box;
  box-shadow:0 5px 7px rgba(0,0,0,.20);
  transition:transform .16s steps(3,end);
}
.sticky-face-v584 {
  position:absolute;
  right:-7px;
  top:2px;
  width:10px;
  height:36px;
  background:url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/piston_top_sticky.png') center/36px 36px no-repeat;
  image-rendering:pixelated;
  border-left:2px solid rgba(0,0,0,.26);
}

/* Real vanilla redstone block. */
.redstone-block-v584 {
  position:absolute;
  z-index:6;
  left:70px;
  top:7px;
  width:48px;
  height:48px;
  background:url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/redstone_block.png') center/100% 100% no-repeat;
  image-rendering:pixelated;
  box-shadow:0 7px 9px rgba(0,0,0,.27);
  transition:transform .16s steps(3,end);
}

/* Base never moves. Rod extends and the ONE head + redstone block move together. */
.redstone-v584.extended .piston-rod-v584 {
  width:39px;
}
.redstone-v584.extended .piston-head-v584,
.redstone-v584.extended .redstone-block-v584 {
  transform:translateX(27px);
}

/* Fixed dispenser, FRONT texture facing the viewer. */
.dispenser-v584 {
  position:relative;
  z-index:3;
  width:54px;
  height:54px;
  flex:0 0 54px;
  margin-left:-44px;
  background:url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/dispenser_front.png') center/100% 100% no-repeat;
  image-rendering:pixelated;
  box-shadow:0 7px 9px rgba(0,0,0,.26);
}
.redstone-v584.firing .dispenser-v584 {
  animation:v584DispenserPulse .27s steps(2,end) 1;
}
@keyframes v584DispenserPulse {
  0%,100%{filter:none;transform:scale(1)}
  50%{filter:brightness(1.5);transform:scale(1.035)}
}

/* Firework sits just above the front-facing dispenser. */
.redstone-v584 .redstone-rocket-v584 {
  right:0;
  bottom:18px;
}
.redstone-v584.firing .redstone-rocket-img {
  animation:v584Rocket .72s cubic-bezier(.30,.03,.20,1) .04s 1 both;
}
@keyframes v584Rocket {
  0%{opacity:0;transform:translateY(0) scale(.82)}
  10%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;transform:translateY(-112px) scale(.9)}
}
.redstone-v584.firing .redstone-sparks {
  animation:v584BurstVisible .50s ease .72s 1 both;
}
.redstone-v584.firing .redstone-sparks i {
  animation:v584Spark .50s ease-out .72s 1 both;
}
@keyframes v584BurstVisible {
  0%{opacity:0}
  12%,75%{opacity:1}
  100%{opacity:0}
}
@keyframes v584Spark {
  from{transform:rotate(var(--a)) translateX(2px) scale(1)}
  to{transform:rotate(var(--a)) translateX(34px) scale(.3)}
}

.redstone-v584.cooldown .redstone-button-v584 {
  cursor:wait;
}

@media(max-width:700px){
  .redstone-v584 {
    min-width:470px;
    transform:scale(.76);
    transform-origin:center right;
  }
}

@media(prefers-reduced-motion:reduce){
  .redstone-v584 .piston-rod-v584,
  .redstone-v584 .piston-head-v584,
  .redstone-v584 .redstone-block-v584 {
    transition:none!important;
  }
  .redstone-v584.firing .dispenser-v584,
  .redstone-v584.firing .redstone-rocket-img,
  .redstone-v584.firing .redstone-sparks,
  .redstone-v584.firing .redstone-sparks i {
    animation:none!important;
  }
}


/* ===== v5.8.5 — final redstone mechanics fix ===== */

/* Hide remnants from earlier iterations. */
.redstone-v585 .redstone-wire-v584,
.redstone-v585 .piston-machine-v584,
.redstone-v585 .dispenser-v584,
.redstone-v585 .redstone-rocket-v584,
.redstone-v585 .vanilla-redstone-wire,
.redstone-v585 .piston-v583,
.redstone-v585 .redstone-mechanism {
  display:none !important;
}

.redstone-v585 {
  position:relative;
  min-width:570px;
  height:105px;
  padding:0;
  gap:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  overflow:visible;
}

/* Button */
.redstone-button-v585 {
  appearance:none;
  width:38px;
  height:38px;
  border:0;
  padding:0;
  margin-right:12px;
  display:grid;
  place-items:center;
  background:transparent;
  cursor:pointer;
  opacity:.82;
  transition:transform .08s ease,opacity .15s ease;
}
.redstone-button-v585 img {
  width:30px;
  height:30px;
  object-fit:contain;
  image-rendering:pixelated;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.25));
}
.redstone-button-v585:hover {
  opacity:1;
  transform:scale(1.06);
}
.redstone-v585.powered .redstone-button-v585 {
  transform:translateY(3px) scale(.94);
}

/* Real vanilla redstone dust line texture, Minecraft-style tint for off/on */
.redstone-wire-v585 {
  width:180px;
  height:42px;
  margin-right:12px;
  display:flex;
  align-items:center;
}
.redstone-wire-v585 span {
  width:38px;
  height:38px;
  margin-left:-2px;
  background:#641713;
  -webkit-mask:url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/redstone_dust_line0.png') center/38px 38px no-repeat;
  mask:url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/redstone_dust_line0.png') center/38px 38px no-repeat;
  transform:rotate(90deg);
  image-rendering:pixelated;
  transition:background .055s linear,filter .055s linear;
}
.redstone-v585.powered .redstone-wire-v585 span {
  background:#ef332c;
  filter:drop-shadow(0 0 4px rgba(239,51,44,.68));
}
.redstone-v585.powered .redstone-wire-v585 span:nth-child(1){transition-delay:.03s}
.redstone-v585.powered .redstone-wire-v585 span:nth-child(2){transition-delay:.07s}
.redstone-v585.powered .redstone-wire-v585 span:nth-child(3){transition-delay:.11s}
.redstone-v585.powered .redstone-wire-v585 span:nth-child(4){transition-delay:.15s}
.redstone-v585.powered .redstone-wire-v585 span:nth-child(5){transition-delay:.19s}

/*
  MACHINE GEOMETRY
  ----------------
  Base starts at x=0 and NEVER moves.
  Retracted head is flush with the right side of the base.
  Redstone block is directly after the head.
  There is exactly one 54px "block" of empty space after the redstone block.
  Dispenser follows immediately after that gap.

  On extension, head + block move +54px, filling the gap and placing
  the redstone block directly adjacent to the dispenser.
*/
.piston-machine-v585 {
  position:relative;
  width:172px; /* initial assembly + exactly one block gap */
  height:62px;
  flex:0 0 172px;
}

/*
  Piston body deliberately uses piston_bottom as the stone body face.
  This texture has NO piston head in it, so there can never be a fake
  second head left behind when the real head extends.
*/
.piston-base-v585 {
  position:absolute;
  left:0;
  top:4px;
  width:54px;
  height:54px;
  z-index:4;
  background:
    url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/piston_bottom.png')
    center/100% 100% no-repeat;
  image-rendering:pixelated;
  box-shadow:0 7px 9px rgba(0,0,0,.25);
}
/* small wooden mechanical band at the output edge */
.piston-base-v585::after {
  content:"";
  position:absolute;
  right:0;
  top:5px;
  width:7px;
  height:44px;
  background:linear-gradient(90deg,#5c482c,#9e7b48 45%,#6f5634);
  border-left:2px solid rgba(0,0,0,.25);
}

/* Rod starts almost hidden inside the body. */
.piston-rod-v585 {
  position:absolute;
  z-index:3;
  left:48px;
  top:23px;
  width:9px;
  height:17px;
  background:
    repeating-linear-gradient(
      90deg,
      #755b34 0 6px,
      #a17c46 6px 12px,
      #5c482c 12px 15px
    );
  border-top:3px solid #b7b5a1;
  border-bottom:3px solid #56544b;
  box-sizing:border-box;
  transform-origin:left center;
  transition:width .17s steps(4,end);
}

/* Exactly ONE sticky piston head. */
.piston-head-v585 {
  position:absolute;
  z-index:5;
  left:52px;
  top:7px;
  width:16px;
  height:48px;
  background:linear-gradient(90deg,#675437 0 28%,#9d804d 28% 68%,#5e4b30 68%);
  border-top:4px solid #aaa99c;
  border-bottom:4px solid #55574e;
  box-sizing:border-box;
  box-shadow:0 5px 7px rgba(0,0,0,.20);
  transition:transform .17s steps(4,end);
}
.sticky-face-v585 {
  position:absolute;
  right:-7px;
  top:2px;
  width:10px;
  height:36px;
  background:
    url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/piston_top_sticky.png')
    center/36px 36px no-repeat;
  image-rendering:pixelated;
  border-left:2px solid rgba(0,0,0,.26);
}

/* Real vanilla redstone block; initially touching the head. */
.redstone-block-v585 {
  position:absolute;
  z-index:6;
  left:70px;
  top:7px;
  width:48px;
  height:48px;
  background:
    url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/redstone_block.png')
    center/100% 100% no-repeat;
  image-rendering:pixelated;
  box-shadow:0 7px 9px rgba(0,0,0,.27);
  transition:transform .17s steps(4,end);
}

/*
  Full Minecraft-block extension: 54px.
  Base stays exactly where it is.
*/
.redstone-v585.extended .piston-rod-v585 {
  width:63px;
}
.redstone-v585.extended .piston-head-v585,
.redstone-v585.extended .redstone-block-v585 {
  transform:translateX(54px);
}

/* Front-facing dispenser. No negative margins. */
.dispenser-v585 {
  position:relative;
  z-index:3;
  width:54px;
  height:54px;
  flex:0 0 54px;
  background:
    url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/dispenser_front.png')
    center/100% 100% no-repeat;
  image-rendering:pixelated;
  box-shadow:0 7px 9px rgba(0,0,0,.26);
}
.redstone-v585.firing .dispenser-v585 {
  animation:v585DispenserPulse .27s steps(2,end) 1;
}
@keyframes v585DispenserPulse {
  0%,100%{filter:none;transform:scale(1)}
  50%{filter:brightness(1.5);transform:scale(1.035)}
}

/*
  Firework origin lives INSIDE the dispenser.
  Its coordinate origin is the exact visual center of the dispenser hole.
*/
.firework-origin-v585 {
  position:absolute;
  left:50%;
  top:50%;
  width:1px;
  height:1px;
  overflow:visible;
  pointer-events:none;
  z-index:20;
}
.firework-rocket-v585 {
  position:absolute;
  left:0;
  top:0;
  width:31px;
  height:31px;
  object-fit:contain;
  image-rendering:pixelated;
  opacity:0;
  transform:translate(-50%,-50%);
  transform-origin:center;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.25));
}
.redstone-v585.firing .firework-rocket-v585 {
  animation:v585Rocket .78s cubic-bezier(.28,.02,.18,1) .03s 1 both;
}
@keyframes v585Rocket {
  0%{
    opacity:0;
    transform:translate(-50%,-50%) translateY(0) scale(.62);
  }
  10%{opacity:1}
  85%{opacity:1}
  100%{
    opacity:0;
    transform:translate(-50%,-50%) translateY(-105px) scale(.90);
  }
}

.firework-sparks-v585 {
  position:absolute;
  left:0;
  top:-105px;
  width:1px;
  height:1px;
  opacity:0;
}
.firework-sparks-v585 i {
  --a:0deg;
  position:absolute;
  width:4px;
  height:4px;
  background:#f4cf58;
  box-shadow:0 0 6px rgba(244,207,88,.8);
}
.firework-sparks-v585 i:nth-child(2n){background:#78dc72}
.firework-sparks-v585 i:nth-child(3n){background:#e45e58}

.redstone-v585.firing .firework-sparks-v585 {
  animation:v585BurstVisible .50s ease .78s 1 both;
}
.redstone-v585.firing .firework-sparks-v585 i {
  animation:v585Spark .50s ease-out .78s 1 both;
}
@keyframes v585BurstVisible {
  0%{opacity:0}
  12%,75%{opacity:1}
  100%{opacity:0}
}
@keyframes v585Spark {
  from{transform:rotate(var(--a)) translateX(2px) scale(1)}
  to{transform:rotate(var(--a)) translateX(34px) scale(.3)}
}

.redstone-v585.cooldown .redstone-button-v585 {
  cursor:wait;
}

@media(max-width:700px){
  .redstone-v585 {
    min-width:500px;
    transform:scale(.76);
    transform-origin:center right;
  }
}

@media(prefers-reduced-motion:reduce){
  .redstone-v585 .piston-rod-v585,
  .redstone-v585 .piston-head-v585,
  .redstone-v585 .redstone-block-v585 {
    transition:none!important;
  }
  .redstone-v585.firing .dispenser-v585,
  .redstone-v585.firing .firework-rocket-v585,
  .redstone-v585.firing .firework-sparks-v585,
  .redstone-v585.firing .firework-sparks-v585 i {
    animation:none!important;
  }
}


/* ===== v5.8.6 — piston + visible firework polish ===== */

/* Hide older redstone versions if their CSS still exists. */
.redstone-v586 .redstone-wire-v585,
.redstone-v586 .piston-machine-v585,
.redstone-v586 .dispenser-v585,
.redstone-v586 .firework-origin-v585,
.redstone-v586 .redstone-wire-v584,
.redstone-v586 .piston-machine-v584,
.redstone-v586 .dispenser-v584,
.redstone-v586 .vanilla-redstone-wire,
.redstone-v586 .piston-v583,
.redstone-v586 .redstone-mechanism {
  display:none !important;
}

.redstone-v586 {
  position:relative;
  min-width:570px;
  height:118px;
  padding:0;
  gap:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  overflow:visible;
}

/* Stone button */
.redstone-button-v586 {
  appearance:none;
  width:38px;
  height:38px;
  border:0;
  padding:0;
  margin-right:12px;
  display:grid;
  place-items:center;
  background:transparent;
  cursor:pointer;
  opacity:.82;
  transition:transform .08s ease,opacity .15s ease;
}
.redstone-button-v586 img {
  width:30px;
  height:30px;
  object-fit:contain;
  image-rendering:pixelated;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.25));
}
.redstone-button-v586:hover {
  opacity:1;
  transform:scale(1.06);
}
.redstone-v586.powered .redstone-button-v586 {
  transform:translateY(3px) scale(.94);
}

/* Vanilla redstone dust texture, tinted like Minecraft. */
.redstone-wire-v586 {
  width:180px;
  height:42px;
  margin-right:12px;
  display:flex;
  align-items:center;
}
.redstone-wire-v586 span {
  width:38px;
  height:38px;
  margin-left:-2px;
  background:#641713;
  -webkit-mask:url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/redstone_dust_line0.png') center/38px 38px no-repeat;
  mask:url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/redstone_dust_line0.png') center/38px 38px no-repeat;
  transform:rotate(90deg);
  image-rendering:pixelated;
  transition:background .055s linear,filter .055s linear;
}
.redstone-v586.powered .redstone-wire-v586 span {
  background:#ef332c;
  filter:drop-shadow(0 0 4px rgba(239,51,44,.68));
}
.redstone-v586.powered .redstone-wire-v586 span:nth-child(1){transition-delay:.03s}
.redstone-v586.powered .redstone-wire-v586 span:nth-child(2){transition-delay:.07s}
.redstone-v586.powered .redstone-wire-v586 span:nth-child(3){transition-delay:.11s}
.redstone-v586.powered .redstone-wire-v586 span:nth-child(4){transition-delay:.15s}
.redstone-v586.powered .redstone-wire-v586 span:nth-child(5){transition-delay:.19s}

/*
  PISTON
  Base stays still.
  Only rod + one sticky piston head + redstone block move.
  There is one Minecraft-block gap before dispenser.
*/
.piston-machine-v586 {
  position:relative;
  width:172px;
  height:62px;
  flex:0 0 172px;
}

/* Neutral stone body with no fake head texture. */
.piston-base-v586 {
  position:absolute;
  left:0;
  top:4px;
  width:54px;
  height:54px;
  z-index:4;
  background:
    url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/piston_bottom.png')
    center/100% 100% no-repeat;
  image-rendering:pixelated;
  box-shadow:0 7px 9px rgba(0,0,0,.25);
}
/* small wooden output collar only — not a piston head */
.piston-base-v586::after {
  content:"";
  position:absolute;
  right:0;
  top:7px;
  width:6px;
  height:40px;
  background:linear-gradient(90deg,#5d492d,#9b7948 45%,#675035);
  border-left:2px solid rgba(0,0,0,.24);
}

/* Visible wooden/metal rod */
.piston-rod-v586 {
  position:absolute;
  z-index:3;
  left:48px;
  top:25px;
  width:9px;
  height:12px;
  background:
    repeating-linear-gradient(
      90deg,
      #735a35 0 6px,
      #a17d48 6px 12px,
      #5d482d 12px 15px
    );
  border-top:2px solid #b9b7a3;
  border-bottom:2px solid #57554c;
  box-sizing:border-box;
  transform-origin:left center;
  transition:width .17s steps(4,end);
}

/*
  ONE clean sticky piston head.
  Uses piston_top_sticky itself instead of combining multiple visual layers.
*/
.piston-head-v586 {
  position:absolute;
  z-index:5;
  left:52px;
  top:9px;
  width:14px;
  height:44px;
  background:
    url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/piston_top_sticky.png')
    center/44px 44px no-repeat;
  image-rendering:pixelated;
  border-left:3px solid #71603e;
  border-right:3px solid #4f432c;
  box-shadow:0 5px 7px rgba(0,0,0,.20);
  box-sizing:border-box;
  transition:transform .17s steps(4,end);
}

/* Redstone block initially touches the single piston head. */
.redstone-block-v586 {
  position:absolute;
  z-index:6;
  left:70px;
  top:7px;
  width:48px;
  height:48px;
  background:
    url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/redstone_block.png')
    center/100% 100% no-repeat;
  image-rendering:pixelated;
  box-shadow:0 7px 9px rgba(0,0,0,.27);
  transition:transform .17s steps(4,end);
}

/* Extend exactly one block. */
.redstone-v586.extended .piston-rod-v586 {
  width:63px;
}
.redstone-v586.extended .piston-head-v586,
.redstone-v586.extended .redstone-block-v586 {
  transform:translateX(54px);
}

/* Front-facing dispenser with one full block gap before it while retracted. */
.dispenser-v586 {
  position:relative;
  z-index:3;
  width:54px;
  height:54px;
  flex:0 0 54px;
  overflow:visible !important;
  background:
    url('https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.8/blocks/dispenser_front.png')
    center/100% 100% no-repeat;
  image-rendering:pixelated;
  box-shadow:0 7px 9px rgba(0,0,0,.26);
}
.redstone-v586.firing .dispenser-v586 {
  animation:v586DispenserPulse .27s steps(2,end) 1;
}
@keyframes v586DispenserPulse {
  0%,100%{filter:none;transform:scale(1)}
  50%{filter:brightness(1.5);transform:scale(1.035)}
}

/*
  Launch point is exactly the center of the front-facing dispenser hole.
  z-index puts the rocket ABOVE the dispenser so the rocket is visible from frame 1.
*/
.firework-launch-v586 {
  position:absolute;
  left:50%;
  top:50%;
  width:1px;
  height:1px;
  overflow:visible;
  pointer-events:none;
  z-index:50;
}

.firework-rocket-v586 {
  position:absolute;
  left:0;
  top:0;
  width:27px;
  height:27px;
  object-fit:contain;
  image-rendering:pixelated;
  opacity:0;
  transform:translate(-50%,-50%);
  transform-origin:center;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.28));
}

.redstone-v586.firing .firework-rocket-v586 {
  animation:v586RocketVisible .84s linear .02s 1 both;
}

@keyframes v586RocketVisible {
  0% {
    opacity:1;
    transform:translate(-50%,-50%) translateY(0) scale(.72);
  }
  12% {
    opacity:1;
    transform:translate(-50%,-50%) translateY(-12px) scale(.78);
  }
  45% {
    opacity:1;
    transform:translate(-50%,-50%) translateY(-50px) scale(.84);
  }
  88% {
    opacity:1;
    transform:translate(-50%,-50%) translateY(-100px) scale(.90);
  }
  100% {
    opacity:0;
    transform:translate(-50%,-50%) translateY(-112px) scale(.92);
  }
}

/* Burst location at the end of the visible rocket path. */
.firework-sparks-v586 {
  position:absolute;
  left:0;
  top:-112px;
  width:1px;
  height:1px;
  opacity:0;
}
.firework-sparks-v586 i {
  --a:0deg;
  position:absolute;
  width:4px;
  height:4px;
  background:#f4cf58;
  box-shadow:0 0 6px rgba(244,207,88,.8);
}
.firework-sparks-v586 i:nth-child(2n){background:#78dc72}
.firework-sparks-v586 i:nth-child(3n){background:#e45e58}

.redstone-v586.firing .firework-sparks-v586 {
  animation:v586BurstVisible .50s ease .84s 1 both;
}
.redstone-v586.firing .firework-sparks-v586 i {
  animation:v586Spark .50s ease-out .84s 1 both;
}

@keyframes v586BurstVisible {
  0%{opacity:0}
  12%,75%{opacity:1}
  100%{opacity:0}
}
@keyframes v586Spark {
  from{transform:rotate(var(--a)) translateX(2px) scale(1)}
  to{transform:rotate(var(--a)) translateX(34px) scale(.3)}
}

.redstone-v586.cooldown .redstone-button-v586 {
  cursor:wait;
}

@media(max-width:700px){
  .redstone-v586 {
    min-width:500px;
    transform:scale(.76);
    transform-origin:center right;
  }
}

@media(prefers-reduced-motion:reduce){
  .redstone-v586 .piston-rod-v586,
  .redstone-v586 .piston-head-v586,
  .redstone-v586 .redstone-block-v586 {
    transition:none!important;
  }
  .redstone-v586.firing .dispenser-v586,
  .redstone-v586.firing .firework-rocket-v586,
  .redstone-v586.firing .firework-sparks-v586,
  .redstone-v586.firing .firework-sparks-v586 i {
    animation:none!important;
  }
}


/* ===== v5.8.7 — guaranteed visible CSS pixel rocket ===== */

/* Disable the external-image rocket from v5.8.6. */
.firework-rocket-v586 {
  display:none !important;
}

/*
  This rocket is drawn entirely in CSS, so it cannot fail because of an
  external image/CDN. Its center starts exactly in the dispenser hole.
*/
.firework-rocket-v587 {
  position:absolute;
  left:0;
  top:0;
  width:12px;
  height:30px;
  opacity:0;
  z-index:999;
  pointer-events:none;
  transform:translate(-50%,-50%);
  transform-origin:center bottom;
  image-rendering:pixelated;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.42));
}

/* white/light gray Minecraft-like rocket tip */
.rocket-tip-v587 {
  position:absolute;
  left:2px;
  top:0;
  width:8px;
  height:6px;
  background:#e7e4d8;
  clip-path:polygon(50% 0,100% 100%,0 100%);
}

/* red paper body */
.rocket-body-v587 {
  position:absolute;
  left:2px;
  top:5px;
  width:8px;
  height:12px;
  background:
    linear-gradient(90deg,#7d1f1c 0 25%,#d3483d 25% 75%,#8b2520 75%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.09),
    inset 0 -2px 0 rgba(0,0,0,.20);
}

/* pale band around the rocket */
.rocket-band-v587 {
  position:absolute;
  left:1px;
  top:13px;
  width:10px;
  height:3px;
  background:#e2d5a2;
}

/* wooden stick */
.rocket-stick-v587 {
  position:absolute;
  left:5px;
  top:17px;
  width:3px;
  height:12px;
  background:#9a7446;
}

/* visible ignition flame / spark trail */
.rocket-flame-v587 {
  position:absolute;
  left:4px;
  top:27px;
  width:5px;
  height:7px;
  opacity:0;
  background:#ffd25b;
  box-shadow:
    0 2px 0 #ef8b37,
    0 4px 0 #d94b32,
    0 0 7px rgba(255,190,65,.88);
}

.redstone-v586.firing .firework-rocket-v587 {
  animation:v587RocketFlight .92s linear .02s 1 both;
}
.redstone-v586.firing .rocket-flame-v587 {
  animation:v587Flame .92s steps(2,end) .02s 1 both;
}

@keyframes v587RocketFlight {
  /* visibly emerges from the dispenser hole */
  0% {
    opacity:1;
    transform:translate(-50%,-50%) translateY(0) scale(.92);
  }
  8% {
    opacity:1;
    transform:translate(-50%,-50%) translateY(-7px) scale(.96);
  }
  25% {
    opacity:1;
    transform:translate(-50%,-50%) translateY(-28px) scale(1);
  }
  55% {
    opacity:1;
    transform:translate(-50%,-50%) translateY(-63px) scale(1);
  }
  88% {
    opacity:1;
    transform:translate(-50%,-50%) translateY(-103px) scale(.96);
  }
  100% {
    opacity:0;
    transform:translate(-50%,-50%) translateY(-112px) scale(.92);
  }
}

@keyframes v587Flame {
  0% { opacity:1; transform:scaleY(.7); }
  25% { opacity:1; transform:scaleY(1.25); }
  50% { opacity:.9; transform:scaleY(.8); }
  75% { opacity:1; transform:scaleY(1.35); }
  100% { opacity:0; transform:scaleY(.7); }
}

/* Move the burst very slightly later so the full rocket flight is visible first. */
.redstone-v586.firing .firework-sparks-v586 {
  animation:v586BurstVisible .50s ease .93s 1 both !important;
}
.redstone-v586.firing .firework-sparks-v586 i {
  animation:v586Spark .50s ease-out .93s 1 both !important;
}

/* Ensure the dispenser never clips the rocket. */
.dispenser-v586,
.firework-launch-v586 {
  overflow:visible !important;
}
.firework-launch-v586 {
  z-index:100 !important;
}


/* ===== v5.8.8 — rank inheritance clarity ===== */
.rank-features .rank-inherits {
  margin-bottom:3px;
  padding:8px 10px 8px 28px;
  border:1px solid rgba(118,213,111,.13);
  border-radius:10px;
  background:rgba(118,213,111,.045);
  color:#bcebb6;
  font-weight:850;
}
.rank-features .rank-inherits::before {
  left:9px;
  top:8px;
  color:#91df82;
}


/* ===== v5.8.9 — mobile redstone overflow fix ===== */

/*
  The redstone rig is wider than a phone viewport in its unscaled layout.
  CSS transforms shrink only the visual rendering, not the layout box itself,
  which previously created horizontal page scrolling and pushed the mobile
  navigation / hamburger off-screen.
*/
@media (max-width:700px) {
  .redstone-peek-zone {
    position:relative;
    width:100%;
    overflow-x:clip;
    overflow-y:visible;
  }

  .redstone-peek-zone .container {
    width:100%;
    max-width:100%;
    overflow-x:clip;
    overflow-y:visible;
    justify-content:center !important;
  }

  .redstone-v586 {
    /* Keep the desktop geometry intact, but fit the rendered rig on phones. */
    min-width:500px !important;
    width:500px;
    flex:0 0 500px;

    /* Move the whole easter egg left and make it fit inside ~360px visually. */
    transform:translateX(-22px) scale(.70) !important;
    transform-origin:center center !important;

    /*
      Compensate for the 500px layout box so it cannot enlarge the page.
      The actual visible result is ~350px wide.
    */
    margin-left:-75px;
    margin-right:-75px;
  }
}

/* Extra-small phones: a touch smaller and slightly further left. */
@media (max-width:430px) {
  .redstone-v586 {
    transform:translateX(-28px) scale(.67) !important;
    margin-left:-83px;
    margin-right:-83px;
  }
}


/* ===== v5.8.10 — Minecraft-style firework rocket ===== */
.firework-rocket-v587 { display:none !important; }

/*
  Pure HTML/CSS pixel rocket inspired by the Minecraft firework item:
  red cap, red body with white diagonal pixels, wooden stick.
*/
.firework-rocket-v5810 {
  position:absolute;
  left:0;
  top:0;
  width:16px;
  height:38px;
  opacity:0;
  z-index:999;
  pointer-events:none;
  transform:translate(-50%,-50%);
  transform-origin:center bottom;
  image-rendering:pixelated;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.48));
}

/* red mushroom/rocket cap */
.mc-rocket-cap-v5810 {
  position:absolute;
  left:2px;
  top:0;
  width:12px;
  height:8px;
  background:#d8342f;
  box-shadow:
    3px -3px 0 -1px #c52b28,
    -2px 2px 0 #8f211f,
    2px 2px 0 #ef4a3f,
    0 6px 0 -2px #7f1c1b;
}
.mc-rocket-cap-v5810::before {
  content:"";
  position:absolute;
  left:4px;
  top:-3px;
  width:4px;
  height:3px;
  background:#b72523;
}

/* red paper body */
.mc-rocket-body-v5810 {
  position:absolute;
  left:3px;
  top:8px;
  width:10px;
  height:20px;
  background:linear-gradient(90deg,#9c2522 0 20%,#e03a32 20% 78%,#8b201e 78%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.06),
    inset 0 -2px 0 rgba(0,0,0,.22);
}

/* blocky white diagonal stripe like the Minecraft item sprite */
.mc-rocket-stripe-a-v5810,
.mc-rocket-stripe-b-v5810,
.mc-rocket-stripe-c-v5810 {
  position:absolute;
  z-index:3;
  width:4px;
  height:5px;
  background:#e7e6df;
  box-shadow:1px 0 0 #bfc0ba;
}
.mc-rocket-stripe-a-v5810 { left:9px; top:10px; }
.mc-rocket-stripe-b-v5810 { left:6px; top:15px; }
.mc-rocket-stripe-c-v5810 { left:3px; top:20px; }

/* short wooden stick */
.mc-rocket-stick-v5810 {
  position:absolute;
  left:7px;
  top:28px;
  width:3px;
  height:10px;
  background:linear-gradient(90deg,#684827 0 30%,#a9773b 30% 72%,#5b3c21 72%);
}

/* small ignition sparks */
.mc-rocket-flame-v5810 {
  position:absolute;
  left:6px;
  top:36px;
  width:5px;
  height:6px;
  opacity:0;
  background:#ffd45b;
  box-shadow:0 2px 0 #f08b36,0 4px 0 #d95034,0 0 7px rgba(255,194,67,.88);
}

.redstone-v586.firing .firework-rocket-v5810 {
  animation:v5810RocketFlight .96s linear .02s 1 both;
}
.redstone-v586.firing .mc-rocket-flame-v5810 {
  animation:v5810RocketFlame .96s steps(2,end) .02s 1 both;
}

@keyframes v5810RocketFlight {
  0%   { opacity:1; transform:translate(-50%,-50%) translateY(0) scale(.82); }
  8%   { opacity:1; transform:translate(-50%,-50%) translateY(-7px) scale(.90); }
  26%  { opacity:1; transform:translate(-50%,-50%) translateY(-30px) scale(1); }
  55%  { opacity:1; transform:translate(-50%,-50%) translateY(-64px) scale(1); }
  88%  { opacity:1; transform:translate(-50%,-50%) translateY(-103px) scale(.96); }
  100% { opacity:0; transform:translate(-50%,-50%) translateY(-114px) scale(.92); }
}
@keyframes v5810RocketFlame {
  0%{opacity:1;transform:scaleY(.65)}
  25%{opacity:1;transform:scaleY(1.25)}
  50%{opacity:.85;transform:scaleY(.8)}
  75%{opacity:1;transform:scaleY(1.35)}
  100%{opacity:0;transform:scaleY(.6)}
}

/* burst waits until the Minecraft-style rocket finishes flying */
.redstone-v586.firing .firework-sparks-v586 {
  animation:v586BurstVisible .50s ease .97s 1 both !important;
}
.redstone-v586.firing .firework-sparks-v586 i {
  animation:v586Spark .50s ease-out .97s 1 both !important;
}


/* ===== v6 recruitment + admin ===== */
.team-recruit-cta{margin:60px 0 15px;padding:28px 30px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(135deg,rgba(90,190,95,.07),rgba(255,255,255,.015));display:flex;align-items:center;justify-content:space-between;gap:25px}.team-recruit-cta h2{margin:5px 0 6px;font-size:28px}.team-recruit-cta p,.recruitment-intro p,.admin-section-head p{color:var(--muted);margin:0}.recruitment-hero p,.admin-hero p{color:var(--muted);font-weight:700}.recruitment-intro{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.recruitment-intro h2{font-size:32px;margin:4px 0}.recruitment-message{color:var(--muted);margin:12px 0}.recruitment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.recruitment-card{padding:28px;border:1px solid var(--line);border-radius:22px;background:#0f1512;min-height:230px;display:flex;flex-direction:column}.recruitment-card h2{font-size:30px;margin:15px 0 8px}.recruitment-card p{color:var(--muted);line-height:1.65;flex:1}.recruitment-status{align-self:flex-start;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:900;background:rgba(114,224,110,.09);color:#8ce784;border:1px solid rgba(114,224,110,.18)}.recruitment-card.closed{opacity:.62}.recruitment-card.closed .recruitment-status{background:rgba(255,255,255,.04);color:var(--muted);border-color:var(--line)}.recruitment-apply,.recruitment-back,.admin-save{border:1px solid var(--line);background:#0a0f0c;color:#fff;border-radius:12px;padding:12px 16px;font-weight:900;cursor:pointer}.recruitment-apply:not(:disabled):hover,.admin-save:hover{border-color:rgba(115,224,107,.45);background:#101a14}.recruitment-apply:disabled{cursor:not-allowed;color:#707a74}.recruitment-form-wrap{max-width:850px;margin:0 auto}.recruitment-back{margin-bottom:24px}.recruitment-form-head h2{font-size:38px;margin:5px 0}.recruitment-form-head p{color:var(--muted)}.recruitment-question{display:grid;gap:9px;margin:20px 0}.recruitment-question span,.admin-field>span{font-weight:850}.recruitment-question textarea,.admin-field input,.admin-field textarea,.admin-field select,.admin-filters select{width:100%;box-sizing:border-box;border:1px solid var(--line);background:#090e0b;color:#fff;border-radius:12px;padding:12px 13px;font:inherit;resize:vertical}.recruitment-question textarea:focus,.admin-field input:focus,.admin-field textarea:focus,.admin-field select:focus,.admin-filters select:focus{outline:none;border-color:rgba(115,224,107,.45)}.recruitment-submit{margin-top:8px;max-width:250px}.account-admin-link{border:1px solid rgba(114,224,110,.24);border-radius:10px;padding:9px 12px;color:#a8ef9f;text-decoration:none;font-weight:900}.account-application{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#0d1310}.account-application div{display:grid;gap:4px}.account-application div span{color:var(--muted);font-size:12px}.account-applications{display:grid;gap:9px}.account-section-head a{color:#a4e89d;text-decoration:none;font-weight:850}.application-status{padding:6px 9px;border-radius:999px;font-size:11px;font-weight:900;white-space:nowrap}.status-new{background:rgba(80,164,255,.1);color:#8bc7ff}.status-review{background:rgba(255,211,91,.1);color:#ffd969}.status-interview{background:rgba(186,112,255,.1);color:#c99cff}.status-accepted{background:rgba(98,223,103,.1);color:#87e98c}.status-rejected{background:rgba(255,83,83,.1);color:#ff9999}.admin-main{padding:38px 0 90px}.admin-gate{padding:25px;border:1px solid var(--line);border-radius:18px;background:#0d1310;color:var(--muted)}.admin-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:28px;padding:6px;border:1px solid var(--line);border-radius:15px;width:max-content;max-width:100%;background:#0b100d}.admin-tabs button{border:0;background:transparent;color:var(--muted);border-radius:10px;padding:10px 15px;font-weight:900;cursor:pointer}.admin-tabs button.active{background:#edf3ee;color:#071009}.admin-pane{display:none}.admin-pane.active{display:block}.admin-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.admin-stat{padding:22px;border:1px solid var(--line);border-radius:18px;background:#0e1411;display:grid;gap:10px}.admin-stat span{color:var(--muted);font-size:12px;font-weight:850}.admin-stat strong{font-size:34px}.admin-section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}.admin-section-head h2{font-size:30px;margin:5px 0}.admin-filters{display:flex;gap:8px}.admin-filters select{width:auto}.admin-editor-card{padding:22px;border:1px solid var(--line);border-radius:18px;background:#0e1411;margin-bottom:14px}.admin-editor-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}.admin-editor-head h3{font-size:24px;margin:0}.admin-field{display:grid;gap:8px;margin:14px 0}.admin-checks{display:flex;gap:18px;flex-wrap:wrap;margin:4px 0 14px}.admin-checkbox{display:flex;align-items:center;gap:8px;font-weight:800}.admin-switch{display:flex;align-items:center;gap:8px;cursor:pointer}.admin-switch input{display:none}.admin-switch span{width:38px;height:21px;border-radius:20px;background:#29302c;position:relative;transition:.15s}.admin-switch span:after{content:'';position:absolute;width:15px;height:15px;left:3px;top:3px;background:#cbd2cd;border-radius:50%;transition:.15s}.admin-switch input:checked+span{background:#2e6b35}.admin-switch input:checked+span:after{transform:translateX(17px);background:#91ea87}.admin-switch b{font-size:12px}.admin-actions{display:flex;align-items:center;gap:12px;margin-top:15px}.admin-inline-feedback{color:#a4e89d;font-size:12px;font-weight:800}.admin-applications{display:grid;gap:8px}.admin-application-row{width:100%;border:1px solid var(--line);background:#0d1310;color:#fff;border-radius:14px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;text-align:left;cursor:pointer}.admin-application-row:hover{border-color:rgba(115,224,107,.3)}.admin-application-row div{display:grid;gap:4px}.admin-application-row div span{color:var(--muted);font-size:12px}.admin-modal[hidden]{display:none}.admin-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px}.admin-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px)}.admin-modal-card{position:relative;z-index:1;width:min(850px,100%);max-height:90vh;overflow:auto;background:#0d1310;border:1px solid var(--line);border-radius:22px;padding:27px}.admin-modal-card h2{font-size:30px;margin:5px 0 15px}.admin-profile-meta{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}.admin-profile-meta span{border:1px solid var(--line);border-radius:999px;padding:6px 9px;color:var(--muted);font-size:11px}.admin-answer-list{display:grid;gap:10px;margin:20px 0}.admin-answer{padding:15px;border:1px solid var(--line);border-radius:14px;background:#090e0b}.admin-answer p{white-space:pre-wrap;margin:8px 0 0;color:#d7dfda;line-height:1.55}.admin-answer strong{font-size:13px}
@media(max-width:800px){.recruitment-grid{grid-template-columns:1fr}.team-recruit-cta,.admin-section-head{align-items:flex-start;flex-direction:column}.admin-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-filters{width:100%;flex-direction:column}.admin-filters select{width:100%}.admin-tabs{width:100%;display:grid;grid-template-columns:1fr 1fr}.admin-application-row,.account-application{align-items:flex-start}.admin-application-row{gap:10px}.team-recruit-cta .cta{width:100%;box-sizing:border-box;text-align:center}}

/* v6.0.1 - recruitment submit cursor */
.recruitment-submit:not(:disabled) {
  cursor: pointer;
}

.recruitment-submit:disabled {
  cursor: not-allowed;
}