/*
Theme Name: dLS Clan Hub
Theme URI:
Description: Child theme for the dLS clan hub. Dark "field bulletin" look — Bebas Neue display headings, Inter body text, IBM Plex Mono for labels/timestamps — carried over from the site mockup. Built to sit on top of a blank-canvas parent theme (GeneratePress, Astra, Blocksy, etc).
Author: Silverghost
Author URI:
Template: astra
Version: 1.1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dls-clan-hub

IMPORTANT — before activating:
"Template:" above MUST match your parent theme's FOLDER NAME exactly
(check /wp-content/themes/ — it's case-sensitive). If you installed
a different parent theme than GeneratePress, change that line to
match, e.g. "Template: astra" or "Template: blocksy".
*/


/* ==========================================================
   1. DESIGN TOKENS
   Same variables used across every page of the mockup.
   Change these once, everything using them updates together.
   ========================================================== */

:root{
  --bg:#14150f;
  --panel:#1c1e16;
  --panel-2:#23251b;
  --border:#34362a;
  --bone:#e9e4d2;
  --bone-dim:#9c9a86;
  --blood:#b8382a;
  --blood-bright:#d94a3a;
  --tape:#e08424;
  --green:#5b8a4a;
}


/* ==========================================================
   2. BASE / RESET
   Scoped to a wrapper class rather than raw body/html, so it
   doesn't fight your parent theme's own reset. Add the
   "dls-clan-hub" body class (see functions.php) to pages that
   should get this look, or wrap clan-hub templates in a
   <div class="dls-clan-hub"> container.
   ========================================================== */

.dls-clan-hub{
  background:var(--bg);
  color:var(--bone);
  font-family:'Inter',sans-serif;
  line-height:1.5;
}
.dls-clan-hub *{box-sizing:border-box;}

/* Astra sets its OWN explicit color on h1-h6/p/a. An explicit rule always
   beats a value our elements only inherited from .dls-clan-hub above, no
   matter the specificity — so force our own explicit color here too. */
.dls-clan-hub h1,
.dls-clan-hub h2,
.dls-clan-hub h3,
.dls-clan-hub h4,
.dls-clan-hub h5,
.dls-clan-hub h6,
.dls-clan-hub p,
.dls-clan-hub span,
.dls-clan-hub div,
.dls-clan-hub label,
.dls-clan-hub li,
.dls-clan-hub a{
  color:inherit;
  line-height:inherit;
}

.dls-clan-hub h1,
.dls-clan-hub h2,
.dls-clan-hub h3{
  font-family:'Bebas Neue',sans-serif;
  letter-spacing:0.02em;
  font-weight:400;
}
.dls-mono{font-family:'IBM Plex Mono',monospace;}


/* ==========================================================
   3. BULLETIN BAR
   The red status strip at the top of every page — day counter,
   server number, clan name.
   ========================================================== */

.bulletin{
  background:var(--blood);
  color:#f6e6df;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:0.08em;
  padding:7px 24px;
  display:flex;
  align-items:center;
  gap:10px;
  text-transform:uppercase;
}
.bulletin .dot{
  width:7px;height:7px;border-radius:50%;
  background:#f6e6df;
  animation:dls-blink 1.6s infinite;
  flex-shrink:0;
}
@keyframes dls-blink{0%,100%{opacity:1}50%{opacity:.2}}


/* ==========================================================
   4. HEADER / NAV
   ========================================================== */

.dls-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 32px;border-bottom:1px solid var(--border);
}
.dls-logo{display:flex;align-items:center;gap:10px;}
.dls-logo-mark{
  width:34px;height:34px;background:var(--blood);
  display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue',sans-serif;font-size:18px;color:#f6e6df;
  border-radius:2px;border:1px solid var(--tape);
}
.dls-logo-text{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:0.06em;}
.dls-nav{display:flex;gap:20px;flex-wrap:wrap;}
.dls-nav a{
  color:var(--bone-dim);text-decoration:none;font-size:13px;
  letter-spacing:0.04em;text-transform:uppercase;
}
.dls-nav a.active,
.dls-nav a:hover{color:var(--bone);}


/* ==========================================================
   5. BANNER (uploadable hero image areas — home page, rules page)
   ========================================================== */

.dls-banner{
  position:relative;
  background:repeating-linear-gradient(45deg, #2a2c20, #2a2c20 12px, #232519 12px, #232519 24px);
  background-size:cover;background-position:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;border-bottom:2px solid var(--tape);
}
.dls-banner-upload-btn{
  position:absolute;top:16px;right:16px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;
  padding:8px 14px;border-radius:3px;
  background:var(--panel);color:var(--bone);border:1px solid var(--tape);
}


/* ==========================================================
   6. BUTTONS
   ========================================================== */

.dls-btn{
  font-family:'Inter',sans-serif;font-size:14px;font-weight:600;
  padding:12px 22px;border-radius:3px;text-decoration:none;
  display:inline-block;border:none;cursor:pointer;
}
.dls-btn-primary{background:var(--blood);color:#f6e6df;}
.dls-btn-secondary{background:transparent;color:var(--bone);border:1px solid var(--border);}
.dls-btn-accent{background:var(--tape);color:#2b1d05;}


/* ==========================================================
   7. STATS ROW (home page — join count, apocalypse time, FAQ, etc)
   ========================================================== */

.dls-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.dls-stat{padding:22px 28px;border-right:1px solid var(--border);}
.dls-stat:last-child{border-right:none;}
.dls-stat.alert{background:rgba(184,56,42,0.08);}
.dls-stat.alert .dls-stat-num,
.dls-stat.alert .dls-stat-label{color:var(--blood-bright);}
.dls-stat-num{font-family:'Bebas Neue',sans-serif;font-size:34px;color:var(--bone);}
.dls-stat-label{
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);
  text-transform:uppercase;letter-spacing:0.06em;margin-top:2px;
}


/* ==========================================================
   8. PANELS & CARDS (generic reusable containers)
   Use .dls-panel for a plain container, .dls-card for one that
   needs more padding (forms, composers).
   ========================================================== */

.dls-panel{
  background:var(--panel);border:1px solid var(--border);border-radius:4px;
}
.dls-panel.accent{border-color:var(--tape);}
.dls-panel.danger{border-color:var(--blood);}
.dls-panel.locked{background:var(--panel-2);}
.dls-card{
  background:var(--panel);border:1px solid var(--border);border-radius:4px;
  padding:20px 24px;
}


/* ==========================================================
   9. TAGS / BADGES
   Rank tags (R4/R5), locked tags, status tags — all the small
   uppercase pills used across Leadership, War room, and Teams.
   ========================================================== */

.dls-tag{
  font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--tape);
  border:1px solid var(--tape);border-radius:2px;padding:2px 7px;
  text-transform:uppercase;letter-spacing:0.04em;white-space:nowrap;
  display:inline-block;
}
.dls-tag.plain{color:var(--bone-dim);border-color:var(--border);}
.dls-tag.admin{color:var(--green);border-color:var(--green);}
.dls-tag.danger{color:var(--blood-bright);border-color:var(--blood);}


/* ==========================================================
   10. ROWS (rank table, roster members, forum threads)
   The repeating list-row pattern used everywhere: an avatar,
   a name + subtitle block, and a right-aligned status/action.
   ========================================================== */

.dls-row{
  display:flex;align-items:center;gap:14px;padding:12px 18px;
  border-bottom:1px solid var(--border);
}
.dls-row:last-child{border-bottom:none;}
.dls-avatar{
  width:34px;height:34px;border-radius:4px;border:2px solid var(--tape);
  background:repeating-linear-gradient(45deg, #2a2c20, #2a2c20 6px, #232519 6px, #232519 12px);
  background-size:cover;background-position:center;
  flex-shrink:0;cursor:pointer;position:relative;
}
.dls-row h3{font-size:14px;font-weight:500;}
.dls-row p{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);}

/* Forum / thread list rows specifically */
.dls-thread{
  display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--border);
}
.dls-thread:first-child{border-top:1px solid var(--border);}
.dls-thread.pinned{border-left:3px solid var(--blood-bright);padding-left:14px;}
.dls-thread h4{font-size:14px;font-weight:500;margin-bottom:4px;}
.dls-thread h4 a{color:var(--bone);text-decoration:none;}
.dls-thread h4 a:hover{color:var(--tape);text-decoration:underline;}
.dls-thread p{color:var(--bone-dim);font-size:12px;}
.dls-thread .replies{
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);
  text-align:center;min-width:50px;
}
.dls-thread .replies b{
  display:block;color:var(--bone);font-size:16px;font-family:'Bebas Neue',sans-serif;
}
.dls-thread .last{
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);
  text-align:right;min-width:90px;
}


