/* 樓一幢復刻版
 * 走暖色木質＋奶油色的可愛路線，跟原作的溫度接近，但不是照抄它的畫面。
 * 注意：這裡刻意不用 prefers-reduced-motion 全域關閉動畫——
 * weiyo 的 macOS 常開著「減少動態效果」，全關掉他自己就看不到回饋了。
 */

:root {
  --cream: #fff6e6;
  --cream-2: #ffeccd;
  --wood: #b5793f;
  --wood-dark: #8a5626;
  --wood-light: #e0a86a;
  --ink: #4a3520;
  --ink-soft: #7d6242;
  --pink: #ff9db0;
  --mint: #7fd1b9;
  --sky: #8fc9f2;
  --gold: #ffc63f;
  --gold-deep: #e8a013;
  --danger: #ff7a6b;
  --shadow: 0 4px 0 rgba(120, 80, 40, .25);
  --radius: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  color: var(--ink);
  background: #f0d9b5;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

body {
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.55), transparent 45%),
    repeating-linear-gradient(135deg, #f3ddbc 0 22px, #efd6b0 22px 44px);
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  max-width: 1400px;
  margin: 0 auto;
}

/* ---------- 頂部 HUD ---------- */
#hud {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(180deg, var(--wood-light), var(--wood));
  border-bottom: 4px solid var(--wood-dark);
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
  color: #fff8ec;
}
.hud-left, .hud-right { display: flex; align-items: center; gap: 10px; }
.hud-mid { flex: 1; display: flex; justify-content: center; }

.logo { display: flex; align-items: center; gap: 8px; }
.logo-mark { font-size: 26px; line-height: 1; }
.logo-mark img { width: 30px; height: 30px; object-fit: contain; display: block; }
.logo-text {
  font-size: 20px; font-weight: 900; letter-spacing: 2px;
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
}

.lv-wrap { display: flex; align-items: center; gap: 8px; width: min(420px, 46vw); }
.lv-badge {
  background: var(--ink); color: var(--gold);
  padding: 3px 10px; border-radius: 999px;
  font-weight: 900; font-size: 13px; white-space: nowrap;
}
.exp-bar {
  flex: 1; height: 14px; border-radius: 999px;
  background: rgba(0,0,0,.28);
  overflow: hidden; border: 2px solid rgba(0,0,0,.2);
}
.exp-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--mint), #b6f0c9);
  transition: width .25s ease;
}
.exp-text { font-size: 11px; opacity: .9; white-space: nowrap; }

.gold-box {
  display: flex; align-items: center; gap: 5px;
  background: var(--ink); color: var(--gold);
  padding: 5px 12px; border-radius: 999px;
  font-weight: 900; font-size: 16px;
  border: 2px solid rgba(255,255,255,.25);
}
.gold-icon { font-size: 17px; }
.gold-icon img { width: 18px; height: 18px; object-fit: contain; display: block; }
.gold-unit { font-size: 11px; opacity: .8; }
.gold-box.bump { animation: bump .35s ease; }
@keyframes bump { 0%{transform:scale(1)} 40%{transform:scale(1.18)} 100%{transform:scale(1)} }

.icon-btn {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.2);
  background: var(--cream); color: var(--ink);
  font-weight: 900; cursor: pointer; font-size: 15px;
}

/* ---------- 主體三欄 ---------- */
#body {
  flex: 1;
  display: grid;
  grid-template-columns: 210px 1fr 210px;
  gap: 12px;
  padding: 12px;
  min-height: 0;
}

