/* ==============================================
   gabs.games - 90s Pixel Art RPG Interface
   ============================================== */

/* --- Palette ---
   Console Black: #0f0f23
   Pixel White:   #f0f0f0
   Gold Coin:     #ffd700
   HP Red:        #ff4444
   MP Blue:       #4488ff
   XP Green:      #44ff44
   UI Border:     #5555aa
   Panel BG:      #1a1a3e
*/

/* ---- Reset & Base ---- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0f0f23;
    color: #f0f0f0;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.7rem;
    line-height: 1.8;
}

/* ---- Starfield Background ---- */
#starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

#starfield::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
        25px 40px #f0f0f0,
        80px 120px #f0f0f0,
        150px 30px rgba(240,240,240,0.6),
        200px 200px #f0f0f0,
        320px 80px rgba(240,240,240,0.4),
        410px 150px #f0f0f0,
        500px 50px rgba(240,240,240,0.7),
        600px 300px #f0f0f0,
        700px 180px rgba(240,240,240,0.5),
        50px 350px #f0f0f0,
        180px 420px rgba(240,240,240,0.6),
        330px 390px #f0f0f0,
        480px 450px rgba(240,240,240,0.3),
        620px 420px #f0f0f0,
        760px 350px rgba(240,240,240,0.5),
        90px 500px #f0f0f0,
        250px 550px rgba(240,240,240,0.7),
        400px 580px #f0f0f0,
        550px 520px rgba(240,240,240,0.4),
        700px 560px #f0f0f0,
        840px 40px rgba(240,240,240,0.6),
        900px 130px #f0f0f0,
        980px 90px rgba(240,240,240,0.5),
        1050px 250px #f0f0f0,
        1120px 350px rgba(240,240,240,0.3),
        1200px 180px #f0f0f0,
        1300px 400px rgba(240,240,240,0.6),
        1400px 60px #f0f0f0,
        1500px 300px rgba(240,240,240,0.4),
        1600px 500px #f0f0f0,
        45px 650px rgba(240,240,240,0.5),
        160px 700px #f0f0f0,
        300px 680px rgba(240,240,240,0.7),
        440px 720px #f0f0f0,
        580px 660px rgba(240,240,240,0.3),
        720px 750px #f0f0f0,
        860px 620px rgba(240,240,240,0.6),
        1000px 700px #f0f0f0,
        1150px 640px rgba(240,240,240,0.4),
        1280px 730px #f0f0f0,
        130px 800px rgba(240,240,240,0.5),
        350px 850px #f0f0f0,
        520px 810px rgba(240,240,240,0.6),
        670px 870px #f0f0f0,
        810px 830px rgba(240,240,240,0.3),
        960px 880px #f0f0f0,
        1100px 820px rgba(240,240,240,0.7),
        1250px 860px #f0f0f0,
        70px 920px rgba(240,240,240,0.4),
        220px 960px #f0f0f0,
        380px 940px rgba(240,240,240,0.5),
        540px 980px #f0f0f0;
    animation: starTwinkle 4s ease-in-out infinite alternate;
}

@keyframes starTwinkle {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}

/* ---- Game UI Grid ---- */
#game-ui {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 12px;
    display: grid;
    grid-template:
        'title title' auto
        'shop stats' 1fr
        'dialogue dialogue' 200px
        / 2fr 1fr;
    gap: 8px;
}

/* ---- RPG Panel Base ---- */
#title-panel,
#shop-panel,
#stats-panel,
#dialogue-panel {
    background: #1a1a3e;
    border: 3px solid #5555aa;
    padding: 1rem;
    position: relative;
    overflow: hidden;
}

/* Double border effect (inner border) */
#title-panel::after,
#shop-panel::after,
#stats-panel::after,
#dialogue-panel::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 1px solid #5555aa;
    pointer-events: none;
}

/* Corner pixel decorations */
#title-panel::before,
#shop-panel::before,
#stats-panel::before,
#dialogue-panel::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: #5555aa;
    top: -1px;
    left: -1px;
    z-index: 2;
    box-shadow:
        calc(100% - 5px) 0 0 0 #5555aa,
        0 calc(100% - 5px) 0 0 #5555aa,
        calc(100% - 5px) calc(100% - 5px) 0 0 #5555aa;
}

/* ---- Title Panel (Hero) ---- */
#title-panel {
    grid-area: title;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,215,0,0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(68,136,255,0.05) 0%, transparent 50%),
        #1a1a3e;
}

