/* ==========================================================================
   PixelQuest — retro RPG personal site
   Fonts: Press Start 2P (display) + Nunito (body)
   ========================================================================== */

:root {
    --night: #0d0a33;
    --night-deep: #070522;
    --panel: #17114d;
    --panel-2: #1e1762;
    --outline: #322a7d;
    --ink: #eae6ff;
    --ink-dim: #a49bd8;
    --mint: #6ee7a8;
    --gold: #ffd166;
    --coral: #ff6b8a;
    --lavender: #b79bff;
    --sky: #6cc7ff;
    --black: #0a0818;
    --px: "Press Start 2P", monospace;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
    font-family: "Nunito", system-ui, sans-serif;
    font-size: 16.5px;
    line-height: 1.65;
    background: linear-gradient(180deg, var(--night-deep) 0%, var(--night) 45%, #141052 100%);
    color: var(--ink);
    min-height: 100vh;
    overflow-x: hidden;
}

a { color: var(--sky); text-decoration: none; }
a:hover { text-decoration: underline; }

main { max-width: 1000px; margin: 0 auto; padding: 0 1.25rem; position: relative; z-index: 2; }

/* ==========================================================================
   Night sky
   ========================================================================== */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 25px 35px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 130px 90px, var(--lavender), transparent),
        radial-gradient(2px 2px at 210px 40px, var(--gold), transparent),
        radial-gradient(1.5px 1.5px at 300px 140px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 80px 180px, var(--sky), transparent),
        radial-gradient(2px 2px at 350px 220px, #fff, transparent);
    background-size: 400px 260px;
    animation: twinkle 4s ease-in-out infinite alternate;
}

.stars.s2 {
    background-position: 180px 120px;
    background-size: 540px 340px;
    animation-duration: 6s;
    animation-delay: 1.5s;
    opacity: .6;
}

@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }

.comet {
    position: absolute;
    top: 12%;
    left: -8%;
    width: 90px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #fff);
    transform: rotate(-18deg);
    animation: comet 14s linear infinite;
    opacity: 0;
}

@keyframes comet {
    0%, 88% { opacity: 0; left: -8%; top: 12%; }
    90% { opacity: 1; }
    100% { opacity: 0; left: 108%; top: 32%; }
}

/* ==========================================================================
   HUD (nav)
   ========================================================================== */
.hud {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: .8rem 1.25rem;
    background: rgba(7, 5, 34, .88);
    backdrop-filter: blur(4px);
    border-bottom: 3px solid var(--outline);
    font-family: var(--px);
    font-size: 10px;
}

.hud-logo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--gold);
    font-size: 11px;
}
.hud-logo:hover { text-decoration: none; }

.hud-links {
    display: flex;
    list-style: none;
    gap: 1.1rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.hud-links::-webkit-scrollbar { display: none; }

.hud-links a { color: var(--ink-dim); white-space: nowrap; }
.hud-links a:hover { color: var(--mint); text-decoration: none; }

.hud-cta {
    margin-left: auto;
    color: var(--black);
    background: var(--mint);
    border: 2px solid var(--black);
    box-shadow: 3px 3px 0 var(--black);
    padding: .45rem .6rem;
    white-space: nowrap;
}
.hud-cta:hover { text-decoration: none; transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--black); }