/* ==========================================================
   11. FORMS (composers, join form, event scheduler)
   ========================================================== */

.dls-field{margin-bottom:16px;}
.dls-field label{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--tape);
  text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;
}
.dls-field .optional{color:var(--bone-dim);text-transform:none;letter-spacing:0;font-size:11px;}
.dls-field input,
.dls-field select,
.dls-field textarea{
  width:100%;background:var(--panel-2);border:1px solid var(--border);border-radius:3px;
  color:var(--bone);font-family:'Inter',sans-serif;font-size:14px;padding:10px 12px;
}
.dls-field textarea{resize:vertical;min-height:56px;}

.dls-upload-btn{
  cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);
  border:1px solid var(--border);border-radius:3px;padding:8px 12px;
}
.dls-upload-btn input{display:none;}


/* ==========================================================
   12. FOOTER
   ========================================================== */

.dls-footer{
  padding:24px 32px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);
  text-transform:uppercase;letter-spacing:0.05em;
}


/* ==========================================================
   13. BUDDYPRESS / BBPRESS STARTER OVERRIDES
   These are approximate — BuddyPress and bbPress ship their own
   markup with their own class names (bp-*, buddypress, bbp-*).
   Once the plugins are actually installed, inspect the rendered
   HTML in your browser and refine the selectors below to match
   what's really there. This section just gets you from "bright
   white default theme" to "roughly on-brand" as a starting point.
   ========================================================== */

/* BuddyPress general containers */
#buddypress{
  background:var(--bg);
  color:var(--bone);
  font-family:'Inter',sans-serif;
}
#buddypress a{color:var(--tape);}
#buddypress a:hover{color:var(--blood-bright);}

/* BuddyPress group list / group header → maps to your Teams pages */
#buddypress div.item-list-tabs ul li a,
#buddypress .groups-members-tab a{
  color:var(--bone-dim);
  text-decoration:none;
  text-transform:uppercase;
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  letter-spacing:0.04em;
}
#buddypress div.item-list-tabs ul li.selected a{color:var(--bone);}

#buddypress .item-avatar img{
  border-radius:4px;
  border:2px solid var(--tape);
}

/* BuddyPress activity stream / member cards */
#buddypress .activity-list li,
#buddypress .item-list li{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:4px;
}

/* bbPress forums → maps to Forum / War room / Leadership forum pages */
#bbpress-forums{
  background:var(--bg);
  color:var(--bone);
  font-family:'Inter',sans-serif;
}
#bbpress-forums li.bbp-header,
#bbpress-forums li.bbp-body ul.forum,
#bbpress-forums li.bbp-body ul.topic{
  background:var(--panel);
  border-bottom:1px solid var(--border);
}
#bbpress-forums a{color:var(--tape);}
#bbpress-forums a:hover{color:var(--blood-bright);}
#bbpress-forums .bbp-topic-title{
  font-family:'Inter',sans-serif;
  font-weight:500;
}
#bbpress-forums #bbp-topic-title,
#bbpress-forums #bbp_topic_content{
  background:var(--panel-2);
  border:1px solid var(--border);
  color:var(--bone);
}

/* bbPress reply/topic form buttons */
#bbpress-forums #bbp_topic_submit,
#bbpress-forums .bbp-reply-form-submit input[type="submit"]{
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  padding:9px 20px;border-radius:3px;border:none;
  background:var(--tape);color:#2b1d05;cursor:pointer;
}


/* ==========================================================
   14. PAGE-SPECIFIC MOCKUP STYLES
   Pulled directly from each mockup HTML file's own <style>
   block and scoped under .dls-clan-hub, so every class used
   in the mockup pages (hero, join-card, team-card, member-row,
   thread, etc.) actually has real CSS behind it — the earlier
   sections above were only a generic starter set and didn't
   cover these. Some rules here duplicate/override sections
   3-12 above; that's harmless, later matching rules just win.
   ========================================================== */


/* ---- from clan-site-mockup.html ---- */

:root{
    --bg:#14150f;
    --panel:#1c1e16;
    --panel-2:#23251b;
    --border:#34362a;
    --bone:#e9e4d2;
    --bone-dim:#9c9a86;
    --blood:#b8382a;
    --blood-bright:#d94a3a;
    --tape:#e08424;
  }

.dls-clan-hub *{box-sizing:border-box;margin:0;padding:0;}

.dls-clan-hub{
    background:var(--bg);
    color:var(--bone);
    font-family:'Inter',sans-serif;
    line-height:1.5;
  }

.dls-clan-hub .display{font-family:'Bebas Neue',sans-serif;letter-spacing:0.03em;}

.dls-clan-hub .mono{font-family:'IBM Plex Mono',monospace;}

.dls-clan-hub .bulletin{
    background:var(--blood);
    color:#f6e6df;
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    letter-spacing:0.08em;
    padding:7px 24px;
    display:flex;
    align-items:center;
    gap:10px;
    text-transform:uppercase;
  }

.dls-clan-hub .bulletin .dot{
    width:7px;height:7px;border-radius:50%;
    background:#f6e6df;
    animation:blink 1.6s infinite;
    flex-shrink:0;
  }

@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

