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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(to bottom, #87CEEB 0%, #90EE90 60%, #8B6914 100%);
    min-height: 100vh;
    overflow: hidden;
    transition: background 3s ease;
}

body.night-mode {
    background: linear-gradient(to bottom, #0d0720 0%, #1a0a3a 40%, #2a1550 70%, #1a0f2e 100%);
}

.hidden {
    display: none !important;
}

/* ===== 타이틀 화면 ===== */
#title-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

#title-content {
    text-align: center;
}

#title-text {
    font-size: 64px;
    color: #4a2c0a;
    text-shadow: 3px 3px 0px #c8a96e, 6px 6px 0px rgba(0,0,0,0.2);
    margin-bottom: 20px;
    animation: titleBounce 2s ease-in-out infinite;
}

@keyframes titleBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

#title-sub {
    font-size: 48px;
    margin-bottom: 50px;
    animation: titleBounce 2s ease-in-out infinite 0.3s;
}

#start-btn {
    font-size: 28px;
    padding: 20px 60px;
    background: linear-gradient(135deg, #ff8c00 0%, #ffa500 100%);
    color: white;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    box-shadow: 0 6px 0 #b86200, 0 8px 20px rgba(0,0,0,0.3);
    transition: all 0.1s;
    font-weight: bold;
    letter-spacing: 2px;
}

#start-btn:hover {
    background: linear-gradient(135deg, #ffa500 0%, #ffb732 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #b86200, 0 10px 25px rgba(0,0,0,0.3);
}

#start-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #b86200, 0 4px 10px rgba(0,0,0,0.3);
}

/* ===== 저장파일 선택 화면 ===== */
#save-select-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: 30px;
}

#save-select-screen h2 {
    font-size: 42px;
    color: #4a2c0a;
    text-shadow: 2px 2px 0px #c8a96e;
}

#save-slots {
    display: flex;
    gap: 30px;
}

.save-slot {
    cursor: pointer;
}

.save-slot-inner {
    width: 220px;
    height: 160px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    border: 4px solid #c8a96e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    box-shadow: 0 6px 0 #8B6914, 0 8px 20px rgba(0,0,0,0.2);
    transition: all 0.1s;
}

.save-slot:hover .save-slot-inner {
    transform: translateY(-4px);
    box-shadow: 0 10px 0 #8B6914, 0 12px 25px rgba(0,0,0,0.2);
    background: rgba(255, 255, 255, 1);
}

.save-slot:active .save-slot-inner {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #8B6914;
}

.slot-number {
    font-size: 22px;
    font-weight: bold;
    color: #4a2c0a;
}

.slot-info {
    font-size: 16px;
    color: #888;
    text-align: center;
    padding: 0 10px;
}

.slot-info.has-data {
    color: #4a7c4a;
    font-weight: bold;
}

.save-slot-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.delete-btn {
    font-size: 15px;
    padding: 8px 20px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 0 #b83030;
    font-weight: bold;
    transition: all 0.1s;
    width: 100%;
}

.delete-btn:hover {
    background: linear-gradient(135deg, #ff8080 0%, #ff6b7a 100%);
    transform: translateY(-2px);
}

.delete-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #b83030;
}

.back-btn {
    font-size: 20px;
    padding: 12px 30px;
    background: rgba(255,255,255,0.7);
    border: 3px solid #c8a96e;
    border-radius: 10px;
    cursor: pointer;
    color: #4a2c0a;
    font-weight: bold;
    transition: all 0.2s;
}

.back-btn:hover {
    background: rgba(255,255,255,1);
}

/* ===== 인트로 화면 ===== */
#intro-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#intro-box {
    background: rgba(255, 248, 220, 0.97);
    border: 4px solid #c8a96e;
    border-radius: 20px;
    padding: 50px 60px;
    max-width: 600px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

#intro-text {
    font-size: 20px;
    color: #4a2c0a;
    line-height: 2;
    margin-bottom: 35px;
    white-space: pre-line;
}

#intro-btn {
    font-size: 20px;
    padding: 14px 50px;
    background: linear-gradient(135deg, #ff8c00 0%, #ffa500 100%);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 5px 0 #b86200;
    font-weight: bold;
    transition: all 0.1s;
}

#intro-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 #b86200;
}

#intro-btn:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 #b86200;
}

/* ===== 게임 화면 ===== */
#game-screen {
    width: 100vw;
    height: 100vh;
    position: relative;
}

/* 시계 + 날짜 컨테이너 */
#clock-container {
    position: fixed;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 100;
}

#clock-canvas {
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25));
}

/* 날짜 표시 */
#day-display {
    font-size: 20px;
    font-weight: bold;
    color: #4a2c0a;
    background: rgba(255, 255, 255, 0.85);
    padding: 6px 22px;
    border-radius: 20px;
    border: 3px solid #c8a96e;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

#game-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#farm-desc {
    font-size: 20px;
    color: #4a2c0a;
}

/* ===== 공지 버튼 - 왼쪽 위 ===== */
#notice-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    font-size: 16px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #e06020, #f07030);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 0 #a03010, 0 6px 15px rgba(0,0,0,0.25);
    font-weight: bold;
    transition: all 0.1s;
    z-index: 100;
}

#notice-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #a03010, 0 8px 20px rgba(0,0,0,0.3);
}

#notice-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #a03010;
}

/* ===== 공지 모달 ===== */
#notice-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 400;
}

#notice-panel {
    width: 460px;
    max-width: 92vw;
    max-height: 80vh;
    background: rgba(255, 248, 235, 0.98);
    border: 5px solid #e06020;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
}

#notice-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    background: linear-gradient(135deg, #e06020, #f07030);
    font-size: 20px;
    font-weight: bold;
    color: white;
}

#notice-close-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 18px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#notice-close-btn:hover { background: rgba(255,255,255,0.35); }

#notice-content {
    padding: 20px 24px 28px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    cursor: grab;
    user-select: none;
    scrollbar-width: none; /* Firefox */
}

#notice-content::-webkit-scrollbar { display: none; }
#notice-content.dragging { cursor: grabbing; }

/* 아래 더 있다는 페이드 힌트 */
#notice-panel::after {
    content: '▼ 드래그해서 스크롤';
    display: block;
    text-align: center;
    font-size: 13px;
    color: #e06020;
    padding: 8px;
    background: rgba(255,248,235,0.95);
    border-top: 1px solid #f0d0b0;
    font-weight: bold;
    pointer-events: none;
}

.notice-item {
    background: white;
    border-radius: 14px;
    padding: 16px 18px;
    border-left: 5px solid #f07030;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.notice-date {
    font-size: 13px;
    color: #aaa;
    margin-bottom: 6px;
    font-weight: bold;
}

.notice-text {
    font-size: 15px;
    color: #333;
    line-height: 1.7;
}

/* 저장 버튼 - 왼쪽 아래 */
#save-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    font-size: 18px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #4a7c4a 0%, #5a9e5a 100%);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 0 #2d5a2d, 0 6px 15px rgba(0,0,0,0.3);
    font-weight: bold;
    transition: all 0.1s;
    z-index: 100;
}

#save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #2d5a2d, 0 8px 20px rgba(0,0,0,0.3);
}

#save-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #2d5a2d;
}

/* ===== 지도 화면 ===== */
#map-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 30px;
    padding-top: 80px;
}

#map-title {
    font-size: 36px;
    color: #4a2c0a;
    text-shadow: 2px 2px 0px #c8a96e;
}

#map-area {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

.map-location {
    width: 200px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    border: 4px solid #c8a96e;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 6px 0 #8B6914, 0 8px 20px rgba(0,0,0,0.2);
    transition: all 0.15s;
}

.map-location:hover {
    transform: translateY(-5px);
    box-shadow: 0 11px 0 #8B6914, 0 13px 28px rgba(0,0,0,0.2);
    background: rgba(255, 255, 255, 1);
}

.map-location:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #8B6914;
}

.map-location.locked-location {
    background: rgba(200, 200, 200, 0.6);
    border-color: #aaa;
    box-shadow: 0 6px 0 #888, 0 8px 20px rgba(0,0,0,0.15);
    cursor: not-allowed;
}
.map-location.locked-location:hover {
    transform: none;
    box-shadow: 0 6px 0 #888, 0 8px 20px rgba(0,0,0,0.15);
    background: rgba(200, 200, 200, 0.6);
}
.map-location.locked-location:active {
    transform: none;
    box-shadow: 0 6px 0 #888;
}
.map-location.locked-location .loc-name {
    color: #888;
}

/* ===== 방사능 강 ===== */

#river-screen {
    height: 100%;
}

#river-map-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 20px;
    padding-top: 80px;
}

#river-map-title {
    font-size: 32px;
    color: #0a5566;
    text-shadow: 2px 2px 0px #7acfdd;
}

#river-shard-display {
    background: rgba(0, 180, 220, 0.18);
    border: 2px solid #5bcce0;
    border-radius: 20px;
    padding: 8px 22px;
    font-size: 16px;
    font-weight: bold;
    color: #0a6677;
}

#river-map-area {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.river-location {
    border-color: #5bcce0;
    box-shadow: 0 6px 0 #1a8899, 0 8px 20px rgba(0,180,220,0.25);
}
.river-location:hover {
    box-shadow: 0 11px 0 #1a8899, 0 13px 28px rgba(0,180,220,0.3);
}
.river-location:active {
    box-shadow: 0 2px 0 #1a8899;
}

/* ===== 아이템 상점 ===== */

#item-shop-screen {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#item-shop-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    padding: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

/* 방독면 NPC */
#gas-npc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#gas-npc-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#gas-mask-head {
    width: 64px;
    height: 64px;
    background: radial-gradient(circle at 40% 38%, #8a9a7a, #4a5a3a);
    border-radius: 50%;
    position: relative;
    box-shadow: inset -4px -4px 10px rgba(0,0,0,0.35);
}

.gas-lens {
    width: 18px;
    height: 18px;
    background: radial-gradient(circle at 35% 35%, #aaffcc, #00cc66 55%, #004422);
    border-radius: 50%;
    position: absolute;
    top: 16px;
    border: 2px solid #1a2a1a;
    box-shadow: 0 0 8px rgba(0,255,100,0.7);
}

.gas-lens-l { left: 7px; }
.gas-lens-r { right: 7px; }

#gas-filter {
    width: 30px;
    height: 14px;
    background: linear-gradient(180deg, #777, #444);
    border-radius: 4px;
    position: absolute;
    bottom: 10px;
    left: 17px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

#gas-filter::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 8px;
    background: #333;
    border-radius: 0 0 5px 5px;
    bottom: -7px;
    left: 10px;
}

#gas-npc-body {
    width: 70px;
    height: 80px;
    background: linear-gradient(180deg, #5a7a3a, #3a5a1a);
    border-radius: 8px 8px 4px 4px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
}

#gas-npc-legs {
    display: flex;
    gap: 10px;
}

.gas-npc-leg {
    width: 22px;
    height: 36px;
    background: #3a5a1a;
    border-radius: 0 0 6px 6px;
}

