@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

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

body {
    background: #0a0a0a;
    overflow: hidden;
    cursor: crosshair;
    font-family: 'Press Start 2P', monospace;
    color: #e0e0e0;
}

#game {
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    position: relative;
}

/* CRT scanline effect during gameplay */
#game::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.06) 2px,
        rgba(0,0,0,0.06) 4px
    );
    pointer-events: none;
    z-index: 5;
}

#ui-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 10;
}

#ui-overlay > * { pointer-events: auto; }

/* === HUD === */
#hud {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
}

#hud-left {
    position: absolute;
    top: 8px; left: 8px;
    width: 280px;
    background: rgba(8, 6, 18, 0.85);
    border: 3px solid #554422;
    border-image: none;
    padding: 6px 8px 6px 8px;
    /* Double-border pixel frame effect */
    box-shadow:
        inset 0 0 0 1px #332211,
        0 0 0 1px #221100;
    image-rendering: pixelated;
}
#hud-right { display: none; }

.stat-bar {
    position: relative;
    height: 16px;
    background: #0c0a14;
    border: 2px solid #443322;
    margin-bottom: 3px;
    image-rendering: pixelated;
    box-shadow: inset 0 0 0 1px #1a1510;
}

.bar-fill {
    height: 100%;
    transition: width 0.15s steps(8);
    image-rendering: pixelated;
}

/* Flat pixel bars — no gradients, stepped highlight */
.hp-fill {
    background: #cc2222;
    box-shadow: inset 0 -2px 0 #880000, inset 0 2px 0 #ee4444;
}
.mp-fill {
    background: #2266cc;
    box-shadow: inset 0 -2px 0 #003388, inset 0 2px 0 #4488ee;
}
.xp-fill {
    background: #22aa44;
    box-shadow: inset 0 -2px 0 #006622, inset 0 2px 0 #44dd66;
}

.mp-reserved {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255, 180, 0, 0.3),
        rgba(255, 180, 0, 0.3) 2px,
        rgba(0, 0, 0, 0.4) 2px,
        rgba(0, 0, 0, 0.4) 4px
    );
    display: none;
    pointer-events: none;
    border-left: 2px solid #886600;
}

.bar-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #fff;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    white-space: nowrap;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    font-smooth: never;
    text-rendering: optimizeSpeed;
}

#potion-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 6px;
    margin-top: 4px;
}

.potion-slot {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    padding: 2px 5px;
    border: 2px solid #443322;
    background: rgba(12, 10, 20, 0.8);
    box-shadow: inset 0 0 0 1px #221100;
    text-shadow: 1px 1px 0 #000;
    cursor: pointer;
    pointer-events: auto;
    white-space: nowrap;
    image-rendering: pixelated;
}

.potion-slot .potion-count {
    font-size: 10px;
    font-weight: bold;
}

.hp-potion {
    color: #ff4444;
    border-color: #662222;
}

.hp-potion:hover { background: rgba(180, 20, 20, 0.3); border-color: #884444; }

.mana-potion {
    color: #4488ff;
    border-color: #223366;
}

.mana-potion:hover { background: rgba(20, 60, 180, 0.3); border-color: #445588; }

#floor-info {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    margin-top: 5px;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
    color: #ccaa44;
    line-height: 1.5;
}

#skill-slots {
    position: fixed;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 3px;
    pointer-events: auto;
    z-index: 15;
    background: rgba(8, 6, 18, 0.85);
    border: 3px solid #554422;
    box-shadow: inset 0 0 0 1px #332211, 0 0 0 1px #221100;
    padding: 4px;
    image-rendering: pixelated;
}

.skill-slot {
    width: 46px;
    height: 46px;
    background: #0c0a14;
    border: 2px solid #554422;
    box-shadow: inset 0 0 0 1px #1a1510;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    position: relative;
    image-rendering: pixelated;
    pointer-events: auto;
    cursor: pointer;
}

.skill-slot .cooldown-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0, 0, 0, 0.75);
    transition: height 0.1s steps(6);
}

.skill-slot .key-hint {
    position: absolute;
    bottom: -1px; right: 1px;
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: #776644;
    text-shadow: 1px 1px 0 #000;
}

#hud-bottom {
    position: fixed;
    bottom: 8px;
    left: 8px;
    pointer-events: none;
}

#combat-log {
    font-size: 8px;
    font-family: 'Press Start 2P', monospace;
    line-height: 1.2;
    max-height: 110px;
    overflow: hidden;
}

.log-entry {
    animation: logFade 4s forwards;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
}