.dls-clan-hub .banner{
    position:relative;
    height:280px;
    background:
      linear-gradient(180deg, rgba(20,21,15,0.15) 0%, rgba(20,21,15,0.95) 100%),
      repeating-linear-gradient(45deg, #2a2c20, #2a2c20 12px, #232519 12px, #232519 24px);
    background-size:cover;
    background-position:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-bottom:2px solid var(--tape);
  }

.dls-clan-hub .banner-upload-btn{
    position:absolute;top:16px;right:16px;cursor:pointer;
    font-family:'Inter',sans-serif;font-size:12px;font-weight:600;
    padding:8px 14px;border-radius:3px;
    background:var(--panel);color:var(--bone);border:1px solid var(--tape);
  }

.dls-clan-hub .banner-upload-btn input{display:none;}

.dls-clan-hub .banner-icon{
    width:36px;height:36px;
    border:1.5px dashed var(--bone-dim);
    border-radius:4px;
    display:flex;align-items:center;justify-content:center;
    color:var(--bone-dim);
    font-family:'IBM Plex Mono',monospace;
    font-size:16px;
  }

.dls-clan-hub .banner-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--bone-dim);
    text-transform:uppercase;
    letter-spacing:0.06em;
  }

.dls-clan-hub .banner-sub{
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    color:var(--bone-dim);
    opacity:0.7;
  }

.dls-clan-hub header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 32px;
    border-bottom:1px solid var(--border);
  }

.dls-clan-hub .logo{
    display:flex;
    align-items:center;
    gap:10px;
  }

.dls-clan-hub .logo-mark{
    width:34px;height:34px;
    background:var(--blood);
    display:flex;align-items:center;justify-content:center;
    font-family:'Bebas Neue',sans-serif;
    font-size:18px;
    color:#f6e6df;
    border-radius:2px;
    border:1px solid var(--tape);
  }

.dls-clan-hub .logo-text{
    font-family:'Bebas Neue',sans-serif;
    font-size:24px;
    letter-spacing:0.06em;
  }

.dls-clan-hub nav{display:flex;gap:28px;}

.dls-clan-hub nav a{
    color:var(--bone-dim);
    text-decoration:none;
    font-size:13px;
    letter-spacing:0.04em;
    text-transform:uppercase;
  }

.dls-clan-hub nav a.active{color:var(--bone);}

.dls-clan-hub .stripe{
    height:6px;
    background:repeating-linear-gradient(135deg,var(--tape),var(--tape) 10px,var(--bg) 10px,var(--bg) 20px);
    opacity:0.5;
  }

.dls-clan-hub .hero{
    padding:64px 32px 48px;
    max-width:760px;
  }

.dls-clan-hub .hero-eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    color:var(--tape);
    letter-spacing:0.1em;
    text-transform:uppercase;
    margin-bottom:14px;
  }

.dls-clan-hub .hero h1{
    font-family:'Bebas Neue',sans-serif;
    font-size:56px;
    line-height:1.02;
    letter-spacing:0.01em;
    margin-bottom:18px;
  }

.dls-clan-hub .hero p{
    color:var(--bone-dim);
    font-size:16px;
    max-width:480px;
    margin-bottom:28px;
  }

.dls-clan-hub .btn-row{display:flex;gap:12px;}

.dls-clan-hub .btn{
    font-family:'Inter',sans-serif;
    font-size:14px;
    font-weight:600;
    padding:12px 22px;
    border-radius:3px;
    text-decoration:none;
    display:inline-block;
  }

.dls-clan-hub .btn-primary{background:var(--blood);color:#f6e6df;}

.dls-clan-hub .btn-secondary{background:transparent;color:var(--bone);border:1px solid var(--border);}

.dls-clan-hub .stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }

.dls-clan-hub .stat{
    padding:22px 28px;
    border-right:1px solid var(--border);
  }

.dls-clan-hub .stat:last-child{border-right:none;}

.dls-clan-hub .stat.alert{background:rgba(184,56,42,0.08);}

.dls-clan-hub .stat.alert .stat-num{color:var(--blood-bright);}

.dls-clan-hub .stat.alert .stat-label{color:var(--blood-bright);}

.dls-clan-hub .stat-num{
    font-family:'Bebas Neue',sans-serif;
    font-size:34px;
    color:var(--bone);
  }

.dls-clan-hub .stat-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--bone-dim);
    text-transform:uppercase;
    letter-spacing:0.06em;
    margin-top:2px;
  }

.dls-clan-hub section{padding:48px 32px;}

.dls-clan-hub .section-head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:22px;
  }

.dls-clan-hub .section-head h2{
    font-family:'Bebas Neue',sans-serif;
    font-size:28px;
    letter-spacing:0.02em;
  }

.dls-clan-hub .section-head span{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    color:var(--bone-dim);
  }

.dls-clan-hub .join-card{
    background:var(--panel);border:1px solid var(--border);border-radius:4px;
    padding:24px 28px;max-width:520px;
  }

.dls-clan-hub .join-field{margin-bottom:16px;}

.dls-clan-hub .join-field label{
    display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--tape);
    text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;
  }

.dls-clan-hub .join-field .optional{color:var(--bone-dim);text-transform:none;letter-spacing:0;font-size:11px;}

.dls-clan-hub .join-field input{
    width:100%;background:var(--panel-2);border:1px solid var(--border);border-radius:3px;
    color:var(--bone);font-family:'Inter',sans-serif;font-size:14px;padding:10px 12px;
  }

.dls-clan-hub .join-submit-btn{
    font-family:'Inter',sans-serif;font-size:14px;font-weight:600;
    padding:11px 22px;border-radius:3px;border:none;
    background:var(--blood);color:#f6e6df;cursor:pointer;
  }

.dls-clan-hub .join-confirm{
    display:none;background:var(--panel);border:1px solid var(--green);border-radius:4px;
    padding:16px 20px;max-width:520px;color:var(--bone);font-size:14px;
  }

.dls-clan-hub .join-confirm b{color:var(--green);}

.dls-clan-hub .events{
    display:flex;
    flex-direction:column;
  }

.dls-clan-hub .event{
    display:grid;
    grid-template-columns:70px 1fr auto;
    gap:20px;
    align-items:center;
    padding:16px 0;
    border-bottom:1px solid var(--border);
  }

.dls-clan-hub .event:first-child{border-top:1px solid var(--border);}

.dls-clan-hub .event .when{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--tape);
    line-height:1.4;
  }

.dls-clan-hub .event h4{
    font-size:15px;
    font-weight:500;
    margin-bottom:3px;
  }

.dls-clan-hub .event p{
    color:var(--bone-dim);
    font-size:13px;
  }

.dls-clan-hub .event .rsvp{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    padding:6px 12px;
    border:1px solid var(--border);
    border-radius:3px;
    color:var(--bone-dim);
    white-space:nowrap;
  }

.dls-clan-hub .event .rsvp.open{color:var(--tape);border-color:var(--tape);}

.dls-clan-hub .season-links{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
  }

.dls-clan-hub .season-link{
    display:block;
    background:var(--panel);border:1px solid var(--border);border-radius:4px;
    padding:18px 20px;text-decoration:none;color:inherit;
  }