#gas-npc-speech {
    background: white;
    border: 3px solid #00aa66;
    border-radius: 16px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    position: relative;
    max-width: 160px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

#gas-npc-speech::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-bottom-color: #00aa66;
}

#gas-npc-speech::after {
    content: '';
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: white;
}

/* 아이템 상점 패널 */
#item-shop-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 220px;
}

#item-shop-title {
    font-size: 20px;
    font-weight: bold;
    color: #0a5566;
}

#item-shop-shard {
    font-size: 15px;
    font-weight: bold;
    color: #0a6677;
    background: rgba(0,180,220,0.12);
    border: 2px solid #5bcce0;
    border-radius: 12px;
    padding: 6px 14px;
}

#item-shop-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shop-item-card {
    background: rgba(255,255,255,0.9);
    border: 3px solid #5bcce0;
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 160px;
    box-shadow: 0 4px 12px rgba(0,180,220,0.15);
}

.shop-item-icon {
    width: 48px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-item-name {
    font-size: 16px;
    font-weight: bold;
    color: #0a5566;
}

.shop-item-desc {
    font-size: 12px;
    color: #666;
    text-align: center;
}

.shop-item-owned {
    font-size: 13px;
    color: #888;
}

.shop-buy-btn {
    background: linear-gradient(135deg, #33bbdd, #0099bb);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 8px 18px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 3px 0 #006688;
    transition: all 0.15s;
}

.shop-buy-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 #006688; }
.shop-buy-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #006688; }
.shop-buy-btn:disabled { background: #aaa; box-shadow: 0 3px 0 #888; cursor: not-allowed; transform: none; }

/* ===== 방사능 잼 아이콘 ===== */
.rad-jam-icon {
    width: 42px;
    height: 50px;
    position: relative;
}

.jam-lid {
    width: 34px;
    height: 10px;
    background: linear-gradient(180deg, #aacc44, #778822);
    border-radius: 4px 4px 2px 2px;
    position: absolute;
    top: 0;
    left: 4px;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.35);
}

.jam-jar {
    width: 42px;
    height: 38px;
    border: 3px solid #aabb44;
    border-radius: 4px 4px 8px 8px;
    position: absolute;
    top: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.15);
}

.jam-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 62%;
    background: radial-gradient(ellipse at 50% 80%, #ccff44, #88cc00 50%, #446600);
    border-radius: 0 0 5px 5px;
    animation: jamGlow 2s ease-in-out infinite;
}

@keyframes jamGlow {
    0%, 100% { filter: brightness(1); }
    50%       { filter: brightness(1.3) drop-shadow(0 0 6px #aaff00); }
}

.jam-shine {
    position: absolute;
    top: 5px; left: 6px;
    width: 11px; height: 18px;
    background: rgba(255,255,255,0.28);
    border-radius: 50%;
    transform: rotate(-15deg);
}

/* 환전소 화면 */
#exchange-screen {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#exchange-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 20px;
}

#exchange-content h2 {
    font-size: 28px;
    color: #0a5566;
}

#exchange-content p {
    text-align: center;
    color: #444;
    line-height: 1.6;
}

#exchange-balances {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(0,180,220,0.1);
    border: 2px solid #5bcce0;
    border-radius: 16px;
    padding: 16px 28px;
    font-size: 18px;
    font-weight: bold;
    color: #0a5566;
}

.exchange-balance-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.exchange-bal-icon {
    font-size: 22px;
}

.exchange-arrow {
    font-size: 22px;
    color: #5bcce0;
}

#exchange-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.exchange-btn {
    background: linear-gradient(135deg, #33bbdd, #0099bb);
    color: white;
    border: none;
    border-radius: 14px;
    padding: 14px 22px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 0 #006688;
    transition: all 0.15s;
    min-width: 90px;
    text-align: center;
    line-height: 1.4;
}

.exchange-btn span {
    font-size: 12px;
    opacity: 0.85;
}

.exchange-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 0 #006688;
}

.exchange-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #006688;
}

.exchange-btn:disabled {
    background: #aaa;
    box-shadow: 0 4px 0 #888;
    cursor: not-allowed;
    transform: none;
}

.loc-icon {
    font-size: 48px;
    margin-bottom: 10px;
}

.loc-name {
    font-size: 20px;
    font-weight: bold;
    color: #4a2c0a;
    margin-bottom: 8px;
}

.loc-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}

/* 방사능 구역은 약간 초록 느낌 */
#loc-radiation {
    border-color: #7db83a;
    box-shadow: 0 6px 0 #4a7010, 0 8px 20px rgba(0,0,0,0.2);
}

#loc-radiation:hover {
    box-shadow: 0 11px 0 #4a7010, 0 13px 28px rgba(0,0,0,0.2);
}

#loc-radiation:active {
    box-shadow: 0 2px 0 #4a7010;
}

/* 마트는 파란 느낌 */
#loc-mart {
    border-color: #5a8fc8;
    box-shadow: 0 6px 0 #2d5a8a, 0 8px 20px rgba(0,0,0,0.2);
}

#loc-mart:hover {
    box-shadow: 0 11px 0 #2d5a8a, 0 13px 28px rgba(0,0,0,0.2);
}

#loc-mart:active {
    box-shadow: 0 2px 0 #2d5a8a;
}

/* ===== 농장 화면 ===== */
#farm-screen {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.back-to-map-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    font-size: 18px;
    padding: 10px 22px;
    background: rgba(255,255,255,0.85);
    border: 3px solid #c8a96e;
    border-radius: 12px;
    cursor: pointer;
    color: #4a2c0a;
    font-weight: bold;
    z-index: 200;
    transition: all 0.15s;
}

.back-to-map-btn:hover {
    background: white;
    transform: translateY(-2px);
}

#farm-info-bar {
    position: fixed;
    top: 20px;
    right: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #4a2c0a;
    background: rgba(255,255,255,0.85);
    padding: 8px 22px;
    border-radius: 20px;
    border: 3px solid #c8a96e;
    z-index: 200;
}

/* 밭 */
#farm-field {
    width: 500px;
    height: 420px;
    background: linear-gradient(180deg, #87c44a 0%, #5aaa28 28%, #a0703a 28%, #8b5e2c 100%);
    border-radius: 24px;
    border: 6px solid #6b4010;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 24px;
    gap: 12px;
    position: relative;
}

#farm-empty-msg {
    font-size: 18px;
    color: #4a2c0a;
    background: rgba(255,255,255,0.85);
    padding: 10px 24px;
    border-radius: 14px;
    border: 2px solid #c8a96e;
}

/* ===== 사과나무 ===== */
#apple-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 나뭇잎 왕관 */
#tree-crown {
    width: 290px;
    height: 230px;
    background: radial-gradient(ellipse at 42% 45%, #72db48, #2e9a10 55%, #1a6008);
    border-radius: 50% 50% 44% 44%;
    position: relative;
    box-shadow: inset -18px -12px 28px rgba(0,0,0,0.18), 0 6px 16px rgba(0,0,0,0.2);
}

/* 나뭇잎 겹 (위쪽 볼록한 부분) */
#tree-crown::before {
    content: '';
    position: absolute;
    width: 190px;
    height: 155px;
    background: radial-gradient(ellipse at 45% 50%, #7ee050, #3ab420);
    border-radius: 50%;
    top: -35px;
    left: 52px;
    opacity: 0.85;
}

/* 나무 줄기 */
#tree-trunk {
    width: 52px;
    height: 105px;
    background: linear-gradient(90deg, #5a3010, #8b5a30 40%, #7a4a20 65%, #5a3010);
    border-radius: 4px 4px 0 0;
}

/* ===== CSS 사과 ===== */
.apple-on-tree {
    position: absolute;
    width: 52px;
    height: 62px;
    cursor: pointer;
    transform-origin: top center;
    user-select: none;
}

/* 사과 꼭지 */
.apple-stem {
    width: 5px;
    height: 13px;
    background: #6b3a10;
    border-radius: 3px;
    position: absolute;
    top: 0;
    left: 23px;
    transform: rotate(-8deg);
}

/* 사과 잎사귀 */
.apple-leaf {
    width: 17px;
    height: 11px;
    background: radial-gradient(ellipse at 40% 40%, #5ecb3a, #2e8a10);
    border-radius: 0 80% 0 80%;
    position: absolute;
    top: 1px;
    left: 27px;
    transform: rotate(30deg);
}

/* 사과 몸통 */
.apple-body {
    width: 50px;
    height: 48px;
    background: radial-gradient(circle at 35% 32%, #ff8080, #dd1111);
    border-radius: 50% 50% 46% 46%;
    position: absolute;
    bottom: 0;
    left: 1px;
    box-shadow: inset -7px -5px 12px rgba(0,0,0,0.25), 2px 4px 8px rgba(0,0,0,0.25);
}

/* 사과 빛반사 */
.apple-shine {
    width: 11px;
    height: 7px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    position: absolute;
    top: 9px;
    left: 10px;
    transform: rotate(-30deg);
}

/* 흔들림 1단계 (1번 클릭) */
@keyframes shake1 {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-9deg); }
    50% { transform: rotate(9deg); }
    80% { transform: rotate(-5deg); }
}

/* 흔들림 2단계 (2번 클릭) */
@keyframes shake2 {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-16deg); }
    35% { transform: rotate(16deg); }
    55% { transform: rotate(-13deg); }
    75% { transform: rotate(13deg); }
    90% { transform: rotate(-6deg); }
}

/* 떨어지는 애니메이션 (3번 클릭 = 수확!) */
@keyframes fallDown {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(320px) rotate(210deg); opacity: 0; }
}

/* ===== 방사능 오염구역 화면 ===== */
#radiation-screen {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, rgba(80,180,30,0.18) 0%, transparent 70%);
}

#radiation-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding-top: 60px;
}

#radiation-title {
    font-size: 34px;
    color: #4a2c0a;
    text-shadow: 0 0 10px rgba(120,200,30,0.5);
}

#radiation-desc {
    font-size: 16px;
    color: #555;
    text-align: center;
    line-height: 1.7;
}

#upgrade-list {
    display: grid;
    grid-template-columns: repeat(4, 200px);
    gap: 20px;
    max-height: 460px;
    overflow-y: auto;
    margin-top: 10px;
    padding: 4px 8px 8px;
}

/* 업그레이드 카드 */
.upgrade-card {
    width: 200px;
    height: 270px;
    background: rgba(255,255,255,0.88);
    border: 4px solid #7db83a;
    border-radius: 20px;
    padding: 22px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    box-shadow: 0 5px 16px rgba(0,0,0,0.12);
}

.upgrade-card-icon {
    font-size: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}

.upgrade-card-icon .blueberry-icon-wrap {
    transform: scale(1.4);
    transform-origin: center;
}

.upgrade-card-icon .teal-apple,
.upgrade-card-icon .stone-apple {
    width: 52px;
    height: 62px;
    position: relative;
}

.upgrade-card-name {
    font-size: 20px;
    font-weight: bold;
    color: #2a5c0a;
}

