/* 奶糖小鎮 — UI 樣式 v3（像素風） */
* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: 'Microsoft JhengHei', 'PingFang TC', sans-serif;
  background: #6db3d6;
  image-rendering: pixelated;
}
canvas#game { display: block; width: 100vw; height: 100vh; image-rendering: pixelated; }

/* ====== 像素框通用 ====== */
.pixel-box {
  background: #fff8ea;
  border: 3px solid #3a2c20;
  box-shadow: 0 4px 0 rgba(0,0,0,.25), inset 0 0 0 2px #e8d3ad;
  border-radius: 4px;
}
button.px {
  font-family: inherit;
  background: #ffd166; border: 2px solid #3a2c20;
  box-shadow: 0 2px 0 #3a2c20; border-radius: 4px;
  padding: 4px 10px; cursor: pointer; font-size: 14px; font-weight: bold;
  color: #3a2c20;
}
button.px:hover { background: #ffe09a; }
button.px:active { transform: translateY(2px); box-shadow: none; }
button.px.alt { background: #9ad0f5; }
button.px.alt:hover { background: #bfe2fa; }
button.px.danger { background: #f5a8a8; }
button.px.small { font-size: 12px; padding: 2px 8px; }
button.px.tiny { font-size: 10px; padding: 0 4px; box-shadow: none; }
button.px.big { font-size: 16px; padding: 8px 16px; display: block; margin: 10px auto; }
button.px.disabled { opacity: .55; cursor: default; }
button.px.on { background: #ff9f6b; }

/* ====== 登入畫面 ====== */
#login {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(#87c7e8, #bfe3f5 60%, #9fd08a 60.5%);
}
#login .pixel-box { padding: 28px 32px; width: 340px; text-align: center; }
#login h1 { font-size: 30px; color: #b3654a; letter-spacing: 4px; margin-bottom: 2px;
  text-shadow: 2px 2px 0 #ffe9b0; }
#login .sub { font-size: 12px; color: #8a7a60; margin-bottom: 18px; }
#login input {
  width: 100%; padding: 8px 10px; margin-bottom: 10px;
  border: 2px solid #3a2c20; border-radius: 4px;
  font-size: 15px; font-family: inherit; background: #fff;
}
#login button { width: 100%; padding: 8px; font-size: 16px; }
#loginErr { color: #c0392b; font-size: 13px; min-height: 18px; margin-bottom: 6px; }
#loginCanvas { margin: 0 auto 10px; display: block; }

/* ====== HUD ====== */
#hud {
  position: fixed; top: 10px; left: 10px; z-index: 20;
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  max-width: calc(100vw - 230px);
}
.hud-chip {
  background: rgba(255,248,234,.95); border: 2px solid #3a2c20; border-radius: 4px;
  padding: 4px 8px; font-size: 13px; font-weight: bold; color: #3a2c20;
  box-shadow: 0 2px 0 rgba(0,0,0,.2);
}
.hud-chip.usd { background: #d9f2e2; color: #14633c; }
.hud-chip.dim { background: rgba(255,248,234,.7); font-weight: normal; font-size: 12px; }
#mapName { background: rgba(58,44,32,.85); color: #ffe9b0; }

#toolbar {
  position: fixed; top: 10px; right: 10px; z-index: 20;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
#toolbar button { min-width: 86px; font-size: 13px; }

/* ====== 聊天 ====== */
#chatLog {
  position: fixed; left: 10px; bottom: 56px; z-index: 15;
  width: 320px; max-height: 180px; overflow-y: auto;
  background: rgba(255,248,234,.92); border: 2px solid #3a2c20; border-radius: 4px;
  padding: 6px 8px; font-size: 13px; line-height: 1.5;
}
#chatLog .nm { font-weight: bold; color: #2c6fad; }
#chatLog .sys { color: #8a7a60; font-style: italic; }
#chatLog .gain { color: #1e8f4d; font-weight: bold; }
#chatBar {
  position: fixed; left: 10px; bottom: 12px; z-index: 20;
  display: flex; gap: 6px; width: 320px;
}
#chatInput {
  flex: 1; padding: 7px 10px; border: 2px solid #3a2c20; border-radius: 4px;
  font-size: 14px; font-family: inherit; background: rgba(255,255,255,.95);
}