.dls-clan-hub .season-link:hover{border-color:var(--tape);}

.dls-clan-hub .season-link h4{font-size:14.5px;font-weight:500;margin-bottom:6px;color:var(--tape);}

.dls-clan-hub .season-link p{color:var(--bone-dim);font-size:13px;}

.dls-clan-hub .video-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
  }

.dls-clan-hub .video-slot{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:14px;}

.dls-clan-hub .video-frame{
    width:100%;aspect-ratio:16/9;background:var(--panel-2);border:1px solid var(--border);
    border-radius:3px;display:flex;align-items:center;justify-content:center;overflow:hidden;
    margin-bottom:10px;
  }

.dls-clan-hub .video-frame iframe{width:100%;height:100%;border:none;}

.dls-clan-hub .video-placeholder{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);text-transform:uppercase;letter-spacing:0.04em;}

.dls-clan-hub .video-input-row{display:flex;gap:8px;}

.dls-clan-hub .video-input-row input{
    flex:1;background:var(--panel-2);border:1px solid var(--border);border-radius:3px;
    color:var(--bone);font-family:'Inter',sans-serif;font-size:12px;padding:8px 10px;min-width:0;
  }

.dls-clan-hub .video-load-btn{
    font-family:'Inter',sans-serif;font-size:12px;font-weight:600;
    padding:8px 14px;border-radius:3px;border:none;
    background:var(--tape);color:#2b1d05;cursor:pointer;white-space:nowrap;
  }

.dls-clan-hub footer{
    padding:24px 32px;
    border-top:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--bone-dim);
    text-transform:uppercase;
    letter-spacing:0.05em;
  }


/* ---- from events.html ---- */

:root{
    --bg:#14150f;--panel:#1c1e16;--panel-2:#23251b;--border:#34362a;
    --bone:#e9e4d2;--bone-dim:#9c9a86;
    --blood:#b8382a;--blood-bright:#d94a3a;--tape:#e08424;--green:#5b8a4a;
  }

.dls-clan-hub{background:var(--bg);color:var(--bone);font-family:'Inter',sans-serif;line-height:1.5;}

.dls-clan-hub .bulletin{background:var(--blood);color:#f6e6df;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.08em;padding:7px 24px;display:flex;align-items:center;gap:10px;text-transform:uppercase;}

.dls-clan-hub .bulletin .dot{width:7px;height:7px;border-radius:50%;background:#f6e6df;animation:blink 1.6s infinite;flex-shrink:0;}

.dls-clan-hub header{display:flex;justify-content:space-between;align-items:center;padding:20px 32px;border-bottom:1px solid var(--border);}

.dls-clan-hub .logo{display:flex;align-items:center;gap:10px;}

.dls-clan-hub .logo-mark{width:34px;height:34px;background:var(--blood);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:18px;color:#f6e6df;border-radius:2px;border:1px solid var(--tape);}

.dls-clan-hub .logo-text{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:0.06em;}

.dls-clan-hub nav{display:flex;gap:20px;flex-wrap:wrap;}

.dls-clan-hub nav a{color:var(--bone-dim);text-decoration:none;font-size:13px;letter-spacing:0.04em;text-transform:uppercase;}

.dls-clan-hub .page-head{padding:32px 32px 8px;}

.dls-clan-hub .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--tape);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:10px;}

.dls-clan-hub .page-head h1{font-family:'Bebas Neue',sans-serif;font-size:44px;letter-spacing:0.01em;margin-bottom:8px;}

.dls-clan-hub .page-head p{color:var(--bone-dim);font-size:15px;max-width:560px;}

.dls-clan-hub section{padding:16px 32px 24px;}

.dls-clan-hub .section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;}

.dls-clan-hub .section-head h2{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:0.02em;}

.dls-clan-hub .section-head span{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--bone-dim);}

.dls-clan-hub .composer{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:20px 24px;margin-bottom:28px;max-width:560px;}

.dls-clan-hub .composer-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}

.dls-clan-hub .composer-field label{
    display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--tape);
    text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;
  }

.dls-clan-hub .composer-field input,
.dls-clan-hub .composer-field select,
.dls-clan-hub .composer-field textarea{
    width:100%;background:var(--panel-2);border:1px solid var(--border);border-radius:3px;
    color:var(--bone);font-family:'Inter',sans-serif;font-size:13.5px;padding:9px 11px;
  }

.dls-clan-hub .composer-field textarea{resize:vertical;min-height:56px;}

.dls-clan-hub .schedule-btn{
    font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
    padding:10px 20px;border-radius:3px;border:none;
    background:var(--tape);color:#2b1d05;cursor:pointer;
  }

.dls-clan-hub .events{display:flex;flex-direction:column;}

.dls-clan-hub .event{
    display:grid;grid-template-columns:70px 1fr auto;gap:20px;align-items:center;
    padding:16px 0;border-bottom:1px solid var(--border);
  }

.dls-clan-hub .event .when{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--tape);line-height:1.4;}

.dls-clan-hub .event h4{font-size:15px;font-weight:500;margin-bottom:3px;}

.dls-clan-hub .event p{color:var(--bone-dim);font-size:13px;}

.dls-clan-hub .event .team-tag{
    font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--bone-dim);
    text-transform:uppercase;letter-spacing:0.04em;margin-top:4px;display:inline-block;
  }

.dls-clan-hub .event .rsvp{
    font-family:'IBM Plex Mono',monospace;font-size:11px;padding:6px 12px;
    border:1px solid var(--border);border-radius:3px;color:var(--bone-dim);white-space:nowrap;
  }

.dls-clan-hub footer{padding:24px 32px;border-top:1px solid var(--border);display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);text-transform:uppercase;letter-spacing:0.05em;}


/* ---- from forum-topic-faq.html ---- */

.dls-clan-hub .breadcrumb{padding:20px 32px 0;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);}

.dls-clan-hub .breadcrumb a{color:var(--tape);text-decoration:none;}

.dls-clan-hub .page-head{padding:16px 32px 8px;}

.dls-clan-hub .page-head h1{font-family:'Bebas Neue',sans-serif;font-size:38px;letter-spacing:0.01em;margin-bottom:8px;}

.dls-clan-hub .page-head .meta{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);}

.dls-clan-hub .page-head .meta b{color:var(--tape);}

.dls-clan-hub section{padding:16px 32px 32px;}

.dls-clan-hub .qa-block{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:16px 20px;margin-bottom:12px;}

.dls-clan-hub .qa-block b{color:var(--tape);display:block;margin-bottom:6px;font-size:14px;}

.dls-clan-hub .qa-block p{color:var(--bone-dim);font-size:13.5px;}


/* ---- from forum-topic-important.html ---- */

.dls-clan-hub .page-head h1{font-family:'Bebas Neue',sans-serif;font-size:38px;letter-spacing:0.01em;margin-bottom:8px;color:var(--blood-bright);}

.dls-clan-hub .msg-block{background:rgba(184,56,42,0.06);border:1px solid var(--border);border-left:3px solid var(--blood-bright);border-radius:4px;padding:20px 24px;}

