/* ==========================================================================
   CobbleSky - shared styles
   Pixel/Minecraft UI: chunky bevels, hard drop shadows, no border radius.
   Palette: sky blue accent on dark navy.
   ========================================================================== */

:root {
    --accent:     #4FC3F7;  /* bright sky blue - headings, links */
    --accent-dim: #29A6DB;
    --deep:       #1565C0;  /* deep azure - button bodies */
    --deep-dark:  #0D47A1;
    --panel-top:  #3a4a5c;  /* panel gradient */
    --panel-bot:  #26323f;
    --panel-edge: #16202b;
    --bg:         #16202b;
    --alert:      #FFD54F;  /* sun yellow - punishments, warnings */
    --danger:     #FF8A80;  /* coral - rule headings */
    --good:       #81C784;  /* green - allowed / success */
    --text:       #e8eef4;
    --text-dim:   #93a4b5;
}

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

/* Giving html its own background stops body's from propagating to the canvas.
   Without this, body::before has nothing to blend against and the glows
   disappear. */
html {
    background-color: #10161f;
}

body {
    min-height: 100vh;
    font-family: 'Press Start 2P', cursive;
    color: var(--text);
    background-color: var(--bg);
    background-image:
        linear-gradient(rgba(6, 14, 24, 0.78), rgba(6, 14, 24, 0.78)),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect fill="%231d2938" width="64" height="64"/><rect fill="%23243447" x="0" y="0" width="32" height="32"/><rect fill="%23243447" x="32" y="32" width="32" height="32"/><rect fill="%23334b63" x="8" y="12" width="16" height="6"/><rect fill="%23334b63" x="16" y="6" width="12" height="6"/><rect fill="%23334b63" x="40" y="44" width="16" height="6"/><rect fill="%23334b63" x="44" y="38" width="10" height="6"/></svg>');
    background-size: 64px 64px;
    image-rendering: pixelated;
    padding: 2rem;
    position: relative;
}

/* Red and blue bleeding into each other behind the pixel tile.
   Two large radial glows on a screen blend, so where they overlap in the
   middle they mix to violet rather than muddying to grey. Fixed to the
   viewport so it stays put while long pages scroll, and slowly drifting
   so the mix is never quite the same twice. */
body::before {
    content: "";
    position: fixed;
    inset: -25%;
    z-index: -1;
    pointer-events: none;
    mix-blend-mode: screen;
    background:
        radial-gradient(ellipse 66% 58% at 30% 24%, rgba(220, 74, 46, 0.60), transparent 100%),
        radial-gradient(ellipse 66% 58% at 70% 76%, rgba(41, 140, 255, 0.60), transparent 100%),
        radial-gradient(ellipse 38% 34% at 85% 12%, rgba(85, 255, 255, 0.26), transparent 100%),
        radial-gradient(ellipse 38% 34% at 15% 88%, rgba(255, 85, 85, 0.22), transparent 100%);
    animation: drift 34s ease-in-out infinite alternate;
}

@keyframes drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
    100% { transform: translate3d(-2%, 2.5%, 0) scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
    body::before {
        animation: none;
    }
}

/* Minecraft &6 gold, with MC's own shadow rule (each channel divided by 4). */
.mc-gold {
    color: #FFAA00;
    text-shadow: 3px 3px 0 #3F2A00;
}

.mc-gold:hover {
    color: #FFC44D;
}

/* --- Navigation ---------------------------------------------------------- */
.topnav {
    position: fixed;
    top: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    z-index: 10;
}

.topnav .spacer {
    margin-left: auto;
}

.nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #3aa5e0 0%, var(--deep) 100%);
    border: 3px solid var(--deep-dark);
    border-radius: 12px;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.25),
        inset 0 -2px 0 rgba(0, 0, 0, 0.3),
        0 4px 0 #08326e;
    transition: all 0.1s;
    text-decoration: none;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.6rem;
    padding: 0.8rem 1rem;
    white-space: nowrap;
}

