*{box-sizing:border-box}html{scroll-behavior:smooth}
:root{
  color-scheme:dark;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --bg:#08080c;--panel:#111119;--panel2:#16151f;--text:#f6f2ff;--muted:#aaa4b7;
  --gold:#d8ad39;--purple:#8e55ff;--red:#9f2434;--line:rgba(255,255,255,.09)
}
body{margin:0;background:var(--bg);color:var(--text);background-image:
radial-gradient(circle at 15% 0%,rgba(142,85,255,.15),transparent 28%),
radial-gradient(circle at 100% 22%,rgba(159,36,52,.12),transparent 28%)}
a{color:inherit;text-decoration:none}.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:14px clamp(18px,5vw,70px);background:rgba(8,8,12,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;font-weight:900;letter-spacing:.02em}.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(145deg,#e9c459,#8d6115);color:#170f04;font:900 24px Georgia,serif;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.brand-mark.large{width:60px;height:60px;font-size:37px;margin-bottom:20px}
nav{display:flex;gap:22px;font-size:14px;color:#cfc9db}nav a:hover{color:white}
.hero{min-height:680px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:60px;align-items:center;padding:90px clamp(22px,8vw,130px)}
.hero-copy{max-width:780px}.eyebrow{margin:0 0 13px;letter-spacing:.2em;font-size:12px;font-weight:900;color:#b997ff}
h1,h2,h3,p{margin-top:0}h1{font-size:clamp(48px,7vw,88px);line-height:.97;letter-spacing:-.045em;margin-bottom:24px}h1 span{background:linear-gradient(90deg,#caa4ff,#f2c655);-webkit-background-clip:text;color:transparent}
.hero-text{font-size:19px;line-height:1.7;color:var(--muted);max-width:700px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:13px;padding:14px 20px;font-weight:900;border:1px solid transparent;cursor:pointer}.primary{background:linear-gradient(135deg,#9b66ff,#713bea);color:white}.secondary{border-color:#393442;background:#121018;color:#ddd6e9}
.hero-panel{display:grid;place-items:center}.crest{width:220px;height:220px;display:grid;place-items:center;border-radius:34px;font:900 110px Georgia,serif;color:#140d03;background:linear-gradient(145deg,#f0ca5a,#8b5c0e);box-shadow:0 30px 90px rgba(0,0,0,.5),0 0 80px rgba(142,85,255,.12)}
.server-card{width:min(100%,430px);margin-top:28px;padding:17px;border:1px solid var(--line);border-radius:18px;background:rgba(17,17,25,.92);display:flex;align-items:center;gap:13px}.server-card div{min-width:0;flex:1}.server-card small,.connect-box small{display:block;color:#837d91;font-size:10px;letter-spacing:.14em;margin-bottom:4px}.server-card strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-dot{width:11px;height:11px;border-radius:50%;background:#47d778;box-shadow:0 0 18px rgba(71,215,120,.65)}.copy-btn,.connect-box button{border:0;border-radius:10px;padding:9px 12px;background:#272330;color:#ddd5ea;cursor:pointer}
.section{padding:100px clamp(22px,8vw,130px)}.section.alt{background:rgba(255,255,255,.018);border-block:1px solid rgba(255,255,255,.035)}.section-heading{max-width:760px;margin-bottom:42px}.section-heading h2,.discord h2,.enter h2{font-size:clamp(34px,5vw,58px);letter-spacing:-.035em;margin-bottom:17px}.section-heading>p:last-child,.discord>p,.enter>div>p{color:var(--muted);line-height:1.7;font-size:17px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.stat{padding:26px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}.stat strong{font-size:28px;display:block;margin-bottom:8px}.stat span{color:var(--muted);font-size:14px;line-height:1.5}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.feature{padding:27px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(150deg,#14131c,#0f0e14)}.feature .icon{font-size:27px;color:#cbaeff}.feature h3{font-size:21px;margin:15px 0 9px}.feature p{color:var(--muted);line-height:1.6}
.rules{display:grid;grid-template-columns:1fr 1fr;gap:14px}.rules>div{display:flex;gap:17px;padding:23px;border-bottom:1px solid var(--line)}.rules b{color:#9270d6;font-size:13px}.rules p{color:var(--muted);line-height:1.55}.rules strong{color:white}
.enter{display:grid;grid-template-columns:1fr minmax(330px,.75fr);gap:60px;align-items:center}.connect-box{padding:28px;border-radius:20px;border:1px solid rgba(216,173,57,.25);background:linear-gradient(140deg,rgba(216,173,57,.07),rgba(142,85,255,.06))}.connect-box strong{display:block;font-size:clamp(20px,3vw,32px);margin:8px 0 20px;word-break:break-all}
.tool-card{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}.tool-card h3{font-size:24px;margin-bottom:8px}.tool-card p{color:var(--muted);max-width:760px;line-height:1.6}.badge{white-space:nowrap;padding:9px 12px;border:1px solid #473a62;border-radius:999px;color:#cbb8f0;font-size:13px}
.discord{text-align:center;padding:120px 22px;background:radial-gradient(circle at center,rgba(142,85,255,.13),transparent 42%)}.discord p{max-width:700px;margin:0 auto 27px}footer{display:flex;justify-content:space-between;gap:20px;padding:25px clamp(22px,8vw,130px);border-top:1px solid var(--line);color:#777180;font-size:13px}
.tool-page{min-height:100vh;display:grid;place-items:center;padding:30px}.upload-card{width:min(100%,620px);padding:38px;border:1px solid var(--line);border-radius:24px;background:rgba(17,17,25,.95);box-shadow:0 30px 90px rgba(0,0,0,.45)}.upload-card h1{font-size:44px;letter-spacing:-.04em;margin-bottom:10px}.back{display:inline-block;margin-bottom:28px;color:#a9a1b5}.muted{color:var(--muted)}
.upload-card label{display:block;margin:18px 0 8px;font-weight:800}.upload-card #player{width:100%;border:1px solid #383343;border-radius:13px;padding:14px;background:#0e0d13;color:white;font-size:16px;outline:none}.drop{cursor:pointer;min-height:118px;display:grid!important;place-items:center;text-align:center;padding:18px;border:1px dashed #5a526c!important;border-radius:16px;background:#0f0e15;color:#ccc5dc}.drop input{display:none}.preview{display:block;max-width:100%;max-height:320px;margin:18px auto 0;border-radius:14px;object-fit:contain;background:#0b0a0f}.submit{width:100%;margin-top:22px;font-size:16px}.result{margin-top:20px;padding:15px 16px;border-radius:13px;line-height:1.45}.success{background:rgba(44,164,92,.12);border:1px solid rgba(70,210,125,.35);color:#b9f7d0}.error{background:rgba(207,55,70,.12);border:1px solid rgba(238,75,92,.35);color:#ffc1c7}.hidden{display:none}
@media(max-width:900px){nav{display:none}.hero{grid-template-columns:1fr;padding-top:60px}.hero-panel{justify-items:start}.stats{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr 1fr}.enter{grid-template-columns:1fr}.rules{grid-template-columns:1fr}}
@media(max-width:560px){.hero{min-height:auto;padding-bottom:70px}.hero-panel{display:none}.section{padding:75px 20px}.stats,.grid{grid-template-columns:1fr}.tool-card{align-items:flex-start;flex-direction:column}.rules>div{padding-inline:0}footer{flex-direction:column}.upload-card{padding:27px 20px}}
.crest img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.crest {
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    width: 130px;
    height: 130px;

    transform: translateY(35px, -55px);
}

.crest img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* =========================================================
   TEMA MEDIEVAL DARK FANTASY - KINGPORKOLANDIA
   ========================================================= */
@font-face {
    font-family: "Old London";
    src: url("/static/fonts/OldLondon.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=UnifrakturCook:wght@700&display=swap');

* {
    box-sizing: border-box;
}

:root {
    --bg: #090706;
    --panel: rgba(20, 15, 12, 0.94);
    --panel2: rgba(31, 22, 17, 0.95);

    --text: #eee3cf;
    --muted: #b7a58d;

    --gold: #d4a843;
    --gold-light: #f0d27e;

    --red: #681d24;
    --purple: #3d244f;

    --line: rgba(212, 168, 67, 0.22);
}


/* TEXTO GENERAL */
body {
    font-family: "Cinzel", Georgia, serif;
    color: var(--text);

    background:
        linear-gradient(
            rgba(5, 3, 2, 0.82),
            rgba(8, 5, 3, 0.94)
        ),
        url("/static/fondo_medieval.jpg");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}


/* TÍTULOS MÁS MEDIEVALES */
h1,
h2,
h3,
.brand {
    font-family: "Cinzel", Georgia, serif;
    font-weight: 800;
}

h1 {
    text-shadow:
        0 3px 3px rgba(0,0,0,.9),
        0 0 25px rgba(212,168,67,.20);
}

h1 span {
    background: linear-gradient(
        180deg,
        #fff0a6,
        #d7a638,
        #8d6018
    );

    -webkit-background-clip: text;
    color: transparent;
}


/* TEXTOS PEQUEÑOS */
.eyebrow {
    font-family: "MedievalSharp", Georgia, serif;
    color: var(--gold-light);
    letter-spacing: .20em;
}


/* BARRA SUPERIOR */
.nav {
    background:
        linear-gradient(
            180deg,
            rgba(17, 11, 8, .97),
            rgba(10, 7, 6, .92)
        );

    border-bottom: 1px solid rgba(212,168,67,.32);

    box-shadow:
        0 7px 30px rgba(0,0,0,.55);
}

nav a {
    color: #d7c5a6;
}

nav a:hover {
    color: #f6d578;
    text-shadow: 0 0 10px rgba(212,168,67,.40);
}


/* PORTADA */
.hero {
    position: relative;

    background:
        linear-gradient(
            90deg,
            rgba(5,3,2,.90) 0%,
            rgba(8,5,4,.65) 55%,
            rgba(5,3,2,.80) 100%
        ),
        url("/static/fondo_medieval.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-bottom: 1px solid rgba(212,168,67,.20);
}


/* TARJETA DIRECCIÓN DEL SERVIDOR */
.server-card {
    background:
        linear-gradient(
            145deg,
            rgba(28,19,14,.96),
            rgba(12,9,7,.96)
        );

    border: 1px solid rgba(212,168,67,.42);

    box-shadow:
        0 20px 55px rgba(0,0,0,.65),
        inset 0 0 25px rgba(212,168,67,.035);
}


/* SECCIONES */
.section {
    position: relative;
}

.section.alt {
    background:
        linear-gradient(
            180deg,
            rgba(22,15,12,.91),
            rgba(10,7,6,.94)
        );

    border-top: 1px solid rgba(212,168,67,.12);
    border-bottom: 1px solid rgba(212,168,67,.12);
}


/* CUADROS DE CARACTERÍSTICAS */
.feature,
.stat,
.tool-card {
    background:
        linear-gradient(
            145deg,
            rgba(32,22,16,.94),
            rgba(14,10,8,.96)
        );

    border: 1px solid rgba(212,168,67,.25);

    box-shadow:
        0 12px 30px rgba(0,0,0,.35),
        inset 0 0 30px rgba(212,168,67,.025);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.feature:hover,
.stat:hover {
    transform: translateY(-5px);

    border-color: rgba(212,168,67,.58);

    box-shadow:
        0 18px 40px rgba(0,0,0,.48),
        0 0 18px rgba(212,168,67,.08);
}


/* ICONOS */
.feature .icon {
    color: #e3bb59;

    text-shadow:
        0 0 14px rgba(212,168,67,.35);
}


/* BOTONES */
.btn {
    font-family: "Cinzel", Georgia, serif;

    border-radius: 5px;

    text-transform: uppercase;

    letter-spacing: .06em;

    border: 1px solid rgba(235,199,103,.48);

    box-shadow:
        inset 0 0 15px rgba(255,255,255,.04),
        0 8px 22px rgba(0,0,0,.35);
}

.btn.primary {
    background:
        linear-gradient(
            180deg,
            #815522,
            #5c3519
        );

    color: #fff2c8;
}

.btn.primary:hover {
    background:
        linear-gradient(
            180deg,
            #a47731,
            #70451f
        );

    box-shadow:
        0 0 18px rgba(212,168,67,.22);
}

.btn.secondary {
    background:
        linear-gradient(
            180deg,
            #3d283f,
            #211723
        );

    border-color: rgba(153,108,176,.45);

    color: #e8d8ec;
}


/* NORMAS */
.rules > div {
    border-bottom: 1px solid rgba(212,168,67,.18);
}

.rules b {
    color: var(--gold);
}


/* CAJA DE CONEXIÓN */
.connect-box {
    background:
        linear-gradient(
            145deg,
            rgba(53,34,18,.85),
            rgba(21,14,11,.95)
        );

    border: 1px solid rgba(212,168,67,.38);

    box-shadow:
        0 20px 45px rgba(0,0,0,.35);
}


/* DISCORD */
.discord {
    background:
        radial-gradient(
            circle at center,
            rgba(87,47,101,.23),
            rgba(8,5,4,.96) 60%
        );
}


/* PIE DE PÁGINA */
footer {
    background: rgba(7,5,4,.97);

    border-top: 1px solid rgba(212,168,67,.22);

    color: #9d8c73;
}
/* FUENTE GÓTICA PRINCIPAL */
h1,
h2,
.brand {
    font-family: "UnifrakturCook", "MedievalSharp", Georgia, serif !important;
    letter-spacing: 0.02em;
}

/* TEXTO MEDIEVAL MÁS LEGIBLE */
h3,
nav,
.btn,
.eyebrow,
.server-card strong,
.connect-box strong {
    font-family: "MedievalSharp", Georgia, serif !important;
}

/* TEXTO NORMAL PARA QUE NO SEA DIFÍCIL DE LEER */
body,
p,
span {
    font-family: "MedievalSharp", Georgia, serif;
}
/* ==================================================
   FUENTE GÓTICA KINGPORKOLANDIA
   ================================================== */

h1,
h2,
.brand {
    font-family: "UnifrakturCook", cursive !important;
    font-weight: 700 !important;
}

h1 {
    font-size: clamp(54px, 8vw, 95px);
}

h2 {
    font-size: clamp(40px, 5vw, 65px);
}

h3,
nav a,
.btn,
.eyebrow,
.server-card,
.connect-box {
    font-family: "MedievalSharp", cursive !important;
}

body,
p {
    font-family: "MedievalSharp", Georgia, serif !important;
}
/* =========================================
   FUENTE GÓTICA OLD LONDON
   ========================================= */

h1,
h2,
.brand {
    font-family: "Old London", Georgia, serif !important;
    font-weight: normal !important;
}

h3,
nav a,
.btn,
.eyebrow {
    font-family: "Old London", Georgia, serif !important;
}

/* Texto largo más fácil de leer */
body,
p,
.feature p,
.stat span,
.rules p {
    font-family: Georgia, "Times New Roman", serif;
}
/* TÍTULO KINGPORKOLANDIA EN GÓTICA */
.brand span {
    font-family: "Old London", Georgia, serif !important;
    font-size: 30px;
    letter-spacing: 0.03em;
}

h1 span {
    font-family: "Old London", Georgia, serif !important;
}
/* ARREGLAR TÍTULO GRANDE + DESCRIPCIÓN */
.hero-copy h1 {
    line-height: 1.08 !important;
    margin-bottom: 34px !important;
    max-width: 850px;
}

.hero-copy h1 span {
    display: inline-block;
    line-height: 1.08 !important;
}

.hero-text {
    margin-top: 0 !important;
    max-width: 700px;
    line-height: 1.75;
}
.crest {
    position: relative !important;
    left: 40px !important;
    top: -70px !important;
    transform: none !important;
}
/* MINI LOGO SUPERIOR */
.brand-mark {
    width: 52px !important;
    height: 52px !important;

    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;
}

.brand-mark img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}


/* MINI LOGO PIXEL KINGPORKOLANDIA */
.brand-mark {
    width: 58px !important;
    height: 58px !important;
    padding: 0 !important;

    background: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

.brand-mark img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;

    image-rendering: pixelated;
    image-rendering: crisp-edges;
}