/* ====== 釣魚按鈕 ====== */
#fishBtn {
  position: fixed; right: 14px; bottom: 18px; z-index: 25;
  display: none; font-size: 18px; padding: 12px 20px;
}
#fishBtn.show { display: block; }
#fishBtn.bite { background: #ff5050; color: #fff; animation: shake .15s infinite; }
@keyframes shake {
  0% { transform: translate(0,0); } 25% { transform: translate(-2px,1px); }
  50% { transform: translate(2px,-1px); } 100% { transform: translate(0,0); }
}

/* ====== 面板 ====== */
.panel {
  position: fixed; z-index: 30; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 580px; max-width: 94vw; max-height: 84vh;
  display: none; flex-direction: column;
}
.panel.narrow { width: 460px; }
.panel.wide { width: 760px; }
.panel.show { display: flex; }
.panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; background: #f2b56b; border-bottom: 3px solid #3a2c20;
  font-weight: bold; font-size: 16px; color: #3a2c20;
}
.panel-body { padding: 12px; overflow-y: auto; }
.tabs { display: flex; gap: 4px; padding: 8px 12px 0; flex-wrap: wrap; }

.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.item-card {
  background: #fff; border: 2px solid #3a2c20; border-radius: 4px;
  padding: 6px; text-align: center; font-size: 12px; cursor: pointer;
  position: relative;
}
.item-card:hover { background: #fff3d6; }
.item-card.owned { border-color: #1e8f4d; }
.item-card.equipped { background: #d9f2e2; border-color: #1e8f4d; }
.item-card.premium { background: #fff8dc; border-color: #c8860a; box-shadow: 0 0 6px rgba(255,209,102,.5); }
.item-card canvas { display: block; margin: 0 auto 4px; image-rendering: pixelated; }
.item-card .price { color: #c8860a; font-weight: bold; }
.item-card .price .usd { color: #14633c; }
.item-card .tag {
  position: absolute; top: 2px; right: 2px; font-size: 10px;
  background: #1e8f4d; color: #fff; border-radius: 3px; padding: 1px 4px;
}
.attr-badge { font-size: 12px; }
.card-btns { display: flex; gap: 4px; justify-content: center; margin-top: 4px; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
.swatch { width: 26px; height: 26px; border: 2px solid #3a2c20; border-radius: 4px; cursor: pointer; }
.swatch.on { outline: 3px solid #ff9f6b; }
.section-title { font-size: 13px; font-weight: bold; color: #8a6a48; margin: 12px 0 5px; }
.minitag {
  font-size: 11px; background: #ffe2c2; border: 1px solid #c8a060;
  border-radius: 3px; padding: 0 4px; color: #8a5a20;
}

#wardrobePreview { display: flex; gap: 14px; }
#wardrobePreview .left { flex: 0 0 120px; text-align: center; }
#wardrobePreview .right { flex: 1; }
#avatarPreview { background: #cfe7f5; border: 2px solid #3a2c20; border-radius: 4px; }

.player-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px; border-bottom: 1px dashed #d2bb90; font-size: 14px;
  gap: 8px;
}

/* ====== 地圖縮圖 ====== */
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 12px; }
.map-card {
  background: #fff; border: 2px solid #3a2c20; border-radius: 6px;
  overflow: hidden; cursor: pointer; transition: transform .08s;
}
.map-card:hover { transform: translateY(-2px); box-shadow: 0 4px 0 rgba(0,0,0,.2); }
.map-card canvas { display: block; width: 100%; image-rendering: pixelated; border-bottom: 2px solid #3a2c20; }
.map-card-name { padding: 5px 8px; font-size: 13px; font-weight: bold; color: #3a2c20; }

/* ====== 任務 / NPC ====== */
.quest-card {
  background: #fff; border: 2px solid #c8a060; border-radius: 4px;
  padding: 10px; margin-bottom: 10px; font-size: 14px; line-height: 1.7;
}
.q-ok { color: #1e8f4d; font-weight: bold; }
.q-no { color: #8a7a60; }
.q-reward { color: #c8860a; font-weight: bold; }
.quest-btns { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.quest-btns.center { justify-content: center; }
.bag-info {
  background: #fff3d6; border: 2px solid #c8a060; border-radius: 4px;
  padding: 8px 10px; font-size: 13px; margin-bottom: 10px; line-height: 1.6;
}
.npc-dialog {
  background: #fff; border: 2px solid #3a2c20; border-radius: 6px;
  padding: 10px 12px; font-size: 15px; margin-bottom: 10px;
}
.bank-est { font-size: 12px; color: #8a6a48; align-self: center; }
.gacha-vat { font-size: 60px; text-align: center; margin: 8px 0; transition: transform .2s; }
.gacha-vat.rolling { animation: vatroll .9s ease-in-out; }
@keyframes vatroll {
  0% { transform: rotate(0); }
  25% { transform: rotate(-18deg) scale(1.05); }
  50% { transform: rotate(14deg) scale(1.1); }
  75% { transform: rotate(-10deg) scale(1.05); }
  100% { transform: rotate(0); }
}
.gacha-result {
  text-align: center; background: #fff; border: 2px solid #1e8f4d; border-radius: 6px;
  padding: 10px; margin-top: 10px; font-size: 15px;
  animation: pop .3s;
}
.gacha-result.rare { border-color: #c8860a; background: #fff8dc; box-shadow: 0 0 14px rgba(255,209,102,.8); }
.gacha-result canvas { display: block; margin: 0 auto 4px; image-rendering: pixelated; }

/* ====== 股市 ====== */
.stock-list { background: #fff; border: 2px solid #d2bb90; border-radius: 4px; }
.stock-row {
  display: flex; align-items: center; padding: 7px 10px;
  border-bottom: 1px dashed #e0d0b0; cursor: pointer; font-size: 14px; gap: 8px;
}
.stock-row:hover, .stock-row.on { background: #fff3d6; }
.stock-name { flex: 1; font-weight: bold; }
.stock-price.up { color: #d8403a; font-weight: bold; }
.stock-price.down { color: #1e8f4d; font-weight: bold; }
.stock-hold { font-size: 12px; color: #8a6a48; min-width: 56px; text-align: right; }
.stock-detail { padding: 8px 10px; background: #f8f2e4; border-bottom: 1px dashed #e0d0b0; }
.stock-chart { width: 100%; border: 2px solid #3a2c20; border-radius: 4px; image-rendering: auto; }

/* ====== 好友/私訊 ====== */
.dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #b9b3a6; margin-right: 5px; border: 1px solid #3a2c20;
}
.dot.on { background: #4dd66d; }
.dm-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.dm-log {
  background: #fff; border: 2px solid #d2bb90; border-radius: 4px;
  height: 220px; overflow-y: auto; padding: 8px; font-size: 13px; margin-bottom: 8px;
}
.dm-msg { margin-bottom: 5px; line-height: 1.5; }
.dm-msg.mine b { color: #1e8f4d; }
.dm-msg b { color: #2c6fad; }
.dm-input { display: flex; gap: 6px; margin: 6px 0; align-items: center; flex-wrap: wrap; }
.dm-input input {
  flex: 1; min-width: 90px; padding: 6px 10px; border: 2px solid #3a2c20; border-radius: 4px;
  font-size: 14px; font-family: inherit;
}
.friend-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* ====== 日記 ====== */
.diary-title {
  width: 100%; padding: 8px 10px; border: 2px solid #3a2c20; border-radius: 4px;
  font-size: 15px; font-family: inherit; margin-bottom: 8px;
}
.diary-text {
  width: 100%; height: 140px; padding: 8px 10px; border: 2px solid #3a2c20;
  border-radius: 4px; font-size: 14px; font-family: inherit; resize: vertical;
}
.diary-photo-opt { display: block; margin: 8px 0; font-size: 14px; cursor: pointer; }
.diary-card {
  background: #fff; border: 2px solid #d2bb90; border-radius: 4px;
  padding: 10px; margin-bottom: 12px; font-size: 14px;
}
.diary-card-head { margin-bottom: 6px; }
.diary-card-text { line-height: 1.7; color: #4a3b2a; margin-bottom: 6px; user-select: text; }
.diary-img { max-width: 100%; border: 2px solid #3a2c20; border-radius: 4px; margin: 4px 0; image-rendering: auto; }
.diary-comments {
  margin-top: 8px; background: #faf4e6; border: 1px solid #e0d0b0;
  border-radius: 4px; padding: 6px 8px;
}
.diary-comments-head { font-size: 12px; font-weight: bold; color: #8a6a48; margin-bottom: 4px; }
.diary-comment {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; padding: 2px 0; border-bottom: 1px dotted #e0d0b0;
  user-select: text;
}
.diary-comment b { color: #2c6fad; }

/* ====== 交易 ====== */
.trade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.trade-side { background: #fff; border: 2px solid #d2bb90; border-radius: 4px; padding: 8px; min-height: 90px; }
.trade-side.ok { border-color: #1e8f4d; background: #f0faf3; }
.trade-side-head { font-weight: bold; font-size: 13px; margin-bottom: 6px; color: #8a6a48; }
.trade-item { font-size: 13px; padding: 2px 0; }
.trade-item.dim { color: #b9b3a6; }
.trade-inv { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }

/* ====== 小遊戲 ====== */
.game-info { font-size: 14px; margin-bottom: 8px; text-align: center; }
.game-status { font-size: 16px; font-weight: bold; text-align: center; margin: 8px 0; color: #3a2c20; }
.game-status.winflash { color: #c8860a; animation: pop .35s; }
.game-hint { font-size: 12px; color: #8a7a60; text-align: center; margin: 6px 0; }

.gomoku-board {
  display: grid; grid-template-columns: repeat(13, 26px); gap: 1px;
  justify-content: center; background: #c8a23c; border: 3px solid #8a6a2c;
  padding: 4px; margin: 0 auto; width: fit-content;
}
.gomoku-cell {
  width: 26px; height: 26px; background: #d8b44c;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: default; position: relative;
}
.gomoku-cell::before { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: #8a6a2c55; }
.gomoku-cell::after { content: ''; position: absolute; top: 50%; left: 0; height: 1px; width: 100%; background: #8a6a2c55; }
.gomoku-cell.can:hover { background: #e8c45c; cursor: pointer; }
.stone { position: relative; z-index: 2; }
.stone.black { color: #222; text-shadow: 1px 1px 0 #00000044; }
.stone.white { color: #fff; text-shadow: 1px 1px 0 #00000066; }

.oth-board {
  display: grid; grid-template-columns: repeat(8, 38px); gap: 2px;
  justify-content: center; background: #1d5435; border: 3px solid #143b25;
  padding: 5px; margin: 0 auto; width: fit-content;
}
.oth-cell {
  width: 38px; height: 38px; background: #2e7d4f; border-radius: 3px;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.oth-cell.can { background: #3a9663; cursor: pointer; box-shadow: inset 0 0 0 2px #ffd16688; }
.oth-cell.can:hover { background: #4aa873; }

.bt-seat { padding: 2px 6px; border: 1px solid #c8a060; border-radius: 4px; font-size: 13px; margin: 0 2px; }
.bt-seat.turn { background: #ffe09a; font-weight: bold; }
.bt-seat.dim { color: #b9b3a6; }
.bt-table {
  background: #2e7d4f; border: 3px solid #1d5435; border-radius: 8px;
  padding: 12px; margin: 8px 0; color: #fff; text-align: center; min-height: 64px;
}
.bt-table.holdem { background: #5a1f28; border-color: #3d141b; }
.bt-cards { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.bt-cards.hand { margin: 8px 0; }
.bt-cards.center { justify-content: center; }
.bt-card {
  background: #fff; border: 2px solid #3a2c20; border-radius: 4px;
  padding: 4px 5px; font-size: 14px; font-weight: bold; color: #222;
  cursor: default; min-width: 34px; text-align: center;
}
.bt-card.red { color: #d8403a; }
.bt-card.big { font-size: 16px; padding: 8px 6px; cursor: pointer; }
.bt-card.big:hover { background: #fff3d6; }
.bt-card.sel { transform: translateY(-8px); border-color: #1e8f4d; background: #d9f2e2; }
.bt-card.facedown { background: #3a5a7a; color: #cfe0f0; }

.holdem-players { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.holdem-p { background: #fff; border: 2px solid #d2bb90; border-radius: 4px; padding: 6px; text-align: center; }
.holdem-p.turn { border-color: #c8860a; background: #fff8dc; }
.holdem-p.folded { opacity: .45; }
.holdem-p-name { font-size: 13px; font-weight: bold; }

.math-q {
  font-size: 34px; font-weight: bold; text-align: center;
  background: #2d4a3e; color: #fff; border-radius: 8px; border: 3px solid #1d3328;
  padding: 18px; margin: 10px 0; letter-spacing: 2px;
}
.rc-item {
  font-size: 26px; font-weight: bold; text-align: center;
  background: #fff; border: 3px solid #3a2c20; border-radius: 8px;
  padding: 20px; margin: 10px 0;
}
.rc-bins { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rc-bin { font-size: 16px; padding: 14px; color: #fff; text-shadow: 1px 1px 0 #00000066; }

.ddr-stage {
  display: flex; gap: 6px; justify-content: center;
  background: #1c1c2e; border: 3px solid #3a2c20; border-radius: 8px;
  height: 300px; padding: 8px; position: relative; overflow: hidden;
}
.ddr-lane { width: 56px; position: relative; background: #26263e; border-radius: 4px; }
.ddr-target {
  position: absolute; top: 86%; left: 0; width: 100%; text-align: center;
  font-size: 26px; color: #8a8aa8; border-top: 2px dashed #8a8aa8; border-bottom: 2px dashed #8a8aa8;
}
.ddr-note {
  position: absolute; left: 0; width: 100%; text-align: center;
  font-size: 26px; color: #ffd166; font-weight: bold; top: -10%;
  text-shadow: 0 0 6px #ffd16688;
}
.ddr-note.perfect { color: #4dd66d; transform: scale(1.4); }
.ddr-note.good { color: #58d6ff; transform: scale(1.2); }
.ddr-note.miss { color: #555; }

/* ====== 賭場 ====== */
.slot-reels { display: flex; gap: 10px; justify-content: center; margin: 14px 0; }
.slot-reel {
  width: 80px; height: 80px; background: #fff; border: 3px solid #3a2c20; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 44px;
  box-shadow: inset 0 -8px 0 rgba(0,0,0,.08);
}
.rou-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0; }
.rou-cell { color: #fff; text-shadow: 1px 1px 0 #00000066; padding: 10px; font-size: 14px; }

/* ====== 其他 ====== */
#editHint {
  position: fixed; top: 56px; left: 50%; transform: translateX(-50%);
  z-index: 20; display: none;
  background: rgba(58,44,32,.9); color: #ffe9b0;
  padding: 6px 14px; border-radius: 4px; font-size: 13px;
}
#editHint.show { display: block; }
#toast {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%);
  z-index: 40; display: none;
  background: #1e8f4d; color: #fff; font-weight: bold;
  padding: 8px 18px; border-radius: 6px; border: 2px solid #3a2c20;
  font-size: 15px; max-width: 86vw;
}
#toast.show { display: block; animation: pop .25s; }
@keyframes pop { from { transform: translateX(-50%) scale(.6); } to { transform: translateX(-50%) scale(1); } }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #c8a060; border-radius: 4px; }
::-webkit-scrollbar-track { background: #f0e0c0; }

/* ====== v4 ====== */
#adBanner {
  position: fixed; top: -80px; left: 50%; transform: translateX(-50%);
  z-index: 60; background: #2e2138; color: #ffe9b0;
  border: 3px solid #ffd166; border-radius: 8px;
  padding: 12px 28px; font-size: 22px; font-weight: bold;
  box-shadow: 0 0 24px rgba(255,209,102,.5);
  transition: top .4s; max-width: 88vw; text-align: center;
}
#adBanner.show { top: 14px; }
#adBanner .ad-from { color: #ff9f6b; font-size: 14px; display: block; }
#ctxMenu {
  position: fixed; z-index: 55; display: none; flex-direction: column;
  gap: 5px; padding: 8px; width: 158px;
}
#ctxMenu.show { display: flex; }
#ctxMenu .ctx-name { font-weight: bold; text-align: center; font-size: 14px; color: #3a2c20; }
#ctxMenu button { font-size: 12px; text-align: left; }
#photoBar {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 45; display: none; gap: 10px;
}
#photoBar.show { display: flex; }
#stickerPicker {
  position: fixed; left: 10px; bottom: 56px; z-index: 26;
  display: none; grid-template-columns: repeat(5, 48px); gap: 6px;
  background: #fff8ea; border: 3px solid #3a2c20; border-radius: 6px; padding: 8px;
}
#stickerPicker.show { display: grid; }
.sticker-cell {
  width: 48px; height: 48px; font-size: 26px; background: #fff;
  border: 2px solid #d2bb90; border-radius: 6px; cursor: pointer; position: relative;
}
.sticker-cell:hover { background: #fff3d6; }
.sticker-cell.lock { opacity: .45; cursor: default; }
.sticker-lv { position: absolute; bottom: 1px; right: 2px; font-size: 9px; color: #c0392b; font-weight: bold; }
#fishMini {
  position: fixed; right: 16px; top: 50%; transform: translateY(-50%);
  z-index: 45; display: none; width: 130px;
  background: #fff8ea; border: 3px solid #3a2c20; border-radius: 8px; padding: 8px;
}
#fishMini.show { display: block; }
.fm-title { font-size: 11px; font-weight: bold; color: #3a2c20; margin-bottom: 6px; text-align: center; }
.fm-track {
  position: relative; height: 220px; background: linear-gradient(#bfe8f7, #3a96bc);
  border: 2px solid #3a2c20; border-radius: 6px; overflow: hidden;
}
.fm-fish { position: absolute; left: 50%; transform: translateX(-50%); font-size: 20px; transition: top .06s linear; }
.fm-bar {
  position: absolute; left: 4px; right: 4px; height: 26%;
  border: 2px solid #e8e8e8; border-radius: 4px; background: rgba(255,255,255,.25);
  transition: top .06s linear;
}
.fm-bar.on { border-color: #4dd66d; background: rgba(80,220,120,.3); }
.fm-prog { height: 10px; background: #d8ccba; border: 2px solid #3a2c20; border-radius: 4px; margin-top: 6px; overflow: hidden; }
.fm-fill { height: 100%; width: 30%; background: #e8a23c; }
#boatOverlay {
  position: fixed; inset: 0; z-index: 58; display: none;
  align-items: center; justify-content: center;
  background: rgba(20,40,60,.82);
}
#boatOverlay.show { display: flex; }
.boat-card {
  background: #fff8ea; border: 4px solid #3a2c20; border-radius: 10px;
  padding: 30px 50px; font-size: 22px; text-align: center; line-height: 1.7;
  animation: pop .3s;
}
.boat-card.storm { background: #3a2c4a; color: #e8d8f8; border-color: #7d5ca8; }
.profile-head { display: flex; gap: 12px; align-items: center; }
.profile-head canvas { background: #cfe7f5; border: 2px solid #3a2c20; border-radius: 6px; }
.profile-info { font-size: 14px; line-height: 1.8; }
.ab-feed { max-height: 200px; overflow-y: auto; margin-top: 8px; background: #fff; border: 2px solid #d2bb90; border-radius: 4px; padding: 6px 8px; }
.ab-line { font-size: 14px; padding: 2px 0; border-bottom: 1px dotted #e0d0b0; }
.ab-a { color: #d8403a; font-weight: bold; margin-left: 6px; }
.ab-b { color: #3a6a96; font-weight: bold; margin-left: 4px; }

/* ====== v5 ====== */
.mem-grid {
  display: grid; grid-template-columns: repeat(4, 64px); gap: 8px;
  justify-content: center; margin: 10px auto;
}
.mem-card {
  width: 64px; height: 64px; font-size: 34px;
  display: flex; align-items: center; justify-content: center;
  background: #3a6a96; border: 3px solid #2e547a; border-radius: 8px;
  color: #cfe0f0; transition: transform .12s;
}
.mem-card.can { cursor: pointer; }
.mem-card.can:hover { transform: translateY(-3px); background: #4a7aa6; }
.mem-card.open { background: #fffdf5; border-color: #3a2c20; }
.mem-card.m0 { background: #d9ecff; border-color: #3a6a96; }
.mem-card.m1 { background: #ffe2e2; border-color: #b03a30; }
.dw-canvas {
  display: block; margin: 6px auto; background: #fffdf5;
  border: 3px solid #3a2c20; border-radius: 6px; cursor: crosshair;
  width: 400px; max-width: 100%;
}
.dw-color {
  width: 30px; height: 30px; border: 2px solid #3a2c20; border-radius: 6px; cursor: pointer;
}
.dw-color.on { outline: 3px solid #ff9f6b; }
.ds-canvas {
  display: block; margin: 6px auto; border: 3px solid #3a2c20; border-radius: 6px;
  width: 100%; max-width: 520px; image-rendering: auto;
}

/* 聽歌房點歌台 */
#ytWrap{width:100%;background:#000;border:2px solid #3a2c20;margin-bottom:8px;min-height:160px}
#ytWrap iframe{display:block;width:100%;border:0}
#musicQueue{max-height:130px;overflow:auto}
#panelMusic.wide{max-width:440px}