#game-title {
    font-family: 'Press Start 2P', cursive;
    font-size: clamp(1rem, 3vw, 1.5rem);
    color: #ffd700;
    text-shadow:
        2px 2px 0 #5555aa,
        4px 4px 0 rgba(0,0,0,0.5);
    letter-spacing: 4px;
    margin-bottom: 0.5rem;
}

#title-subtitle {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.9rem;
    color: #4488ff;
    margin-bottom: 1.2rem;
    letter-spacing: 2px;
}

#press-start {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.6rem;
    color: #f0f0f0;
    animation: blink 1s step-end infinite;
}

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

/* ---- Shop Panel ---- */
#shop-panel {
    grid-area: shop;
    display: flex;
    flex-direction: column;
}

.panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #5555aa;
}

.panel-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.7rem;
    color: #ffd700;
}

.panel-label-sub {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.8rem;
    color: #5555aa;
}

#shop-list {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #5555aa #1a1a3e;
}

#shop-list::-webkit-scrollbar {
    width: 8px;
}

#shop-list::-webkit-scrollbar-track {
    background: #0f0f23;
}

#shop-list::-webkit-scrollbar-thumb {
    background: #5555aa;
}

.shop-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.6rem 0.4rem;
    border-bottom: 1px solid rgba(85,85,170,0.3);
    cursor: pointer;
    transition: background 0.15s;
}

.shop-item:hover {
    background: rgba(85,85,170,0.15);
}

.shop-item.selected {
    background: rgba(255,215,0,0.1);
    border-left: 3px solid #ffd700;
}

.item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-name {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.6rem;
    color: #f0f0f0;
}

.item-desc {
    font-family: 'VT323', monospace;
    font-size: 1rem;
    color: #5555aa;
    line-height: 1.2;
}

.item-price {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.6rem;
    color: #ffd700;
    white-space: nowrap;
}

.currency {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.8rem;
}

/* ---- CSS Pixel Art Icons ---- */
.pixel-icon {
    width: 1px;
    height: 1px;
    flex-shrink: 0;
    position: relative;
    margin: 8px;
    margin-right: 16px;
}

/* Sword - pixel art via box-shadow */
.pixel-sword {
    box-shadow:
        7px 0 0 #f0f0f0,
        6px 1px 0 #f0f0f0,
        5px 2px 0 #f0f0f0,
        4px 3px 0 #f0f0f0,
        3px 4px 0 #f0f0f0,
        2px 5px 0 #ffd700,
        1px 6px 0 #ffd700,
        3px 6px 0 #5555aa,
        0 7px 0 #ffd700,
        2px 7px 0 #5555aa,
        4px 5px 0 #5555aa,
        5px 4px 0 #5555aa,
        6px 3px 0 #5555aa,
        7px 2px 0 #5555aa,
        8px 1px 0 #f0f0f0;
}

/* Potion - red HP potion */
.pixel-potion {
    box-shadow:
        3px 0 0 #5555aa,
        4px 0 0 #5555aa,
        2px 1px 0 #5555aa,
        5px 1px 0 #5555aa,
        3px 1px 0 #f0f0f0,
        4px 1px 0 #f0f0f0,
        2px 2px 0 #5555aa,
        5px 2px 0 #5555aa,
        1px 3px 0 #5555aa,
        6px 3px 0 #5555aa,
        2px 3px 0 #ff4444,
        3px 3px 0 #ff4444,
        4px 3px 0 #ff4444,
        5px 3px 0 #ff4444,
        1px 4px 0 #5555aa,
        6px 4px 0 #5555aa,
        2px 4px 0 #ff4444,
        3px 4px 0 #ff4444,
        4px 4px 0 #ff4444,
        5px 4px 0 #ff4444,
        1px 5px 0 #5555aa,
        6px 5px 0 #5555aa,
        2px 5px 0 #ff4444,
        3px 5px 0 #ff4444,
        4px 5px 0 #ff4444,
        5px 5px 0 #ff4444,
        1px 6px 0 #5555aa,
        6px 6px 0 #5555aa,
        2px 6px 0 #ff4444,
        3px 6px 0 #ff4444,
        4px 6px 0 #ff4444,
        5px 6px 0 #ff4444,
        2px 7px 0 #5555aa,
        3px 7px 0 #5555aa,
        4px 7px 0 #5555aa,
        5px 7px 0 #5555aa;
}

