:root {
  --glass: rgba(250, 248, 242, 0.8);
  --ink: #2f3a33;
  --muted: #6d776f;
  --accent: #4f7d6a;
  --bite: #e0694c;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #ecebe4;
  color: var(--ink);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#app canvas { display: block; touch-action: none; cursor: grab; }
#app canvas:active { cursor: grabbing; }

/* 위쪽 두 줄(왼쪽 이름·BEST, 오른쪽 아이콘 4개)은 높이를 맞춘다 */
:root { --rowH: 38px; --rowGap: 8px; --icoW: 46px; }
.pill {
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  box-shadow: 0 4px 24px rgba(20, 30, 25, 0.12);
}

#topLeft {
  position: fixed; top: 16px; left: 16px;
  height: var(--rowH); box-sizing: border-box;
  padding: 0 16px;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; white-space: nowrap; overflow: hidden;
  max-width: calc(100vw - 32px - 3 * var(--icoW) - 2 * var(--rowGap) - 10px);
}
#topLeft .logo {
  border: 0; background: none; padding: 0;
  font: inherit; font-weight: 700; color: var(--ink); cursor: pointer;
}
#topLeft .logo:hover { color: var(--accent); }

/* 물가(맵) 고르기 창 */
#picker, .overlay {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16, 22, 26, 0.35);
}
#picker.hide, .overlay.hide { display: none; }
.pickerBox {
  background: #f4f3ee; border-radius: 22px; padding: 22px 20px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.pickerTitle { font-size: 16px; font-weight: 700; }
.pickMaps { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.here { display: none; font-size: 11px; color: #fff; background: var(--accent); border-radius: 999px; padding: 2px 8px; margin-top: 4px; }
.pickBtn.current { border-color: var(--accent); }
.pickBtn.current .here { display: inline-block; }
#donateBtn {
  border: 1px solid #e2c98f; background: #fbf3e0; border-radius: 999px;
  padding: 9px 18px; font: inherit; font-size: 14px; color: #6b5226; cursor: pointer;
}
#donateBtn:hover { background: #f6e8c6; }
#donatePanel { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 312px; }
#donatePanel.hide { display: none; }
.donateText { font-size: 13px; color: var(--muted); text-align: center; line-height: 1.5; }
.donateLinks { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.donateLinks a, .donateLinks .soon {
  display: block; text-align: center; padding: 9px 14px; border-radius: 12px;
  background: #fff; border: 1px solid #e3e1d8; color: var(--ink); text-decoration: none; font-size: 14px;
}
.donateLinks a:hover { border-color: var(--accent); }
.donateLinks .soon { color: var(--muted); }

#pickerClose, .closeBtn {
  border: 0; background: none; padding: 6px 14px;
  font: inherit; font-size: 13px; color: var(--muted); cursor: pointer;
}
#topLeft .sep { width: 1px; height: 12px; background: rgba(0, 0, 0, 0.15); }
#nick, #room { color: var(--muted); }
#room { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
#room::after { content: ' ＋'; opacity: 0.8; }
#invitePop { position: fixed; top: 62px; left: 16px; z-index: 6; display: flex; flex-direction: column; gap: 8px; width: 250px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.94); }
#invitePop.hide { display: none; }
.inviteTitle { font-size: 14px; font-weight: 700; }
#inviteBtn { margin-top: 4px; padding: 9px 14px; border-radius: 12px; border: 1px solid #e3e1d8; background: #fff; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
#inviteBtn:hover { border-color: var(--accent); }
#inviteBtn:disabled { color: var(--muted); cursor: default; }

#topRight { position: fixed; top: 16px; right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: var(--rowGap); z-index: 5; }
#topRight .row { display: flex; gap: var(--rowGap); }
#donateTop { font-size: 13px; color: #6b5226; }
#donatePop { display: flex; flex-direction: column; gap: 10px; width: 260px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.94); position: relative; z-index: 6; }
#donatePop.hide { display: none; }
.iconBtn {
  border: 0; padding: 0;
  height: var(--rowH); width: var(--icoW); box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 20px; color: var(--ink);
  cursor: pointer;
}

/* 왼쪽 위 이름 칩 바로 아래 */
#fade {
  position: fixed; inset: 0; background: #10161a;
  opacity: 0; pointer-events: none; transition: opacity 0.45s;
}
#fade.on { opacity: 1; }

#best {
  position: fixed; top: calc(16px + var(--rowH) + var(--rowGap)); left: 16px;
  height: var(--rowH); line-height: var(--rowH); box-sizing: border-box;
  padding: 0 14px; font-size: 13px; white-space: nowrap;
  max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis;
  display: none;
}
#best.show { display: block; }
#best b { font-weight: 700; }
#best .who { color: var(--muted); }
#best.new { animation: glow 1.2s ease-in-out 3; }
@keyframes glow { 50% { box-shadow: 0 0 0 4px rgba(224, 178, 76, 0.55), 0 4px 24px rgba(20, 30, 25, 0.12); } }

