/* ============================================================
   MU-Special — Dark Fantasy Home Theme (original)
   Layout: thin top-nav, hero header, 3-column body, rich footer.
   All decorative effects are CSS/SVG generated — no external art.
   ============================================================ */

:root {
  --as-bg:        #07090e;
  --as-bg2:       #0d1019;
  --as-panel:     #12101a;
  --as-panel2:    #1a1622;
  --as-ink:       #e7ddc6;
  --as-ink-dim:   #9a8f78;
  --as-gold:      #e7c25a;
  --as-gold-soft: #f3d98a;
  --as-blood:     #4a0808;
  --as-blood2:    #2a0404;
  --as-blood-line:#7a1414;
  --as-ember:     #ff8a2b;
  --as-online:    #46d488;
  --as-offline:   #b14545;
  --as-edge:      #060309;
  --as-glow-gold: rgba(231,194,90,.45);
  --as-display:   'Cinzel', 'Heebo', serif;
  --as-body:      'Heebo', sans-serif;
}

/* ---- reset only inside the skinned home ---- */
.amio-skin * { box-sizing: border-box; margin: 0; padding: 0; }

.amio-skin {
  font-family: var(--as-body);
  color: var(--as-ink);
  direction: rtl;
  min-height: 100vh;
  line-height: 1.6;
  background-color: var(--as-bg);
  background-image:
    radial-gradient(ellipse 120% 60% at 50% -8%, rgba(231,194,90,.10), transparent 55%),
    radial-gradient(ellipse 80% 50% at 8% 4%, rgba(120,30,30,.22), transparent 50%),
    radial-gradient(ellipse 80% 50% at 92% 4%, rgba(120,30,30,.20), transparent 50%),
    radial-gradient(ellipse 100% 70% at 50% 120%, rgba(40,12,12,.5), transparent 60%),
    linear-gradient(180deg, #0a0c13 0%, #060709 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.amio-skin a { color: var(--as-gold); text-decoration: none; transition: color .15s, text-shadow .15s; }
.amio-skin a:hover { color: var(--as-gold-soft); text-shadow: 0 0 8px var(--as-glow-gold); }

/* ============================================================
   TOP PANEL (thin nav)
   ============================================================ */
.as-top {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(9,7,12,.96), rgba(9,7,12,.82));
  border-bottom: 1px solid #1d1622;
  box-shadow: 0 2px 0 rgba(231,194,90,.08), 0 8px 26px rgba(0,0,0,.5);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.as-menu {
  display: flex; list-style: none; align-items: center; flex-wrap: wrap; justify-content: center;
}
.as-menu > li { position: relative; }
.as-menu > li > a {
  display: block; padding: 16px 22px; color: var(--as-ink-dim);
  font-weight: 700; font-size: .92rem; letter-spacing: .3px;
  text-transform: none; transition: color .18s, background .18s;
}
.as-menu > li + li::before {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 16px; background: linear-gradient(180deg, transparent, #3a2f22, transparent);
}
.as-menu > li > a:hover, .as-menu > li > a.active {
  color: var(--as-gold-soft); background: rgba(231,194,90,.07);
  text-shadow: 0 0 10px var(--as-glow-gold);
}
.as-menu .as-discord-link { color: #8b9cff; }
.as-menu .as-discord-link:hover { color: #aab6ff; text-shadow: 0 0 10px rgba(120,140,255,.6); }

.as-burger {
  display: none; position: absolute; right: 16px; top: 12px;
  width: 40px; height: 34px; background: var(--as-panel2);
  border: 1px solid #2a2233; border-radius: 8px; cursor: pointer; padding: 8px 9px;
}
.as-burger span { display: block; height: 2px; background: var(--as-gold); border-radius: 2px; margin: 3px 0; transition: .25s; }

/* ============================================================
   WRAPPER + HEADER (hero band)
   ============================================================ */
.as-wrapper { max-width: 1280px; margin: 0 auto; position: relative; padding: 0 14px 40px; }

.as-header {
  position: relative; margin-top: 18px; height: 270px;
  border: 1px solid #1c1520; border-radius: 16px; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 90% at 50% 18%, rgba(231,194,90,.16), transparent 60%),
    radial-gradient(ellipse 90% 120% at 50% 130%, rgba(90,20,20,.5), transparent 60%),
    linear-gradient(180deg, #15101b 0%, #0a0710 100%);
  box-shadow: inset 0 0 60px rgba(0,0,0,.7), inset 0 1px 0 rgba(231,194,90,.1), 0 18px 40px rgba(0,0,0,.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* sweeping light beam */
.as-header::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 180%;
  background: linear-gradient(115deg, transparent 35%, rgba(231,194,90,.10) 48%, rgba(255,255,255,.06) 50%, rgba(231,194,90,.10) 52%, transparent 65%);
  animation: as-sweep 7s ease-in-out infinite; pointer-events: none;
}
@keyframes as-sweep { 0%,100% { transform: translateX(-18%); opacity: .5; } 50% { transform: translateX(18%); opacity: 1; } }

.as-logo { position: relative; z-index: 3; }
.as-logo img {
  display: block; max-height: 168px; width: auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(231,194,90,.35));
  animation: as-float 5s ease-in-out infinite;
}
@keyframes as-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.as-header-cta {
  position: relative; z-index: 3; margin-top: 14px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 34px; border-radius: 9px;
  font-family: var(--as-display); font-weight: 800; font-size: 1.02rem; letter-spacing: .5px;
  color: #2a1c05;
  background: linear-gradient(180deg, #f6df97 0%, #e7c25a 45%, #c79a35 100%);
  border: 1px solid #8a6a22;
  box-shadow: 0 8px 20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6), 0 0 22px var(--as-glow-gold);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.as-header-cta:hover { transform: translateY(-2px); filter: brightness(1.06); color: #2a1c05;
  box-shadow: 0 12px 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.7), 0 0 34px var(--as-glow-gold); }
.as-header-cta .as-play { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #2a1c05; }

/* corner vines (CSS/SVG, decorative) */
.as-vine { position: absolute; top: 0; width: 130px; height: 100%; z-index: 2; pointer-events: none; opacity: .9; }
.as-vine.left  { right: 0; }
.as-vine.right { left: 0; transform: scaleX(-1); }
.as-vine svg { width: 100%; height: 100%; }

/* sparks */
.as-sparks { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.as-spark { position: absolute; border-radius: 50%; background: var(--as-gold-soft);
  box-shadow: 0 0 8px 2px var(--as-glow-gold); opacity: 0; }
.as-spark.s1 { width: 4px; height: 4px; left: 22%; top: 30%; animation: as-twinkle 3.2s ease-in-out infinite; }
.as-spark.s2 { width: 3px; height: 3px; left: 70%; top: 24%; animation: as-twinkle 2.6s .6s ease-in-out infinite; }
.as-spark.s3 { width: 5px; height: 5px; left: 84%; top: 60%; animation: as-twinkle 3.8s .3s ease-in-out infinite; }
.as-spark.s4 { width: 6px; height: 6px; left: 12%; top: 66%; background: var(--as-ember); box-shadow: 0 0 12px 3px rgba(255,138,43,.6); animation: as-rise 5s ease-in-out infinite; }
.as-spark.s5 { width: 3px; height: 3px; left: 46%; top: 78%; animation: as-rise 6s 1s ease-in-out infinite; }
@keyframes as-twinkle { 0%,100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes as-rise { 0% { opacity: 0; transform: translateY(10px) scale(.5); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px) scale(1); } }

/* ============================================================
   3-COLUMN CONTAINER
   ============================================================ */
.as-container {
  display: grid; grid-template-columns: 290px 1fr 320px; gap: 18px;
  margin-top: 18px; align-items: start;
}
.as-sidebar { display: flex; flex-direction: column; gap: 16px; }

/* ============================================================
   WIDGET (shared panel)
   ============================================================ */
.as-widget {
  position: relative; border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, var(--as-panel) 0%, #0c0a12 100%);
  border: 1px solid #211a2a;
  box-shadow: inset 0 1px 0 rgba(231,194,90,.06), 0 12px 26px rgba(0,0,0,.45);
}
.as-widget-title {
  position: relative; padding: 13px 16px 11px;
  font-family: var(--as-display); font-weight: 800; font-size: 1.02rem; color: var(--as-gold-soft);
  text-shadow: 0 1px 2px rgba(0,0,0,.8); letter-spacing: .4px;
  background: linear-gradient(180deg, var(--as-blood) 0%, var(--as-blood2) 100%);
  border-bottom: 1px solid var(--as-blood-line);
}
.as-widget-title span { display: block; font-family: var(--as-body); font-weight: 500; font-size: .72rem; color: rgba(231,221,198,.6); margin-top: 2px; letter-spacing: 0; }
.as-widget-title::after {
  content: ""; position: absolute; right: 0; bottom: -1px; height: 2px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--as-ember), transparent); opacity: .55;
}
.as-widget-body { padding: 14px 14px 16px; }

/* ---- download block ---- */
.as-download a {
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  padding: 18px 14px; border-radius: 12px; color: #2a1c05;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.25), transparent 55%),
    linear-gradient(180deg, #f0d488 0%, #d9ad44 60%, #b9892c 100%);
  border: 1px solid #8a6a22;
  box-shadow: 0 10px 24px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.55), 0 0 20px var(--as-glow-gold);
  font-weight: 700; transition: transform .15s, filter .15s;
}
.as-download a:hover { transform: translateY(-2px); filter: brightness(1.05); color: #2a1c05; text-shadow: none; }
.as-download .as-dl-main { font-family: var(--as-display); font-size: 1.05rem; font-weight: 800; }
.as-download .as-dl-sub { font-size: .82rem; font-weight: 600; opacity: .85; }
.as-download .as-dl-icon { font-size: 1.3rem; line-height: 1; margin-bottom: 4px; }

/* ---- user / login panel ---- */
.as-login-field { margin-bottom: 10px; }
.as-login-field input {
  width: 100%; padding: 11px 13px; border-radius: 8px;
  background: #07060b; border: 1px solid #2a2233; color: var(--as-ink);
  font-family: inherit; font-size: .9rem; outline: none; transition: border-color .15s, box-shadow .15s;
}
.as-login-field input::placeholder { color: #5d5468; }
.as-login-field input:focus { border-color: var(--as-gold); box-shadow: 0 0 0 2px rgba(231,194,90,.18); }
.as-login-btn {
  width: 100%; padding: 12px; border: none; border-radius: 8px; cursor: pointer;
  font-family: var(--as-display); font-weight: 800; font-size: .95rem; color: #2a1c05;
  background: linear-gradient(180deg, #f0d488, #d0a13a); border: 1px solid #8a6a22;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 16px rgba(0,0,0,.4); transition: filter .15s, transform .12s;
}
.as-login-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.as-login-links { display: flex; justify-content: center; gap: 8px; margin-top: 11px; font-size: .8rem; color: var(--as-ink-dim); }
.as-login-links a { color: var(--as-ink-dim); }
.as-login-links a:hover { color: var(--as-gold); }

.as-user-logged { text-align: center; }
.as-user-logged .as-user-name { font-family: var(--as-display); font-size: 1.15rem; color: var(--as-online); font-weight: 800; }
.as-user-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.as-user-actions a { padding: 10px; border-radius: 8px; text-align: center; font-weight: 700; font-size: .85rem;
  background: var(--as-panel2); border: 1px solid #2a2233; color: var(--as-ink); }
.as-user-actions a:hover { border-color: var(--as-gold); color: var(--as-gold); }

/* ============================================================
   RANK TABLE (top players / guilds / crew)
   ============================================================ */
.as-rank { width: 100%; border-collapse: collapse; font-size: .86rem; }
.as-rank th {
  text-align: right; padding: 7px 8px; color: var(--as-ink-dim); font-weight: 700; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid #241d2e;
}
.as-rank td { padding: 8px; border-bottom: 1px solid #18131f; vertical-align: middle; }
.as-rank tr:last-child td { border-bottom: none; }
.as-rank tr:hover td { background: rgba(231,194,90,.04); }
.as-rank .as-pos { width: 34px; }
.as-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 6px; font-weight: 800; font-size: .78rem; background: #1b1626; color: var(--as-ink-dim); border: 1px solid #2a2233; }
.as-num.r1 { background: linear-gradient(180deg,#f3d98a,#caa23c); color: #2a1c05; border-color: #8a6a22; box-shadow: 0 0 12px var(--as-glow-gold); }
.as-num.r2 { background: linear-gradient(180deg,#e6ebf3,#9aa6bc); color: #1b2230; border-color: #6f7990; }
.as-num.r3 { background: linear-gradient(180deg,#e3a877,#b06f3c); color: #2a1405; border-color: #804e26; }
.as-rank .as-name a { color: var(--as-ink); font-weight: 700; }
.as-rank .as-name a:hover { color: var(--as-gold); }
.as-rank .as-cls { color: var(--as-ink-dim); font-size: .8rem; }
.as-rank .as-val { color: var(--as-gold-soft); font-weight: 800; text-align: left; }
.as-online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--as-online);
  box-shadow: 0 0 7px var(--as-online); margin-left: 5px; vertical-align: middle; }
.as-status-img { width: 13px; height: 13px; border-radius: 50%; margin-left: 5px; vertical-align: middle; }
.as-status-img.on { background: var(--as-online); box-shadow: 0 0 7px var(--as-online); }
.as-status-img.off { background: var(--as-offline); }
.as-rank .as-empty { text-align: center; color: var(--as-ink-dim); padding: 18px; }
.as-rank-more { display: block; text-align: center; margin-top: 12px; font-weight: 700; font-size: .85rem; }

/* ============================================================
   CASTLE SIEGE WIDGET
   ============================================================ */
.as-cs .as-cs-emblem { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.as-cs-mark { width: 84px; height: 84px; flex: 0 0 84px; border-radius: 8px; border: 1px solid #050306;
  background: #0c0a12; display: grid; grid-template-columns: repeat(8,1fr); grid-template-rows: repeat(8,1fr);
  overflow: hidden; box-shadow: inset 0 0 0 1px rgba(231,194,90,.08), 0 6px 14px rgba(0,0,0,.5); }
.as-cs-mark span { display: block; }
.as-cs-meta .as-cs-k { color: var(--as-ink-dim); font-size: .76rem; font-weight: 700; }
.as-cs-meta .as-cs-v { color: var(--as-gold-soft); font-size: .98rem; font-weight: 800; margin-bottom: 7px; }
.as-cs-reg { background: linear-gradient(180deg,var(--as-blood),var(--as-blood2)); border: 1px solid var(--as-blood-line);
  color: var(--as-gold-soft); text-align: center; padding: 8px; border-radius: 7px; font-weight: 800; font-size: .85rem; margin-bottom: 8px; }
.as-cs-empty { text-align: center; color: var(--as-ink-dim); font-size: .85rem; padding: 6px 0 12px; }
.as-cs-count { text-align: center; padding: 12px; border-radius: 8px; background: #0a0810; border: 1px solid #211a2a; }
.as-cs-count-label { color: var(--as-ink-dim); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.as-cs-count-time { font-family: var(--as-display); font-size: 1.5rem; font-weight: 800; color: var(--as-gold-soft); margin-top: 3px; text-shadow: 0 0 14px var(--as-glow-gold); }
.as-cs-count-time .u { font-size: .9rem; color: var(--as-ink-dim); margin: 0 1px 0 5px; }
.as-cs-history { display: block; text-align: center; margin-top: 12px; font-weight: 700; font-size: .85rem; }

/* ============================================================
   SERVER STATUS WIDGET
   ============================================================ */
.as-status-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.as-status-name { font-family: var(--as-display); font-weight: 800; color: var(--as-ink); font-size: 1rem; }
.as-status-badge { font-size: .78rem; font-weight: 800; padding: 3px 11px; border-radius: 20px; }
.as-status-badge.on { color: var(--as-online); background: rgba(70,212,136,.12); border: 1px solid rgba(70,212,136,.4); }
.as-progress { height: 12px; border-radius: 7px; background: #07060b; border: 1px solid #241d2e; overflow: hidden; }
.as-progress span { display: block; height: 100%; border-radius: 7px;
  background: linear-gradient(90deg, #8a1414, #e7c25a); box-shadow: 0 0 12px var(--as-glow-gold);
  animation: as-pulse 2.4s ease-in-out infinite; }
@keyframes as-pulse { 0%,100% { opacity: .82; } 50% { opacity: 1; } }
.as-status-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: .85rem; }
.as-status-foot .as-players { color: var(--as-gold-soft); font-weight: 800; }

/* ============================================================
   EVENTS WIDGET
   ============================================================ */
.as-events { list-style: none; }
.as-events li { display: flex; align-items: center; justify-content: space-between; padding: 9px 4px; border-bottom: 1px solid #18131f; }
.as-events li:last-child { border-bottom: none; }
.as-ev-name { font-weight: 700; font-size: .88rem; color: var(--as-ink); }
.as-ev-time { font-family: var(--as-display); font-weight: 800; color: var(--as-gold-soft); font-size: .9rem; }

/* ============================================================
   DISCORD WIDGET
   ============================================================ */
.as-discord-join { display: block; text-align: center; padding: 11px; border-radius: 8px; margin-bottom: 12px;
  background: linear-gradient(180deg, #5865f2, #4450d8); color: #fff; font-weight: 800; border: 1px solid #3a44b5;
  box-shadow: 0 8px 18px rgba(88,101,242,.35); }
.as-discord-join:hover { filter: brightness(1.08); color: #fff; text-shadow: none; }
.as-discord-frame iframe { width: 100%; height: 320px; border: 0; border-radius: 8px; display: block; }

/* ============================================================
   CONTENT (center)
   ============================================================ */
.as-content { min-width: 0; }
.as-welcome { padding: 6px 4px 4px; text-align: center; }
.as-welcome h1 {
  font-family: var(--as-display); font-size: 2.4rem; font-weight: 900; letter-spacing: 1px;
  background: linear-gradient(180deg, #fff4d2, var(--as-gold) 55%, #b9892c);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 18px var(--as-glow-gold); margin-bottom: 8px; direction: ltr;
}
.as-welcome .as-eyebrow { display: inline-block; color: var(--as-ember); font-weight: 800; font-size: .82rem;
  letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; }
.as-welcome h2 { font-size: 1.02rem; font-weight: 500; color: var(--as-ink-dim); max-width: 620px; margin: 0 auto 16px; line-height: 1.7; }
.as-main-links, .as-sub-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.as-main-links { font-weight: 800; font-size: 1rem; margin-bottom: 6px; }
.as-main-links a { color: var(--as-gold-soft); }
.as-main-links span, .as-sub-links span:not(.tag) { color: #3a2f22; }
.as-sub-links { font-size: .85rem; color: var(--as-ink-dim); margin-bottom: 4px; }
.as-sub-links .tag { color: var(--as-ink-dim); }

.as-divider { height: 26px; background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(231,194,90,.25), transparent 70%); margin: 6px 0; }

.as-text { background: linear-gradient(180deg, rgba(20,16,26,.7), rgba(10,8,14,.7)); border: 1px solid #1c1622;
  border-radius: 12px; padding: 20px 22px; margin-bottom: 16px; box-shadow: inset 0 1px 0 rgba(231,194,90,.05); }
.as-text h3 { font-family: var(--as-display); color: var(--as-gold-soft); font-size: 1.25rem; font-weight: 800; margin-bottom: 10px;
  position: relative; padding-bottom: 8px; }
.as-text h3::after { content: ""; position: absolute; right: 0; bottom: 0; width: 60px; height: 2px;
  background: linear-gradient(90deg, var(--as-ember), transparent); }
.as-text p { color: var(--as-ink); margin-bottom: 10px; font-size: .96rem; }
.as-text p:last-child { margin-bottom: 0; }
.as-text strong { color: var(--as-gold-soft); }
.as-text .c-red { color: #ff6b6b; } .as-text .c-blue { color: #7fb2ff; } .as-text .c-green { color: var(--as-online); }

.as-keywords { text-align: center; background: rgba(10,8,14,.6); border: 1px dashed #2a2233; border-radius: 12px; padding: 16px; }
.as-keywords h4 { color: var(--as-ink-dim); font-size: .82rem; font-weight: 700; margin-bottom: 5px; }
.as-keywords p { color: #5d5468; font-size: .82rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.as-footer { margin-top: 36px; border-top: 1px solid #1c1622; padding-top: 28px;
  background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(90,20,20,.25), transparent 60%); }
.as-footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 26px; max-width: 1180px; margin: 0 auto; padding: 0 14px 8px; }
.as-footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.as-footer-brand img { height: 46px; width: auto; filter: drop-shadow(0 0 10px var(--as-glow-gold)); }
.as-footer-brand span { font-family: var(--as-display); font-weight: 900; font-size: 1.2rem; color: var(--as-gold-soft); letter-spacing: 1px; }
.as-footer-about p { color: var(--as-ink-dim); font-size: .9rem; line-height: 1.7; }
.as-footer h3 { font-family: var(--as-display); color: var(--as-gold-soft); font-size: 1rem; margin-bottom: 12px; }
.as-footer-links { list-style: none; }
.as-footer-links li { margin-bottom: 8px; }
.as-footer-links a { color: var(--as-ink-dim); font-size: .9rem; }
.as-footer-links a:hover { color: var(--as-gold); }
.as-soc { display: flex; gap: 10px; }
.as-soc a { width: 40px; height: 40px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: var(--as-panel2); border: 1px solid #2a2233; transition: transform .15s, border-color .15s, box-shadow .15s; }
.as-soc a:hover { transform: translateY(-3px); border-color: var(--as-gold); box-shadow: 0 0 16px var(--as-glow-gold); }
.as-soc svg { width: 20px; height: 20px; fill: var(--as-ink-dim); transition: fill .15s; }
.as-soc a:hover svg { fill: var(--as-gold-soft); }
.as-footer-copy { text-align: center; color: #4a4255; font-size: .82rem; padding: 20px 14px; border-top: 1px solid #16111c; margin-top: 22px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .as-container { grid-template-columns: 260px 1fr; }
  .as-sidebar.right { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .as-sidebar.right > .as-widget { flex: 1 1 280px; }
}
@media (max-width: 760px) {
  .as-burger { display: block; }
  .as-menu { display: none; width: 100%; flex-direction: column; }
  .as-top.open .as-menu { display: flex; }
  .as-top { padding: 56px 0 0; }
  .as-menu > li { width: 100%; text-align: center; }
  .as-menu > li + li::before { display: none; }
  .as-container { grid-template-columns: 1fr; }
  .as-sidebar { grid-column: 1 / -1; }
  .as-sidebar.right { flex-direction: column; }
  .as-header { height: 210px; }
  .as-header .as-vine { width: 80px; }
  .as-welcome h1 { font-size: 1.7rem; }
  .as-footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) { .as-footer-inner { grid-template-columns: 1fr; } }

/* ===== Full-width server banner (replaces the logo, fills the whole header) ===== */
.as-header { height: auto; padding: 0; }
.as-header::before { display: none; }            /* hide sweep beam over the banner */
.as-header .as-vine, .as-header .as-sparks { display: none; } /* hide decorations; banner is the artwork */
.as-banner { position: relative; z-index: 3; width: 100%; line-height: 0; }
.as-banner a { display: block; line-height: 0; }
.as-banner img { width: 100%; height: auto; display: block; }
/* Keep the "play now" CTA, overlaid centered at the bottom of the banner */
.as-header-cta { position: absolute; bottom: 20px; left: 0; right: 0; margin: 0 auto; width: max-content; z-index: 4; }
@media (max-width: 700px) { .as-header-cta { bottom: 10px; padding: 9px 20px; font-size: .9rem; } }