/* 밀레의 낚시생활 — 프리셋 시트처럼 크림색 바탕 + 파스텔 카드 */
:root {
  --bg: #fff6ea;
  --paper: #fffdf8;
  --ink: #3e2c2e;
  --ink-soft: #7a6466;
  --line: #ead9c8;
  --pink: #f7a8b8;
  --pink-deep: #e57a92;
  --pink-soft: #fde4ea;
  --blue: #7cb8ec;
  --blue-soft: #e3f1fc;
  --mint: #8fd3a8;
  --mint-soft: #e2f6e8;
  --gold: #f2bf3a;
  --gold-deep: #c98d14;
  --lav-soft: #eee6fb;
  --peach-soft: #fdebd8;
  --radius: 18px;
  --shadow: 0 6px 0 rgba(62, 44, 46, .08), 0 10px 30px rgba(62, 44, 46, .10);
  --font-title: 'Jua', 'Gowun Dodum', system-ui, sans-serif;
  --font-body: 'Gowun Dodum', 'Jua', system-ui, sans-serif;
  --font-chat: 'Gaegu', 'Jua', 'Gowun Dodum', system-ui, sans-serif; /* 채팅: 귀여운 손글씨 */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button, input { font: inherit; color: inherit; }
.hidden { display: none !important; }

/* ── 화면 ── */
.screen { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
.screen.active { display: flex; }
#screen-loading, #screen-login, #screen-create, #screen-lobby {
  background:
    radial-gradient(circle at 12% 18%, var(--pink-soft) 0 120px, transparent 121px),
    radial-gradient(circle at 88% 82%, var(--blue-soft) 0 160px, transparent 161px),
    radial-gradient(circle at 85% 12%, var(--mint-soft) 0 90px, transparent 91px),
    var(--bg);
}
#screen-game { padding: 0; overflow: hidden; background: #7cc46a; }

.card { background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.logo { font-family: var(--font-title); font-weight: 400; font-size: clamp(30px, 6vw, 44px); margin: 0; color: var(--ink); letter-spacing: 1px; text-shadow: 3px 3px 0 var(--pink-soft); }
.sub { margin: 4px 0 0; color: var(--ink-soft); }
.note { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.error { min-height: 1.2em; margin: 6px 0; color: #d0485e; font-size: 14px; }

.loading-box { text-align: center; }
.spinner { width: 42px; height: 42px; margin: 24px auto 10px; border-radius: 50%; border: 5px solid var(--pink-soft); border-top-color: var(--pink-deep); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 버튼 ── */
.btn {
  border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: 8px 14px; cursor: pointer;
  font-family: var(--font-title); font-size: 15px; box-shadow: 0 3px 0 var(--line); transition: transform .08s, box-shadow .08s;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--pink); border-color: var(--pink-deep); color: #fff; box-shadow: 0 3px 0 var(--pink-deep); text-shadow: 0 1px 0 rgba(0,0,0,.15); }
.btn.gold { background: var(--gold); border-color: var(--gold-deep); color: #fff; box-shadow: 0 3px 0 var(--gold-deep); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.small { padding: 4px 10px; font-size: 13px; border-radius: 10px; }
.btn.big { width: 100%; padding: 12px; font-size: 18px; }

/* ── 로그인 ── */
.login-card { width: min(400px, 100%); padding: 28px 24px 20px; text-align: center; }
/* 오프라인: 다른 컴퓨터 저장 불러오기 */
#login-cat { display: block; margin: 8px auto 0; }
.tabs { display: flex; gap: 6px; background: var(--peach-soft); padding: 5px; border-radius: 14px; margin: 10px 0 14px; }
.tab { flex: 1; border: 0; background: transparent; padding: 8px; border-radius: 10px; font-family: var(--font-title); font-size: 16px; cursor: pointer; color: var(--ink-soft); }
.tab.active { background: #fff; color: var(--ink); box-shadow: 0 2px 0 var(--line); }
#auth-form, #pin-form { text-align: left; }
#auth-form label, #pin-form label, .nick { display: block; font-family: var(--font-title); font-size: 14px; margin-bottom: 10px; }
#auth-form input, #pin-form input, .nick input {
  display: block; width: 100%; margin-top: 4px; padding: 11px 12px; border-radius: 12px; border: 2px solid var(--line); background: #fff; outline: none; font-family: var(--font-body); font-size: 16px;
}
#auth-form input:focus, #pin-form input:focus, .nick input:focus, .chat-form input:focus { border-color: var(--pink); }
.only-register { display: none !important; }
.registering .only-register { display: block !important; }

/* ── 캐릭터 만들기 ── */
.create-card { width: min(980px, 100%); padding: 20px; margin: auto; }
#screen-create { align-items: flex-start; }
.create-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.create-head h2 { font-family: var(--font-title); font-weight: 400; margin: 0; }
.create-body { display: grid; grid-template-columns: minmax(300px, 440px) 1fr; gap: 20px; margin-top: 14px; }
.preview-box { background: var(--pink-soft); border-radius: var(--radius); padding: 12px; text-align: center; }
.dir-buttons { display: flex; gap: 4px; justify-content: center; margin: 8px 0 12px; flex-wrap: wrap; }
.dir-buttons .btn.on, .face-list .btn.on { background: var(--pink); color: #fff; border-color: var(--pink-deep); }
/* 닉네임 + 중복 확인 */
.nick-row { display: flex; gap: 6px; }
.nick-row input { flex: 1; min-width: 0; padding: 11px 12px; border-radius: 12px; border: 2px solid var(--line); background: #fff; outline: none; font-family: var(--font-body); font-size: 16px; }
.nick-row input:focus { border-color: var(--pink); }
.nick-row .btn { white-space: nowrap; }
.nick-status { min-height: 1.2em; margin: 4px 0 8px; font-size: 13px; }
.nick-status.ok { color: #2f7a4a; }
.nick-status.bad { color: #d0485e; }

/* 무늬 그리기 */
.paint-box { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.paint-box .dir-buttons { margin: 0; }
#paint-canvas {
  width: 100%; max-width: 420px; aspect-ratio: 420 / 440; border-radius: 14px; cursor: crosshair; touch-action: none;
  background: #fff conic-gradient(#f6eef0 25%, #fff 0 50%, #f6eef0 0 75%, #fff 0) 0 0 / 24px 24px;
}
.paint-tools { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; align-items: center; }
.paint-tools .btn.on { background: #3f9a5a; color: #fff; border-color: #2a6f3c; }
.paint-tools .mirror { font-family: var(--font-title); font-size: 13px; display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; }
.paint-hint { margin: 0; font-size: 12px; color: var(--ink-soft); text-align: center; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line); cursor: pointer; padding: 0; position: relative; overflow: hidden; }
.swatch.on { box-shadow: 0 0 0 3px var(--pink-deep); transform: scale(1.08); }
.swatch.custom { background: conic-gradient(#f66, #fc6, #6c6, #6cf, #96f, #f6c, #f66); display: inline-flex; align-items: center; justify-content: center; }
.swatch.custom span { font-family: var(--font-title); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); pointer-events: none; }
.swatch.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.previews { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 8px; }
.previews canvas { width: 100%; aspect-ratio: 1; background: var(--pink-soft); border-radius: 12px; }
.nick { text-align: left; }
.options h3 { font-family: var(--font-title); font-weight: 400; margin: 6px 0 8px; font-size: 18px; }
.options h3 small { font-family: var(--font-body); font-size: 12px; color: var(--ink-soft); margin-left: 6px; }
/* ── 로비 ── */
.lobby { width: min(980px, 100%); }
.lobby-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; flex-wrap: wrap; }
.lobby-head .who { display: flex; align-items: center; gap: 10px; flex: 1; font-family: var(--font-title); font-size: 18px; flex-wrap: wrap; }
.lobby-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.lv { background: var(--blue); color: #fff; border-radius: 8px; padding: 1px 8px; font-family: var(--font-title); font-size: 14px; }
.coins { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; }
.coin-icon {
  display: inline-block; width: 20px; height: 20px; border-radius: 50%; vertical-align: middle;
  background: radial-gradient(circle at 35% 30%, #fff3b0 0 18%, transparent 19%), radial-gradient(circle, #f7cf4c 0 55%, #e3a91f 56% 72%, #b97d10 73%);
  box-shadow: inset 0 0 0 1px #8a5a0c;
}
.lobby-title { font-family: var(--font-title); font-weight: 400; text-align: center; margin: 22px 0 14px; font-size: 26px; }
.map-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.map-card { border: 3px solid var(--line); border-radius: 22px; overflow: hidden; padding: 0; background: #fff; cursor: pointer; text-align: left; box-shadow: var(--shadow); transition: transform .12s; }
.map-card:hover { transform: translateY(-3px); border-color: var(--pink); }
.map-card img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.map-info { display: block; padding: 12px 14px; }
.map-info b { font-family: var(--font-title); font-weight: 400; font-size: 22px; display: block; }
.map-info small { color: var(--ink-soft); display: block; margin: 2px 0 6px; }
.map-info em { font-style: normal; background: var(--mint-soft); color: #2f7a4a; border-radius: 8px; padding: 2px 8px; font-size: 13px; }
#lobby-mode { text-align: center; margin-top: 14px; }

/* ── 게임 HUD ── */
#game-canvas { position: absolute; inset: 0; display: block; touch-action: none; }
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud .help { pointer-events: none; }
.chip { background: rgba(255, 253, 248, .92); border: 2px solid var(--line); border-radius: 14px; box-shadow: 0 3px 0 rgba(62,44,46,.08); display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-family: var(--font-title); }
.hud-top-left { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 10px; display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.profile-chip b { font-weight: 400; font-size: 16px; }
.xp-row { display: flex; align-items: center; gap: 6px; }
.xp-bar { width: 90px; height: 8px; border-radius: 6px; background: var(--blue-soft); overflow: hidden; border: 1px solid var(--line); }
.xp-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), #9fd0f6); transition: width .4s; }
.coin-chip b { font-weight: 400; font-size: 18px; }
.coin-chip span { font-size: 13px; color: var(--ink-soft); }
.hud-top-right { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
/* 요리 버프: 먹은 요리 · 효과 · 남은 시간 */
.buff-chip { font-size: 13px; gap: 6px; background: rgba(255, 246, 214, .95); border-color: #e8c86a; }
.buff-chip i { font-style: normal; font-size: 18px; }
.buff-chip small { color: var(--ink-soft); font-size: 12px; }
.map-chip b { font-weight: 400; }
.map-chip .hud-total { color: var(--ink-soft); font-size: 11px; font-family: var(--font-body); }
.map-chip span { color: var(--ink-soft); font-size: 14px; }
.hud-buttons { display: flex; gap: 6px; }
.btn.icon { display: flex; flex-direction: column; align-items: center; padding: 6px 8px 4px; min-width: 50px; font-size: 20px; line-height: 1; }
.btn.icon span { font-size: 11px; margin-top: 3px; }
#btn-shop:not(:disabled) { background: #fff3c4; border-color: var(--gold); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { transform: translateY(-2px); } }

.hud-bottom-left { position: absolute; left: 10px; bottom: max(10px, env(safe-area-inset-bottom)); width: min(340px, 52vw); }
.chat-log { max-height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; font-size: 17px; line-height: 1.15; font-family: var(--font-chat); scrollbar-width: thin; }
.chat-log p { margin: 0; background: rgba(255,253,248,.82); border-radius: 10px; padding: 3px 8px; width: fit-content; max-width: 100%; word-break: break-all; }
.chat-log p b { font-family: var(--font-title); font-weight: 400; color: var(--pink-deep); margin-right: 4px; }
.chat-log p.sys { background: rgba(227, 241, 252, .92); color: #2f5f8a; }
.chat-log p.big { background: #fff3c4; color: #8a5a0c; }
.chat-form input { width: 100%; padding: 7px 12px; border-radius: 12px; border: 2px solid var(--line); background: rgba(255,253,248,.95); outline: none; font-family: var(--font-chat); font-size: 18px; }

.hud-bottom-right { position: absolute; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 10px; }
.emotes { display: grid; grid-template-columns: repeat(4, 38px); gap: 4px; }
.emotes button { width: 38px; height: 38px; border-radius: 12px; border: 2px solid var(--line); background: rgba(255,253,248,.92); font-size: 18px; cursor: pointer; padding: 0; }
.emotes button:active { transform: scale(.92); }
.action-btn {
  width: 92px; height: 92px; border-radius: 50%; border: 4px solid var(--pink-deep); background: var(--pink); color: #fff; font-size: 34px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 5px 0 var(--pink-deep); font-family: var(--font-title);
}
.action-btn span { font-size: 15px; margin-top: 2px; }
.action-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--pink-deep); }
.action-btn.alert { background: #ff7a5a; border-color: #d24a2c; box-shadow: 0 5px 0 #d24a2c; animation: shake .25s infinite; }
@keyframes shake { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }

.help { position: absolute; left: 50%; transform: translateX(-50%); bottom: 8px; font-size: 12px; color: rgba(255,255,255,.95); text-shadow: 0 1px 2px rgba(0,0,0,.5); white-space: nowrap; }

.hook-prompt {
  position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); background: #fff; border: 3px solid #ff7a5a; color: #d24a2c; border-radius: 18px; padding: 10px 18px;
  font-family: var(--font-title); font-size: 24px; box-shadow: var(--shadow); animation: pop .25s ease-out, shake .3s .25s infinite; pointer-events: none;
}
.hook-prompt.strong { background: #fff3c4; }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }

.reel { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); width: min(420px, 92vw); background: rgba(255,253,248,.97); border: 3px solid var(--line); border-radius: 20px; padding: 12px 14px; box-shadow: var(--shadow); }
.reel-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-title); font-size: 20px; }
.reel-head b { font-weight: 400; }
.lives { margin-left: auto; letter-spacing: 2px; }
.tier-badge { font-family: var(--font-title); font-size: 13px; border-radius: 8px; padding: 1px 8px; color: #fff; background: var(--blue); }
.reel-bar { position: relative; height: 30px; margin: 10px 0 8px; border-radius: 15px; background: linear-gradient(90deg, #d5ecfb, #bfe0f7); border: 2px solid #9cc7e8; overflow: hidden; }
#reel-zone { position: absolute; top: 0; bottom: 0; background: rgba(110, 200, 130, .85); border-left: 2px solid #3f9a5a; border-right: 2px solid #3f9a5a; }
#reel-cursor { position: absolute; top: -2px; bottom: -2px; width: 6px; margin-left: -3px; background: var(--ink); border-radius: 3px; box-shadow: 0 0 0 2px #fff; }
.reel.hit .reel-bar { box-shadow: 0 0 0 4px rgba(110,200,130,.6); }
.reel.miss { animation: shake .2s 2; }
.reel-foot { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink-soft); }
.pips { letter-spacing: 3px; font-size: 16px; }

.toasts { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 30; }
.toast { background: rgba(62,44,46,.88); color: #fff; padding: 8px 16px; border-radius: 14px; font-size: 15px; animation: pop2 .2s ease-out; max-width: 90vw; text-align: center; }
@keyframes pop2 { from { transform: translateY(-8px); opacity: 0; } }
.notice { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: #fff3c4; border: 2px solid var(--gold); color: #6a4a0a; font-family: var(--font-title); padding: 8px 18px; border-radius: 16px; box-shadow: var(--shadow); z-index: 6; max-width: 92vw; text-align: center; animation: pop2 .25s ease-out; }
.notice.max { background: linear-gradient(90deg, #ffe0ef, #fff3c4, #dff3ff); }
/* 손 칸 (가방 손 8칸 · 1~8 키): 화면 아래 가운데 */
.hotbar { position: absolute; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 4px; padding: 5px; border-radius: 16px; background: rgba(62, 44, 46, .38); box-shadow: 0 4px 14px rgba(40, 24, 30, .25); z-index: 3; }
.inv-slot { position: relative; width: 50px; height: 50px; border-radius: 12px; border: 2px solid rgba(255, 253, 248, .75); background: rgba(255, 250, 242, .88); padding: 0; cursor: pointer; display: grid; place-items: center; font-family: var(--font-title); transition: transform .08s, border-color .1s; }
.inv-slot img { max-width: 40px; max-height: 40px; image-rendering: auto; pointer-events: none; }
.inv-slot i { font-style: normal; font-size: 24px; pointer-events: none; }
.inv-slot .cnt { position: absolute; right: 3px; bottom: 1px; font-weight: 400; font-size: 13px; color: #fff; text-shadow: 0 1px 0 #3e2c2e, 1px 0 0 #3e2c2e, -1px 0 0 #3e2c2e, 0 -1px 0 #3e2c2e; pointer-events: none; }
.inv-slot .num { position: absolute; left: 4px; top: 1px; font-size: 11px; color: var(--ink-soft); pointer-events: none; }
.inv-slot.empty { background: rgba(255, 250, 242, .45); }
.inv-slot:active { transform: scale(.94); }
.inv-slot.held { border-color: #ffd84a; background: #fff6cf; box-shadow: 0 0 0 3px rgba(255, 216, 74, .55); transform: translateY(-3px); }
.inv-slot.picked { border-color: var(--pink-deep); box-shadow: 0 0 0 3px rgba(240, 138, 168, .5); }
/* 가방 창 (I) */
.inv-head { display: flex; gap: 14px; align-items: center; padding: 6px 4px 10px; }
.inv-pack { width: 88px; height: 88px; display: grid; place-items: center; background: radial-gradient(circle, #fff7e8 0%, #f6ead6 70%); border-radius: 18px; border: 2px solid var(--line); flex: none; }
.inv-pack img { max-width: 78px; max-height: 78px; }
.inv-pack i { font-style: normal; font-size: 40px; }
.inv-head b { font-family: var(--font-title); font-weight: 400; font-size: 20px; display: block; }
.inv-head small { display: block; color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, 54px); gap: 6px; margin: 4px 0 8px; }
.inv-grid .inv-slot { width: 54px; height: 54px; border-color: var(--line); }
.inv-grid.hand .inv-slot { background: #fffaf0; }
.inv-grid.store .inv-slot.empty { background: #f7efe3; }
.inv-grid.over .inv-slot { opacity: .8; border-style: dashed; }
.inv-info { margin-top: 6px; padding: 8px 12px; border-radius: 12px; background: #fff7e6; border: 2px solid #f0dcb4; }
.inv-info b { font-family: var(--font-title); font-weight: 400; display: block; }
.inv-info small { display: block; color: var(--ink-soft); }
.inv-info.muted { background: #faf6f0; border-color: var(--line); }
.empty.small { font-size: 13px; padding: 8px; }
/* 거래 (해문성 안에서만): 양쪽에 올린 물건 · 아래에 올릴 내 물건 */
.btn.icon.alert { border-color: var(--gold-deep); background: #fff4d6; animation: shake .5s 2; }
.trade-people { display: flex; flex-direction: column; gap: 6px; }
.trade-people .camp-row { grid-template-columns: 1fr auto; }
/* 선착장 (중나라): 보트 고르기 */
.boat-pick { display: flex; flex-direction: column; gap: 6px; }
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trade-side { border: 2px solid var(--line); border-radius: 14px; padding: 8px 10px; background: #fffdf8; min-height: 110px; }
.trade-side.them { background: #f6fbff; }
.trade-side.locked { border-color: var(--mint, #7fcfa8); box-shadow: inset 0 0 0 2px rgba(127, 207, 168, .35); }
.trade-side h4, .trade-pick h4 { margin: 0 0 6px; font-family: var(--font-title); font-weight: 400; font-size: 15px; }
.trade-side h4 small, .trade-pick h4 small { display: block; font-family: var(--font-body); font-size: 12px; color: var(--ink-soft); }
.trade-items { display: flex; flex-wrap: wrap; gap: 6px; }
.trade-items.picker { max-height: 190px; overflow-y: auto; padding: 2px; }
.trade-item { width: 76px; border: 2px solid var(--line); border-radius: 12px; background: #fff; padding: 4px 3px; display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: default; font-family: var(--font-body); color: var(--ink); }
.trade-item img { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; }
.trade-item i { font-style: normal; font-size: 26px; line-height: 36px; }
.trade-item .coin-icon { width: 30px; height: 30px; margin: 3px 0; }
.trade-item span { font-size: 11px; line-height: 1.2; text-align: center; word-break: keep-all; }
.trade-item small { font-size: 10px; color: var(--ink-soft); text-align: center; }
.trade-item.mine, .trade-item.pick { cursor: pointer; }
.trade-item.mine:hover { border-color: #ff9a8a; background: #fff3f0; }
.trade-item.pick:hover { border-color: var(--gold); background: #fffaeb; }
.trade-pick { margin-top: 10px; }
.trade-pick .tabs { margin-bottom: 6px; }
.trade-pick .tab { font-size: 13px; padding: 6px 4px; }
.trade-coins { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 2px; }
.trade-coins input { width: 130px; padding: 8px 10px; border-radius: 10px; border: 2px solid var(--line); font-size: 15px; font-family: var(--font-body); }
.trade-coins span { font-size: 13px; color: var(--ink-soft); }
.trade-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.trade-btns .btn { flex: 1; min-width: 110px; }
.note.small { font-size: 12px; margin: 8px 0 0; }
@media (max-width: 560px) {
  .trade-cols { grid-template-columns: 1fr; }
  .trade-item { width: 66px; }
  .trade-item img { width: 30px; height: 30px; }
}
/* 미니맵 (망망대해): 오른쪽 위 버튼 줄 아래 — 누르면 보트가 그쪽으로 가요 */
.minimap { display: block; width: 228px; height: 130px; border-radius: 14px; border: 3px solid rgba(255, 253, 248, .95); box-shadow: 0 4px 0 rgba(62,44,46,.14), 0 6px 18px rgba(20,50,90,.25); cursor: crosshair; touch-action: none; background: #1d5f9e; }
/* 새로운 나라 발견: 가운데 큰 글씨 — '???' 가 스르르 지워지고 나라 이름이 풀려요 */
.discover { position: absolute; top: 24%; left: 50%; transform: translate(-50%, -50%); z-index: 7; pointer-events: none; text-align: center; font-family: var(--font-title); color: #fff; padding: 18px 40px 20px; border-radius: 26px; background: radial-gradient(ellipse at center, rgba(40, 24, 34, .62), rgba(40, 24, 34, .38) 60%, transparent 75%); text-shadow: 0 3px 0 rgba(62,44,46,.45); display: grid; justify-items: center; }
.discover small { font-size: 18px; letter-spacing: 1px; opacity: 0; animation: disc-in .6s ease-out .1s forwards; }
.discover .q { grid-area: 2 / 1; font-size: 54px; color: #d9e6f5; opacity: 0; animation: disc-q 1.6s ease-in-out .3s forwards; }
.discover b { grid-area: 2 / 1; font-weight: 400; font-size: 56px; color: #ffe3ec; opacity: 0; animation: disc-name 1s cubic-bezier(.2,1.4,.4,1) 1.5s forwards; }
.discover.show { animation: disc-out .8s ease-in 4.4s forwards; }
@keyframes disc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes disc-q { 0% { opacity: 0; filter: blur(4px); } 35% { opacity: 1; filter: blur(0); } 70% { opacity: 1; filter: blur(0); } 100% { opacity: 0; filter: blur(8px); transform: scale(1.3); } }
@keyframes disc-name { from { opacity: 0; transform: scale(.6); letter-spacing: 12px; } to { opacity: 1; transform: none; letter-spacing: 2px; } }
@keyframes disc-out { to { opacity: 0; transform: translate(-50%, -60%); } }

/* ── 모달 ── */
.modal { position: fixed; inset: 0; background: rgba(62,44,46,.35); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20; }
.modal-card { width: min(720px, 100%); max-height: min(86vh, 760px); display: flex; flex-direction: column; background: var(--paper); border: 3px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; }
.modal-card header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--pink-soft); }
.modal-card h2 { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: 22px; }
.modal-body { padding: 14px 16px 18px; overflow-y: auto; }
.modal .tabs { margin-top: 0; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.fish-card { border: 2px solid var(--line); border-radius: 16px; background: #fffaf2; padding: 8px; text-align: center; position: relative; }
.fish-card img { width: 100%; height: 64px; object-fit: contain; image-rendering: auto; }
.fish-card b { font-family: var(--font-title); font-weight: 400; display: block; font-size: 16px; }
.fish-card small { display: block; color: var(--ink-soft); font-size: 12px; }
.fish-card .btn { margin-top: 6px; }
.fish-card.unknown img { filter: brightness(0) opacity(.25); }
/* 요리 카드: 요리 그림 (그림이 아직 없으면 물고기 그림 + 요리 표시) */
.food-card .dish-art { height: 72px; }
.food-card .dish-art.kit-art { height: 104px; } /* 밀키트 봉지는 글씨가 보이게 조금 크게 */
.dish-fallback { position: relative; height: 64px; }
.dish-fallback img { height: 64px; }
.dish-fallback span { position: absolute; right: 2px; bottom: 0; font-size: 20px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.dish-fallback.meal { display: flex; align-items: center; justify-content: center; }
.dish-fallback.meal i { font-style: normal; font-size: 44px; line-height: 1; }
.tier-dot.camp { background: #c98a3a; }
.food-card .buff-line { color: #b0702a; }
.kit-buy { display: flex; gap: 4px; justify-content: center; }
.kit-buy .btn { padding-left: 8px; padding-right: 8px; }
.fish-card.unknown b { color: var(--ink-soft); }
.size-badge { display: inline-block; font-family: var(--font-title); font-size: 12px; border-radius: 8px; padding: 0 6px; background: var(--blue-soft); color: #2f5f8a; }
.size-badge.large { background: var(--mint-soft); color: #2f7a4a; }
.size-badge.xlarge { background: #fff0d0; color: #9a6a10; }
.size-badge.record { background: #ffe0ea; color: #c03a5a; }
.size-badge.max { background: linear-gradient(90deg, #ffd6ec, #fff1b8, #d6f0ff); color: #8a3a9a; }
.tier-dot { position: absolute; top: 6px; left: 8px; font-size: 11px; font-family: var(--font-title); color: #fff; border-radius: 7px; padding: 0 6px; }
.rod-list { display: flex; flex-direction: column; gap: 8px; }
.rod-row { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; align-items: center; border: 2px solid var(--line); border-radius: 16px; padding: 8px 12px; background: #fffaf2; }
.rod-row.equipped { border-color: var(--pink); background: var(--pink-soft); }
.rod-row canvas { width: 120px; height: 48px; }
.rod-row b { font-family: var(--font-title); font-weight: 400; font-size: 17px; }
.rod-row small { display: block; color: var(--ink-soft); font-size: 12px; }
.grade { font-size: 12px; border-radius: 7px; padding: 0 6px; background: var(--lav-soft); margin-left: 4px; font-family: var(--font-title); }
.empty { text-align: center; color: var(--ink-soft); padding: 30px 0; }

/* 낚시 성공 카드 */
.catch-card { text-align: center; }
.catch-card .glow { background: radial-gradient(circle, #fff7d0 0 40%, transparent 70%); padding: 10px; }
.catch-card img { width: min(300px, 80%); height: 150px; object-fit: contain; animation: pop3 .45s ease-out; }
@keyframes pop3 { from { transform: scale(.4) rotate(-10deg); opacity: 0; } }
.catch-card h3 { font-family: var(--font-title); font-weight: 400; font-size: 30px; margin: 4px 0; }
.catch-card .size { font-family: var(--font-title); font-size: 24px; }
.catch-card .badges { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }
.catch-card .badges span { font-family: var(--font-title); border-radius: 10px; padding: 2px 10px; background: var(--pink-soft); color: var(--pink-deep); }
.catch-card .stats { display: flex; gap: 10px; justify-content: center; margin: 10px 0 14px; flex-wrap: wrap; }
.catch-card .stats div { background: #fffaf2; border: 2px solid var(--line); border-radius: 12px; padding: 6px 14px; font-family: var(--font-title); }

/* ── 캠핑 ── */
.btn.icon.on { background: var(--mint-soft); border-color: var(--mint); }
.sub { font-family: var(--font-title); font-weight: 400; font-size: 17px; margin: 16px 0 8px; }
.sub small { color: var(--ink-soft); font-size: 13px; }
.camp-list { display: flex; flex-direction: column; gap: 8px; }
.camp-row { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; align-items: center; border: 2px solid var(--line); border-radius: 16px; padding: 8px 12px; background: #fffaf2; }
.camp-row b { font-family: var(--font-title); font-weight: 400; font-size: 17px; }
.camp-row small { display: block; color: var(--ink-soft); font-size: 12px; }
.camp-icon { width: 84px; height: 64px; display: flex; align-items: center; justify-content: center; }
.camp-icon img { max-width: 100%; max-height: 100%; object-fit: contain; }
.camp-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.camp-tent { border: 2px solid var(--line); border-radius: 14px; background: #fffaf2; padding: 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; font-family: var(--font-title); }
.camp-tent img { width: 90px; height: 60px; object-fit: contain; }
.camp-tent small { color: var(--ink-soft); font-size: 12px; }
.camp-tent.on { border-color: var(--pink); background: var(--pink-soft); }
.camp-tent:disabled { cursor: default; }
.invite-list { display: flex; flex-direction: column; gap: 6px; }
.invite-list div { display: flex; justify-content: space-between; align-items: center; border: 2px solid var(--line); border-radius: 12px; padding: 4px 10px; background: #fffaf2; font-family: var(--font-title); }
.camp-bar {
  position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  background: rgba(255,253,248,.96); border: 2px solid var(--line); border-radius: 16px; padding: 8px 12px; box-shadow: var(--shadow); font-family: var(--font-title); max-width: 92vw; z-index: 5;
}
.camp-bar .ok { color: #2f8a4a; }
/* 냥토패스 */
.pass-card { display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, #fff6dc, #e3f0ff); border: 3px solid var(--gold); border-radius: 18px; padding: 12px 14px; box-shadow: 0 3px 0 var(--gold-deep); }
.pass-art { font-size: 34px; line-height: 1.1; text-align: center; width: 78px; flex: none; background: #2f5aa8; border-radius: 14px; padding: 12px 4px; }
.pass-info b { font-family: var(--font-title); font-weight: 400; font-size: 20px; color: #2f4a8a; }
.pass-info p { margin: 6px 0; font-size: 14px; }
.pass-tag { display: inline-block; font-family: var(--font-title); font-size: 12px; background: #2f5aa8; color: #fff; border-radius: 8px; padding: 1px 8px; margin-left: 4px; vertical-align: middle; }
.pass-state { color: #8a5a0c; }
.pass-gift { margin-top: 12px; background: var(--peach-soft); border: 2px dashed var(--line); border-radius: 14px; padding: 10px 12px; }
.pass-gift b { font-family: var(--font-title); font-weight: 400; }
.pass-gift div { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.pass-gift input { padding: 5px 8px; border-radius: 10px; border: 2px solid var(--line); width: 130px; }
.pass-gift input[type="number"] { width: 64px; }
.pass-gift small { color: var(--ink-soft); }
@media (max-width: 520px) { .pass-card { flex-direction: column; align-items: stretch; } .pass-art { width: auto; } }
/* 냥토패스 상점: 간판 · 말풍선 · 일반 / 프리미엄 카드 (카드 그림 속 '구매하기' 버튼 위에 투명한 버튼) */
.npass-head { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.npass-logo { width: min(300px, 70%); height: auto; }
.npass-bubble { width: min(220px, 60%); height: auto; }
.npass-row { display: flex; gap: 14px; justify-content: center; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }
.npass { flex: 1 1 220px; max-width: 290px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.npass-art { position: relative; width: 100%; line-height: 0; }
.npass-art img { width: 100%; height: auto; display: block; }
.npass.basic .npass-art { width: 88%; } /* 일반 카드는 조금 작게 (그림 크기 비율 그대로) */
.npass-buy { position: absolute; border: 0; border-radius: 14px; background: transparent; cursor: pointer; padding: 0; }
.npass-buy:hover:not(:disabled) { background: rgba(255, 255, 255, .22); box-shadow: 0 0 0 3px rgba(255, 220, 120, .7); }
.npass-buy:active:not(:disabled) { transform: translateY(1px); }
.npass-buy:disabled { cursor: not-allowed; background: rgba(120, 110, 110, .35); }
.npass-buy:focus-visible { outline: 3px solid #4a8ae0; }
.npass.using .npass-art img { filter: drop-shadow(0 0 8px rgba(255, 200, 80, .9)); }
.npass-info { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-size: 13px; }
.npass-info > b { font-family: var(--font-title); font-weight: 400; font-size: 17px; }
.npass.premium .npass-info > b { color: #b07a10; }
.npass-price { font-family: var(--font-title); color: #8a5a0c; }
.npass-state { color: var(--ink-soft); }
.pass-gift select { padding: 5px 8px; border-radius: 10px; border: 2px solid var(--line); }
/* 자동 낚시 버튼 아이콘: 지금 패스의 고양이 배지 */
#auto-icon { font-style: normal; display: block; line-height: 1; }
#auto-icon img { width: 26px; height: 26px; object-fit: contain; display: block; }
.btn.icon.premium:not(.on) { border-color: var(--gold); }
.camp-bar .bad { color: #c8485a; }
.edit-panel {
  position: absolute; right: 10px; top: 120px; width: min(300px, 70vw); max-height: calc(100vh - 260px); overflow-y: auto;
  background: rgba(255,253,248,.97); border: 2px solid var(--line); border-radius: 18px; padding: 10px 12px; box-shadow: var(--shadow); z-index: 5;
}
.edit-panel header { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-title); font-size: 18px; }
.edit-panel header b { font-weight: 400; }
.edit-sel { background: var(--mint-soft); border-radius: 12px; padding: 8px; margin: 6px 0; font-size: 14px; }
.edit-sel b { font-family: var(--font-title); font-weight: 400; font-size: 16px; }
.edit-sel div { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.edit-inv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.edit-inv button { position: relative; border: 2px solid var(--line); border-radius: 12px; background: #fffaf2; padding: 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; font-family: var(--font-title); font-size: 11px; }
.edit-inv button:hover { border-color: var(--pink); }
.edit-inv img { width: 100%; height: 44px; object-fit: contain; }
.edit-inv i { position: absolute; top: 2px; right: 4px; font-style: normal; font-size: 11px; color: var(--ink-soft); }
/* 소리 설정 (🔊 버튼) */
.sound-panel {
  position: absolute; right: 10px; top: 120px; width: min(300px, calc(100vw - 32px)); z-index: 6;
  background: rgba(255,253,248,.97); border: 2px solid var(--line); border-radius: 18px; padding: 10px 14px 12px; box-shadow: var(--shadow);
  animation: pop2 .2s ease-out;
}
.sound-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-title); font-size: 18px; margin-bottom: 4px; }
.sound-head b { font-weight: 400; }
.sound-head i { font-style: normal; }
.vol-row { display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 0 8px; padding: 6px 0; border-top: 1px dashed var(--line); cursor: pointer; }
.vol-row span { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 6px; }
.vol-row b { font-family: var(--font-title); font-weight: 400; font-size: 15px; }
.vol-row small { color: var(--ink-soft); font-size: 11px; }
.vol-row em { font-style: normal; font-family: var(--font-title); font-size: 14px; color: var(--pink-deep); text-align: right; }
.vol-row input[type="range"] { width: 100%; accent-color: var(--pink-deep); cursor: pointer; margin: 2px 0; }
.sound-panel.muted .vol-row { opacity: .45; }
.sound-foot { display: flex; justify-content: space-between; gap: 6px; margin-top: 6px; }

.invite-box {
  position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: 7; background: #fff; border: 3px solid var(--mint); border-radius: 16px;
  padding: 8px 14px; box-shadow: var(--shadow); text-align: center; animation: pop2 .25s ease-out; max-width: 92vw;
}
.invite-box p { margin: 0 0 6px; }
.invite-box div { display: flex; gap: 6px; justify-content: center; }
.aqua-tank { display: block; width: 100%; height: 260px; border-radius: 18px; border: 5px solid #9cc7e8; background: #2d7fc8; margin-bottom: 12px; box-sizing: border-box; }
@media (max-width: 600px) { .aqua-tank { height: 200px; } }
.aqua-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.aqua-head img { width: 90px; height: 70px; object-fit: contain; }
.aqua-head b { font-family: var(--font-title); font-weight: 400; font-size: 20px; display: block; }
.aqua-head small { color: var(--ink-soft); }
.spot-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.spot-pick { border: 2px solid var(--line); border-radius: 18px; background: #fffaf2; padding: 8px; cursor: pointer; text-align: center; font-family: var(--font-title); }
.spot-pick:hover { border-color: var(--pink); transform: translateY(-2px); }
.spot-pick-img { display: block; height: 120px; border-radius: 12px; background-color: #7cc843; background-size: cover; background-position: center; margin-bottom: 6px; }
.spot-pick b { display: block; font-weight: 400; font-size: 19px; }
.spot-pick small { display: block; color: var(--ink-soft); font-family: var(--font-body); font-size: 13px; }

.aqua-dot { position: absolute; top: 6px; right: 8px; font-size: 11px; font-family: var(--font-title); background: var(--blue-soft); color: #2f5f8a; border-radius: 7px; padding: 0 5px; }
.rank-list { display: flex; flex-direction: column; gap: 6px; }
.rank-row { display: grid; grid-template-columns: 40px 44px 1fr auto; align-items: center; gap: 10px; border: 2px solid var(--line); border-radius: 14px; padding: 4px 12px; background: #fffaf2; }
.rank-row.me { border-color: var(--pink); background: var(--pink-soft); }
.rank-row .no { font-family: var(--font-title); font-weight: 400; font-size: 20px; text-align: center; }
.rank-row .who { font-family: var(--font-title); font-size: 16px; }
.rank-row .who small { display: block; font-family: var(--font-body); font-size: 12px; color: var(--ink-soft); }
.rank-row .cnt { font-family: var(--font-title); color: var(--ink-soft); font-size: 14px; }

/* ── 작은 화면 ── */
@media (max-width: 760px) {
  .rank-row { grid-template-columns: 32px 40px 1fr; }
  .rank-row .cnt { grid-column: 3; }
  .camp-row { grid-template-columns: 64px 1fr; }
  .camp-row .btn { grid-column: 1 / -1; }
  .camp-icon { width: 64px; height: 50px; }
  .camp-bar { bottom: auto; top: 120px; }
  .edit-panel { top: auto; bottom: 110px; right: 50%; transform: translateX(50%); width: 92vw; max-height: 40vh; }
  .spot-picks { grid-template-columns: 1fr; }
  .create-body { grid-template-columns: 1fr; }
  .create-card { padding: 12px; }
  .map-cards { grid-template-columns: 1fr; }
  .help { display: none; }
  .hud-top-left { flex-direction: column; gap: 6px; }
  .chip { padding: 4px 8px; }
  .profile-chip canvas { width: 34px; height: 34px; }
  .hud-buttons { flex-direction: column; }
  .hud-buttons .btn.icon span { display: none; }
  /* 휴대폰: 손 칸은 대화창 위로 · 조금 작게 */
  .hotbar { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 150px); gap: 3px; padding: 4px; }
  .hotbar .inv-slot { width: 38px; height: 38px; border-radius: 10px; }
  .hotbar .inv-slot img { max-width: 30px; max-height: 30px; }
  .hotbar .inv-slot i { font-size: 18px; }
  .inv-grid { grid-template-columns: repeat(auto-fill, 46px); gap: 5px; }
  .inv-grid .inv-slot { width: 46px; height: 46px; }
  /* 휴대폰: 오른쪽은 세로 버튼 줄이라 미니맵은 왼쪽 위 (프로필 아래) */
  .minimap { position: fixed; left: 10px; top: calc(max(10px, env(safe-area-inset-top)) + 96px); width: 168px; height: 97px; }
  .discover b { font-size: 42px; }
  .discover .q { font-size: 40px; }
  /* 오른쪽 세로 버튼 줄을 가리지 않게 그 왼쪽에 띄워요 */
  .sound-panel { right: 64px; top: 64px; width: min(280px, calc(100vw - 80px)); }
  .btn.icon { min-width: 40px; padding: 6px; font-size: 18px; }
  .xp-bar { width: 60px; }
  .hud-bottom-left { width: calc(100vw - 112px); }
  .hud-bottom-right { flex-direction: column; align-items: flex-end; gap: 8px; }
  .emotes { grid-template-columns: repeat(2, 34px); }
  .emotes button { width: 34px; height: 34px; font-size: 15px; }
  .action-btn { width: 78px; height: 78px; font-size: 28px; }
  .chat-log { max-height: 90px; font-size: 15px; }
  .reel { bottom: auto; top: 60%; }
  .hook-prompt { font-size: 20px; }
  .rod-row { grid-template-columns: 80px 1fr; }
  .rod-row canvas { width: 80px; height: 36px; }
  .rod-row .btn { grid-column: 1 / -1; }
}

/* 도감: 그 낚시터에서만 낚이는 물고기 */
.fish-card .only-spot { color: #b0602a; font-weight: 600; }

/* 회원가입 이메일 인증 · 2차 비밀번호 (로그인 화면) */
.code-row { display: flex; gap: 6px; align-items: stretch; margin-top: 4px; }
.code-row input { flex: 1; min-width: 0; margin-top: 0 !important; }
.code-row .btn { white-space: nowrap; }
label .hint { display: block; font-family: var(--font-body); font-size: 12px; color: var(--ink-soft); font-weight: 400; }
.code-note { margin: 2px 0 6px; min-height: 0; }
.code-note:empty { display: none; }
.code-note b { font-family: var(--font-title); font-size: 18px; color: #c0587a; letter-spacing: 2px; }
#pin-form label { display: block; margin-top: 8px; }
.pin-links { display: flex; justify-content: space-between; margin-top: 10px; }
.pin-reset { margin-top: 10px; padding: 10px; border: 2px dashed var(--line); border-radius: 12px; }
.pin-reset .btn { width: 100%; margin-top: 8px; }

/* 비단잉어 무늬: 도감의 모은 무늬 줄 · 황금 비단잉어 낚시 카드 */
.variant-strip { margin-top: 4px; text-align: center; }
.variant-strip small { display: block; color: var(--ink-soft); font-size: 11px; }
.variant-strip div { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 2px; }
.variant-strip img { width: 26px !important; height: 14px !important; object-fit: contain; margin: 0 !important; }
.variant-strip img.unseen { filter: brightness(0) opacity(.18); }
.variant-strip img.gold:not(.unseen) { filter: drop-shadow(0 0 3px #ffd84a); }
.catch-card.gold .glow { background: radial-gradient(circle, rgba(255, 216, 74, .75), rgba(255, 216, 74, 0) 70%); animation: goldPulse 1.6s ease-in-out infinite; }
.catch-card.gold h3 { color: #c98d14; text-shadow: 0 0 8px rgba(255, 216, 74, .8); }
@keyframes goldPulse { 50% { transform: scale(1.06); filter: brightness(1.15); } }
.variant-row td { font-size: 13px; background: #fffaf0; }
/* 전설의 물고기(황금 비단잉어) 알림: 서버 전체 · 금빛으로 크게 */
.notice.legend { top: 64px; font-size: 20px; padding: 12px 26px; background: linear-gradient(90deg, #fff1b8, #ffd84a, #fff1b8); background-size: 200% 100%; border: 3px solid #c98d14; color: #5a3a00; box-shadow: 0 0 0 4px rgba(255, 216, 74, .35), 0 8px 24px rgba(201, 141, 20, .45); animation: pop2 .3s ease-out, legendShine 2.2s linear infinite; }
@keyframes legendShine { from { background-position: 0% 0; } to { background-position: 200% 0; } }
/* 서버에 메일 설정이 없을 때: 회원가입 이메일 인증 칸 숨기기 */
#auth-form.no-email .email-step { display: none !important; }