/* 블렌더로 렌더한 화면 틀의 자리와 크기. 그림 자체는 css/ui-skin.css에 있다 (assets/source/build_ui.py, pack_ui.py).
   글자는 언제나 HTML이고, 그림을 못 받아도 style.css와 여기의 바탕색으로 글을 읽을 수 있다.
   border-image 숫자는 그림 픽셀(화면 1px당 3픽셀로 렌더했다), 화면 크기, 바깥으로 내미는 양 순서다. 내미는 양은 그림의 그림자 여백이다. */

/* ---------- 겹창: 막대 넷을 묶은 유목 틀에 돛천 바탕 ---------- */
.overlay { padding: 12px; }
.card, .map-card {
  border: 15px solid transparent; border-radius: 6px;
  border-image-slice: 192; border-image-width: 64px; border-image-outset: 16px; border-image-repeat: stretch;
  background-color: #f8efdc; background-size: 256px 256px; background-clip: padding-box; background-origin: padding-box; box-shadow: none;
}
.card { padding: 14px 14px; scrollbar-width: thin; scrollbar-color: #b9946a transparent; color: #4a3a28; }
.card h2 { color: #3d2e1e; }
.card p { color: #4d4030; }
.card td { color: #4d4030; }
.small { color: #6d5d48; }
.tip { color: #6d5d48; }
/* 게임 안의 작은 카드와 판: 같은 틀을 작게 쓴다 */
.panel h3, #info h3 { padding-left: 16px; }
#cardBox h3 { padding-left: 0; }
.panel, #info {
  border: 9px solid transparent; border-radius: 4px; box-shadow: none; padding: 8px 10px;
  border-image-slice: 192; border-image-width: 40px; border-image-outset: 10px; border-image-repeat: stretch;
  background-color: #f8efdc; background-size: 256px 256px; background-clip: padding-box; background-origin: padding-box;
}
#cardBox { width: min(430px, calc(100% - 20px)); }
/* 카드의 고르기 버튼은 글이 길다. 줄 사이 안쪽을 조금 줄이고, 넘치면 낱말 사이에서만 바꾼다 */
#cardBtns button.big { padding: 10px 36px 15px; }
#info p { color: #4d4030; }
#info .tag { background: #d6efe8; color: #235f50; }

/* 닫기: 둥근 나무 단추. 눌리는 곳은 그림보다 넓다 */
.x {
  position: absolute; right: 0; top: 0; z-index: 2; width: 34px; height: 34px; border: 0 solid transparent; border-radius: 50%; color: #3b2a18; font-size: 14px; font-weight: 700;
  border-image-slice: 117 fill; border-image-width: 20px; border-image-outset: 3px; border-image-repeat: stretch;
}
.x::before { content: ''; position: absolute; inset: -6px; }

/* ---------- 시작 화면 ---------- */
.title-card { padding: 18px 10px 10px; overflow: visible; }
/* 이름판: 줄로 매단 짙은 나무판. 이름 아래에 한 줄 소개를 함께 올린다 */
.logo {
  display: flex; flex-direction: column-reverse; padding: 7px 4px 15px; border: 0 solid transparent; border-radius: 10px; background-color: #6f4828;
  border-image-slice: 147 126 72 126 fill; border-image-width: 49px 42px 24px 42px; border-image-outset: 33px 8px 10px 8px; border-image-repeat: stretch;
}
.logo h1 { margin: 0; color: #fff4dc; text-shadow: 0 2px 0 #3a200c, 0 0 6px rgba(44, 22, 6, 0.55); letter-spacing: 0.5px; }
.logo small { margin-top: 1px; color: #ffdfa3; font-weight: 700; text-shadow: 0 1px 2px rgba(40, 20, 6, 0.85); }
.lead { color: #4d4030; margin: 12px 0 10px; text-wrap: balance; }
.title-save { margin: 12px 0 10px; font-size: 15px; color: #235f50; font-family: var(--font-title); word-break: keep-all; }
.title-menu { margin: 10px 0 0; }
.title-menu .soft { flex: 1 1 0; min-width: 0; white-space: nowrap; }
.title-login { width: 100%; margin: 8px 0 0; white-space: normal; word-break: keep-all; }
.title-card .tip { margin: 10px 0 2px; text-wrap: balance; }
/* 틀 위에 앉은 아기 거북 */
.title-card::before {
  content: ''; position: absolute; left: -2px; top: -50px; width: 118px; height: 92px; z-index: 1; pointer-events: none;
  background-position: center; background-size: contain; background-repeat: no-repeat;
}
/* 새 게임 확인, 가이드는 시작 화면 위에 뜬다 */
#help { z-index: 12; }
#help.at-title #helpRename, #help.at-title #helpReset { display: none; }
#newAsk { z-index: 60; }
#newAsk p { word-break: keep-all; }

/* ---------- 버튼 ---------- */
/* 큰 버튼: 산호빛 칠을 한 나무토막. 윗면 가운데에 글자가 오게 아래 안쪽 여백을 더 준다 */
button.big {
  border: 0 solid transparent; border-radius: 13px; color: #fff; background: #d9562b; box-shadow: none; padding: 10px 44px 15px; text-shadow: 0 1px 0 #8c3a16, 0 0 5px rgba(120, 44, 12, 0.5);
  border-image-slice: 66 144 66 144 fill; border-image-width: 22px 48px 22px 48px; border-image-outset: 10px; border-image-repeat: stretch;
}
button.big, button.soft { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
button.big:active { transform: translateY(2px); box-shadow: none; filter: brightness(0.95); }
button.big:disabled { filter: grayscale(0.55) brightness(1.02); }
.name-card button.big { padding: 10px 44px 15px; }
/* 작은 버튼: 밝은 나무토막 */
button.soft {
  border: 0 solid transparent; border-radius: 10px; color: #3d2e1e; min-height: 44px; padding: 9px 16px 13px; background: #f4e7cd; box-shadow: none;
  border-image-slice: 54 72 54 72 fill; border-image-width: 18px 24px 18px 24px; border-image-outset: 8px; border-image-repeat: stretch;
}
button.soft.on { box-shadow: none; filter: sepia(0.5) saturate(1.5); }
.row { margin: 12px 0; gap: 12px; }

/* ---------- 왼쪽 위 표: 홈을 판 판자 ---------- */
#badge {
  background: #f6ead2; border: 0 solid transparent; border-radius: 13px; box-shadow: none; padding: 9px 13px 11px 12px;
  border-image-slice: 156 210 78 66 fill; border-image-width: 52px 70px 26px 22px; border-image-outset: 20px 10px 10px 6px; border-image-repeat: stretch;
}
#badge .b-row { color: #594a37; margin-top: 3px; }
#tAge { margin-left: -5px; font-family: var(--font-title); font-weight: normal; font-size: 14px; color: #8a5a20; white-space: nowrap; }
#nbr, #jelly, #trash { position: relative; }
#nbr::after, #jelly::after, #trash::after { content: ''; position: absolute; inset: -11px -3px; }
#nbr:hover, #jelly:hover, #trash:hover { background: rgba(120, 90, 50, 0.14); }
#mood { min-width: 0; }
#mood em { white-space: nowrap; }
#mood .mbar { background: #d8c6a0; box-shadow: inset 0 1px 2px rgba(70, 45, 15, 0.55); }

/* ---------- 말풍선: 자주 나오니 단순하게. 거북은 등 빛깔의 짙은 남색, 이웃은 모래빛 크림 ---------- */
#say, #say2 {
  border-radius: 14px; box-shadow: none; border: 2px solid transparent; background-clip: padding-box; overflow-wrap: anywhere; text-wrap: pretty;
  border-image-slice: 78 fill; border-image-width: 26px; border-image-outset: 9px; border-image-repeat: stretch;
}
#say, #say2, .pin { will-change: transform; }     /* 프레임마다 자리를 옮긴다 */
#say { color: #f6f9fc; background-color: #1c3250; }
#say2 { color: #2b3a4d; background-color: #fbf5e6; }
#say::after, #say2::after { left: 50%; bottom: -15px; margin-left: -22px; width: 44px; height: 20px; border: 0; background-size: 100% 100%; background-repeat: no-repeat; background-color: transparent; }
#say.pinned::before { color: #9fe0d4; }

/* ---------- 작은 지도와 로그인 나무토막 ---------- */
/* 줄은 지도 틀 뒤에서 내려오도록 표지판을 뒤에 둔다 */
#miniMap {
  z-index: 2; border: 5px solid transparent; border-radius: 8px; box-shadow: none; object-fit: cover; background: #5a9ec0; background-clip: content-box;
  border-image-slice: 90; border-image-width: 24px; border-image-outset: 5px; border-image-repeat: stretch;
}
#hudLogin {
  z-index: 1; top: 106px; right: 40px; width: 97px; height: 68px; padding: 24px 0 6px; border: 0; border-radius: 0; box-shadow: none; font-size: 15px; color: #2c1707; text-shadow: 0 1px 0 rgba(255, 236, 200, 0.55);
  background-color: transparent; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; transform-origin: 50% 0;
}
#hudLogin::before, #hudLogin::after { display: none; }
#hudLogin:active { box-shadow: none; }

/* ---------- 위쪽 안내 줄, 토스트 ---------- */
/* 처음 온 곳의 이름과 겹치지 않게 그 아래로 내린다 */
#modeTip { top: calc(16% + 72px); word-break: keep-all; text-wrap: balance; }
#goal, #modeTip {
  border: 0 solid transparent; border-radius: 12px; box-shadow: none; color: #4d4030; background: #f6ead2;
  border-image-slice: 48 69 48 69 fill; border-image-width: 16px 23px 16px 23px; border-image-outset: 7px; border-image-repeat: stretch; padding: 6px 15px 8px;
}
#toast, #compass {
  border: 0 solid transparent; border-radius: 12px; box-shadow: none; color: #fff6e4; background: #5e3c22; text-shadow: 0 1px 1px rgba(30, 15, 5, 0.6);
  border-image-slice: 48 69 48 69 fill; border-image-width: 16px 23px 16px 23px; border-image-outset: 7px; border-image-repeat: stretch; padding: 7px 16px 9px;
}
#compass .arrow { color: #ffe2a8; }

/* ---------- 아래 버튼 줄: 밧줄에 꿴 나무패 ---------- */
#dock { z-index: 3; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.dock-row { position: relative; z-index: 0; gap: 10px; padding: 0 12px; }
.dock-row::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 16px; margin-top: -8px; z-index: -1; background-size: auto 100%; background-repeat: repeat-x; pointer-events: none; }
#dock button {
  width: 62px; height: 60px; padding: 0 0 4px; border: 0 solid transparent; border-radius: 13px; background-color: var(--paper2);
  border-image-slice: 72 fill; border-image-width: 24px; border-image-outset: 6px; border-image-repeat: stretch; transition: transform 0.12s;
}
#dock button span { color: #4a3a28; }
#dock button:hover { transform: translateY(-2px); background-color: transparent; }
#dock button.on, #dock button.hot { box-shadow: none; }

/* ---------- 조이스틱: 둥글게 감은 밧줄과 거북 등 무늬 조약돌 ---------- */
#joy { background-position: center; background-size: 100% 100%, 100% 100%; background-repeat: no-repeat; border-width: 0; }
#joyKnob { background-position: center; background-size: 130% 130%; background-repeat: no-repeat; }

/* ---------- 일 버튼, 점프, 떠 있는 표시 ---------- */
#act {
  border: 0 solid transparent; border-radius: 15px; color: #2c1a0a; background: #d9b27a; box-shadow: none; padding: 7px 16px 12px 12px;
  border-image-slice: 66 78 66 78 fill; border-image-width: 22px 26px 22px 26px; border-image-outset: 8px; border-image-repeat: stretch;
}
#act em { color: #5a4326; }
#act .prog { left: 10px; bottom: 7px; height: 5px; border-radius: 3px; background: #2f7f94; }
#act.wait { filter: saturate(0.45) brightness(1.08); background: #e7d8bf; color: #5a4a36; }
#act.hot { background: #d9562b; color: #fff; text-shadow: 0 1px 0 #8c3a16; animation: actPulse 0.9s ease-in-out infinite alternate; }
@keyframes actPulse { from { transform: scale(1); } to { transform: scale(1.03); } }
#jump, .pin {
  border: 0 solid transparent; border-radius: 50%; background-color: #e3bd86; box-shadow: none;
  border-image-slice: 117 fill; border-image-repeat: stretch;
}
#jump { color: #2c1a0a; border-image-width: 39px; border-image-outset: 6px; }
.pin { border-image-width: 20px; border-image-outset: 3px; }