/* Shield */
.pixel-shield {
    box-shadow:
        2px 0 0 #5555aa,
        3px 0 0 #5555aa,
        4px 0 0 #5555aa,
        5px 0 0 #5555aa,
        1px 1px 0 #5555aa,
        6px 1px 0 #5555aa,
        2px 1px 0 #4488ff,
        3px 1px 0 #4488ff,
        4px 1px 0 #4488ff,
        5px 1px 0 #4488ff,
        1px 2px 0 #5555aa,
        6px 2px 0 #5555aa,
        2px 2px 0 #4488ff,
        3px 2px 0 #f0f0f0,
        4px 2px 0 #4488ff,
        5px 2px 0 #4488ff,
        1px 3px 0 #5555aa,
        6px 3px 0 #5555aa,
        2px 3px 0 #4488ff,
        3px 3px 0 #4488ff,
        4px 3px 0 #4488ff,
        5px 3px 0 #4488ff,
        1px 4px 0 #5555aa,
        6px 4px 0 #5555aa,
        2px 4px 0 #4488ff,
        3px 4px 0 #4488ff,
        4px 4px 0 #4488ff,
        5px 4px 0 #4488ff,
        2px 5px 0 #5555aa,
        5px 5px 0 #5555aa,
        3px 5px 0 #4488ff,
        4px 5px 0 #4488ff,
        3px 6px 0 #5555aa,
        4px 6px 0 #5555aa;
}

/* Ring */
.pixel-ring {
    box-shadow:
        3px 0 0 #4488ff,
        4px 0 0 #4488ff,
        2px 1px 0 #4488ff,
        5px 1px 0 #4488ff,
        1px 2px 0 #ffd700,
        6px 2px 0 #4488ff,
        1px 3px 0 #ffd700,
        6px 3px 0 #4488ff,
        1px 4px 0 #ffd700,
        6px 4px 0 #4488ff,
        2px 5px 0 #4488ff,
        5px 5px 0 #4488ff,
        3px 6px 0 #4488ff,
        4px 6px 0 #4488ff;
}

/* Scroll */
.pixel-scroll {
    box-shadow:
        1px 0 0 #ffd700,
        2px 0 0 #ffd700,
        3px 0 0 #ffd700,
        4px 0 0 #ffd700,
        5px 0 0 #ffd700,
        6px 0 0 #ffd700,
        0 1px 0 #ffd700,
        7px 1px 0 #ffd700,
        1px 1px 0 #f0f0f0,
        2px 1px 0 #f0f0f0,
        3px 1px 0 #f0f0f0,
        4px 1px 0 #f0f0f0,
        5px 1px 0 #f0f0f0,
        6px 1px 0 #f0f0f0,
        0 2px 0 #ffd700,
        7px 2px 0 #ffd700,
        1px 2px 0 #f0f0f0,
        2px 2px 0 #5555aa,
        3px 2px 0 #5555aa,
        4px 2px 0 #5555aa,
        5px 2px 0 #5555aa,
        6px 2px 0 #f0f0f0,
        0 3px 0 #ffd700,
        7px 3px 0 #ffd700,
        1px 3px 0 #f0f0f0,
        2px 3px 0 #f0f0f0,
        3px 3px 0 #f0f0f0,
        4px 3px 0 #f0f0f0,
        5px 3px 0 #f0f0f0,
        6px 3px 0 #f0f0f0,
        0 4px 0 #ffd700,
        7px 4px 0 #ffd700,
        1px 4px 0 #f0f0f0,
        2px 4px 0 #5555aa,
        3px 4px 0 #5555aa,
        4px 4px 0 #5555aa,
        5px 4px 0 #f0f0f0,
        6px 4px 0 #f0f0f0,
        0 5px 0 #ffd700,
        7px 5px 0 #ffd700,
        1px 5px 0 #f0f0f0,
        2px 5px 0 #f0f0f0,
        3px 5px 0 #f0f0f0,
        4px 5px 0 #f0f0f0,
        5px 5px 0 #f0f0f0,
        6px 5px 0 #f0f0f0,
        1px 6px 0 #ffd700,
        2px 6px 0 #ffd700,
        3px 6px 0 #ffd700,
        4px 6px 0 #ffd700,
        5px 6px 0 #ffd700,
        6px 6px 0 #ffd700;
}

/* Gem */
.pixel-gem {
    box-shadow:
        3px 0 0 #44ff44,
        4px 0 0 #44ff44,
        2px 1px 0 #44ff44,
        5px 1px 0 #44ff44,
        3px 1px 0 #44ff44,
        4px 1px 0 #44ff44,
        1px 2px 0 #44ff44,
        6px 2px 0 #44ff44,
        2px 2px 0 #44ff44,
        3px 2px 0 #f0f0f0,
        4px 2px 0 #44ff44,
        5px 2px 0 #44ff44,
        1px 3px 0 #44ff44,
        6px 3px 0 #44ff44,
        2px 3px 0 #44ff44,
        3px 3px 0 #44ff44,
        4px 3px 0 #44ff44,
        5px 3px 0 #44ff44,
        2px 4px 0 #44ff44,
        5px 4px 0 #44ff44,
        3px 4px 0 #44ff44,
        4px 4px 0 #44ff44,
        3px 5px 0 #44ff44,
        4px 5px 0 #44ff44;
}