.log-damage { color: #ee5555; }
.log-heal { color: #55dd55; }
.log-loot { color: #ddaa22; }
.log-info { color: #5599dd; }
.log-funny { color: #dd55dd; }

@keyframes logFade {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; }
}

/* === MINIMAP === */
#minimap {
    position: absolute;
    top: 8px;
    right: 8px;
    border: 3px solid #554422;
    box-shadow: inset 0 0 0 1px #332211, 0 0 0 1px #221100;
    background: rgba(8, 6, 18, 0.85);
    image-rendering: pixelated;
    padding: 2px;
}

/* === SCREENS === */
#title-screen, #char-create, #skill-manage, #death-screen, #floor-transition, #inventory-screen, #char-screen {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: rgba(5, 5, 15, 0.95);
    z-index: 100;
    overflow-y: auto;
    padding-top: 16px;
    padding-bottom: 16px;
}
/* Auto-margin on first child centers content when it fits, scrolls from top when it doesn't */
/* Excluded: char-create, skill-manage — they have too much content, just start from top */
#title-screen > :first-child,
#death-screen > :first-child,
#floor-transition > :first-child,
#inventory-screen > :first-child,
#char-screen > :first-child {
    margin-top: auto;
}
#title-screen > :last-child,
#death-screen > :last-child,
#floor-transition > :last-child,
#inventory-screen > :last-child,
#char-screen > :last-child {
    margin-bottom: auto;
}

#title-screen h1 {
    font-family: 'Press Start 2P', monospace;
    font-size: 22px;
    color: #ccaa44;
    text-shadow: 3px 3px 0 #553311, -1px -1px 0 #221100;
    margin-bottom: 4px;
    animation: titlePulse 3s ease-in-out infinite;
    letter-spacing: 3px;
}

#title-screen h2 {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: #ff6b6b;
    margin-bottom: 6px;
    animation: subtitleSlide 0.8s ease-out 0.3s both;
}

@keyframes subtitleSlide {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.subtitle {
    font-size: 13px;
    color: #888;
    margin-bottom: 10px;
    font-style: italic;
    animation: subtitleSlide 0.8s ease-out 0.6s both;
}

#title-lore {
    max-width: 520px;
    background: rgba(20, 20, 40, 0.8);
    border: 1px solid #444;
    padding: 8px 14px;
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
    animation: subtitleSlide 0.8s ease-out 0.7s both;
    position: relative;
    z-index: 1;
}

#title-lore ul {
    list-style: none;
    padding: 4px 0;
}

#title-lore li {
    padding: 2px 0;
}

#title-lore li::before {
    content: '> ';
    color: #aa8844;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
}

#title-screen {
    padding: 16px 12px;
    justify-content: safe center;
    gap: 0;
    zoom: 1.2;
}

#title-screen .pixel-btn {
    animation: subtitleSlide 0.8s ease-out 0.9s both;
}

@keyframes titlePulse {
    0%, 100% { color: #ccaa44; text-shadow: 3px 3px 0 #553311, -1px -1px 0 #221100; transform: scale(1); }
    50% { color: #ddbb55; text-shadow: 3px 3px 0 #664422, -1px -1px 0 #332200; transform: scale(1.06); }
}

/* Title screen decorative elements */
#title-screen::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

/* Scanline effect on title */
#title-screen::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.08) 2px,
        rgba(0,0,0,0.08) 4px
    );
    pointer-events: none;
    animation: scanScroll 8s linear infinite;
}

@keyframes scanScroll {
    from { background-position: 0 0; }
    to { background-position: 0 100px; }
}

/* === PATCH ANNOUNCEMENT === */
#patch-announce {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0.9;
    transition: opacity 0.2s steps(4);
    cursor: default;
    pointer-events: none;
}
#patch-announce:hover { opacity: 1; }
#patch-warrior-canvas {
    image-rendering: pixelated;
    width: 140px;
    height: 180px;
}
#patch-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-family: 'Press Start 2P', monospace;
}
.patch-title {
    font-size: 8px;
    color: #ff6644;
    text-shadow: 1px 1px 0 #331100;
    letter-spacing: 1px;
}
.patch-class {
    font-size: 10px;
    color: #ffaa44;
    text-shadow: 1px 1px 0 #442200;
    animation: titlePulse 3s ease-in-out infinite;
}
.patch-desc {
    font-size: 6px;
    color: #888877;
    line-height: 1.3;
}
.patch-quote {
    font-size: 5px;
    color: #665544;
    font-style: italic;
    line-height: 1.2;
}

/* === ALPHA STAMP === */
#alpha-stamp {
    position: absolute;
    top: 18px;
    right: 24px;
    transform: rotate(12deg);
    z-index: 10;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s steps(3);
}
#alpha-stamp:hover {
    opacity: 1;
}
.stamp-border {
    border: 3px solid #883322;
    padding: 2px;
    background: transparent;
}
.stamp-inner {
    border: 2px dashed #883322;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.stamp-line1 {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: #cc4433;
    letter-spacing: 2px;
    text-shadow: 1px 1px 0 #000;
}
.stamp-line2 {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: #cc4433;
    margin-top: 2px;
}
.stamp-line3 {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: #aa5544;
}
.stamp-email {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: #ccaa66;
    text-shadow: 1px 1px 0 #000;
}

#alpha-stamp-tooltip {
    position: absolute;
    top: 120px;
    right: 24px;
    z-index: 20;
    background: #0c0a14;
    border: 3px solid #554422;
    box-shadow: inset 0 0 0 1px #332211;
    padding: 10px 14px;
    max-width: 280px;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #bbaa88;
    line-height: 1.4;
    pointer-events: none;
}
#alpha-stamp-tooltip p {
    margin: 3px 0;
}