.upgrade-card-desc {
    font-size: 13px;
    color: #666;
    text-align: center;
    line-height: 1.5;
    flex: 1;
    overflow-y: auto;
}

.upgrade-card-price {
    font-size: 16px;
    font-weight: bold;
    color: #c07020;
}

.upgrade-buy-btn {
    font-size: 15px;
    padding: 9px 22px;
    background: linear-gradient(135deg, #7db83a, #5a9e20);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 4px 0 #3a7010;
    transition: all 0.1s;
    width: 100%;
}

.upgrade-buy-btn:hover { transform: translateY(-2px); }
.upgrade-buy-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #3a7010; }

.upgrade-buy-btn:disabled {
    background: #bbb;
    box-shadow: 0 4px 0 #888;
    cursor: default;
    transform: none;
}

/* ===== 방사능 레벨업 섹션 ===== */
.radiation-levelup-section {
    width: 100%;
    max-width: 500px;
    background: rgba(120, 200, 30, 0.1);
    border: 3px dashed #7db83a;
    border-radius: 20px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
}

.levelup-title {
    font-size: 20px;
    font-weight: bold;
    color: #2a5c0a;
}

.levelup-desc {
    font-size: 13px;
    color: #555;
    text-align: center;
    line-height: 1.6;
}

.levelup-ingredients {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.levelup-ingredient {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.85);
    border: 2px solid #ccc;
    border-radius: 14px;
    padding: 10px 14px;
}

.levelup-ingredient.enough {
    border-color: #5aaa28;
}

.levelup-ingredient.not-enough {
    border-color: #dd4444;
}

.levelup-ingredient-icon {
    width: 36px;
    height: 46px;
    position: relative;
    transform: scale(0.78);
    transform-origin: center;
    flex-shrink: 0;
}

.levelup-ingredient-icon.carrot-icon-wrap,
.levelup-ingredient-icon.hearty-carrot-wrap {
    width: 50px;
    height: 78px;
}

.levelup-ingredient-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.levelup-ingredient-name {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.levelup-ingredient-count {
    font-size: 13px;
    color: #666;
}

.levelup-ingredient.enough .levelup-ingredient-count {
    color: #2a8a10;
    font-weight: bold;
}

.levelup-ingredient.not-enough .levelup-ingredient-count {
    color: #cc3333;
    font-weight: bold;
}

.levelup-btn {
    padding: 12px 32px;
    font-size: 17px;
    font-weight: bold;
    background: linear-gradient(135deg, #88dd22, #55aa00);
    color: white;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 5px 0 #3a7a00;
    transition: all 0.1s;
}

.levelup-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 #3a7a00;
}

.levelup-btn:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #3a7a00;
}

.levelup-btn:disabled {
    background: #bbb;
    box-shadow: 0 5px 0 #888;
    cursor: default;
}

.radiation-levelup-section.max-level {
    border-color: #f0b030;
    background: rgba(255, 200, 50, 0.1);
}

.max-level .levelup-title {
    color: #b07a10;
}

/* ===== 밭 전환 화살표 ===== */
#field-selector {
    display: flex;
    align-items: center;
    gap: 18px;
    position: absolute;
    top: 210px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.82);
    border: 3px solid #c8a96e;
    border-radius: 20px;
    padding: 8px 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    z-index: 10;
}

#field-name-display {
    font-size: 18px;
    font-weight: bold;
    color: #4a2c0a;
    min-width: 110px;
    text-align: center;
}

.field-arrow-btn {
    font-size: 20px;
    background: #f0a020;
    color: white;
    border: none;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.1s;
}

.field-arrow-btn:hover { background: #d08010; }
.field-arrow-btn:active { background: #b06000; }

/* ===== 당근 ===== */
.carrot-on-field {
    position: absolute;
    width: 50px;
    height: 78px;
    cursor: pointer;
    transform-origin: bottom center;
    user-select: none;
    transition: filter 0.1s;
}

.carrot-on-field:hover { filter: brightness(1.12); }

/* 당근 잎사귀 묶음 */
.carrot-leaves {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
    align-items: flex-end;
}

.carrot-leaf {
    width: 9px;
    background: linear-gradient(180deg, #7ee050, #2e9a10);
    border-radius: 50% 50% 0 0;
    transform-origin: bottom center;
}
.carrot-leaf:nth-child(1) { height: 20px; transform: rotate(-22deg); }
.carrot-leaf:nth-child(2) { height: 26px; }
.carrot-leaf:nth-child(3) { height: 20px; transform: rotate(22deg); }

/* 당근 몸통 */
.carrot-body {
    width: 34px;
    height: 52px;
    background: radial-gradient(ellipse at 38% 28%, #ffcc60, #ff7800);
    border-radius: 40% 40% 15% 15% / 20% 20% 80% 80%;
    clip-path: polygon(12% 0%, 88% 0%, 100% 15%, 50% 100%, 0% 15%);
    position: absolute;
    bottom: 0;
    left: 8px;
    box-shadow: inset -5px -4px 10px rgba(0,0,0,0.18);
}

.carrot-shine {
    width: 7px;
    height: 15px;
    background: rgba(255,255,255,0.38);
    border-radius: 50%;
    position: absolute;
    top: 8px;
    left: 10px;
    transform: rotate(-12deg);
}

@keyframes carrotShake1 {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

@keyframes carrotShake2 {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-18deg); }
    40% { transform: rotate(18deg); }
    65% { transform: rotate(-14deg); }
    85% { transform: rotate(14deg); }
}

@keyframes carrotPull {
    0%   { transform: translateY(0);    opacity: 1; }
    40%  { transform: translateY(-30px); opacity: 1; }
    100% { transform: translateY(-120px); opacity: 0; }
}

/* ===== 돈 표시 (오른쪽 위) ===== */
#money-display {
    position: fixed;
    top: 20px;
    right: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #4a2c0a;
    background: rgba(255, 255, 255, 0.88);
    padding: 8px 20px;
    border-radius: 20px;
    border: 3px solid #f0c020;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    z-index: 100;
    display: none; /* 게임 화면에서만 보임 */
}

#shard-display {
    position: fixed;
    top: 76px;
    right: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #0a5566;
    background: rgba(255, 255, 255, 0.88);
    padding: 6px 18px;
    border-radius: 16px;
    border: 2px solid #5bcce0;
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
    z-index: 100;
    display: none; /* 게임 화면에서만 보임 */
}

/* ===== 마트 화면 ===== */
#mart-screen {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#mart-content {
    display: flex;
    align-items: flex-end;
    gap: 50px;
}

/* NPC */
#mart-npc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#npc-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#npc-hat {
    width: 60px;
    height: 22px;
    background: #1a3a6e;
    border-radius: 4px 4px 0 0;
    position: relative;
    margin-bottom: -2px;
    z-index: 1;
}

#npc-hat::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -8px;
    width: 76px;
    height: 8px;
    background: #1a3a6e;
    border-radius: 4px;
}

#npc-head {
    width: 64px;
    height: 64px;
    background: radial-gradient(circle at 40% 38%, #ffd5a8, #e8a870);
    border-radius: 50%;
    position: relative;
    box-shadow: inset -4px -4px 10px rgba(0,0,0,0.1);
}

#npc-eye-l, #npc-eye-r {
    width: 10px;
    height: 10px;
    background: #333;
    border-radius: 50%;
    position: absolute;
    top: 22px;
}
#npc-eye-l { left: 14px; }
#npc-eye-r { right: 14px; }

#npc-mouth {
    width: 22px;
    height: 10px;
    border: 3px solid #c07040;
    border-top: none;
    border-radius: 0 0 12px 12px;
    position: absolute;
    bottom: 14px;
    left: 21px;
}

#npc-body {
    width: 70px;
    height: 80px;
    background: linear-gradient(180deg, #2a5aaa, #1a3a7a);
    border-radius: 8px 8px 4px 4px;
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 10px;
}

#npc-tie {
    width: 14px;
    height: 40px;
    background: #e04040;
    clip-path: polygon(50% 0%, 100% 30%, 70% 100%, 30% 100%, 0% 30%);
}

#npc-legs {
    display: flex;
    gap: 10px;
}

.npc-leg {
    width: 22px;
    height: 36px;
    background: #1a3a6e;
    border-radius: 0 0 6px 6px;
}

/* NPC 말풍선 */
#npc-speech {
    background: white;
    border: 3px solid #5aaa40;
    border-radius: 16px;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: bold;
    color: #333;
    position: relative;
    max-width: 180px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

#npc-speech::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-bottom-color: #5aaa40;
}

#npc-speech::after {
    content: '';
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: white;
}

/* 판매 패널 */
#sell-panel {
    background: rgba(255, 255, 255, 0.88);
    border: 4px solid #c8a96e;
    border-radius: 20px;
    padding: 22px;
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

#sell-title {
    font-size: 20px;
    font-weight: bold;
    color: #4a2c0a;
    text-align: center;
}

#sell-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 260px;
    overflow-y: auto;
}

/* 판매 아이템 카드 */
.sell-item-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,248,220,0.8);
    border-radius: 14px;
    padding: 10px 14px;
    border: 2px solid #e8c98e;
}

.sell-item-icon {
    width: 52px;
    height: 62px;
    position: relative;
    transform: scale(0.85);
    transform-origin: center;
    flex-shrink: 0;
}

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

.sell-item-name {
    font-size: 17px;
    font-weight: bold;
    color: #4a2c0a;
}

.sell-item-detail {
    font-size: 13px;
    color: #888;
}

/* +/- 개수 선택 */
.sell-qty {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qty-btn {
    width: 30px;
    height: 30px;
    font-size: 18px;
    font-weight: bold;
    background: #f0a020;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s;
}

.qty-btn:hover { background: #d08010; }
.qty-btn:active { background: #b06000; }

.qty-num {
    font-size: 18px;
    font-weight: bold;
    color: #4a2c0a;
    min-width: 28px;
    text-align: center;
}

/* 빈 메시지 */
.sell-empty {
    text-align: center;
    color: #aaa;
    font-size: 15px;
    padding: 16px 0;
}

#sell-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 2px solid #e8c98e;
    padding-top: 12px;
    gap: 12px;
}

#sell-total {
    font-size: 16px;
    color: #4a2c0a;
}

#sell-btn {
    font-size: 16px;
    padding: 10px 22px;
    background: linear-gradient(135deg, #f0a020, #ffc040);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 4px 0 #b06000;
    transition: all 0.1s;
}

#sell-btn:hover { background: linear-gradient(135deg, #ffc040, #ffd060); transform: translateY(-2px); }
#sell-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #b06000; }

/* ===== 도감 버튼 ===== */
#dex-btn {
    position: fixed;
    bottom: 94px;
    right: 20px;
    font-size: 28px;
    width: 62px;
    height: 62px;
    background: linear-gradient(135deg, #3a6e2c, #5aaa40);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 5px 0 #1e4010, 0 7px 16px rgba(0,0,0,0.3);
    z-index: 300;
    transition: all 0.1s;
}

#dex-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 0 #1e4010, 0 10px 20px rgba(0,0,0,0.3);
}