/* Key */
.pixel-key {
    box-shadow:
        2px 0 0 #ffd700,
        3px 0 0 #ffd700,
        1px 1px 0 #ffd700,
        4px 1px 0 #ffd700,
        2px 1px 0 #0f0f23,
        3px 1px 0 #0f0f23,
        1px 2px 0 #ffd700,
        4px 2px 0 #ffd700,
        2px 2px 0 #0f0f23,
        3px 2px 0 #0f0f23,
        2px 3px 0 #ffd700,
        3px 3px 0 #ffd700,
        3px 4px 0 #ffd700,
        3px 5px 0 #ffd700,
        3px 6px 0 #ffd700,
        4px 5px 0 #ffd700,
        4px 6px 0 #ffd700,
        3px 7px 0 #ffd700;
}

/* ---- Stats Panel ---- */
#stats-panel {
    grid-area: stats;
    display: flex;
    flex-direction: column;
}

#stats-content {
    flex: 1;
}

.stat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(85,85,170,0.2);
}

.stat-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.55rem;
    color: #5555aa;
    width: 32px;
    flex-shrink: 0;
}

.stat-value {
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    color: #f0f0f0;
}

.stat-numeric {
    font-size: 0.9rem;
    white-space: nowrap;
}

.stat-row-currency .stat-label {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.9rem;
    color: #ffd700;
}

.stat-row-currency .stat-value {
    color: #ffd700;
    font-size: 1.2rem;
}

/* Stat bars */
.stat-bar {
    flex: 1;
    height: 10px;
    background: #0f0f23;
    border: 1px solid #5555aa;
    overflow: hidden;
}

.stat-bar-fill {
    height: 100%;
    transition: width 0.5s ease;
    image-rendering: pixelated;
}

.hp-bar {
    background: #ff4444;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
}

.mp-bar {
    background: #4488ff;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
}

.xp-bar {
    background: #44ff44;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
}

/* Value Meter */
#value-meter-section {
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 2px solid #5555aa;
}

#value-meter-section .panel-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.55rem;
}

#value-meter {
    display: flex;
    gap: 3px;
}

.value-block {
    width: 8px;
    height: 12px;
    border: 1px solid #5555aa;
    background: #0f0f23;
    flex-shrink: 0;
}

.value-block.filled {
    background: #ffd700;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
}

/* ---- Dialogue Panel ---- */
#dialogue-panel {
    grid-area: dialogue;
    display: flex;
    flex-direction: column;
}

#dialogue-text {
    flex: 1;
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    color: #f0f0f0;
    line-height: 1.6;
    padding: 0.5rem 0;
    overflow-y: auto;
}

/* Blinking cursor */
.dialogue-cursor {
    display: inline-block;
    width: 8px;
    height: 12px;
    background: #f0f0f0;
    vertical-align: middle;
    margin-left: 2px;
    animation: cursorBlink 1s step-end infinite;
}

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

/* ---- Mobile Layout ---- */
@media (max-width: 640px) {
    html, body {
        overflow-y: auto;
        overflow-x: hidden;
        height: auto;
    }

    #game-ui {
        height: auto;
        min-height: 100vh;
        grid-template:
            'title' auto
            'shop' 1fr
            'stats' auto
            'dialogue' 200px
            / 1fr;
        padding: 8px;
        gap: 6px;
    }

    #title-panel,
    #shop-panel,
    #stats-panel,
    #dialogue-panel {
        padding: 0.6rem;
    }

    #game-title {
        font-size: 1rem;
    }

    .shop-item {
        gap: 8px;
        padding: 0.5rem 0.3rem;
    }

    .item-desc {
        font-size: 0.85rem;
    }

    .stat-row {
        padding: 0.3rem 0;
    }

    #shop-list {
        max-height: 50vh;
    }
}

/* ---- Selection effect for shop items ---- */
.shop-item::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid transparent;
    flex-shrink: 0;
    transition: border-left-color 0.15s;
}

.shop-item:hover::before,
.shop-item.selected::before {
    border-left-color: #ffd700;
}

/* ---- Scrollbar for dialogue ---- */
#dialogue-text::-webkit-scrollbar {
    width: 6px;
}

#dialogue-text::-webkit-scrollbar-track {
    background: #0f0f23;
}

#dialogue-text::-webkit-scrollbar-thumb {
    background: #5555aa;
}