/* ============================================================
   thesecond.quest -- retro pixel-art game UI
   Palette:
     Dark        #1a1a2e
     Black       #0a0a0a
     Gold        #ffd700
     HP Red      #ff3333
     MP Blue     #3333ff
     XP Green    #33ff33
     UI Gray     #888888
   Fonts:
     Display     "Press Start 2P"
     Body        "VT323"
     Labels      "Silkscreen"
   ============================================================ */

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

html, body {
    background: #1a1a2e;
    color: #ffd700;
    font-family: "Press Start 2P", monospace;
    -webkit-font-smoothing: none;
    font-smooth: never;
    image-rendering: pixelated;
    min-height: 100%;
}

body {
    overflow-x: hidden;
    padding-bottom: 96px;
    position: relative;
}

/* ---------- CRT scanlines + vignette ---------- */
.scanlines {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, 0.18) 3px,
        rgba(0, 0, 0, 0.18) 4px
    );
    mix-blend-mode: multiply;
}

.crt-vignette {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 9001;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0) 55%,
        rgba(0, 0, 0, 0.55) 100%
    );
}

/* ============================================================
   HUD HEADER
   ============================================================ */
.hud {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #0a0a0a;
    border-bottom: 4px solid #ffd700;
    padding: 8px 16px;
    box-shadow: 0 4px 0 0 #1a1a2e, 0 8px 0 0 #ffd700;
}

.hud-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 6px 0;
}

.hud-top {
    border-bottom: 2px dashed #888888;
    padding-bottom: 8px;
}

.hud-block {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 120px;
}

.hud-label {
    font-family: "Silkscreen", monospace;
    font-size: 0.7rem;
    color: #888888;
    letter-spacing: 1px;
}

.hud-value {
    font-family: "Press Start 2P", monospace;
    font-size: 0.85rem;
    color: #ffd700;
    margin-top: 4px;
}

.hud-coin .hud-value {
    color: #ffd700;
    text-shadow: 2px 2px 0 #3a3a00;
}

/* HP / MP / XP bars */
.hud-bars {
    gap: 24px;
}

.bar-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 200px;
    min-width: 200px;
}

.bar-label {
    font-family: "Press Start 2P", monospace;
    font-size: 0.7rem;
    width: 28px;
    color: #ffd700;
}

.bar {
    flex: 1;
    height: 14px;
    background: #1a1a2e;
    border: 2px solid #ffd700;
    position: relative;
    image-rendering: pixelated;
    box-shadow: inset 0 0 0 1px #0a0a0a;
}

.bar-fill {
    height: 100%;
    transition: width 600ms steps(20, end);
}

.bar-hp .bar-fill {
    background: #ff3333;
    box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.35);
}

.bar-mp .bar-fill {
    background: #3333ff;
    box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.35);
}

.bar-xp .bar-fill {
    background: #33ff33;
    box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.35);
}

.bar-num {
    font-family: "VT323", monospace;
    font-size: 1.1rem;
    color: #ffd700;
    min-width: 64px;
    text-align: right;
}

/* ============================================================
   SCREEN / MAIN CONTENT
   ============================================================ */
.screen {
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 20px 80px;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* ============================================================
   TITLE SCREEN
   ============================================================ */
.title-screen {
    position: relative;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 215, 0, 0.04) 0 2px,
            transparent 2px 8px
        ),
        linear-gradient(180deg, #0a0a0a 0%, #1a1a2e 100%);
    border: 4px solid #ffd700;
    box-shadow:
        0 0 0 4px #0a0a0a,
        0 0 0 8px #ffd700,
        0 0 24px rgba(255, 215, 0, 0.25);
    padding: 56px 28px 48px;
    text-align: center;
    overflow: hidden;
    min-height: 560px;
}

.title-frame {
    position: relative;
    z-index: 2;
}

.press-start {
    font-family: "Press Start 2P", monospace;
    font-size: 0.9rem;
    color: #ff3333;
    margin-bottom: 32px;
    letter-spacing: 2px;
}

.blink {
    animation: blink 1s steps(2, jump-none) infinite;
}