.dls-clan-hub .msg-block p{color:var(--bone);font-size:14.5px;}


/* ---- from forum.html ---- */

.dls-clan-hub nav{display:flex;gap:24px;flex-wrap:wrap;}

.dls-clan-hub .composer{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:16px 20px;margin-bottom:24px;}

.dls-clan-hub .composer textarea{width:100%;background:var(--panel-2);border:1px solid var(--border);border-radius:3px;color:var(--bone);font-family:'Inter',sans-serif;font-size:13px;padding:10px 12px;resize:vertical;min-height:56px;}

.dls-clan-hub .composer-preview{display:none;max-width:160px;border-radius:4px;margin-top:10px;border:1px solid var(--border);}

.dls-clan-hub .composer-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:10px;}

.dls-clan-hub .composer-footer p{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--bone-dim);}

.dls-clan-hub .upload-btn{cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);border:1px solid var(--border);border-radius:3px;padding:8px 12px;}

.dls-clan-hub .upload-btn input{display:none;}

.dls-clan-hub .post-btn{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;padding:9px 20px;border-radius:3px;border:none;background:var(--tape);color:#2b1d05;}

.dls-clan-hub .threads{display:flex;flex-direction:column;}

.dls-clan-hub .thread{display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--border);}

.dls-clan-hub .thread:first-child{border-top:1px solid var(--border);}

.dls-clan-hub .thread h4{font-size:14px;font-weight:500;margin-bottom:4px;}

.dls-clan-hub .thread h4 a{color:var(--tape);text-decoration:underline;}

.dls-clan-hub .thread p{color:var(--bone-dim);font-size:12px;}

.dls-clan-hub .thread .replies{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);text-align:center;min-width:50px;}

.dls-clan-hub .thread .replies b{display:block;color:var(--bone);font-size:16px;font-family:'Bebas Neue',sans-serif;}

.dls-clan-hub .thread .last{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);text-align:right;min-width:90px;}

.dls-clan-hub .thread .img-tag{display:inline-flex;align-items:center;gap:4px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--tape);border:1px solid var(--tape);border-radius:2px;padding:1px 6px;margin-top:5px;}


/* ---- from leadership.html ---- */

.dls-clan-hub .restricted-note{
    margin:20px 32px 0;
    font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);
    background:var(--panel);border:1px solid var(--border);border-left:2px solid var(--blood);
    padding:10px 14px;
  }

.dls-clan-hub .info-note{
    margin:12px 32px 0;
    font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);
    background:var(--panel);border:1px solid var(--border);border-left:2px solid var(--green);
    padding:10px 14px;
  }

.dls-clan-hub .commander-card{
    margin:24px 32px;padding:20px 24px;background:var(--panel);border:1px solid var(--tape);
    border-radius:4px;display:flex;align-items:center;gap:16px;
  }

.dls-clan-hub .rank-badge{
    width:48px;height:48px;border-radius:4px;background:var(--tape);color:#2b1d05;
    display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;
    font-size:15px;flex-shrink:0;
  }

.dls-clan-hub .commander-card h3{font-size:16px;font-weight:500;}

.dls-clan-hub .commander-card p{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);margin-top:2px;}

.dls-clan-hub .admin-card{
    margin:24px 32px 0;padding:20px 24px;background:var(--panel);border:1px solid var(--green);
    border-radius:4px;display:flex;align-items:center;gap:16px;
  }

.dls-clan-hub .rank-badge.admin{background:var(--panel-2);color:var(--green);border:1px solid var(--green);font-size:11px;}

.dls-clan-hub .admin-card h3{font-size:16px;font-weight:500;}

.dls-clan-hub .admin-card p{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);margin-top:2px;}

.dls-clan-hub .rank-row.locked{background:var(--panel-2);}

.dls-clan-hub .locked-tag{
    margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--green);
    border:1px solid var(--green);border-radius:3px;padding:6px 10px;text-transform:uppercase;
    letter-spacing:0.04em;display:flex;align-items:center;gap:6px;
  }

.dls-clan-hub section{padding:8px 32px 24px;}

.dls-clan-hub .rank-table{background:var(--panel);border:1px solid var(--border);border-radius:4px;overflow:hidden;}

.dls-clan-hub .rank-row{
    display:flex;align-items:center;gap:14px;padding:12px 18px;
    border-bottom:1px solid var(--border);
  }

.dls-clan-hub .rank-row:last-child{border-bottom:none;}

.dls-clan-hub .r4-avatar{
    width:34px;height:34px;border-radius:4px;border:2px solid var(--tape);
    background:repeating-linear-gradient(45deg, #2a2c20, #2a2c20 6px, #232519 6px, #232519 12px);
    background-size:cover;background-position:center;
    flex-shrink:0;cursor:pointer;position:relative;
  }

.dls-clan-hub .r4-avatar input{display:none;}

.dls-clan-hub .rank-row h3{font-size:14px;font-weight:500;}

.dls-clan-hub .rank-row p{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);}

.dls-clan-hub .rank-select{
    margin-left:auto;
    font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.04em;
    background:var(--panel-2);color:var(--bone);border:1px solid var(--border);border-radius:3px;
    padding:6px 10px;
  }

.dls-clan-hub .rank-select.is-r4{border-color:var(--tape);color:var(--tape);}

.dls-clan-hub .rank-footer{
    display:flex;justify-content:space-between;align-items:center;
    padding:14px 18px;background:var(--panel-2);
  }

.dls-clan-hub .rank-footer p{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--bone-dim);}

.dls-clan-hub .save-btn{
    font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
    padding:9px 20px;border-radius:3px;border:none;
    background:var(--tape);color:#2b1d05;
  }

.dls-clan-hub .save-status{
    font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--green);
    margin-left:12px;opacity:0;transition:opacity 0.2s;
  }

.dls-clan-hub .save-status.show{opacity:1;}

.dls-clan-hub .composer{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:16px 20px;margin-bottom:20px;}

.dls-clan-hub .post-btn{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;padding:9px 20px;border-radius:3px;border:none;background:var(--tape);color:#2b1d05;white-space:nowrap;}

.dls-clan-hub .thread .rank-inline{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--tape);}

.dls-clan-hub .thread .rank-inline.admin{color:var(--green);}

.dls-clan-hub .forum-note{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);background:var(--panel);border:1px solid var(--border);border-left:2px solid var(--tape);padding:10px 14px;margin-bottom:20px;}

.dls-clan-hub .warroom-panel{
    margin:8px 32px 24px;padding:16px 20px;background:var(--panel);border:1px solid var(--blood);
    border-radius:4px;display:flex;justify-content:space-between;align-items:center;
  }

.dls-clan-hub .warroom-panel h4{font-size:14px;font-weight:500;margin-bottom:2px;}

.dls-clan-hub .warroom-panel p{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);}

.dls-clan-hub .warroom-btn{
    font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
    padding:9px 18px;border-radius:3px;text-decoration:none;
    background:transparent;color:var(--blood-bright);border:1px solid var(--blood);
    white-space:nowrap;
  }