.nav-link:hover {
    background: linear-gradient(180deg, #4fc3f7 0%, #1976D2 100%);
    transform: translateY(-2px);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.25),
        inset 0 -2px 0 rgba(0, 0, 0, 0.3),
        0 6px 0 #08326e;
}

.nav-link:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.25),
        inset 0 -2px 0 rgba(0, 0, 0, 0.3),
        0 2px 0 #08326e;
}

.nav-link.disabled {
    cursor: not-allowed;
    background: linear-gradient(180deg, #4a5665 0%, #39434f 100%);
    border-color: #2a323c;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.08),
        inset 0 -2px 0 rgba(0, 0, 0, 0.3),
        0 4px 0 #1a2029;
    opacity: 0.6;
}

.nav-link.disabled:hover {
    transform: none;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.08),
        inset 0 -2px 0 rgba(0, 0, 0, 0.3),
        0 4px 0 #1a2029;
}

.discord-link {
    width: 48px;
    height: 48px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #5865F2 0%, #4752C4 100%);
    border: 3px solid #3c45a5;
    border-radius: 12px;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        0 4px 0 #2d3480;
    transition: all 0.1s;
}

.discord-link:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        0 6px 0 #2d3480;
}

.discord-link:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        0 2px 0 #2d3480;
}

.discord-link svg {
    width: 28px;
    height: 28px;
    fill: #fff;
}

/* --- Typography ---------------------------------------------------------- */
h1 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--accent);
    text-shadow:
        4px 4px 0 #0d3b57,
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000;
    text-align: center;
    letter-spacing: 2px;
}

.subtitle {
    font-size: 0.55rem;
    color: var(--text-dim);
    text-align: center;
    margin-bottom: 2rem;
    line-height: 1.8;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding-top: 5rem;
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
    display: inline-block;
    background: linear-gradient(180deg, #3aa5e0 0%, var(--deep) 100%);
    border: 4px solid var(--deep-dark);
    color: #fff;
    padding: 1rem 2rem;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.8rem;
    text-decoration: none;
    margin: 0.5rem;
    cursor: pointer;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 0 rgba(0, 0, 0, 0.3),
        0 4px 0 #08326e;
    transition: all 0.1s;
}

.btn:hover {
    background: linear-gradient(180deg, #4fc3f7 0%, #1976D2 100%);
    transform: translateY(-2px);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 0 rgba(0, 0, 0, 0.3),
        0 6px 0 #08326e;
}

.btn:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 0 rgba(0, 0, 0, 0.3),
        0 2px 0 #08326e;
}

.btn-discord {
    background: linear-gradient(180deg, #5865F2 0%, #4752C4 100%);
    border-color: #3c45a5;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 0 rgba(0, 0, 0, 0.3),
        0 4px 0 #2d3480;
}

.btn-discord:hover {
    background: linear-gradient(180deg, #6b77ff 0%, #5865F2 100%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 0 rgba(0, 0, 0, 0.3),
        0 6px 0 #2d3480;
}

/* --- Table of contents --------------------------------------------------- */
.toc {
    background: linear-gradient(180deg, #2f3f52 0%, #212c39 100%);
    border: 4px solid var(--panel-edge);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.1),
        inset 0 -2px 0 rgba(0, 0, 0, 0.3),
        0 4px 0 #0b1219;
    text-align: center;
}

.toc h3 {
    font-size: 0.75rem;
    color: var(--accent);
    margin-bottom: 1rem;
}

.toc ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.toc li {
    font-size: 0.5rem;
    line-height: 2;
}

.toc a {
    color: #bfe6fb;
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    background: #16202b;
    border: 2px solid #35485c;
    display: inline-block;
}

.toc a:hover {
    background: #1f2d3c;
    border-color: var(--accent);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 700px) {
    body {
        padding: 1rem;
    }
    h1 {
        font-size: 1rem;
    }
    .container {
        padding-top: 7rem;
    }
    .nav-link {
        font-size: 0.5rem;
        padding: 0.6rem 0.7rem;
    }
    .btn {
        font-size: 0.6rem;
        padding: 0.8rem 1.2rem;
    }
}