/*
    Theme: AetherNetwork
    Prometheus Version: 1.7.0
    Designed to match the AetherNetwork rules page aesthetic.
    Light blue accent / deep space dark base.
*/

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
    --accent:         #4ab3e8;
    --accent-bright:  #72caff;
    --accent-dim:     #1e7fb8;
    --accent-glow:    rgba(74, 179, 232, 0.15);
    --accent-glow2:   rgba(74, 179, 232, 0.08);
    --bg:             #090d12;
    --bg-panel:       #0d1520;
    --bg-card:        #111e2e;
    --bg-input:       #0a1420;
    --border:         rgba(74, 179, 232, 0.12);
    --border-hover:   rgba(74, 179, 232, 0.35);
    --text-primary:   #e8f4fc;
    --text-secondary: #8ab4cc;
    --text-muted:     #4a6b82;
    --danger:         #e84a4a;
    --warning:        #e8b44a;
    --success:        #4ae882;
    --font:           'Inter', 'Segoe UI', sans-serif;
}

/* ============================================================
   FONT IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Inter:wght@300;400;500&display=swap');

/* ============================================================
   SPACE BACKGROUND — canvas injected by script below
   The body gets the dark base; the canvas sits fixed behind all content.
   ============================================================ */
body, .wrap {
    background: var(--bg) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
    font-family: var(--font) !important;
    font-weight: 400 !important;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Starfield canvas — injected by the <script> at bottom of this file's companion JS.
   Add the snippet from the bottom of this file into your header.php or footer.php. */
#aether-space-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Everything above the canvas */
.navbar, .wrap, .content, footer, .modal {
    position: relative;
    z-index: 1;
}

/* ============================================================
   GLOBAL TEXT & LINKS
   ============================================================ */
body { color: var(--text-primary) !important; }

a { color: var(--accent) !important; text-decoration: none !important; transition: color 0.18s; }
a:hover { color: var(--accent-bright) !important; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    color: var(--text-primary) !important;
    text-transform: uppercase;
}

p, span, li, td, th, label, small { color: var(--text-secondary) !important; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar-inverse {
    background-color: rgba(9, 13, 18, 0.96) !important;
    border-bottom: 1px solid var(--border) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: none !important;
}

.navbar-inverse .navbar-brand {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    color: var(--text-primary) !important;
    text-transform: uppercase !important;
}

.navbar-inverse .navbar-nav > li > a {
    color: var(--text-secondary) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid transparent !important;
    transition: color 0.18s, border-color 0.18s !important;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    background-color: transparent !important;
    color: var(--accent-bright) !important;
    border-bottom-color: var(--accent) !important;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    background-color: transparent !important;
    color: var(--accent-bright) !important;
    border-bottom-color: var(--accent) !important;
}

.navbar-inverse .navbar-toggle {
    border-color: var(--border) !important;
}

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: var(--accent) !important;
}

/* ============================================================
   PANELS / CARDS
   ============================================================ */
.panel, .panel-default, .card {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
}

.panel-heading, .card-header {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border) !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--accent) !important;
    padding: 10px 16px !important;
}

.panel-body, .panel-body .panel-inner, .card-body {
    background: var(--bg-panel) !important;
    color: var(--text-primary) !important;
}

.panel-footer, .card-footer {
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
}

/* ============================================================
   STORE BOXES
   ============================================================ */
.store-box {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: 3px !important;
    color: var(--text-primary) !important;
    transition: border-color 0.18s, background 0.18s !important;
    box-shadow: none !important;
}

.store-box:hover {
    border-color: var(--border-hover) !important;
    background: var(--bg-card) !important;
}