#dex-btn:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 #1e4010;
}

/* ===== 도감 모달 ===== */
#dex-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 400;
}

#dex-panel {
    width: 700px;
    max-width: 92vw;
    max-height: 82vh;
    background: rgba(240, 255, 235, 0.98);
    border: 5px solid #5aaa40;
    border-radius: 24px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#dex-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 26px;
    background: linear-gradient(135deg, #3a8e2c, #5aaa40);
    font-size: 26px;
    font-weight: bold;
    color: white;
    flex-shrink: 0;
}

#dex-close-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    font-size: 20px;
    color: white;
    cursor: pointer;
    font-weight: bold;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: background 0.15s;
}

#dex-close-btn:hover {
    background: rgba(255,255,255,0.35);
}

#dex-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
}

#dex-items {
    padding: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    overflow-y: auto;
    justify-content: flex-start;
    max-height: 760px;
}

/* 도감 카드 */
.dex-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.8);
    border-radius: 16px;
    padding: 18px 14px 14px;
    border: 3px solid #a8d898;
    width: 130px;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.dex-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 7px 18px rgba(0,0,0,0.15);
    border-color: #5aaa40;
}

.dex-card.selected {
    border-color: #3a8e2c;
    background: rgba(220, 255, 210, 0.9);
    box-shadow: 0 4px 14px rgba(58,142,44,0.3);
}

/* 발견 못 한 카드 — 검은 실루엣 */
.dex-card.undiscovered {
    cursor: default;
}

.dex-card.undiscovered:hover {
    transform: none;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    border-color: #a8d898;
}

.dex-icon-wrap {
    width: 60px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.dex-card-icon {
    width: 52px;
    height: 62px;
    position: relative;
    transform: scale(1.2);
    transform-origin: center;
}

/* 미발견: 검은 실루엣 */
.dex-card.undiscovered .dex-card-icon {
    filter: brightness(0);
}

/* 야광 배추/빛나는 당근은 빛 애니메이션이 있어서 따로 막아줘야 함 */
.dex-card.undiscovered .dex-card-icon.glow-cabbage-wrap,
.dex-card.undiscovered .dex-card-icon.glowing-carrot-wrap {
    animation: none;
    filter: brightness(0);
}

.dex-card.undiscovered .dex-card-icon.glowing-carrot-wrap .carrot-body {
    animation: none;
}

.dex-card-name {
    font-size: 16px;
    font-weight: bold;
    color: #2a5c1a;
}

.dex-card.undiscovered .dex-card-name {
    color: #888;
}

.dex-card-price {
    font-size: 13px;
    font-weight: bold;
    color: #c07020;
}

.dex-card.undiscovered .dex-card-price {
    color: #bbb;
}

/* 설명 박스 */
#dex-desc-box {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 24px;
    background: rgba(200, 240, 190, 0.7);
    border-top: 3px solid #a8d898;
    flex-shrink: 0;
}

#dex-desc-icon {
    width: 52px;
    height: 62px;
    position: relative;
    transform: scale(1.1);
    transform-origin: center;
    flex-shrink: 0;
    margin: 0 10px;
}

#dex-desc-icon.carrot-icon-wrap {
    width: 50px;
    height: 78px;
}

#dex-desc-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#dex-desc-name {
    font-size: 20px;
    font-weight: bold;
    color: #2a5c1a;
}

#dex-desc-text {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
}

/* ===== 가방 버튼 ===== */
#bag-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 30px;
    width: 62px;
    height: 62px;
    background: linear-gradient(135deg, #8b5e2c, #c8a96e);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 5px 0 #5a3010, 0 7px 16px rgba(0,0,0,0.3);
    z-index: 300;
    transition: all 0.1s;
}

#bag-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 0 #5a3010, 0 10px 20px rgba(0,0,0,0.3);
}

#bag-btn:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 #5a3010;
}

/* ===== 인벤토리 모달 ===== */
#bag-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 400;
}

#bag-panel {
    width: 680px;
    max-width: 92vw;
    max-height: 80vh;
    background: rgba(255, 248, 220, 0.98);
    border: 5px solid #c8a96e;
    border-radius: 24px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#bag-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 26px;
    background: linear-gradient(135deg, #c8a96e, #e8c98e);
    font-size: 26px;
    font-weight: bold;
    color: #4a2c0a;
    flex-shrink: 0;
}

#bag-close-btn {
    background: rgba(0,0,0,0.12);
    border: none;
    font-size: 20px;
    color: #4a2c0a;
    cursor: pointer;
    font-weight: bold;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: background 0.15s;
}

#bag-close-btn:hover {
    background: rgba(0,0,0,0.22);
}

#bag-items {
    padding: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    overflow-y: auto;
    justify-content: flex-start;
}

/* 빈 가방 메시지 */
.bag-empty {
    width: 100%;
    text-align: center;
    color: #999;
    font-size: 20px;
    padding: 40px 0;
}

/* 아이템 카드 */
.bag-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.75);
    border-radius: 18px;
    padding: 22px 18px 18px;
    border: 3px solid #e8c98e;
    width: 150px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 가방/도감 아이콘 공통 */
.bag-item-icon {
    width: 52px;
    height: 62px;
    position: relative;
    transform: scale(1.6);
    transform-origin: center;
    margin: 10px 0 22px;
}

/* 당근 아이콘 — carrot-on-field와 동일한 구조 */
.carrot-icon-wrap {
    width: 50px;
    height: 78px;
}

.bag-item-name {
    font-size: 18px;
    font-weight: bold;
    color: #4a2c0a;
}

.bag-item-count {
    font-size: 22px;
    font-weight: bold;
    color: #c87020;
}

/* 사용 가능한 아이템 */
.bag-item.usable {
    cursor: pointer;
}

.bag-item.usable:hover {
    border-color: #5aaa40;
    background: rgba(230, 255, 220, 0.8);
}

/* 선택된 아이템 */
.bag-item.selected {
    border-color: #5aaa40;
    background: rgba(200, 255, 190, 0.85);
    box-shadow: 0 0 0 3px rgba(90,170,64,0.3);
}

/* 가방 사용 버튼 영역 */
#bag-use-section {
    padding: 14px 28px 20px;
    border-top: 2px solid #e8c98e;
}

#bag-use-btn {
    width: 100%;
    font-size: 18px;
    padding: 12px;
    background: linear-gradient(135deg, #5aaa40, #3a8e20);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 4px 0 #1e6010;
    transition: all 0.1s;
}

#bag-use-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #1e6010; }
#bag-use-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #1e6010; }

/* 방사능 주사 이모지 아이콘 */
.bag-item-emoji {
    font-size: 52px;
    line-height: 1;
    margin: 4px 0 8px;
}

/* ===== 작물 선택 모달 ===== */
#crop-select-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
}

#crop-select-panel {
    width: 420px;
    max-width: 90vw;
    background: rgba(240, 255, 235, 0.98);
    border: 5px solid #5aaa40;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

#crop-select-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    background: linear-gradient(135deg, #3a8e2c, #5aaa40);
    font-size: 20px;
    font-weight: bold;
    color: white;
}

.crop-select-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 18px;
    font-weight: bold;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
}

#crop-select-desc {
    text-align: center;
    padding: 14px 20px 6px;
    font-size: 15px;
    color: #555;
}

#crop-select-items {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 22px 24px;
    justify-content: center;
}

/* 작물 선택 카드 */
.crop-select-card {
    width: 130px;
    background: rgba(255,255,255,0.85);
    border: 3px solid #a8d898;
    border-radius: 16px;
    padding: 16px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.crop-select-card:hover {
    transform: translateY(-4px);
    border-color: #3a8e2c;
    box-shadow: 0 7px 18px rgba(0,0,0,0.15);
}

.crop-select-card:active { transform: translateY(1px); }

.crop-select-icon {
    width: 52px;
    height: 62px;
    position: relative;
    transform: scale(1.1);
    transform-origin: center;
    margin-bottom: 6px;
}

.crop-select-icon.carrot-icon-wrap {
    width: 50px;
    height: 78px;
}

.crop-select-name {
    font-size: 16px;
    font-weight: bold;
    color: #2a5c1a;
}

/* 실험실 지도 카드 - 보라 느낌 */
#loc-lab {
    border-color: #9966dd;
    box-shadow: 0 6px 0 #5533aa, 0 8px 20px rgba(0,0,0,0.2);
}

#loc-lab:hover {
    box-shadow: 0 11px 0 #5533aa, 0 13px 28px rgba(0,0,0,0.2);
}

#loc-lab:active {
    box-shadow: 0 2px 0 #5533aa;
}

/* ===== 실험실 화면 ===== */
#lab-screen {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, rgba(150,100,255,0.12) 0%, transparent 70%);
}

#lab-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding-top: 60px;
}

#lab-title {
    font-size: 34px;
    color: #4a2c0a;
    text-shadow: 0 0 10px rgba(150,100,255,0.3);
}

#lab-desc {
    font-size: 16px;
    color: #555;
    text-align: center;
    line-height: 1.7;
}

#recipe-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 10px;
}

/* 레시피 카드 */
.recipe-card {
    width: 200px;
    background: rgba(255,255,255,0.88);
    border: 4px solid #9966dd;
    border-radius: 20px;
    padding: 20px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-shadow: 0 5px 16px rgba(0,0,0,0.12);
}

.recipe-icon {
    font-size: 48px;
    line-height: 1;
}

.recipe-name {
    font-size: 18px;
    font-weight: bold;
    color: #4a2c0a;
}

.recipe-ingredients {
    font-size: 13px;
    color: #777;
    text-align: center;
    line-height: 1.6;
}

.recipe-price {
    font-size: 14px;
    font-weight: bold;
    color: #c07020;
}

.recipe-has {
    font-size: 12px;
    color: #999;
    text-align: center;
    line-height: 1.6;
}

.recipe-do-btn {
    font-size: 15px;
    padding: 9px 22px;
    background: linear-gradient(135deg, #9966dd, #7744bb);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 4px 0 #5533aa;
    transition: all 0.1s;
    width: 100%;
}

.recipe-do-btn:hover { transform: translateY(-2px); }
.recipe-do-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #5533aa; }
.recipe-do-btn:disabled {
    background: #bbb;
    box-shadow: 0 4px 0 #888;
    cursor: default;
    transform: none;
}

/* ===== 실험실 케이지 ===== */
#lab-cages {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 10px;
}

.lab-cage-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.lab-cage {
    width: 150px;
    height: 165px;
    background: rgba(255,255,255,0.7);
    border: 4px dashed #9966dd;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.08);
    transition: border-color 0.2s, background 0.2s;
}

.lab-cage.filled {
    border-style: solid;
    background: rgba(240, 235, 255, 0.85);
}

.cage-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.cage-empty-text {
    font-size: 15px;
    color: #bbb;
}

.cage-item-name {
    font-size: 15px;
    font-weight: bold;
    color: #4a2c0a;
}

/* 케이지 안 아이콘 */
.cage-item-icon {
    position: relative;
    width: 52px;
    height: 62px;
    transform: scale(1.4);
    transform-origin: center;
    margin-bottom: 6px;
}

.cage-item-icon.carrot-icon-wrap {
    width: 50px;
    height: 78px;
}

.cage-item-icon.cabbage-icon-wrap {
    width: 52px;
    height: 62px;
}

.cage-item-icon.potato-icon-wrap {
    width: 56px;
    height: 62px;
}

.cage-item-icon.blueberry-icon-wrap,
.cage-item-icon.yellow-berry-icon-wrap {
    width: 34px;
    height: 34px;
}

.cage-action-btn {
    font-size: 15px;
    padding: 8px 20px;
    background: linear-gradient(135deg, #9966dd, #7744bb);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 3px 0 #5533aa;
    transition: all 0.1s;
}

.cage-action-btn:hover { transform: translateY(-2px); }
.cage-action-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #5533aa; }
.cage-action-btn.clear-btn {
    background: linear-gradient(135deg, #dd6666, #bb4444);
    box-shadow: 0 3px 0 #883333;
}
.cage-action-btn.clear-btn:active { box-shadow: 0 1px 0 #883333; }

.lab-plus {
    font-size: 44px;
    font-weight: bold;
    color: #9966dd;
    line-height: 1;
    margin-bottom: 42px;
}

#combine-btn {
    margin-top: 22px;
    font-size: 22px;
    padding: 14px 52px;
    background: linear-gradient(135deg, #9966dd, #7744bb);
    color: white;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 6px 0 #5533aa, 0 8px 20px rgba(0,0,0,0.2);
    transition: all 0.1s;
}

#combine-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #5533aa; }
#combine-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #5533aa; }
#combine-btn:disabled {
    background: #ccc;
    box-shadow: 0 4px 0 #aaa;
    cursor: default;
    transform: none;
}

/* ===== 청사과 ===== */
.green-apple .apple-body {
    background: radial-gradient(circle at 35% 32%, #c8ee88, #228a10);
}
.green-apple .apple-stem { background: #5a3010; }
.green-apple .apple-leaf {
    background: radial-gradient(ellipse at 40% 40%, #44cc22, #1a6010);
}
.green-apple .apple-shine { background: rgba(255,255,255,0.45); }

/* 청사과 나무 (일반 사과나무와 동일한 레이아웃) */
#green-apple-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 청사과 나무 왕관 - 더 진한 초록 */
#green-tree-crown {
    width: 290px;
    height: 230px;
    background: radial-gradient(ellipse at 42% 45%, #44cc22, #1a7800 55%, #0e5000);
    border-radius: 50% 50% 44% 44%;
    position: relative;
    box-shadow: inset -18px -12px 28px rgba(0,0,0,0.18), 0 6px 16px rgba(0,0,0,0.2);
}

#green-tree-crown::before {
    content: '';
    position: absolute;
    width: 190px;
    height: 155px;
    background: radial-gradient(ellipse at 45% 50%, #55dd30, #2a9a10);
    border-radius: 50%;
    top: -35px;
    left: 52px;
    opacity: 0.85;
}

/* 나무 줄기 (공통) */
.tree-trunk-div {
    width: 52px;
    height: 105px;
    background: linear-gradient(90deg, #5a3010, #8b5a30 40%, #7a4a20 65%, #5a3010);
    border-radius: 4px 4px 0 0;
}

/* ===== 딱딱한 주황색 사과 ===== */
.orange-apple .apple-body {
    background: radial-gradient(circle at 35% 32%, #ffdd88, #e06000);
}
.orange-apple .apple-stem { background: #5a3010; }
.orange-apple .apple-leaf {
    background: radial-gradient(ellipse at 40% 40%, #5ecb3a, #2e8a10);
}
.orange-apple .apple-shine { background: rgba(255,255,255,0.45); }

/* ===== 보라색 사과 ===== */
.purple-apple .apple-body {
    background: radial-gradient(circle at 35% 32%, #dd99ff, #7722cc);
}
.purple-apple .apple-stem { background: #4a2060; }
.purple-apple .apple-leaf {
    background: radial-gradient(ellipse at 40% 40%, #9955dd, #551188);
}
.purple-apple .apple-shine { background: rgba(255,255,255,0.45); }

/* ===== 화약맛 사과 - 어두운 사과 ===== */
.dark-apple .apple-body {
    background: radial-gradient(circle at 35% 32%, #888, #222);
}
.dark-apple .apple-stem { background: #333; }
.dark-apple .apple-leaf {
    background: radial-gradient(ellipse at 40% 40%, #445533, #223311);
}
.dark-apple .apple-shine { background: rgba(255,255,255,0.2); }

/* ===== 감자 ===== */
.potato-icon-wrap {
    width: 56px;
    height: 62px;
    position: relative;
}

/* 감자 몸통 - 울퉁불퉁한 타원형 */
.potato-body {
    width: 54px;
    height: 40px;
    background: radial-gradient(ellipse at 38% 34%, #e2b96a, #b87830 55%, #7a4e14);
    border-radius: 55% 45% 48% 52% / 44% 50% 46% 52%;
    position: absolute;
    top: 11px;
    left: 1px;
    box-shadow: inset -9px -6px 15px rgba(0,0,0,0.28), 2px 5px 10px rgba(0,0,0,0.22);
}

/* 감자 눈 1 */
.potato-body::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(80,40,5,0.35);
    border-radius: 50%;
    top: 9px;
    left: 9px;
    box-shadow: 0 0 0 2px rgba(60,30,5,0.15);
}

/* 감자 눈 2 */
.potato-body::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    background: rgba(80,40,5,0.28);
    border-radius: 50%;
    top: 17px;
    left: 32px;
    box-shadow: 0 0 0 2px rgba(60,30,5,0.12);
}

.potato-shine {
    width: 14px;
    height: 8px;
    background: rgba(255,255,255,0.32);
    border-radius: 50%;
    position: absolute;
    top: 6px;
    left: 10px;
    transform: rotate(-20deg);
}

/* ===== 돌사과 ===== */
.stone-apple .apple-body {
    background: radial-gradient(circle at 35% 32%, #dddddd, #888888 55%, #555555);
}
.stone-apple .apple-stem { background: #444444; }
.stone-apple .apple-leaf {
    background: radial-gradient(ellipse at 40% 40%, #aaaaaa, #666666);
}
.stone-apple .apple-shine { background: rgba(255,255,255,0.3); }

/* 돌사과나무 */
#stone-apple-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#stone-apple-crown {
    width: 290px;
    height: 230px;
    background: radial-gradient(ellipse at 42% 45%, #999999, #666666 55%, #444444);
    border-radius: 50% 50% 44% 44%;
    position: relative;
    box-shadow: inset -18px -12px 28px rgba(0,0,0,0.25), 0 6px 16px rgba(0,0,0,0.3);
}

#stone-apple-crown::before {
    content: '';
    position: absolute;
    width: 190px;
    height: 155px;
    background: radial-gradient(ellipse at 45% 50%, #bbbbbb, #888888);
    border-radius: 50%;
    top: 28px;
    left: 52px;
    opacity: 0.7;
}

.stone-tree-trunk {
    width: 52px;
    height: 105px;
    background: linear-gradient(90deg, #3a3020, #6a5a40 40%, #5a4a30 65%, #3a3020);
    border-radius: 0 0 8px 8px;
}

/* ===== 청록사과 ===== */
.teal-apple .apple-body {
    background: radial-gradient(circle at 35% 32%, #aafff0, #0aaa99 55%, #076655);
}
.teal-apple .apple-stem { background: #2a6644; }
.teal-apple .apple-leaf {
    background: radial-gradient(ellipse at 40% 40%, #44eedd, #0a8877);
}
.teal-apple .apple-shine { background: rgba(255,255,255,0.45); }

/* 청록사과 나무 */
#teal-apple-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#teal-tree-crown {
    width: 290px;
    height: 230px;
    background: radial-gradient(ellipse at 42% 45%, #22ddcc, #0a8877 55%, #065544);
    border-radius: 50% 50% 44% 44%;
    position: relative;
    box-shadow: inset -18px -12px 28px rgba(0,0,0,0.18), 0 6px 16px rgba(0,0,0,0.2);
}

#teal-tree-crown::before {
    content: '';
    position: absolute;
    width: 190px;
    height: 155px;
    background: radial-gradient(ellipse at 45% 50%, #33eecc, #0aaa99);
    border-radius: 50%;
    top: -35px;
    left: 52px;
    opacity: 0.85;
}

/* 청록사과 나무 기둥 (옅은 녹색) */
.teal-tree-trunk-div {
    width: 52px;
    height: 105px;
    background: linear-gradient(90deg, #3a6644, #66aa77 40%, #559966 65%, #3a6644);
    border-radius: 4px 4px 0 0;
}

/* ===== 붉은 감자 ===== */
.red-potato-wrap {
    width: 56px;
    height: 62px;
    position: relative;
}

/* ===== 연두감자 ===== */
.lime-potato-wrap {
    width: 56px;
    height: 62px;
    position: relative;
}

.lime-potato-wrap .potato-body {
    background: radial-gradient(ellipse at 38% 34%, #ccff66, #88cc22 55%, #558800);
    box-shadow: inset -9px -6px 15px rgba(0,0,0,0.22), 2px 5px 10px rgba(0,0,0,0.22);
}

.lime-potato-wrap .potato-body::before {
    background: rgba(30,70,5,0.30);
    box-shadow: 0 0 0 2px rgba(20,60,5,0.15);
}

.lime-potato-wrap .potato-body::after {
    background: rgba(30,70,5,0.22);
    box-shadow: 0 0 0 2px rgba(20,60,5,0.12);
}

/* 보라색 버섯 돌기 */
.lime-shroom {
    position: absolute;
    width: 13px;
    height: 10px;
    background: radial-gradient(ellipse at 50% 60%, #dd88ff, #9922cc 60%, #660099);
    border-radius: 50% 50% 25% 25%;
    box-shadow: inset -2px -3px 5px rgba(0,0,0,0.3);
}

.lime-shroom::before {
    content: '';
    position: absolute;
    width: 5px;
    height: 7px;
    background: linear-gradient(180deg, #aa44cc, #882299);
    border-radius: 0 0 3px 3px;
    left: 4px;
    top: 7px;
}

.lime-shroom.s1 { top:  1px; left:  6px; }
.lime-shroom.s2 { top: -3px; left: 20px; }
.lime-shroom.s3 { top:  1px; left: 33px; }

.red-potato-wrap .potato-body {
    background: radial-gradient(ellipse at 38% 34%, #ff9988, #cc3322 55%, #881110);
    box-shadow: inset -9px -6px 15px rgba(0,0,0,0.28), 2px 5px 10px rgba(0,0,0,0.22);
}

.red-potato-wrap .potato-body::before {
    background: rgba(100,10,5,0.35);
    box-shadow: 0 0 0 2px rgba(80,10,5,0.15);
}

.red-potato-wrap .potato-body::after {
    background: rgba(100,10,5,0.28);
    box-shadow: 0 0 0 2px rgba(80,10,5,0.12);
}

/* ===== 든든한 당근 ===== */
.hearty-carrot-wrap {
    width: 58px;
    height: 78px;
    position: relative;
}

/* 잎사귀 조금 더 굵게 */
.hearty-carrot-wrap .carrot-leaf {
    width: 11px;
}
.hearty-carrot-wrap .carrot-leaf:nth-child(1) { height: 22px; }
.hearty-carrot-wrap .carrot-leaf:nth-child(2) { height: 28px; }
.hearty-carrot-wrap .carrot-leaf:nth-child(3) { height: 22px; }

/* 황토색의 두꺼운 몸통 */
.hearty-carrot-wrap .carrot-body {
    width: 44px;
    height: 54px;
    background: radial-gradient(ellipse at 38% 28%, #e8cc70, #c07820);
    left: 7px;
}

/* ===== 빛나는 당근 ===== */
.glowing-carrot-wrap {
    width: 50px;
    height: 78px;
    position: relative;
    animation: carrotGlow 1.5s ease-in-out infinite;
}

@keyframes carrotGlow {
    0%, 100% { filter: drop-shadow(0 0 5px #ffdd00) drop-shadow(0 0 12px #ffaa00); }
    50%       { filter: drop-shadow(0 0 11px #ffee55) drop-shadow(0 0 22px #ffcc00); }
}

.glowing-carrot-wrap .carrot-body {
    background: radial-gradient(ellipse at 38% 28%, #fff588, #ffcc00 40%, #ff8800);
    box-shadow: inset -5px -4px 10px rgba(0,0,0,0.18);
}

.glowing-carrot-wrap .carrot-leaf {
    background: radial-gradient(ellipse at 40% 30%, #ccff88, #44cc00);
}

.glowing-carrot-on-field {
    position: absolute;
}

/* ===== 연보라색 당근 ===== */
.lavender-carrot-wrap {
    width: 50px;
    height: 78px;
    position: relative;
}

.lavender-carrot-wrap .carrot-body {
    background: radial-gradient(ellipse at 38% 28%, #f0ddff, #cc88ee 40%, #8833bb);
    box-shadow: inset -5px -4px 10px rgba(0,0,0,0.18);
}

.lavender-carrot-wrap .carrot-leaf {
    background: linear-gradient(180deg, #7ee050, #2e9a10);
}

/* 감자나무 */
#potato-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 감자나무 왕관 - 올리브빛 이상한 나무 */
#potato-tree-crown {
    width: 290px;
    height: 230px;
    background: radial-gradient(ellipse at 42% 45%, #a8b84a, #5a7010 55%, #384505);
    border-radius: 50% 50% 44% 44%;
    position: relative;
    box-shadow: inset -18px -12px 28px rgba(0,0,0,0.2), 0 6px 16px rgba(0,0,0,0.2);
}

#potato-tree-crown::before {
    content: '';
    position: absolute;
    width: 190px;
    height: 155px;
    background: radial-gradient(ellipse at 45% 50%, #c0cc55, #7a9020);
    border-radius: 50%;
    top: -35px;
    left: 52px;
    opacity: 0.85;
}

.potato-on-tree {
    position: absolute;
    width: 52px;
    height: 62px;
    cursor: pointer;
    transform-origin: top center;
    user-select: none;
}

/* ===== 블루베리 아이콘 ===== */
.blueberry-icon-wrap {
    width: 34px;
    height: 34px;
    position: relative;
}

.blueberry-body {
    width: 30px;
    height: 30px;
    background: radial-gradient(circle at 35% 30%, #bb99ff, #4422bb 52%, #1a0066);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    box-shadow: inset -4px -4px 10px rgba(0,0,0,0.4), 2px 3px 7px rgba(0,0,0,0.3);
}

/* 블루베리 꼭지 자국 */
.blueberry-body::before {
    content: '';
    width: 10px;
    height: 5px;
    background: rgba(0,0,30,0.5);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 10px;
}

.blueberry-shine {
    width: 9px;
    height: 6px;
    background: rgba(255,255,255,0.45);
    border-radius: 50%;
    position: absolute;
    top: 7px;
    left: 5px;
    transform: rotate(-20deg);
}

/* ===== 블루베리나무 ===== */
#blueberry-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 덤불형 왕관 - 하단을 평평하게 해서 줄기와 자연스럽게 연결 */
#blueberry-crown {
    width: 290px;
    height: 200px;
    background:
        radial-gradient(ellipse at 22% 30%, #80c050 0%, transparent 40%),
        radial-gradient(ellipse at 76% 28%, #78b848 0%, transparent 38%),
        radial-gradient(ellipse at 50% 60%, #50961e, #2a5810 75%);
    border-radius: 46% 54% 16% 16% / 50% 46% 16% 16%;
    position: relative;
    box-shadow: inset -15px -10px 25px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.2);
}

/* 블루베리 열매 */
.blueberry-on-tree {
    position: absolute;
    width: 34px;
    height: 34px;
    cursor: pointer;
    user-select: none;
    z-index: 2;
    transition: transform 0.1s;
}

.blueberry-on-tree:hover {
    transform: scale(1.2);
}

/* ===== 포도 ===== */
.grape-icon-wrap {
    width: 57px;
    height: 69px;
    position: relative;
}

.grape-stem {
    width: 6px;
    height: 12px;
    background: #6b3a10;
    border-radius: 3px;
    position: absolute;
    top: 0;
    left: 26px;
}

/* 포도알 개별 원 */
.gc {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: absolute;
    background: radial-gradient(circle at 35% 32%, #ebbfff, #9922cc 50%, #550099 80%, #380066);
    box-shadow: inset -3px -3px 6px rgba(0,0,0,0.35);
}

/* ===== 옐로베리 아이콘 ===== */
.yellow-berry-icon-wrap {
    width: 34px;
    height: 34px;
    position: relative;
}

.yellow-berry-body {
    width: 30px;
    height: 30px;
    background: radial-gradient(circle at 35% 30%, #ffff99, #ddaa00 52%, #aa6600);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    box-shadow: inset -4px -4px 10px rgba(0,0,0,0.3), 2px 3px 7px rgba(0,0,0,0.25);
}

/* 옐로베리 꼭지 자국 */
.yellow-berry-body::before {
    content: '';
    width: 10px;
    height: 5px;
    background: rgba(80,40,0,0.4);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 10px;
}

/* ===== 레몬 아이콘 ===== */
.lemon-icon-wrap {
    width: 52px;
    height: 44px;
    position: relative;
}

.lemon-body {
    width: 46px;
    height: 28px;
    background: radial-gradient(ellipse at 38% 35%, #ffff99, #ffdd00 50%, #cc9900);
    border-radius: 50%;
    position: absolute;
    top: 8px;
    left: 3px;
    box-shadow: inset -6px -4px 12px rgba(0,0,0,0.18), 2px 4px 8px rgba(0,0,0,0.18);
}

.lemon-body::before, .lemon-body::after { display: none; }

.lemon-shine {
    width: 12px; height: 7px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    position: absolute;
    top: 5px; left: 8px;
    transform: rotate(-20deg);
}

/* 붉은 가시 - 삼각형 */
.lemon-thorn {
    position: absolute;
    width: 7px;
    height: 8px;
    background: linear-gradient(170deg, #ff5533, #991100);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.lemon-thorn.t1 { top: -6px; left:  8px; transform: rotate(-15deg); }
.lemon-thorn.t2 { top: -7px; left: 20px; }
.lemon-thorn.t3 { top: -6px; left: 33px; transform: rotate(15deg); }

/* ===== 레몬나무 ===== */
#lemon-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#lemon-crown {
    width: 290px;
    height: 220px;
    background: radial-gradient(ellipse at 42% 45%, #ffee55, #ddbb00 55%, #aa8800);
    border-radius: 50% 50% 44% 44%;
    position: relative;
    box-shadow: inset -18px -12px 28px rgba(0,0,0,0.18), 0 6px 16px rgba(0,0,0,0.2);
}

#lemon-crown::before {
    content: '';
    position: absolute;
    width: 190px; height: 155px;
    background: radial-gradient(ellipse at 45% 50%, #ffff88, #eedd00);
    border-radius: 50%;
    top: -35px; left: 52px;
    opacity: 0.85;
}

.lemon-on-tree {
    position: absolute;
    cursor: pointer;
    user-select: none;
    z-index: 2;
    transition: transform 0.1s;
}
.lemon-on-tree:hover { transform: scale(1.15); }

.lemon-tree-trunk {
    width: 52px;
    height: 105px;
    background: linear-gradient(90deg, #5a3010, #8b5a30 40%, #7a4a20 65%, #5a3010);
    border-radius: 0 0 8px 8px;
}

/* 청포도 알 */
.ggc {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: absolute;
    background: radial-gradient(circle at 35% 32%, #eeffcc, #88cc22 50%, #448800 80%, #2a5500);
    box-shadow: inset -3px -3px 6px rgba(0,0,0,0.30);
}

/* 2-3-2 배열 — 가로 13px, 세로 11px 간격 (겹침) */
.g1 { top: 12px; left: 12px; }
.g2 { top: 12px; left: 25px; }
.g3 { top: 23px; left:  5px; }
.g4 { top: 23px; left: 18px; }
.g5 { top: 23px; left: 31px; }
.g6 { top: 34px; left: 12px; }
.g7 { top: 34px; left: 25px; }

/* 포도나무 */
#grape-tree, #green-grape-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#grape-crown, #green-grape-crown {
    width: 290px;
    height: 220px;
    border-radius: 50% 50% 44% 44%;
    position: relative;
    box-shadow: inset -18px -12px 28px rgba(0,0,0,0.18), 0 6px 16px rgba(0,0,0,0.2);
}

#grape-crown {
    background: radial-gradient(ellipse at 42% 45%, #44aa33, #1a6600 55%, #0e4400);
}

#green-grape-crown {
    background: radial-gradient(ellipse at 42% 45%, #bbee44, #88cc00 55%, #5a9900);
}

#grape-crown::before, #green-grape-crown::before {
    content: '';
    position: absolute;
    width: 190px;
    height: 155px;
    border-radius: 50%;
    top: -35px;
    left: 52px;
    opacity: 0.85;
}

#grape-crown::before {
    background: radial-gradient(ellipse at 45% 50%, #55cc44, #2a8810);
}

#green-grape-crown::before {
    background: radial-gradient(ellipse at 45% 50%, #ddff66, #aadd00);
}

.grape-on-tree {
    position: absolute;
    cursor: pointer;
    user-select: none;
    z-index: 2;
    transition: transform 0.1s;
}

.grape-on-tree:hover { transform: scale(1.15); }

.grape-tree-trunk-div {
    width: 52px;
    height: 105px;
    background: linear-gradient(90deg, #5a3010, #8b5a30 40%, #7a4a20 65%, #5a3010);
    border-radius: 4px 4px 0 0;
}

/* ===== 케이지 선택 모달 ===== */
#cage-select-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
}

#cage-select-panel {
    width: 420px;
    max-width: 90vw;
    background: rgba(240, 235, 255, 0.98);
    border: 5px solid #9966dd;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

#cage-select-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    background: linear-gradient(135deg, #7744bb, #9966dd);
    font-size: 20px;
    font-weight: bold;
    color: white;
}

#cage-select-items {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px 22px 24px;
    justify-content: center;
    max-height: 52vh;
    overflow-y: auto;
}

.cage-crop-card {
    width: 120px;
    background: rgba(255,255,255,0.85);
    border: 3px solid #c8b8ee;
    border-radius: 16px;
    padding: 16px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.cage-crop-card:hover {
    transform: translateY(-4px);
    border-color: #7744bb;
    box-shadow: 0 7px 18px rgba(0,0,0,0.15);
}
.cage-crop-card:active { transform: translateY(1px); }

.cage-crop-card-icon {
    position: relative;
    width: 52px;
    height: 62px;
    transform: scale(1.1);
    transform-origin: center;
    margin-bottom: 4px;
}
.cage-crop-card-icon.carrot-icon-wrap {
    width: 50px;
    height: 78px;
}

.cage-crop-card-name {
    font-size: 15px;
    font-weight: bold;
    color: #4a2c0a;
}

.cage-crop-card-count {
    font-size: 13px;
    color: #888;
}

.cage-select-empty {
    text-align: center;
    color: #aaa;
    font-size: 16px;
    padding: 20px;
    width: 100%;
}

/* 마트 이모지 아이콘 */
.sell-item-icon.emoji-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}

/* ===== 배추 ===== */
.cabbage-on-field {
    position: absolute;
    width: 52px;
    height: 62px;
    cursor: pointer;
    transform-origin: bottom center;
    user-select: none;
    transition: filter 0.1s;
}

.cabbage-on-field:hover { filter: brightness(1.12); }

/* 배추 외부 잎 (왼쪽) */
.cabbage-outer-l {
    position: absolute;
    width: 24px;
    height: 34px;
    background: radial-gradient(ellipse at 60% 35%, #88dd44, #3a9a10);
    border-radius: 50% 10% 40% 50%;
    bottom: 6px;
    left: 0;
    transform: rotate(-20deg);
    transform-origin: right bottom;
}

/* 배추 외부 잎 (오른쪽) */
.cabbage-outer-r {
    position: absolute;
    width: 24px;
    height: 34px;
    background: radial-gradient(ellipse at 40% 35%, #88dd44, #3a9a10);
    border-radius: 10% 50% 50% 40%;
    bottom: 6px;
    right: 0;
    transform: rotate(20deg);
    transform-origin: left bottom;
}

/* 배추 몸통 */
.cabbage-body {
    width: 40px;
    height: 44px;
    background: radial-gradient(ellipse at 38% 35%, #eeffcc, #aaee55 45%, #55bb22);
    border-radius: 50% 50% 45% 45%;
    position: absolute;
    bottom: 0;
    left: 6px;
    box-shadow: inset -5px -5px 10px rgba(0,0,0,0.16), 2px 3px 7px rgba(0,0,0,0.2);
}

/* 배추 빛반사 */
.cabbage-shine {
    width: 10px;
    height: 6px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    position: absolute;
    top: 7px;
    left: 8px;
    transform: rotate(-25deg);
}

/* 배추 잎맥 */
.cabbage-vein {
    width: 2px;
    height: 22px;
    background: rgba(255,255,255,0.35);
    border-radius: 1px;
    position: absolute;
    top: 10px;
    left: 19px;
}

/* 배추 아이콘 래퍼 */
.cabbage-icon-wrap {
    width: 52px;
    height: 62px;
}

#dex-desc-icon.cabbage-icon-wrap {
    width: 52px;
    height: 62px;
}

#dex-desc-icon.potato-icon-wrap,
#dex-desc-icon.red-potato-wrap,
#dex-desc-icon.lime-potato-wrap {
    width: 56px;
    height: 62px;
}

#dex-desc-icon.lemon-icon-wrap {
    width: 52px;
    height: 44px;
}

#dex-desc-icon.hearty-carrot-wrap {
    width: 58px;
    height: 78px;
}

#dex-desc-icon.glowing-carrot-wrap {
    width: 50px;
    height: 78px;
}

#dex-desc-icon.lavender-carrot-wrap {
    width: 50px;
    height: 78px;
}

#dex-desc-icon.blueberry-icon-wrap,
#dex-desc-icon.yellow-berry-icon-wrap {
    width: 34px;
    height: 34px;
}

@keyframes cabbageShake1 {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

@keyframes cabbageShake2 {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-18deg); }
    40% { transform: rotate(18deg); }
    65% { transform: rotate(-14deg); }
    85% { transform: rotate(14deg); }
}

@keyframes cabbagePull {
    0%   { transform: translateY(0);    opacity: 1; }
    40%  { transform: translateY(-30px); opacity: 1; }
    100% { transform: translateY(-120px); opacity: 0; }
}

/* ===== 처음 획득 팝업 ===== */
#discovery-popup {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: discoveryFadeIn 0.25s ease;
}

@keyframes discoveryFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#discovery-panel {
    background: linear-gradient(160deg, #fffbe8, #fff8d0);
    border: 5px solid #f0c040;
    border-radius: 30px;
    padding: 36px 52px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 2px #ffe080 inset;
    animation: discoveryPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 320px;
}

@keyframes discoveryPopIn {
    from { transform: scale(0.3) rotate(-8deg); opacity: 0; }
    to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}

#discovery-header {
    font-size: 22px;
    font-weight: bold;
    color: #b08000;
    letter-spacing: 1px;
}

/* 아이콘을 크게 보여주는 영역 */
#discovery-icon-wrap {
    width: 180px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#discovery-icon {
    position: relative;
    width: 52px;
    height: 62px;
    transform: scale(3.2);
    transform-origin: center;
}

#discovery-icon.carrot-icon-wrap {
    width: 50px;
    height: 78px;
}

#discovery-icon.cabbage-icon-wrap {
    width: 52px;
    height: 62px;
}

#discovery-icon.potato-icon-wrap,
#discovery-icon.red-potato-wrap,
#discovery-icon.lime-potato-wrap {
    width: 56px;
    height: 62px;
}

#discovery-icon.lemon-icon-wrap {
    width: 52px;
    height: 44px;
}

#discovery-icon.hearty-carrot-wrap {
    width: 58px;
    height: 78px;
}

#discovery-icon.glowing-carrot-wrap {
    width: 50px;
    height: 78px;
}

#discovery-icon.lavender-carrot-wrap {
    width: 50px;
    height: 78px;
}

#discovery-icon.blueberry-icon-wrap,
#discovery-icon.yellow-berry-icon-wrap {
    width: 34px;
    height: 34px;
}

/* ===== 야광 배추 ===== */
.glow-cabbage-wrap {
    position: relative;
    width: 52px;
    height: 62px;
    animation: cabbageGlow 1.5s ease-in-out infinite;
}

@keyframes cabbageGlow {
    0%, 100% { filter: drop-shadow(0 0 5px #44ffaa) drop-shadow(0 0 12px #22dd88); }
    50%       { filter: drop-shadow(0 0 11px #88ffcc) drop-shadow(0 0 22px #44ffaa); }
}

.glow-cabbage-wrap .cabbage-outer-l {
    background: #050f05;
}
.glow-cabbage-wrap .cabbage-outer-r {
    background: #050f05;
}
.glow-cabbage-wrap .cabbage-body {
    background: #080f08;
    box-shadow: inset -5px -5px 10px rgba(0,0,0,0.8);
}
.glow-cabbage-wrap .cabbage-shine {
    background: rgba(100,255,150,0.08);
}
.glow-cabbage-wrap .cabbage-vein {
    background: rgba(100,255,150,0.1);
}

/* ===== 푸른 배추 ===== */
.blue-cabbage-wrap .cabbage-outer-l {
    background: radial-gradient(ellipse at 60% 35%, #88bbff, #2255cc);
}
.blue-cabbage-wrap .cabbage-outer-r {
    background: radial-gradient(ellipse at 40% 35%, #88bbff, #2255cc);
}
.blue-cabbage-wrap .cabbage-body {
    background: radial-gradient(ellipse at 38% 35%, #ddeeff, #6699ff 45%, #2244cc);
    box-shadow: inset -5px -5px 10px rgba(0,0,0,0.2), 2px 3px 7px rgba(0,0,0,0.2);
}
.blue-cabbage-wrap .cabbage-shine {
    background: rgba(255,255,255,0.55);
}
.blue-cabbage-wrap .cabbage-vein {
    background: rgba(100,150,255,0.4);
}

#discovery-icon.glow-cabbage-wrap {
    width: 52px;
    height: 62px;
}

#discovery-name {
    font-size: 30px;
    font-weight: bold;
    color: #4a2c0a;
    text-shadow: 2px 2px 0px #f0d060;
}

#discovery-msg {
    font-size: 17px;
    color: #888;
    margin-top: -6px;
}

#discovery-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    max-width: 280px;
    text-align: center;
    background: rgba(240, 230, 180, 0.5);
    border-radius: 12px;
    padding: 10px 16px;
    border: 1px solid #e8d080;
}

#discovery-btn {
    font-size: 20px;
    padding: 12px 46px;
    background: linear-gradient(135deg, #f0a020, #ffc040);
    color: white;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 5px 0 #b06000;
    transition: all 0.1s;
    margin-top: 6px;
}

#discovery-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #b06000; }
#discovery-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #b06000; }

/* ===== 미니게임 ===== */

/* 지도 카드 */
#loc-minigame {
    border-color: #e8a020;
    box-shadow: 0 6px 0 #b06810, 0 8px 20px rgba(0,0,0,0.2);
}
#loc-minigame:hover { box-shadow: 0 11px 0 #b06810, 0 13px 28px rgba(0,0,0,0.2); }
#loc-minigame:active { box-shadow: 0 2px 0 #b06810; }

/* 미니게임 화면 */
#minigame-screen {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, rgba(255,200,50,0.1) 0%, transparent 70%);
}

#minigame-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 340px;
    padding-top: 50px;
}

#minigame-title {
    font-size: 32px;
    color: #4a2c0a;
}

/* 카운트다운 */
#minigame-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
}

#countdown-num {
    font-size: 100px;
    font-weight: bold;
    color: #e08000;
    text-shadow: 4px 4px 0px #b05000;
    line-height: 1;
}

@keyframes countdownPop {
    0%   { transform: scale(0.2); opacity: 0; }
    40%  { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1);   opacity: 1; }
}

/* 퀴즈 영역 */
#minigame-quiz {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
}

/* 작물 아이콘 크게 표시 */
#quiz-icon-wrap {
    width: 180px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#quiz-icon {
    position: relative;
    width: 52px;
    height: 62px;
    transform: scale(3);
    transform-origin: center;
}

#quiz-icon.carrot-icon-wrap {
    width: 50px;
    height: 78px;
}

#quiz-icon.cabbage-icon-wrap,
#quiz-icon.glow-cabbage-wrap {
    width: 52px;
    height: 62px;
}

#quiz-icon.potato-icon-wrap,
#quiz-icon.red-potato-wrap,
#quiz-icon.lime-potato-wrap {
    width: 56px;
    height: 62px;
}

#quiz-icon.lemon-icon-wrap {
    width: 52px;
    height: 44px;
}

#quiz-icon.hearty-carrot-wrap {
    width: 58px;
    height: 78px;
}

#quiz-icon.glowing-carrot-wrap {
    width: 50px;
    height: 78px;
}

#quiz-icon.lavender-carrot-wrap {
    width: 50px;
    height: 78px;
}

#quiz-icon.blueberry-icon-wrap,
#quiz-icon.yellow-berry-icon-wrap {
    width: 34px;
    height: 34px;
}

/* 입력 영역 */
#quiz-input-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 타이머 바 */
#quiz-timer-bar-bg {
    width: 100%;
    height: 14px;
    background: #e0e0e0;
    border-radius: 7px;
    overflow: hidden;
}

#quiz-timer-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, #ff3333, #ff8833);
    border-radius: 7px;
}

/* 입력 필드 */
#quiz-input {
    font-size: 22px;
    padding: 12px 18px;
    border: 3px solid #c8a96e;
    border-radius: 14px;
    width: 100%;
    text-align: center;
    outline: none;
    font-family: inherit;
    background: rgba(255,255,255,0.95);
}

#quiz-input:focus {
    border-color: #e08000;
    box-shadow: 0 0 0 3px rgba(224,128,0,0.2);
}

/* 결과 메시지 */
#minigame-result-msg {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    padding: 12px 24px;
    border-radius: 14px;
}

.mg-result-ok {
    color: #1a8c3c;
    background: rgba(50,220,100,0.15);
    border: 2px solid rgba(50,220,100,0.4);
    animation: resultPop 0.25s ease;
}

.mg-result-fail {
    color: #cc2222;
    background: rgba(220,50,50,0.12);
    border: 2px solid rgba(220,50,50,0.3);
    animation: resultPop 0.25s ease;
}

@keyframes resultPop {
    0%   { transform: scale(0.7); }
    100% { transform: scale(1); }
}

/* 누적 획득 금액 */
#minigame-score {
    font-size: 18px;
    color: #888;
}

#minigame-earned {
    font-weight: bold;
    color: #c07000;
}

/* ===== 레시피 버튼 ===== */
#recipe-btn {
    margin-top: 10px;
    font-size: 17px;
    padding: 10px 30px;
    background: linear-gradient(135deg, #7744bb, #9966dd);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 4px 0 #5533aa;
    transition: all 0.1s;
}
#recipe-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #5533aa; }
#recipe-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #5533aa; }

/* ===== 레시피 모달 ===== */
#recipe-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 400;
}

#recipe-panel {
    width: 700px;
    max-width: 92vw;
    max-height: 80vh;
    background: rgba(240, 235, 255, 0.98);
    border: 5px solid #9966dd;
    border-radius: 24px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#recipe-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 26px;
    background: linear-gradient(135deg, #7744bb, #9966dd);
    font-size: 24px;
    font-weight: bold;
    color: white;
    flex-shrink: 0;
}

#recipe-close-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    font-size: 20px;
    color: white;
    cursor: pointer;
    font-weight: bold;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: background 0.15s;
}
#recipe-close-btn:hover { background: rgba(255,255,255,0.35); }

#recipe-items {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    overflow-y: auto;
}