/* === COFFEE LINK === */
#coffee-link {
    position: absolute;
    bottom: 16px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    opacity: 0.75;
    transition: opacity 0.2s steps(4);
    z-index: 10;
    cursor: pointer;
    padding: 4px 8px;
    border: 2px solid transparent;
    border-radius: 0;
}
#coffee-link:hover {
    opacity: 1;
    border-color: #554422;
    background: rgba(26,21,16,0.6);
}
#coffee-icon {
    image-rendering: pixelated;
    width: 48px;
    height: 48px;
}
.coffee-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: #aa7744;
    text-shadow: 1px 1px 0 #000;
}
#coffee-tooltip {
    position: absolute;
    bottom: 36px;
    left: 16px;
    z-index: 20;
    background: #0c0a14;
    border: 3px solid #554422;
    box-shadow: inset 0 0 0 1px #332211;
    padding: 10px 14px;
    max-width: 280px;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #bbaa88;
    line-height: 1.4;
    pointer-events: none;
}
#coffee-tooltip p {
    margin: 3px 0;
}

/* === PIXEL BUTTON === */
.pixel-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    color: #ccaa66;
    background: #1a1510;
    border: 3px solid #554422;
    box-shadow: inset 0 0 0 1px #332211;
    padding: 8px 18px;
    cursor: pointer;
    text-transform: uppercase;
    margin: 4px;
    text-shadow: 1px 1px 0 #000;
    image-rendering: pixelated;
}

.pixel-btn:hover {
    background: #2a2218;
    border-color: #887744;
    color: #eedd88;
}

.pixel-btn:active {
    background: #110e08;
    border-color: #443322;
}

.pixel-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    color: #665533;
}

/* === CHARACTER CREATION === */
#char-create h2 {
    font-family: 'Press Start 2P', monospace;
    font-size: 16px;
    color: #ccaa44;
    text-shadow: 2px 2px 0 #332200;
    margin-bottom: 12px;
}

#char-panels {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    max-height: 70%;
}

.char-panel {
    background: rgba(8, 6, 18, 0.92);
    border: 3px solid #554422;
    box-shadow: inset 0 0 0 1px #332211;
    padding: 10px;
    min-width: 220px;
    max-height: 100%;
    overflow-y: auto;
}

.char-panel h3 {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: #aa8844;
    margin-bottom: 10px;
    text-align: center;
    text-shadow: 1px 1px 0 #000;
}

.selection-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.selection-item {
    padding: 6px 8px;
    background: #0c0a14;
    border: 2px solid #443322;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.selection-item:hover {
    border-color: #887744;
    background: #1a1510;
}

.selection-item.selected {
    border-color: #aa8844;
    background: #221a10;
    box-shadow: inset 0 0 0 1px #554422;
}

.selection-item .item-icon { font-size: 22px; }
.selection-item .item-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
}
.selection-item .item-desc {
    font-size: 14px;
    color: #888;
}

#stat-preview {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.6;
}

.stat-line { display: flex; justify-content: space-between; }
.stat-name { color: #aaa; }
.stat-val { color: #ccaa44; font-family: 'Press Start 2P', monospace; font-size: 10px; }

#skill-preview {
    margin-top: 10px;
    font-size: 15px;
}

.skill-tag {
    display: inline-block;
    background: #0c0a14;
    border: 2px solid #443322;
    padding: 3px 8px;
    margin: 2px;
    font-size: 14px;
}

#char-preview {
    display: block;
    margin: 0 auto;
    image-rendering: pixelated;
    border: 2px solid #333;
}

/* === DEATH SCREEN === */
#death-screen h2 {
    font-family: 'Press Start 2P', monospace;
    font-size: 24px;
    color: #cc3333;
    text-shadow: 3px 3px 0 #440000, -1px -1px 0 #220000;
    margin-bottom: 12px;
    animation: deathPulse 0.8s steps(2) infinite;
}

@keyframes deathPulse {
    0%, 100% { color: #cc3333; }
    50% { color: #882222; }
}

#death-message {
    font-size: 20px;
    color: #ff9999;
    margin-bottom: 16px;
    max-width: 500px;
    text-align: center;
}

#death-stats {
    font-size: 16px;
    margin-bottom: 16px;
    color: #aaa;
}

#kept-skills, #new-skill-choices {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.skill-card {
    background: #0c0a14;
    border: 2px solid #443322;
    padding: 10px;
    width: 150px;
    text-align: center;
    cursor: pointer;
}

.skill-card:hover {
    border-color: #887744;
    background: #1a1510;
}

.skill-card.selected {
    border-color: #448833;
    box-shadow: inset 0 0 0 1px #336622;
}

.skill-card .skill-icon { font-size: 28px; margin-bottom: 4px; }
.skill-card .skill-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #aa8844;
    margin-bottom: 4px;
}
.skill-card .skill-desc { font-size: 13px; color: #999; }

/* === FLOOR TRANSITION — modal layout === */
#floor-transition {
    overflow: hidden;
    padding: 0;
}
#floor-transition > :first-child { margin-top: 0 !important; }
#floor-transition > :last-child { margin-bottom: 0 !important; }