/* ---- from roster.html ---- */

.dls-clan-hub .team-group{margin-bottom:28px;}

.dls-clan-hub .team-group-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border);}

.dls-clan-hub .team-group-head h2{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:0.02em;}

.dls-clan-hub .team-group-head span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);}

.dls-clan-hub .member-row{
    display:flex;align-items:center;gap:14px;padding:10px 14px;
    background:var(--panel);border:1px solid var(--border);border-radius:4px;margin-bottom:8px;
  }

.dls-clan-hub .member-avatar{
    width:36px;height:36px;border-radius:4px;border:2px solid var(--tape);
    background:repeating-linear-gradient(45deg, #2a2c20, #2a2c20 6px, #232519 6px, #232519 12px);
    background-size:cover;background-position:center;
    flex-shrink:0;cursor:pointer;position:relative;
  }

.dls-clan-hub .member-avatar input{display:none;}

.dls-clan-hub .member-row h3{font-size:14px;font-weight:500;}

.dls-clan-hub .member-row p{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);}

.dls-clan-hub .member-tag{
    margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--tape);
    border:1px solid var(--tape);border-radius:2px;padding:2px 7px;text-transform:uppercase;
    letter-spacing:0.04em;white-space:nowrap;
  }

.dls-clan-hub .member-tag.plain{color:var(--bone-dim);border-color:var(--border);}


/* ---- from rules.html ---- */

.dls-clan-hub .banner{
    position:relative;height:160px;
    background:
      linear-gradient(180deg, rgba(20,21,15,0.15) 0%, rgba(20,21,15,0.95) 100%),
      repeating-linear-gradient(45deg, #2a2c20, #2a2c20 12px, #232519 12px, #232519 24px);
    background-size:cover;background-position:center;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    border-bottom:2px solid var(--tape);
  }

.dls-clan-hub .banner-upload-btn{
    position:absolute;top:14px;right:14px;cursor:pointer;
    font-family:'Inter',sans-serif;font-size:11px;font-weight:600;
    padding:7px 12px;border-radius:3px;
    background:var(--panel);color:var(--bone);border:1px solid var(--tape);
  }

.dls-clan-hub .banner-label{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);text-transform:uppercase;letter-spacing:0.06em;}

.dls-clan-hub .page-head{padding:28px 32px 8px;}

.dls-clan-hub section{padding:16px 32px 32px;}

.dls-clan-hub .rule-block{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:18px 22px;margin-bottom:14px;}

.dls-clan-hub .rule-block h2{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:0.02em;margin-bottom:8px;color:var(--tape);}

.dls-clan-hub .rule-block p{color:var(--bone-dim);font-size:13.5px;}

.dls-clan-hub .rule-block ul{margin:8px 0 0 18px;color:var(--bone-dim);font-size:13.5px;}

.dls-clan-hub .rule-block li{margin-bottom:4px;}


/* ---- from team-alpha.html ---- */

:root{
    --bg:#14150f;
    --panel:#1c1e16;
    --panel-2:#23251b;
    --border:#34362a;
    --bone:#e9e4d2;
    --bone-dim:#9c9a86;
    --blood:#b8382a;
    --blood-bright:#d94a3a;
    --tape:#e08424;
    --green:#5b8a4a;
  }

.dls-clan-hub .bulletin{
    background:var(--blood);color:#f6e6df;font-family:'IBM Plex Mono',monospace;
    font-size:12px;letter-spacing:0.08em;padding:7px 24px;display:flex;
    align-items:center;gap:10px;text-transform:uppercase;
  }

.dls-clan-hub .team-head{
    padding:32px;
    border-bottom:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
  }

.dls-clan-hub .team-head-left{display:flex;align-items:flex-end;gap:16px;}

.dls-clan-hub .team-avatar{
    width:64px;height:64px;
    border-radius:4px;
    border:2px solid var(--tape);
    background:
      linear-gradient(180deg, rgba(20,21,15,0.1) 0%, rgba(20,21,15,0.6) 100%),
      repeating-linear-gradient(45deg, #2a2c20, #2a2c20 8px, #232519 8px, #232519 16px);
    display:flex;align-items:center;justify-content:center;
    font-family:'Bebas Neue',sans-serif;
    font-size:11px;
    color:var(--bone-dim);
    text-align:center;
    flex-shrink:0;
  }

.dls-clan-hub .team-head .tag{
    font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--tape);
    text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;
  }

.dls-clan-hub .team-head h1{font-family:'Bebas Neue',sans-serif;font-size:46px;letter-spacing:0.01em;}

.dls-clan-hub .team-head-meta{
    font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--bone-dim);
    text-align:right;
  }

.dls-clan-hub .team-head-meta .privacy{
    display:inline-flex;align-items:center;gap:6px;
    color:var(--tape);margin-top:4px;
  }

.dls-clan-hub .lock{width:9px;height:9px;border:1.5px solid var(--tape);border-radius:2px;position:relative;display:inline-block;}

.dls-clan-hub .lock::before{content:"";position:absolute;top:-5px;left:1px;width:5px;height:5px;border:1.5px solid var(--tape);border-bottom:none;border-radius:3px 3px 0 0;}

.dls-clan-hub .privacy-note{font-size:10px;color:var(--bone-dim);opacity:0.8;margin-top:2px;}

.dls-clan-hub .tabs{display:flex;gap:0;padding:0 32px;border-bottom:1px solid var(--border);}

.dls-clan-hub .tabs a{
    padding:14px 18px;font-size:13px;text-transform:uppercase;letter-spacing:0.04em;
    color:var(--bone-dim);text-decoration:none;border-bottom:2px solid transparent;
  }

.dls-clan-hub .tabs a.active{color:var(--bone);border-bottom-color:var(--blood-bright);}

.dls-clan-hub section{padding:32px;}

.dls-clan-hub .forum-note{
    font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);
    background:var(--panel);border:1px solid var(--border);border-left:2px solid var(--tape);
    padding:10px 14px;margin-bottom:20px;
  }

.dls-clan-hub .thread{
    display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:center;
    padding:16px 0;border-bottom:1px solid var(--border);
  }

.dls-clan-hub .thread .replies{
    font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);
    text-align:center;min-width:50px;
  }

.dls-clan-hub .thread .last{
    font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);
    text-align:right;min-width:90px;
  }

.dls-clan-hub .thread .img-tag{
    display:inline-flex;align-items:center;gap:4px;
    font-family:'IBM Plex Mono',monospace;font-size:10px;
    color:var(--tape);border:1px solid var(--tape);
    border-radius:2px;padding:1px 6px;margin-top:5px;
  }

.dls-clan-hub .live-panel{
    margin:20px 32px;
    padding:16px 20px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:4px;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }

.dls-clan-hub .live-panel-left{display:flex;align-items:center;gap:12px;}

.dls-clan-hub .live-dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 3px rgba(91,138,74,0.25);
    flex-shrink:0;
  }

