* { 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) { display: none; }
  #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; } }