/* ---------- 이름 짓기 ---------- */
.name-card { padding: 14px 14px; }
#nameInput {
  height: 58px; border: 6px solid transparent; border-radius: 6px; background: #fffdf6; background-clip: padding-box; color: #235f70;
  border-image-slice: 90; border-image-width: 24px; border-image-outset: 5px; border-image-repeat: stretch;
}
#nameInput:focus { background-color: #fffef9; }
#nameErr { color: #6d5d48; }
#nameErr.bad { color: #b8452e; }
#nameChips { gap: 10px 8px; margin: 2px 0 12px; }
#nameChips button {
  min-height: 44px; padding: 8px 15px 11px; border: 0 solid transparent; border-radius: 12px; color: #3d2e1e; background: #eddcbb;
  border-image-slice: 48 60 48 60 fill; border-image-width: 16px 20px 16px 20px; border-image-outset: 6px; border-image-repeat: stretch;
}
#nameChips button.more { background: #d6efe8; color: #235f50; }

/* ---------- 기록 ---------- */
#jStats div, #jFish div {
  border: 0 solid transparent; border-radius: 10px; background: #eddcbb; color: #4d4030;
  border-image-slice: 48 60 48 60 fill; border-image-width: 16px 20px 16px 20px; border-image-outset: 6px; border-image-repeat: stretch;
}
#jStats { gap: 10px 8px; }
#jStats div { padding: 7px 4px 10px; }
#jStats b { color: #235f70; }
#jFish { gap: 10px 8px; }
#jFish div { padding: 7px 8px 10px; }
#jFish div.none { filter: saturate(0.5) opacity(0.72); color: #6d5d48; background: #eddcbb; }
#jFish b { color: #235f70; }