.dls-clan-hub .live-panel h4{font-size:14px;font-weight:500;margin-bottom:2px;}

.dls-clan-hub .live-panel p{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);}

.dls-clan-hub .live-btn{
    font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
    padding:9px 18px;border-radius:3px;text-decoration:none;
    background:var(--tape);color:#2b1d05;
    white-space:nowrap;
  }

.dls-clan-hub .lead-panel{
    margin:0 32px 20px;
    padding:16px 20px;
    background:var(--panel);
    border:1px solid var(--blood);
    border-radius:4px;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }

.dls-clan-hub .lead-panel h4{font-size:14px;font-weight:500;margin-bottom:2px;}

.dls-clan-hub .lead-panel p{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);}

.dls-clan-hub .tools-panel{margin:0 32px 20px;padding:16px 20px;background:var(--panel);border:1px solid var(--border);border-radius:4px;}

.dls-clan-hub .tools-panel-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;}

.dls-clan-hub .tools-panel-head h4{font-size:14px;font-weight:500;}

.dls-clan-hub .tools-panel-head span{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--tape);text-transform:uppercase;letter-spacing:0.05em;border:1px solid var(--tape);border-radius:2px;padding:1px 6px;}

.dls-clan-hub .tools-row{display:flex;gap:10px;flex-wrap:wrap;}

.dls-clan-hub .tool-btn{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;padding:9px 14px;border-radius:3px;text-decoration:none;background:var(--panel-2);color:var(--bone);border:1px solid var(--border);}

.dls-clan-hub .tool-btn:hover{border-color:var(--tape);}

.dls-clan-hub .team-avatar{position:relative;overflow:hidden;text-align:center;}

.dls-clan-hub .team-avatar img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:2px;display:none;}

.dls-clan-hub .upload-btn{cursor:pointer;}

.dls-clan-hub .composer{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:14px 18px;margin-bottom:20px;}

.dls-clan-hub .composer textarea{width:100%;background:var(--panel-2);border:1px solid var(--border);border-radius:3px;color:var(--bone);font-family:'Inter',sans-serif;font-size:13px;padding:9px 11px;resize:vertical;min-height:44px;}

.dls-clan-hub .composer-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:10px;}

.dls-clan-hub .post-btn{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;padding:8px 16px;border-radius:3px;border:none;background:var(--tape);color:#2b1d05;white-space:nowrap;}

.dls-clan-hub .composer-preview{display:none;max-width:140px;border-radius:4px;margin-top:10px;border:1px solid var(--border);}

.dls-clan-hub .lead-btn{
    font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
    padding:9px 18px;border-radius:3px;text-decoration:none;
    background:transparent;color:var(--blood-bright);border:1px solid var(--blood);
    white-space:nowrap;
  }


/* ---- from team-bravo.html ---- */


/* ---- from team-charlie.html ---- */


/* ---- from team-delta.html ---- */


/* ---- from team-echo.html ---- */


/* ---- from team-foxtrot.html ---- */


/* ---- from teams.html ---- */

.dls-clan-hub .page-head{padding:40px 32px 24px;}

.dls-clan-hub .page-head .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    color:var(--tape);
    letter-spacing:0.1em;
    text-transform:uppercase;
    margin-bottom:10px;
  }

.dls-clan-hub .page-head h1{
    font-family:'Bebas Neue',sans-serif;
    font-size:44px;
    letter-spacing:0.01em;
    margin-bottom:8px;
  }

.dls-clan-hub .page-head p{
    color:var(--bone-dim);
    font-size:15px;
    max-width:480px;
  }

.dls-clan-hub section{padding:8px 32px 48px;}

.dls-clan-hub .teams{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
  }

.dls-clan-hub .team-card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:4px;
    padding:20px;
    position:relative;
  }

.dls-clan-hub .team-card::before,
.dls-clan-hub .team-card::after{
    content:"";
    position:absolute;
    width:10px;height:10px;
    border-top:2px solid var(--tape);
    border-left:2px solid var(--tape);
    top:6px;left:6px;
  }

.dls-clan-hub .team-card::after{
    top:auto;left:auto;
    bottom:6px;right:6px;
    border-top:none;border-left:none;
    border-bottom:2px solid var(--tape);
    border-right:2px solid var(--tape);
  }

.dls-clan-hub .team-card-avatar{
    width:36px;height:36px;border-radius:4px;border:2px solid var(--tape);
    background:repeating-linear-gradient(45deg, #2a2c20, #2a2c20 6px, #232519 6px, #232519 12px);
    background-size:cover;background-position:center;
    margin-bottom:10px;cursor:pointer;position:relative;
  }

.dls-clan-hub .team-card-avatar input{display:none;}

.dls-clan-hub .team-card-avatar.locked{cursor:default;opacity:0.6;}

.dls-clan-hub .team-card .tag{
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    color:var(--tape);
    text-transform:uppercase;
    letter-spacing:0.08em;
    margin-bottom:8px;
  }

.dls-clan-hub .team-card h3{
    font-family:'Bebas Neue',sans-serif;
    font-size:24px;
    margin-bottom:6px;
  }

.dls-clan-hub .team-card p{
    color:var(--bone-dim);
    font-size:13px;
    margin-bottom:14px;
  }

.dls-clan-hub .team-meta{
    display:flex;
    justify-content:space-between;
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--bone-dim);
    border-top:1px solid var(--border);
    padding-top:12px;
    margin-bottom:12px;
  }

.dls-clan-hub .team-card .btn{
    display:block;
    text-align:center;
    font-family:'Inter',sans-serif;
    font-size:12px;
    font-weight:600;
    padding:8px;
    border-radius:3px;
    text-decoration:none;
    background:transparent;
    color:var(--bone);
    border:1px solid var(--border);
  }


/* ---- from war-room.html ---- */

.dls-clan-hub .composer label{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--tape);text-transform:uppercase;letter-spacing:0.06em;display:block;margin-bottom:8px;}

.dls-clan-hub .thread.pinned{border-left:3px solid var(--blood-bright);padding-left:14px;}

.dls-clan-hub .thread p{color:var(--bone-dim);font-size:12px;margin-bottom:3px;}

.dls-clan-hub .thread .rank-inline.sl{color:var(--bone-dim);}

.dls-clan-hub .thread .pin-tag{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--blood-bright);border:1px solid var(--blood);border-radius:2px;padding:1px 6px;margin-top:6px;text-transform:uppercase;}


/* ==========================================================
   15. ASTRA SITE HEADER OVERRIDE
   Restyles Astra's REAL site-wide header (logo + primary menu)
   to match the dark "field bulletin" look, so it only needs to
   be built once instead of pasted into every page's content.

   NOT scoped under .dls-clan-hub — the header sits outside your
   page content, so these selectors target Astra's header markup
   directly, site-wide.

   Astra has changed some class names across versions. Several
   fallback selectors are included below for menu links so this
   keeps working across common Astra versions without edits.
   ========================================================== */