.ft-modal {
    display: flex;
    flex-direction: column;
    width: 95%;
    max-width: 920px;
    height: 90%;
    overflow: hidden;
}
.ft-header {
    flex-shrink: 0;
    text-align: center;
    padding: 8px 0;
}
.ft-body {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}
.ft-footer {
    flex-shrink: 0;
    padding: 10px 0 8px;
    text-align: center;
}

#floor-transition h2 {
    font-family: 'Press Start 2P', monospace;
    font-size: 16px;
    color: #55aa66;
    margin-bottom: 6px;
    text-shadow: 2px 2px 0 #113311, -1px -1px 0 #001100;
}

#transition-panels {
    display: flex;
    gap: 16px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#transition-panels > div {
    flex: 1;
    background: rgba(8, 6, 18, 0.92);
    border: 3px solid #554422;
    box-shadow: inset 0 0 0 1px #332211;
    padding: 10px;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

#transition-panels > div > h3 {
    position: sticky;
    top: -10px;
    z-index: 2;
    background: rgba(8, 6, 18, 0.98);
    padding: 10px 0 6px;
    margin: 0 0 8px;
    border-bottom: 2px solid #443322;
}

#transition-panels h3 {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: #aa8844;
    margin-bottom: 8px;
    text-shadow: 1px 1px 0 #000;
}

#merchant-quote {
    font-size: 16px;
    color: #aaa;
    font-style: italic;
    margin-bottom: 10px;
}

.merchant-item, .chest-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 7px;
    background: #0c0a14;
    border: 2px solid #332211;
    margin-bottom: 3px;
    font-size: 15px;
    cursor: pointer;
}

.merchant-item:hover, .chest-item:hover {
    border-color: #887744;
    background: #1a1510;
}

.item-price { color: #ccaa44; font-family: 'Press Start 2P', monospace; font-size: 9px; }

/* === INVENTORY === */
#inventory-screen {
    background: rgba(5, 5, 15, 0.92);
}

#inventory-screen h2 {
    font-family: 'Press Start 2P', monospace;
    font-size: 16px;
    color: #ccaa44;
    text-shadow: 2px 2px 0 #332200;
    margin-bottom: 16px;
}

#equipped-slots {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.equip-slot {
    width: 120px;
    height: 80px;
    background: #0c0a14;
    border: 2px solid #443322;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
}

.equip-slot.filled {
    border-color: #887744;
    box-shadow: inset 0 0 0 1px #554422;
}

#bag-contents {
    display: grid;
    grid-template-columns: repeat(6, 60px);
    gap: 3px;
    margin-bottom: 16px;
}

.bag-slot {
    width: 60px;
    height: 60px;
    background: #0c0a14;
    border: 2px solid #332211;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    position: relative;
}

.bag-slot:hover { border-color: #887744; }
.bag-slot .item-count {
    position: absolute;
    bottom: 1px; right: 3px;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #ccaa44;
    text-shadow: 1px 1px 0 #000;
}

/* === TOOLTIP === */
#tooltip {
    position: fixed;
    background: rgba(8, 6, 18, 0.95);
    border: 3px solid #554422;
    box-shadow: inset 0 0 0 1px #332211, 0 2px 0 #221100;
    padding: 10px 12px;
    max-width: 380px;
    min-width: 200px;
    font-size: 8px;
    line-height: 1.5;
    z-index: 9999;
    pointer-events: none;
    font-family: 'Press Start 2P', monospace;
}

#tooltip .tt-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    color: #ccaa44;
    margin-bottom: 4px;
    text-shadow: 1px 1px 0 #000;
}

#tooltip .tt-type { color: #776644; font-size: 8px; }
#tooltip .tt-desc { color: #bbb; margin-top: 4px; }
#tooltip .tt-stats { color: #44cc66; margin-top: 4px; }
#tooltip .tt-restrict { color: #cc5555; margin-top: 4px; font-size: 12px; }
#tooltip .tt-flavor { color: #aa66aa; font-style: italic; margin-top: 6px; font-size: 13px; }
#tooltip .tt-xp { color: #ccaa44; margin-top: 4px; font-size: 11px; }

/* === CHARACTER SCREEN === */
#char-screen {
    max-width: 680px;
    overflow-y: auto;
    background: rgba(8, 6, 18, 0.96);
    border: 3px solid #554422;
    box-shadow: inset 0 0 0 1px #332211, 0 0 0 1px #221100;
    padding: 14px;
    margin: auto;
}

#char-screen-header {
    display: flex;
    gap: 3px;
    margin-bottom: 12px;
}

.char-tab-btn {
    flex: 1;
    text-align: center;
    padding: 6px;
    background: #0c0a14;
    border: 2px solid #332211;
    cursor: pointer;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #776644;
}

.char-tab-btn:hover { border-color: #887744; color: #ccaa66; }
.char-tab-btn.active { border-color: #aa8844; background: #1a1510; color: #ccaa44; }

#char-equipped {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

#char-equipped .equip-slot {
    flex: 1;
    min-width: 140px;
    height: auto;
    padding: 8px;
    font-size: 14px;
    gap: 4px;
}

#char-bag {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

#char-bag .bag-slot {
    width: 100%;
    aspect-ratio: 1;
    height: auto;
}

