/* 인디 게임 플랫폼 itch.io 특유의 투박하면서도 정돈된 다크-그레이 톤앤매너 */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Noto+Sans+KR:wght@300;400;700&display=swap');

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

body {
    background-color: #1a1917;
    /* itch.io의 시그니처 다크 배경색 */
    color: #dad5cd;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    padding: 0;
}

/* 전체 콘텐트 프레임 (가운데 정렬 아카이빙 창) */
#itch-layout {
    max-width: 960px;
    margin: 0 auto;
    background-color: #2d2c29;
    /* 내부 콘텐츠 영역 배경 */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    min-height: 100vh;
}

/* 1. 상단 배너 */
.itch-banner {
    background: linear-gradient(135deg, #433d36 0%, #221f1b 100%);
    border-bottom: 2px solid #ff4b4b;
    /* itch.io의 포인트 레드 라인 대신 작품에 맞춘 연출도 좋으나 원조 감성을 위해 살짝 은은하게 배치 가능 */
    border-bottom: 2px solid #dfd3b2;
    padding: 40px 30px;
}

.genre-tag {
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    color: #bfa57d;
    text-transform: uppercase;
}

.itch-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    margin-top: 5px;
    letter-spacing: -1px;
}

.itch-tagline {
    font-size: 1rem;
    color: #a69e94;
    margin-top: 5px;
}

/* 2. 메인 바디 구역 */
.itch-main {
    padding: 30px;
}

/* 🎮 [중요] itch.io 스타일 임베디드 게임 콘솔 박스 */
#itch-game-frame {
    width: 100%;
    height: 520px;
    /* 16:9 비율 근접 고정 크기 */
    background-color: #111;
    border: 3px solid #1a1917;
    position: relative;
    margin-bottom: 40px;
    overflow: hidden;
    /* 🔥 [최적화] 게임 프레임 내부 요소들이 바깥 레이아웃에 영향을 주지 않도록 격리 */
    contain: content;
}

/* 게임 로딩 전 화면 */
#game-load-zone {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #1f1e1c;
    z-index: 5;
    position: absolute;
}

.pixel-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

#game-load-zone h2 {
    font-size: 1.4rem;
    color: #dfd3b2;
    margin-bottom: 5px;
}

.env-note {
    font-size: 0.85rem;
    color: #7c7468;
    margin-bottom: 25px;
}

/* 🔥 itch.io 전형적인 'Run Game' 뚱뚱하고 투박한 버튼 패션 */
.itch-run-btn {
    background-color: #ff2449;
    /* itch.io 아이코닉 레드 컬러 */
    color: white;
    border: none;
    font-family: 'Fira Code', monospace;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 12px 36px;
    cursor: pointer;
    border-radius: 3px;
    box-shadow: 0 4px 0 #b3102c;
    transition: transform 0.1s, box-shadow 0.1s;
}

.itch-run-btn:hover {
    background-color: #ff3b5c;
}

.itch-run-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0px 0 #b3102c;
}

/* 실제 3D가 돌아가는 구역 (플레이 누르면 온보드) */
#game-stage-wrapper {
    display: none;
    width: 100%;
    height: 100%;
}

#game-canvas {
    width: 100%;
    height: 100%;
    /* 🔥 [최적화] 캔버스 자체의 블록화 및 마우스 드래그로 인한 텍스트 선택 방지 */
    display: block;
    user-select: none;
}

/* 인게임 UI 오버레이 (임베드 윈도우 크기에 맞춤) */
#ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* 크로스헤어 GPU 가속 및 정렬 최적화 */
#crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    /* 🔥 [최적화] 브라우저에게 크로스헤어 위치 변경 시 GPU를 쓰도록 힌트 제공 */
    will-change: transform;
}

.hud-container {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    gap: 25px;
}

.hud-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hud-label {
    font-family: 'Fira Code', monospace;
    font-size: 10px;
    color: #8c8273;
}

.bar-bg {
    width: 120px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    /* 🔥 [최적화] 자식 요소(fill)의 scale 변형이 바깥으로 삐져나가지 않도록 방지 */
    overflow: hidden;
}

/* 🔥 [핵심 수정] 수분바 애니메이션 성능 최적화 */
#hydration-fill {
    width: 100%;
    /* 너비는 100%로 고정하고, JS에서 scaleX()로 줄입니다 */
    height: 100%;
    background-color: #bfa57d;
    /* 🔥 [최적화] 크기 변형 기준점을 왼쪽 끝으로 설정 */
    transform-origin: left center;
    /* 🔥 [최적화] 브라우저가 이 요소의 transform을 하드웨어 가속(GPU)으로 처리하도록 강제 */
    will-change: transform, background-color;
}

.scrap-counter {
    font-family: 'Fira Code', monospace;
    font-size: 1.2rem;
    color: #dfd3b2;
    line-height: 1;
}

#message-area {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    text-align: center;
    font-size: 0.9rem;
    color: #dfd3b2;
    opacity: 0;
    transition: opacity 0.4s;
    /* 🔥 [최적화] 투명도 애니메이션 효율화 */
    will-change: opacity;
}

#game-pause-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 25, 23, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.pause-box h2 {
    font-size: 1.2rem;
    color: #dfd3b2;
    margin-bottom: 8px;
}

.pause-box p {
    font-size: 0.85rem;
    color: #7c7468;
}

/* 3. 하단 설명 칸 (그리드 레이아웃) */
.itch-description-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    border-top: 1px solid #3d3b37;
    padding-top: 30px;
}

/* 왼쪽: 아티스트 노트 본문 */
.devlog-section h2 {
    /* 끊긴 부분 처리 */
}