@keyframes blink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.game-title {
    font-family: "Press Start 2P", monospace;
    font-size: clamp(2.2rem, 7vw, 4.8rem);
    line-height: 1.05;
    color: #ffd700;
    text-shadow:
        4px 0 0 #ff3333,
        8px 4px 0 #0a0a0a,
        -4px 0 0 #3333ff;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.game-title .title-line-1 { color: #ffd700; }
.game-title .title-line-2 { color: #33ff33; }
.game-title .title-line-3 { color: #ffd700; }

.subtitle {
    font-family: "VT323", monospace;
    font-size: 1.4rem;
    color: #888888;
    margin-bottom: 36px;
    letter-spacing: 1px;
}

/* main menu list */
.menu-list {
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 auto 40px;
    text-align: left;
    padding: 16px 32px;
    border: 2px dashed #ffd700;
    background: rgba(0, 0, 0, 0.4);
    min-width: min(420px, 92%);
}

.menu-item {
    font-family: "Press Start 2P", monospace;
    font-size: 0.85rem;
    padding: 8px 6px;
    color: #888888;
    cursor: pointer;
    user-select: none;
    transition: color 120ms steps(2, end), background 120ms steps(2, end);
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu-item .cursor {
    color: transparent;
    width: 1em;
    display: inline-block;
}

.menu-item.active {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.12);
}

.menu-item.active .cursor {
    color: #ff3333;
    animation: cursor-bounce 0.6s steps(2, end) infinite;
}

.menu-item:hover {
    color: #33ff33;
}

@keyframes cursor-bounce {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}

.copy-line {
    font-family: "Silkscreen", monospace;
    font-size: 0.7rem;
    color: #888888;
    margin-top: 16px;
    letter-spacing: 1px;
}

/* sprites */
.sprite {
    position: absolute;
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    z-index: 1;
    pointer-events: none;
}

/* hero sprite (CSS box-shadow pixel art) */
.sprite-hero {
    width: 4px;
    height: 4px;
    top: 80%;
    left: 12%;
    background: transparent;
    box-shadow:
        /* helmet (gold) row 1 */
        8px  0 0 #ffd700, 12px  0 0 #ffd700, 16px  0 0 #ffd700,
        /* helmet row 2 */
        4px  4px 0 #ffd700, 8px  4px 0 #ffd700, 12px  4px 0 #ffd700, 16px 4px 0 #ffd700, 20px 4px 0 #ffd700,
        /* face row */
        4px  8px 0 #ffd700, 8px  8px 0 #0a0a0a, 12px 8px 0 #ffd700, 16px 8px 0 #0a0a0a, 20px 8px 0 #ffd700,
        /* chin */
        8px 12px 0 #ff3333, 12px 12px 0 #ff3333, 16px 12px 0 #ff3333,
        /* body (red tunic) */
        4px 16px 0 #ff3333, 8px 16px 0 #ff3333, 12px 16px 0 #ffd700, 16px 16px 0 #ff3333, 20px 16px 0 #ff3333,
        4px 20px 0 #ff3333, 8px 20px 0 #ff3333, 12px 20px 0 #ff3333, 16px 20px 0 #ff3333, 20px 20px 0 #ff3333,
        /* legs */
        8px 24px 0 #3333ff, 12px 24px 0 #3333ff, 16px 24px 0 #3333ff,
        8px 28px 0 #888888, 16px 28px 0 #888888;
    animation: hero-bob 1.2s steps(2, end) infinite;
}

@keyframes hero-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* coin sprite */
.sprite-coin {
    width: 4px;
    height: 4px;
    top: 24%;
    right: 14%;
    background: transparent;
    box-shadow:
        4px  0 0 #ffd700, 8px  0 0 #ffd700,
        0    4px 0 #ffd700, 4px  4px 0 #fff5b0, 8px  4px 0 #ffd700, 12px 4px 0 #ffd700,
        0    8px 0 #ffd700, 4px  8px 0 #fff5b0, 8px  8px 0 #ffd700, 12px 8px 0 #ffd700,
        0   12px 0 #ffd700, 4px 12px 0 #ffd700, 8px 12px 0 #ffd700, 12px 12px 0 #ffd700,
        4px 16px 0 #ffd700, 8px 16px 0 #ffd700;
    animation: coin-spin 1.6s steps(4, end) infinite;
}

@keyframes coin-spin {
    0%   { transform: scaleX(1); }
    25%  { transform: scaleX(0.4); }
    50%  { transform: scaleX(0.1); }
    75%  { transform: scaleX(0.4); }
    100% { transform: scaleX(1); }
}

/* heart sprite */
.sprite-heart {
    width: 4px;
    height: 4px;
    top: 70%;
    right: 9%;
    background: transparent;
    box-shadow:
        0  4px 0 #ff3333, 4px  4px 0 #ff3333, 12px 4px 0 #ff3333, 16px 4px 0 #ff3333,
        0  8px 0 #ff3333, 4px  8px 0 #ffaaaa, 8px  8px 0 #ff3333, 12px 8px 0 #ff3333, 16px 8px 0 #ff3333,
        4px 12px 0 #ff3333, 8px 12px 0 #ff3333, 12px 12px 0 #ff3333,
        8px 16px 0 #ff3333;
    animation: heart-pulse 1s steps(2, end) infinite;
}

@keyframes heart-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.25); }
}