.store-box-upper {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

.store-box-lower {
    background: var(--bg-panel) !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
}

.store-box-lower .price, .store-box .price {
    color: var(--accent-bright) !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    border-radius: 2px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    transition: all 0.18s ease !important;
    border: 1px solid !important;
}

.btn-primary, .btn-default {
    background: rgba(74, 179, 232, 0.12) !important;
    border-color: rgba(74, 179, 232, 0.35) !important;
    color: var(--accent-bright) !important;
}

.btn-primary:hover, .btn-default:hover,
.btn-primary:focus, .btn-default:focus {
    background: rgba(74, 179, 232, 0.22) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.btn-success {
    background: rgba(74, 232, 130, 0.1) !important;
    border-color: rgba(74, 232, 130, 0.3) !important;
    color: var(--success) !important;
}

.btn-success:hover, .btn-success:focus {
    background: rgba(74, 232, 130, 0.2) !important;
    border-color: var(--success) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.btn-danger {
    background: rgba(232, 74, 74, 0.1) !important;
    border-color: rgba(232, 74, 74, 0.3) !important;
    color: var(--danger) !important;
}

.btn-danger:hover, .btn-danger:focus {
    background: rgba(232, 74, 74, 0.2) !important;
    border-color: var(--danger) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.btn-warning {
    background: rgba(232, 180, 74, 0.1) !important;
    border-color: rgba(232, 180, 74, 0.3) !important;
    color: var(--warning) !important;
}

.btn-warning:hover, .btn-warning:focus {
    background: rgba(232, 180, 74, 0.2) !important;
    border-color: var(--warning) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.btn-info {
    background: var(--accent-glow) !important;
    border-color: var(--border-hover) !important;
    color: var(--accent) !important;
}

.btn-info:hover, .btn-info:focus {
    background: rgba(74, 179, 232, 0.22) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.btn-link {
    color: var(--accent) !important;
    border-color: transparent !important;
    background: transparent !important;
}

.btn-link:hover { color: var(--accent-bright) !important; }

/* ============================================================
   FORMS & INPUTS
   ============================================================ */
.form-control, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], textarea, select {
    background: var(--bg-input) !important;
    border: 1px solid var(--border) !important;
    border-radius: 2px !important;
    color: var(--text-primary) !important;
    font-family: var(--font) !important;
    font-size: 13px !important;
    transition: border-color 0.18s !important;
    box-shadow: none !important;
}

.form-control:focus, input[type="text"]:focus, input[type="email"]:focus,
input[type="password"]:focus, textarea:focus, select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px rgba(74, 179, 232, 0.1) !important;
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    outline: none !important;
}

.form-control::placeholder { color: var(--text-muted) !important; }

select option {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

label {
    color: var(--text-secondary) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

/* ============================================================
   TABLES
   ============================================================ */
.table {
    color: var(--text-primary) !important;
    border-collapse: separate !important;
    border-spacing: 0 3px !important;
}

.table > thead > tr > th {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--accent) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    padding: 10px 14px !important;
}

.table > tbody > tr > td {
    border-top: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 10px 14px !important;
    vertical-align: middle !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
}

.table-striped > tbody > tr {
    background-color: var(--bg-panel) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--bg-card) !important;
}

.table-striped > tbody > tr:hover {
    background-color: var(--accent-glow2) !important;
}

/* ============================================================
   ALERTS / CALLOUTS
   ============================================================ */
.alert, .bs-callout {
    border-radius: 2px !important;
    border-left-width: 3px !important;
    font-size: 13px !important;
}

.alert-success, .bs-callout-success {
    background: rgba(74, 232, 130, 0.07) !important;
    border-color: rgba(74, 232, 130, 0.3) !important;
    color: var(--success) !important;
}

.alert-danger, .alert-error, .bs-callout-danger {
    background: rgba(232, 74, 74, 0.07) !important;
    border-color: rgba(232, 74, 74, 0.3) !important;
    color: var(--danger) !important;
}

.alert-warning, .bs-callout-warning {
    background: rgba(232, 180, 74, 0.07) !important;
    border-color: rgba(232, 180, 74, 0.3) !important;
    color: var(--warning) !important;
}

.alert-info, .bs-callout-info {
    background: var(--accent-glow2) !important;
    border-color: rgba(74, 179, 232, 0.3) !important;
    color: var(--accent-bright) !important;
}

.alert .close, .bs-callout .close { color: var(--text-muted) !important; }

/* ============================================================
   DONATION GOAL
   ============================================================ */
.donationGoal { margin-bottom: 24px; }

.donationGoal h2 {
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 10px !important;
}

.progress {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 2px !important;
    height: 22px !important;
    box-shadow: none !important;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, var(--accent-dim), var(--accent)) !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    line-height: 22px !important;
    color: #fff !important;
    min-width: 40px;
}

/* ============================================================
   STAT BOXES / DASHBOARD WIDGETS
   ============================================================ */
.stat-box, .dashboard-widget-small-box {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: 3px !important;
    color: var(--text-primary) !important;
    padding: 16px !important;
    transition: border-color 0.18s !important;
}

.stat-box:hover, .dashboard-widget-small-box:hover {
    border-color: var(--border-hover) !important;
}

.stat-box .stat-number, .dashboard-widget-small-box .number {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--accent-bright) !important;
}

.stat-box .stat-label, .dashboard-widget-small-box .label {
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
}

/* ============================================================
   OPTIONS / SETTINGS PANELS
   ============================================================ */
.options {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: 3px !important;
    color: var(--text-primary) !important;
}

/* ============================================================
   MODALS
   ============================================================ */
.modal-content {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: 3px !important;
    color: var(--text-primary) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

.modal-header {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 14px 20px !important;
}

.modal-header .modal-title {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--text-primary) !important;
}

.modal-header .close {
    color: var(--text-muted) !important;
    opacity: 1 !important;
    font-size: 20px !important;
}

.modal-header .close:hover { color: var(--text-primary) !important; }

.modal-body { padding: 20px !important; }

.modal-footer {
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border) !important;
    padding: 12px 20px !important;
}

.modal-backdrop { background: rgba(0, 0, 0, 0.75) !important; }

/* ============================================================
   DROPDOWNS
   ============================================================ */
.dropdown-menu {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 2px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    padding: 4px 0 !important;
}

.dropdown-menu > li > a {
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    transition: background 0.15s, color 0.15s !important;
}

.dropdown-menu > li > a:hover {
    background: var(--accent-glow) !important;
    color: var(--accent-bright) !important;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
    background: var(--accent-glow) !important;
    color: var(--accent-bright) !important;
}

.dropdown-divider, .divider {
    background: var(--border) !important;
    border: none !important;
    height: 1px !important;
    margin: 4px 0 !important;
}

/* ============================================================
   BADGES & LABELS
   ============================================================ */
.badge, .label {
    border-radius: 2px !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 3px 7px !important;
}

.badge, .label-default {
    background: rgba(74, 179, 232, 0.12) !important;
    color: var(--accent) !important;
    border: 1px solid rgba(74, 179, 232, 0.25) !important;
}

.label-success { background: rgba(74,232,130,0.12) !important; color: var(--success) !important; border: 1px solid rgba(74,232,130,0.25) !important; }
.label-danger  { background: rgba(232,74,74,0.12)  !important; color: var(--danger)  !important; border: 1px solid rgba(232,74,74,0.25)  !important; }
.label-warning { background: rgba(232,180,74,0.12) !important; color: var(--warning) !important; border: 1px solid rgba(232,180,74,0.25) !important; }
.label-info    { background: var(--accent-glow)    !important; color: var(--accent)  !important; border: 1px solid var(--border-hover)   !important; }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination > li > a,
.pagination > li > span {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
    font-size: 12px !important;
    transition: all 0.15s !important;
}

.pagination > li > a:hover {
    background: var(--accent-glow) !important;
    border-color: var(--border-hover) !important;
    color: var(--accent-bright) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
    background: var(--accent-glow) !important;
    border-color: var(--accent) !important;
    color: var(--accent-bright) !important;
}

.pagination > .disabled > a,
.pagination > .disabled > span {
    color: var(--text-muted) !important;
    border-color: var(--border) !important;
    background: transparent !important;
}

/* ============================================================
   TABS / NAV-TABS
   ============================================================ */
.nav-tabs {
    border-bottom: 1px solid var(--border) !important;
}

.nav-tabs > li > a {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 2px 2px 0 0 !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    transition: color 0.18s !important;
}

.nav-tabs > li > a:hover {
    background: var(--accent-glow2) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: var(--bg-panel) !important;
    border-color: var(--border) var(--border) transparent !important;
    border-top: 2px solid var(--accent) !important;
    color: var(--accent-bright) !important;
}

.tab-content {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border) !important;
    border-top: none !important;
    padding: 20px !important;
}