#hint {
  position: fixed; top: 112px; left: 50%; transform: translateX(-50%);
  font-size: 13px; color: #fff; white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  transition: opacity 1.2s;
  pointer-events: none;
}

#tag, .tag {
  position: fixed; left: 0; top: 0;
  padding: 3px 10px; font-size: 12px;
  transform: translate(-50%, -100%);
  pointer-events: none; white-space: nowrap;
  opacity: 0; transition: opacity 0.6s;
}

.bubble {
  position: absolute; left: 50%; bottom: calc(100% + 5px);
  transform: translateX(-50%);
  padding: 5px 13px; font-size: 15px;
  background: var(--glass); border-radius: 999px;
  box-shadow: 0 4px 24px rgba(20, 30, 25, 0.12);
  animation: bubbleIn 0.35s ease-out;
}
.bubble.big {
  padding: 0; font-size: 44px; line-height: 1.1;
  background: none; box-shadow: none;
  filter: drop-shadow(0 2px 6px rgba(20, 30, 25, 0.35));
}
@keyframes bubbleIn {
  from { opacity: 0; transform: translate(-50%, 6px) scale(0.8); }
}

/* 왼쪽 위 최대어 줄 아래에 띄운다. 알림이 떠 있는 동안 안내 문구는 숨긴다 */
#toast {
  position: fixed; top: max(11%, 104px); left: 50%;
  transform: translate(-50%, 10px);
  width: max-content; border-radius: 22px; word-break: keep-all;
  padding: 12px 22px; text-align: center;
  font-size: 15px; line-height: 1.5;
  opacity: 0; transition: opacity 0.5s, transform 0.5s;
  pointer-events: none; max-width: calc(100vw - 32px);
}
body:has(#toast.show) #hint { opacity: 0 !important; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast .fishName { font-size: 18px; font-weight: 700; }
#toast .fishLine { font-size: 13px; color: var(--muted); }

#bar {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: max-content;
  display: flex; gap: 4px; padding: 6px;
}
#bar button {
  border: 0; background: transparent;
  min-width: 76px; padding: 8px 12px;
  border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font: inherit; font-size: 12px; color: var(--ink); white-space: nowrap;
  cursor: pointer; transition: background 0.2s, color 0.2s;
}
#bar button .ic { font-size: 20px; line-height: 1; }
#bar button:hover { background: rgba(0, 0, 0, 0.05); }
#bar button:disabled { opacity: 0.45; cursor: default; }
#bar #mainBtn.bite { background: var(--bite); color: #fff; animation: pulse 0.45s infinite alternate; }
#bar #mainBtn.caught { background: var(--accent); color: #fff; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.08); } }

