/* KEKE FARM 추가 스타일 (BONE SHOP 공통 스타일 위에) */
body { background: #9fdcff; }
.bub { pointer-events: auto; }
.bub .in { min-width: 64px; }
.bub .it.big { width: 46px; height: 46px; font-size: 30px; border-radius: 16px; box-shadow: none; background: #f4f7ee; }
.bub .it.big b { background: #07131d; }
.bub .it.big.ok::before { border-radius: 16px; }
.bub .it span { line-height: 1; }
.bub.ready .in { box-shadow: 0 0 0 4px #2bc46a, 0 4px 0 rgba(7,19,29,.18), 0 0 20px rgba(43,196,106,.7); }
.bub.gone { pointer-events: none; }
.bub .trait { font-size: 24px; }
.bub .trait:empty { display: none; }
.bub .pat span { width: calc(var(--p, 1) * 100%); }

/* 우리 표시 */
.ptag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 4px; padding: 5px 12px 9px 8px; border-radius: 22px; background: #fff; box-shadow: 0 4px 0 rgba(7,19,29,.2), 0 8px 14px rgba(7,19,29,.18); pointer-events: auto; touch-action: manipulation; min-width: 76px; height: 56px; overflow: hidden; }
.ptag .pi { font-size: 32px; line-height: 1; }
.ptag b { min-width: 22px; text-align: center; font-size: 26px; font-weight: 700; color: #07131d; }
.ptag .pbar { position: absolute; left: 8px; right: 8px; bottom: 5px; height: 6px; border-radius: 3px; background: #e7ebf1; overflow: hidden; }
.ptag .pbar u { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: #4fb8ff; border-radius: 3px; }
.ptag.ready { box-shadow: 0 0 0 4px #2bc46a, 0 4px 0 rgba(7,19,29,.2), 0 0 18px rgba(43,196,106,.7); animation: readyP 1s ease-in-out infinite; }
.ptag.ready .pi { animation: pulse 0.9s ease-in-out infinite; }

/* 창고·씨앗 바 */
#stock { position: fixed; left: 0; right: 0; bottom: calc(10px + var(--safe-b)); z-index: 5; display: flex; justify-content: center; gap: 7px; padding: 0 8px; pointer-events: none; }
#stock .chip { pointer-events: auto; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 50px; height: 66px; border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: 0 4px 0 rgba(7,19,29,.2); touch-action: manipulation; }
#stock .chip .ci { font-size: 28px; line-height: 1; }
#stock .chip b { font-size: 17px; line-height: 1.1; font-variant-numeric: tabular-nums; }
#stock .chip.seed.sel { background: #fff3c4; box-shadow: 0 0 0 4px #ffc62e, 0 4px 0 rgba(7,19,29,.2); transform: translateY(-6px); }
#stock .chip .sd { position: absolute; right: -5px; top: -9px; font-style: normal; font-size: 18px; }
#stock .chip.full b { color: #e8283c; }
#stock .chip:not(.seed) { background: rgba(255,255,255,.7); }

/* 상점 카드 */
#morning .panel { max-height: calc(100vh - 24px); overflow-y: auto; gap: 10px; width: min(100%, 420px); }
.mo-wx { font-size: 30px; }
.wallet.sm { margin-left: auto; font-size: 20px; padding: 4px 12px 4px 8px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.card.up { width: auto; padding: 8px 4px 7px; gap: 4px; font-size: 14px; text-align: center; line-height: 1.1; }
.card.up .ci { font-size: 38px; line-height: 1; }
.card.up b { font-size: 14px; min-height: 16px; }
.card.up .pips { display: flex; gap: 3px; width: 70%; }
.card.up .pips i { flex: 1; height: 7px; border-radius: 4px; background: #d6dbe6; }
.card.up .pips i.on { background: linear-gradient(90deg, #2bc46a, #9be15d); }
.card.up .r { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 16px; height: 22px; }
.card.up .r.mx { color: #2bc46a; }
.card.up.can { background: #fff3c4; box-shadow: 0 0 0 3px #ffc62e, 0 4px 0 rgba(7,19,29,.12); animation: pulse 1.4s ease-in-out infinite; }
.card.up.lock { opacity: .45; pointer-events: none; }
.card.up:not(.can):not(.lock):not(.maxed) .r { opacity: .55; }
.card.up.maxed { background: #eafbea; }
#moCards .card.on::after { display: none; }
@media (max-height: 700px) { .card.up .ci { font-size: 30px; } .card.up { padding: 5px 3px; } #morning .panel { padding: 12px 12px 10px; } }
.de-h .win, .de-h .lose { margin-left: 4px; }
@media (max-width: 380px) { #stock .chip { width: 46px; } #stock { gap: 5px; } }

/* 둥근 동전 (뼈다귀 모양 대신) */
.coin-ic { width: 22px !important; height: 22px !important; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c4, #ffc62e 55%, #d98b00); box-shadow: inset 0 0 0 3px #e8a200, inset 0 0 0 5px rgba(255,255,255,.45); -webkit-mask: none; mask: none; }
.coin-ic.big { width: 38px !important; height: 38px !important; }
.sc-big .coin-ic { width: 32px !important; height: 32px !important; }
.pop .coin-ic { width: 22px !important; height: 22px !important; }
.card .r .coin-ic { width: 18px !important; height: 18px !important; }

@media (max-width: 400px) { .bub .it.big { width: 42px; height: 42px; font-size: 27px; } .bub .it.big b { min-width: 19px; height: 19px; line-height: 19px; font-size: 12px; } .bub .in { padding: 5px 6px 6px; } }

/* 만화 의성어 */
.sfx { position: absolute; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); font-family: 'Jua', 'Fredoka', sans-serif; font-size: 46px; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 rgba(7,19,29,.35); white-space: nowrap; animation: sfxP .95s cubic-bezier(.2,1.8,.4,1) forwards; pointer-events: none; }
@keyframes sfxP { 0% { transform: translate(-50%, -50%) rotate(var(--r)) scale(.2); opacity: 0; } 25% { transform: translate(-50%, -60%) rotate(var(--r)) scale(1.35); opacity: 1; } 70% { transform: translate(-50%, -80%) rotate(var(--r)) scale(1); opacity: 1; } 100% { transform: translate(-50%, -110%) rotate(var(--r)) scale(1); opacity: 0; } }

/* 비네트·따뜻한 색감 */
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,0) 55%, rgba(30,60,20,.28) 100%); }

/* 계속 흔들리는 느낌 제거: 준비된 표시는 정지된 초록 테두리만 */
.ptag.ready, .ptag.ready .pi, .bub.ready .in, .bub.hot .in, .card.up.can { animation: none !important; }
.big-btn { animation: none; }

.ptag, .bub { will-change: transform; transition: none !important; }

.ptag { min-width: 62px; height: 46px; padding: 3px 9px 8px 6px; border-radius: 18px; visibility: hidden; }
.ptag.on { visibility: visible; }
.ptag .pi { font-size: 26px; } .ptag b { font-size: 22px; min-width: 18px; }
.ptag .pbar { bottom: 4px; height: 5px; left: 7px; right: 7px; }

#stock { flex-wrap: wrap; align-content: flex-end; max-width: 100%; }
#stock .chip { width: var(--cw, 50px); }
#stock.two { gap: 6px 5px; }
#stock.two .chip { height: 60px; } #stock.two .chip .ci { font-size: 24px; }

.mo-stage, .de-stage { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 12px; border-radius: 16px; background: #eaf8dc; font-weight: 700; position: relative; flex-wrap: wrap; }
.mo-stage .sg-i, .de-stage .sg-i { font-size: 26px; } .mo-stage b, .de-stage b { font-size: 24px; }
.sg-n { font-size: 15px; flex: 1; }
.sg-bar { flex-basis: 100%; height: 8px; border-radius: 4px; background: #cfe7bd; overflow: hidden; }
.sg-bar u { display: block; height: 100%; background: linear-gradient(90deg, #5fcf4a, #b6ee5d); border-radius: 4px; }
.de-stage { background: linear-gradient(90deg, #fff3c4, #ffe08a); box-shadow: 0 0 0 3px #ffc62e; animation: pulse 1.2s ease-in-out 3; }
.de-stage .un { display: flex; gap: 6px; font-size: 26px; flex-basis: 100%; justify-content: center; }

/* 하단 바: 창고 버튼 + 씨앗 줄(가로 스크롤) */
#stock { flex-wrap: nowrap; justify-content: flex-start; padding: 0 8px; gap: 6px; align-items: flex-end; }
#stock .chip { width: 52px; flex: none; }
#stock .seeds { display: flex; gap: 6px; overflow-x: auto; padding: 8px 4px 6px; pointer-events: auto; touch-action: pan-x; scrollbar-width: none; flex: 1; min-width: 0; }
#stock .seeds::-webkit-scrollbar { display: none; }
#stock .chip.store { background: #fff3c4; box-shadow: 0 0 0 3px #ffc62e, 0 4px 0 rgba(7,19,29,.2); }
.dl { position: absolute; left: -4px; top: -6px; font-style: normal; font-size: 12px; font-weight: 700; padding: 1px 4px; border-radius: 8px; color: #fff; }
.dl.up { background: #ff5a3c; } .dl.dn { background: #4a7bd6; }
#storePanel { position: fixed; inset: 0; z-index: 30; background: rgba(7,19,29,.45); display: grid; place-items: end center; padding-bottom: calc(90px + var(--safe-b)); }
.sp-in { width: min(94vw, 420px); max-height: 62vh; overflow-y: auto; background: #fff; border-radius: 24px; padding: 14px; box-shadow: var(--shadow); }
.sp-h { display: flex; align-items: baseline; gap: 8px; font-size: 22px; margin-bottom: 8px; } .sp-h b { font-size: 26px; } .sp-h small { opacity: .5; }
.sp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sp-i { position: relative; display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 14px; background: #f2f4f8; font-weight: 700; }
.sp-i span { font-size: 28px; line-height: 1; } .sp-i b { font-size: 16px; } .sp-i em { font-style: normal; font-size: 11px; color: #b07a00; } .sp-i.full b { color: #e8283c; }
/* 갈래 제목 */
.br-h { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 12px; background: #eaf8dc; font-size: 15px; }
.br-h span { font-size: 20px; }
/* 공방 칩 */
.wtag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; min-width: 74px; padding: 3px 8px 10px; border-radius: 18px; background: #fff; box-shadow: 0 4px 0 rgba(7,19,29,.2), 0 8px 14px rgba(7,19,29,.18); pointer-events: auto; touch-action: manipulation; visibility: visible; will-change: transform; overflow: visible; }
.wtag .wo { font-size: 24px; line-height: 1.1; font-weight: 700; } .wtag .wi { font-size: 12px; font-weight: 700; color: #555; min-height: 14px; }
.wtag .pbar { position: absolute; left: 8px; right: 8px; bottom: 4px; height: 5px; border-radius: 3px; background: #e7ebf1; overflow: hidden; } .wtag .pbar u { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: #ff9a3a; border-radius: 3px; }
.wtag .wsw { position: absolute; right: -8px; top: -8px; width: 24px; height: 24px; border-radius: 50%; background: #2fd6ee; color: #fff; font-style: normal; font-weight: 700; display: grid; place-items: center; font-size: 14px; box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.wtag.can { box-shadow: 0 0 0 3px #ffc62e, 0 4px 0 rgba(7,19,29,.2); } .wtag.ready { box-shadow: 0 0 0 4px #2bc46a, 0 4px 0 rgba(7,19,29,.2), 0 0 16px rgba(43,196,106,.7); } .wtag.busy { opacity: .9; } .wtag.no { animation: shakeX .35s; }

#btnQuest { position: absolute; right: calc(14px + env(safe-area-inset-right, 0px)); top: calc(200px + var(--safe-t)); pointer-events: auto; width: auto; min-width: 52px; height: 48px; padding: 0 10px; display: flex; gap: 4px; font-size: 24px; background: #fff3c4; box-shadow: 0 0 0 3px #ffc62e, 0 4px 0 rgba(7,19,29,.18); }
#btnQuest b { font-size: 15px; }
#questPanel { position: fixed; inset: 0; z-index: 30; background: rgba(7,19,29,.45); display: grid; place-items: center; }
.q-r { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 16px; background: #f2f4f8; margin-bottom: 8px; }
.q-r.done { background: #eafbea; } .q-i { font-size: 34px; width: 44px; text-align: center; }
.q-b { flex: 1; } .q-b i { display: block; height: 10px; border-radius: 5px; background: #d6dbe6; overflow: hidden; } .q-b u { display: block; height: 100%; background: linear-gradient(90deg, #2bc46a, #9be15d); } .q-b b { font-size: 14px; }
.q-w { display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 18px; color: #b07a00; } .q-r.done .q-w { color: #2bc46a; }

#ending { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: radial-gradient(circle, rgba(255,214,63,.35), rgba(7,19,29,.6)); }
.en-in { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; animation: pop .6s cubic-bezier(.2,1.5,.4,1) both; }
.en-i { font-size: 110px; filter: drop-shadow(0 8px 0 rgba(0,0,0,.25)); animation: pulse 1s infinite; } .en-d { font-size: 30px; letter-spacing: 4px; }
.en-in h2 { margin: 0; font-family: 'Jua', 'Fredoka', sans-serif; font-size: 38px; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.en-in b { padding: 6px 16px; border-radius: 999px; background: var(--ink); color: #ffe14d; font-size: 20px; }
.ptag .fd { position: absolute; right: -9px; top: -9px; width: 28px; height: 28px; border-radius: 50%; background: #ffb13b; font-style: normal; display: grid; place-items: center; font-size: 16px; box-shadow: 0 2px 0 rgba(0,0,0,.25); animation: pulse .8s infinite; }
.ptag .fd[hidden] { display: none; }

#dexPanel { position: fixed; inset: 0; z-index: 40; background: rgba(7,19,29,.55); display: grid; place-items: center; }
#dexPanel .sp-in { max-height: 82vh; }
.sp-grid.dex .sp-i em { font-size: 10px; color: #444; text-align: center; line-height: 1.1; } .sp-i.off { opacity: .4; } .sp-i.off span { filter: grayscale(1); }
.q-b .an { font-style: normal; font-size: 14px; font-weight: 700; display: block; }
#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 8; } #flash.on { animation: flashA .5s ease-out; } @keyframes flashA { 0% { opacity: .85; } 20% { opacity: .1; } 35% { opacity: .6; } 100% { opacity: 0; } }

#btnMarket { position: absolute; right: calc(14px + env(safe-area-inset-right, 0px)); top: calc(262px + var(--safe-t)); pointer-events: auto; min-width: 52px; height: 48px; font-size: 26px; background: #e9f7ff; box-shadow: 0 0 0 3px #4fb8ff, 0 4px 0 rgba(7,19,29,.18); }
#marketPanel { position: fixed; inset: 0; z-index: 30; background: rgba(7,19,29,.45); display: grid; place-items: center; }
.msell { display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 10px; border-radius: 12px; background: linear-gradient(180deg, #ffb13b, #ff7a1a); color: #fff; font-weight: 700; font-size: 16px; box-shadow: 0 3px 0 #c4520a; }
.msell.all { background: linear-gradient(180deg, #4fd2ff, #1f8cf0); box-shadow: 0 3px 0 #135ea8; }
#btnPrestige { background: #fff3c4; box-shadow: 0 0 0 3px #ffc62e, 0 4px 0 rgba(7,19,29,.12); } #btnPrestige.arm { background: #ff9a3a; animation: pulse .5s infinite; }

#chapter { position: fixed; inset: 0; z-index: 48; display: grid; place-items: center; background: rgba(7,19,29,.7); }
.ch-in { width: min(92vw, 380px); display: flex; flex-direction: column; align-items: center; gap: 14px; animation: pop .5s cubic-bezier(.2,1.5,.4,1) both; }
.ch-in h3 { margin: 0; font-family: 'Jua','Fredoka',sans-serif; font-size: 30px; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-align: center; }
.ch-f { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.ch-p { aspect-ratio: 1; background: #fffdf0; border: 5px solid var(--ink); border-radius: 12px; display: grid; place-items: center; transform: rotate(var(--r)); box-shadow: 0 6px 0 rgba(0,0,0,.3); opacity: 0; animation: chp .45s cubic-bezier(.2,1.5,.4,1) forwards; }
.ch-p span { font-size: 64px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0,0,0,.2)); }
@keyframes chp { from { opacity: 0; transform: scale(.3) rotate(var(--r)); } to { opacity: 1; transform: scale(1) rotate(var(--r)); } }

.de-stage { flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 8px 12px 10px; }
.de-stage .sg-i { font-size: 30px; } .de-stage b { font-size: 30px; line-height: 1; } .de-stage .sg-n { font-size: 17px; flex: none; }
.de-stage .un { flex-basis: auto; margin-top: 4px; flex-wrap: wrap; }

/* 아침 상점: 카드만 스크롤, ▶ 시작 버튼은 항상 보이게 */
#morning .panel { overflow: hidden; display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
#morning .cards { overflow-y: auto; flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding-bottom: 4px; }
#morning .big-btn, #btnPrestige { flex: none; }

.farm-loading .kk-play, .farm-loading .kk-cont { opacity: .45; pointer-events: none; filter: grayscale(.6); animation: none; }

#hintArrow { position: fixed; left: 0; top: 0; z-index: 6; pointer-events: none; will-change: transform; }
#hintArrow span { display: block; font-size: 40px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)); animation: hintB .7s ease-in-out infinite; }
@keyframes hintB { 50% { transform: translateY(10px); } }

#btnQuest { top: auto !important; bottom: calc(100px + var(--safe-b)); } #btnMarket { top: auto !important; bottom: calc(160px + var(--safe-b)); }

/* HUD 정리: 코인+별 진행+일시정지/홈 + 날짜·날씨·시계 한 알약, 트로피·별·집 레벨은 하루 끝/아침 화면으로 */
#totalBox { display: none !important; }
#hud #dayBox { flex-direction: row !important; gap: 0 !important; left: calc(14px + env(safe-area-inset-left, 0px)) !important; top: calc(80px + var(--safe-t)) !important; padding: 4px 12px 4px 8px; border-radius: 999px; background: rgba(7,19,29,.6); align-items: center; }
#hud #dayBox .dn, #hud #dayBox .tm { background: none !important; padding: 0 6px !important; box-shadow: none; animation: none !important; }
#hud #dayBox .tm { border-left: 2px solid rgba(255,255,255,.25); margin-left: 4px; }
#dayBox.late .tm b { color: #ff7a7a; }
#btnMarket { font-size: 28px; }