.recipe-card {
    background: rgba(255,255,255,0.85);
    border: 3px solid #c8b8ee;
    border-radius: 18px;
    padding: 16px 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.recipe-result-icon {
    width: 52px;
    height: 62px;
    position: relative;
    transform: scale(1.1);
    transform-origin: center;
    margin-bottom: 6px;
    font-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recipe-result-icon.carrot-icon-wrap {
    width: 50px;
    height: 78px;
}

.recipe-result-icon.hearty-carrot-wrap {
    width: 58px;
    height: 78px;
}

.recipe-result-icon.glowing-carrot-wrap {
    width: 50px;
    height: 78px;
}

.recipe-result-icon.lavender-carrot-wrap {
    width: 50px;
    height: 78px;
}

.recipe-result-name {
    font-size: 15px;
    font-weight: bold;
    color: #4a2c0a;
    text-align: center;
}

.recipe-formula {
    font-size: 13px;
    color: #9966dd;
    font-weight: bold;
    text-align: center;
}

.recipe-price {
    font-size: 13px;
    font-weight: bold;
    color: #c07020;
    text-align: center;
}

.recipe-locked {
    background: rgba(220,220,220,0.7);
    border-color: #aaa;
}

.recipe-lock-icon {
    font-size: 36px;
    margin-bottom: 4px;
}

.recipe-unlock-btn {
    font-size: 13px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #9966dd, #7744bb);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 3px 0 #5533aa;
    transition: all 0.1s;
    width: 100%;
    margin-top: 4px;
}
.recipe-unlock-btn:hover { transform: translateY(-2px); }
.recipe-unlock-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #5533aa; }
.recipe-unlock-btn:disabled {
    background: #bbb;
    box-shadow: 0 3px 0 #888;
    cursor: default;
    transform: none;
}

/* ===== 저장 완료 토스트 메시지 ===== */
#save-toast {
    position: fixed;
    bottom: 80px;
    left: 20px;
    background: rgba(0,0,0,0.75);
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

#save-toast.show {
    opacity: 1;
}

/* ===== 토마토 ===== */
.tomato-icon-wrap {
    width: 48px;
    height: 56px;
    position: relative;
}

.tomato-body {
    width: 42px;
    height: 40px;
    background: radial-gradient(circle at 35% 30%, #ffaaaa, #ee2222 52%, #881111);
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    left: 3px;
    box-shadow: inset -4px -4px 10px rgba(0,0,0,0.3), 2px 2px 6px rgba(0,0,0,0.2);
}

/* 꼭지 잎 */
.tomato-body::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 7px;
    width: 28px;
    height: 13px;
    background:
        radial-gradient(ellipse at 15% 70%, #5ed030, transparent 55%),
        radial-gradient(ellipse at 50% 20%, #4ab820, transparent 55%),
        radial-gradient(ellipse at 85% 70%, #5ed030, transparent 55%);
}

/* 줄기 */
.tomato-body::after {
    content: '';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 16px;
    background: linear-gradient(180deg, #1a7000, #4ab820);
    border-radius: 3px;
}

.tomato-shine {
    width: 10px;
    height: 8px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
    position: absolute;
    top: 7px;
    left: 7px;
    transform: rotate(-20deg);
}

.tomato-on-tree {
    position: absolute;
    width: 48px;
    height: 56px;
    z-index: 2;
    cursor: pointer;
}

/* ===== 노란 토마토 ===== */
.yellow-tomato-wrap {
    width: 48px;
    height: 56px;
    position: relative;
}

.yellow-tomato-wrap .tomato-body {
    background: radial-gradient(circle at 35% 30%, #fffbaa, #eedd22 52%, #aa8800);
    box-shadow: inset -4px -4px 10px rgba(0,0,0,0.25), 2px 2px 6px rgba(0,0,0,0.2), 0 0 10px rgba(255,230,50,0.5);
}

/* ===== 토마토 통나무 ===== */
#tomato-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 통나무 + 토마토를 겹치는 래퍼 */
#tomato-log-wrap {
    position: relative;
    width: 320px;
    height: 86px;
}

/* 토마토가 자라는 영역 — 통나무 위에 절대 위치로 겹침 */
#tomato-crown {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 320px;
    height: 140px;   /* 통나무 위로 넉넉히 올라옴 */
    overflow: visible;
    z-index: 3;
    pointer-events: none;  /* 통나무 클릭 통과 */
}

.tomato-on-tree {
    pointer-events: all;  /* 토마토 자체는 클릭 가능 */
}

/* 가로로 누운 통나무 */
#tomato-log {
    width: 320px;
    height: 86px;
    background: linear-gradient(
        180deg,
        #ddb870 0%,
        #b88840 12%,
        #9a6e2a 28%,
        #b28438 45%,
        #9a6828 65%,
        #7a4818 85%,
        #5a3008 100%
    );
    border-radius: 43px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 8px 22px rgba(0,0,0,0.4),
        inset 0 -14px 22px rgba(0,0,0,0.28),
        inset 0 6px 12px rgba(255,220,140,0.22);
}

/* 나무 결 (가로 줄무늬) */
#tomato-log::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        180deg,
        transparent 0px,
        transparent 9px,
        rgba(0,0,0,0.07) 9px,
        rgba(0,0,0,0.07) 10px
    );
    border-radius: inherit;
}

/* 곰팡이 */
.tomato-mold {
    position: absolute;
    background: radial-gradient(circle at 38% 28%, #c8ee60, #5aa010 60%, #2a6008);
    border-radius: 50%;
    opacity: 0.82;
    width: 26px;
    height: 18px;
}
.tomato-mold.small {
    width: 16px;
    height: 11px;
    opacity: 0.7;
}

/* ===== 바구니 게임 ===== */
#minigame-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
}

#minigame-title {
    font-size: 26px;
    font-weight: bold;
    color: #2a5c1a;
    margin: 0;
}