#active-skill-slots {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.skill-manage-slot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #0c0a14;
    border: 2px solid #443322;
    cursor: grab;
    transition: all 0.1s;
    font-size: 15px;
    position: relative;
}

.skill-manage-slot:hover {
    border-color: #ff6b6b;
    background: #2a1a1a;
}

.skill-manage-slot.drag-over {
    border-color: #ffd700;
    background: #2a2a10;
}

.skill-manage-slot.dragging {
    opacity: 0.4;
    border-color: #666;
}

.skill-manage-slot .skill-upgrade-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    padding: 2px 5px;
    background: #1a1a00;
    border: 1px solid #886600;
    color: #ffd700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.skill-manage-slot .skill-upgrade-btn:hover {
    background: #2a2a00;
    border-color: #ffaa00;
}

.skill-manage-slot .skill-remove-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    padding: 2px 4px;
    background: #1a0a0a;
    border: 1px solid #662222;
    color: #ff4444;
    cursor: pointer;
    flex-shrink: 0;
}

.skill-manage-slot .skill-remove-btn:hover {
    background: #2a1010;
    border-color: #ff4444;
}

.skill-manage-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    image-rendering: pixelated;
}

.skill-manage-name {
    flex: 1;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #e0e0e0;
}

.skill-manage-key {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #888;
}

#skill-pool {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.skill-pool-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    background: #0a0a1e;
    border: 1px solid #333;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.1s;
}

.skill-pool-item:hover {
    border-color: #44ff88;
    background: #1a2a1a;
}

.skill-pool-item .skill-upgrade-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    padding: 2px 5px;
    background: #1a1a00;
    border: 1px solid #886600;
    color: #ffd700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

.empty-slot {
    border-style: dashed !important;
    border-color: #222 !important;
}

/* === HUD BUTTONS === */
#hud-buttons {
    position: fixed;
    top: 180px;
    right: 8px;
    display: flex;
    gap: 3px;
    pointer-events: auto;
    z-index: 15;
}

.mini-btn {
    font-size: 7px !important;
    padding: 5px 8px !important;
    border: 2px solid #554422 !important;
    background: rgba(8, 6, 18, 0.85) !important;
    color: #ccaa66 !important;
    box-shadow: inset 0 0 0 1px #332211;
    text-shadow: 1px 1px 0 #000;
}
.mini-btn:hover {
    background: rgba(40, 30, 15, 0.9) !important;
    border-color: #887744 !important;
    color: #ffdd88 !important;
    box-shadow: inset 0 0 0 1px #554422;
    transform: none;
}

/* Descend button glow */
#btn-descend {
    animation: descendGlow 2s ease-in-out infinite;
}

@keyframes descendGlow {
    0%, 100% { box-shadow: 0 0 5px rgba(68,255,136,0.3); }
    50% { box-shadow: 0 0 20px rgba(68,255,136,0.6), 0 0 40px rgba(68,255,136,0.2); }
}

/* Character screen animation */
#char-screen {
    animation: fadeSlideIn 0.2s ease-out;
}

/* Death screen animation */
#death-screen {
    animation: fadeSlideIn 0.4s ease-out;
}

/* === UTILITIES === */
.hidden { display: none !important; }

