:root {
    --bg-color: #1a1a1a;
    --main-green: #90EE90;
    --danger-red: #ff6b6b;
    --pixel-border: 4px solid #ffffff;
}

body {
    background-color: var(--bg-color);
    color: white;
    font-family: 'Press Start 2P', cursive;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
}

.container { max-width: 450px; width: 100%; text-align: center; }

/* 공통 카드 스타일 */
.card {
    border: var(--pixel-border);
    padding: 30px 20px;
    background: #2a2a2a;
    box-shadow: 10px 10px 0px #000;
    margin-bottom: 20px;
}

.hidden { display: none !important; }

/* [설정 화면] 시간 조절 UI */
.timer-setting-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 30px 0;
}

.time-box { display: flex; flex-direction: column; align-items: center; }

.pixel-input {
    width: 80px;
    background: #000;
    color: var(--main-green);
    border: 4px solid var(--main-green);
    font-family: inherit;
    font-size: 1.5rem;
    text-align: center;
    padding: 10px 5px;
}

.arrow-btn { background: none; border: none; color: white; cursor: pointer; font-size: 1.2rem; padding: 5px; }
.arrow-btn:hover { color: var(--main-green); }
.separator { font-size: 2rem; color: var(--main-green); padding-bottom: 25px; }
.label { font-size: 0.5rem; color: #777; margin-top: 5px; }

/* [집중 화면] 식물 및 타이머 */
.plant-stage-container {
    height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

#plant-image {
    max-height: 130px;
    image-rendering: pixelated; /* 픽셀 아트 선명도 유지 */
}

#timer-display {
    font-size: 4rem;
    color: var(--main-green);
    margin: 20px 0;
    text-shadow: 4px 4px 0px #000;
}

#status-text { font-size: 0.7rem; color: #aaa; margin-top: 10px; }

/* 버튼 스타일 */
button { font-family: inherit; cursor: pointer; transition: 0.1s; }
.big-btn { 
    width: 100%; padding: 20px; font-size: 1rem; 
    background: #333; color: var(--main-green); border: 4px solid var(--main-green);
}
.big-btn:hover { background: var(--main-green); color: #000; }

.controls-row { display: flex; gap: 10px; margin-top: 20px; }
.control-btn, .danger-btn { flex: 1; padding: 12px; font-size: 0.7rem; border: 4px solid #fff; background: #444; color: #fff; }
.danger-btn { border-color: var(--danger-red); color: var(--danger-red); }

/* 도감 버튼 및 모달 */
.icon-btn { background: none; border: 2px solid #555; color: #777; padding: 8px; font-size: 0.6rem; margin-bottom: 20px; }
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-content { width: 90%; max-width: 400px; position: relative; }
.close-btn { position: absolute; right: 15px; top: 10px; font-size: 1.5rem; cursor: pointer; color: var(--danger-red); }
.inventory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; }
.collected-item { border: 2px solid #555; padding: 5px; background: #333; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.collected-item img { width: 100%; image-rendering: pixelated; }

/* 기본 스피너 제거 */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }