@import url('https://fonts.googleapis.com/css2?family=Silkscreen&family=JetBrains+Mono:wght@400;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/neodgm/neodgm-webfont@latest/neodgm/style.css');
@import url('https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root {
    /* Color Palette */
    --bg-wood: #5D4037;
    --panel-paper: #F5F5DC;
    --text-main: #2C1B18;
    --border-dark: #3E2723;
    --point-sage: #81C784;
    --point-terra: #E57373;
    --btn-shadow: #3E2723;
    --btn-hover: #D7CCC8;
    
    /* Typography */
    --pixel-font: 'Silkscreen', 'NeoDunggeunmo', cursive;
    --mono-font: 'JetBrains Mono', monospace;
    --readable-font: 'Galmuri11', 'Pretendard', sans-serif;

    /* Sizes */
    --dialogue-min-width: 280px;
    --dialogue-max-width: 420px;
    --dialogue-default-width: 340px;
}

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

body {
    font-family: var(--readable-font);
    line-height: 1.6;
    letter-spacing: -0.01em;
    overflow: hidden;
    background: var(--bg-wood);
    color: var(--text-main);
    image-rendering: pixelated; /* Enhanced pixel art feel */
}

#game-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #2a1b15; /* Fallback for wood tone */
}

#background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    z-index: 1;
    image-rendering: pixelated;
}

#game-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

#ui-overlay {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: var(--panel-paper);
    border: 4px solid var(--border-dark);
    padding: 10px 15px;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    width: 380px;
    text-align: center;
}

#corner-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 200;
    display: flex;
    gap: 6px;
    pointer-events: auto;
}

#ui-overlay h2 {
    font-family: var(--pixel-font);
    font-size: 24px;
    font-weight: normal;
    color: var(--text-main);
    margin: 8px 0 12px 0;
    text-transform: uppercase;
    text-align: center;
}

#lobby-btn {
    font-family: var(--pixel-font);
    font-size: 0.7rem;
    background: var(--panel-paper);
    border: 2px solid var(--border-dark);
    padding: 6px 10px;
    text-decoration: none;
    color: var(--text-main);
    box-shadow: 2px 2px 0px var(--btn-shadow);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}

#lobby-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0px var(--btn-shadow);
}

#instructions {
    margin-top: 10px;
    font-size: 13px;
    color: #5d4037;
    line-height: 1.5;
    font-family: var(--readable-font);
}

/* Common Pixel Panel Style */
.pixel-panel {
    background: var(--panel-paper);
    border: 4px solid var(--border-dark);
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
    padding: 16px;
    position: absolute;
}

/* Character Styling & Animations */
.character-image {
    position: absolute;
    z-index: 3;
    image-rendering: pixelated;
    cursor: pointer;
    transition: transform 0.2s;
    transform: scale(3.5);
    animation: idleBob 3s ease-in-out infinite;
}

@keyframes idleBob {
    0%, 100% { transform: translate(-50%, -50%) scale(3.5); }
    50% { transform: translate(-50%, calc(-50% - 2px)) scale(3.5); }
}

#boy1 {
    top: 52%; /* Aligned with Boy 2 */
    left: 50%;
    animation-delay: 0.2s;
}

#boy2 {
    top: 52%;
    left: calc(50% - 130px); /* Slightly widened for better spacing */
    animation-delay: 0.5s;
}

#girl {
    top: 52%; /* Aligned with Boy 2 */
    left: calc(50% + 130px);
    transform: translate(-50%, -50%) scale(3.5) scaleX(-1);
    animation: idleBobGirl 3s ease-in-out infinite;
    animation-delay: 0.1s;
}

@keyframes idleBobGirl {
    0%, 100% { transform: translate(-50%, -50%) scale(3.5) scaleX(-1); }
    50% { transform: translate(-50%, calc(-50% - 2px)) scale(3.5) scaleX(-1); }
}

/* Start Room Specific Formatting */
body[data-room-id="start_room"] #boy1 {
    left: 50%;  /* Center — solo guide character */
}

body[data-room-id="start_room"] #girl {
    display: none;
}


.character-image:hover {
    filter: brightness(1.2);
}

.dialogue-bubble {
    position: absolute; /* Crucial for JS positioning */
    background: var(--panel-paper);
    border: 4px solid var(--border-dark);
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.3);
    padding: 12px 15px;
    width: 340px; /* Fixed width for stability */
    max-height: 80vh; /* Allow it to grow up to 80% of the screen height */
    overflow-y: auto; /* Scroll if content exceeds max-height */
    color: var(--text-main);
    display: none;
    z-index: 50;
}

.dialogue-bubble.active {
    display: block;
}

.dialogue-bubble h3 {
    font-family: var(--pixel-font);
    font-size: 16px;
    font-weight: normal; /* Critical: prevent system serif fallback on bold */
    margin-bottom: 8px;
    border-bottom: 2px solid var(--border-dark);
    padding-bottom: 4px;
}

#boy2-dialogue-content,
#girl-dialogue-content {
    font-family: var(--readable-font);
    font-size: 15px;
    line-height: 1.6;
    max-height: 250px;
    padding-right: 5px;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Input Fields */
.dialogue-input-container {
    margin-top: 15px;
    display: flex;
    gap: 8px;
}

.dialogue-input {
    flex: 1;
    background: #fff;
    border: 2px solid var(--border-dark);
    padding: 6px 10px;
    font-family: var(--readable-font);
    font-size: 14px;
    outline: none;
}

.dialogue-input:focus {
    background: #fffde7;
}

.dialogue-send-btn, #reset-btn {
    background: var(--point-sage);
    border: 3px solid var(--border-dark);
    color: var(--text-main);
    padding: 6px 12px;
    font-family: var(--pixel-font);
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
    box-shadow: 3px 3px 0px var(--btn-shadow);
    transition: transform 0.1s, box-shadow 0.1s;
}

.dialogue-send-btn:hover, #reset-btn:hover, #lang-toggle-btn:hover {
    background: #a5d6a7;
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0px var(--btn-shadow);
}

.dialogue-send-btn:active, #reset-btn:active, #lang-toggle-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0px 0px 0px var(--btn-shadow);
}

#lang-toggle-btn {
    background: var(--point-terra);
    color: #fff;
    padding: 2px 8px;
    font-size: 10px;
}

#lang-toggle-btn:hover {
    background: #ff8a80;
}

#reset-btn {
    background: #bdbdbd;
    padding: 2px 8px;
    font-size: 10px;
}

#reset-btn:hover {
    background: #e0e0e0;
}

#corner-controls button {
    border: 2px solid var(--border-dark);
    font-family: var(--pixel-font);
    cursor: pointer;
    box-shadow: 2px 2px 0px var(--btn-shadow);
    transition: transform 0.1s, box-shadow 0.1s;
    outline: none;
}

/* Task Management / Ledger Style */
#task-management-bubble {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 900px;
    max-height: 40vh;
    background: #fdf5e6; /* Parchment white */
    border: 5px double var(--border-dark);
    box-shadow: 8px 8px 0px rgba(0,0,0,0.4);
    display: none;
    padding: 15px;
    overflow-y: auto;
    z-index: 10;
}

#task-management-bubble h3 {
    font-family: var(--pixel-font);
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    margin-bottom: 12px;
    color: var(--bg-wood);
}

#task-management-content {
    font-family: var(--readable-font);
    font-size: 13px;
}

/* Speech Bubbles (Floating ones) */
.speech-bubble {
    position: absolute;
    background: var(--panel-paper);
    border: 3px solid var(--border-dark);
    padding: 8px 12px;
    font-family: var(--readable-font);
    font-size: 14px;
    max-width: 250px;
    z-index: 4;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.2);
}

#boy1-speech {
    top: 35%;
    left: 45%;
    transform: translate(-50%, -100%);
}

/* Typewriter Animation Effect (via JS class) */
.typing {
    overflow: hidden;
    white-space: pre-wrap;
}

#loop-status {
    font-family: var(--mono-font) !important;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--panel-paper);
}
::-webkit-scrollbar-thumb {
    background: var(--bg-wood);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--border-dark);
}