/* ============================================================
   LIST GROUPS
   ============================================================ */
.list-group-item {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    transition: background 0.15s !important;
}

.list-group-item:first-child { border-radius: 2px 2px 0 0 !important; }
.list-group-item:last-child  { border-radius: 0 0 2px 2px !important; }

.list-group-item:hover,
.list-group-item.active,
.list-group-item.active:hover {
    background: var(--accent-glow) !important;
    border-color: var(--border-hover) !important;
    color: var(--accent-bright) !important;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumb {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 2px !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
}

.breadcrumb > li { color: var(--text-muted) !important; }
.breadcrumb > li + li::before { color: var(--text-muted) !important; }
.breadcrumb > .active { color: var(--accent) !important; }

/* ============================================================
   FOOTER
   ============================================================ */
footer, .footer {
    background: rgba(9, 13, 18, 0.97) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
    padding: 20px 0 !important;
}

footer a, .footer a {
    color: var(--accent) !important;
}

footer a:hover, .footer a:hover {
    color: var(--accent-bright) !important;
}

/* ============================================================
   CONTENT WRAPPER
   ============================================================ */
.content {
    color: var(--text-primary) !important;
}

/* ============================================================
   WELLBOX / WELL
   ============================================================ */
.well {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    color: var(--text-secondary) !important;
}

/* ============================================================
   HR / DIVIDERS
   ============================================================ */
hr {
    border-color: var(--border) !important;
    border-top: 1px solid var(--border) !important;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(74, 179, 232, 0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(74, 179, 232, 0.45); }

/* ============================================================
   SELECTION
   ============================================================ */
::selection {
    background: rgba(74, 179, 232, 0.25);
    color: var(--accent-bright);
}

/* ============================================================
   STARFIELD CANVAS INJECTION
   
   IMPORTANT: Add the following <script> block into your
   header.php or footer.php ONCE to activate the space background.
   It creates a <canvas id="aether-space-canvas"> and animates it.
   
   ---- COPY FROM HERE ----

<canvas id="aether-space-canvas"></canvas>
<script>
(function(){
  var c=document.getElementById('aether-space-canvas'),ctx=c.getContext('2d'),W,H,stars,nebulae,shooters,t=0;
  function rr(a,b){return a+Math.random()*(b-a);}
  function rs(){stars=Array.from({length:300},function(){return{x:Math.random()*W,y:Math.random()*H,r:rr(0.3,1.6),base:rr(0.2,1),spd:rr(0.003,0.012),ph:Math.random()*Math.PI*2};});}
  function rn(){nebulae=[{x:W*.15,y:H*.25,rx:W*.28,ry:H*.22,h:'185',a:0.028},{x:W*.78,y:H*.60,rx:W*.22,ry:H*.30,h:'210',a:0.022},{x:W*.50,y:H*.80,rx:W*.35,ry:H*.18,h:'195',a:0.018},{x:W*.88,y:H*.15,rx:W*.18,ry:H*.20,h:'220',a:0.020}];}
  function sz(){W=c.width=window.innerWidth;H=c.height=window.innerHeight;}
  function spawn(){shooters.push({x:rr(W*.1,W*.9),y:rr(0,H*.4),len:rr(80,180),spd:rr(6,14),ang:rr(0.3,0.7),life:1,dec:rr(0.012,0.024)});}
  shooters=[];
  function draw(){
    t+=0.016;ctx.clearRect(0,0,W,H);
    nebulae.forEach(function(n){
      var mx=Math.max(n.rx,n.ry),g=ctx.createRadialGradient(n.x,n.y,0,n.x,n.y,mx);
      g.addColorStop(0,'hsla('+n.h+',70%,55%,'+(n.a*2.5)+')');g.addColorStop(0.4,'hsla('+n.h+',60%,45%,'+n.a+')');g.addColorStop(1,'hsla('+n.h+',50%,30%,0)');
      ctx.save();ctx.scale(n.rx/mx,n.ry/mx);ctx.beginPath();ctx.arc(n.x*mx/n.rx,n.y*mx/n.ry,mx,0,Math.PI*2);ctx.fillStyle=g;ctx.fill();ctx.restore();
    });
    stars.forEach(function(s){
      var a=s.base*(0.5+0.5*Math.sin(t*s.spd*60+s.ph));
      ctx.beginPath();ctx.arc(s.x,s.y,s.r,0,Math.PI*2);ctx.fillStyle='rgba('+(180+Math.floor(s.base*60))+','+(210+Math.floor(s.base*40))+',255,'+a+')';ctx.fill();
      if(s.r>1.2){ctx.beginPath();ctx.moveTo(s.x-s.r*3,s.y);ctx.lineTo(s.x+s.r*3,s.y);ctx.moveTo(s.x,s.y-s.r*3);ctx.lineTo(s.x,s.y+s.r*3);ctx.strokeStyle='rgba(180,220,255,'+(a*0.25)+')';ctx.lineWidth=0.5;ctx.stroke();}
    });
    shooters.forEach(function(s,i){
      var tx=s.x+Math.cos(s.ang)*s.len,ty=s.y+Math.sin(s.ang)*s.len,g=ctx.createLinearGradient(s.x,s.y,tx,ty);
      g.addColorStop(0,'rgba(180,230,255,0)');g.addColorStop(1,'rgba(200,240,255,'+(s.life*.9)+')');
      ctx.beginPath();ctx.moveTo(s.x,s.y);ctx.lineTo(tx,ty);ctx.strokeStyle=g;ctx.lineWidth=1.2;ctx.stroke();
      s.x+=Math.cos(s.ang)*s.spd;s.y+=Math.sin(s.ang)*s.spd;s.life-=s.dec;
      if(s.life<=0)shooters.splice(i,1);
    });
    if(Math.random()<0.004&&shooters.length<3)spawn();
    requestAnimationFrame(draw);
  }
  sz();rs();rn();draw();
  window.addEventListener('resize',function(){sz();rn();});
})();
</script>

   ---- COPY TO HERE ----
   ============================================================ */