/* star sprite */
.sprite-star {
    width: 4px;
    height: 4px;
    top: 16%;
    left: 9%;
    background: transparent;
    box-shadow:
        8px  0 0 #ffd700,
        4px  4px 0 #ffd700, 8px  4px 0 #ffd700, 12px 4px 0 #ffd700,
        0   8px 0 #ffd700, 4px  8px 0 #ffd700, 8px  8px 0 #ffd700, 12px 8px 0 #ffd700, 16px 8px 0 #ffd700,
        4px 12px 0 #ffd700, 8px 12px 0 #ffd700, 12px 12px 0 #ffd700,
        0  16px 0 #ffd700, 4px 16px 0 #ffd700, 12px 16px 0 #ffd700, 16px 16px 0 #ffd700;
    animation: star-twinkle 1.6s steps(2, end) infinite;
}

@keyframes star-twinkle {
    0%, 100% { opacity: 1; transform: rotate(0deg); }
    50%      { opacity: 0.5; transform: rotate(8deg); }
}

/* ============================================================
   PANELS (level select, achievements, bestiary, lore, save)
   ============================================================ */
.panel {
    background: #0a0a0a;
    border: 4px solid #ffd700;
    padding: 28px 24px;
    box-shadow: 8px 8px 0 0 #1a1a2e, 8px 8px 0 4px #ffd700;
    position: relative;
}

.panel::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px dashed rgba(255, 215, 0, 0.3);
    pointer-events: none;
}

.panel-header {
    margin-bottom: 24px;
    border-bottom: 2px dashed #888888;
    padding-bottom: 14px;
}

.panel-tag {
    font-family: "Silkscreen", monospace;
    font-size: 0.7rem;
    color: #33ff33;
    letter-spacing: 2px;
}

.panel-title {
    font-family: "Press Start 2P", monospace;
    font-size: 1.3rem;
    color: #ffd700;
    margin: 8px 0;
    text-shadow: 3px 3px 0 #1a1a2e;
}

.panel-sub {
    font-family: "VT323", monospace;
    font-size: 1.25rem;
    color: #888888;
}

/* ============================================================
   LEVEL SELECT
   ============================================================ */
.level-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.level-tile {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 80px;
    border: 2px solid #ffd700;
    background: #1a1a2e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    position: relative;
    transition: background 120ms steps(2, end), transform 120ms steps(2, end);
    image-rendering: pixelated;
}

.level-tile:hover {
    background: rgba(255, 215, 0, 0.2);
    transform: translate(-2px, -2px);
}

.level-num {
    font-family: "Press Start 2P", monospace;
    font-size: 1rem;
    color: #ffd700;
}

.level-stars {
    font-family: "Silkscreen", monospace;
    font-size: 0.7rem;
    color: #ffd700;
    letter-spacing: 1px;
}

/* Tile state colors */
.level-tile.cleared {
    border-color: #888888;
    background: #0a0a0a;
}
.level-tile.cleared .level-num,
.level-tile.cleared .level-stars {
    color: #888888;
}

.level-tile.current {
    border-color: #33ff33;
    background: rgba(51, 255, 51, 0.12);
}
.level-tile.current .level-num,
.level-tile.current .level-stars {
    color: #33ff33;
}

.level-tile.new {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.08);
}