@media (max-width: 760px) {
    .hud { flex-wrap: wrap; gap: .75rem; }
    .hud-cta { margin-left: 0; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { text-align: center; padding: 5.5rem 0 4rem; }
.hero-small { padding: 3.5rem 0 1rem; }

.hero-tag {
    font-family: var(--px);
    font-size: 10px;
    color: var(--coral);
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
}

.hero-title {
    font-family: var(--px);
    font-size: clamp(26px, 6vw, 54px);
    line-height: 1.35;
    color: var(--ink);
    text-shadow: 4px 4px 0 var(--black), 8px 8px 0 rgba(110, 231, 168, .25);
}

.hero-sub { margin-top: 1.4rem; color: var(--ink-dim); font-weight: 700; }

.press-start {
    display: inline-block;
    margin-top: 2.2rem;
    font-family: var(--px);
    font-size: 13px;
    color: var(--black);
    background: var(--gold);
    padding: 1rem 1.4rem;
    border: 3px solid var(--black);
    box-shadow: 6px 6px 0 var(--black);
    animation: pulse-btn 1.6s steps(2) infinite;
}
.press-start:hover {
    text-decoration: none;
    transform: translate(2px, 2px);
    box-shadow: 4px 4px 0 var(--black);
    animation: none;
}
.press-start.small { font-size: 10px; padding: .7rem 1rem; animation: none; }

@keyframes pulse-btn { 50% { background: #ffe19a; } }

/* ==========================================================================
   Zones (sections)
   ========================================================================== */
.zone { padding: 3rem 0 1rem; }

.zone-title {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-family: var(--px);
    font-size: clamp(14px, 2.5vw, 18px);
    color: var(--mint);
    margin-bottom: 1.75rem;
}
.zone-title svg { color: var(--gold); flex-shrink: 0; }

.zone-intro { color: var(--ink-dim); margin: -0.9rem 0 1.5rem; }

.zone-more { text-align: center; margin: 2rem 0 1rem; }

/* ==========================================================================
   Pixel cards
   ========================================================================== */
.pixel-card {
    background: var(--panel);
    border: 3px solid var(--outline);
    box-shadow: 6px 6px 0 var(--black);
    padding: 1.4rem 1.5rem;
    position: relative;
}

/* ==========================================================================
   Player
   ========================================================================== */
.player-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 1.75rem;
    align-items: start;
}

@media (max-width: 800px) {
    .player-grid { grid-template-columns: 1fr; }
}

.char-head { display: flex; gap: 1.1rem; align-items: center; margin-bottom: 1.4rem; }

.char-sprite {
    width: 66px;
    height: 72px;
    background: var(--panel-2);
    border: 3px solid var(--outline);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 6px;
    image-rendering: pixelated;
    flex-shrink: 0;
}

/* 8x9 pixel character drawn in box-shadow, 6px per pixel */
.sprite-px {
    width: 6px;
    height: 6px;
    background: transparent;
    position: relative;
    left: -21px;
    top: -54px;
    box-shadow:
        /* hair */
        12px 0 #2b2118, 18px 0 #2b2118, 24px 0 #2b2118, 30px 0 #2b2118,
        /* face */
        12px 6px #e8b98a, 18px 6px #e8b98a, 24px 6px #e8b98a, 30px 6px #e8b98a,
        /* eyes */
        12px 12px #e8b98a, 18px 12px #14102e, 24px 12px #e8b98a, 30px 12px #14102e,
        /* chin */
        12px 18px #e8b98a, 18px 18px #e8b98a, 24px 18px #e8b98a, 30px 18px #e8b98a,
        /* suit shoulders */
        6px 24px #3b6bd6, 12px 24px #3b6bd6, 18px 24px #3b6bd6, 24px 24px #3b6bd6, 30px 24px #3b6bd6, 36px 24px #3b6bd6,
        /* suit + tie */
        6px 30px #3b6bd6, 12px 30px #3b6bd6, 18px 30px #67e8c9, 24px 30px #67e8c9, 30px 30px #3b6bd6, 36px 30px #3b6bd6,
        6px 36px #3b6bd6, 12px 36px #3b6bd6, 18px 36px #3b6bd6, 24px 36px #3b6bd6, 30px 36px #3b6bd6, 36px 36px #3b6bd6,
        /* legs */
        12px 42px #23204a, 18px 42px #23204a, 24px 42px #23204a, 30px 42px #23204a,
        /* boots */
        12px 48px #14102e, 18px 48px #14102e, 24px 48px #14102e, 30px 48px #14102e;
}

.char-name { font-family: var(--px); font-size: 16px; color: var(--gold); }
.char-class { color: var(--lavender); font-weight: 700; font-size: 14.5px; margin-top: .35rem; }
.char-level { font-family: var(--px); font-size: 9px; color: var(--ink-dim); margin-top: .5rem; }

.bar-row { margin-top: .8rem; }

.bar-label {
    display: block;
    font-family: var(--px);
    font-size: 8.5px;
    color: var(--ink-dim);
    margin-bottom: .35rem;
}

.bar {
    height: 16px;
    background: var(--night-deep);
    border: 2px solid var(--outline);
}

.bar-fill {
    height: 100%;
    background-image: repeating-linear-gradient(90deg,
            rgba(255, 255, 255, .22) 0 2px, transparent 2px 10px);
    transition: width 1s steps(12);
}

.bar-fill.hp { background-color: var(--coral); }
.bar-fill.mp { background-color: var(--sky); }
.bar-fill.xp { background-color: var(--gold); }
.bar-fill.stat { background-color: var(--mint); }

.xp-note { font-size: 13px; color: var(--ink-dim); margin-top: .5rem; }

.char-meta { margin-top: 1.2rem; font-size: 14px; }
.char-meta dt { font-family: var(--px); font-size: 8.5px; color: var(--coral); margin-top: .7rem; }
.char-meta dd { color: var(--ink); }

.card-heading {
    font-family: var(--px);
    font-size: 11px;
    color: var(--sky);
    margin-bottom: 1rem;
}
.inv-heading { margin-top: 1.75rem; }

.stat-row {
    display: grid;
    grid-template-columns: minmax(140px, .9fr) 1fr 2.2rem;
    gap: .8rem;
    align-items: center;
    margin-bottom: .65rem;
}

.stat-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.stat-bar { height: 13px; }
.stat-val { font-family: var(--px); font-size: 9px; color: var(--mint); text-align: right; }

.inventory { list-style: none; }

.inv-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .4rem 0;
    border-bottom: 2px dashed rgba(50, 42, 125, .6);
}
.inv-item:last-child { border-bottom: none; }
.inv-item svg { color: var(--gold); flex-shrink: 0; }
.inv-name { font-weight: 900; font-size: 14px; }
.inv-note { color: var(--ink-dim); font-size: 12.5px; margin-left: auto; text-align: right; }

/* ==========================================================================
   Quests
   ========================================================================== */
.quest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.75rem;
    margin-top: 1.75rem;
}

.main-quest {
    border-color: var(--gold);
    box-shadow: 6px 6px 0 var(--black), 0 0 34px rgba(255, 209, 102, .12);
}

.quest-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: .8rem;
}

