/* 화면 위 UI — B 스타일 "통통 장난감": 굵은 어두운 테두리, 아래가 짙은 반짝 버튼, 테두리 두른 흰 숫자.
   아이콘은 assets/ui/icons (이모지 대신, js/ui/icons.js). */
:root {
  --ink: #2B1D12;          /* 테두리·글자 그림자 */
  --ink-2: #1A110A;
  --cream: #FFF4CF;
  --chip: rgba(43, 29, 18, .82);
  /* 화면 크기에 맞춰 커지는 단위. 휴대폰 가로(낮은 화면)도 고려한다 */
  --u: min(1vw, 1.7vh);
  --tap: 64px;
  --num: 'Black Han Sans', 'Jua', sans-serif;
  --chipic: clamp(42px, calc(var(--u) * 5.2), 60px); /* 재화 칸 아이콘 (왼쪽으로 삐져나온다) */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #a8d5e8; font-family: 'Jua', 'Apple SD Gothic Neo', sans-serif; color: var(--ink); user-select: none; -webkit-user-select: none; touch-action: none; -webkit-touch-callout: none; }
canvas { display: block; touch-action: none; }
#ui { position: fixed; inset: 0; pointer-events: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#ui button, #ui .stick, .modal { pointer-events: auto; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
img { -webkit-user-drag: none; -webkit-touch-callout: none; }

/* 글 속 아이콘 (이모지 자리) */
.ic { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -0.32em; margin: 0 .06em; }
.ic.big { width: 72px; height: 72px; }
/* 흰 글씨에 어두운 테두리 (B 스타일 글자) */
.outline { color: #fff; text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 3px 0 var(--ink); }

/* ---------- 위쪽: 재화 칸 ---------- */
.hudcol { position: absolute; top: max(2.5%, 12px); left: calc(max(2%, 10px) + var(--chipic) * .42); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hud { display: flex; gap: calc(var(--chipic) * .55); align-items: center; }
.pill { position: relative; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 calc(var(--chipic) * .62); background: var(--chip); border: 3px solid var(--ink-2); border-radius: 14px; color: #fff; font-size: clamp(18px, calc(var(--u) * 2.9), 28px); }
.pill b { font-family: var(--num); font-weight: normal; letter-spacing: .5px; text-shadow: 0 3px 0 var(--ink-2); display: inline-block; transition: transform .1s; }
.pill b small { font-size: .7em; color: #F2D9A6; }
.chip-ic { position: absolute; left: calc(var(--chipic) * -0.42); top: 50%; width: var(--chipic); height: var(--chipic); transform: translateY(-54%); }
.coins b { min-width: 2.2em; }
.coins.bump b { transform: scale(1.25); }
.bag.full { background: #B5372B; animation: shake .4s; }
@keyframes shake { 25% { translate: -3px 0; } 75% { translate: 3px 0; } }
/* 다음 목표: 빨간 리본 */
.goal { display: flex; align-items: center; gap: 4px; margin-left: calc(var(--chipic) * -0.42); padding: 4px 16px 6px 10px; background: #E8483F; border: 3px solid var(--ink); border-radius: 10px; box-shadow: inset 0 -5px 0 #B52F28, 0 4px 0 var(--ink); color: #fff; font-size: max(15px, calc(var(--u) * 2.6)); text-shadow: 0 2px 0 #7A1A15; white-space: nowrap; }
.goal:empty { display: none; }

/* ---------- 둥근(네모진) 버튼 ---------- */
.round { width: var(--tap); height: var(--tap); border-radius: 20px; background: #FFFFFF; border: 3px solid var(--ink); box-shadow: inset 0 -7px 0 #D5D9DE, 0 4px 0 var(--ink); display: grid; place-items: center; padding: 0; transition: transform .08s, box-shadow .08s; }
.round .ic { width: 64%; height: 64%; margin: 0; vertical-align: 0; }
.round:active { transform: translateY(3px); box-shadow: inset 0 -4px 0 #D5D9DE, 0 1px 0 var(--ink); }
.corner { position: absolute; top: max(2.5%, 10px); right: max(2%, 10px); display: flex; gap: 10px; }
#soundBtn { background: #9FD4F5; box-shadow: inset 0 -7px 0 #5BA6D6, 0 4px 0 var(--ink); }
#settingsBtn { background: #FFD23F; box-shadow: inset 0 -7px 0 #D99A12, 0 4px 0 var(--ink); }
.zoom { position: absolute; right: max(2%, 10px); bottom: max(6%, 16px); display: flex; flex-direction: column; gap: 12px; }

/* ---------- 알림 띠: 노란 판, 테두리 두른 흰 글씨 ---------- */
.banner { position: absolute; top: 20%; left: 50%; transform: translateX(-50%) rotate(-1.5deg); padding: calc(var(--u) * 1) calc(var(--u) * 3) calc(var(--u) * 1.3); background: #FFD23F; border: 4px solid var(--ink); border-radius: 18px; box-shadow: inset 0 -7px 0 #E0A515, 0 6px 0 var(--ink); font-size: max(19px, calc(var(--u) * 3.8)); white-space: nowrap; color: #fff; text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 4px 0 var(--ink); transition: opacity .3s, transform .3s; }
@media (max-height: 500px) { .banner { top: 27%; } :root { --chipic: 40px; } .pill { font-size: 17px; padding-right: 10px; } .coins b { min-width: 1.8em; } }
.banner[hidden] { display: block; opacity: 0; transform: translate(-50%, -20px) rotate(-1.5deg); }

/* ---------- 조이스틱 ---------- */
.stick { position: absolute; left: max(4%, 16px); bottom: max(6%, 16px); width: max(140px, calc(var(--u) * 22)); aspect-ratio: 1; border-radius: 50%; background: rgba(43,29,18,.32); border: 4px solid var(--ink); touch-action: none; }
.knob { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; margin: -23% 0 0 -23%; border-radius: 50%; background: #FFFFFF; border: 4px solid var(--ink); box-shadow: inset 0 -7px 0 #D5D9DE, 0 5px 0 var(--ink); }

/* ---------- 떠오르는 글 (+5, 처음 찾은 보석) ---------- */
.float { position: absolute; transform: translate(-50%, -100%); font-family: var(--num); font-size: max(20px, calc(var(--u) * 3.8)); color: #fff; text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 3px 0 var(--ink); animation: rise 1s ease-out forwards; white-space: nowrap; pointer-events: none; }
.float.gold { color: #FFE066; font-size: max(24px, calc(var(--u) * 4.8)); }
@keyframes rise { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -70px; } }
.help { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); padding: 6px 16px 8px; background: var(--chip); border: 3px solid var(--ink-2); color: #fff; border-radius: 14px; font-size: max(14px, calc(var(--u) * 2.6)); transition: opacity 1s; white-space: nowrap; }
.loading { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 0 16px; text-align: center; background: #5EB4E0; font-size: 30px; color: #fff; text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 4px 0 var(--ink); z-index: 5; }
.loading .btn { padding: 0 32px; text-shadow: none; }

/* ---------- 창 (설정, 다시 해 보기, 테스트, 도감) ---------- */
.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(26, 17, 10, .55); }
.sheet { position: relative; width: min(90vw, 520px); max-height: 92vh; overflow: auto; padding: 22px 24px; background: var(--cream); border: 4px solid var(--ink); border-radius: 24px; box-shadow: inset 0 -8px 0 #EAD08A, 0 7px 0 var(--ink); text-align: center; }
.sheet h2 { margin: 0 0 12px; font-family: var(--num); font-weight: normal; font-size: 28px; color: #fff; text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 4px 0 var(--ink); }
.sheet p { font-size: 26px; margin: 6px 0 14px; }
.sheet p.small { font-size: 16px; color: #7a6650; }
.choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.choice, .btn { min-height: var(--tap); padding: 0 16px; border-radius: 16px; background: #FFD23F; border: 3px solid var(--ink); box-shadow: inset 0 -6px 0 #D99A12, 0 4px 0 var(--ink); font-size: 22px; color: var(--ink); }
.choice:active, .btn:active { transform: translateY(3px); box-shadow: inset 0 -3px 0 #D99A12, 0 1px 0 var(--ink); }
.btn.danger { background: #FF8F80; box-shadow: inset 0 -6px 0 #D2452A, 0 4px 0 var(--ink); margin-top: 12px; width: 100%; font-size: 18px; }
.row { display: flex; gap: 10px; margin: 12px 0; }
.row .btn { flex: 1; font-size: 18px; }
.sheet.test .row .btn { margin: 0; width: auto; }
.ghost { min-height: var(--tap); margin-top: 8px; padding: 0 24px; background: transparent; font-size: 18px; color: #7a6650; }
textarea { width: 100%; font: 13px ui-monospace, monospace; border-radius: 12px; border: 3px solid var(--ink); padding: 8px; user-select: text; -webkit-user-select: text; }
textarea.bad { border-color: #e06050; animation: shake .3s; }

.rotate { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 16px; background: #5EB4E0; font-size: 28px; color: #fff; text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink); }
.rotate .phone { animation: turn 1.6s ease-in-out infinite; }
@keyframes turn { 50% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 900px) { .rotate { display: flex; } }

/* ---------- 꾸미기 · 배 타기 버튼 ---------- */
:root { --barh: 190px; }
.decobtn, .boardbtn { position: absolute; right: calc(max(2%, 10px) + var(--tap) + 12px); min-height: var(--tap); padding: 0 22px 0 12px; border-radius: 20px; border: 3px solid var(--ink); color: #fff; font-size: 22px; text-shadow: 0 2px 0 rgba(0,0,0,.35); gap: 6px; }
.decobtn .ic, .boardbtn .ic { width: 44px; height: 44px; vertical-align: 0; }
.decobtn { bottom: max(6%, 16px); background: #7ED957; box-shadow: inset 0 -7px 0 #4FA62C, 0 4px 0 var(--ink); }
.boardbtn { bottom: calc(max(6%, 16px) + var(--tap) + 12px); background: #3DB7F2; box-shadow: inset 0 -7px 0 #1E86C4, 0 4px 0 var(--ink); }
.decobtn:active, .boardbtn:active { transform: translateY(3px); }
.decobtn[hidden], .gems[hidden], .bricks[hidden], .boardbtn[hidden] { display: none; }
#ui.decorating .boardbtn { display: none; }
#ui.decorating .stick, #ui.decorating .help, #ui.decorating .corner, #ui.decorating .goal, #ui.decorating .decobtn { display: none; }
#ui.decorating .zoom { bottom: calc(var(--barh) + 12px); }

/* ---------- 꾸미기 서랍 ---------- */
.decorbar { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: auto; background: var(--cream); border-top: 4px solid var(--ink); border-radius: 22px 22px 0 0; box-shadow: 0 -4px 0 rgba(43,29,18,.25);
  padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.decorbar[hidden], .dactions[hidden], .ddone[hidden] { display: none; }
.dtabs { display: flex; gap: 8px; margin-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
.dtabs::-webkit-scrollbar { display: none; }
.dtab { flex: none; min-height: var(--tap); padding: 0 16px 0 10px; border-radius: 16px; background: #FFFFFF; border: 3px solid var(--ink); box-shadow: inset 0 -5px 0 #E3D9C3; font-size: 19px; }
.dtab .ic { width: 34px; height: 34px; vertical-align: -10px; }
.dtab.on { background: #FFD23F; box-shadow: inset 0 -5px 0 #D99A12; }
.drow { display: flex; gap: 8px; align-items: stretch; }
.dcat { display: none; flex: none; width: var(--tap); border-radius: 16px; background: #FFD23F; border: 3px solid var(--ink); box-shadow: inset 0 -6px 0 #D99A12; padding: 0; }
.dcat .ic { width: 40px; height: 40px; vertical-align: 0; }
.dcards { display: flex; gap: 8px; overflow-x: auto; touch-action: pan-x; scrollbar-width: none; flex: 1; padding: 2px 2px 6px; }
.dcards::-webkit-scrollbar { display: none; }
.dcard { flex: none; width: 96px; height: 106px; border-radius: 16px; background: #fff; border: 3px solid var(--ink); box-shadow: inset 0 -5px 0 #E3D9C3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; }
.dcard img { width: 60px; height: 60px; }
.dicon .ic { width: 48px; height: 48px; vertical-align: 0; }
.dname { font-size: 14px; line-height: 1.1; }
.dprice { font-size: 15px; color: var(--ink); display: flex; align-items: center; gap: 2px; font-family: var(--num); }
.dprice i { font-style: normal; }
.dprice .ic { width: 18px; height: 18px; vertical-align: 0; }
.dcard.on { background: #FFF1B0; box-shadow: inset 0 0 0 3px #FFB300, inset 0 -5px 0 #E8C35A; }
.dcard.flash { animation: dflash .9s; }
.dcard.dim { opacity: .5; }
@keyframes dflash { 30% { transform: scale(1.12); background: #fff1b0; } }
.dactions { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--barh) + 12px); display: flex; gap: 10px; pointer-events: auto; white-space: nowrap; }
.dact { min-height: var(--tap); min-width: var(--tap); padding: 0 18px 0 12px; border-radius: 18px; background: #FFFFFF; border: 3px solid var(--ink); box-shadow: inset 0 -6px 0 #D5D9DE, 0 4px 0 var(--ink); font-size: 20px; }
.dact .ic { width: 30px; height: 30px; vertical-align: -8px; }
.dact.main { background: #FFD23F; box-shadow: inset 0 -6px 0 #D99A12, 0 4px 0 var(--ink); }
.ddone { position: absolute; top: max(2.5%, 10px); right: max(2%, 10px); min-height: var(--tap); padding: 0 20px 0 12px; border-radius: 18px; background: #7ED957; border: 3px solid var(--ink); box-shadow: inset 0 -6px 0 #4FA62C, 0 4px 0 var(--ink); color: #fff; font-size: 22px; text-shadow: 0 2px 0 rgba(0,0,0,.35); pointer-events: auto; }
.ddone .ic { width: 34px; height: 34px; vertical-align: -9px; }
@media (max-height: 500px) {
  .dtabs { display: none; }
  .dcat { display: block; }
  .dcard { width: 84px; height: 98px; }
  .dcard img { width: 52px; height: 52px; }
  .dicon .ic { width: 42px; height: 42px; }
  .dact { padding: 0 12px 0 8px; font-size: 17px; }
}

/* ---------- 바다 지도 ---------- */
.seamap { position: fixed; inset: 0; z-index: 15; pointer-events: auto; background: radial-gradient(circle at 50% 45%, #5ec2e8, #2b86bd 75%); }
.seamap .sea { position: absolute; inset: calc(var(--tap) + 12px) max(4%, 16px) max(4%, 16px); background-image: radial-gradient(rgba(255,255,255,.18) 2px, transparent 3px); background-size: 46px 46px; border-radius: 28px; }
.maptitle { position: absolute; top: max(2.5%, 10px); left: 50%; transform: translateX(-50%); margin: 0; padding: 6px 22px 8px; background: #FFD23F; border: 4px solid var(--ink); border-radius: 16px; box-shadow: inset 0 -6px 0 #E0A515, 0 5px 0 var(--ink); font-family: var(--num); font-weight: normal; font-size: max(20px, calc(var(--u) * 3.6)); white-space: nowrap; color: #fff; text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 3px 0 var(--ink); }
.mapclose { position: absolute; top: max(2.5%, 10px); right: max(2%, 10px); }
.isle { position: absolute; transform: translate(-50%, -50%); width: max(96px, calc(var(--u) * 17)); aspect-ratio: 1.3; border-radius: 50%; border: 4px solid var(--ink); display: grid; place-items: center; align-content: center; gap: 2px; box-shadow: 0 0 0 max(8px, calc(var(--u) * 1.4)) #f1d9a0, 0 0 0 calc(max(8px, calc(var(--u) * 1.4)) + 4px) var(--ink), 0 10px 0 calc(max(8px, calc(var(--u) * 1.4)) + 4px) rgba(0,0,0,.25); transition: transform .1s; }
.isle:active { transform: translate(-50%, -48%) scale(.96); }
.isle.grass { background: #8cc96b; }
.isle.rock { background: #a39a8c; }
.isle.fog { background: rgba(255,255,255,.35); border-color: rgba(43,29,18,.4); box-shadow: 0 0 0 max(8px, calc(var(--u) * 1.4)) rgba(255,255,255,.25); width: max(86px, calc(var(--u) * 12)); }
.isle.here { cursor: default; }
.isle .ico .ic { width: max(36px, calc(var(--u) * 6)); height: max(36px, calc(var(--u) * 6)); vertical-align: 0; }
.isle .name { font-size: max(15px, calc(var(--u) * 2.6)); color: #fff; text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink); white-space: nowrap; }
.isle .tag { position: absolute; top: -34%; left: 50%; transform: translateX(-50%); padding: 2px 10px; background: #FFD23F; border: 3px solid var(--ink); border-radius: 10px; font-size: max(13px, calc(var(--u) * 2.1)); white-space: nowrap; }
.maptip { position: absolute; transform: translate(-50%, calc(-100% - 56px)); padding: 8px 16px; background: var(--cream); border: 3px solid var(--ink); border-radius: 16px; font-size: max(16px, calc(var(--u) * 2.8)); white-space: nowrap; box-shadow: 0 4px 0 var(--ink); }
.maptip[hidden] { display: none; }

/* ---------- 항해 중: 조이스틱(과 알림)만 ---------- */
#ui.sailing > :not(.stick):not(.banner):not(.float):not(.modal) { display: none !important; }

/* ---------- 보석 도감 ---------- */
.gems { cursor: pointer; }
/* 모양은 다른 칸과 같게, 누르는 자리만 위아래로 64px 넘게 넓힌다 */
.gems::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: max(100%, calc(var(--tap) + 8px)); transform: translateY(-50%); }
.sheet.gembook { width: min(94vw, 760px); padding: 18px 20px 20px; }
.gembook h2 .small { font-family: 'Jua', sans-serif; font-size: 18px; }
.ggrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.gcell { background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 10px 6px; box-shadow: inset 0 -5px 0 #E3D9C3; }
.gpic { height: min(96px, 18vh); display: grid; place-items: center; }
.gpic .gicon { width: min(84px, 16vh); height: min(84px, 16vh); margin: 0; vertical-align: 0; }
.gemoji .ic { width: min(56px, 11vh); height: min(56px, 11vh); }
.gq { font-family: var(--num); font-size: min(44px, 9vh); color: #c9bba6; width: min(72px, 14vh); aspect-ratio: 1; border-radius: 50%; background: #efe6d6; border: 3px dashed #c9bba6; display: grid; place-items: center; }
.gname { font-size: 18px; margin-top: 4px; }
.gcount { font-size: 13px; color: #7a6650; }
.gcell.unknown .gname { color: #b9a98f; }
.gclose { position: absolute; top: 8px; right: 8px; }
@media (max-height: 460px) { .gname { font-size: 15px; } .gcount { font-size: 12px; } .sheet.gembook { padding: 12px 14px 14px; } .gembook h2 { font-size: 22px; margin-bottom: 6px; } }