aside {
  background: var(--cream);
  border: 3px solid var(--wood);
  border-radius: var(--radius);
  padding: 10px;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

.panel-title {
  font-weight: 900; font-size: 14px;
  padding-bottom: 6px; margin-bottom: 8px;
  border-bottom: 2px dashed var(--wood-light);
}

/* ---------- 樓層 ---------- */
.floor {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; margin-bottom: 6px;
  border-radius: 12px;
  border: 2px solid var(--wood-light);
  background: #fff;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.floor:hover { transform: translateX(2px); }
.floor.active {
  background: var(--gold); border-color: var(--gold-deep);
  box-shadow: inset 0 0 0 2px #fff;
}
.floor.locked { opacity: .72; background: #ece2d2; cursor: default; }
.floor-emoji { font-size: 22px; line-height: 1; }
.floor-emoji img { width: 26px; height: 26px; object-fit: contain; display: block; }
.floor-info { flex: 1; min-width: 0; }
.floor-name { font-weight: 800; font-size: 13px; }
.floor-sub { font-size: 10px; color: var(--ink-soft); }
.floor-buy {
  font-size: 10px; font-weight: 900;
  background: var(--mint); color: #14503f;
  border: none; border-radius: 8px; padding: 4px 7px; cursor: pointer;
}
.floor-buy:disabled { background: #ccc; color: #777; cursor: not-allowed; }

/* ---------- 包租婆 ---------- */
.landlady-card {
  margin-top: 12px; padding: 10px;
  background: linear-gradient(180deg, #fff, var(--cream-2));
  border: 2px solid var(--wood-light);
  border-radius: 12px;
}
.landlady-face { font-size: 34px; text-align: center; line-height: 1; }
.landlady-face img { width: 56px; height: 56px; object-fit: contain; display: block; margin: 0 auto; }
.landlady-name { font-weight: 900; font-size: 12px; text-align: center; margin-top: 4px; }
.landlady-line {
  font-size: 11px; color: var(--ink-soft);
  margin: 6px 0 8px; line-height: 1.5; min-height: 2.8em;
}

/* ---------- 中間舞台 ---------- */
#stage {
  background: var(--cream);
  border: 3px solid var(--wood);
  border-radius: var(--radius);
  padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 0; overflow-y: auto;
  box-shadow: var(--shadow);
  background-size: cover;
  background-position: center;
}
.stage-head {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.75);
  border-radius: 12px; padding: 6px 12px;
}
.shop-name { font-weight: 900; font-size: 17px; display: flex; align-items: center; gap: 7px; }
.shop-name img { width: 24px; height: 24px; object-fit: contain; display: block; }
.stars { display: flex; gap: 2px; font-size: 17px; }
.star-off { opacity: .28; filter: grayscale(1); }

.area-label {
  font-size: 11px; font-weight: 800; color: var(--ink-soft);
  margin-bottom: 5px;
}
.dim { opacity: .65; font-weight: 500; }

/* ---------- 服務座位 ---------- */
.seats-area { flex: 1; min-height: 0; }
.seats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 10px;
}
.seat {
  position: relative;
  aspect-ratio: 1 / 1.05;
  border-radius: 14px;
  border: 3px dashed var(--wood-light);
  background: rgba(255,255,255,.68);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  transition: border-color .12s, background .12s, transform .12s;
  cursor: pointer;
}
.seat.empty::after {
  content: "空位";
  font-size: 11px; color: var(--ink-soft); opacity: .7;
}
.seat.occupied { border-style: solid; background: #fff; }
.seat.selected { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(143,201,242,.5); }
.seat.droppable { border-color: var(--mint); background: #eafaf3; transform: scale(1.03); }
.seat.hascoin { border-color: var(--gold-deep); background: #fff8e0; }
.seat.wrong { animation: shake .3s; }
@keyframes shake {
  0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)}
}
.seat-chair {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  font-size: 22px; opacity: .35; pointer-events: none;
}
.seat-chair img { width: 40px; height: 40px; object-fit: contain; display: block; }
.seat-index {
  position: absolute; top: 5px; left: 7px;
  font-size: 10px; font-weight: 900; color: var(--ink-soft); opacity: .55;
}

/* ---------- 客人 ---------- */
.cust { position: relative; display: flex; flex-direction: column; align-items: center; }
.cust-face { font-size: 34px; line-height: 1; }
/* 客人素材是全身像，比 emoji 需要更多空間，不然臉會小到看不清 */
.cust-face img { width: 58px; height: 58px; object-fit: contain; display: block; }
.seat .cust-face img { width: 78px; height: 78px; }
.cust.vip .cust-face::before {
  content: "👑"; position: absolute; top: -13px; left: 50%;
  transform: translateX(-50%); font-size: 15px;
}
.want-bubble {
  position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  background: #fff; border: 2px solid var(--ink);
  border-radius: 10px; padding: 2px 7px;
  font-size: 17px; white-space: nowrap;
  box-shadow: 0 2px 0 rgba(0,0,0,.18);
  animation: pop .25s ease;
}
.want-bubble img { width: 22px; height: 22px; object-fit: contain; display: block; }
.want-bubble::after {
  content: ""; position: absolute; bottom: -7px; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink);
}
@keyframes pop { 0%{transform:translateX(-50%) scale(.5)} 100%{transform:translateX(-50%) scale(1)} }

/* 等不下去，氣呼呼轉身走人 */
.cust.angry { animation: stormOff .8s ease-in forwards; }
.cust.angry .cust-face { filter: hue-rotate(-15deg) saturate(1.2); }
@keyframes stormOff {
  0%   { transform: translateX(0) rotate(0); opacity: 1; }
  15%  { transform: translateX(-4px) rotate(-4deg); }
  30%  { transform: translateX(4px) rotate(4deg); }
  45%  { transform: translateX(-3px) rotate(-3deg); }
  100% { transform: translateX(26px) rotate(8deg); opacity: 0; }
}

/* 服務完成，客人滿意起身 */
.cust.leaving { animation: standUp .9s ease-out forwards; }
@keyframes standUp {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  30%  { transform: translateY(-7px) scale(1.08); opacity: 1; }
  100% { transform: translateY(-22px) scale(.86); opacity: 0; }
}

.pat-bar {
  width: 62px; height: 7px; border-radius: 999px;
  background: rgba(0,0,0,.16); overflow: hidden; margin-top: 4px;
}
.pat-fill { height: 100%; width: 100%; background: var(--mint); transition: background .3s; }
.pat-fill.warn { background: var(--gold); }
.pat-fill.bad { background: var(--danger); }

.serve-bar {
  width: 72px; height: 9px; border-radius: 999px;
  background: rgba(0,0,0,.16); overflow: hidden; margin-top: 4px;
  border: 1px solid rgba(0,0,0,.1);
}
.serve-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--sky), #cfeaff); }
.serving-label { font-size: 10px; color: var(--ink-soft); margin-top: 2px; }

/* ---------- 等候區 ---------- */
.wait-area { flex: 0 0 auto; }
.waiting {
  display: flex; gap: 8px; flex-wrap: wrap;
  min-height: 92px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.55);
  border: 2px solid var(--wood-light);
}
.wait-slot {
  width: 74px; height: 76px;
  border-radius: 12px;
  border: 2px dashed rgba(181,121,63,.4);
  display: flex; align-items: center; justify-content: center;
}
.wait-slot.filled {
  border-style: solid; background: #fff; cursor: grab;
  /* 手機上按住客人往下滑時，不要讓瀏覽器把這次觸控搶去捲頁面，
     否則拖曳會被中斷、變成誤觸 */
  touch-action: none;
}
.wait-slot.dragging { opacity: .35; }
.wait-slot.locked { border-color: #ccc; background: rgba(0,0,0,.04); }
.wait-slot.locked::after { content: "🔒"; font-size: 14px; opacity: .45; }

/* ---------- 道具欄 ---------- */
.tray-area { flex: 0 0 auto; }
.tray { display: flex; gap: 8px; flex-wrap: wrap; }
.tray-item {
  flex: 1 1 92px; min-width: 82px;
  background: #fff;
  border: 3px solid var(--wood-light);
  border-radius: 12px;
  padding: 7px 5px;
  text-align: center;
  cursor: grab;
  transition: transform .12s, border-color .12s, box-shadow .12s;
  user-select: none;
  touch-action: none; /* 同上：避免手指滑動被瀏覽器接管成捲頁 */
}
.tray-item:hover { transform: translateY(-3px); border-color: var(--wood); }
.tray-item:active { cursor: grabbing; }
.tray-item.dragging { opacity: .4; }
.tray-emoji { font-size: 25px; line-height: 1.15; }
.tray-emoji img { width: 36px; height: 36px; object-fit: contain; display: block; margin: 0 auto; }
.tray-name { font-size: 11px; font-weight: 800; margin-top: 2px; }
.tray-meta { font-size: 9px; color: var(--ink-soft); }
.tray-key {
  display: inline-block; margin-top: 3px;
  font-size: 9px; font-weight: 900;
  background: var(--ink); color: var(--cream);
  border-radius: 5px; padding: 1px 5px;
}

/* ---------- 金幣 ---------- */
.coin {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  cursor: pointer;
  animation: coinIn .3s ease;
}
@keyframes coinIn { 0%{transform:translateY(-16px) scale(.5); opacity:0} 100%{transform:none; opacity:1} }
/* 客人還在位子上笑的時候，金幣靠下擺，不要蓋住他 */
.coin.coin-lower { justify-content: flex-end; padding-bottom: 4px; }
.coin.coin-lower .coin-icon { font-size: 24px; }
.coin.coin-lower .coin-icon img { width: 32px; height: 32px; }

.coin-icon { font-size: 34px; animation: coinBob 1.1s ease-in-out infinite; }
.coin-icon img { width: 46px; height: 46px; object-fit: contain; display: block; }
@keyframes coinBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.coin-amt { font-weight: 900; font-size: 14px; color: var(--gold-deep); text-shadow: 0 1px 0 #fff; }
.coin.danger .coin-icon { animation: coinBob .35s ease-in-out infinite; }
.coin.danger .coin-amt { color: var(--danger); }

/* ---------- 右側經營 ---------- */
.mcard {
  background: #fff;
  border: 2px solid var(--wood-light);
  border-radius: 12px;
  padding: 9px;
  margin-bottom: 9px;
}
.mcard-head { font-weight: 900; font-size: 12px; margin-bottom: 5px; }
.mcard-body { font-size: 11px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 7px; }
.stat-row {
  display: flex; justify-content: space-between;
  font-size: 11px; padding: 2px 0;
}
.stat-row b { font-weight: 900; }

.btn {
  width: 100%;
  border: none; border-radius: 10px;
  padding: 8px 10px;
  font-weight: 900; font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: transform .1s, filter .1s;
  box-shadow: 0 3px 0 rgba(0,0,0,.18);
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.18); }
.btn:disabled { background: #ddd !important; color: #888 !important; cursor: not-allowed; box-shadow: none; }
.btn-main { background: var(--sky); color: #10405f; }
.btn-gold { background: var(--gold); color: #5c3f00; }
.btn-ghost { background: var(--cream-2); color: var(--ink); margin-bottom: 8px; }
.btn-danger { background: var(--danger); color: #fff; }

/* ---------- 拖曳影子 ---------- */
#ghost {
  position: fixed; z-index: 900;
  pointer-events: none;
  font-size: 42px;
  transform: translate(-50%, -50%) rotate(-6deg);
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.3));
}
#ghost img { width: 62px; height: 62px; object-fit: contain; display: block; }

/* ---------- 提示 ---------- */
#toasts {
  position: fixed; left: 50%; bottom: 24px;
  transform: translateX(-50%);
  z-index: 950;
  display: flex; flex-direction: column-reverse; gap: 6px;
  align-items: center; pointer-events: none;
}
.toast {
  background: var(--ink); color: var(--cream);
  padding: 8px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  animation: toastIn .25s ease;
}
.toast.good { background: #1f7a5c; }
.toast.bad { background: #a83a2c; }
.toast.gold { background: var(--gold-deep); color: #3d2800; }
@keyframes toastIn { 0%{transform:translateY(14px); opacity:0} 100%{transform:none; opacity:1} }

/* 飄字 */
.float-num {
  position: fixed; z-index: 940;
  font-weight: 900; font-size: 19px;
  pointer-events: none;
  text-shadow: 0 2px 0 #fff, 0 0 8px rgba(255,255,255,.9);
  animation: floatUp .9s ease-out forwards;
}
@keyframes floatUp {
  0% { transform: translate(-50%, 0); opacity: 1; }
  100% { transform: translate(-50%, -58px); opacity: 0; }
}

/* ---------- 說明 ---------- */
#helpMask {
  position: fixed; inset: 0; z-index: 980;
  background: rgba(40,25,10,.6);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
#helpMask[hidden] { display: none; }
.help-box {
  background: var(--cream);
  border: 4px solid var(--wood);
  border-radius: 20px;
  padding: 22px;
  max-width: 460px; width: 100%;
  max-height: 86vh; overflow-y: auto;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.help-box h2 { margin: 0 0 12px; font-size: 21px; }
.help-box ol { margin: 0 0 12px; padding-left: 20px; }
.help-box li { font-size: 13px; line-height: 1.75; margin-bottom: 5px; }
.help-box p { font-size: 12px; margin: 0 0 14px; }

/* ---------- 手機 ---------- */
@media (max-width: 900px) {
  #body { grid-template-columns: 1fr; padding: 8px; gap: 8px; }
  #tower, #manage { max-height: 200px; }
  #tower { order: 2; }
  #stage { order: 1; }
  #manage { order: 3; }
  .lv-wrap { width: 100%; }
  .exp-text { display: none; }
  .seats { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

/* ============================================================
   社交層：登入、好友、拜訪、通知
   沿用上面那組色票，讓它看起來就是同一款遊戲的一部分
   ============================================================ */

/* ---------- 登入 ---------- */
#authMask, #visitMask {
  position: fixed; inset: 0; z-index: 990;   /* 要蓋過 helpMask 的 980 */
  background: rgba(74, 53, 32, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
#authMask[hidden], #visitMask[hidden] { display: none; }

.auth-box {
  width: min(380px, 100%);
  background: var(--cream);
  border: 3px solid var(--wood);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  text-align: center;
}
.auth-logo { font-size: 26px; font-weight: 900; color: var(--ink); }
.auth-lead { font-size: 13px; color: var(--ink-soft); margin: 6px 0 16px; line-height: 1.6; }

.auth-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.auth-tab {
  flex: 1; padding: 9px; cursor: pointer;
  border: 2px solid var(--wood); border-radius: 10px;
  background: transparent; color: var(--ink-soft);
  font-family: inherit; font-size: 14px; font-weight: 800;
}
.auth-tab.on { background: var(--wood); color: var(--cream); }

.auth-input {
  width: 100%; padding: 11px 13px; margin-bottom: 9px;
  border: 2px solid var(--wood-light); border-radius: 10px;
  background: #fff; color: var(--ink);
  font-family: inherit; font-size: 15px;
}
.auth-input:focus { outline: none; border-color: var(--gold-deep); }

.auth-error {
  background: #ffe9e5; color: #c0392b;
  border-radius: 8px; padding: 8px 10px; margin-bottom: 9px;
  font-size: 13px; text-align: left;
}
.auth-submit { width: 100%; margin-top: 4px; }
.auth-skip { width: 100%; margin-top: 8px; font-size: 13px; }

/* ---------- 社交列 ---------- */
/* 排在 HUD 裡跟金幣並列。原本用 fixed 浮在右上角，結果正好蓋住金幣。 */
#socialBar { display: flex; align-items: center; gap: 6px; }
#socialBar[hidden] { display: none; }

.me-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--cream); border: 2px solid var(--wood);
  border-radius: 999px; padding: 5px 12px;
  font-size: 12px; font-weight: 800; color: var(--ink);
}
.me-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-code {
  background: var(--gold); color: var(--ink);
  border-radius: 6px; padding: 1px 6px;
  font-family: ui-monospace, monospace; letter-spacing: .5px; cursor: pointer;
}
.invite-code:active { transform: translateY(1px); }
.frog { color: var(--ink-soft); }

#socialBar .icon-btn { position: relative; }
.badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--danger); color: #fff;
  border-radius: 999px; min-width: 17px; padding: 0 4px;
  font-size: 10px; font-weight: 900; line-height: 17px;
}

/* ---------- 側邊面板 ---------- */
.side-panel {
  position: fixed; top: 52px; right: 12px; z-index: 45;
  width: min(310px, calc(100vw - 24px));
  max-height: min(460px, calc(100vh - 80px));
  overflow-y: auto;
  background: var(--cream);
  border: 3px solid var(--wood);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}
.side-panel[hidden] { display: none; }

.add-friend { display: flex; gap: 6px; margin-bottom: 10px; }
.add-friend input {
  flex: 1; min-width: 0; padding: 8px 10px;
  border: 2px solid var(--wood-light); border-radius: 9px;
  background: #fff; font-family: inherit; font-size: 13px; color: var(--ink);
}
.add-friend input:focus { outline: none; border-color: var(--gold-deep); }

.friend-row {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 0; border-bottom: 1px dashed var(--wood-light);
}
.friend-row:last-child { border-bottom: none; }
.friend-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ccc; flex-shrink: 0;
}
.friend-dot.on { background: var(--mint); box-shadow: 0 0 0 3px rgba(127, 209, 185, .3); }
.friend-main { flex: 1; min-width: 0; }
.friend-name { font-size: 14px; font-weight: 800; color: var(--ink); }
.friend-sub { font-size: 11px; margin-top: 2px; display: flex; gap: 8px; }
.coin-hint { color: var(--gold-deep); font-weight: 800; }
.trash-hint { color: var(--ink-soft); }

.empty {
  color: var(--ink-soft); font-size: 13px; line-height: 1.7;
  text-align: center; padding: 20px 6px;
}

/* ---------- 通知 ---------- */
.event-row {
  padding: 9px 0; border-bottom: 1px dashed var(--wood-light);
}
.event-row:last-child { border-bottom: none; }
.event-row.fresh { position: relative; padding-left: 10px; }
.event-row.fresh::before {
  content: ''; position: absolute; left: 0; top: 13px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--danger);
}
.event-text { font-size: 13px; color: var(--ink); line-height: 1.5; }
.event-time { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }

/* ---------- 拜訪 ---------- */
.visit-box {
  width: min(520px, 100%);
  max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--cream);
  border: 3px solid var(--wood);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.visit-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.visit-title { font-size: 18px; font-weight: 900; color: var(--ink); }

.visit-shop {
  border: 2px solid var(--wood-light); border-radius: 12px;
  padding: 12px; margin-bottom: 10px; background: #fffdf8;
}
.visit-shop-head { display: flex; justify-content: space-between; align-items: center; }
.visit-shop-name { font-size: 15px; font-weight: 800; color: var(--ink); }
.visit-shop-star { color: var(--gold-deep); font-size: 13px; }
.visit-shop-info {
  font-size: 12px; color: var(--ink-soft);
  margin: 6px 0 10px; display: flex; gap: 12px;
}
.visit-shop-info b { color: var(--gold-deep); font-size: 14px; }

.visit-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.btn-act {
  background: var(--cream-2); border: 2px solid var(--wood-light);
  color: var(--ink); font-size: 12.5px; padding: 9px 6px;
}
.btn-act:not(:disabled):hover { background: var(--gold); border-color: var(--gold-deep); }
.btn-act:disabled { opacity: .42; cursor: not-allowed; }
.btn-act.btn-nice:not(:disabled):hover { background: var(--mint); border-color: #4fae94; }
.cd { display: block; font-size: 10px; color: var(--ink-soft); font-weight: 600; }
.visit-foot { font-size: 11.5px; line-height: 1.6; margin-top: 4px; }

#socialToast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 80; background: var(--ink); color: var(--cream);
  padding: 10px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 700; box-shadow: var(--shadow);
}
#socialToast[hidden] { display: none; }

/* ---------- 手機 ---------- */
@media (max-width: 768px) {
  .me-chip { display: none; }        /* 手機上位置不夠，只留三個按鈕 */
  .side-panel { top: auto; bottom: 52px; right: 8px; max-height: 58vh; }
  .visit-acts { grid-template-columns: 1fr; }
}

/* 全域的 .btn 是 width:100%（給側欄那種整排按鈕用的）。
   社交面板裡的按鈕是排在一行裡的，要收回自動寬度，
   不然會把旁邊的輸入框和名字擠成一條線。 */
.btn-mini {
  width: auto; flex-shrink: 0;
  padding: 7px 12px; font-size: 12px;
  background: var(--wood-light); color: var(--ink);
}
.btn-mini:hover { background: var(--gold); }
.visit-head .btn-mini { white-space: nowrap; }
.visit-title { flex: 1; min-width: 0; }
.help-sub {
  margin: 16px 0 8px; font-size: 15px; color: var(--ink);
  border-top: 2px dashed var(--wood-light); padding-top: 12px;
}

/* ---------- 庫存與進貨 ---------- */
.tray-stock {
  position: absolute; bottom: 4px; right: 6px;
  font-size: 10px; font-weight: 800; color: var(--ink-soft);
}
.tray-item.low .tray-stock { color: var(--gold-deep); }
.tray-item.empty { opacity: .45; }
.tray-item.empty .tray-stock { color: var(--danger); }

#restockMask {
  position: fixed; inset: 0; z-index: 970;
  background: rgba(74, 53, 32, .55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
#restockMask[hidden] { display: none; }

.restock-box {
  width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--cream); border: 3px solid var(--wood);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px;
}
.restock-head { display: flex; align-items: center; justify-content: space-between; }
.restock-title { font-size: 19px; font-weight: 900; color: var(--ink); }
.restock-lead { font-size: 12px; line-height: 1.6; margin: 6px 0 14px; }

.restock-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; margin-bottom: 8px;
  border: 2px solid var(--wood-light); border-radius: 12px; background: #fffdf8;
}
.restock-row.empty { border-color: var(--danger); background: #fff5f3; }
.restock-icon { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; }
.restock-icon img { width: 100%; height: 100%; object-fit: contain; }
.restock-main { flex: 1; min-width: 0; }
.restock-name { font-size: 14px; font-weight: 800; color: var(--ink); }
.restock-have { font-size: 11px; color: var(--ink-soft); margin-left: 8px; font-weight: 600; }
.restock-sub { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.restock-row .btn-mini { line-height: 1.35; text-align: center; }

/* ---------- 今天的活動 ---------- */
#eventBar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 12px 8px; padding: 8px 14px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--cream-2) 60%);
  border: 2px solid var(--gold-deep); border-radius: 999px;
  font-size: 12px; color: var(--ink);
}
#eventBar[hidden] { display: none; }
.event-icon { font-size: 15px; }
.event-name { font-weight: 900; }
.event-desc { color: var(--ink-soft); }
.event-next { margin-left: auto; font-size: 11px; color: var(--ink-soft); }

/* ---------- 青蛙商店 ---------- */
#frogMask {
  position: fixed; inset: 0; z-index: 975;
  background: rgba(74, 53, 32, .55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
#frogMask[hidden] { display: none; }
.frog-box {
  width: min(420px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--cream); border: 3px solid var(--wood);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px;
}
.frog-head { display: flex; align-items: center; justify-content: space-between; }
.frog-title { font-size: 18px; font-weight: 900; color: var(--ink); }
.frog-lead { font-size: 12px; line-height: 1.6; margin: 6px 0 12px; }
.frog-lead b { color: var(--gold-deep); font-size: 15px; }
.frog-buffs {
  background: var(--mint); color: #14503f; border-radius: 10px;
  padding: 8px 12px; margin-bottom: 12px; font-size: 12px; font-weight: 800;
}
.frog-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px; margin-bottom: 8px;
  border: 2px solid var(--wood-light); border-radius: 12px; background: #fffdf8;
}
.frog-main { flex: 1; min-width: 0; }
.frog-name { font-size: 14px; font-weight: 800; color: var(--ink); }
.frog-desc { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; line-height: 1.5; }

/* ---------- 一樓大廳 ---------- */
.lobby-floor { cursor: pointer; border-style: dashed; }
.lobby-floor:hover { background: var(--cream-2); }

#lobbyMask {
  position: fixed; inset: 0; z-index: 965;
  background: rgba(74, 53, 32, .55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
#lobbyMask[hidden] { display: none; }

.lobby-box {
  width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--cream) center/cover no-repeat;
  border: 3px solid var(--wood); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px;
}
.lobby-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.lobby-title { font-size: 18px; font-weight: 900; color: var(--ink); }

.lobby-scene {
  background: rgba(255, 246, 230, .92);
  border: 2px solid var(--wood-light); border-radius: 12px;
  padding: 14px; margin-bottom: 12px; text-align: center;
}
.lobby-landlady { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.lobby-landlady .landlady-face { width: 74px; height: 74px; flex-shrink: 0; }
.lobby-landlady .landlady-face img { width: 100%; height: 100%; object-fit: contain; }
.landlady-bubble {
  flex: 1; text-align: left; position: relative;
  background: #fff; border: 2px solid var(--wood-light);
  border-radius: 12px; padding: 10px 12px;
  font-size: 13px; color: var(--ink); line-height: 1.5;
}
.landlady-bubble::before {
  content: ''; position: absolute; left: -8px; top: 22px;
  border: 5px solid transparent; border-right-color: var(--wood-light);
}

.lobby-board {
  background: rgba(255, 246, 230, .92);
  border: 2px solid var(--wood-light); border-radius: 12px; padding: 14px;
}
.lobby-board-title {
  font-size: 12px; font-weight: 900; color: var(--ink-soft);
  letter-spacing: 1px; margin-bottom: 8px;
}
.lobby-event {
  background: var(--gold); border-radius: 10px; padding: 9px 12px;
  font-size: 13px; color: var(--ink); margin-bottom: 10px;
}
.lobby-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.lobby-stats div { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-soft); }
.lobby-stats b { color: var(--ink); }