.quest-type { font-family: var(--px); font-size: 8.5px; color: var(--coral); }
.main-quest .quest-type { color: var(--gold); }

.quest-status { font-family: var(--px); font-size: 8.5px; white-space: nowrap; }
.st-in_progress { color: var(--sky); }
.st-complete { color: var(--mint); }
.st-archived { color: var(--ink-dim); }

.quest-name { font-size: 19px; font-weight: 900; line-height: 1.35; }
.main-quest .quest-name { font-size: 23px; }

.quest-giver { color: var(--lavender); font-size: 13.5px; font-weight: 700; margin: .3rem 0 .6rem; }

.quest-desc { color: var(--ink-dim); font-size: 14.5px; }

.quest-loot {
    margin-top: .7rem;
    font-family: var(--px);
    font-size: 9px;
    color: var(--gold);
}

.quest-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin-top: 1rem;
}

.quest-xp {
    font-family: var(--px);
    font-size: 9px;
    color: var(--black);
    background: var(--gold);
    border: 2px solid var(--black);
    padding: .3rem .45rem;
    margin-right: .35rem;
}

.pixel-tag {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--lavender);
    background: var(--night-deep);
    border: 2px solid var(--outline);
    padding: .1rem .5rem;
}

/* Academy */
.course-diff { font-size: 13px; color: var(--gold); letter-spacing: 2px; }

/* ==========================================================================
   Badges
   ========================================================================== */
.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.badge {
    text-align: center;
    background: var(--panel);
    border: 3px solid var(--outline);
    box-shadow: 5px 5px 0 var(--black);
    padding: 1.4rem 1rem 1.1rem;
}

.badge-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--night-deep);
    border: 3px solid var(--outline);
}

.badge-name { font-family: var(--px); font-size: 10px; line-height: 1.6; }
.badge-note { color: var(--ink-dim); font-size: 12.5px; margin-top: .45rem; }
.badge-rarity { font-family: var(--px); font-size: 7.5px; margin-top: .7rem; letter-spacing: 1px; text-transform: uppercase; }

.r-legendary { border-color: var(--gold); }
.r-legendary .badge-icon { color: var(--gold); border-color: var(--gold); box-shadow: 0 0 22px rgba(255, 209, 102, .35); }
.r-legendary .badge-rarity { color: var(--gold); }

.r-epic .badge-icon { color: var(--lavender); border-color: var(--lavender); }
.r-epic .badge-rarity { color: var(--lavender); }

.r-rare .badge-icon { color: var(--sky); border-color: var(--sky); }
.r-rare .badge-rarity { color: var(--sky); }

