/* =========================================================
   BRIGHTER HUD PALETTE (RESTORED INTENSITY)
========================================================= */

:root{

--bg:#050b16;
--panel:#102133;
--panel2:#15293d;

--line:#35c8ff;
--line2:#5ce8ff;
--line3:#7ff3ff;

--text:#eef9ff;
--muted:#b8d8e9;

--gold:#ffd86a;

--shadow:0 14px 42px rgba(0,0,0,.55);
--glow:0 0 18px rgba(63,217,255,.25);

}

/* =========================================================
   BASE
========================================================= */

*{ box-sizing:border-box; }

body{
    margin:0;
    font-family:"Merriweather",serif;

    background:
        radial-gradient(circle at top,
        #214f75 0%,
        #0f2033 30%,
        #050b16 100%);

    color:var(--text);
}

/* =========================================================
   HEADER (BRIGHTER EDGE GLOW)
========================================================= */

header{
    padding:14px 18px;

    background:
        linear-gradient(90deg,
        #08131f,
        #11273b,
        #08131f);

    border-bottom:1px solid rgba(63,217,255,.45);

    box-shadow:
        0 0 18px rgba(63,217,255,.18),
        var(--shadow);
}

.system-title{
    font-family:"Cinzel",serif;
    font-size:16px;
    letter-spacing:2px;
    margin:0;

    color:white;
    text-shadow:0 0 10px rgba(90,220,255,.25);
}

/* =========================================================
   LAYOUT
========================================================= */

.layout{
    display:grid;
    grid-template-columns:270px 1fr;
    min-height:calc(100vh - 56px);
}

/* =========================================================
   SIDEBAR (MORE LUMINOUS)
========================================================= */

.sidebar{
    background:
        linear-gradient(180deg,
        #0b1827,
        #08121d);

    border-right:1px solid rgba(63,217,255,.22);

    box-shadow:inset -6px 0 18px rgba(0,0,0,.25);

    padding:14px;
}

.nav-group{
    margin-bottom:18px;
}

.nav-title{
    font-size:11px;
    color:var(--line3);
    letter-spacing:2px;
    margin:12px 0 8px;

    text-shadow:0 0 8px rgba(90,240,255,.18);
}

.sidebar a{
    display:block;
    padding:10px;

    margin-bottom:6px;

    text-decoration:none;
    color:var(--muted);

    font-size:13px;

    border-radius:10px;

    transition:.18s ease;

    border:1px solid transparent;
}

.sidebar a:hover{
    background:rgba(63,217,255,.10);
    border-color:rgba(63,217,255,.25);
    color:white;

    box-shadow:0 0 14px rgba(63,217,255,.12);
}

/* =========================================================
   MAIN VIEWPORT
========================================================= */

main{
    padding:22px;
}

.viewport{
    background:
        linear-gradient(180deg,
        rgba(20,36,54,.95),
        rgba(11,24,39,.97));

    border:1px solid rgba(63,217,255,.25);

    border-radius:18px;

    padding:22px;

    box-shadow:
        var(--shadow),
        0 0 24px rgba(63,217,255,.10);
}

/* =========================================================
   STATUS BAR (BRIGHTER READABILITY)
========================================================= */

.status-bar{
    display:flex;
    justify-content:space-between;

    font-size:12px;

    color:var(--line3);

    margin-bottom:18px;

    text-shadow:0 0 10px rgba(63,217,255,.15);
}

/* =========================================================
   MODULE GRID
========================================================= */

.grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.card{
    padding:16px;

    border-radius:16px;

    background:
        linear-gradient(180deg,
        rgba(25,46,69,.96),
        rgba(16,31,48,.98));

    border:1px solid rgba(63,217,255,.22);

    box-shadow:
        0 10px 26px rgba(0,0,0,.35);

    transition:.18s ease;
}

.card:hover{
    transform:translateY(-3px);

    border-color:rgba(92,232,255,.45);

    box-shadow:
        0 0 22px rgba(63,217,255,.18),
        0 14px 30px rgba(0,0,0,.42);
}

.card h3{
    margin:0 0 6px 0;

    font-family:"Cinzel",serif;

    font-size:14px;

    color:white;

    text-shadow:0 0 8px rgba(90,220,255,.15);
}

.card p{
    margin:0;

    font-size:12px;

    color:var(--muted);
}

/* =========================================================
   FOOTER STRIP (STRONGER GLOW RETURN)
========================================================= */

.footer-strip{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;

    padding:10px 14px;

    font-size:12px;

    display:flex;
    justify-content:space-between;

    background:
        linear-gradient(90deg,
        #08131f,
        #11273b,
        #08131f);

    border-top:1px solid rgba(63,217,255,.35);

    color:var(--line3);

    box-shadow:0 -6px 22px rgba(0,0,0,.45);
}
/*=========================================================
PART 2A
RULEBOOK TYPOGRAPHY & CHAPTER LAYOUT
=========================================================*/

/*=========================================================
CONTENT WIDTH
=========================================================*/

.viewport{

max-width:1400px;
margin:auto;

}

/*=========================================================
CHAPTERS
=========================================================*/

.chapter{

margin-bottom:80px;

animation:fadeIn .4s ease;

}

.chapter:last-child{

margin-bottom:0;

}

.chapter-header{

margin-bottom:35px;

padding-bottom:18px;

border-bottom:2px solid rgba(63,217,255,.15);

position:relative;

}

.chapter-header::after{

content:"";

position:absolute;

bottom:-2px;
left:0;

width:160px;
height:2px;

background:linear-gradient(
90deg,
var(--line),
transparent);

}

.chapter-number{

font-family:"Cinzel",serif;

font-size:13px;

letter-spacing:4px;

color:var(--line2);

margin-bottom:8px;

text-transform:uppercase;

}

.chapter-title{

font-family:"Cinzel",serif;

font-size:40px;

font-weight:700;

letter-spacing:2px;

margin-bottom:12px;

color:white;

}

.chapter-description{

max-width:900px;

font-size:16px;

line-height:1.9;

color:var(--muted);

}

/*=========================================================
SECTIONS
=========================================================*/

.section{

margin-top:45px;

}

.section-title{

font-family:"Cinzel",serif;

font-size:28px;

margin-bottom:18px;

color:white;

display:flex;
align-items:center;
gap:12px;

}

.section-title::before{

content:"";

width:10px;
height:10px;

border-radius:50%;

background:var(--line);

box-shadow:0 0 12px rgba(63,217,255,.5);

}

.section-subtitle{

font-size:18px;

font-weight:bold;

margin-bottom:14px;

color:var(--line3);

}

.section p{

font-size:15px;

line-height:2;

margin-bottom:20px;

color:var(--muted);

}

/*=========================================================
HEADINGS
=========================================================*/

h1,h2,h3,h4,h5{

font-weight:normal;

}

h3{

font-family:"Cinzel",serif;

font-size:22px;

margin-bottom:12px;

color:white;

}

h4{

font-size:18px;

margin-bottom:10px;

color:var(--line2);

}

/*=========================================================
TEXT
=========================================================*/

strong{

color:white;

}

em{

color:var(--gold);

font-style:italic;

}

code{

padding:3px 8px;

border-radius:5px;

background:#081726;

color:#79f2ff;

font-family:monospace;

}

mark{

background:#2c5f84;

padding:2px 5px;

color:white;

}

/*=========================================================
LINKS
=========================================================*/

a{

color:var(--line2);

transition:.2s;

}

a:hover{

color:white;

}

/*=========================================================
LISTS
=========================================================*/

ul{

margin:20px 0;

padding-left:28px;

}

ol{

margin:20px 0;

padding-left:30px;

}

li{

margin-bottom:12px;

line-height:1.8;

color:var(--muted);

}

li::marker{

color:var(--line2);

}

/*=========================================================
DIVIDERS
=========================================================*/

.rule-divider{

margin:45px 0;

height:1px;

background:

linear-gradient(
90deg,
transparent,
rgba(63,217,255,.45),
transparent);

}

/*=========================================================
INFO PANELS
=========================================================*/

.info-panel{

background:

linear-gradient(
180deg,
rgba(20,38,56,.95),
rgba(12,23,35,.95));

padding:28px;

border-radius:18px;

border:1px solid rgba(63,217,255,.18);

margin:30px 0;

box-shadow:
0 8px 22px rgba(0,0,0,.3);

}

.info-panel h3{

margin-bottom:14px;

}

.info-panel p:last-child{

margin-bottom:0;

}

/*=========================================================
LORE BOX
=========================================================*/

.lore-box{

padding:28px;

margin:35px 0;

border-left:4px solid var(--gold);

background:

linear-gradient(
180deg,
rgba(64,55,28,.18),
rgba(25,22,15,.18));

border-radius:14px;

}

.lore-box h3{

color:var(--gold);

margin-bottom:12px;

}

.lore-box p{

font-style:italic;

}

/*=========================================================
EXAMPLE BOX
=========================================================*/

.example-box{

margin:35px 0;

padding:24px;

border-radius:14px;

background:

linear-gradient(
180deg,
rgba(22,48,66,.9),
rgba(10,25,39,.95));

border:1px solid rgba(63,217,255,.25);

}

.example-title{

font-family:"Cinzel",serif;

font-size:18px;

margin-bottom:15px;

color:var(--line3);

}

/*=========================================================
IMPORTANT NOTICE
=========================================================*/

.notice{

padding:22px;

margin:35px 0;

border-radius:14px;

background:

rgba(50,90,125,.18);

border-left:5px solid var(--line);

}

.notice h4{

margin-bottom:10px;

}

.notice p{

margin:0;

}

/*=========================================================
WARNING
=========================================================*/

.warning{

padding:22px;

margin:35px 0;

border-radius:14px;

background:

rgba(120,50,30,.15);

border-left:5px solid #ff7a55;

}

.warning h4{

color:#ffb090;

margin-bottom:12px;

}

.warning p{

margin:0;

}

/*=========================================================
QUOTES
=========================================================*/

blockquote{

margin:35px 0;

padding:30px;

font-size:20px;

line-height:1.8;

font-style:italic;

border-left:5px solid var(--gold);

background:

rgba(255,216,106,.08);

color:white;

}

blockquote footer{

margin-top:15px;

font-size:14px;

color:var(--gold);

}

/*=========================================================
TWO COLUMN LAYOUT
=========================================================*/

.columns{

display:grid;

grid-template-columns:1fr 1fr;

gap:35px;

margin:35px 0;

}

/*=========================================================
THREE COLUMN LAYOUT
=========================================================*/

.columns-3{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

margin:35px 0;

}

/*=========================================================
CONTENT CARDS
=========================================================*/

.content-card{

background:

linear-gradient(
180deg,
rgba(25,46,69,.96),
rgba(16,31,48,.98));

padding:24px;

border-radius:16px;

border:1px solid rgba(63,217,255,.15);

transition:.2s;

}

.content-card:hover{

transform:translateY(-4px);

border-color:rgba(63,217,255,.35);

box-shadow:
0 0 18px rgba(63,217,255,.15);

}

.content-card h3{

margin-bottom:14px;

}

.content-card p:last-child{

margin-bottom:0;

}

/*=========================================================
PAGE BREAK TITLE
=========================================================*/

.page-title{

text-align:center;

margin:60px 0;

}

.page-title h1{

font-family:"Cinzel",serif;

font-size:54px;

letter-spacing:4px;

margin-bottom:12px;

}

.page-title p{

font-size:18px;

color:var(--muted);

}

/*=========================================================
ANIMATION
=========================================================*/

@keyframes fadeIn{

from{

opacity:0;
transform:translateY(20px);

}

to{

opacity:1;
transform:translateY(0);

}

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:900px){

.columns,
.columns-3{

grid-template-columns:1fr;

}

.chapter-title{

font-size:30px;

}

.section-title{

font-size:24px;

}

.page-title h1{

font-size:36px;

}

}

    /* COLLAPSIBLE DETAILS */
    details {
      background: #08131f;
      border: 2px solid #ddd;
      border-radius: 10px;
      padding: 10px;
      margin: 10px 0;
    }

    summary {
      font-weight: bold;
      cursor: pointer;
      font-size: 17px;
    }

    details[open] {
      border-color: #F06A11;
      background: #08131f;
    }
    
    /*=========================================================
RULEBOOK TABLES
=========================================================*/

.table-wrapper{

    width:100%;
    overflow-x:auto;

    margin:35px 0;

    border-radius:16px;

    border:1px solid rgba(63,217,255,.22);

    box-shadow:
        0 10px 26px rgba(0,0,0,.35),
        0 0 18px rgba(63,217,255,.08);

}


/* MAIN TABLE */

table{

    width:100%;

    border-collapse:separate;
    border-spacing:0;

    background:
        linear-gradient(
        180deg,
        rgba(18,34,51,.98),
        rgba(8,19,31,.98));

    color:var(--text);

    font-size:14px;

}


/* HEADER */

th{

    padding:14px 16px;

    text-align:left;

    font-family:"Cinzel",serif;

    font-size:14px;

    letter-spacing:1px;

    text-transform:uppercase;

    color:white;

    background:
        linear-gradient(
        180deg,
        rgba(53,200,255,.22),
        rgba(53,200,255,.08));

    border-bottom:2px solid rgba(92,232,255,.45);

    text-shadow:
        0 0 8px rgba(90,220,255,.35);

}


/* CELLS */

td{

    padding:13px 16px;

    color:var(--muted);

    line-height:1.6;

    border-bottom:

        1px solid rgba(63,217,255,.12);

}


/* FIRST COLUMN EMPHASIS */

td:first-child{

    color:white;

    font-weight:bold;

}


/* ROW EFFECT */

tr{

    transition:.18s ease;

}


tbody tr:hover{

    background:

        rgba(63,217,255,.08);

}


tbody tr:hover td{

    color:white;

}


/* LAST ROW CLEANUP */

tr:last-child td{

    border-bottom:none;

}


/* ZEBRA STRIPING */

tbody tr:nth-child(even){

    background:

        rgba(255,255,255,.025);

}


/* TABLE TITLE */

.table-title{

    font-family:"Cinzel",serif;

    font-size:20px;

    color:var(--line3);

    margin-bottom:12px;

    letter-spacing:2px;

}


/* TABLE CAPTION */

caption{

    caption-side:top;

    text-align:left;

    padding:0 0 14px 5px;

    font-family:"Cinzel",serif;

    font-size:18px;

    color:white;

}


/* IMPORTANT VALUES */

.table-highlight{

    color:var(--gold);

    font-weight:bold;

}


/* RANK COLORS */

.rank-d{

    color:#b8d8e9;

}

.rank-c{

    color:#7ff3ff;

}

.rank-b{

    color:#ffd86a;

}

.rank-a{

    color:#ff9d5c;

}

.rank-s{

    color:#ff6bff;

    text-shadow:
        0 0 8px rgba(255,107,255,.45);

}


/* COMPACT RULE TABLE */

.table-small td,
.table-small th{

    padding:8px 12px;

    font-size:13px;

}


/* CENTERED DATA TABLE */

.table-center td,
.table-center th{

    text-align:center;

}


/* STAT BLOCK TABLE */

.stat-table{

    border:1px solid rgba(255,216,106,.25);

}


.stat-table th{

    background:

        linear-gradient(
        180deg,
        rgba(255,216,106,.18),
        rgba(255,216,106,.05));

    border-bottom-color:
        rgba(255,216,106,.45);

}


.stat-table td:first-child{

    color:var(--gold);

}


/* RESPONSIVE TABLES */

@media(max-width:900px){

    table{

        font-size:12px;

    }


    th,
    td{

        padding:10px;

    }

}