@font-face {
  font-family: 'FC';
  src: url('/Assets/Fonts/FC-Fast/FC-Fastest-Bold-ver-1.01.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ==========================================================================
   1. GLOBAL VARIABLES & RESET
   ========================================================================== */
/* The :root selector houses your global variables accessible throughout your stylesheet */
:root {
  --bg: #090909; /* Deep velvet midnight pitch black background */
  --s1: #101010; /* Slightly lighter slate shade for subtle element separations */
  --s2: #151515; /* Secondary surface tint used on cards or inner blocks */
  --b: #1c1c1c; /* Clean dark border stroke baseline parameter */
  --bh: rgba(255, 94, 28, 0.3); /* Translucent glowing accent background mask */
  --ac: #ff5e1c; /* Neon signature blazing orange brand accent tint */
  --at: #ff9860; /* Soft cream-orange text variant for highlights */
  --t: #ebebeb; /* Crisp bright off-white reading text color */
  --tm: #555555; /* Muted neutral grey accent for labels and secondary phrases */
  --td: #242424; /* Heavy dark onyx fill reserved for extreme title text muting */
  --kick: #53fc18; /* Vibrant official fluorescent bright Kick platform brand green */
  --g: #22c55e; /* Traditional soft emerald alert confirmation success color */
  --r: #ef4444; /* High-alert sharp crimson danger error status indicator */
}

/* The universal selector targeting every single DOM element on the web page */
* {
  box-sizing: border-box; /* Integrates item borders and interior paddings neatly inside their widths */
  margin: 0; /* Completely wipes out default browser margin gaps */
  padding: 0; /* Completely wipes out default browser padding spacings */
}

/* Base level styling properties applied to the main scroll container window */
html {
  scroll-behavior: smooth; /* Animates view tracking transitions smoothly when clicking anchor links */
}

/* Global viewport fallback body adjustments */
body {
  background: var(
    --bg
  ); /* Fills your overall screen space canvas with your pitch dark asset variable */
  color: var(
    --t
  ); /* Paints system text globally using your crisp high-visibility layout off-white */
  font-family:
    "Space Grotesk", sans-serif; /* Sets primary geometric sans-serif typeface structure */
  overflow-x: hidden; /* Strict security measure eliminating awkward accidental side-to-side page shifting */
  line-height: 1.5; /* Loosens sentence heights up vertically to prevent reading strain */
}

/* ==========================================================================
   2. HEADER & NAVIGATION
   ========================================================================== */
/* The main top navigation container tracking across page scrolls */
.site-header {
  position: sticky; /* Glues the navigation bar securely down relative to the top window frame */
  top: 0; /* Pin coordinates set directly at the very top edge boundary */
  z-index: 100; /* Higher priority layer stacking integer guaranteeing header floats over cards */
  display: flex; /* Converts header structure to Flexbox layout models */
  justify-content: space-between; /* Spreads elements evenly (Logo left, Nav center, Button right) */
  align-items: center; /* Sets centered horizontal line alignment for all items in the row */
  padding: 0 60px; /* Generates a generous 60px inside spacing wall on the left and right flanks */
  height: 60px; /* Restricts the total maximum vertical box metric thickness of your header */
  border-bottom: 1px solid var(--s1); /* Draws a razor-thin structural line directly underneath the navigation bar */
  background: rgba(
    9,
    9,
    9,
    0.94
  ); /* Translucent dark ink backing color to allow content blending */
  backdrop-filter: blur(
    12px
  ); /* Renders standard blurred glass layer effect over underlying page text */
}

/* The left-anchored textual brand logo mark styling */
.site-logo {
  cursor: pointer; /* Changes cursor to a hand pointer when hovering over the logo */
  font-family:
    "FC", monospace; /* Applies developer monospace tech font to give game developer vibes */
  font-size: 25px; /* Expands corporate text sizing footprint scale */
  font-weight: 700; /* Implements bold structural presentation */
  letter-spacing: 0.18em; /* Spreads out text letters to maximize logo legibility */
  color: var(
    --t
  ); /* Paints corporate asset using your signature burning orange variable color */
  transition: color 0.2s ease; /* Smoothly morphs logo text color when mouse hovers over it */
}

.site-logo:hover {
  color: var(--ac
  ); /* Switches logo text to a soft cream-orange highlight on mouse hover */
}

/* Center link navigation list structure adjustments */
.site-nav {
  display: flex; /* Arranges child list points horizontally side by side */
  justify-content: center; /* Centers the navigation list items across the header row */
  gap: 24px; /* Generates a fixed grid distance wall between adjacent points */
  list-style: none; /* Strips off standard ugly default bullet list dots */
}

/* Text links hidden within navigation list items */
.site-nav a {
  color: var(
    --tm
  ); /* Colors text standard neutral muted gray to drop initial attention weight */
  text-decoration: none; /* Cleans off standard classic anchor hyperlink text underlines */
  font-size: 14px; /* Standardizes clear nav reading footprint heights */
  font-weight: 500; /* Medium-bold stroke settings */
  transition: color 0.2s ease; /* Gracefully morphs color hues when standard mouse states interact */
  text-transform: uppercase; /* Forces all navigation text to capitalize letters for a clean tech look */
}

/* Visual interaction trigger state when pointing at navigation text items */
.site-nav a:hover {
  color: var(
    --t
  ); /* Illuminates navigation text back to crisp white layout status on mouse hover */
}

.nav-toggle {
  display: none; /* Hides the mobile menu toggle button by default on larger screens */
}

.header-action {
  display: flex; /* Arranges child elements horizontally in a row */
  justify-content: flex-end; /* Pushes the action button to the far right side of the header */
  align-items: center; /* Vertically centers the button within the header row */
  gap: 16px; /* Creates a fixed spacing between the button and any adjacent elements */
}

/* The right-anchored action button wrapper anchor profile */
.header-action__btn {
  color: var(--s1
  ); /* Initial muted text appearance matching other standard components */
  text-decoration: none; /* Disables anchor hyperlink underlines */
  font-size: 15px; /* Standardizes button text label scale */
  padding: 8px 16px; /* Outer structural protective spacing perimeter molding the box dimensions */
  border-radius: 4px; /* Moderately shapes down hard box corners to deliver smooth edge curves */
  background: var(
    --t
  ); /* Initially backgrounds the card using a stark inverted solid bright white fill */
  transition:
    background 0.2s ease,
    color 0.2s ease; /* Seamlessly updates backgrounds and textual highlights on mouse hovers */
    text-transform: uppercase; /* Forces all button text to capitalize letters for a clean tech look */
}

/* Mouse hover structural state adjustments targeting the action call header block */
.header-action__btn:hover {
  color: var(--t
  ); /* Flips text layout visibility metrics to clear off-white status */
  background: var(
    --ac
  ); /* Snaps background fills completely into blazing orange focus profiles */
}

.site-logo,
.site-nav,
.header-action {
  flex: 1;
}


/* ==========================================================================
   3. HERO SECTION
   ========================================================================== */
/* Full screen entry section block framework scaling definitions */
.hero-section {
  padding: 100px 48px 88px; /* Balanced padding allocation preventing layout content from touching screens */
  position: relative; /* Grants absolute sub-elements strict anchor boundaries to lock inside */
  overflow: hidden; /* Crops out oversize graphical background elements safely from crashing layouts */
  min-height: 92vh; /* Forces section block heights to span across 92% of the total screen space */
  display: flex; /* Invokes flexbox mechanics */
  align-items: flex-end; /* Drops content group vertically right onto the lower baseline floor area */
}

/* Background overlay generating structural tech layout matrix grids */
.hero-grid {
  position: absolute; /* Detaches element boundaries entirely from normal page rendering structures */
  inset: 0; /* Pin commands locking layer vectors out completely across all four corners */
  background-image:
    linear-gradient(var(--b) 1px, transparent 1px),
    /* Renders horizontal grid wires tracking across views */
    linear-gradient(90deg, var(--b) 1px, transparent 1px); /* Renders intersecting vertical grid lines crossing planes */
  background-size: 72px 72px; /* Dictates block dimensions making up your grid squares */
  mask-image: radial-gradient(
    ellipse 90% 85% at 15% 65%,
    black 10%,
    transparent 72%
  ); /* Softly fades out grids towards screen edges */
  opacity: 0.55; /* Reduces raw intensity to keep background details elegant and non-distracting */
  z-index: 1; /* Places matrix patterns safely behind interactive foreground text stacks */
}

/* Floating orange atmospheric background glow bubble */
.hero-glow {
  position: absolute; /* Independent layer floating mechanics asset assignment */
  width: 760px; /* Absolute shape horizontal space scale dimensions */
  height: 520px; /* Absolute shape vertical space scale dimensions */
  border-radius: 50%; /* Softens boundaries into perfect circular ellipse profiles */
  background: radial-gradient(
    ellipse,
    rgba(255, 94, 28, 0.055),
    transparent 65%
  ); /* Projects ultra-smooth orange light bleeding outer gradients */
  bottom: -120px; /* bleeds shape down below lower baseline grid coordinates */
  left: -160px; /* bleeds layout out past left screen window coordinates */
  z-index: 1; /* Layer values backing objects behind critical body text tags */
}

/* The textual component containment block guarding content safe zones */
.hero-section__inner {
  position: relative; /* Standard baseline layering wrapper setup specifications */
  max-width: 1060px; /* Halts text expansion past optimal line limits */
  margin: 0 auto; /* Completely centers the layout area inside your monitor workspace grids */
  width: 100%; /* Fluctuates scales dynamically to fill variable screen boundaries */
  z-index: 2; /* Forces all textual items above ambient glowing orb objects so links stay clickable */
}

/* Horizontal organization wrapper keeping badges organized */
.hero-tags {
  display: flex; /* Places layout badge capsules in standard uniform row vectors */
  gap: 12px; /* Controls space separating individual tag items */
  flex-wrap: wrap; /* Permits elements to snap down onto sub lines gracefully on smaller phones */
  margin-bottom: 24px; /* Pushes main large heading block down away from label blocks */
}

/* Micro metadata pill label capsule formatting styling */
.hero-tag {
  font-family:
    "JetBrains Mono", monospace; /* Monospace typography enforcing cyber engineering aesthetic rules */
  font-size: 14px; /* Legible tracking label sizes */
  letter-spacing: 0.15em; /* Increases character distance for structured sub-text presentation labels */
  text-transform: uppercase; /* Capitalizes structural lettering tags */
  padding: 4px 8px; /* Snug inside perimeter spacing shaping corporate capsule parameters */
  border-radius: 4px; /* Clean uniform layout corner framing properties */
  border: 1px solid rgba(255, 94, 28, 0.28); /* Translucent signature crisp orange hairline container boundaries */
  color: var(
    --ac
  ); /* Sets label color variables to primary orange visibility parameters */
}

/* Modifier class targeting custom platform streamer badge properties exclusively */
.hero-tag--kick {
  border-color: rgba(
    83,
    252,
    24,
    0.28
  ); /* Sets hairline container border color metrics to soft Kick green translucent values */
  color: var(
    --kick
  ); /* Ignites label text colors using official fluorescent Kick green styles */
}

/* Extreme scale title word heading properties block */
.hero-section__title {
  font-size: clamp(
    68px,
    11vw,
    126px
  ); /* Fluid typography formulas (Min 68px, Scaled 11vw, Max 126px) */
  font-weight: 700; /* Heavy display weight profiles maximizing page presence architectures */
  letter-spacing: -0.035em; /* Squeezes letters slightly closer together to lock structural headline visuals */
  line-height: 0.9; /* Heavy sentence collapse preventing gap anomalies between massive broken words */
  margin-bottom: 20px; /* Generates layout breathing space right above description text points */
}

/* Utility modifier darkening secondary words inside massive headings down into stealth states */
.hero-section__muted {
  color: var(
    --td
  ); /* Dips target lettering directly into stealth obsidian gray profiles */
}

/* The secondary structural body block description text rules */
.hero-section__description {
  font-size: 15px; /* Crisp base paragraph reading scales */
  color: var(
    --tm
  ); /* Settles textual reading layouts into standard soft muted slate gray */
  line-height: 1.65; /* Increases breathing space height between reading lines for text readability */
  max-width: 400px; /* Strict horizontal bounds layout stops forcing clean line wrap breaks */
  margin-bottom: 36px; /* Pushes downstream button groups down away from text blocks */
}

/* Row wrapper formatting utility keeping macro buttons neatly sorted */
.hero-actions {
  display: flex; /* Rows action nodes gracefully across standard grid planes */
  gap: 16px; /* Spacing block distance inserted between individual buttons */
  flex-wrap: wrap; /* Allows smaller screens to roll buttons onto second layers smoothly */
}

/* The overarching master button framework baseline architectural model rule */
.button {
  display: inline-flex; /* Invokes flexbox while forcing container block structures to respect flow baselines */
  align-items: center; /* Sets centered horizontal line alignment for items inside the button container box */
  padding: 11px 22px; /* Perfectly scaled outer protection perimeter molding action call assets */
  text-decoration: none; /* Disables anchor hyperlink lines */
  text-transform: uppercase; /* Enforces capitalization behaviors to mirror structural esports brand elements */
  border-radius: 4px; /* Sharp box smoothing parameter values */
  font-weight: 600; /* Pronounced text stroke parameters prioritizing action items */
  transition: all 0.2s ease; /* Tracks overall attribute adjustments smoothly across variable animation frames */
}

/* Custom platform coloring rules targeting Kick components */
.button--kick {
  background: var(
    --kick
  ); /* Surfaces button blocks fully inside trademark Kick fluorescent green */
  color: #000000; /* High contrast void black text color profile ensuring maximum visibility */
}

/* Formats custom image assets nested within active Kick button environments */
.button--kick .kick-icon {
  width: 16px; /* Locks absolute pixel width footprints */
  height: 16px; /* Locks absolute pixel height dimensions */
  object-fit: contain; /* Protects image proportions from stretching or morphing anomalies */
  margin-right: 8px; /* Generates fixed breathing distance spacing directly to the right of graphics */
  flex-shrink: 0; /* Denies browsers rights to warp or squeeze image footprints on small sizes */
}

/* Visual interaction trigger state when hovering over Kick actions */
.button--kick:hover {
  opacity: 0.9; /* Mild opacity adjustment letting background tones gently blend into the button */
}

/* Custom layout formatting rules targeting TikTok components */
.button--tiktok {
  border: 1px solid var(--b); /* Standardizes minimal muted border outline framing designs */
  color: var(
    --t
  ); /* Paints typography using clear crisp off-white parameters */
}

/* Target control structural rule modifying internal Font Awesome TikTok glyphs */
.button--tiktok .fa-tiktok {
  margin-right: 8px; /* Generates fixed structural spacing wall directly before title text phrases */
}

/* Visual hover adjustments targeting customized TikTok action nodes */
.button--tiktok:hover {
  background: var(
    --s1
  ); /* Shifts background panel canvas over to slightly lighter dark slate profiles */
  border-color: var(
    --tm
  ); /* Brightens up perimeter boundary hairlines to draw eye focus points */
}

/* Stylized textual link button configurations */
.button--link {
  color: var(--tm); /* Subdued slate initial color profile layout setups */
}

/* Visual hover parameters targeting custom link style elements */
.button--link:hover {
  color: var(
    --t
  ); /* Snaps text color to full brightness upon active cursor intersections */
}

/* ==========================================================================
   4. CONTENT GLOBAL LAYOUT STRUCTURE
   ========================================================================== */
/* Reusable global section box layout controller framework */
.section-container {
  width: 100%; /* Permits containers to absorb maximum fluid space environments dynamically */
  max-width: 1100px; /* Firm structural layout stop blocking layout growth on ultra-wide screens */
  margin: auto; /* Fully clusters sections straight down center lines of desktop workspaces */
  padding: 4rem 2rem; /* Heavy multi-unit macro breathing boundaries wrapping core setup spaces */
}

/* Technical system category labeling formatting rules */
.section-label {
  font-family:
    "JetBrains Mono", monospace; /* Technical monospace font enforcing precise configuration file aesthetics */
  font-size: 14px; /* Crisp micro detail formatting size parameters */
  letter-spacing: 0.22em; /* Extreme character spread maximizing technical indexing layout presence */
  text-transform: uppercase; /* Enforces capitalization attributes across target labeling assets */
  color: var(
    --ac
  ); /* Sets color maps over to high visibility burning orange profile lines */
  margin-bottom: 1.5rem; /* Dictates clear downward padding pushing layout headings down away from labels */
  display: flex; /* Flex rows label text along with ornamental vector additions */
  align-items: center; /* Perfectly aligns the text and the line on a central level plane */
  gap: 10px; /* Spacing block inserted between label text and the line decoration */
}

/* Ornamental trailing design line trailing your technical labels */
.section-label::after {
  content: ""; /* Generates a virtual element block framework without text requirements */
  display: block; /* Dictates standard element block rendering mechanics */
  width: 28px; /* Fixed micro width line dimensions */
  height: 1px; /* Razor thin line thickness mapping rules */
  background: rgba(
    255,
    94,
    28,
    0.35
  ); /* Translucent orange tone extending elegantly from text fields */
}

/* Global H2 section title configuration variables */
h2 {
  font-size: clamp(
    28px,
    4vw,
    44px
  ); /* Smooth size scaling parameters (Min 28px, Scaled 4vw, Max 44px) */
  font-weight: 700; /* Rigid heavy geometric emphasis profiles */
  letter-spacing: -0.02em; /* Squeezes text tracking vectors slightly for optimized structural layouts */
  line-height: 1.1; /* Tight line height to ensure short title blocks present cleanly */
  margin-bottom: 40px; /* Large layout space separating headers from portfolio content cards */
}

/* ==========================================================================
   5. REFACTORED GEAR GRID COMPONENT
   ========================================================================== */
/* Multi-column grid system housing item layout data objects */
.gear-list {
  display: grid; /* Invokes native CSS Grid architecture components */
  grid-template-columns: repeat(
    auto-fit,
    minmax(280px, 1fr)
  ); /* Responsive formula creating columns dynamically without media queries */
  gap: 20px; /* Uniform spacing separation gutter paths wrapping all internal layout grids */
}

/* Individual Portfolio Card Structure Components */
.gear-item {
  display: flex; /* Activates internal flexible grid architecture processes */
  flex-direction: column; /* Stacks image canvas modules and info description rows vertically */
  background: #111112; /* Deep charcoal dark matte premium carbon aesthetic fill */
  border: 1px solid #1f1f22; /* Fine low-contrast charcoal edge outline tracking container perimeters */
  border-radius: 16px; /* Modern smooth corner rounding configurations shaping layout parameters */
  padding: 30px; /* Uniform protective cushion wall boxing nested assets comfortably inside */
  text-decoration: none; /* Erases underlying hyperlink anchor indicators across all structural text fields */
  transition:
    transform 0.25s ease,
    border-color 0.25s ease; /* Tracks position shifts and color fades during pointer interactions */
}

/* Interaction hover configurations targeting active gear item card frames */
.gear-item:hover {
  border-color: #333336; /* Illuminates border outline value scales to show physical selection highlights */
  transform: translateY(
    -4px
  ); /* Smoothly lifts target cards up by 4px on screens to create depth response */
}

/* High contrast isolated presentation boxes holding product photography assets */
.gear-item__image {
  display: flex; /* Invokes flexible centering row processes inside picture boxes */
  aspect-ratio: 1 / 1; /* Strict aspect ratio formula forcing card photos into perfect squares across dynamic grid shifts */
  align-items: center; /* Vertically aligns images straight down center coordinates */
  justify-content: center; /* Horizontally centers product pictures straight down center axes */
  background: #ffffff; /* Crisp pure studio white backdrop canvas rendering technical details flawlessly */ /* Soft corner molding applied right to image framing parameters */
  padding: 33px; /* Deep studio margin spacing wrapping inner equipment items beautifully */
  overflow: hidden; /* Enforces strict clip masks so zoom actions never bleed past boundaries */
}

/* Underlying product image items within frame configurations */
.gear-item__image img {
  max-width: 100%; /* Halts graphic stretching past standard horizontal box bounds */
  max-height: 100%; /* Halts graphic stretching past standard vertical box limits */
  object-fit: contain; /* CRITICAL: Enforces secure ratio containment boxing so gear pictures are never cut off */
  transition: transform 0.3s ease; /* Orchestrates micro-bounce zoom tracking variables smoothly */
}

/* Micro interaction zoom triggers targeting active product images */
.gear-item:hover .gear-item__image img {
  transform: scale(
    1.03
  ); /* Bounces product equipment up by 3% in physical scale when mouse highlights cards */
}

/* Card metadata informational container layer blocks */
.gear-item__content {
  margin-top: 16px; /* Downward breathing distance gap separating text rows from white display frames */
  padding: 16px 4px 0 4px; /* Added 16px top padding to generate text breathing room directly under our custom line */
  position: relative; /* CRITICAL: Establishes context boundary tracking coordinates for our absolute line layout */
}

/* THE ZERO LAYOUT-SPACE BORDER LINE
   Creates a floating divider using a pseudo-element. Absolute positioning 
   removes it completely from the box-model document flow, ensuring it renders
   without occupying space or throwing card layouts off by a single pixel. */
.gear-item__content::before {
  content: ""; /* Generates structural layout canvas without typing visible text data */
  position: absolute; /* Detaches borders fully from standard flow so they occupy ZERO document space layout grids */
  top: 0; /* Pins line coordinates straight along the absolute upper ceiling of the text container box */
  left: 4px; /* Keeps line edges beautifully aligned with text paddings on left sides */
  right: 4px; /* Keeps line edges beautifully aligned with text paddings on right sides */
  height: 1px; /* Locks custom line vertical thickness variables precisely to a crisp single pixel */
  background: #1f1f22; /* Standard charcoal gray accent paint blending line elegantly with card frames */
}

/* Horizontal metadata formatting wrapper blocks */
.gear-item__header {
  display: flex; /* Rows layout headings alongside arrow vector icon links */
  justify-content: space-between; /* Pushes title text blocks left and tracking arrow symbols right */
  align-items: flex-start; /* Locks baseline alignment coordinates straight down upper margins */
  gap: 8px; /* Anti-collision distance barrier stopping words from running straight into icon matrices */
}

/* Core item metadata description heading typography profiles */
.gear-item__header h3 {
  margin: 0; /* Disables heading paragraph layout overrides */
  color: #ffffff; /* Pure white coloration forcing technical product names to pop vividly */
  font-size: 15px; /* Clean refined grid header scale metrics */
  font-weight: 600; /* Semi-bold structural text density definitions */
  line-height: 1.3; /* Snug row height management tracking across long wrap paths */
}

/* Mini vector link tracking arrows inside header matrices */
.gear-item__icon {
  width: 14px; /* Fixed pixel layout widths */
  height: 14px; /* Fixed pixel layout heights */
  margin-top: 2px; /* Nudges vector arrows slightly lower down for optimized balance relative to text heights */
  color: var(
    --tm
  ); /* Colors links neutral slate gray initially to preserve text visibility balances */
  flex-shrink: 0; /* Blocks structural browser compression mechanics from smashing vector layouts */
  transition:
    transform 0.25s ease,
    color 0.25s ease; /* Tracks arrow shifts and color morphing animations concurrently */
}

/* Interaction tracking arrow response adjustments targeting active cards */
.gear-item:hover .gear-item__icon {
  transform: translate(
    3px,
    -3px
  ); /* Dynamic physics translation moving arrow elements out up-right along 45-degree vectors */
  color: #ffffff; /* Snaps icon values into pure white brilliance states on active hovers */
}

/* Secondary portfolio equipment description text settings */
.gear-item__content p {
  margin: 4px 0 0 0; /* Tight top spacing context separating text from header names */
  color: #8e8e93; /* Muted neutral institutional silver grey color profile maximizing system hierarchies */
  font-size: 13px; /* Compact description layout reading scales */
  line-height: 1.45; /* Breathable paragraph line spacing for effortless scannability */
}

/* ==========================================================================
   6. CS2 SETTINGS PANEL COMPONENT
   ========================================================================== */
/* Outer card wrapper housing the entire tabbed settings widget */
.settings-panel {
  background: var(--s1); /* Fills the panel with the slightly-lighter dark surface variable */
  border: 1px solid var(--b); /* Thin baseline border stroke tracing the panel's outer edge */
  border-radius: 8px; /* Rounds the panel's outer corners for a softer card feel */
  overflow: hidden; /* Clips any inner content (like the tab slider) to the panel's rounded bounds */
}

/* Top bar strip holding the tab buttons and the version tag */
.stbar {
  background: var(--s2); /* Slightly distinct surface tint separating the tab bar from the body below */
  border-bottom: 1px solid var(--b); /* Thin divider line separating the tab bar from the settings content */
  padding: 0 24px; /* Horizontal breathing room on both sides of the bar's contents */
  display: flex; /* Lays the tab group and version label out in a row */
  align-items: center; /* Vertically centers the tabs and version label within the bar's height */
  justify-content: space-between; /* Pushes the tabs to the left and the version tag to the right */
  height: 48px; /* Fixed vertical height for the tab bar strip */
}

/* Row container wrapping the individual tab buttons */
.stabs {
  display: flex; /* Lines up the tab buttons horizontally */
  position: relative; /* Establishes a positioning context so the tab-slider can anchor absolutely inside it */
}

/* The smooth moving background highlight */
.tab-slider {
  position: absolute; /* Detaches the slider from normal flow so it can glide freely under the tabs */
  bottom: 0; /* Pins the slider to the bottom edge of the tab row */
  left: 0; /* Default starting horizontal position before JavaScript repositions it */
  height: 2px; /* Thin bottom highlight line (or make it 100% height for a capsule fill) */
  background: var(--ac); /* Your accent color variable */
  transition:
    transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    width 0.3s cubic-bezier(0.25, 1, 0.5, 1); /* Smoothly animates the slider's position and width between tabs */
  z-index: 1; /* Keeps the slider beneath the tab text but above the bar's background */
}

/* Individual clickable tab button styling */
.stab {
  font-family: "JetBrains Mono", monospace; /* Technical monospace font matching the config-file aesthetic */
  font-size: 11.5px; /* Compact label sizing for the tab text */
  letter-spacing: 0.15em; /* Spreads tab letters apart for a structured technical look */
  text-transform: uppercase; /* Forces tab labels into capital letters */
  padding: 14px 16px; /* Clickable padding area surrounding each tab's text */
  color: var(--tm); /* Muted default color for inactive tabs */
  cursor: pointer; /* Signals to users that each tab is an interactive click target */
  user-select: none; /* Prevents accidental text selection when users click tabs repeatedly */
  position: relative; /* Keeps tab text properly stacked above the sliding highlight element */
  z-index: 2; /* Sits text safely above the moving highlight */
  transition: color 0.2s ease; /* Smoothly fades the tab's color when switching states */
}

/* Hover state for tab buttons */
.stab:hover {
  color: var(--t); /* Brightens tab text to full white while the cursor hovers over it */
}

/* Modified active class to rely on the moving slider line instead */
.stab.on {
  color: var(--ac); /* Colors the currently active tab in the accent orange */
}

/* Wrapper holding whichever tab content pane is currently visible */
.s-body {
  padding: 32px; /* Generous inner spacing surrounding the settings content */
  position: relative; /* Provides a positioning context for internal animated content panes */
  overflow: hidden; /* Prevents sliding/fading content transitions from spilling outside the panel */
}

/* Tab Content Animation Handling */
.tcontent {
  display: none; /* Hides inactive tab panes completely from the layout by default */
  opacity: 0; /* Starts inactive panes fully transparent for a fade-in effect */
  transform: translateY(8px); /* Offsets inactive panes slightly downward for a subtle slide-in effect */
  transition:
    opacity 0.25s ease,
    transform 0.25s ease; /* Smoothly animates the fade and slide when a pane becomes active */
}

/* Trigger state when active */
.tcontent.on {
  display: block; /* Reveals the active tab pane in normal block flow */
  opacity: 1; /* Fades the active pane fully into view */
  transform: translateY(0); /* Settles the active pane into its natural resting position */
}

/* Grid row laying out individual setting entries within a tab pane */
.srow {
  display: grid; /* Uses CSS Grid to arrange setting items in a flexible multi-column layout */
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* Automatically fits as many 140px+ columns as space allows */
  gap: 24px 37px; /* Vertical and horizontal spacing between grid cells */
}

/* Individual label-plus-value setting entry */
.skitem {
  display: flex; /* Stacks the label and its value together as a flex column */
  flex-direction: column; /* Places the value directly beneath its label */
  gap: 10px; /* Small vertical gap separating the label text from its value */
}

/* Text label describing what a setting controls */
.sklabel {
  font-family: "JetBrains Mono", monospace; /* Technical monospace font for configuration-style labels */
  font-size: 13px; /* Small supporting label text size */
  text-transform: uppercase; /* Capitalizes setting labels for a consistent technical look */
  color: var(--tm); /* Muted gray tone keeping labels visually secondary to their values */
}

/* The actual configured value displayed for a setting */
.skvalue {
  font-family: "JetBrains Mono", monospace; /* Monospace font emphasizing the precise, technical nature of the value */
  font-size: 18px; /* Larger size than the label so the value stands out */
  color: var(--t); /* Bright off-white color making the value the visual focal point */
  font-weight: 700; /* Bold weight adding emphasis to the displayed value */
  line-height: 1; /* Tight line height keeping the value compact */
}

/* Modifier shrinking a value's font slightly when text is longer */
.skvalue.sm {
  font-size: 20px; /* Adjusted size variant used for longer value strings */
}

/* Modifier coloring a value green to indicate an enabled/on state */
.skvalue.on-c {
  color: var(--g); /* Uses the success-green variable to flag an active setting */
}

/* Modifier coloring a value red to indicate a disabled/off state */
.skvalue.off-c {
  color: var(--r); /* Uses the danger-red variable to flag an inactive setting */
}

/* Thin horizontal divider line separating grouped setting rows */
.sdiv {
  height: 1px; /* Razor-thin divider thickness */
  background: var(--b); /* Uses the standard border color for a subtle separating line */
  margin: 24px 0; /* Vertical spacing above and below the divider */
}

/* Wrapper laying out the live crosshair preview next to the share-code block */
.xhair-wrap {
  display: inline-flex; /* Lays the crosshair preview and code block out side by side, sized to their content */
  align-items: center; /* Vertically centers the preview and code block relative to each other */
  gap: 18px; /* Horizontal spacing between the crosshair preview and the share-code text */
  background: #0c1a0c; /* Subtle dark green-tinted background evoking an in-game HUD feel */
  border: 1px solid #182818; /* Matching dark green border framing the preview block */
  border-radius: 4px; /* Softly rounds the preview block's corners */
  padding: 14px 20px; /* Inner spacing cushioning the preview and code text */
  margin-top: 20px; /* Vertical spacing separating this block from the settings grid above it */
}

/* Bounding box sizing the crosshair preview graphic */
.xhair {
  width: 36px; /* Fixed width bounding box for the crosshair preview */
  height: 36px; /* Fixed height tracking bounding dimensions */
  position: relative; /* Establishes a positioning context for the crosshair's pseudo-element lines */
  flex-shrink: 0; /* Prevents the crosshair box from being squeezed by its flex siblings */
}

/* Vertical lines (Top and Bottom) */
.xhair::before {
  content: ""; /* Generates an empty element used purely for drawing the vertical crosshair strokes */
  position: absolute; /* Detaches the pseudo-element from flow so it can center within the crosshair box */
  width: 2px; /* Thin stroke width for the vertical line segments */
  height: 6px; /* Length of each vertical stroke segment */
  background: transparent; /* Keeps the element itself invisible; the box-shadow below draws the actual lines */
  left: calc(50% - 1px); /* Centers the stroke horizontally within the crosshair box */
  top: 50%; /* Positions the stroke's anchor point at the vertical center */
  transform: translateY(-50%); /* Fine-tunes true vertical centering by offsetting half the element's height */
  box-shadow:
    0 -7px 0 0 #ffffff,
    0 7px 0 0 #ffffff; /* Draws the actual top and bottom crosshair strokes using duplicated shadows */
}

/* Horizontal lines (Left and Right) */
.xhair::after {
  content: ""; /* Generates an empty element used purely for drawing the horizontal crosshair strokes */
  position: absolute; /* Detaches the pseudo-element from flow so it can center within the crosshair box */
  width: 6px; /* Length of each horizontal stroke segment */
  height: 2px; /* Thin stroke height for the horizontal line segments */
  background: transparent; /* Keeps the element itself invisible; the box-shadow below draws the actual lines */
  top: calc(50% - 1px); /* Centers the stroke vertically within the crosshair box */
  left: 50%; /* Positions the stroke's anchor point at the horizontal center */
  transform: translateX(-50%); /* Fine-tunes true horizontal centering by offsetting half the element's width */
  box-shadow:
    -7px 0 0 0 #ffffff,
    7px 0 0 0 #ffffff; /* Draws the actual left and right crosshair strokes using duplicated shadows */
}

/* Small caption labeling the share-code block */
.xcode-label {
  font-size: 11px; /* Small supporting caption text size */
  letter-spacing: 0.15em; /* Spreads caption letters apart for a technical label feel */
  text-transform: uppercase; /* Capitalizes the caption text */
  color: var(--tm); /* Muted gray tone keeping the caption visually secondary */
  margin-bottom: 4px; /* Small gap separating the caption from the code text below it */
}

/* Monospace text block displaying the actual crosshair share code */
.xcode {
  font-family: "JetBrains Mono", monospace; /* Monospace font matching the technical, copy-pasteable nature of the code */
  font-size: 16px; /* Readable size for the share-code string */
  color: #3f7a3f; /* Muted green tint tying the code text into the HUD-style green background */
  line-height: 1.5; /* Comfortable line spacing for the code's wrapped second line */
}

/* Box styling for a block of Steam launch-option flags */
.launch-box {
  background: var(--s2); /* Slightly distinct surface tint setting the launch box apart from the page */
  border: 1px solid var(--b); /* Thin baseline border stroke framing the launch box */
  border-radius: 4px; /* Softly rounds the launch box's corners */
  padding: 14px 18px; /* Inner spacing cushioning the launch-option text */
  font-family: "JetBrains Mono", monospace; /* Monospace font matching the technical command-line nature of launch flags */
  font-size: 12px; /* Compact text size fitting multiple flags comfortably */
  color: var(--at); /* Soft cream-orange tint highlighting the launch-option text */
  letter-spacing: 0.04em; /* Slight letter spacing improving readability of flag strings */
  line-height: 1.9; /* Generous line height separating each launch flag onto its own readable line */
  margin-top: 20px; /* Vertical spacing separating the launch box from content above it */
}


.streams-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}


.stream-item{
       background: var(--s1);
      border: 1px solid var(--b);
      border-radius: 6px;
      padding: 28px;
      display: flex;
        flex-direction: column;
        gap: 18px;
        text-decoration: none;
        color: var(--t);
        transition:
          border-color 0.25s,
          transform 0.25s;
      }

.steam-item:hover{
  border-color: var(--ac);
  transform: translateY(-4px);
}

.stream-item.kick-c:hover{
  border-color: rgba(83, 252, 24, 0.22);
}

.stream-item.tiktok-c:hover{
  border-color: rgba(255, 0, 80, 0.2);
}

.platform-row{
  display: flex;
  align-items: center;
  gap: 8px;
}

.pdot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ac);
}