#intro {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: #ecebe4;
  transition: opacity 1.4s;
  z-index: 10;
}
#intro.hide { opacity: 0; pointer-events: none; }
.introTitle { font-size: 22px; font-weight: 700; letter-spacing: 0.02em; }
.introSub { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
/* 입장: 맵 고르기 */
.maps { display: flex; gap: 12px; opacity: 0; transition: opacity 0.6s; }
.maps.ready { opacity: 1; }
.mapBtn {
  width: 150px; padding: 18px 12px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1px solid #c9d1c4; background: #f4f3ee; border-radius: 18px;
  font: inherit; color: var(--ink); cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.mapBtn:hover { transform: translateY(-2px); border-color: var(--accent); background: #e9efe5; }
.mapBtn.last { border-color: var(--accent); border-width: 2px; background: #eaf0e6; }
.mapIc { font-size: 30px; }
.mapName { font-size: 15px; font-weight: 700; }
.mapSub { font-size: 12px; color: var(--muted); }
#loading { font-size: 12px; color: var(--muted); height: 16px; }

@media (max-width: 480px) {
  :root { --rowH: 34px; --rowGap: 6px; --icoW: 44px; }
  #topLeft { font-size: 13px; padding: 0 12px; }
  #topLeft .sep, #nick { display: none; }
  #room { display: inline; }
  .iconBtn { font-size: 20px; }
  #hint { font-size: 12px; white-space: normal; text-align: center; width: calc(100vw - 32px); top: 104px; }
  #best { font-size: 12px; padding: 0 12px; }
  #donatePop { width: 230px; }
  #invitePop { top: 52px; width: 230px; }
  #bar button { min-width: 62px; padding: 8px; }
}

/* 날씨 칩 (누를 수 없음) */

/* 물고기 도감 */
.dexBox { max-width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow-y: auto; }
#dexCount { font-weight: 400; font-size: 13px; color: var(--muted); margin-left: 4px; }
#dexBody { width: 100%; }
.dexTabs { display: flex; gap: 6px; margin: 0 0 10px; }
.dexTab { flex: 1; padding: 7px 6px; border-radius: 12px; border: 1px solid #e3e1d8; background: #f4f3ee; font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; white-space: nowrap; }
.dexTab small { font-weight: 400; font-size: 12px; margin-left: 2px; }
.dexTab.on { background: #fff; color: var(--ink); border-color: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.dexGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.dexCard {
  background: #fff; border: 1px solid #e3e1d8; border-radius: 11px; padding: 6px 3px;
  display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center;
}
.dexCard b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dexCard span:last-child { font-size: 10px; line-height: 1.3; color: var(--muted); word-break: keep-all; }
.dexFish { font-size: 18px; line-height: 1.15; }
.dexCard.unknown { background: #ecebe5; border-style: dashed; }
.dexCard.unknown .dexFish { color: #b5b3aa; font-weight: 700; }
.dexCard.unknown b { color: #9a988f; }

/* 반응 고르기 */
/* 물멍 모드: 풍경만 남긴다 */
#topLeft, #topRight, #best, #bar, #tag, .tag { transition: opacity 0.8s; }
body.mung #topLeft, body.mung #topRight, body.mung #best, body.mung #hint,
body.mung #invitePop, body.mung #bar, body.mung #tag, body.mung .tag, body.mung #toast {
  opacity: 0 !important; pointer-events: none;
}
#mungHint {
  position: fixed; top: 45%; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 32px);
  font-size: 14px; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  opacity: 0; transition: opacity 0.8s; pointer-events: none;
}
#mungHint.show { opacity: 1; }

@media (max-width: 480px) {
}

/* 아주 좁은 화면(320px대): 위쪽 줄이 겹치지 않게 여백과 글자를 조금 줄인다 */
@media (max-width: 350px) {
  :root { --icoW: 40px; }
  #topLeft { font-size: 12px; padding: 0 10px; }
}

/* 인증샷 */
#shotBtn {
  position: fixed; left: 50%; bottom: calc(max(20px, env(safe-area-inset-bottom)) + 84px); transform: translateX(-50%);
  border: 0; padding: 10px 18px; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer;
  animation: bubbleIn 0.35s ease-out;
}
#shotBtn.hide { display: none; }
body.mung #shotBtn { display: none; }
.shotBox { max-width: min(420px, calc(100vw - 32px)); }
#shotImg { width: 100%; max-height: 62vh; object-fit: contain; border-radius: 14px; display: block; }
.shotBtns { display: flex; gap: 8px; width: 100%; }
.shotBtns button {
  flex: 1; padding: 11px 10px; border-radius: 12px; border: 1px solid #e3e1d8; background: #fff;
  font: inherit; font-size: 15px; color: var(--ink); cursor: pointer;
}
#shotShare { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }

/* 다른 물가로 떠나는 중: 버튼을 숨긴다 */
body.leaving #bar, body.leaving #hint, body.leaving #shotBtn { opacity: 0 !important; pointer-events: none; }

/* 인증샷 게시판 */
.shotPin { width: 100%; padding: 11px 10px; border-radius: 12px; border: 1px dashed #c9b98f; background: #fbf6e8; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; }
.shotPin:disabled { opacity: 0.7; cursor: default; }
.boardBox { width: min(620px, calc(100vw - 32px)); }
#boardBody { width: 100%; max-height: 66vh; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.boardCard { position: relative; background: #fff; border-radius: 10px; padding: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.boardCard img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; display: block; cursor: zoom-in; background: #eee; }
.boardCard.big { grid-column: 1 / -1; }
.boardCard.big img { aspect-ratio: auto; cursor: zoom-out; }
.boardCap { display: flex; flex-direction: column; gap: 2px; padding: 6px 2px 2px; font-size: 12px; color: var(--muted); }
.boardCap b { color: var(--ink); font-size: 13px; }
.boardDel { position: absolute; top: 10px; right: 10px; border: 0; border-radius: 8px; padding: 4px 8px; font: inherit; font-size: 12px; background: rgba(255,255,255,0.9); cursor: pointer; }
.boardEmpty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 30px 10px; line-height: 1.6; }
@media (max-width: 480px) { #boardBody { grid-template-columns: repeat(2, 1fr); } }

/* 리액션 판 */
#reactTray {
  position: fixed; left: 50%; bottom: calc(max(20px, env(safe-area-inset-bottom)) + 84px); transform: translateX(-50%);
  display: flex; gap: 4px; padding: 6px; z-index: 6; width: max-content;
}
#reactTray.hide { display: none; }
#reactTray button {
  border: 0; background: none; font: inherit; font-size: 12px; color: var(--ink); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; border-radius: 14px; white-space: nowrap;
}
#reactTray button span { font-size: 24px; line-height: 1.1; }
#reactTray button:active { background: rgba(0,0,0,0.06); }
#clapHint {
  position: fixed; left: 50%; bottom: calc(max(20px, env(safe-area-inset-bottom)) + 84px); transform: translateX(-50%);
  border: 0; padding: 10px 18px; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; animation: bubbleIn 0.35s ease-out;
}
#clapHint.hide { display: none; }
body.mung #reactTray, body.mung #clapHint, body.leaving #reactTray, body.leaving #clapHint { display: none; }

/* 낚시방 */
.shopBox { width: min(460px, calc(100vw - 32px)); }
.ownerTalk { display: flex; gap: 10px; align-items: flex-start; width: 100%; }
.ownerFace { font-size: 34px; line-height: 1; }
.ownerBubble { flex: 1; background: #fff; border-radius: 14px; padding: 10px 12px; font-size: 14px; line-height: 1.5; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
#shopBody { width: 100%; max-height: 54vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.shopTitle { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { border: 0; background: none; font: inherit; font-size: 11px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; width: 52px; }
.swatch .dot { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.swatch.on .dot { outline: 3px solid var(--accent); outline-offset: 2px; }
.swatch.on { color: var(--ink); font-weight: 700; }
.swatch.locked .dot { filter: grayscale(0.7) brightness(0.9); }
.lockNote { font-size: 12px; color: #a0692c; min-height: 0; margin-top: 4px; }

.shopBait { width: 100%; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.baitInfo { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.baitInfo b { font-size: 14px; color: var(--ink); }
.baitBuy { border: 0; border-radius: 12px; padding: 9px 14px; background: var(--accent); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.baitBuy:disabled { background: #c9c6bd; cursor: default; }
#baitBtn.empty { opacity: 0.55; }

/* 다른 사람 이름표는 숨기고 머리 위 말풍선(잡은 기록·리액션)만 보인다 */
.tag.peer { background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: transparent; }
.tag.peer .bubble { color: var(--ink); }

/* 휴대폰: 물가 고르기 세 칸을 한 줄에 */
@media (max-width: 480px) {
  .pickerBox:has(.pickMaps) { padding: 20px 12px 14px; width: min(400px, calc(100vw - 24px)); box-sizing: border-box; }
  .pickMaps { width: 100%; }
  .pickMaps { flex-wrap: nowrap; gap: 6px; }
  .pickMaps .mapBtn { flex: 1 1 0; width: auto; min-width: 0; padding: 12px 4px 10px; border-radius: 14px; }
  .pickMaps .mapIc { font-size: 24px; }
  .pickMaps .mapName { font-size: 14px; white-space: nowrap; }
  .pickMaps .mapSub { font-size: 11px; text-align: center; word-break: keep-all; line-height: 1.35; text-wrap: balance; }
}

/* 밤(헤드랜턴이 켜질 무렵부터): 위쪽 버튼을 검정 배경 + 흰 글씨로 (세 맵, body.night) */
body.night #topLeft, body.night #best, body.night #topRight .iconBtn { background: rgba(18, 20, 22, 0.82); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
body.night #topLeft, body.night #topLeft .logo, body.night #topLeft button, body.night #best { color: #fff; }
body.night #topLeft .sep { background: rgba(255, 255, 255, 0.3); }
/* 알림이 떠 있는 동안 안내 문구는 숨긴다(같은 자리라 겹침) */
body:has(#toast.show) #hint { opacity: 0 !important; }