.gold-text { color: #ffd700; }
.red-text { color: #ff4444; }
.green-text { color: #44ff88; }
.blue-text { color: #4488ff; }

/* Skill slot use animation — brief scale pulse */
@keyframes skillUsePulse {
    0% { transform: scale(1); border-color: #ffd700; box-shadow: 0 0 12px rgba(255,215,0,0.6); }
    40% { transform: scale(1.2); border-color: #ffffff; box-shadow: 0 0 20px rgba(255,255,255,0.5); }
    100% { transform: scale(1); border-color: #444; box-shadow: none; }
}

.skill-slot.skill-used {
    animation: skillUsePulse 0.35s ease-out;
}

/* Skill slot glow when usable */
.skill-slot:not(.empty-slot):hover {
    border-color: #887744;
}

/* Stat bar improvements */
.stat-bar {
    overflow: hidden;
}

.hp-fill.low-hp {
    animation: hpPulse 0.6s steps(2) infinite;
    background: #cc2222;
}

@keyframes hpPulse {
    0%, 100% { background: #cc2222; box-shadow: inset 0 -2px 0 #880000, inset 0 2px 0 #ee4444; }
    50% { background: #ff3333; box-shadow: inset 0 -2px 0 #aa0000, inset 0 2px 0 #ff6666; }
}

/* Combat log text — no glow, pixel outline */
.log-damage { color: #ee5555; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.log-heal { color: #55dd55; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.log-loot { color: #ccaa33; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.log-funny { color: #cc55cc; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }

/* Pixel art scrollbar styling */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0c0a14; border-left: 1px solid #332211; border-right: 1px solid #332211; }
::-webkit-scrollbar-thumb { background: #665533; border: 1px solid #332211; border-radius: 0; box-shadow: inset 1px 1px 0 #887744, inset -1px -1px 0 #443322; }
::-webkit-scrollbar-thumb:hover { background: #776644; box-shadow: inset 1px 1px 0 #998855, inset -1px -1px 0 #554433; }
::-webkit-scrollbar-corner { background: #0c0a14; }
* { scrollbar-width: thin; scrollbar-color: #665533 #0c0a14; }

/* Gold display pulse on gain */
@keyframes goldPulse {
    0% { color: #ccaa44; }
    50% { color: #eedd66; }
    100% { color: #ccaa44; }
}

#gold-display.gold-gained {
    animation: goldPulse 0.3s steps(2);
}

/* Floor transition title */
#floor-transition h2 {
    letter-spacing: 2px;
}

/* Merchant name highlight */
#merchant-name {
    color: #ff88ff;
}

/* Boss floor indicator */
#floor-info .boss-floor {
    color: #ff4444;
    animation: deathPulse 1.5s ease-in-out infinite;
}

/* Improved combat log with text stroke for readability */
#combat-log {
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

/* Transition panels shine effect */
#transition-panels > div {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

#transition-panels > div::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,215,0,0.03), transparent);
    animation: panelShine 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes panelShine {
    0%, 100% { left: -100%; }
    50% { left: 200%; }
}

/* Responsive */
@media (max-width: 900px) {
    #char-panels, #transition-panels { flex-direction: column; }
    .char-panel { min-width: unset; }
}

/* Item icon canvas styling */
.item-icon-canvas {
    image-rendering: pixelated;
    flex-shrink: 0;
    border: 1px solid #333;
    background: #0a0a1e;
}

/* Secret Merchant — fullscreen overlay with two-column modal */
#secret-merchant {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 5, 15, 0.7);
    z-index: 100;
    overflow: hidden;
}
.sm-modal {
    width: 95%;
    max-width: 920px;
    height: 85%;
    background: rgba(8, 6, 18, 0.96);
    border: 3px solid #443366;
    box-shadow: inset 0 0 0 1px #332255, 0 0 40px rgba(68, 51, 102, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.sm-panels {
    display: flex;
    gap: 0;
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}
.sm-left {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    padding: 16px;
    border-right: 2px solid #332255;
    overflow-y: auto;
}
.sm-right {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 12px 16px;
}
#secret-merchant h2 {
    color: #8866aa;
    text-align: center;
    text-shadow: 2px 2px 0 #220033;
    margin: 0 0 8px;
}

/* Pause Menu */
#pause-menu {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(8, 6, 18, 0.96);
    border: 3px solid #554422;
    box-shadow: inset 0 0 0 1px #332211;
    padding: 20px 28px;
    text-align: center;
    z-index: 200;
    transition: opacity 0.2s;
}
#pause-menu.peek-mode {
    opacity: 0.15;
    pointer-events: none;
}
#pause-menu h2 {
    color: #ccaa44;
    text-shadow: 2px 2px 0 #332200;
    margin: 0 0 8px;
}
#pause-menu .pixel-btn {
    display: block;
    width: 100%;
}

/* === Settings Menu === */
#settings-menu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(8, 6, 18, 0.96);
    border: 3px solid #554422;
    box-shadow: inset 0 0 0 1px #332211;
    padding: 12px 16px;
    width: 420px;
    max-width: 95%;
    max-height: 85%;
    overflow-y: auto;
    z-index: 1000;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    transition: opacity 0.2s, transform 0.2s;
}
#settings-menu.peek-mode {
    opacity: 0.15;
    pointer-events: none;
}
    color: #bbb;
}
#settings-menu h2 {
    color: #aa8844;
    text-shadow: 1px 1px 0 #000;
    margin: 0 0 6px;
    font-size: 12px;
}
#settings-menu h3 {
    margin: 4px 0;
    font-size: 9px;
}
#keybind-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 12px;
}

/* === Mobility Choice === */
.mobility-choice {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    margin: 3px 0;
    border: 2px solid #332211;
    background: #0c0a14;
    cursor: pointer;
    font-size: 8px;
}
.mobility-choice:hover {
    border-color: #887744;
}

/* === Mobility Slot === */
.mobility-slot {
    border-color: #6644aa !important;
}

/* === Export/Import buttons === */
#btn-export, #btn-import {
    padding: 4px 8px;
}

/* === Sound Menu === */
#sound-menu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(8, 6, 18, 0.96);
    border: 3px solid #335566;
    box-shadow: inset 0 0 0 1px #224455;
    padding: 12px 16px;
    width: 380px;
    max-width: 95%;
    max-height: 85%;
    overflow-y: auto;
    z-index: 1001;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #bbb;
}
#sound-menu h2 {
    color: #6699aa;
    margin: 0 0 8px;
    font-size: 12px;
    text-align: center;
}
#sound-menu h3 {
    font-size: 9px;
}
.sound-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
}
.sound-row label {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 130px;
    cursor: pointer;
}
.snd-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 8px;
    background: #1a1510;
    border: 2px solid #554422;
    border-radius: 0;
    cursor: pointer;
    outline: none;
}
.snd-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 16px;
    background: #aa8844;
    border: 2px solid #ccaa66;
    border-radius: 0;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px #665533;
}
.snd-slider::-moz-range-thumb {
    width: 12px;
    height: 16px;
    background: #aa8844;
    border: 2px solid #ccaa66;
    border-radius: 0;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px #665533;
}
.snd-slider::-webkit-slider-thumb:hover {
    background: #ccaa66;
    border-color: #ddbb77;
}
.snd-slider::-moz-range-thumb:hover {
    background: #ccaa66;
    border-color: #ddbb77;
}
#genre-list {
    max-height: 40%;
    overflow-y: auto;
    border: 1px solid #222;
    padding: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
}
.genre-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    cursor: pointer;
    font-size: 7px;
    border: 1px solid transparent;
    transition: border-color 0.15s;
}
.genre-item:hover {
    border-color: #665544;
}
.genre-item.selected {
    border-color: #ccaa66;
    background: #1a1510;
}
.genre-item input[type="checkbox"] {
    accent-color: #ccaa66;
}