.level-tile.locked {
    border-color: #1a1a2e;
    background: #0a0a0a;
    cursor: not-allowed;
    opacity: 0.55;
}
.level-tile.locked .level-num,
.level-tile.locked .level-stars {
    color: #888888;
}
.level-tile.locked:hover {
    background: #0a0a0a;
    transform: none;
}

.level-tile.boss {
    border-color: #ff3333;
    background: linear-gradient(180deg, rgba(255,51,51,0.18), rgba(0,0,0,0.6));
}
.level-tile.boss .level-num {
    color: #ff3333;
    text-shadow: 2px 2px 0 #0a0a0a;
}

.tile-flag {
    position: absolute;
    top: 4px;
    right: 4px;
    font-family: "Silkscreen", monospace;
    font-size: 0.6rem;
    color: #0a0a0a;
    background: #ffd700;
    padding: 1px 4px;
    letter-spacing: 1px;
}

.level-tile.current .tile-flag { background: #33ff33; }
.level-tile.boss    .tile-flag { background: #ff3333; color: #ffd700; }

.pulse {
    animation: tile-pulse 1.2s steps(2, end) infinite;
}

@keyframes tile-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(51, 255, 51, 0.6); }
    50%      { box-shadow: 0 0 0 6px rgba(51, 255, 51, 0); }
}

/* legend */
.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 18px;
    padding: 8px 10px;
    border: 2px dashed #888888;
}

.legend-item {
    font-family: "Silkscreen", monospace;
    font-size: 0.75rem;
    color: #888888;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 1px;
}

.swatch {
    width: 12px;
    height: 12px;
    display: inline-block;
    border: 1px solid #0a0a0a;
}