/* ---------- 소리 크기: 밧줄 위의 바다 유리 ---------- */
input[type=range]::-webkit-slider-runnable-track { height: 16px; border-radius: 0; background-color: #c9a66b; }
input[type=range]::-webkit-slider-thumb { width: 34px; height: 34px; margin-top: -9px; background-color: transparent; }
input[type=range]::-moz-range-track { height: 16px; border-radius: 0; background-color: #c9a66b; }
input[type=range]::-moz-range-thumb { width: 34px; height: 34px; background-color: transparent; }
.slide { color: #4d4030; }

/* ---------- 세계 지도 ---------- */
.map-card { padding: 6px 6px 4px; }
.map-head { padding: 0 44px 0 30px; }
/* 지도의 물음표와 같은 모양 (mapui.js의 qBadge) */
.map-q { display: inline-block; width: 1.25em; height: 1.25em; border-radius: 50%; background: #e8562e; color: #fff; font-style: normal; font-weight: 700; line-height: 1.25em; text-align: center; vertical-align: 0.04em; }
.map-head .x { right: 0; top: -2px; }
#mapNote, .map-tip { color: #4d4030; }

/* ---------- 휴대폰 ---------- */
@media (max-width: 760px) {
  /* 작은 지도 밑으로 들어가지 않게 판자 폭을 묶는다. 넘치면 줄이 바뀐다 */
  #badge { max-width: calc(100vw - 124px); padding: 9px 12px 10px 11px; }
  #tName { flex: 0 0 auto; }
  #mood { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  #mood .mbar { flex: 1 1 56px; min-width: 24px; }
  #badge .b-title + .b-row { flex-wrap: nowrap; }   /* 긴 이름과 나이가 있어도 기분 막대를 줄여 한 줄로 */
  #hudLogin { top: 64px; right: 22px; width: 72px; height: 50px; padding: 19px 0 4px; font-size: 12.5px; border-radius: 0; transform-origin: 50% 0; }
  #hudLogin:not(.hidden) ~ #goal { top: 116px; }
  #modeTip { top: calc(16% + 80px); }
  .title-card::before { left: -4px; top: -46px; width: 106px; height: 82px; }
  #help .card { padding: 12px 10px; }
  /* 키우던 거북으로 돌아왔을 때: 카드를 아래로 내려 거북이 보이고 버튼은 엄지 가까이 온다 */
  #start.saved { align-items: flex-end; padding-bottom: 26px; }
  #toast { bottom: 206px; }
  /* 아래 버튼 줄: 밧줄에 꿴 나무패를 옆으로 민다. 한 화면에 5개 반이 보여서 잘린 패가 더 있다는 표시가 되고, 자주 쓰는 것이 앞에 온다.
     한 줄이라 플레이 화면을 더 가리지 않는다. 손을 떼고 조금 있으면 titlemenu.js가 처음 자리로 되돌린다 */
  #dock {
    left: 0; right: 0; bottom: 0; max-width: none; padding: 8px 0 max(14px, calc(env(safe-area-inset-bottom) + 4px)); overflow-x: auto; overflow-y: hidden;
    touch-action: pan-x; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  #dock::-webkit-scrollbar { display: none; }
  .dock-row { flex: 0 0 auto; width: max-content; min-width: 100%; justify-content: flex-end; gap: 6px; padding: 0 14px 0 12px; }
  #dock button { flex: 0 0 min(calc((100vw - 12px) / 5.5 - 6px), 66px); width: auto; height: 54px; min-width: 0; font-size: 20px; border-image-width: 22px; }
  #dock button:hover { transform: none; }
  #dock button span { font-size: 11px; letter-spacing: -0.3px; }
  #dock .sub { order: 1; }
  /* 마우스로 작은 창을 쓸 때는 얇은 막대를 보여 준다 */
  @media (hover: hover) and (pointer: fine) { #dock { scrollbar-width: thin; scrollbar-color: #b9946a transparent; } }
  /* 아이폰 아래 막대가 있으면 버튼 줄이 올라오므로 그 위의 것들도 함께 올린다 */
  #joy, #act, #jump, .panel { margin-bottom: max(0px, calc(env(safe-area-inset-bottom) - 10px)); }
  #act { padding: 6px 14px 11px 10px; }
  #jump { border-image-width: 36px; }
  .pin { border-image-width: 18px; }
  #say, #say2 { max-width: 80vw; }
  .x { width: 32px; height: 32px; }
}
/* 세로로 낮은 휴대폰: 카드 윗부분이 잘리지 않게 위로 붙인다 */
@media (max-height: 700px) and (max-width: 760px) {
  #place { top: 148px; }
  .title-card { padding-top: 16px; }
  .lead { line-height: 1.5; margin: 10px 0 8px; }
}