/* === LOOT SCREEN (Diablo-style transfer) === */
#loot-screen {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(5, 5, 15, 0.95);
    z-index: 100;
}
#loot-screen h2 {
    font-family: 'Press Start 2P', monospace;
    font-size: 16px;
    color: #ccaa66;
    margin-bottom: 12px;
    text-shadow: 1px 1px 0 #000;
}
#loot-panels {
    display: flex;
    gap: 16px;
    width: 90%;
    max-width: 700px;
    max-height: 60%;
}
#loot-source, #loot-player {
    flex: 1;
    background: #0c0a14;
    border: 3px solid #554422;
    box-shadow: inset 0 0 0 1px #332211;
    padding: 10px;
    overflow-y: auto;
    min-height: 200px;
    max-height: 60%;
}
#loot-source {
    border-color: #664422;
}
#loot-player {
    border-color: #443355;
}
#loot-source h3, #loot-player h3 {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    margin: 0 0 8px;
    text-align: center;
}
#loot-source h3 { color: #cc8844; }
#loot-player h3 { color: #8888cc; }
.loot-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #1a1510;
    border: 1px solid #443322;
    margin-bottom: 4px;
    font-size: 11px;
    cursor: pointer;
    font-family: 'Press Start 2P', monospace;
    transition: border-color 0.1s steps(3);
}
.loot-item:hover {
    border-color: #ccaa66;
    background: #221a10;
}
.loot-item img {
    image-rendering: pixelated;
    width: 24px;
    height: 24px;
}
.loot-item .loot-stats {
    color: #88ff88;
    font-size: 8px;
    margin-left: auto;
}
#loot-player-equipped {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
#loot-player-equipped .equip-slot {
    flex: 1;
    min-width: 100px;
    height: auto;
    padding: 6px;
    font-size: 10px;
    gap: 4px;
}
#loot-player-bag {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}
#loot-player-bag .bag-slot {
    width: 100%;
    aspect-ratio: 1;
    height: auto;
}
.loot-empty {
    color: #665544;
    font-size: 9px;
    text-align: center;
    padding: 12px;
    font-family: 'Press Start 2P', monospace;
}
.loot-section-label {
    color: #887755;
    font-size: 8px;
    margin: 6px 0 4px;
    font-family: 'Press Start 2P', monospace;
}