.sw-cleared { background: #0a0a0a;  border-color: #888888; }
.sw-current { background: #33ff33; }
.sw-new     { background: #ffd700; }
.sw-boss    { background: #ff3333; }
.sw-locked  { background: #1a1a2e;  border-color: #888888; opacity: 0.6; }

/* dialog box */
.dialog-box {
    border: 3px solid #ffd700;
    background: #0a0a0a;
    padding: 14px 18px;
    position: relative;
    box-shadow: inset 0 0 0 2px #1a1a2e;
}

.dialog-box::after {
    content: "";
    position: absolute;
    bottom: -10px;
    right: 18px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #ffd700;
}

.dialog-tag {
    font-family: "Silkscreen", monospace;
    font-size: 0.7rem;
    color: #33ff33;
    letter-spacing: 2px;
    margin-bottom: 6px;
}

.dialog-text {
    font-family: "VT323", monospace;
    font-size: 1.3rem;
    color: #ffd700;
    line-height: 1.3;
}

.cursor-blink {
    animation: blink 0.6s steps(2, jump-none) infinite;
    color: #ffd700;
}

/* ============================================================
   ACHIEVEMENT BADGES
   ============================================================ */
.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 18px;
}

.badge {
    border: 2px solid #888888;
    background: #1a1a2e;
    padding: 14px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: transform 120ms steps(2, end);
}

.badge.unlocked {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.06);
}

.badge.unlocked:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 0 #ffd700;
}

.badge.locked {
    opacity: 0.5;
    filter: grayscale(1);
}

/* badge art -- pixel art via box-shadow */
.badge-art {
    width: 4px;
    height: 4px;
    margin: 22px 0 26px;
    background: transparent;
    image-rendering: pixelated;
    position: relative;
}

.art-sword {
    box-shadow:
        20px  0 0 #888888,
        16px  4px 0 #888888, 20px  4px 0 #ffffff,
        12px  8px 0 #888888, 16px  8px 0 #ffffff, 20px  8px 0 #888888,
         8px 12px 0 #888888, 12px 12px 0 #ffffff, 16px 12px 0 #888888, 20px 12px 0 #888888,
         4px 16px 0 #ffd700,  8px 16px 0 #ffd700, 12px 16px 0 #888888, 16px 16px 0 #888888,
         4px 20px 0 #ffd700,  8px 20px 0 #ffd700, 12px 20px 0 #888888,
         0  24px 0 #3a2a00,  4px 24px 0 #ffd700,  8px 24px 0 #3a2a00;
}

.art-coin {
    box-shadow:
         8px  0 0 #ffd700, 12px  0 0 #ffd700, 16px  0 0 #ffd700,
         4px  4px 0 #ffd700,  8px  4px 0 #fff5b0, 12px  4px 0 #fff5b0, 16px  4px 0 #ffd700, 20px  4px 0 #ffd700,
         4px  8px 0 #ffd700,  8px  8px 0 #fff5b0, 12px  8px 0 #ffd700, 16px  8px 0 #ffd700, 20px  8px 0 #ffd700,
         4px 12px 0 #ffd700,  8px 12px 0 #ffd700, 12px 12px 0 #ffd700, 16px 12px 0 #ffd700, 20px 12px 0 #ffd700,
         8px 16px 0 #ffd700, 12px 16px 0 #ffd700, 16px 16px 0 #ffd700;
}

.art-heart {
    box-shadow:
         4px  4px 0 #ff3333,  8px  4px 0 #ff3333, 16px  4px 0 #ff3333, 20px  4px 0 #ff3333,
         0    8px 0 #ff3333,  4px  8px 0 #ffaaaa,  8px  8px 0 #ff3333, 12px  8px 0 #ff3333, 16px  8px 0 #ff3333, 20px  8px 0 #ff3333, 24px  8px 0 #ff3333,
         0   12px 0 #ff3333,  4px 12px 0 #ff3333,  8px 12px 0 #ff3333, 12px 12px 0 #ff3333, 16px 12px 0 #ff3333, 20px 12px 0 #ff3333, 24px 12px 0 #ff3333,
         4px 16px 0 #ff3333,  8px 16px 0 #ff3333, 12px 16px 0 #ff3333, 16px 16px 0 #ff3333, 20px 16px 0 #ff3333,
         8px 20px 0 #ff3333, 12px 20px 0 #ff3333, 16px 20px 0 #ff3333,
        12px 24px 0 #ff3333;
}

.art-star {
    box-shadow:
        12px  0 0 #ffd700,
         8px  4px 0 #ffd700, 12px  4px 0 #fff5b0, 16px  4px 0 #ffd700,
         0    8px 0 #ffd700,  4px  8px 0 #ffd700,  8px  8px 0 #ffd700, 12px  8px 0 #fff5b0, 16px  8px 0 #ffd700, 20px  8px 0 #ffd700, 24px  8px 0 #ffd700,
         4px 12px 0 #ffd700,  8px 12px 0 #ffd700, 12px 12px 0 #ffd700, 16px 12px 0 #ffd700, 20px 12px 0 #ffd700,
         4px 16px 0 #ffd700,  8px 16px 0 #ffd700, 16px 16px 0 #ffd700, 20px 16px 0 #ffd700,
         0   20px 0 #ffd700,  4px 20px 0 #ffd700, 20px 20px 0 #ffd700, 24px 20px 0 #ffd700;
}

.art-wand {
    box-shadow:
        20px  0 0 #3333ff,
        16px  4px 0 #3333ff, 20px  4px 0 #6666ff, 24px  4px 0 #3333ff,
        20px  8px 0 #3333ff,
        16px 12px 0 #888888,
        12px 16px 0 #888888,
         8px 20px 0 #888888,
         4px 24px 0 #ffd700,  8px 24px 0 #888888;
}

.art-bolt {
    box-shadow:
        16px  0 0 #ffd700,
        12px  4px 0 #ffd700, 16px  4px 0 #ffd700,
         8px  8px 0 #ffd700, 12px  8px 0 #ffd700, 16px  8px 0 #ffd700, 20px  8px 0 #ffd700,
         8px 12px 0 #ffd700, 12px 12px 0 #ffd700, 16px 12px 0 #ffd700,
        12px 16px 0 #ffd700, 16px 16px 0 #ffd700, 20px 16px 0 #ffd700,
        12px 20px 0 #ffd700, 16px 20px 0 #ffd700,
        12px 24px 0 #ffd700;
}

.art-locked {
    box-shadow:
         8px  0 0 #888888, 12px  0 0 #888888, 16px  0 0 #888888,
         4px  4px 0 #888888,                      20px  4px 0 #888888,
         4px  8px 0 #888888,                      20px  8px 0 #888888,
         0   12px 0 #888888,  4px 12px 0 #888888,  8px 12px 0 #888888, 12px 12px 0 #888888, 16px 12px 0 #888888, 20px 12px 0 #888888, 24px 12px 0 #888888,
         0   16px 0 #888888,  4px 16px 0 #888888, 12px 16px 0 #ffd700, 20px 16px 0 #888888, 24px 16px 0 #888888,
         0   20px 0 #888888,  4px 20px 0 #888888, 12px 20px 0 #ffd700, 20px 20px 0 #888888, 24px 20px 0 #888888,
         0   24px 0 #888888,  4px 24px 0 #888888,  8px 24px 0 #888888, 12px 24px 0 #888888, 16px 24px 0 #888888, 20px 24px 0 #888888, 24px 24px 0 #888888;
}

.badge-name {
    font-family: "Press Start 2P", monospace;
    font-size: 0.7rem;
    color: #ffd700;
    margin-top: 4px;
}

.badge.locked .badge-name {
    color: #888888;
}

.badge-desc {
    font-family: "VT323", monospace;
    font-size: 1.05rem;
    color: #888888;
    line-height: 1.2;
}

/* ============================================================
   BESTIARY
   ============================================================ */
.beast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

.beast-card {
    border: 2px solid #ffd700;
    background: #1a1a2e;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 120ms steps(2, end);
}

.beast-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 0 #ff3333;
}

.beast-portrait {
    width: 100%;
    height: 96px;
    background: #0a0a0a;
    border: 2px solid #888888;
    position: relative;
    image-rendering: pixelated;
    overflow: hidden;
}

.beast-portrait::before {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.portrait-slime::before {
    box-shadow:
         8px  0 0 #33ff33, 12px  0 0 #33ff33, 16px  0 0 #33ff33,
         4px  4px 0 #33ff33,  8px  4px 0 #66ff66, 12px  4px 0 #66ff66, 16px  4px 0 #33ff33, 20px  4px 0 #33ff33,
         0    8px 0 #33ff33,  4px  8px 0 #33ff33,  8px  8px 0 #0a0a0a, 12px  8px 0 #33ff33, 16px  8px 0 #0a0a0a, 20px  8px 0 #33ff33, 24px  8px 0 #33ff33,
         0   12px 0 #33ff33,  4px 12px 0 #33ff33,  8px 12px 0 #33ff33, 12px 12px 0 #33ff33, 16px 12px 0 #33ff33, 20px 12px 0 #33ff33, 24px 12px 0 #33ff33,
         0   16px 0 #1a8a1a,  4px 16px 0 #1a8a1a,  8px 16px 0 #1a8a1a, 12px 16px 0 #1a8a1a, 16px 16px 0 #1a8a1a, 20px 16px 0 #1a8a1a, 24px 16px 0 #1a8a1a;
    margin-left: -12px;
    margin-top: -8px;
}

.portrait-bat::before {
    box-shadow:
         0    4px 0 #888888, 24px  4px 0 #888888,
         0    8px 0 #888888,  4px  8px 0 #888888,  8px  8px 0 #888888, 16px  8px 0 #888888, 20px  8px 0 #888888, 24px  8px 0 #888888,
         4px 12px 0 #ff3333,  8px 12px 0 #ffffff, 12px 12px 0 #888888, 16px 12px 0 #ffffff, 20px 12px 0 #ff3333,
         8px 16px 0 #888888, 12px 16px 0 #888888, 16px 16px 0 #888888,
        12px 20px 0 #888888;
    margin-left: -12px;
    margin-top: -8px;
}

.portrait-skull::before {
    box-shadow:
         8px  0 0 #ffffff, 12px  0 0 #ffffff, 16px  0 0 #ffffff,
         4px  4px 0 #ffffff,  8px  4px 0 #ffffff, 12px  4px 0 #ffffff, 16px  4px 0 #ffffff, 20px  4px 0 #ffffff,
         4px  8px 0 #ffffff,  8px  8px 0 #0a0a0a, 12px  8px 0 #ffffff, 16px  8px 0 #0a0a0a, 20px  8px 0 #ffffff,
         4px 12px 0 #ffffff,  8px 12px 0 #ffffff, 12px 12px 0 #ffffff, 16px 12px 0 #ffffff, 20px 12px 0 #ffffff,
         8px 16px 0 #ffffff, 12px 16px 0 #ffffff, 16px 16px 0 #ffffff,
         8px 20px 0 #888888, 16px 20px 0 #888888;
    margin-left: -12px;
    margin-top: -8px;
}

.portrait-dragon::before {
    box-shadow:
        16px  0 0 #ff3333, 20px  0 0 #ff3333,
         4px  4px 0 #ff3333,  8px  4px 0 #ff3333, 12px  4px 0 #ff3333, 16px  4px 0 #ff6666, 20px  4px 0 #ff3333,
         0    8px 0 #ff3333,  4px  8px 0 #ff6666,  8px  8px 0 #0a0a0a, 12px  8px 0 #ff3333, 16px  8px 0 #ff3333, 20px  8px 0 #ff3333,
         0   12px 0 #ff3333,  4px 12px 0 #ff3333,  8px 12px 0 #ff3333, 12px 12px 0 #ffd700, 16px 12px 0 #ff3333, 20px 12px 0 #ff3333,
         4px 16px 0 #ff3333,  8px 16px 0 #ffd700, 12px 16px 0 #ffd700, 16px 16px 0 #ff3333,
         4px 20px 0 #ff3333, 12px 20px 0 #ff3333, 20px 20px 0 #ff3333;
    margin-left: -12px;
    margin-top: -8px;
}

.beast-name {
    font-family: "Press Start 2P", monospace;
    font-size: 0.85rem;
    color: #ffd700;
    text-shadow: 2px 2px 0 #0a0a0a;
}

.stat-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0;
    padding: 0;
}

.stat-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Silkscreen", monospace;
    font-size: 0.7rem;
    color: #888888;
    letter-spacing: 1px;
}