.r-common .badge-icon { color: var(--ink-dim); }
.r-common .badge-rarity { color: var(--ink-dim); }

/* ==========================================================================
   Journal
   ========================================================================== */
.journal-list { display: flex; flex-direction: column; gap: 1.1rem; }

.journal-row {
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
    color: var(--ink);
    padding: 1.05rem 1.3rem;
}
.journal-row:hover {
    text-decoration: none;
    transform: translate(2px, 2px);
    box-shadow: 4px 4px 0 var(--black);
    border-color: var(--mint);
}

.journal-date { font-family: var(--px); font-size: 9px; color: var(--coral); white-space: nowrap; }
.journal-title { font-weight: 900; font-size: 17px; }
.journal-arrow { margin-left: auto; color: var(--mint); font-family: var(--px); font-size: 11px; }

@media (max-width: 620px) {
    .journal-row { flex-direction: column; gap: .4rem; }
    .journal-arrow { display: none; }
}

/* Post */
.post { max-width: 760px; margin: 0 auto; }

.post-date { font-family: var(--px); font-size: 9px; color: var(--coral); margin-bottom: 1rem; }
.post-title { font-family: var(--px); font-size: clamp(18px, 4vw, 28px); line-height: 1.5; }
.post-summary { color: var(--ink-dim); margin-top: 1rem; font-size: 15.5px; }

.post-body { margin-top: 2rem; padding: 1.75rem 2rem; }
.post-body p { margin-bottom: 1.1rem; }
.post-body h2, .post-body h3 { font-family: var(--px); font-size: 13px; color: var(--mint); margin: 1.6rem 0 .9rem; line-height: 1.7; }
.post-body ul, .post-body ol { margin: 0 0 1.1rem 1.4rem; }
.post-body li { margin-bottom: .4rem; }
.post-body strong { color: var(--gold); }
.post-body code {
    font-family: ui-monospace, monospace;
    font-size: .88em;
    background: var(--night-deep);
    border: 1px solid var(--outline);
    padding: .1em .35em;
}
.post-body pre {
    background: var(--night-deep);
    border: 2px solid var(--outline);
    padding: 1rem;
    overflow-x: auto;
    margin-bottom: 1.1rem;
}
.post-body pre code { border: none; background: none; }
.post-body blockquote { border-left: 4px solid var(--lavender); padding-left: 1rem; color: var(--ink-dim); margin-bottom: 1.1rem; }

/* ==========================================================================
   Ground (footer)
   ========================================================================== */
.ground { margin-top: 5rem; position: relative; z-index: 2; }

.ground-grass {
    height: 14px;
    background:
        repeating-linear-gradient(90deg,
            var(--mint) 0 14px, #4cc98a 14px 28px);
    border-top: 3px solid var(--black);
    border-bottom: 3px solid var(--black);
}

.ground-inner {
    background: #123024;
    text-align: center;
    padding: 2rem 1.25rem 2.5rem;
}

.save-line { font-family: var(--px); font-size: 10px; color: var(--mint); }

.ground-links { margin-top: 1rem; font-family: var(--px); font-size: 8.5px; }
.ground-links a { color: var(--ink-dim); }
.ground-links a:hover { color: var(--gold); }

.konami-hint { margin-top: 1.2rem; font-family: var(--px); font-size: 8px; color: rgba(164, 155, 216, .4); }

/* ==========================================================================
   Level-up toast + confetti
   ========================================================================== */
.levelup {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    background: rgba(7, 5, 34, .7);
}
.levelup[hidden] { display: none; }

.levelup-box {
    background: var(--panel);
    border: 4px solid var(--gold);
    box-shadow: 8px 8px 0 var(--black);
    padding: 2rem 2.5rem;
    text-align: center;
    animation: levelpop .3s steps(3);
}
.levelup-title { font-family: var(--px); font-size: 20px; color: var(--gold); margin-bottom: 1rem; }

@keyframes levelpop { from { transform: scale(.6); } to { transform: scale(1); } }

.confetti {
    position: fixed;
    top: -12px;
    width: 8px;
    height: 8px;
    z-index: 299;
    animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
    to { transform: translateY(105vh) rotate(540deg); }
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .stars, .comet, .press-start { animation: none; }
    *, *::before, *::after { transition: none !important; animation-duration: .001s !important; }
}