/* === SKILL MANAGEMENT SCREEN === */
#skill-manage h2 {
    font-family: 'Press Start 2P', monospace;
    font-size: 16px;
    color: #ffd700;
    margin-bottom: 8px;
}
#sm-pool-info {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: #88ccff;
    margin-bottom: 12px;
}
#sm-pool { color: #ffd700; font-size: 13px; }
#sm-panels {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    max-height: 65%;
    width: 90%;
    max-width: 1000px;
}
#sm-active-panel { flex: 2; }
#sm-mobility-panel { flex: 1; min-width: 180px; }
#sm-browse-panel { flex: 2; }
.sm-skill-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    margin-bottom: 3px;
    background: rgba(30,30,60,0.8);
    border: 1px solid #333;
    border-radius: 3px;
    cursor: pointer;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: #ccc;
    transition: border-color 0.15s;
}
.sm-skill-row:hover { border-color: #666; }
.sm-skill-row.selected { border-color: #ffd700; background: rgba(50,50,80,0.9); }
.sm-skill-row.active { border-color: #44ff44; }
.sm-skill-row.incompatible { opacity: 0.4; cursor: default; }
.sm-skill-icon { font-size: 14px; flex-shrink: 0; }
.sm-skill-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-skill-level { color: #ffd700; flex-shrink: 0; min-width: 40px; text-align: right; }
.sm-skill-desc { font-size: 6px; color: #888; margin-top: 2px; }
.sm-level-controls {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
.sm-level-controls button {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    background: #2a2a4e;
    color: #fff;
    border: 1px solid #555;
    padding: 2px 5px;
    cursor: pointer;
    border-radius: 2px;
}
.sm-level-controls button:hover { background: #3a3a6e; }
.sm-level-controls button:disabled { opacity: 0.3; cursor: default; }
.sm-level-num { color: #ffd700; min-width: 20px; text-align: center; }
.sm-browse-row {
    padding: 3px 6px;
    margin-bottom: 2px;
    background: rgba(20,20,40,0.6);
    border: 1px solid #222;
    border-radius: 2px;
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: #999;
}
.sm-browse-row.compatible { color: #ccc; border-color: #444; }
.sm-browse-row .sm-skill-icon { font-size: 12px; }
.sm-browse-details {
    font-size: 5px;
    color: #666;
    margin-top: 1px;
}
.sm-browse-row.compatible .sm-browse-details { color: #888; }
@media (max-width: 900px) {
    #sm-panels { flex-direction: column; }
}

/* === ENCYCLOPEDIA === */
#encyclopedia {
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 15, 0.97);
    z-index: 200;
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    font-family: 'Press Start 2P', monospace;
    box-sizing: border-box;
}
#encyclopedia.hidden { display: none; }

#ency-header {
    flex-shrink: 0;
    text-align: center;
    margin-bottom: 8px;
}
#ency-header h2 {
    font-size: 14px;
    color: #ccaa66;
    margin-bottom: 8px;
    text-shadow: 2px 2px 0 #000;
}
#ency-tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}
.ency-tab {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    padding: 6px 14px;
    background: #1a1510;
    color: #665544;
    border: 2px solid #443322;
    cursor: pointer;
    transition: border-color 0.1s steps(3);
    border-radius: 0;
}
.ency-tab:hover { color: #bbaa88; border-color: #665544; background: #221a10; }
.ency-tab.active {
    color: #ccaa66;
    border-color: #ccaa66;
    border-bottom-color: #0c0a14;
    background: #0c0a14;
}

#ency-body {
    flex: 1 1 0;
    display: flex;
    gap: 0;
    min-height: 0;
    overflow: hidden;
    border: 3px solid #554422;
    box-shadow: inset 0 0 0 1px #332211;
    border-top: none;
    background: #0c0a14;
    border-radius: 0;
}

.ency-panel {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    scrollbar-width: thin;
    scrollbar-color: #554422 #0c0a14;
}
.ency-panel::-webkit-scrollbar { width: 6px; }
.ency-panel::-webkit-scrollbar-track { background: #0c0a14; }
.ency-panel::-webkit-scrollbar-thumb { background: #554422; border-radius: 0; }
.ency-panel::-webkit-scrollbar-thumb:hover { background: #776633; }

#ency-list {
    width: 220px;
    flex-shrink: 0;
    border-right: 2px solid #443322;
}
#ency-detail {
    flex: 1 1 0;
    min-width: 0;
}

.ency-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    margin-bottom: 2px;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: border-color 0.1s steps(3);
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: #bbaa88;
}
.ency-item:hover { border-color: #665544; background: #1a1510; }
.ency-item.selected { border-color: #ccaa66; background: #221a10; color: #ccaa66; }
.ency-item canvas { flex-shrink: 0; }

.ency-group-header {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: #776633;
    padding: 8px 4px 3px;
    border-bottom: 1px solid #332211;
    margin-bottom: 2px;
    text-transform: uppercase;
}
.ency-group-header.ency-collapsible {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    user-select: none;
}
.ency-group-header.ency-collapsible:hover { color: #ccaa44; }
.ency-collapse-arrow {
    margin-left: auto;
    font-size: 8px;
    color: #554433;
}

/* Detail panel sections */
.ency-detail-name {
    font-size: 12px;
    color: #ccaa66;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #443322;
}
.ency-detail-desc {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: #bbaa88;
    margin-bottom: 8px;
    line-height: 1.3;
}
.ency-detail-flavor {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #887755;
    font-style: italic;
    margin: 8px 0;
    padding: 6px 8px;
    border-left: 2px solid #554422;
    background: #111008;
}
.ency-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin: 8px 0;
}
.ency-stat {
    font-size: 7px;
    padding: 4px 6px;
    background: #1a1510;
    border: 1px solid #443322;
    border-radius: 0;
}
.ency-stat .stat-label { color: #887755; }
.ency-stat .stat-val { color: #ccaa66; float: right; }
.ency-stat.stat-best { border-color: #448844; }
.ency-stat.stat-worst { border-color: #884444; }

.ency-skill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 4px 0;
}
.ency-skill-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 7px;
    padding: 3px 8px;
    background: #1a1510;
    border: 1px solid #443322;
    border-radius: 0;
    color: #bbaa88;
}
.ency-skill-chip canvas { flex-shrink: 0; }

.ency-section-label {
    font-size: 7px;
    color: #776633;
    margin: 10px 0 4px;
    text-transform: uppercase;
}

.ency-info-row {
    font-size: 8px;
    padding: 3px 0;
    color: #bbaa88;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
}
.ency-info-row .ency-label { color: #887755; }
.ency-info-row .ency-val { color: #ccbb88; }

#btn-close-ency {
    flex-shrink: 0;
    margin-top: 8px;
    align-self: center;
}

@media (max-width: 700px) {
    #ency-body { flex-direction: column; }
    #ency-list { width: 100%; border-right: none; border-bottom: 2px solid #443322; max-height: 30%; }
}

/* === Language Flag Selector === */
.flag-selector {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
}
.lang-flag {
    image-rendering: pixelated;
    cursor: pointer;
    transition: transform 0.1s;
}
.lang-flag:hover {
    transform: scale(1.2);
}