#catch-score-row {
    display: flex;
    gap: 32px;
    font-size: 18px;
    font-weight: bold;
    color: #2a5c1a;
}

#catch-area {
    width: 400px;
    height: 450px;
    max-width: 90vw;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, #b8e4ff 0%, #88ccff 45%, #a8d870 55%, #5a9a1a 100%);
    border: 4px solid #3a7a20;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

/* 바구니 */
#catch-basket {
    position: absolute;
    bottom: 10px;
    width: 90px;
    height: 48px;
    background: linear-gradient(180deg, #d4a060 0%, #8b5010 100%);
    border: 3px solid #4a2a00;
    border-radius: 6px 6px 16px 16px;
    box-shadow: inset 0 4px 8px rgba(255,220,150,0.4);
}
#catch-basket::before {
    content: '';
    position: absolute;
    top: 12px; left: 6px; right: 6px;
    height: 2px;
    background: rgba(60,20,0,0.35);
    border-radius: 2px;
}
#catch-basket::after {
    content: '';
    position: absolute;
    top: 24px; left: 6px; right: 6px;
    height: 2px;
    background: rgba(60,20,0,0.35);
    border-radius: 2px;
}

/* 떨어지는 작물 */
.falling-crop {
    position: absolute;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* 큰 아이콘은 축소 */
.falling-crop-icon {
    transform: scale(0.75);
    transform-origin: center;
}
.falling-crop .hearty-carrot-wrap,
.falling-crop .carrot-icon-wrap,
.falling-crop .cabbage-icon-wrap,
.falling-crop .glow-cabbage-wrap {
    transform: scale(0.6);
    transform-origin: center;
}

#catch-hint {
    font-size: 15px;
    color: #555;
    text-align: center;
}