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

: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);
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
font-family:"Merriweather",serif;
background:radial-gradient(circle at top,#214f75 0%,#0f2033 30%,#050b16 100%);
color:var(--text);
line-height:1.6;
}

header{
padding:14px 20px;
display:flex;
justify-content:space-between;
align-items:center;
background:linear-gradient(90deg,#08131f,#11273b,#08131f);
border-bottom:1px solid rgba(63,217,255,.35);
box-shadow:var(--shadow);
position:sticky;
top:0;
z-index:100;
}

header h1{
font-family:"Cinzel",serif;
font-size:18px;
letter-spacing:3px;
}

header span{
font-size:12px;
color:var(--line3);
}

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

.container{
display:grid;
grid-template-columns:280px minmax(0,1fr);
gap:24px;
max-width:1500px;
margin:0 auto;
padding:24px;
align-items:start;
}

/*=========================================================
SIDEBAR
=========================================================*/

.sidebar{
position:sticky;
top:20px;
align-self:start;
height:fit-content;
max-height:calc(100vh - 40px);
overflow-y:auto;
padding:20px;
background:linear-gradient(180deg,#102133,#0b1827);
border:1px solid rgba(63,217,255,.2);
border-radius:16px;
box-shadow:var(--shadow);
}

.sidebar::-webkit-scrollbar{width:8px;}
.sidebar::-webkit-scrollbar-thumb{
background:rgba(63,217,255,.45);
border-radius:10px;
}

.sidebar h3{
font-family:"Cinzel",serif;
font-size:12px;
color:var(--line3);
letter-spacing:2px;
margin:20px 0 10px;
padding-bottom:8px;
border-bottom:1px solid rgba(63,217,255,.15);
}

.sidebar a{
display:block;
padding:10px 14px;
margin-bottom:4px;
border-radius:10px;
text-decoration:none;
color:var(--muted);
transition:.2s;
}

.sidebar a:hover{
background:rgba(63,217,255,.08);
color:#fff;
transform:translateX(4px);
}

main{
min-width:0;
padding:40px;
background:linear-gradient(180deg,rgba(20,36,54,.96),rgba(11,24,39,.98));
border:1px solid rgba(63,217,255,.2);
border-radius:18px;
box-shadow:var(--shadow);
}

.chapter{max-width:1100px;margin:0 auto 80px;}
.chapter-header{margin-bottom:40px;padding-bottom:20px;border-bottom:1px solid rgba(63,217,255,.2);}
.chapter-number{font-family:"Cinzel",serif;font-size:12px;letter-spacing:3px;color:var(--line2);}
.chapter-header h1{font-family:"Cinzel",serif;font-size:42px;margin:12px 0;}
.chapter-header p{max-width:850px;color:var(--muted);}

.rule-section{margin:40px 0;}
.rule-section h2{
font-family:"Cinzel",serif;
font-size:26px;
margin-bottom:16px;
padding-bottom:8px;
border-bottom:1px solid rgba(63,217,255,.15);
}
.rule-section p{margin-bottom:16px;color:var(--muted);}

.rule-box,.note,.warning,.card{
padding:20px;
border-radius:12px;
margin:20px 0;
}
.rule-box{
border-left:4px solid var(--line);
background:rgba(63,217,255,.06);
}
.note{
border-left:4px solid var(--gold);
background:rgba(255,216,106,.08);
}
.warning{
border-left:4px solid #ff6666;
background:rgba(255,80,80,.08);
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:18px;
margin:25px 0;
}

.card{
background:linear-gradient(180deg,#1a2e44,#0f1f31);
border:1px solid rgba(63,217,255,.15);
}

.two-col{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

table{
width:100%;
border-collapse:collapse;
margin:25px 0;
}

th{
padding:12px;
background:#163048;
text-align:left;
font-family:"Cinzel",serif;
}

td{
padding:12px;
border-top:1px solid rgba(63,217,255,.12);
color:var(--muted);
}

tr:hover{background:rgba(63,217,255,.06);}

.divider{
height:1px;
margin:40px 0;
background:linear-gradient(90deg,transparent,var(--line),transparent);
}

@media (max-width:900px){
.container{
grid-template-columns:1fr;
}
.sidebar{
position:relative;
top:0;
max-height:none;
overflow:visible;
}
main{
padding:24px;
}
.two-col{
grid-template-columns:1fr;
}
.chapter-header h1{
font-size:32px;
}
}