* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #a9d2f2; font-family: Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; color: #24251f; user-select: none; -webkit-user-select: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
.muted { color: #6f705f; }
button { font: inherit; cursor: pointer; }

#hud { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.pill { pointer-events: auto; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.93); border-radius: 999px; padding: 7px 8px 7px 16px; box-shadow: 0 2px 12px rgba(0,0,0,.1); font-size: 14px; flex-wrap: wrap; }
.code { font-family: ui-monospace, Menlo, monospace; font-weight: 700; letter-spacing: 2px; background: #fff4c7; padding: 2px 8px; border-radius: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #3fbf6a; }
.mini { white-space: nowrap; border: 0; background: #24251f; color: #fff; border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 600; }
.mini.big { padding: 10px 16px; font-size: 15px; background: #e8483c; pointer-events: auto; box-shadow: 0 3px 10px rgba(0,0,0,.15); }
#tagBox { pointer-events: auto; }

#banner { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); background: rgba(232,72,60,.95); color: #fff; padding: 10px 18px; border-radius: 14px; font-weight: 700; font-size: 17px; text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,.15); pointer-events: none; }
#banner.calm { background: rgba(36,37,31,.85); }
#toast { position: fixed; top: 120px; left: 50%; transform: translateX(-50%) scale(.9); background: #fff; color: #24251f; padding: 12px 20px; border-radius: 14px; font-size: 18px; font-weight: 700; opacity: 0; transition: all .25s; pointer-events: none; box-shadow: 0 6px 24px rgba(0,0,0,.18); z-index: 30; }
#toast.show { opacity: 1; transform: translateX(-50%) scale(1); }

#emotes { position: fixed; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; background: rgba(255,255,255,.85); padding: 6px; border-radius: 999px; box-shadow: 0 2px 12px rgba(0,0,0,.1); }
#emotes button { width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; font-size: 24px; }
#emotes button:active { transform: scale(.9); }
#help { position: fixed; right: 12px; bottom: 76px; font-size: 12px; color: #3d3e36; background: rgba(255,255,255,.8); padding: 6px 10px; border-radius: 8px; max-width: 300px; }

#stick { position: fixed; left: 24px; bottom: 90px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,.35); border: 2px solid rgba(255,255,255,.7); touch-action: none; }
#knob { position: absolute; left: 40px; top: 40px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 2px 8px rgba(0,0,0,.2); }
#jumpBtn { position: fixed; right: 24px; bottom: 100px; width: 86px; height: 86px; border-radius: 50%; border: 0; background: rgba(255,214,64,.95); font-weight: 800; font-size: 17px; box-shadow: 0 4px 12px rgba(0,0,0,.2); touch-action: none; }
@media (hover: hover) and (pointer: fine) { #stick, #jumpBtn { display: none !important; } }
@media (hover: none) { #help { display: none !important; } }

.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20; background: linear-gradient(rgba(127,184,234,.55), rgba(240,236,220,.8)); }
.card { background: #fff; border-radius: 22px; padding: 26px; width: min(380px, 100%); box-shadow: 0 10px 40px rgba(0,0,0,.15); }
.card h1 { margin: 0 0 6px; font-size: 28px; }
.card p { line-height: 1.55; margin: 0 0 6px; }
.card label { display: block; font-size: 13px; color: #6f705f; margin: 14px 0 6px; }
.row { display: flex; gap: 8px; align-items: center; }
.nick { flex: 1; font-size: 20px; font-weight: 800; padding: 10px 12px; background: #f5f3ea; border-radius: 12px; }
.ghost { border: 1px solid #ddd; background: #fff; border-radius: 12px; padding: 10px 12px; white-space: nowrap; }
#colors { display: flex; gap: 8px; flex-wrap: wrap; }
#colors button { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #ddd; }
#colors button.on { box-shadow: 0 0 0 3px #24251f; }
.primary { width: 100%; margin-top: 18px; padding: 14px; border: 0; border-radius: 14px; background: #e8483c; color: #fff; font-size: 17px; font-weight: 800; }
.primary.small { width: auto; margin: 0; padding: 12px 16px; font-size: 15px; background: #24251f; }
.or { text-align: center; color: #9a9b8c; font-size: 13px; margin: 16px 0 8px; }
#codeIn { flex: 1; min-width: 0; padding: 12px; border: 1px solid #ddd; border-radius: 12px; font: inherit; font-size: 18px; letter-spacing: 3px; text-transform: uppercase; font-family: ui-monospace, Menlo, monospace; }

/* 알 훔치기 */
#tagBox { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
#gameBtns { display: flex; gap: 6px; }
#gameBtns .mini { background: rgba(255,255,255,.95); color: #24251f; box-shadow: 0 2px 10px rgba(0,0,0,.12); padding: 9px 13px; font-size: 14px; }
#gameBtns .mini:disabled { opacity: .65; }
#rank { background: rgba(255,255,255,.88); border-radius: 14px; padding: 6px 10px; font-size: 13px; min-width: 150px; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
#rank:empty { display: none; }
#rank div { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
#rank div.me { font-weight: 800; }
#rank span { width: 14px; color: #8a8b7e; }
#rank i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
#rank b { margin-left: auto; padding-left: 10px; }
#hudLeft { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
#coinPill { pointer-events: auto; background: #fff4c7; border: 2px solid #f5c518; border-radius: 999px; padding: 6px 16px; font-size: 20px; font-weight: 800; box-shadow: 0 2px 10px rgba(0,0,0,.1); }
#coinPill.bump { animation: bump .4s; }
@keyframes bump { 40% { transform: scale(1.25); } }
#hint { position: fixed; bottom: 112px; left: 50%; transform: translateX(-50%); background: rgba(36,37,31,.85); color: #fff; padding: 10px 18px; border-radius: 14px; font-size: 17px; font-weight: 700; pointer-events: none; white-space: nowrap; }
#pickBtn { position: fixed; right: 120px; bottom: 112px; width: 74px; height: 74px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); font-weight: 800; font-size: 16px; box-shadow: 0 4px 12px rgba(0,0,0,.2); touch-action: none; }
#pickBtn.ready { background: #7ed957; color: #fff; }
@media (hover: hover) and (pointer: fine) { #pickBtn { display: none !important; } }
#shop .shoe { font-size: 20px; font-weight: 800; margin: 14px 0 4px; }
#shop .primary:disabled { opacity: .45; }
@media (max-width: 520px) { #rank { font-size: 12px; min-width: 120px; } #gameBtns .mini { padding: 7px 10px; font-size: 12px; } #hint { bottom: 200px; font-size: 15px; } }

/* ---- 공룡 알 훔치기 */
#shopBtn { pointer-events: auto; border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 800; font-size: 16px; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.18); cursor: pointer; }
#shopBtn small { font-weight: 700; color: #8a6d00; }
#shopBtn.can { background: #ffd84d; animation: shoePulse 1s infinite; }
@keyframes shoePulse { 50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(255,216,77,.45); } }
.shoeRow { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: #f4f4f1; margin: 6px 0; }
.shoeRow.next { background: #fff4c9; outline: 2px solid #f2c230; }
.shoeRow.own { opacity: .6; }
.shoeRow .lv { font-weight: 900; width: 38px; }
.shoeRow .nm { flex: 1; font-weight: 700; display: flex; flex-direction: column; }
.shoeRow .nm small { font-weight: 500; color: #666; }
.shoeRow .ok { color: #2e8b3e; font-weight: 800; }
.shoeRow .buy { padding: 8px 12px; }
#nav { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 8px; background: rgba(150,40,30,.88); color: #fff; padding: 6px 14px 6px 8px; border-radius: 999px; font-weight: 800; font-size: 15px; pointer-events: none; }
#nav.home { background: rgba(40,120,60,.9); }
#navArrow { display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; background: #fff; color: #c33; border-radius: 50%; font-size: 18px; }
#nav.home #navArrow { color: #2a8a40; }
#dinoWarn { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 7; background: #e8483c; color: #fff; font-weight: 900; font-size: 22px; padding: 10px 22px; border-radius: 16px; animation: warnBlink .5s infinite alternate; pointer-events: none; white-space: nowrap; }
@keyframes warnBlink { to { background: #ff8a2a; transform: translateX(-50%) scale(1.06); } }
#runBtn { position: fixed; right: 24px; bottom: 196px; width: 74px; height: 74px; border-radius: 50%; border: 0; background: rgba(79,195,247,.95); color: #fff; font-weight: 800; font-size: 15px; box-shadow: 0 4px 12px rgba(0,0,0,.2); touch-action: none; }
#runBtn.on { background: #ffb300; transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { #runBtn { display: none !important; } }
@media (max-width: 600px) { #shopBtn { font-size: 14px; padding: 8px 12px; } #dinoWarn { font-size: 16px; top: 58px; } #nav { top: auto; bottom: 230px; } }
.shoeRow .buy { width: auto !important; flex: none; margin: 0; white-space: nowrap; }

/* 코인 떠오르는 숫자 */
.floater { position: fixed; top: 42%; transform: translateX(-50%); font-size: 26px; font-weight: 900; text-shadow: 0 2px 0 rgba(0,0,0,.45), 0 0 10px rgba(0,0,0,.25); pointer-events: none; z-index: 30; animation: floatUp 1.3s ease-out forwards; }
@keyframes floatUp { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -90px; } }
/* 아이템 버튼 */
#itemBar { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 6; }
#itemBar button { pointer-events: auto; width: 62px; height: 62px; border-radius: 16px; border: 0; background: rgba(255,255,255,.92); box-shadow: 0 3px 10px rgba(0,0,0,.18); font-size: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; position: relative; cursor: pointer; }
#itemBar button b { font-size: 13px; margin-top: 3px; }
#itemBar button small { position: absolute; top: 3px; left: 6px; font-size: 10px; color: #888; }
#itemBar button.none { opacity: .45; }
#itemBar button.act { background: #ffd84d; animation: shoePulse 1s infinite; }
@media (hover: none) { #itemBar button small { display: none; } }
/* 내 기지 패널 */
#basePanel { position: fixed; left: 12px; top: 170px; width: 290px; max-height: 60vh; overflow: auto; background: rgba(255,255,255,.95); border-radius: 16px; box-shadow: 0 6px 20px rgba(0,0,0,.22); padding: 10px; z-index: 7; pointer-events: auto; }
#basePanel .bHead { display: flex; flex-direction: column; margin-bottom: 6px; } #basePanel .bHead small { color: #777; font-size: 11px; }
.bRow { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 10px; background: #f4f4f1; margin: 4px 0; }
.bRow.empty { opacity: .5; } .bRow.r2 { background: #e3eeff; } .bRow.r3 { background: #f1e3ff; } .bRow.r4 { background: #fff3c4; } .bRow.r5 { background: #ffe0f6; }
.bRow .ic { font-size: 24px; width: 30px; text-align: center; }
.bRow .nm { flex: 1; font-weight: 800; font-size: 14px; display: flex; flex-direction: column; } .bRow .nm small { font-weight: 600; color: #666; font-size: 11px; }
.bRow .bar { height: 6px; border-radius: 3px; background: #ddd; overflow: hidden; margin: 3px 0 1px; } .bRow .bar i { display: block; height: 100%; background: #7ed957; } .bRow .bar.egg i { background: #f5c518; }
.bRow .sell { border: 0; border-radius: 10px; background: #2e8b3e; color: #fff; font-weight: 800; font-size: 12px; padding: 6px 8px; cursor: pointer; line-height: 1.25; }
@media (max-width: 600px) { #basePanel { top: auto; bottom: 250px; width: 250px; max-height: 38vh; } #itemBar { top: 38%; } }
/* 상점 탭 */
#shop .tabs { display: flex; gap: 6px; margin: 8px 0; } #shop .tab { flex: 1; border: 0; border-radius: 10px; padding: 8px; font-weight: 800; background: #eee; cursor: pointer; } #shop .tab.on { background: #24251f; color: #fff; }

.shopList { max-height: 46vh; overflow-y: auto; padding-right: 4px; -webkit-overflow-scrolling: touch; }
.shoeRow .sw { width: 14px; height: 28px; border-radius: 4px; border: 1px solid rgba(0,0,0,.2); flex: none; }
#spdPill { position: fixed; left: 14px; bottom: max(16px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.92); padding: 6px 12px 6px 8px; border-radius: 999px; box-shadow: 0 2px 12px rgba(0,0,0,.15); font-weight: 800; z-index: 5; pointer-events: none; }
#spdPill .ic { font-size: 22px; } #spdPill .lab { font-size: 11px; color: #666; } #spdPill b { font-size: 20px; color: #e8483c; min-width: 36px; } #spdPill small { font-size: 10px; color: #777; font-weight: 700; }
#spdPill.up b { animation: spdUp .5s ease; } @keyframes spdUp { 50% { transform: scale(1.35); color: #2e8b3e; } }
@media (hover: none) { #spdPill { bottom: 232px; } }
#nav.low { background: rgba(232,72,60,.92) !important; }

#spitFx { position: fixed; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(circle, rgba(140,200,60,.15) 20%, rgba(90,160,40,.75) 75%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .4s; }

/* 공룡 안내 레이더 (오른쪽 위, 순위 아래) + 크게 보기 지도 */
#radar { position: relative; width: 140px; height: 140px; border-radius: 50%; cursor: pointer; pointer-events: auto; box-shadow: 0 3px 12px rgba(0,0,0,.25); flex: none; }
#radar canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }
#radar .rlab { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); background: rgba(18,40,30,.9); color: #cfe; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 8px; white-space: nowrap; pointer-events: none; }
#radar .rlab.warn { background: #e53935; color: #fff; animation: warnBlink .5s infinite alternate; }
#radar.hidden { display: none; }
@media (max-width: 600px), (max-height: 520px) { #radar { width: 100px; height: 100px; } }
#mapOv { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 10px; }
#mapOv.hidden { display: none; }
#mapOv .mcard { background: #fff; border-radius: 18px; padding: 12px; max-width: 980px; width: 100%; max-height: calc(100vh - 20px); overflow: auto; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
#mapOv .mhead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
#mapOv .mhead b { font-size: 18px; } #mapOv .mhead .muted { font-size: 12px; flex: 1; } #mapOv .mhead button { margin: 0; }
#mapOv .mbody { display: flex; gap: 12px; align-items: flex-start; }
#mapOv canvas { border-radius: 12px; flex: none; }
#mapOv .mlist { flex: 1; min-width: 220px; font-size: 13px; }
#mapOv .mrow { display: grid; grid-template-columns: 22px 1fr 56px 74px; align-items: center; gap: 6px; padding: 3px 4px; border-bottom: 1px solid #f0f0ea; }
#mapOv .mrow.mh { font-size: 11px; color: #888; font-weight: 700; }
#mapOv .mrow.ch { background: #ffebee; font-weight: 800; }
#mapOv .mrow i { width: 20px; height: 20px; border-radius: 50%; color: #fff; font-style: normal; font-weight: 800; font-size: 11px; display: flex; align-items: center; justify-content: center; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
#mapOv .mrow b { text-align: right; } #mapOv .mrow small { color: #999; font-weight: 400; }
@media (max-width: 700px) { #mapOv .mbody { flex-direction: column; align-items: center; } #mapOv .mlist { width: 100%; } }

#gps { position: fixed; right: 10px; bottom: max(14px, env(safe-area-inset-bottom)); font-size: 11px; line-height: 1.35; color: #2e3b2f; background: rgba(255,255,255,.78); padding: 4px 8px; border-radius: 8px; text-align: right; pointer-events: none; z-index: 5; max-width: 230px; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { #gps { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 64px); font-size: 10px; max-width: 170px; } }

/* =================== 알록달록 UI (특수효과 + 팝업) =================== */
:root { --candy1: #ff5fa2; --candy2: #ffb347; --candy3: #ffe14a; --candy4: #5fd16a; --candy5: #4fb3ff; --candy6: #9b7cff; }
body { font-weight: 600; }
@keyframes popIn { 0% { transform: scale(.4) rotate(-6deg); opacity: 0; } 60% { transform: scale(1.12) rotate(2deg); opacity: 1; } 80% { transform: scale(.96); } 100% { transform: scale(1); } }
@keyframes popOut { to { transform: scale(.6) translateY(-30px); opacity: 0; } }
@keyframes rainbowBg { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }

/* 화면 번쩍 */
#flashFx { position: fixed; inset: 0; pointer-events: none; z-index: 25; opacity: 0; background: radial-gradient(circle, transparent 35%, var(--fc, rgba(255,215,64,.5)) 100%); }
#flashFx.go { animation: flashGo .45s ease-out; }
@keyframes flashGo { 0% { opacity: 1; } 100% { opacity: 0; } }
/* 빨리 달릴 때 속도선 */
#speedFx { position: fixed; inset: -10%; pointer-events: none; z-index: 4; opacity: 0; transition: opacity .25s;
  background: repeating-conic-gradient(from 0deg at 50% 55%, rgba(255,255,255,0) 0deg 4deg, rgba(255,255,255,.55) 4.4deg 5deg, rgba(255,255,255,0) 5.4deg 9deg);
  -webkit-mask: radial-gradient(circle at 50% 55%, transparent 32%, #000 70%); mask: radial-gradient(circle at 50% 55%, transparent 32%, #000 70%); animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 가운데 팝업 카드 (레벨업·새 신발·황금알·부화) */
#popHost { position: fixed; left: 50%; top: 30%; transform: translateX(-50%); z-index: 32; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.pop { min-width: 230px; max-width: 86vw; text-align: center; padding: 16px 26px 14px; border-radius: 26px; color: #fff; display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(135deg, var(--candy1), var(--candy2)); border: 4px solid #fff; box-shadow: 0 10px 0 rgba(0,0,0,.12), 0 14px 34px rgba(0,0,0,.25); animation: popIn .55s cubic-bezier(.2,1.4,.4,1) both; text-shadow: 0 2px 0 rgba(0,0,0,.18); }
.pop.out { animation: popOut .35s ease-in forwards; }
.pop b { font-size: 27px; font-weight: 900; letter-spacing: -.5px; } .pop small { font-size: 16px; font-weight: 800; opacity: .95; } .pop em { font-style: normal; font-size: 14px; font-weight: 800; background: rgba(255,255,255,.25); border-radius: 999px; padding: 3px 12px; margin-top: 4px; align-self: center; }
.pop.lvup { background: linear-gradient(135deg, #5fd16a, #2bb5a0); } .pop.shoe { background: linear-gradient(135deg, #4fb3ff, #9b7cff); } .pop.hatch { background: linear-gradient(135deg, #ff8fd0, #ffb347); }
.pop.bolt { background: linear-gradient(135deg, #ffd23a, #ff9a2a); color: #5a3a00; text-shadow: none; } .pop.cloak { background: linear-gradient(135deg, #9b7cff, #5a4ad1); }
.pop.golden { background: linear-gradient(90deg, #ffd23a, #ffef9a, #ffb300, #ffd23a); background-size: 200% 100%; animation: popIn .55s cubic-bezier(.2,1.4,.4,1) both, rainbowBg 2s linear infinite; color: #6a4300; text-shadow: 0 1px 0 #fff6c8; }
.pop.golden.rb, .pop.rar5 { background: linear-gradient(90deg, #ff5f5f, #ffb347, #ffe14a, #5fd16a, #4fb3ff, #9b7cff, #ff5fa2, #ff5f5f); background-size: 200% 100%; animation: popIn .55s cubic-bezier(.2,1.4,.4,1) both, rainbowBg 2.5s linear infinite; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.pop.golden.cos { background: radial-gradient(circle at 30% 30%, #6a4ad8, #140a3a 70%); color: #fff; text-shadow: 0 0 10px #b9a2ff; }
.pop.rar3 { background: linear-gradient(135deg, #c27bff, #7a4ad1); } .pop.rar4 { background: linear-gradient(135deg, #ffd23a, #ff8a2a); color: #5a3a00; text-shadow: none; }
/* 큰 숫자 (+코인) */
.bigNum { position: fixed; top: 38%; transform: translateX(-50%); z-index: 31; pointer-events: none; font-size: 54px; font-weight: 900; color: #ffd23a; -webkit-text-stroke: 3px #b86e00; paint-order: stroke fill; text-shadow: 0 5px 0 rgba(0,0,0,.18); animation: bigNum 1.5s cubic-bezier(.2,1.4,.4,1) forwards; }
.bigNum.pink { color: #ff8fd0; -webkit-text-stroke-color: #b0306e; }
@keyframes bigNum { 0% { transform: translateX(-50%) scale(.3); opacity: 0; } 18% { transform: translateX(-50%) scale(1.25); opacity: 1; } 30% { transform: translateX(-50%) scale(1); } 75% { opacity: 1; margin-top: -40px; } 100% { opacity: 0; margin-top: -90px; transform: translateX(-50%) scale(.9); } }
.floater { font-size: 30px; -webkit-text-stroke: 2px rgba(0,0,0,.55); paint-order: stroke fill; animation: floatUp 1.3s cubic-bezier(.2,1.3,.4,1) forwards; }
@keyframes floatUp { 0% { opacity: 0; margin-top: 10px; transform: translateX(-50%) scale(.5); } 20% { opacity: 1; transform: translateX(-50%) scale(1.15); } 35% { transform: translateX(-50%) scale(1); } 100% { opacity: 0; margin-top: -100px; } }

/* 알림 토스트 · 배너 · 경고 */
#toast { background: linear-gradient(135deg, #ffffff, #fff4fb); border: 3px solid #ff8fd0; color: #3a2440; border-radius: 22px; font-weight: 800; box-shadow: 0 6px 0 rgba(255,95,162,.25), 0 10px 26px rgba(0,0,0,.18); max-width: 90vw; text-align: center; }
#toast.show { animation: toastIn .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes toastIn { 0% { transform: translateX(-50%) scale(.5); } 60% { transform: translateX(-50%) scale(1.1); } 100% { transform: translateX(-50%) scale(1); } }
#banner { background: linear-gradient(135deg, #ff5f5f, #ff8a2a); border: 3px solid #fff; border-radius: 20px; box-shadow: 0 6px 0 rgba(0,0,0,.12), 0 8px 20px rgba(0,0,0,.2); }
#banner.calm { background: linear-gradient(135deg, #4fb3ff, #9b7cff); }
#dinoWarn { background: linear-gradient(135deg, #ff3d3d, #ff8a2a); border: 3px solid #fff; border-radius: 22px; box-shadow: 0 6px 0 rgba(150,0,0,.25), 0 8px 22px rgba(0,0,0,.25); text-shadow: 0 2px 0 rgba(0,0,0,.2); }
@keyframes warnBlink { to { background: linear-gradient(135deg, #ff8a2a, #ffd23a); transform: translateX(-50%) scale(1.07) rotate(-1deg); } }
#hint { background: linear-gradient(135deg, #2bb5a0, #4fb3ff); border: 3px solid #fff; border-radius: 18px; box-shadow: 0 5px 0 rgba(0,0,0,.12); }
#nav { border: 3px solid #fff; box-shadow: 0 4px 0 rgba(0,0,0,.12); background: linear-gradient(135deg, #e8483c, #ff8a2a); }
#nav.home { background: linear-gradient(135deg, #2e9e4a, #5fd16a); }

/* 위쪽 HUD */
.pill { border: 3px solid #fff; background: linear-gradient(135deg, #fffaf0, #eef7ff); box-shadow: 0 4px 0 rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.12); }
.code { background: linear-gradient(135deg, #ffe14a, #ffb347); color: #5a3a00; }
.mini { background: linear-gradient(135deg, #9b7cff, #5a7cff); }
.mini.big { background: linear-gradient(135deg, #ff5f5f, #ff8fd0); border: 3px solid #fff; }
#coinPill { background: linear-gradient(180deg, #fff6b0, #ffd23a); border: 3px solid #fff; color: #6a4300; box-shadow: 0 4px 0 #d99a00, 0 6px 14px rgba(0,0,0,.15); text-shadow: 0 1px 0 #fff6c8; }
#coinPill.bump { animation: coinBump .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes coinBump { 30% { transform: scale(1.35) rotate(-4deg); } 60% { transform: scale(.95); } }
#shopBtn { background: linear-gradient(135deg, #ffffff, #e8f6ff); border: 3px solid #fff; box-shadow: 0 4px 0 rgba(79,179,255,.45), 0 5px 14px rgba(0,0,0,.15); }
#shopBtn.can { background: linear-gradient(135deg, #ffe14a, #ff8fd0); }
#gameBtns .mini { background: linear-gradient(135deg, #ffffff, #e3f4ff); border: 2px solid #fff; color: #2d3a6a; }
#rank { background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(240,248,255,.95)); border: 3px solid #fff; border-radius: 18px; box-shadow: 0 4px 0 rgba(0,0,0,.06); }
#rank div:nth-child(1) span { color: #e0a800; } #rank div:nth-child(1) span::after { content: '👑'; font-size: 11px; }
#spdPill { background: linear-gradient(135deg, #ffffff, #eafbe9); border: 3px solid #fff; box-shadow: 0 4px 0 rgba(94,209,106,.4); }
#emotes { background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,240,250,.92)); border: 3px solid #fff; }
#emotes button { background: linear-gradient(180deg, #ffffff, #fff1f8); box-shadow: 0 3px 0 rgba(255,95,162,.25); }
#emotes button:active { transform: scale(.85) rotate(-8deg); }
#itemBar button { border: 3px solid #fff; background: linear-gradient(180deg, #ffffff, #eef4ff); box-shadow: 0 4px 0 rgba(155,124,255,.35); }
#itemBar button.act { background: linear-gradient(180deg, #fff36a, #ffb347); }
#jumpBtn { background: linear-gradient(180deg, #ffe14a, #ffb347); border: 4px solid #fff; color: #6a4300; box-shadow: 0 5px 0 #d98a00; }
#runBtn { background: linear-gradient(180deg, #6fd0ff, #4f8bff); border: 4px solid #fff; box-shadow: 0 5px 0 #2f5fc0; }
#runBtn.on { background: linear-gradient(180deg, #ffb347, #ff5f5f); box-shadow: 0 3px 0 #b03030; }
#pickBtn { border: 4px solid #fff; background: linear-gradient(180deg, #ffffff, #f0f0f0); box-shadow: 0 5px 0 rgba(0,0,0,.15); }
#pickBtn.ready { background: linear-gradient(180deg, #8eea6a, #3fbf6a); box-shadow: 0 5px 0 #2a8a40; animation: nudge 1.4s ease-in-out infinite; }   /* 덜 흔들리게 */

/* 카드·버튼 (첫 화면, 상점, 지도) */
.overlay { background: radial-gradient(circle at 20% 20%, rgba(255,214,234,.85), transparent 45%), radial-gradient(circle at 80% 30%, rgba(214,236,255,.9), transparent 50%), linear-gradient(160deg, rgba(255,236,170,.85), rgba(190,230,255,.9)); }
.card { border: 5px solid #fff; border-radius: 30px; background: linear-gradient(180deg, #ffffff, #fffaf3); box-shadow: 0 10px 0 rgba(0,0,0,.08), 0 16px 44px rgba(0,0,0,.18); animation: popIn .45s cubic-bezier(.2,1.4,.4,1); }
.card h1 { background: linear-gradient(90deg, #ff5f5f, #ffb347, #5fd16a, #4fb3ff, #9b7cff); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.card h2 { color: #ff5fa2; }
.primary { background: linear-gradient(135deg, #ff5f5f, #ff8fd0); border: 3px solid #fff; box-shadow: 0 5px 0 #c0306e; transition: transform .1s; }
.primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #c0306e; }
.primary.small { background: linear-gradient(135deg, #4fb3ff, #9b7cff); box-shadow: 0 4px 0 #3a5ec0; }
.ghost { border: 3px solid #e8e2ff; background: #fff; color: #5a4ad1; font-weight: 800; }
.nick { background: linear-gradient(135deg, #fff6d6, #ffe9f4); color: #5a3a6a; }
#shop .tab { background: #f1edff; color: #5a4ad1; border: 2px solid #fff; } #shop .tab.on { background: linear-gradient(135deg, #9b7cff, #ff8fd0); color: #fff; box-shadow: 0 3px 0 rgba(90,74,209,.35); }
.shoeRow { border: 3px solid #fff; border-radius: 18px; background: linear-gradient(135deg, #f7f4ff, #eef8ff); box-shadow: 0 3px 0 rgba(0,0,0,.05); }
.shoeRow:nth-child(6n+1) { background: linear-gradient(135deg, #fff1f6, #ffe8f1); } .shoeRow:nth-child(6n+2) { background: linear-gradient(135deg, #fff7e3, #ffefd0); } .shoeRow:nth-child(6n+3) { background: linear-gradient(135deg, #eefbea, #ddf5d8); }
.shoeRow:nth-child(6n+4) { background: linear-gradient(135deg, #e9f6ff, #d8eeff); } .shoeRow:nth-child(6n+5) { background: linear-gradient(135deg, #f3edff, #e7ddff); } .shoeRow:nth-child(6n) { background: linear-gradient(135deg, #fffbe0, #fff2b8); }
.shoeRow.next { background: linear-gradient(135deg, #fff36a, #ffb347) !important; outline: 3px solid #fff; box-shadow: 0 0 0 3px #ffb347, 0 6px 16px rgba(255,140,0,.35); animation: nudge 1.4s infinite; }
@keyframes nudge { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.shoeRow.own { opacity: .7; filter: saturate(.7); }
.shoeRow .lv { background: #fff; border-radius: 12px; text-align: center; padding: 4px 0; color: #5a4ad1; }
.shoeRow .sw { border-radius: 8px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.shoeRow .ok { color: #2e9e4a; }
#shop .primary.buy { background: linear-gradient(135deg, #5fd16a, #2bb5a0); box-shadow: 0 4px 0 #1f8a5a; }
#basePanel { border: 4px solid #fff; border-radius: 22px; background: linear-gradient(180deg, #ffffff, #f6fbff); box-shadow: 0 6px 0 rgba(0,0,0,.06), 0 10px 24px rgba(0,0,0,.2); }
.bRow { border: 2px solid #fff; border-radius: 14px; }
.bRow .sell { background: linear-gradient(135deg, #5fd16a, #2bb5a0); box-shadow: 0 3px 0 #1f8a5a; }
#mapOv .mcard { border: 5px solid #fff; border-radius: 26px; }
@media (max-width: 600px) { .pop b { font-size: 22px; } .pop small { font-size: 14px; } .bigNum { font-size: 42px; } #popHost { top: 24%; } }

/* 도움말은 흔들지 않음 */
#help { animation: none !important; }

/* 도움말은 눌리지 않게 (아래 버튼을 가리지 않도록) */
#help { pointer-events: none !important; }
@media (max-width: 820px) { #help { display: none !important; } }

/* ===================== 로블록스 모바일처럼: 화면을 덜 가리게 ===================== */
#roomPill .more { display: inline-flex; align-items: center; gap: 6px; }
#nav.carry { background: linear-gradient(135deg, #ffb347, #ff6a3d) !important; animation: nudge 1s ease-in-out infinite; }
#nav.carry #navArrow { color: #e8483c; }
#emoteBtn { display: none; }
#rank { cursor: pointer; }
@media (hover: none), (max-width: 820px) {
  #hud { top: max(8px, env(safe-area-inset-top)); left: 8px; right: 8px; gap: 6px; }
  /* 왼쪽 위: 방 칩(접힘) + 코인·상점 한 줄 */
  #hudLeft { flex-direction: row; flex-wrap: wrap; gap: 6px; max-width: 58vw; }
  #roomPill { width: max-content; max-width: 58vw; padding: 4px 10px; gap: 6px; font-size: 12px; border-width: 2px !important; border-radius: 14px !important; }
  #roomPill b { font-size: 12px; }
  #roomPill .code { font-size: 11px; letter-spacing: 1px; padding: 1px 5px; }
  #roomPill .more { display: none; }
  #roomPill.open { flex-wrap: wrap; }
  #roomPill.open .more { display: inline-flex; font-size: 12px; }
  #roomPill .mini { padding: 4px 8px; font-size: 11px; }
  #coinPill { padding: 2px 10px !important; font-size: 15px !important; border-width: 2px !important; min-width: 0 !important; }
  #shopBtn { padding: 5px 10px !important; font-size: 12px !important; }
  #shopBtn small { display: none; }
  /* 오른쪽 위: 작은 버튼 + 접힌 순위표 + 작은 레이더 */
  #tagBox { gap: 5px; }
  #tagBtn.mini.big { padding: 6px 10px !important; font-size: 12px !important; }
  #gameBtns .mini { padding: 5px 9px !important; font-size: 11px !important; }
  #rank { min-width: 0 !important; max-width: 40vw; font-size: 11px !important; padding: 3px 8px !important; border-radius: 12px !important; }
  #rank div { padding: 1px 0; }
  #rank:not(.open) > div:not(.me):not(.rTabs):nth-child(n+5) { display: none; }   /* 접혀도 1~3위 + 내 줄은 보임 */
  #rank:not(.open)::after { content: '▾ 순위'; display: block; font-size: 9px; color: #8a8b7e; text-align: right; }
  #radar { width: 84px !important; height: 84px !important; }
  #radar .rlab { font-size: 8px; bottom: -5px; }
  /* 위 가운데: 길 안내 칩 → 공룡 경고 → 알림 (서로 안 겹치게 층을 나눔) */
  #nav { top: calc(max(8px, env(safe-area-inset-top)) + 66px) !important; bottom: auto !important; padding: 3px 10px 3px 4px !important; font-size: 13px !important; gap: 6px; border-width: 2px !important; max-width: 52vw; white-space: nowrap; }
  #navArrow { width: 22px !important; height: 22px !important; line-height: 22px !important; font-size: 13px !important; }
  #dinoWarn { top: calc(max(8px, env(safe-area-inset-top)) + 100px) !important; font-size: 13px !important; padding: 5px 10px !important; max-width: 52vw; width: max-content; white-space: normal !important; text-align: center; line-height: 1.25; border-width: 2px !important; }
  #toast { top: calc(max(8px, env(safe-area-inset-top)) + 140px) !important; font-size: 13px !important; padding: 7px 12px !important; max-width: 52vw; width: max-content; white-space: normal !important; text-align: center; line-height: 1.3; border-width: 2px !important; }
  #banner { top: calc(max(8px, env(safe-area-inset-top)) + 180px) !important; font-size: 14px !important; padding: 6px 12px !important; }
  #popHost { top: 30% !important; }
  .pop { min-width: 0 !important; max-width: 78vw !important; padding: 10px 16px 9px !important; border-radius: 20px !important; }
  .pop b { font-size: 20px !important; } .pop small { font-size: 13px !important; } .pop em { font-size: 12px !important; }
  .bigNum { font-size: 40px !important; }
  /* 아래: 로블록스처럼 왼쪽 조이스틱, 오른쪽 점프·달리기·줍기 */
  #stick { left: 16px !important; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 10px) !important; width: 120px !important; height: 120px !important; }
  #knob { left: 35px !important; top: 35px !important; }
  #jumpBtn { right: 16px !important; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 14px) !important; width: 78px !important; height: 78px !important; font-size: 15px !important; }
  #runBtn { right: 22px !important; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 104px) !important; width: 64px !important; height: 64px !important; font-size: 13px !important; }
  #pickBtn { right: 104px !important; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 14px) !important; width: 64px !important; height: 64px !important; font-size: 14px !important; }
  #emoteBtn:not(.hidden) { display: flex; align-items: center; justify-content: center; position: fixed; right: 100px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 96px); width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff; background: rgba(255,255,255,.88); font-size: 22px; box-shadow: 0 3px 8px rgba(0,0,0,.18); z-index: 6; padding: 0; }
  #emotes:not(.open) { display: none !important; }
  #emotes { left: auto !important; right: 8px !important; transform: none !important; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 150px) !important; padding: 4px !important; gap: 4px !important; z-index: 8; }
  #emotes button { width: 40px !important; height: 40px !important; font-size: 20px !important; }
  /* 아이템: 작은 동그라미 (달리기 버튼 위) */
  #itemBar { top: auto !important; transform: none !important; right: 26px !important; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 182px) !important; gap: 6px !important; }
  #itemBar button { width: 50px !important; height: 50px !important; border-radius: 50% !important; font-size: 18px !important; }
  #itemBar button b { font-size: 10px !important; margin-top: 0 !important; }
  /* 속도: 작은 칩 (왼쪽 위 아래쪽) */
  #spdPill { left: 8px !important; bottom: auto !important; top: calc(max(8px, env(safe-area-inset-top)) + 66px) !important; padding: 2px 8px 2px 5px !important; gap: 3px !important; border-width: 2px !important; }
  #spdPill .ic { font-size: 14px !important; } #spdPill .lab, #spdPill small { display: none !important; } #spdPill b { font-size: 13px !important; min-width: 0 !important; }
  /* 줍기·런닝머신 안내: 아래 가운데, 버튼 위 */
  #hint { word-break: keep-all; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 150px) !important; font-size: 13px !important; padding: 6px 12px !important; max-width: 56vw; white-space: normal !important; text-align: center; line-height: 1.3; border-width: 2px !important; left: 50% !important; }
  /* 기지 패널: 왼쪽 가운데, 작게 */
  #basePanel { top: calc(max(8px, env(safe-area-inset-top)) + 100px) !important; bottom: auto !important; width: 200px !important; max-height: 34vh !important; font-size: 12px; padding: 8px !important; }
  /* 위치(GPS): 맨 아래 한 줄 아주 작게 */
  #gps { left: 50% !important; right: auto !important; transform: translateX(-50%); bottom: 2px !important; font-size: 9px !important; padding: 1px 6px !important; max-width: 60vw !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .8; text-align: center !important; }
  #gps br { display: none; }
  #help { display: none !important; }
}
/* 한글이 단어 중간에서 끊기지 않게 */
#toast, .pop, #dinoWarn, #banner, #hint, #nav { word-break: keep-all; overflow-wrap: anywhere; }
/* 휴대폰: 길 안내 칩이 오른쪽 순위표를 가리지 않게 왼쪽(신발 속도 칩 옆)에 둠 */
@media (max-width: 600px) {
  #nav { left: 76px !important; right: auto !important; transform: none !important; max-width: calc(100vw - 216px); white-space: nowrap; overflow: hidden; }
}

/* 행동(이모티콘): 컴퓨터·휴대폰 모두 ✊ 버튼을 눌러야 작은 팝업으로 열림 → 평소엔 화면을 가리지 않음 */
#emoteBtn:not(.hidden) { display: flex !important; align-items: center; justify-content: center; position: fixed; z-index: 8; width: 48px; height: 48px; border-radius: 50%; border: 3px solid #fff; background: linear-gradient(180deg, #fff, #ffe9f4); font-size: 24px; box-shadow: 0 4px 0 rgba(255,95,162,.3); }
@media (min-width: 601px) { #emoteBtn:not(.hidden) { left: 50%; transform: translateX(-50%); bottom: max(14px, env(safe-area-inset-bottom)); } #emotes { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 62px) !important; } }
#emotes:not(.open) { display: none !important; }
#emotes.open { display: grid !important; grid-template-columns: repeat(3, auto); border-radius: 22px !important; animation: popIn .25s ease; }

/* 테스트 모드 제목 */
h1.testOn { background: linear-gradient(90deg,#ff5fa2,#ffb347,#5fd16a,#3fb8ff,#9b7cf0); -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: bump .5s; }

/* ---- 낚시 (fish.js): 큰 행동 버튼(아래 가운데) · 물고기 수 칩 · 입질 ❗ */
#fishBtn { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 150px); z-index: 9; border: 4px solid #fff; border-radius: 999px; padding: 12px 26px; font-size: 20px; font-weight: 900; color: #fff; background: linear-gradient(180deg, #5fc2f0, #2f86d8); box-shadow: 0 5px 0 #1f5f9a, 0 8px 18px rgba(0,0,0,.2); white-space: nowrap; touch-action: manipulation; }
#fishBtn small { font-size: 12px; opacity: .85; background: rgba(255,255,255,.25); border-radius: 6px; padding: 1px 6px; margin-left: 4px; }
#fishBtn[data-k="throw"] { background: linear-gradient(180deg, #ffb347, #ff7a2a); box-shadow: 0 5px 0 #c04a10, 0 8px 18px rgba(0,0,0,.2); animation: nudge 1.2s ease-in-out infinite; }
#fishBtn[data-k="wait"] { background: linear-gradient(180deg, #9fb3c8, #6f86a0); box-shadow: 0 5px 0 #4a5d74; }
#fishBtn[data-k="bite"] { background: linear-gradient(180deg, #ff6a6a, #e8283c); box-shadow: 0 5px 0 #9a1020; animation: fishBite .25s ease-in-out infinite alternate; font-size: 24px; }
@keyframes fishBite { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.12); } }
#fishPill { position: fixed; z-index: 6; left: 14px; top: calc(max(8px, env(safe-area-inset-top)) + 186px); background: linear-gradient(135deg, #ffffff, #e3f5ff); border: 3px solid #fff; border-radius: 999px; padding: 4px 12px; font-weight: 900; color: #1f5f9a; box-shadow: 0 4px 0 rgba(47,134,216,.35); font-size: 15px; pointer-events: none; }
#fishPill small { color: #a06a00; font-size: 12px; margin-left: 2px; }
#fishBang { position: fixed; z-index: 9; transform: translate(-50%, -100%); font-size: 64px; font-weight: 900; color: #ff3b30; text-shadow: 0 0 0 #fff, 3px 3px 0 #fff, -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff; pointer-events: none; animation: bangBob .2s ease-in-out infinite alternate; }
@keyframes bangBob { from { transform: translate(-50%, -100%) scale(1); } to { transform: translate(-50%, -110%) scale(1.2); } }
.pop.fishGot.r4 { background: linear-gradient(135deg, #fff36a, #ffb347) !important; }
.pop.fishGot.r3 { background: linear-gradient(135deg, #ffd6f3, #ff8ad8) !important; }
.pop.fishGot b { font-size: 22px; }
@media (max-width: 600px) {
  #fishBtn { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 104px); font-size: 17px; padding: 10px 18px; left: calc(50% - 48px); }
  #fishBtn[data-k="bite"] { font-size: 20px; }
  #fishPill { left: 8px; top: calc(max(8px, env(safe-area-inset-top)) + 158px); font-size: 13px; padding: 2px 9px; border-width: 2px; }
}
/* 물총: 🔫 꺼내기 / 💦 쏘기 (오른쪽 아래 버튼 무리 왼쪽) */
#gunBtn, #shootBtn { position: fixed; z-index: 7; border-radius: 50%; border: 4px solid #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22px; line-height: 1; touch-action: none; -webkit-user-select: none; user-select: none; }
#gunBtn b, #shootBtn b { font-size: 11px; margin-top: 2px; }
#gunBtn { right: 186px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 14px); width: 58px; height: 58px; background: linear-gradient(180deg, #e9f7ff, #9fd8ff); color: #134a7a; box-shadow: 0 4px 0 #3a8dff; }
#gunBtn.on { background: linear-gradient(180deg, #fff36a, #ffb347); color: #6a4300; box-shadow: 0 4px 0 #d98a00; }
#shootBtn { right: 156px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 156px); width: 72px; height: 72px; background: linear-gradient(180deg, #6fd0ff, #2f7fff); color: #fff; box-shadow: 0 5px 0 #1f4fb0; font-size: 26px; }
#shootBtn b { font-size: 13px; }
#shootBtn.on { transform: scale(.92); box-shadow: 0 2px 0 #1f4fb0; background: linear-gradient(180deg, #9ff3ff, #3fd0ff); }
#gunBtn.hidden, #shootBtn.hidden { display: none !important; }
@media (hover: hover) and (pointer: fine) { #gunBtn { right: 24px; bottom: 84px; } #shootBtn { right: 96px; bottom: 84px; } }
.gunEquip { border: 0; border-radius: 12px; padding: 8px 12px; font-weight: 800; background: linear-gradient(180deg, #e9f7ff, #9fd8ff); color: #134a7a; }

/* 게코 쓰다듬기 버튼 */
#petBtn { position: fixed; z-index: 9; left: 50%; transform: translateX(-50%); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 170px); width: 70px; height: 70px; border-radius: 50%; border: 3px solid #fff; background: linear-gradient(180deg, #9cf08a, #3fbf6a); color: #fff; font-weight: 900; font-size: 12px; line-height: 1.15; box-shadow: 0 4px 0 #2a8a40; animation: popIn .25s ease; }
#petBtn.hidden { display: none; }
@media (min-width: 601px) { #petBtn { bottom: 90px; } }

/* 이름 직접 입력 */
input#nick { flex: 1; min-width: 0; font-size: 18px; font-weight: 800; padding: 10px 12px; border: 3px solid #ffd0e4; border-radius: 14px; background: #fff; color: #333; }
input#nick:focus { outline: none; border-color: #ff5fa2; }
#nickHint { display: block; margin: 4px 0 6px; font-size: 12px; }
/* 길 안내 두 개: 놀이터(또는 기지) + 낚시터 */
#nav2 { position: fixed; z-index: 5; display: flex; align-items: center; gap: 6px; color: #fff; font-weight: 900; border: 3px solid #fff; border-radius: 999px; box-shadow: 0 4px 0 rgba(0,0,0,.12); background: linear-gradient(135deg, #2f86d8, #5fc2f0); padding: 4px 12px 4px 4px; font-size: 15px; white-space: nowrap; word-break: keep-all; }
#nav2.hidden { display: none; }
#nav2 .navArrow { display: inline-block; width: 26px; height: 26px; line-height: 26px; text-align: center; background: #fff; color: #2f86d8; border-radius: 50%; font-size: 15px; }
@media (min-width: 601px) { #nav { left: calc(50% - 6px) !important; transform: translateX(-100%) !important; } #nav2 { left: calc(50% + 6px); top: 14px; } }
@media (max-width: 600px) {
  #nav2 { left: 8px; top: calc(max(8px, env(safe-area-inset-top)) + 104px); padding: 3px 10px 3px 4px; font-size: 13px; border-width: 2px; max-width: 52vw; overflow: hidden; }
  #nav2 .navArrow { width: 22px; height: 22px; line-height: 22px; font-size: 13px; }
}

/* 상점 버튼은 놀이터 강아지집으로 옮김 */
#shopBtn { display: none !important; }
/* 상황 버튼 모음: 휴대폰은 조이스틱 위 왼쪽, 컴퓨터는 아래 가운데 */
#ctxStack { position: fixed; z-index: 9; left: 12px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 168px); display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 10px; pointer-events: none; }
#ctxStack > * { pointer-events: auto; position: static !important; transform: none !important; left: auto !important; right: auto !important; bottom: auto !important; margin: 0 !important; }
#ctxStack > .hidden { display: none !important; }
@media (min-width: 601px) { #ctxStack { left: 50%; transform: translateX(-50%); bottom: 84px; align-items: center; } }
#shopNear { display: flex; align-items: center; gap: 6px; border: 3px solid #fff; border-radius: 999px; padding: 10px 18px; font-size: 20px; font-weight: 900; color: #fff; background: linear-gradient(180deg, #ff8ac0, #ff5fa2); box-shadow: 0 5px 0 #c2306f; animation: popIn .25s ease; }
#shopNear b { font-size: 16px; }
#petBtn { width: auto !important; height: auto !important; border-radius: 999px !important; padding: 10px 16px !important; font-size: 15px !important; }

#rank .rTabs { display: flex; gap: 4px; margin: 0 0 4px; }
#rank { pointer-events: auto; }
#rank .rTabs button { flex: 1; border: 0; border-radius: 8px; padding: 3px 0; font-size: 14px; background: #ecebe4; cursor: pointer; pointer-events: auto; }
#rank .rTabs button.on { background: #ffd54a; box-shadow: 0 2px 0 #c79a00; }

/* ---- 물고기 도감 카드·책 (fishdex.js) ---- */
#fishPill { cursor: pointer; pointer-events: auto; }
#fishPill i { font-style: normal; margin-left: 4px; }
.fishCard { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1); z-index: 60; width: min(300px, 82vw); padding: 14px 16px 12px; border-radius: 22px; background: linear-gradient(180deg, #fffdf4, #f3ecd8); border: 5px solid #9fd3ff; box-shadow: 0 14px 40px rgba(0,0,0,.35), inset 0 0 0 2px #fff; text-align: center; font-family: inherit; color: #3a2e20; animation: fcIn .45s cubic-bezier(.2,1.6,.4,1); cursor: pointer; }
.fishCard.r1 { border-color: #7ed957; } .fishCard.r2 { border-color: #ffb347; } .fishCard.r3 { border-color: #ff6ad5; }
.fishCard.r4 { border-color: #ffd23a; background: linear-gradient(180deg, #fff8d8, #ffe9a0); box-shadow: 0 0 40px rgba(255,210,58,.8), 0 14px 40px rgba(0,0,0,.35); }
.fishCard.out { animation: fcOut .25s ease-in forwards; }
@keyframes fcIn { from { transform: translate(-50%, -50%) scale(.3) rotate(-8deg); opacity: 0; } }
@keyframes fcOut { to { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }
.fcNew { position: absolute; top: -14px; right: -10px; background: #ff3b5c; color: #fff; font-weight: 900; padding: 4px 10px; border-radius: 12px; transform: rotate(12deg); box-shadow: 0 3px 8px rgba(0,0,0,.3); animation: fcPulse .8s infinite alternate; }
@keyframes fcPulse { to { transform: rotate(12deg) scale(1.15); } }
.fcHead { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.fcRar { padding: 2px 9px; border-radius: 10px; color: #222; font-weight: 800; }
.fcNo { opacity: .65; font-weight: 700; }
.fcImg { margin: 6px auto 2px; background: radial-gradient(ellipse at center, #d8f0ff 0%, #a8d8f0 70%, #8cc8e8 100%); border-radius: 14px; }
.fcImg img { width: 100%; display: block; }
.fcName { font-size: 24px; font-weight: 900; margin-top: 4px; }
.fcStars { color: #ffb400; font-size: 18px; letter-spacing: 2px; text-shadow: 0 1px 0 #a06a00; }
.fcStats { display: flex; justify-content: center; gap: 10px; font-size: 14px; font-weight: 800; margin: 6px 0 4px; flex-wrap: wrap; }
.fcBest { font-size: 12px; font-weight: 800; color: #c0601a; }
.fcFact { font-size: 13px; line-height: 1.45; background: rgba(255,255,255,.7); border-radius: 10px; padding: 7px 9px; margin-top: 6px; }
.fcTap { font-size: 11px; opacity: .45; margin-top: 6px; }
.fishBook { position: fixed; inset: 0; z-index: 59; background: rgba(10,20,35,.55); display: flex; align-items: center; justify-content: center; }
.fbInner { width: min(760px, 94vw); max-height: 86vh; display: flex; flex-direction: column; background: #fdf6e3; border: 5px solid #8a5a2b; border-radius: 20px; padding: 12px; box-shadow: 0 16px 50px rgba(0,0,0,.45); color: #3a2e20; }
.fbTop { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.fbTop span { font-weight: 800; color: #8a5a2b; }
.fbX { margin-left: auto; border: 0; background: #e8d8b8; border-radius: 50%; width: 36px; height: 36px; font-size: 18px; cursor: pointer; }
.fbBar { height: 8px; background: #e8dcc0; border-radius: 4px; margin: 8px 0; overflow: hidden; }
.fbBar i { display: block; height: 100%; background: linear-gradient(90deg, #7ed957, #ffd23a); }
.fbGrid { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; padding: 2px; }
.fbCell { position: relative; background: #fff; border-radius: 12px; border: 3px solid #9fd3ff; padding: 4px 4px 6px; text-align: center; }
.fbCell.r1 { border-color: #7ed957; } .fbCell.r2 { border-color: #ffb347; } .fbCell.r3 { border-color: #ff6ad5; } .fbCell.r4 { border-color: #ffd23a; background: #fff8d8; }
.fbCell.no { background: #ece6d6; border-color: #c8bea8; }
.fbCell.got { cursor: pointer; }
.fbCell img { width: 100%; display: block; }
.fbCell b { display: block; font-size: 13px; } .fbCell small { display: block; font-size: 10px; opacity: .7; }
.fbNo { position: absolute; top: 3px; left: 6px; font-size: 10px; opacity: .5; font-weight: 800; }
.legendTitle { position: fixed; left: 50%; top: 24%; transform: translateX(-50%); z-index: 58; font-size: clamp(22px, 5vw, 40px); font-weight: 900; color: #fff; text-shadow: 0 3px 0 #b07a00, 0 0 20px rgba(255,210,58,.9); text-align: center; pointer-events: none; animation: ltIn .5s cubic-bezier(.2,1.6,.4,1); white-space: nowrap; }
@keyframes ltIn { from { transform: translateX(-50%) scale(.3); opacity: 0; } }
.legendTitle b { color: #ffd23a; } .legendTitle small { display: block; font-size: .5em; }
@media (max-width: 600px) { .fbGrid { grid-template-columns: repeat(3, 1fr); gap: 6px; } .fbCell b { font-size: 11px; } .fbTop { font-size: 17px; } }

/* 🐾 펫 데리고 다니기 (pets.js) */
#myPetBtn { width: 70px; height: 70px; border-radius: 50%; border: 3px solid #fff; background: linear-gradient(180deg, #ffb3d6, #ff6fae); color: #fff; font-weight: 900; font-size: 12px; line-height: 1.15; box-shadow: 0 4px 0 #c24a83; cursor: pointer; animation: popIn .25s ease; }
#myPetBtn.hidden { display: none; }
#petPanel { position: fixed; z-index: 12; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 24px)); max-height: min(78vh, 620px); overflow: auto; background: linear-gradient(180deg, #fff, #fff6fb); border: 4px solid #fff; border-radius: 22px; box-shadow: 0 6px 0 rgba(0,0,0,.06), 0 10px 30px rgba(0,0,0,.28); padding: 12px; pointer-events: auto; font-size: 14px; }
#petPanel.hidden { display: none; }
#petPanel .pHead { display: flex; justify-content: space-between; align-items: center; font-size: 18px; margin-bottom: 4px; }
#petPanel .x { border: 0; background: #f1edff; border-radius: 50%; width: 34px; height: 34px; font-size: 16px; cursor: pointer; }
#petPanel .muted { color: #777; font-size: 12px; margin: 4px 0 8px; }
#petPanel .petRow { display: flex; align-items: center; gap: 6px; padding: 8px; margin: 6px 0; border-radius: 14px; background: #f7f4ff; border: 2px solid transparent; }
#petPanel .petRow.on { background: #fff0f7; border-color: #ff8fc4; }
#petPanel .pic { font-size: 28px; }
#petPanel .pnm { flex: 1; display: flex; flex-direction: column; min-width: 0; } #petPanel .pnm small { color: #8a7a9a; font-size: 11px; }
#petPanel .ren { display: flex; gap: 4px; margin-top: 4px; } #petPanel .ren.hidden { display: none; }
#petPanel .ren input { width: 100px; font-size: 16px; padding: 4px 6px; border-radius: 8px; border: 2px solid #d9cfff; }
#petPanel .ren .ok, #petPanel .pn { border: 0; background: #fff; border-radius: 10px; padding: 6px 8px; cursor: pointer; font-size: 14px; }
#petPanel .pe { border: 0; border-radius: 12px; padding: 8px 10px; font-weight: 900; font-size: 12px; background: linear-gradient(135deg, #9b7cff, #ff8fd0); color: #fff; cursor: pointer; box-shadow: 0 3px 0 rgba(90,74,209,.35); white-space: nowrap; }
#petPanel .pe.on { background: #fff; color: #e0569a; border: 2px solid #ff8fc4; box-shadow: none; }
#petPanel .petUp { width: 100%; margin-top: 8px; padding: 10px; border: 0; border-radius: 14px; font-weight: 900; background: linear-gradient(135deg, #5fd16a, #2bb5a0); color: #fff; cursor: pointer; }
#petPanel .petUp:disabled { opacity: .45; }
#basePanel .petGo { width: 100%; margin: 2px 0 6px; padding: 7px; border: 0; border-radius: 12px; font-weight: 900; background: linear-gradient(135deg, #ffb3d6, #ff6fae); color: #fff; cursor: pointer; }
#shop .tab { min-width: 0; flex: 1 1 0; white-space: nowrap; padding: 7px 2px; font-size: 12px; }
#shop .primary.petBuy { white-space: nowrap; padding: 8px 12px; font-size: 14px; flex: none; }
#shop .shoeRow .nm small { word-break: keep-all; }
#shop .petOpen { border: 0; border-radius: 10px; padding: 4px 8px; font-weight: 800; background: #ffe3f1; color: #c24a83; cursor: pointer; }
#shop .primary.petBuy { background: linear-gradient(135deg, #ffb3d6, #ff6fae); box-shadow: 0 4px 0 #c24a83; }

/* ===== ⛏️ 경로당 지하 · 드래곤 (dungeon.js) ===== */
.dgBtn { position: fixed; z-index: 9; border: 4px solid #fff; color: #fff; font-weight: 900; box-shadow: 0 5px 0 rgba(0,0,0,.22), 0 8px 18px rgba(0,0,0,.18); touch-action: none; user-select: none; -webkit-user-select: none; }
.dgBtn.hidden { display: none !important; }
.dgBtn b { font-weight: 900; }
#dgDoorBtn { left: 50%; transform: translateX(-50%); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 170px); border-radius: 999px; padding: 11px 20px; font-size: 18px; background: linear-gradient(180deg, #ffb35c, #ff7a2a); box-shadow: 0 5px 0 #c04a10, 0 8px 18px rgba(0,0,0,.2); animation: nudge 1.4s ease-in-out infinite; white-space: nowrap; }
#dgDoorBtn.locked { background: linear-gradient(180deg, #b9b9c4, #8a8a98); box-shadow: 0 5px 0 #5a5a68; animation: none; }
#dgDigBtn { left: 50%; transform: translateX(-50%); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 104px); border-radius: 999px; padding: 12px 26px; font-size: 26px; background: linear-gradient(180deg, #c98a4a, #8a5530); box-shadow: 0 6px 0 #5a3418, 0 8px 18px rgba(0,0,0,.25); display: flex; align-items: center; gap: 6px; }
#dgDigBtn b { font-size: 18px; }
#dgDigBtn.on { transform: translateX(-50%) scale(.93); background: linear-gradient(180deg, #ffd27a, #c98a4a); }
#dgHomeBtn { left: 14px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 150px); border-radius: 999px; padding: 9px 14px; font-size: 15px; background: linear-gradient(180deg, #8ee86a, #3fbf6a); box-shadow: 0 4px 0 #2a8a40; }
#dgSwBtn, #dgSlashBtn { border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#dgSwBtn { right: 186px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 80px); width: 58px; height: 58px; font-size: 22px; background: linear-gradient(180deg, #e6f6ff, #9fc8ff); color: #13306a; box-shadow: 0 4px 0 #4a6ab0; }
#dgSwBtn b, #dgSlashBtn b { font-size: 11px; margin-top: 1px; }
#dgSwBtn.on { background: linear-gradient(180deg, #fff36a, #ffb347); color: #6a4300; box-shadow: 0 4px 0 #d98a00; }
#dgSlashBtn { right: 156px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 156px); width: 76px; height: 76px; font-size: 30px; background: radial-gradient(circle at 50% 35%, #bff4ff, #2f7fff 70%); box-shadow: 0 5px 0 #1f4fb0, 0 0 18px rgba(120,220,255,.7); }
#dgSlashBtn b { font-size: 13px; }
#dgSlashBtn.on { transform: scale(.9); }
@media (hover: hover) and (pointer: fine) { #dgSwBtn { right: 176px; bottom: 90px; } #dgSlashBtn { right: 92px; bottom: 82px; } #dgDigBtn { bottom: 96px; } #dgHomeBtn { bottom: 24px; left: 50%; transform: translateX(-50%); } #dgDigBtn::after { content: 'B'; font-size: 12px; opacity: .7; } #dgSlashBtn::after { content: 'V'; font-size: 10px; opacity: .7; } }
#dgBars { position: fixed; left: 50%; transform: translateX(-50%); top: calc(max(8px, env(safe-area-inset-top)) + 64px); z-index: 8; display: flex; flex-direction: column; gap: 5px; width: min(62vw, 380px); pointer-events: none; }
#dgBars.hidden { display: none; }
.dgBar { display: flex; align-items: center; gap: 6px; background: rgba(20,10,14,.72); border: 2px solid rgba(255,255,255,.85); border-radius: 999px; padding: 3px 10px 3px 8px; color: #fff; font-weight: 900; font-size: 13px; }
.dgBar span { white-space: nowrap; }
.dgBar i { flex: 1; height: 12px; background: rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; }
.dgBar em { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, #ff3b3b, #ff9a2a); transition: width .2s; }
.dgBar.mine em { background: linear-gradient(90deg, #3fd06a, #a6f06a); }
.dgBar.mine.low em { background: linear-gradient(90deg, #ff3b3b, #ff7a7a); animation: fishBite .3s ease-in-out infinite alternate; }
.dgBar b { min-width: 30px; text-align: right; font-size: 12px; }
.bigNum.hitN { color: #9ff3ff; -webkit-text-stroke-color: #1f4fb0; }
.bigNum.hurtN { color: #ff6a6a; -webkit-text-stroke-color: #8a1020; font-size: 40px; }
@media (max-width: 600px) { #dgDoorBtn { font-size: 16px; padding: 9px 16px; left: calc(50% - 50px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 262px); } #dgDigBtn { font-size: 22px; padding: 10px 20px; left: calc(50% - 60px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 150px); } #dgHomeBtn { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 210px); font-size: 14px; padding: 8px 12px; } #dgSwBtn { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 76px); } #dgSlashBtn { right: 96px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 188px); } .dgBar { font-size: 11px; } #dgBars { top: auto; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 292px); width: 58vw; } }

/* ==== 🎁 동네 보물찾기 · 🐞 곤충 채집 (treasure.js · bugs.js) ==== */
.ctxAct { display: flex; align-items: center; gap: 6px; border: 3px solid #fff; border-radius: 999px; padding: 10px 18px; font-size: 19px; font-weight: 900; color: #fff; cursor: pointer; animation: popIn .25s ease; font-family: inherit; }
.ctxAct small { font-size: 12px; font-weight: 800; opacity: .9; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#trBtn { background: linear-gradient(180deg, #ffd65a, #ff9f1a); box-shadow: 0 5px 0 #c26a00; text-shadow: 0 1px 0 #b26200; }
#bugBtn { background: linear-gradient(180deg, #8de06a, #46b23a); box-shadow: 0 5px 0 #2e7d22; text-shadow: 0 1px 0 #2e7d22; }
#bugSell { background: linear-gradient(180deg, #7fd3ff, #2f96e0); box-shadow: 0 5px 0 #1d6aa8; }
#xpPills { position: fixed; z-index: 6; left: 14px; top: calc(max(8px, env(safe-area-inset-top)) + 224px); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.xpPill { pointer-events: auto; cursor: pointer; font-family: inherit; background: linear-gradient(135deg, #ffffff, #fff4d6); border: 3px solid #fff; border-radius: 999px; padding: 4px 12px; font-weight: 900; font-size: 15px; color: #8a5a00; box-shadow: 0 4px 0 rgba(217,154,0,.35); }
#bugPill { background: linear-gradient(135deg, #ffffff, #e6f8dc); color: #2e6d1f; box-shadow: 0 4px 0 rgba(70,178,58,.35); }
@media (max-width: 600px) { #xpPills { left: 8px; top: calc(max(8px, env(safe-area-inset-top)) + 190px); gap: 4px; } .xpPill { font-size: 12px; padding: 2px 9px; border-width: 2px; } .ctxAct { font-size: 16px; padding: 8px 14px; } .ctxAct small { max-width: 96px; } }
#bugGame { position: fixed; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 120px); transform: translateX(-50%); z-index: 30; width: min(440px, 92vw); }
#bugGame.hidden { display: none; }
#bugGame .bgIn { position: relative; background: rgba(255,255,255,.96); border: 4px solid #fff; border-radius: 22px; padding: 10px 14px 12px; box-shadow: 0 8px 0 rgba(70,178,58,.45), 0 10px 30px rgba(0,0,0,.25); animation: popIn .2s ease; }
#bugGame .bgTop { display: flex; align-items: center; gap: 8px; } #bugGame .bgImg { width: 44px; height: 44px; }
#bugGame .bgName { font-size: 20px; } #bugGame .bgHelp { color: #666; font-weight: 700; font-size: 12px; margin-left: auto; margin-right: 30px; }
#bugGame .bgBar { position: relative; height: 34px; margin: 10px 0; border-radius: 17px; background: linear-gradient(90deg, #ffe0e0, #fff3d6, #ffe0e0); border: 3px solid #e8dcc0; overflow: hidden; cursor: pointer; touch-action: none; }
#bugGame .bgZone { position: absolute; top: 0; bottom: 0; background: linear-gradient(180deg, #8de06a, #46b23a); border-left: 2px solid #fff; border-right: 2px solid #fff; }
#bugGame .bgNeedle { position: absolute; top: -4px; bottom: -4px; width: 6px; margin-left: -3px; background: #e53935; border-radius: 3px; box-shadow: 0 0 0 2px #fff; }
#bugGame .bgBar.in { border-color: #46b23a; }
#bugGame .bgTap { width: 100%; border: 0; border-radius: 16px; padding: 12px; font-size: 22px; font-weight: 900; color: #fff; background: linear-gradient(180deg, #8de06a, #46b23a); box-shadow: 0 5px 0 #2e7d22; cursor: pointer; font-family: inherit; touch-action: none; }
#bugGame .bgTap:active { transform: translateY(3px); box-shadow: 0 2px 0 #2e7d22; }
#bugGame .bgX { position: absolute; right: 8px; top: 8px; border: 0; background: #eee; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; }
.bugCard { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); z-index: 57; background: #fff; border: 5px solid #8de06a; border-radius: 22px; padding: 10px 22px 12px; text-align: center; box-shadow: 0 12px 30px rgba(0,0,0,.3); animation: popIn .3s cubic-bezier(.2,1.6,.4,1); transition: opacity .4s, transform .4s; pointer-events: none; }
.bugCard.rare { border-color: #ffd23a; background: #fffbe6; box-shadow: 0 0 40px rgba(255,210,58,.8); }
.bugCard.out { opacity: 0; transform: translateX(-50%) translateY(-20px); }
.bugCard img { width: 110px; height: 110px; display: block; margin: 0 auto; } .bugCard b { display: block; font-size: 24px; } .bugCard small { display: block; font-weight: 700; color: #666; }
.bugCard .new { font-weight: 900; color: #ff5fa2; font-size: 14px; }
.bookOv { position: fixed; inset: 0; z-index: 59; background: rgba(10,30,15,.5); display: flex; align-items: center; justify-content: center; }
.bookOv .bookIn { position: relative; width: min(680px, 94vw); max-height: 86vh; overflow-y: auto; background: #f6fbe9; border: 5px solid #5aa233; border-radius: 20px; padding: 12px 14px; box-shadow: 0 16px 50px rgba(0,0,0,.45); color: #2e3a20; }
.trList .bookIn { background: #fff8e6; border-color: #d99a00; }
.bookOv h2 { margin: 2px 40px 6px 0; font-size: 22px; } .bookOv h2 small { color: #888; font-size: 15px; }
.bookOv .x { position: absolute; right: 10px; top: 10px; border: 0; background: #e8d8b8; border-radius: 50%; width: 36px; height: 36px; font-size: 18px; cursor: pointer; }
.bugGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin: 8px 0; }
.bugCell { background: #fff; border: 3px solid var(--rc, #7ed957); border-radius: 14px; padding: 4px; text-align: center; }
.bugCell img { width: 80px; height: 80px; } .bugCell b { display: block; font-size: 14px; } .bugCell small { display: block; font-size: 11px; color: #777; }
.bugCell.no { background: #e6e9dc; border-color: #c8ccb8; } .bugCell.no img { filter: brightness(0) opacity(.35); }
.trBar { height: 10px; background: #f0e2bf; border-radius: 5px; overflow: hidden; } .trBar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd23a, #ff8ac0); }
.trHintBuy { margin: 6px 0; }
.trRows { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; } @media (max-width: 600px) { .trRows { grid-template-columns: 1fr; } }
.trRow { display: grid; grid-template-columns: 24px 1fr auto; gap: 6px; align-items: center; background: #fff; border-radius: 10px; padding: 5px 8px; font-weight: 800; font-size: 13px; color: #8a7a5a; }
.trRow.f { color: #2e6d1f; background: #eaf8df; }
.trMsg.big b { font-size: 24px; }

/* 휴대폰: 길 안내 두 개는 왼쪽 보물·곤충 표시 아래에 세로로 (코인·도감 버튼을 가리지 않게) */
@media (max-width: 600px) {
  #nav { left: 8px !important; top: calc(max(8px, env(safe-area-inset-top)) + 252px) !important; max-width: 46vw; padding-left: 4px !important; }
  #nav:has(#navArrow[style*="none"]) { padding-left: 10px !important; }
  #nav2 { left: 8px !important; top: calc(max(8px, env(safe-area-inset-top)) + 288px) !important; max-width: 46vw; }
  #dinoWarn { top: calc(max(8px, env(safe-area-inset-top)) + 66px) !important; }
  #toast { top: calc(max(8px, env(safe-area-inset-top)) + 104px) !important; }
}

/* ==== ⛏️ 지하: 깊이 표시 · 작은 지도 · 테스트 버튼 (dungeon.js) ==== */
#dgDepth { position: fixed; z-index: 8; left: 50%; transform: translateX(-50%); top: calc(max(8px, env(safe-area-inset-top)) + 64px); display: flex; align-items: center; gap: 8px; background: rgba(25,15,10,.8); border: 3px solid rgba(255,255,255,.9); border-radius: 999px; padding: 4px 14px; color: #fff; font-weight: 900; font-size: 15px; pointer-events: none; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
#dgDepth.hidden, #dgMap.hidden { display: none; }
body.dgUnder #radar { display: none !important; }
#dgDepth b { color: #ffd84d; font-size: 18px; }
#dgDepth span { font-size: 14px; }
#dgDepth small { font-size: 12px; opacity: .85; }
#dgDepth i { display: block; width: 90px; height: 10px; background: rgba(255,255,255,.2); border-radius: 999px; overflow: hidden; }
#dgDepth em { display: block; height: 100%; background: linear-gradient(90deg, #c98a4a, #ffd84d); border-radius: 999px; transition: width .2s; }
#dgMap { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
#dgMap canvas { width: 132px; height: 132px; border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.4); pointer-events: none; }
#dgMap button { font-family: inherit; border: 2px solid #fff; border-radius: 999px; background: linear-gradient(180deg, #fff36a, #ffb347); color: #5a2a00; font-weight: 900; font-size: 12px; padding: 3px 9px; box-shadow: 0 3px 0 #c07a10; cursor: pointer; white-space: nowrap; }
#dgDbgBtn { right: 12px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 300px); border-radius: 999px; padding: 6px 10px; font-size: 12px; background: linear-gradient(180deg, #c9b6ff, #7a5af0); box-shadow: 0 3px 0 #4a2ab0; }
.bigNum.layerN { color: #ffe9b0; -webkit-text-stroke-color: #6a3a10; font-size: 34px; }
@media (max-width: 600px) {
  #dgDepth { top: calc(max(8px, env(safe-area-inset-top)) + 102px); left: 84px; transform: none; font-size: 12px; padding: 3px 10px; gap: 5px; border-width: 2px; max-width: calc(100vw - 92px); overflow: hidden; }
  #dgDepth b { font-size: 14px; } #dgDepth span { font-size: 11px; } #dgDepth small { font-size: 10px; } #dgDepth i { width: 54px; height: 8px; }
  #dgMap canvas { width: 104px; height: 104px; }
  #dgMap button { font-size: 11px; padding: 2px 7px; }
  #dgDbgBtn { bottom: auto; top: calc(max(8px, env(safe-area-inset-top)) + 290px); right: 8px; font-size: 11px; }
}

/* ================= 🛒 상점 팝업: 휴대폰 레이아웃 정리 (shop-mobile v1) =================
   - 카드 높이를 화면 안으로 제한, 내용(#shopBody)만 안에서 스크롤 → 닫기·탭이 화면 밖으로 밀려나지 않음 (꾸미기 탭 갇힘 버그)
   - 탭은 한 줄 가로 스크롤 + 위에 붙어 있음, 줄(row)은 아이콘·이름·설명·가격 버튼이 겹치지 않게 */
#shop { padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); overflow: hidden; }
#shop .card { display: flex; flex-direction: column; width: min(460px, 100%); max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); padding: 14px 14px 10px; overflow: hidden; box-sizing: border-box; }
#shop .card > .row { flex: none; gap: 8px; }
#shop .card > .row h2 { font-size: 22px; }
#shop [data-close] { flex: none; min-width: 44px; min-height: 40px; padding: 8px 14px; border: 0; border-radius: 999px; font-weight: 900; font-size: 15px; color: #fff; background: #ff6f91; box-shadow: 0 3px 0 #c94a6a; cursor: pointer; }
#shop [data-close]::before { content: '✕ '; }
#shop .card > p.muted { flex: none; font-size: 12px; line-height: 1.4; margin: 6px 0 4px; }
#shopBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 2px 6px; }
#shop .tabs { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; overflow-y: hidden; margin: 0 -2px 6px; padding: 4px 2px 8px; background: #fffcf6; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
#shop .tabs::-webkit-scrollbar { display: none; }
#shop .tab { flex: 0 0 auto; min-width: auto; white-space: nowrap; padding: 8px 12px; font-size: 14px; line-height: 1.2; }
#shopBody > p.muted, #shopBody .shopList > p.muted { font-size: 13px; line-height: 1.45; margin: 4px 2px 8px; }
#shop .shopList, #shop .cosList { max-height: none; overflow: visible; padding-right: 0; }
#shop .shoeRow { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 8px 10px; margin: 0 0 8px; box-sizing: border-box; min-height: 56px; animation: none; }
#shop .shoeRow.next { animation: none; box-shadow: 0 0 0 3px #ffb347; }
#shop .shoeRow .lv { flex: none; width: 40px; min-width: 40px; font-size: 13px; text-align: center; }
#shop .shoeRow .sw { flex: none; }
#shop .shoeRow .lv.sw { width: 40px; height: auto; font-size: 24px; border: 0; box-shadow: none; background: #fff; }
#shop .shoeRow .nm { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; word-break: keep-all; }
#shop .shoeRow .nm small { font-size: 12px; line-height: 1.3; margin-top: 2px; }
#shop .shoeRow > button, #shop .shoeRow > .ok, #shop .shoeRow > .muted, #shop .shoeRow > span:last-child:not(.nm) { flex: none; width: auto !important; max-width: 46%; margin: 0 !important; white-space: nowrap; }
#shop .shoeRow > button { padding: 8px 10px; font-size: 14px; border-radius: 999px; min-height: 38px; }
#shop .shoeRow > .ok, #shop .shoeRow > .muted { font-size: 13px; }
#shop .cosGrp { margin: 10px 2px 6px; }
#shop .petOpen { display: inline-block; margin-top: 4px; }
/* 상점 위에서 여는 창(🐾 내 펫)이 상점 뒤로 숨지 않게 */
#petPanel { z-index: 30; }
/* 🏡 내 집 꾸미기 창: 목록만 스크롤, 닫기 버튼은 항상 위에 */
.yardBook .dxIn, .dexBook .dxIn { max-height: calc(100dvh - 24px); }
.yardBook .dxTop, .dexBook .dxTop { flex: none; }
.yardBook .yList { flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
.yardBook .dxX, .dexBook .dxX { width: 40px; height: 40px; flex: none; }
@media (max-width: 400px) {
  #shop .card { padding: 12px 10px 8px; border-radius: 22px; }
  #shop .shoeRow { gap: 6px; padding: 7px 8px; }
  #shop .shoeRow .lv { width: 34px; min-width: 34px; }
  #shop .shoeRow .nm { font-size: 14px; }
  #shop .shoeRow > button { padding: 7px 9px; font-size: 13px; }
}
/* (shop-mobile v1) 휴대폰: 탭을 바꿔도 상점 창 크기·탭 위치가 그대로 (튀지 않게) */
@media (max-width: 600px) { #shop .card { height: calc(100vh - 20px); height: calc(100dvh - 20px); max-height: 780px; } }
/* D-tutorial */
#tutBox { pointer-events: auto; width: 214px; max-width: calc(100vw - 24px); background: linear-gradient(180deg, #fffdf2, #fff3d0); border: 3px solid #fff; border-radius: 18px; box-shadow: 0 4px 0 rgba(255,170,40,.35), 0 4px 14px rgba(0,0,0,.14); padding: 6px 8px 7px; font-size: 13px; color: #4a3200; }
#tutBox .tutHead { all: unset; cursor: pointer; display: flex; align-items: center; gap: 6px; width: 100%; font-weight: 900; font-size: 14px; }
#tutBox .tutHead .n { margin-left: auto; background: #ffb347; color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 12px; }
#tutBox .tutHead i { font-style: normal; transition: transform .2s; }
#tutBox.min .tutHead i { transform: rotate(-90deg); }
#tutBox.min ol, #tutBox.min .tutNav { display: none !important; }
#tutBox ol { list-style: none; margin: 5px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
#tutBox li { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 11px; background: rgba(255,255,255,.6); color: #9a8a60; font-weight: 700; }
#tutBox li .ic { width: 20px; text-align: center; }
#tutBox li .t { flex: 1; min-width: 0; line-height: 1.2; }
#tutBox li small { display: block; font-size: 11px; font-weight: 700; color: #a06a00; }
#tutBox li em { font-style: normal; font-size: 11px; font-weight: 900; color: #c88a00; }
#tutBox li.now { background: #fff; color: #3a2600; box-shadow: inset 0 0 0 2px #ffcf33; animation: tutPulse 1.4s ease-in-out infinite; }
#tutBox li.ok { color: #3f9a3a; text-decoration: line-through; text-decoration-color: rgba(63,154,58,.5); }
#tutBox .tutNav { all: unset; cursor: pointer; margin-top: 5px; display: flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #5fd16a, #2bb5a0); color: #fff; font-weight: 900; border-radius: 999px; padding: 4px 10px; font-size: 13px; box-shadow: 0 3px 0 #1f8a5a; }
#tutBox .tutNav.hidden { display: none; }
#tutBox .tutNav .arr { display: inline-block; font-size: 16px; transition: transform .15s linear; }
@keyframes tutPulse { 50% { box-shadow: inset 0 0 0 2px #ff9a1a, 0 0 10px rgba(255,180,40,.6); } }
@media (max-width: 600px) { #tutBox { width: 186px; font-size: 12px; padding: 5px 7px 6px; } #tutBox .tutHead { font-size: 13px; } #tutBox li { padding: 2px 5px; } }

/* B-ui v2 */
/* 🪙 대신 CSS 동전 (Windows 10 □ 방지): 글자는 안 보이게 밀어내고 동그란 금화를 그림 */
.coinI { display: inline-block; width: .92em; height: .92em; margin: 0 .06em; vertical-align: -.14em; border-radius: 50%; overflow: hidden; text-indent: 3em; white-space: nowrap; font-style: normal; line-height: 1; color: transparent;
  background: radial-gradient(circle at 34% 30%, #fffbd6 0 14%, #ffe066 15% 42%, #f5b800 70%, #c98a00 100%); box-shadow: inset 0 0 0 .07em #b77d00, inset 0 0 0 .16em rgba(255,240,150,.7); }
/* 📶 연결 끊김 띠 */
#netBanner { position: fixed; z-index: 95; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + 6px); background: linear-gradient(180deg, #ff6b6b, #d6334f); color: #fff; border: 3px solid #fff; border-radius: 999px; padding: 6px 16px; font-weight: 900; font-size: 15px; box-shadow: 0 4px 0 rgba(140,20,40,.5), 0 6px 18px rgba(0,0,0,.25); white-space: nowrap; pointer-events: none; animation: warnBlink .8s infinite alternate; }
#netBanner.hidden { display: none; }
/* 📱 가로 화면 안내 (휴대폰을 눕혔을 때만) */
#rotateOv { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (hover: none), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #rotateOv { display: flex; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; text-align: center; background: linear-gradient(160deg, #ffe9a8, #ffd0e6 55%, #cfe6ff); color: #3a2440; }
  #rotateOv div { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 26px; background: rgba(255,255,255,.85); border: 4px solid #fff; border-radius: 26px; box-shadow: 0 8px 0 rgba(255,95,162,.25), 0 10px 30px rgba(0,0,0,.15); }
  #rotateOv span { font-size: 54px; display: inline-block; animation: rotPhone 1.6s ease-in-out infinite; }
  #rotateOv b { font-size: 24px; font-weight: 900; } #rotateOv small { font-size: 14px; color: #7a6a80; font-weight: 700; }
}
@keyframes rotPhone { 0%, 30% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(0deg); } }
/* 🛒 상점이 열려 있으면 알림·팝업은 아래쪽으로 비켜서 작게 */
body.shopOpen #toast { top: auto !important; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 6px) !important; z-index: 70 !important; max-width: 86vw !important; }
body.shopOpen #popHost { top: auto !important; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 56px); z-index: 70; transform: translateX(-50%) scale(.72); transform-origin: 50% 100%; }
body.shopOpen #invAnn { display: none; }
/* 🏠 기지 창: 닫기 버튼 */
#basePanel { position: fixed; }
#basePanel .bX { position: sticky; top: 0; float: right; z-index: 2; width: 40px; height: 40px; margin: -2px -2px 0 6px; border: 3px solid #fff; border-radius: 50%; background: #ff6f91; color: #fff; font-weight: 900; font-size: 17px; box-shadow: 0 3px 0 #c94a6a; cursor: pointer; padding: 0; }
#baseOpenBtn { background: linear-gradient(180deg, #ffd27a, #ff9f1a); box-shadow: 0 5px 0 #c26a00; }
/* 작은 터치 대상: 보이는 크기는 그대로, 누르는 범위만 넓힘 (40px 이상) */
#rank .rTabs button, .xpPill, #dgMap button, #fishPill, #dexBtn, #tagBtn, #gameBtns .mini { position: relative; }
#rank .rTabs button::after, .xpPill::after, #dgMap button::after, #fishPill::after, #dexBtn::after, #tagBtn::after, #gameBtns .mini::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 42px; transform: translateY(-50%); min-height: 100%; }
#rank .rTabs button { min-height: 30px; }
/* 상황 버튼 모음에 들어간 물고기 칩·문 버튼 모양 정리 */
#ctxStack > #fishPill { animation: none; }
#ctxStack > #dgDoorBtn, #ctxStack > #dgHomeBtn { animation: none; }
/* 지하에서는 시계(날씨) 칩을 숨김 (작은 지도와 겹침) */
body.dgUnder #envPill { display: none !important; }
@media (max-width: 600px) {
  /* 지하 깊이 띠: 순위표 아래 가운데 대신, 왼쪽 보물·곤충 칩 아래 (지도·아이템바를 피해서) */
  #dgDepth { top: calc(max(8px, env(safe-area-inset-top)) + 264px) !important; left: 8px !important; transform: none !important; max-width: calc(100vw - 100px) !important; }
  #dgDbgBtn { top: calc(max(8px, env(safe-area-inset-top)) + 336px) !important; }
  /* 기지 창: 코인·도감 줄 아래부터, 열려 있는 동안 왼쪽 보물·곤충·길 안내 칩은 잠깐 숨김 */
  #basePanel { top: calc(max(8px, env(safe-area-inset-top)) + 186px) !important; left: 8px !important; bottom: auto !important; width: 210px !important; max-height: min(46vh, calc(100dvh - 186px - 250px)) !important; padding-top: 6px !important; }
  body.baseOpen #xpPills, body.baseOpen #nav, body.baseOpen #nav2 { display: none !important; }
  /* 이모티콘 창: 달리기·아이템 버튼을 덮지 않게 가운데 아래 */
  #emotes { left: calc(50% - 72px) !important; right: auto !important; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 150px) !important; }
}
/* 좁은 휴대폰(360px): 물총·검 버튼이 조이스틱과 겹치지 않게 위로 */
@media (max-width: 380px) and (hover: none), (max-width: 380px) and (pointer: coarse) {
  #gunBtn, #dgSwBtn { right: 150px !important; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 90px) !important; }
}
/* 컴퓨터: 아이템바가 오른쪽 지도·시계와 겹치지 않게 아래로 */
@media (hover: hover) and (pointer: fine) {
  #itemBar { top: 350px; transform: none; }
}
@media (hover: hover) and (pointer: fine) and (max-height: 720px) {
  #itemBar { top: auto; bottom: 150px; flex-direction: row; }
}
#tutBox.under { display: none; }
body.baseOpen #xpPills { display: none !important; }
@media (max-width: 600px) { #dgDepth { max-width: calc(100vw - 120px) !important; } }
/* 키 작은 휴대폰(높이 700px 이하): 작은 지도·아이템바를 조금 작게 해서 서로 안 겹치게 */
@media (max-width: 600px) and (max-height: 700px) {
  #dgMap canvas { width: 84px !important; height: 84px !important; }
  #itemBar { gap: 4px !important; }
  #itemBar button { width: 44px !important; height: 44px !important; font-size: 16px !important; }
  #itemBar { right: 30px !important; }
}
/* (B-ui v2) 휴대폰: 🔰 첫 모험 패널(tutorial.js)은 길 안내 칩(#nav·#nav2) 아래로 · 큰 알림은 오른쪽 지도(레이더)와 안 겹치게 폭 제한 */
@media (max-width: 600px) {
  #xpPills > #tutBox { margin-top: 80px; }
  #toast { max-width: calc(100vw - 200px) !important; }
}
@media (max-width: 600px) and (max-height: 700px) { #xpPills > #tutBox li small { display: none; } }
/* (B-ui v2) 키 작은 휴대폰: 상황 버튼(문·밧줄·쓰다듬기…)이 떠 있으면 첫 모험 패널은 제목 줄만 */
@media (max-width: 600px) and (max-height: 700px) { body:has(#ctxStack > :not(.hidden)) #xpPills > #tutBox ol, body:has(#ctxStack > :not(.hidden)) #xpPills > #tutBox .tutNav { display: none !important; } }

/* test-reset */
#resetBtn { border: 3px solid #fff; border-radius: 999px; padding: 10px 16px; background: linear-gradient(180deg, #ffd27a, #ff8a3a); color: #fff; font-weight: 900; font-size: 15px; line-height: 1.15; box-shadow: 0 4px 0 #c25a1a; cursor: pointer; font-family: inherit; animation: popIn .25s ease; }
#resetBtn.hidden, #resetPop.hidden { display: none !important; }
#resetPop { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.25); }
#resetPop .rpBox { width: min(290px, 84vw); padding: 16px 16px 14px; border-radius: 22px; border: 4px solid #fff; background: linear-gradient(180deg, #fffdf4, #fff1dc); box-shadow: 0 10px 30px rgba(0,0,0,.3); text-align: center; color: #4a3020; animation: popIn .3s ease; }
#resetPop b { display: block; font-size: 17px; }
#resetPop small { display: block; margin: 6px 0 12px; font-size: 13px; color: #7a6050; }
#resetPop .rpBtns { display: flex; gap: 10px; }
#resetPop .rpBtns button { flex: 1; border: 3px solid #fff; border-radius: 999px; padding: 10px 0; font-size: 16px; font-weight: 900; color: #fff; cursor: pointer; font-family: inherit; }
#resetPop .rpOk { background: linear-gradient(180deg, #ff9a7a, #ff5a3a); box-shadow: 0 4px 0 #b8341c; }
#resetPop .rpNo { background: linear-gradient(180deg, #c8d0d8, #8a96a4); box-shadow: 0 4px 0 #5a6470; }

/* hud-declutter v3 */
/* 줍기 버튼 → 들고 있을 땐 버리기 */
#pickBtn.drop { background: linear-gradient(180deg, #ffb37a, #ff6a3d) !important; color: #fff !important; box-shadow: 0 5px 0 #b8441c !important; animation: none !important; }
/* 알 옆 "E 조약돌알 줍기" 안내: 눌러도 줍기 */
#hint.tap { pointer-events: auto; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
#hint.tap:active { filter: brightness(1.1); transform: translateX(-50%) scale(.96); }
@media (hover: none) { #hint.tap { min-height: 44px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 8px 14px !important; } }
@media (max-width: 600px) {
  /* 보물·곤충: 한 줄 작은 칩 두 개 (흐릿하게), 누르면 각 도감 */
  #xpPills { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: start; gap: 4px; }
  #xpPills > .xpPill { font-size: 11px; padding: 1px 7px; border-width: 2px; opacity: .72; box-shadow: 0 2px 0 rgba(0,0,0,.12); white-space: nowrap; }
  #xpPills > .xpPill:active { opacity: 1; }
  #xpPills .xpPill .lab, #xpPills #bugPill .dx { display: none; }
  #xpPills > #tutBox { grid-column: 1 / -1; margin-top: 60px; }
  /* 길 안내 칩: 작고 흐릿하게 (알 들고 있을 땐·누르면 또렷) */
  #nav, #nav2 { pointer-events: auto !important; opacity: .75; transition: opacity .2s; font-size: 12px !important; padding: 1px 8px 1px 2px !important; border-width: 2px !important; max-width: 44vw; }
  #nav { top: calc(max(8px, env(safe-area-inset-top)) + 218px) !important; }
  #nav2 { top: calc(max(8px, env(safe-area-inset-top)) + 244px) !important; }
  #nav #navArrow, #nav2 .navArrow { width: 18px !important; height: 18px !important; line-height: 18px !important; font-size: 11px !important; }
  #nav.peek, #nav2.peek, #nav.carry, #nav.low { opacity: 1; }
  /* 🔰 첫 모험: 평소엔 지금 단계만 한 줄 칩 (누르면 펼침) */
  #xpPills#xpPills > #tutBox#tutBox:not(.exp) { width: auto; max-width: 62vw; display: flex; align-items: center; gap: 4px; padding: 2px 4px 2px 6px; border-width: 2px; border-radius: 999px; opacity: .8; cursor: pointer; box-shadow: 0 2px 0 rgba(255,170,40,.35); }
  #xpPills#xpPills > #tutBox#tutBox:not(.exp) .tutHead { display: none; }
  #xpPills#xpPills > #tutBox#tutBox:not(.exp) ol { display: flex !important; margin: 0; min-width: 0; }
  #xpPills#xpPills > #tutBox#tutBox:not(.exp) li { display: none; }
  #xpPills#xpPills > #tutBox#tutBox:not(.exp) li.now { display: flex; padding: 0; gap: 3px; background: none; box-shadow: none; animation: none; font-size: 11px; white-space: nowrap; }
  #xpPills#xpPills > #tutBox#tutBox:not(.exp) li .ic { width: auto; }
  #xpPills#xpPills > #tutBox#tutBox:not(.exp) li.now::before { content: '🔰'; font-size: 10px; }
  #xpPills#xpPills > #tutBox#tutBox:not(.exp) li small, #xpPills#xpPills > #tutBox#tutBox:not(.exp) li em { display: none; }
  #xpPills#xpPills > #tutBox#tutBox:not(.exp) .tutNav:not(.hidden) { display: flex !important; margin: 0; padding: 1px 6px; font-size: 0; gap: 2px; box-shadow: 0 2px 0 #1f8a5a; }
  #xpPills#xpPills > #tutBox#tutBox:not(.exp) .tutNav .arr { font-size: 12px; }
  #xpPills#xpPills > #tutBox#tutBox:not(.exp) .tutNav .tx b { font-size: 11px; }
  /* 펼친 상태는 예전처럼 (접힘 기록 min 무시) */
  #xpPills#xpPills > #tutBox#tutBox.exp ol { display: flex !important; }
  #xpPills#xpPills > #tutBox#tutBox.exp .tutNav:not(.hidden) { display: flex !important; }
  #xpPills#xpPills > #tutBox#tutBox.exp .tutHead i { transform: rotate(180deg); }
  #xpPills > #tutBox.under { display: none !important; }
}
/* (hud-declutter v3) ⛏️ 땅파기 버튼: 왼쪽 상황 버튼 모음(🏠 귀환·🚪 문·🛒 상점)과 안 겹치게 오른쪽 아래 큰 버튼 자리로 */
@media (hover: none), (pointer: coarse) {
  #dgDigBtn { left: auto !important; transform: none !important; right: 98px !important; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 8px) !important; width: 76px; height: 76px; padding: 0 !important; border-radius: 50% !important; flex-direction: column; justify-content: center; gap: 0 !important; font-size: 26px !important; line-height: 1; }
  #dgDigBtn b { font-size: 13px !important; margin-top: 2px; }
  #dgDigBtn.on { transform: scale(.93) !important; }
  body:has(#dgDigBtn:not(.hidden)) #pickBtn { display: none !important; }   /* 땅 파는 자리엔 주울 게 없음 → 그 자리를 땅파기가 씀 */
}
@media (hover: hover) and (pointer: fine) {
  #dgDigBtn { left: calc(50% + 120px) !important; transform: none !important; bottom: 84px !important; }
  #dgDigBtn.on { transform: scale(.93) !important; }
}
/* 좁은 휴대폰(360px): 검 버튼이 물총과 같은 자리 → 물총 위로, 베기는 그 위로 */
@media (max-width: 380px) and (hover: none), (max-width: 380px) and (pointer: coarse) {
  #dgSwBtn { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 150px) !important; }
  #dgSlashBtn { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 214px) !important; }
}

/* rods */
.rodList .shoeRow { gap: 8px; }
.rodRow .lv { width: 30px; font-size: 20px; text-align: center; flex: none; }
.rodRow .nm { min-width: 0; }
.rodRow .nm small { line-height: 1.35; word-break: keep-all; }
.rodRow .nm small i { font-style: normal; color: #8a6a00; }
.rodRow.rodOn { background: #e6f6e9; outline: 2px solid #5cc06e; }
.rodRow.next { background: #fff4c9; outline: 2px solid #f2c230; }
.rodRow .rodBtn { width: auto !important; flex: none; margin: 0; white-space: nowrap; padding: 8px 10px; }
.rodRow .ok { flex: none; white-space: nowrap; }
.rodRow .rodSw5 { background: linear-gradient(#ff5b5b, #ffd23a, #5cd65c, #4aa8ff, #b05cff) !important; }
.rodRow .rodSw6 { box-shadow: 0 0 8px #ffd23a; }

/* sword-surface */
/* 휴대폰: 💦 쏘기(또는 땅 위 ⚔️ 베기) 버튼이 떠 있으면 'E 조약돌알 줍기' 안내는 그 버튼 위로 (절대 안 겹치게) */
@media (hover: none), (pointer: coarse) {
  body:has(#shootBtn:not(.hidden)) #hint, body.swSurf:has(#dgSlashBtn:not(.hidden)) #hint { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 250px) !important; }
  /* 땅 위 🚨 침공 때 검: ⚔️ 베기 = 💦 쏘기 자리 (검·물총은 하나만 꺼냄), ⚔️ 검/넣기 = 🔫 물총 버튼 위 */
  body.swSurf #dgSlashBtn { right: 156px !important; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 154px) !important; }
  body.swSurf #dgSwBtn { right: 186px !important; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 82px) !important; }
}
@media (max-width: 380px) and (hover: none), (max-width: 380px) and (pointer: coarse) {
  body.swSurf #dgSwBtn { right: 90px !important; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 150px) !important; }
}
/* 컴퓨터: 땅 위 검 버튼은 물총(🔫 G)·쏘기 옆으로 */
@media (hover: hover) and (pointer: fine) {
  body.swSurf #dgSwBtn { right: 176px; bottom: 84px; }
  body.swSurf #dgSlashBtn { right: 96px; bottom: 82px; }
}
.dgBar.mine.edge { animation: swEdge 0.8s ease-in-out infinite; }
@keyframes swEdge { 50% { box-shadow: 0 0 14px 3px rgba(255,80,80,.85); border-color: #ffe14a; } }
.dgBar.mine.edge b { color: #ffe14a; }

/* fix: 낚시 후 상점 버튼을 누르면 물고기 도감이 열리던 문제 — 상황 버튼 모음 안의 물고기 칩은 터치 범위 넓히기(::after 42px)가
   바로 옆 🛒 상점 버튼 위까지 덮고 있었음 → 모음 안에서는 넓히기 끔, 칩 크기 자체를 키움 */
#ctxStack > #fishPill::after { display: none !important; }
#ctxStack > #fishPill { min-height: 40px; display: inline-flex; align-items: center; }
#ctxStack > * { position: relative; }

/* 줍기 버튼은 실제로 주울 수 있을 때(알 옆 .ready / 드래곤 보물 옆 .loot)나 들고 있을 때(.drop = 버리기)만 보이게 */
#pickBtn:not(.ready):not(.drop):not(.loot) { display: none !important; }
#pickBtn.loot:not(.drop) { background: linear-gradient(180deg, #ffe066, #f5b400) !important; color: #5a3a00 !important; }

/* 도감 닫기 버튼 크게 (물고기 카드·물고기/곤충/보물/내 도감) */
.fcTap { display: block; margin: 10px auto 0; min-width: 150px; height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #ffd27a, #ffab3d); color: #5a3a00; font-size: 17px !important; font-weight: 900; opacity: 1 !important; box-shadow: 0 4px 0 #c9781a; cursor: pointer; }
.fbX, .dxX, .bookOv .x, .bookIn .x { width: 48px !important; height: 48px !important; font-size: 24px !important; font-weight: 900; background: #ffab3d !important; color: #fff !important; box-shadow: 0 3px 0 #c9781a; }
/* 🥚🥚 알 쌓기: 줍기/버리기 버튼에 쌓은 개수 */
#pickBtn[data-n]::after { content: '🥚' attr(data-n); position: absolute; top: -8px; right: -10px; background: #fff; color: #b8441c; border: 2px solid #ff8a3d; border-radius: 999px; padding: 1px 6px; font-size: 12px; font-weight: 900; line-height: 1.3; white-space: nowrap; }

/* 🥐 미사동 즐길 거리 (2편에서 가져옴) */
#kickBtn { position: fixed; right: 20px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 116px); width: 78px; height: 78px; border-radius: 50%; color: #fff; font-weight: 900; font-size: 15px; z-index: 8; background: linear-gradient(180deg, #7ee787, #2f9e55); border: 4px solid #fff; box-shadow: 0 5px 0 #1f6e3a; touch-action: manipulation; }
#rideBtn { position: fixed; left: 20px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 232px); padding: 10px 14px; border-radius: 999px; color: #fff; font-weight: 900; font-size: 14px; z-index: 6; background: linear-gradient(180deg, #4ad6e8, #2a7fd8); border: 3px solid #fff; box-shadow: 0 4px 0 #1f5f9a; touch-action: manipulation; }
#rideBtn.on { background: linear-gradient(180deg, #ffb347, #ff5f5f); box-shadow: 0 4px 0 #b03030; }
#runBtn.swim { background: linear-gradient(180deg, #4ad6e8, #2a8fd8) !important; box-shadow: 0 5px 0 #1f5f9a !important; }
#buffs { position: fixed; right: 10px; top: calc(max(10px, env(safe-area-inset-top)) + 300px); display: flex; flex-direction: column; gap: 4px; z-index: 5; pointer-events: none; max-width: 46vw; align-items: flex-end; }
#buffs span { background: rgba(20,24,36,.78); color: #fff; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 10px; }
#buffs small { font-weight: 600; opacity: .85; } #buffs b { color: #ffe14a; }
#earn { position: fixed; left: 50%; top: 42%; transform: translateX(-50%); font-size: 26px; font-weight: 900; color: #ffd23a; text-shadow: 0 2px 0 #7a4d00, 0 3px 8px rgba(0,0,0,.45); opacity: 0; pointer-events: none; z-index: 7; }
#earn.pop { animation: earnPop .8s ease-out; }
@keyframes earnPop { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.8); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -40px) scale(1); } }
.shopSec { margin: 12px 0 4px; font-weight: 900; color: #2f6e4f; } .shopSec small { font-weight: 600; color: #8a8a7a; font-size: 12px; margin-left: 4px; }
.shopItem { display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px 6px; border: 0; border-bottom: 1px solid #eee; background: none; text-align: left; cursor: pointer; font-family: inherit; }
.shopItem .e { font-size: 24px; width: 32px; text-align: center; flex: none; } .shopItem .t { flex: 1; min-width: 0; } .shopItem .t b { display: block; font-size: 14px; } .shopItem .t small { color: #8a8a7a; font-weight: 500; font-size: 12px; }
.shopItem .p { color: #a06a00; white-space: nowrap; } .shopItem:disabled { opacity: .5; }
#clawCv { display: block; margin: 8px auto; width: min(100%, 320px); height: auto; border-radius: 14px; border: 3px solid #ff8fd0; touch-action: none; }
#dgShop .card { max-height: 86vh; overflow: auto; }

#tagBtn.off { filter: grayscale(.85); opacity: .7; }
#tagBtn.ready { animation: shoePulse 1s infinite; }
@media (max-width:600px){#dexBtn{padding:4px 10px!important;font-size:13px!important}}

#runBtn.bike { background: linear-gradient(180deg, #7ee787, #2f9e55) !important; box-shadow: 0 5px 0 #1f6e3a !important; }
/* v9: 순위표 넓게 (긴 닉네임 줄바꿈 안 되게) · 휴대폰 Q·R·H 버튼 오른쪽 끝으로 */
#rank { min-width: 190px !important; max-width: 72vw !important; }
#rank div { white-space: nowrap; }
#rank div > *:not(b):not(span):not(i) { overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
@media (max-width: 600px) { #rank { min-width: 172px !important; } #itemBar { right: 3px !important; gap: 6px !important; } #itemBar button { width: 54px !important; height: 54px !important; } }
#tagBtn.off { display: none !important; }
/* 👥 시작 화면 인원 */
#enter .popInfo { text-align: center; color: #6b6c5e; font-size: 14px; margin: 12px 0 2px; }
#enter .popInfo b { color: #2b8a3e; font-size: 16px; }
#enter .popInfo .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3cc85a; margin-right: 4px; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(60,200,90,.2); }
#roomPill .code { font-weight: 700; color: #2b8a3e; letter-spacing: 0; }
#tagBtn.joined { background: linear-gradient(180deg,#ffd23a,#f29a1b) !important; color: #4a2a00 !important; }
#colors { flex-wrap: nowrap; gap: clamp(4px, 1.6vw, 8px); } #colors button { width: clamp(30px, 9vw, 36px); height: clamp(30px, 9vw, 36px); flex: 0 0 auto; }   /* 7색 한 줄 */
/* 🗡️ 하수도 찌르기 (검 베기 버튼 자리) */
#dgStabBtn { position: fixed; right: 236px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 80px); width: 70px; height: 70px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 26px; color: #fff; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.25); z-index: 30; }
#dgStabBtn b { font-size: 12px; }
#dgStabBtn.hidden { display: none !important; }

/* 휴대폰 순위표: 이름이 길어도 오른쪽 숫자가 안 잘리게 */
@media (max-width: 600px) { #rank { min-width: 0 !important; width: min(196px, 52vw) !important; max-width: 52vw !important; box-sizing: border-box; } #rank div { min-width: 0; } #rank div > *:not(b):not(span):not(i) { max-width: 26vw; } }
#netBanner.kicked { background: #2f3542; color: #fff; pointer-events: auto; }
#netBanner #netHere { margin-left: 8px; border: 0; border-radius: 999px; padding: 6px 12px; font-weight: 800; background: #ffd23a; color: #4a3300; cursor: pointer; min-height: 32px; }
#enter.loading .card { text-align: center; } #enter .loadMsg { margin: 18px 0 6px; font-size: 16px; font-weight: 800; color: #b5651d; animation: loadPulse 1.4s ease-in-out infinite; } @keyframes loadPulse { 50% { opacity: .45; } }
/* 🪟 팝업: 화면 높이 안에서만, 내용만 스크롤 · 제목/닫기는 위에 고정 */
.overlay .card { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain; box-sizing: border-box; }
.overlay .card > .row:first-child, .overlay .card > .popHead, .overlay .card > h2:first-child { position: sticky; top: -18px; z-index: 3; background: inherit; padding-top: 6px; padding-bottom: 6px; }
.bookOv .bookIn, .fishBook > div, .dexBook > div { max-height: calc(100dvh - 24px); overflow: auto; }
.bookIn .x, .bookOv .x { position: sticky; top: 0; float: right; z-index: 3; }
body.popOpen #camBtn, body.popOpen #setBtn, body.popOpen .ctxAct, body.popOpen .dgBtn, body.popOpen #emoteBtn, body.popOpen #tagBox, body.popOpen #itemBar { visibility: hidden !important; pointer-events: none !important; }
.popHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.popHead h2 { margin: 0; font-size: 20px; }
#setBtn { position: fixed; z-index: 30; width: 38px; height: 38px; border-radius: 50%; border: 2px solid #fff; background: rgba(20,24,36,.55); color: #fff; font-size: 17px; line-height: 1; padding: 0; cursor: pointer; display: none; }
body.inGame #setBtn { display: block; }
body.photo #setBtn { visibility: hidden !important; }
.setRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; border-top: 1px solid #eee; font-weight: 700; min-height: 44px; }
.setRow input[type=checkbox] { width: 24px; height: 24px; }
.setRow input[type=range] { width: 52%; }
#setHome { width: 100%; min-height: 48px; }
/* 🗺️ 미사리 지도 패널 */
.mapCard { width: min(560px, 94vw); }
.mbList { display: flex; flex-direction: column; gap: 8px; }
.mbItem { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: #fff7ea; border: 2px solid #f1e2c6; }
.mbIc { font-size: 28px; width: 40px; text-align: center; flex: 0 0 auto; }
.mbTx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mbTx b { font-size: 16px; } .mbTx small { color: #6b6c5e; font-size: 13px; } .mbTx em { font-style: normal; color: #b5651d; font-size: 12px; font-weight: 700; }
.mbGo { flex: 0 0 auto; min-height: 44px; min-width: 76px; padding: 8px 12px !important; font-size: 14px !important; }
.mbH { margin: 16px 0 6px; font-size: 16px; }
.mbCtl { margin: 0; padding-left: 18px; color: #4a4b40; font-size: 14px; line-height: 1.7; }
/* 🧭 길 안내 칩 (위 가운데) */
#guideChip { position: fixed; left: 50%; transform: translateX(-50%); top: calc(max(8px, env(safe-area-inset-top)) + 62px); z-index: 25; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 999px; background: #ffd23a; color: #4a2a00; font-weight: 900; font-size: 15px; box-shadow: 0 3px 0 #c79a00, 0 6px 16px rgba(0,0,0,.18); pointer-events: auto; max-width: 86vw; }
#guideChip.hidden { display: none; }
#guideChip .gArrow { display: inline-block; font-size: 18px; transition: transform .15s; }
#guideChip .gTxt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#guideChip .gX { border: 0; background: rgba(0,0,0,.12); color: #4a2a00; border-radius: 50%; width: 32px; height: 32px; font-weight: 900; cursor: pointer; }
/* 📰 다른 사람 활동 알림 (아래 가운데, 작게) */
#feed { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 150px); z-index: 18; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; max-width: 80vw; }
.feedItem { background: rgba(20,24,36,.55); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80vw; transition: opacity .4s; }
.feedItem.out { opacity: 0; }
body.popOpen #feed, body.photo #feed { display: none; }
#help { display: none !important; }   /* 조작법은 '미사리 지도' 게시판으로 */
#roomPill .more { display: none !important; }   /* 접속자 수는 제목 옆 'n/40' 하나만 */
#itemBar button.none:not(.act) { display: none !important; }   /* 아이템은 가지고 있을 때만 */
svg.ic { width: 1.1em; height: 1.1em; vertical-align: -0.18em; display: inline-block; }
/* ☰ 좌측 패널 접기 (기본: 접힘 — 랭킹·보물·곤충·바로가기) */
body.leftFold #rank, body.leftFold #xpPills, body.leftFold #nav, body.leftFold #nav2 { display: none !important; }
#leftToggle { display: none; border: 2px solid #fff; border-radius: 999px; background: rgba(255,255,255,.9); color: #4a4b40; font-weight: 900; font-size: 13px; padding: 0 12px; min-height: 36px; cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,.06); pointer-events: auto; }
body.inGame #leftToggle { display: block; }
body.photo #leftToggle { visibility: hidden !important; }
@media (pointer: coarse) { #leftToggle, #shareBtn, #dexBtn, #xpPills > *, #rank .rTabs button, #guideChip .gX, #setBtn, #camBtn { min-height: 44px; min-width: 44px; } #setBtn, #camBtn { width: 44px !important; height: 44px !important; } }
/* 🛒 상점 분류 탭: 두 줄로 감싸서 뒤쪽 분류도 다 보이게 */
#shop .tabs { flex-wrap: wrap !important; overflow: visible !important; row-gap: 6px; }
#shop .tabs button { flex: 0 0 auto; min-height: 40px; }
/* 📱 가로 화면: 막지 않고 버튼만 다시 배치 (회전 안내 없음) */
#rotateOv { display: none !important; }
@media (orientation: landscape) and (max-height: 460px) {
  #roomPill { padding: 3px 8px !important; font-size: 12px !important; }
  #ctxStack { left: auto !important; right: 120px !important; transform: none !important; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 8px) !important; max-height: 60vh; flex-direction: column-reverse; align-items: flex-end; }
  .ctxAct { padding: 6px 12px !important; font-size: 13px !important; min-height: 40px; }
  #stick { transform: scale(.78); transform-origin: left bottom; }
  #jumpBtn, #runBtn { transform: scale(.8); transform-origin: right bottom; }
  #itemBar { bottom: auto !important; top: 50% !important; transform: translateY(-50%); }
  #rank, #xpPills, #tutBox { font-size: 11px !important; }
  #guideChip { top: 6px !important; }
}
/* 🗺️ 지도 패널 버튼은 줄 전체를 차지하지 않게 */
.mbItem .mbGo { width: auto !important; flex: 0 0 auto; }
@media (max-width: 360px) { #shareBtn { font-size: 0 !important; padding: 0 10px !important; } #shareBtn::before { content: '📣'; font-size: 16px; } }
@media (orientation: landscape) and (max-height: 460px) {
  #radar { width: 72px !important; height: 72px !important; }
  #stick { transform: scale(.62) !important; }
  #jumpBtn, #runBtn, #gunBtn, #emoteBtn { transform: scale(.66) !important; transform-origin: right bottom; }
  #gunBtn, #emoteBtn { transform-origin: center bottom; }
  #ctxStack { right: 150px !important; }
  #invAnn, .popup { transform: scale(.75) !important; }
}
/* 💬 이모티콘 · 한마디 · 쪽지 */
#emotes.sayBox { flex-direction: column; align-items: stretch; gap: 6px; width: min(360px, 92vw); padding: 8px; border-radius: 20px; }
#emotes .sayTabs { display: flex; gap: 4px; }
#emotes .sayTabs button { flex: 1; height: 40px; width: auto; border-radius: 12px; font-size: 13px; font-weight: 800; background: #f1efe6; box-shadow: none; }
#emotes .sayTabs button.on { background: #ffd23a; color: #4a2a00; }
#emotes .sayPane { display: none; max-height: 46vh; overflow: auto; }
#emotes .sayPane.on { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
#emotes .sayPane[data-p="say"].on, #emotes .sayPane[data-p="note"].on { display: block; }
#emotes .sayHint { margin: 2px 4px 6px; font-size: 12px; color: #6b6c5e; }
#emotes .sayGrp { margin-bottom: 6px; } #emotes .sayGrp b { display: block; font-size: 12px; color: #b5651d; margin: 0 4px 3px; }
#emotes .sayGrp > div { display: flex; flex-wrap: wrap; gap: 5px; }
#emotes .sayBtn { width: auto; height: auto; min-height: 40px; border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 700; background: #fff; box-shadow: 0 2px 0 rgba(0,0,0,.08); }
body.photo #radar, body.photo canvas#radar { visibility: hidden !important; }
#enter.loading { background: linear-gradient(rgba(20,24,60,.25), rgba(20,24,60,.45)), url(/og.jpg) center / cover no-repeat, #2c3a78; }   /* 🌅 로딩 배경 = 노을 호수 */
/* 💦 쏘기 버튼 = 점프 버튼 바로 왼쪽 (휴대폰) */
@media (pointer: coarse), (hover: none) { #shootBtn { right: 104px !important; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 17px) !important; width: 72px !important; height: 72px !important; } }
@media (orientation: landscape) and (max-height: 460px) { #shootBtn { right: 84px !important; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 4px) !important; transform: scale(.85); transform-origin: right bottom; } }
.setName { display: flex; gap: 8px; align-items: center; } .setName label { white-space: nowrap; font-weight: 800; } .setName input { flex: 1; min-width: 0; font-size: 16px; padding: 8px 10px; border-radius: 10px; border: 2px solid #e2dccb; } .setName .primary { width: auto !important; padding: 8px 14px; }
/* 🚓💰 경찰과도둑 할 일 카드 */
#copsGuide { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 34px); transform: translateX(-50%); z-index: 9; width: min(360px, calc(100vw - 24px)); background: rgba(255,255,255,.96); border-radius: 16px; padding: 10px 12px; box-shadow: 0 6px 20px rgba(0,0,0,.22); font-size: 13px; line-height: 1.45; color: #2a2a35; cursor: pointer; pointer-events: auto; }
#copsGuide.hidden { display: none; }
#copsGuide .cgHead { font-size: 14px; font-weight: 700; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
#copsGuide .cgTog { font-size: 11px; color: #7a7a8a; white-space: nowrap; }
#copsGuide ol { margin: 6px 0 4px 18px; padding: 0; } #copsGuide li { margin: 3px 0; }
#copsGuide .cgTip { background: #fff4d6; border-radius: 10px; padding: 6px 8px; font-size: 12px; }
#copsGuide.mini { width: auto; max-width: calc(100vw - 24px); padding: 6px 12px; border-radius: 999px; }
body.popOpen #copsGuide { display: none; }
/* 🛸 미니 UFO 상승·하강 */
#ufoBox { position: fixed; right: 112px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 104px); z-index: 8; display: flex; flex-direction: column; gap: 8px; align-items: center; }
#ufoBox.hidden { display: none; }
#ufoBox button { width: 60px; height: 60px; border-radius: 50%; border: 4px solid #fff; background: linear-gradient(180deg, #8ff0ff, #3aa8ff); color: #fff; font-size: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 0 #1f6fb0; touch-action: none; user-select: none; -webkit-user-select: none; }
#ufoBox button b { font-size: 11px; margin-top: 1px; } #ufoBox #ufoDown { background: linear-gradient(180deg, #c9b8ff, #7a5cff); box-shadow: 0 4px 0 #4a34b0; }
#ufoBox #ufoAlt { font: 800 12px system-ui, sans-serif; color: #fff; background: rgba(0,0,0,.45); border-radius: 999px; padding: 2px 8px; }
@media (hover: hover) and (pointer: fine) { #ufoBox { right: 24px; bottom: 170px; } #ufoBox button b::after { content: ''; } #ufoUp b::before { content: 'R '; } #ufoDown b::before { content: 'V '; } }
body:has(#shootBtn:not(.hidden)) #ufoBox { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 110px); }
/* 🔔 자전거 벨 */
#bellBtn { position: fixed; right: 112px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 104px); z-index: 8; width: 64px; height: 64px; border-radius: 50%; border: 4px solid #fff; background: linear-gradient(180deg, #ffe66d, #ffb200); color: #6a4300; font-size: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 0 #c98a00; touch-action: none; user-select: none; -webkit-user-select: none; }
#bellBtn b { font-size: 11px; } #bellBtn.hidden { display: none; } #bellBtn.ring { animation: bellShake .5s; }
@keyframes bellShake { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-18deg); } 40% { transform: rotate(16deg); } 60% { transform: rotate(-10deg); } 80% { transform: rotate(6deg); } }
@media (hover: hover) and (pointer: fine) { #bellBtn { right: 24px; bottom: 170px; } #bellBtn b::before { content: 'Q '; } }
/* 📮 쪽지 · 📬 우편함 */
#mailPanel .sayTabs { display: flex; gap: 6px; margin: 6px 0; } #mailPanel .sayTabs button { flex: 1; border: 3px solid #fff; border-radius: 999px; padding: 8px; font-weight: 900; background: #efe6cc; min-height: 44px; } #mailPanel .sayTabs button.on { background: linear-gradient(135deg, #ffe14a, #ff8fd0); }
#mailPanel .sayGrp { margin: 8px 0; } #mailPanel .sayGrp b { display: block; font-size: 13px; color: #7a5a20; margin-bottom: 4px; }
#mailPanel .sayBtn { border: 2px solid #ffd2e4; background: #fff; border-radius: 999px; padding: 8px 12px; margin: 3px; font-weight: 800; min-height: 40px; }
#mailPanel .sayHint { font-size: 12px; color: #8a6d20; margin: 2px 0; }
#inboxBtn { position: fixed; left: 12px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 210px); z-index: 8; width: 52px; height: 52px; border-radius: 50%; border: 3px solid #fff; background: linear-gradient(180deg, #ffd6e8, #ff8fb1); font-size: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 0 #c0507e; }
#inboxBtn b { font-size: 11px; color: #fff; } #inboxBtn.hidden { display: none; } #inboxBtn.new { animation: shoePulse 1s infinite; }
.ibRow { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 14px; padding: 8px 10px; margin-bottom: 6px; } .ibFrom { font-weight: 900; color: #c0507e; white-space: nowrap; } .ibT { flex: 1; } .ibH { border: 0; border-radius: 999px; padding: 6px 10px; font-weight: 900; background: #ff8fb1; color: #fff; min-height: 36px; } .ibH.on { background: #c9c0b0; }
#runBtn.ufoGo { background: linear-gradient(180deg, #8ff0ff, #7a5cff) !important; color: #fff !important; }
/* 🎢 코스터 바람선 */
#coasterFx { position: fixed; inset: 0; pointer-events: none; z-index: 4; opacity: 0; transition: opacity .4s; background: radial-gradient(ellipse at center, rgba(255,255,255,0) 45%, rgba(255,255,255,.18) 70%, rgba(255,255,255,.35) 100%), repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0deg 6deg, rgba(255,255,255,.12) 6deg 7deg); }
#coasterFx.on { opacity: 1; animation: cfx .25s linear infinite; } #coasterFx.hidden { display: block; opacity: 0; }
@keyframes cfx { 50% { transform: scale(1.04); } }
#coasterBtn { background: linear-gradient(180deg, #b07dff, #7a5cff) !important; color: #fff !important; }
/* 🚓 경도 안내: 휴대폰에선 왼쪽 작게 (작은 지도·위쪽 버튼을 안 가리게), 안내가 있으면 위쪽 큰 배너는 숨김 */
body.cgOn #banner { display: none !important; }
@media (max-width: 760px) {
  #copsGuide { left: 8px; transform: none; top: calc(max(8px, env(safe-area-inset-top)) + 168px); width: min(250px, calc(100vw - 170px)); font-size: 11.5px; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.9); }
  #copsGuide .cgHead { font-size: 12px; } #copsGuide ol { margin: 4px 0 2px 16px; } #copsGuide .cgTip { font-size: 11px; padding: 4px 6px; }
  #copsGuide.mini { width: auto; max-width: calc(100vw - 170px); }
}
@media (orientation: landscape) and (max-height: 460px) { #copsGuide { top: calc(max(6px, env(safe-area-inset-top)) + 96px); width: min(260px, 40vw); } }