.stat-list span {
    width: 32px;
    color: #ffd700;
}

.stat-bar {
    flex: 1;
    height: 8px;
    background: #0a0a0a;
    border: 1px solid #888888;
    position: relative;
    display: block;
}

.stat-bar i {
    display: block;
    height: 100%;
    background: #ff3333;
    transition: width 600ms steps(20, end);
}

.beast-card:nth-child(2) .stat-bar i { background: #3333ff; }
.beast-card:nth-child(3) .stat-bar i { background: #888888; }
.beast-card:nth-child(4) .stat-bar i { background: #ffd700; }

.beast-blurb {
    font-family: "VT323", monospace;
    font-size: 1.1rem;
    color: #888888;
    line-height: 1.25;
}

/* ============================================================
   LORE LOG
   ============================================================ */
.lore-stream {
    background: #0a0a0a;
    border: 2px solid #33ff33;
    padding: 18px 22px;
    font-family: "VT323", monospace;
    font-size: 1.4rem;
    line-height: 1.4;
    color: #33ff33;
    max-height: 360px;
    overflow-y: auto;
    box-shadow: inset 0 0 24px rgba(51, 255, 51, 0.18);
}

.lore-stream::-webkit-scrollbar {
    width: 12px;
}
.lore-stream::-webkit-scrollbar-track {
    background: #1a1a2e;
}
.lore-stream::-webkit-scrollbar-thumb {
    background: #33ff33;
    border: 2px solid #0a0a0a;
}

.lore-line {
    margin-bottom: 8px;
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 280ms steps(4, end), transform 280ms steps(4, end);
}

.lore-line.visible {
    opacity: 1;
    transform: translateX(0);
}

.lore-tag {
    color: #ffd700;
    margin-right: 8px;
    font-family: "Silkscreen", monospace;
    font-size: 0.85rem;
}

/* ============================================================
   SAVE FILES
   ============================================================ */
.save-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}

.save-slot {
    border: 3px solid #888888;
    background: #1a1a2e;
    padding: 14px 16px;
    cursor: pointer;
    transition: transform 120ms steps(2, end), border-color 120ms steps(2, end);
    position: relative;
}

.save-slot:hover {
    transform: translate(-2px, -2px);
    border-color: #ffd700;
}

.save-slot.active {
    border-color: #33ff33;
    background: rgba(51, 255, 51, 0.06);
    box-shadow: 4px 4px 0 0 #33ff33;
}

.save-slot[data-slot="C"] {
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(255, 51, 51, 0.06) 0 4px,
            transparent 4px 8px
        ),
        #1a1a2e;
    animation: corrupt-flicker 1.4s steps(2, end) infinite;
}

@keyframes corrupt-flicker {
    0%, 100% { filter: hue-rotate(0deg); }
    50%      { filter: hue-rotate(40deg) brightness(1.1); }
}

.save-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px dashed #888888;
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.slot-id {
    font-family: "Press Start 2P", monospace;
    font-size: 0.85rem;
    color: #ffd700;
}

.slot-state {
    font-family: "Silkscreen", monospace;
    font-size: 0.7rem;
    color: #33ff33;
    letter-spacing: 1px;
}

.save-slot:not(.active) .slot-state { color: #888888; }
.save-slot[data-slot="C"] .slot-state { color: #ff3333; }

.save-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.save-row {
    display: flex;
    justify-content: space-between;
    font-family: "VT323", monospace;
    font-size: 1.15rem;
    color: #ffd700;
    border-bottom: 1px dotted rgba(136, 136, 136, 0.3);
    padding-bottom: 4px;
}

.save-row span {
    color: #888888;
    font-family: "Silkscreen", monospace;
    font-size: 0.7rem;
    letter-spacing: 1px;
    align-self: center;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    margin-top: 24px;
}

.footer-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    background: #0a0a0a;
    border: 2px solid #ffd700;
    padding: 8px 14px;
    font-family: "Silkscreen", monospace;
    font-size: 0.75rem;
    color: #ffd700;
    letter-spacing: 1px;
}

.foot-block.right {
    margin-left: auto;
    color: #888888;
}

.footer-credits {
    margin-top: 12px;
    text-align: center;
    font-family: "VT323", monospace;
    font-size: 1.15rem;
    color: #888888;
}

/* ============================================================
   FLOATING DPAD CONTROLLER
   ============================================================ */
.dpad {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 16px;
    background: #0a0a0a;
    border: 3px solid #ffd700;
    padding: 12px;
    box-shadow: 4px 4px 0 0 #1a1a2e, 4px 4px 0 4px #ffd700;
}

.dpad-pad {
    position: relative;
    width: 90px;
    height: 90px;
}

.dp-btn {
    position: absolute;
    width: 30px;
    height: 30px;
    background: #1a1a2e;
    border: 2px solid #ffd700;
    color: #ffd700;
    font-family: "Press Start 2P", monospace;
    font-size: 0.7rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: background 80ms steps(2, end);
}

.dp-btn:hover { background: rgba(255, 215, 0, 0.25); }
.dp-btn:active,
.dp-btn.pressed { background: #ffd700; color: #0a0a0a; }

.dp-up    { top: 0; left: 30px; }
.dp-down  { bottom: 0; left: 30px; }
.dp-left  { top: 30px; left: 0; }
.dp-right { top: 30px; right: 0; }

.dp-center {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 30px;
    height: 30px;
    background: #1a1a2e;
    border: 2px solid #ffd700;
}

.dpad-ab {
    display: flex;
    gap: 10px;
    transform: rotate(-15deg);
}

.ab-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid #ffd700;
    background: #ff3333;
    color: #ffd700;
    font-family: "Press Start 2P", monospace;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 80ms steps(2, end), background 80ms steps(2, end);
    box-shadow: inset -2px -3px 0 0 rgba(0, 0, 0, 0.4);
}

.ab-btn.ab-b {
    background: #3333ff;
}

.ab-btn:hover { transform: scale(1.05); }
.ab-btn:active,
.ab-btn.pressed { transform: scale(0.92); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 880px) {
    .level-grid { grid-template-columns: repeat(4, 1fr); }
    .hud-bars { gap: 12px; }
    .bar-group { min-width: 160px; }
    .dpad-pad { width: 72px; height: 72px; }
    .dp-btn { width: 24px; height: 24px; font-size: 0.6rem; }
    .dp-up    { left: 24px; }
    .dp-down  { left: 24px; }
    .dp-left  { top: 24px; }
    .dp-right { top: 24px; }
    .dp-center { top: 24px; left: 24px; width: 24px; height: 24px; }
}

@media (max-width: 560px) {
    .level-grid { grid-template-columns: repeat(3, 1fr); }
    .game-title { font-size: clamp(1.6rem, 9vw, 3rem); }
    .panel { padding: 18px 14px; }
    .hud { padding: 6px 10px; }
    .hud-block { min-width: 90px; }
    .dpad { right: 8px; bottom: 8px; padding: 8px; gap: 8px; }
    .dpad-ab { display: none; }
    .footer-bar { font-size: 0.65rem; }
}