.site-header,
.main-header-bar,
.ast-above-header,
.ast-below-header{
  background:var(--bg) !important;
  border-color:var(--border) !important;
}

/* Header's own inner .ast-container has the same default side
   padding as the content one did — zero it so logo/menu reach
   the true edges instead of stopping short. A little breathing
   room is added back directly on the logo/nav themselves below,
   rather than relying on the container's padding. */
.site-header .ast-container{
  padding-left:0 !important;
  padding-right:0 !important;
  max-width:none !important;
  width:100% !important;
}
.site-header .site-primary-header-wrap{
  padding-left:32px !important;
  padding-right:32px !important;
}

/* Site title / logo area */
.site-header .site-title,
.site-header .site-title a{
  font-family:'Bebas Neue',sans-serif;
  font-size:26px;
  letter-spacing:0.05em;
  color:var(--bone) !important;
}
.site-header .site-title a:hover{color:var(--tape) !important;}
.site-header .site-description{
  font-family:'IBM Plex Mono',monospace;
  color:var(--bone-dim) !important;
}
.site-header .custom-logo-link img{
  max-height:40px;
  width:auto;
}

/* Primary navigation — several selectors for Astra version compatibility */
.main-header-bar-navigation .main-header-menu > li > a,
.main-header-bar-navigation .main-header-menu .menu-item a,
.ast-flex-menu .menu-item a,
.main-navigation ul li a{
  font-family:'Inter',sans-serif;
  font-size:13px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--bone-dim) !important;
}
.main-header-bar-navigation .main-header-menu > li > a:hover,
.main-header-bar-navigation .main-header-menu .menu-item a:hover,
.ast-flex-menu .menu-item a:hover,
.main-navigation ul li a:hover,
.main-header-bar-navigation .current-menu-item > a,
.ast-flex-menu .current-menu-item > a{
  color:var(--bone) !important;
}

/* Mobile menu toggle icon + panel */
.ast-mobile-menu-trigger-minimal .astra-mobile-menu-buttons svg,
.ast-mobile-menu-trigger-minimal .astra-mobile-menu-buttons{
  color:var(--bone) !important;
  fill:var(--bone) !important;
}
.ast-mobile-popup-drawer,
.ast-mobile-popup-drawer .main-header-menu{
  background:var(--panel) !important;
}
.ast-mobile-popup-drawer .main-header-menu li a{
  color:var(--bone) !important;
  border-bottom:1px solid var(--border) !important;
}

/* Sticky header shadow removal (dark bg makes default shadow look odd) */
.ast-primary-header-bar.ast-sticky-header,
.ast-mobile-header-active.ast-sticky-header-active .main-header-bar{
  box-shadow:none !important;
  border-bottom:1px solid var(--border) !important;
}


/* ==========================================================
   16. FULL-WIDTH OVERRIDE FOR CLAN-HUB PAGES
   Astra caps .entry-content at ~720px for readable blog text.
   Your original design was full-bleed, edge to edge, with no
   page-level width cap — each section handles its own 32px
   side padding already. Only removes Astra's cap on pages
   whose content is our dls-clan-hub wrapper, so ordinary blog
   posts / the default Sample Page keep normal readable width.
   ========================================================== */

.entry-content:has(> .dls-clan-hub){
  max-width:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.entry-content[data-ast-blocks-layout] > .dls-clan-hub,
.entry-content > .dls-clan-hub{
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
/* Astra's .ast-container has its own default 20px-per-side
   padding, applied at ALL widths (not just mobile) — this is
   the exact 40px gap between the header (full ast-container
   width) and the content (ast-container width minus its own
   padding). Only zero it on the specific ast-container that
   wraps our clan-hub content, so the header's own ast-container
   (and any ordinary blog post) keep Astra's normal padding. */
.ast-container:has(.dls-clan-hub){
  padding-left:0 !important;
  padding-right:0 !important;
  max-width:none !important;
  width:100% !important;
}


/* ==========================================================
   17. MOBILE RESPONSIVE
   None of the 16 original mockup files had a single @media
   query in them — the whole design was built desktop-only.
   This section adds real breakpoints so grids stack into a
   single column and text/padding scale down on phones,
   instead of overflowing sideways (the "white edge" bug).
   ========================================================== */

/* Safety net: never allow horizontal scroll regardless of
   what still doesn't fit perfectly below. */
.dls-clan-hub{ overflow-x:hidden; }

@media (max-width: 782px){

  /* Astra applies its OWN separate mobile padding to inner
     wrapper elements at narrow widths — a different rule than
     the one already overridden for desktop, so it was still
     winning here specifically on phones. Zero it out too. */
  .entry-content,
  .ast-container,
  #primary,
  #main,
  .site-content,
  .entry-content > .dls-clan-hub{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  /* Grids that were fixed at 3 or 4 columns → stack to 1 */
  .dls-clan-hub .stats,
  .dls-clan-hub .season-links,
  .dls-clan-hub .video-grid,
  .dls-clan-hub .teams,
  .dls-clan-hub .composer-row{
    grid-template-columns: 1fr !important;
  }

  /* Grid items were sized assuming 3-4 columns' worth of
     space; force them to fit whatever their column now is. */
  .dls-clan-hub .stat,
  .dls-clan-hub .season-link,
  .dls-clan-hub .video-slot,
  .dls-clan-hub .team-card{
    min-width: 0;
  }
  .dls-clan-hub .stat{
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }
  .dls-clan-hub .stat:last-child{ border-bottom: none; }

  /* Reduce side padding — 32px eats too much of a ~360-390px
     screen */
  .dls-clan-hub section,
  .dls-clan-hub .page-head,
  .dls-clan-hub header,
  .dls-clan-hub footer,
  .dls-clan-hub .team-head,
  .dls-clan-hub .breadcrumb{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Scale down oversized display headings */
  .dls-clan-hub .hero h1{ font-size: 34px !important; }
  .dls-clan-hub .page-head h1{ font-size: 30px !important; }
  .dls-clan-hub .team-head h1{ font-size: 30px !important; }

  /* Rows that assumed side-by-side space now stack */
  .dls-clan-hub .event,
  .dls-clan-hub .thread,
  .dls-clan-hub .composer-footer,
  .dls-clan-hub .team-head,
  .dls-clan-hub .team-head-left,
  .dls-clan-hub .commander-card,
  .dls-clan-hub .admin-card,
  .dls-clan-hub .warroom-panel,
  .dls-clan-hub .live-panel,
  .dls-clan-hub .lead-panel,
  .dls-clan-hub .rank-footer,
  .dls-clan-hub .tools-panel-head{
    flex-direction: column !important;
    align-items: flex-start !important;
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  /* Anything meant to be wide/fixed on desktop should never
     force horizontal scroll on a narrow screen */
  .dls-clan-hub img,
  .dls-clan-hub iframe,
  .dls-clan-hub video,
  .dls-clan-hub .video-frame{
    max-width: 100%;
  }

  /* Header nav wraps instead of squeezing/overflowing */
  .main-header-bar-navigation .main-header-menu{
    flex-wrap: wrap;
  }
}