.kick-c .pdot{
  background: var(--kick);
  box-shadow: 0 0 8px var(--kick);
}

.tiktok-c .pdot{
  background: #ff0050;
}

.pname{
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.kick-c .pname{
  color: var(--kick);
}

.tiktok-c .pname{
  color: #ff0050;
}

.handle{
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.stream-desc{
  font-size: 14px;
  color: var(--tm);
  line-height: 1.65;
}

.sarrow{
  font-size: 14px;
  color: var(--tm);
  margin-top: auto;
  transition: transform 0.25s ease, color 0.25s ease;
}

.stream-item:hover .sarrow{
  transform: translate(3px, -3px);
  color: var(--t);
}

.site-footer {
  border-top: 1px solid var(--b);
  padding: 40px 48px;
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.foot-brand, 
.foot-brand-mid, 
.foot-brand-right {
  flex: 1; 
}

.foot-brand {
  color: var(--tm);
}

.foot-brand-mid {
  text-align: center;
}

.foot-brand-right {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

.foot-brand-right a {
  color: var(--tm);
  text-decoration: none;
  transition: color 0.2s ease;
  font-size: 17px;
  
  /* Centers the icon glyphs vertically inside their link wrapper */
  display: inline-flex;
  align-items: center;
}

.foot-brand-right a:hover {
  color: var(--t);
}

/* Fix: Ensures your new custom Kick SVG changes color on hover along with the anchor link */
.foot-brand-right a svg {
  fill: currentColor;
  transition: fill 0.2s ease;
}


@media (max-width:768px){

.site-header{
    padding:0 20px;
    height:70px;
    position:relative;
}

.site-logo{
  font-size:20px;
  text-align:center;
}

.nav-toggle{
    display:block;
    background:none;
    border:none;
    color:var(--t);
    font-size:24px;
    cursor:pointer;
}

.header-action{
    display:none;
}

.site-nav{
    position:absolute;
    top:70px;
    left:0;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;

    padding:24px;

    background:rgba(9,9,9,.96);
    backdrop-filter:blur(18px);

    border-top:1px solid var(--b);

    opacity:0;
    visibility:hidden;
    transform:translateY(-15px);

    transition:
        opacity .25s,
        transform .25s,
        visibility .25s;
}

.site-nav.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.site-nav li{
    width:100%;
    list-style:none;
}

.site-nav a{
    display:block;
    width:100%;

    padding:14px 18px;

    border-radius:8px;

    text-align:center;

    transition:.25s;
}

.site-nav a:hover{
    background:var(--s2);
    color:var(--ac);
}
/* ==========================
   CS2 Settings (Mobile)
========================== */

.settings-panel{
    overflow:hidden;
}

.stbar{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    height:auto;
    padding:16px;
}

.cs2ver{
    font-size:12px;
    opacity:.7;
}

/* Tabs */

.stabs{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.tab-slider{
    display:none;
}

.stab{
    flex:1 1 calc(50% - 4px);
    text-align:center;
    padding:12px;
    border:1px solid var(--b);
    border-radius:6px;
    letter-spacing:.08em;
}

.stab.on{
    background:var(--ac);
    color:#fff;
    border-color:var(--ac);
}

/* Settings Grid */

.s-body{
    padding:20px;
}

.srow{
    grid-template-columns:1fr;
    gap:18px;
}

.skitem{
    padding-bottom:12px;
    border-bottom:1px solid var(--b);
}

.skvalue{
    font-size:16px;
}

/* Crosshair */

.xhair-wrap{
    width:100%;
    flex-direction:column;
    align-items:flex-start;
}

/* Launch options */

.launch-box{
    overflow-x:auto;
    white-space:nowrap;
    font-size:11px;
}

.foot-brand{
    font-size:12px;
}

}