/* 方塊市集（market.html）。顏色是規格書 4.0 的色盤：奶油底、可可色字、圓角，不用純黑。 */
:root {
  --cream: #fbf6ec;
  --tea: #d9bfa0;
  --pink: #ebc4bd;
  --apricot: #f2b99b;
  --sage: #b5c7a8;
  --mustard: #e5c66b;
  --cocoa: #8a6a52;
  --ink: #4a3728;
  --card: rgba(251, 246, 236, 0.92);
  --glass: rgba(251, 246, 236, 0.55);
  --edge: rgba(138, 106, 82, 0.35);
  --font: ui-rounded, "Hiragino Maru Gothic ProN", "jf-openhuninn-2.0", "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #f7d9c4; color: var(--ink);
  font-family: var(--font); -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}

#scene {
  position: fixed; inset: 0; width: 100%; height: 100%; display: block;
  touch-action: none; outline: none; cursor: grab;
}

/* ---- 載入中 */
#loading {
  position: fixed; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: 18px;
  background: linear-gradient(#fbf6ec 55%, #f7d9c4); transition: opacity 0.5s, visibility 0.5s;
}
#loading.done { opacity: 0; visibility: hidden; }
#loading p { margin: 0; font-size: 15px; color: var(--cocoa); padding: 0 16px; text-align: center; }
#loading .cube {
  width: 34px; height: 34px; border-radius: 8px; background: var(--apricot);
  box-shadow: inset -7px -7px 0 rgba(138, 106, 82, 0.16);
  animation: hop 0.9s ease-in-out infinite;
}
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1.06, 0.94); } 45% { transform: translateY(-22px) scale(0.96, 1.05); } }
@media (prefers-reduced-motion: reduce) { #loading .cube { animation: none; } }

/* ---- 左上的標題 */
#titlebar {
  position: fixed; z-index: 5; top: calc(14px + var(--safe-t)); left: calc(16px + var(--safe-l));
  padding: 8px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--edge);
  pointer-events: none;
}
#titlebar h1 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0.04em; }
#titlebar p { margin: 2px 0 0; font-size: 12px; color: var(--cocoa); }

/* ---- 右上的工具列 */
#tools {
  position: fixed; z-index: 5; top: calc(14px + var(--safe-t)); right: calc(16px + var(--safe-r));
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100vw - 200px);
}
#tools button, #btn-emote, #emotes button {
  padding: 9px 14px; border-radius: 999px; border: 1px solid var(--edge); background: var(--card);
  color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
}
#tools button:active, #btn-emote:active, #emotes button:active { transform: scale(0.96); }

/* ---- 名牌和愛心 */
#tags { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.tag {
  position: absolute; left: 0; top: 0; padding: 2px 10px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--edge); font-size: 12px; white-space: nowrap; will-change: transform;
}
.tag.is-me { background: var(--pink); }
.bubble { position: absolute; left: 0; top: 0; font-size: 26px; color: #e58a8a; will-change: transform; text-shadow: 0 1px 0 var(--cream); }

/* ---- 提示訊息 */
#notice {
  position: fixed; z-index: 7; left: 50%; top: calc(70px + var(--safe-t)); transform: translateX(-50%);
  padding: 8px 16px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 13px;
  max-width: calc(100vw - 32px); text-align: center; pointer-events: none;
}

/* ---- 動作 */
#emote-bar {
  position: fixed; z-index: 5; left: calc(16px + var(--safe-l)); bottom: calc(18px + var(--safe-b));
  display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 6px;
}
#emotes { display: flex; gap: 6px; flex-wrap: wrap; max-width: 260px; }
#emotes[hidden] { display: none; }
.is-touch #emote-bar { bottom: calc(52px + var(--safe-b)); z-index: 6; }        /* 左下角，在攤位卡下面、不擋跳鍵 */
.is-touch #emotes { max-width: 190px; }

/* ---- 選角色 */
#select { width: min(460px, calc(100vw - 24px)); }
#select h2, #map h2 { margin: 0 0 10px; font-size: 18px; font-weight: 600; }
#sel-preview { display: block; width: 100%; height: 190px; border-radius: 16px; background: linear-gradient(#fbf6ec, #f7d9c4); margin-bottom: 10px; }
.sel-label { display: block; margin: 10px 0 6px; font-size: 12px; color: var(--cocoa); }
.sel-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sel-row button {
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--edge); background: var(--card);
  color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.sel-row button[aria-pressed="true"] { background: var(--pink); border-color: var(--cocoa); }
.sel-row button i { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--edge); }
.sel-row .swatch { width: 30px; height: 30px; padding: 0; border-radius: 10px; }
#sel-colors { margin-top: 8px; }
#sel-name {
  width: 100%; font: inherit; font-size: 15px; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--edge); background: var(--card); color: var(--ink);
}
.sel-acts { display: flex; gap: 8px; margin-top: 14px; }
.sel-acts button {
  flex: 1; padding: 11px; border-radius: 999px; border: 1px solid var(--edge); background: var(--card);
  color: var(--ink); font: inherit; font-size: 15px; cursor: pointer;
}
#sel-go { background: var(--ink); color: var(--cream); }

/* ---- 地圖 */
#map { width: min(560px, calc(100vw - 24px)); }
#map-canvas { display: block; width: 100%; aspect-ratio: 1; border-radius: 14px; image-rendering: pixelated; cursor: pointer; }
#map-q {
  width: 100%; margin: 10px 0; font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--edge); background: var(--card); color: var(--ink);
}
#map-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#map-list button {
  width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; padding: 10px 14px;
  border-radius: 14px; border: 1px solid var(--edge); background: var(--card); color: var(--ink); font: inherit; cursor: pointer;
}
#map-list b { font-size: 15px; }
#map-list span { grid-column: 1; font-size: 12px; color: var(--cocoa); }
#map-list em { grid-row: 1 / 3; grid-column: 2; align-self: center; font-style: normal; font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--pink); }
.ml-empty { font-size: 12px; color: var(--cocoa); text-align: center; padding: 6px; }

/* ---- 清單模式 */
.list-mode { overflow: auto; }
.list-mode #scene, .list-mode #titlebar, .list-mode #tools, .list-mode #hint, .list-mode #emote-bar, .list-mode #touch { display: none !important; }
#list-mode { position: relative; max-width: 760px; margin: 0 auto; padding: calc(20px + var(--safe-t)) 16px 40px; }
.lm-head h1 { margin: 0; font-size: 22px; }
.lm-head p { margin: 4px 0 16px; color: var(--cocoa); font-size: 13px; }
.lm-head a { color: var(--ink); }
.lm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lm-booth { padding: 14px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--edge); }
.lm-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.lm-top b { font-size: 17px; }
.lm-top span { font-size: 12px; color: var(--cocoa); }
.lm-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.lm-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: #efe6d6; }
.lm-acts { display: flex; gap: 8px; }
.lm-acts button, .lm-acts a {
  flex: 1; padding: 9px; border-radius: 999px; border: 1px solid var(--edge); background: var(--cream);
  color: var(--ink); font: inherit; font-size: 14px; text-align: center; text-decoration: none; cursor: pointer;
}
.lm-acts button { background: var(--pink); }
.lm-empty { color: var(--cocoa); text-align: center; padding: 30px 0; }

/* ---- 操作提示 */
#hint {
  position: fixed; z-index: 4; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translateX(-50%);
  margin: 0; padding: 8px 16px; border-radius: 999px; background: var(--card); border: 1px solid var(--edge);
  font-size: 13px; color: var(--cocoa); white-space: nowrap; max-width: calc(100vw - 32px);
  overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: opacity 0.8s 2.5s;
}
#hint.gone { opacity: 0; }
#hint kbd {
  font: inherit; font-size: 12px; padding: 1px 7px; margin-right: 2px; border-radius: 6px;
  background: var(--cream); border: 1px solid var(--edge); color: var(--ink);
}
#hint .for-touch { display: none; }
.is-touch #hint .for-desktop { display: none; }
.is-touch #hint .for-touch { display: inline; }
.is-touch #hint { bottom: auto; top: calc(86px + var(--safe-t)); font-size: 12px; }

/* ---- 手機的搖桿和跳鍵 */
#joy {
  position: fixed; z-index: 6; left: 0; top: 0; width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border-radius: 50%; background: var(--glass); border: 1px solid var(--edge);
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
#joy.on { opacity: 1; }
#joy-knob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; background: var(--cream); border: 1px solid var(--edge);
}
#btn-jump {
  position: fixed; z-index: 6; right: calc(22px + var(--safe-r)); bottom: calc(34px + var(--safe-b));
  width: 78px; height: 78px; border-radius: 50%; border: 1px solid var(--edge); background: var(--card);
  color: var(--ink); font: inherit; font-size: 18px; touch-action: none;
}
#btn-jump.on { transform: scale(0.93); background: var(--pink); }

/* ---- 除錯資訊（本機或 ?debug） */
#debug {
  position: fixed; z-index: 5; left: calc(16px + var(--safe-l)); top: calc(74px + var(--safe-t)); margin: 0;
  padding: 4px 10px; border-radius: 10px; background: var(--glass); color: var(--cocoa);
  font: 11px/1.5 ui-monospace, "SF Mono", Menlo, monospace; pointer-events: none;
}
.is-touch #debug { top: auto; bottom: calc(8px + var(--safe-b)); left: 50%; transform: translateX(-50%); }

/* ---- 準心（滑鼠鎖定時） */
#cross {
  position: fixed; z-index: 4; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--cream); border: 1.5px solid var(--cocoa); display: none; pointer-events: none;
}
.is-locked #cross { display: block; }

/* ---- 攤位卡 */
#booth-card {
  position: fixed; z-index: 5; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translateX(-50%);
  width: min(420px, calc(100vw - 32px)); padding: 12px 16px 14px; border-radius: 20px;
  background: var(--card); border: 1px solid var(--edge); box-shadow: 0 8px 24px rgba(74, 55, 40, 0.12);
}
#booth-card p { margin: 0; }
.bc-name { font-size: 17px; font-weight: 600; }
.bc-sub { font-size: 12px; color: var(--cocoa); margin-top: 2px !important; }
.bc-acts { display: flex; gap: 8px; margin-top: 10px; }
.bc-acts button, .bc-acts a {
  flex: 1; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--edge); background: var(--cream);
  color: var(--ink); font: inherit; font-size: 14px; text-align: center; text-decoration: none; cursor: pointer;
}
.bc-acts button { background: var(--pink); }
body:has(#booth-card:not([hidden])) #hint { opacity: 0; transition-delay: 0s; }
.is-touch #booth-card { bottom: calc(126px + var(--safe-b)); width: calc(100vw - 32px); }

/* ---- 商品小卡、商品櫃 */
dialog {
  border: 1px solid var(--edge); border-radius: 22px; background: var(--cream); color: var(--ink);
  padding: 20px; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto;
  box-shadow: 0 18px 48px rgba(74, 55, 40, 0.22); -webkit-user-select: text; user-select: text;
}
dialog::backdrop { background: rgba(74, 55, 40, 0.28); }
.dlg-close {
  position: sticky; top: 0; float: right; margin: -6px -6px 0 0; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--edge); background: var(--card); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; z-index: 1;
}
.pd-img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: #efe6d6; }
.pd-shop { margin: 14px 0 0; font-size: 12px; color: var(--cocoa); }
.pd-name { margin: 2px 0 0; font-size: 19px; font-weight: 600; line-height: 1.35; }
.pd-price { margin: 8px 0 0; font-size: 17px; }
.pd-price s { color: var(--cocoa); font-size: 14px; margin-left: 4px; }
.pd-stock { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--pink); margin-left: 6px; vertical-align: 2px; }
.pd-text { margin: 10px 0 0; font-size: 14px; line-height: 1.65; color: var(--ink); }
.pd-note { margin: 8px 0 0; font-size: 13px; color: var(--cocoa); }
.pd-buy {
  display: block; margin-top: 16px; padding: 12px; border-radius: 999px; text-align: center; text-decoration: none;
  background: var(--ink); color: var(--cream); font-size: 15px;
}
.pd-buy.is-sold { background: var(--tea); color: var(--ink); }
.pd-dest { margin: 6px 0 0; text-align: center; font-size: 12px; color: var(--cocoa); }

#shelf { width: min(560px, calc(100vw - 32px)); }
#shelf-title { margin: 0 44px 12px 0; font-size: 18px; font-weight: 600; }
.sh-tools { display: flex; gap: 8px; margin-bottom: 12px; }
.sh-tools input, .sh-tools select {
  font: inherit; font-size: 14px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--edge);
  background: var(--card); color: var(--ink); min-width: 0;
}
.sh-tools input { flex: 1; }
#shelf-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
#shelf-list button {
  display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 0; border: 0; background: none;
  text-align: left; font: inherit; color: var(--ink); cursor: pointer;
}
#shelf-list img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: #efe6d6; }
#shelf-list .is-sold img { opacity: 0.55; }
.sh-name { font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sh-price { font-size: 12px; color: var(--cocoa); }
.sh-empty { grid-column: 1 / -1; text-align: center; color: var(--cocoa); font-size: 14px; padding: 24px 0; }

@media (max-width: 600px) {
  #tools { max-width: calc(100vw - 32px); top: calc(76px + var(--safe-t)); }
  #tools button { padding: 7px 11px; font-size: 12px; }
  .is-touch #hint { top: calc(124px + var(--safe-t)); }
  #notice { top: calc(124px + var(--safe-t)); }
}

/* ---- 登入、好友、點人、留言板（規格書 24 節） */
#btn-friends { position: relative; }
#btn-friends[data-badge]:not([data-badge=""])::after {
  content: attr(data-badge); position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: #e58a8a; color: #fff; font-size: 11px; line-height: 18px; text-align: center;
}
.bc-owner { font-size: 11px; font-weight: 400; padding: 2px 8px; border-radius: 999px; background: var(--sage); vertical-align: 3px; }
.bc-acts .bc-gb { background: var(--cream); }
#login, #people, #friends, #guestbook { width: min(440px, calc(100vw - 24px)); }
#login h2, #friends h2, #guestbook h2 { margin: 0 44px 10px 0; font-size: 18px; font-weight: 600; }
.lg-lead { margin: 0 0 12px; font-size: 14px; line-height: 1.7; }
.lg-btns { display: grid; gap: 8px; }
.lg-btn {
  display: block; padding: 12px; border-radius: 999px; text-align: center; text-decoration: none; font: inherit; font-size: 15px;
  border: 1px solid var(--edge); background: var(--card); color: var(--ink); cursor: pointer;
}
.lg-google { background: #fff; }
.lg-line { background: #8fcf9b; border-color: #6fae7c; color: #1f3d25; }
.lg-btn.is-off { color: #a99a8c; cursor: default; }
.lg-dev { margin: 12px 0 0; font-size: 13px; color: var(--cocoa); }
.lg-dev a { color: var(--ink); margin: 0 2px; }
.lg-note { margin: 12px 0 0; font-size: 12px; color: var(--cocoa); }
.lg-note code { font-size: 11px; }
.pp-name { margin: 4px 44px 4px 0; font-size: 20px; font-weight: 600; }
.pp-badge { display: inline-block; margin: 0; padding: 3px 10px; border-radius: 999px; background: #efe6d6; font-size: 12px; color: var(--cocoa); }
.pp-badge.is-ok { background: var(--sage); color: var(--ink); }
.pp-acts { margin-top: 14px; }
.pp-acts button, .fr-acts button, .gb-acts button, #gb-form button, .gb-note button {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--edge); background: var(--pink); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer;
}
.pp-note { margin: 0 0 8px; font-size: 13px; color: var(--cocoa); }
#friends h3 { margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--cocoa); }
#friends ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#friends li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--edge); }
.fr-name { flex: 1; font-size: 15px; }
.fr-where { font-size: 12px; color: var(--cocoa); }
.fr-acts { display: flex; gap: 6px; }
.fr-acts button { padding: 5px 10px; font-size: 12px; background: var(--cream); }
.fr-acts button[data-act="accept"], .fr-acts button[data-act="go"] { background: var(--pink); }
.fr-empty { font-size: 13px; color: var(--cocoa); line-height: 1.7; }
.gb-note { margin: 0 0 10px; font-size: 13px; color: var(--cocoa); }
.gb-note button { padding: 3px 10px; font-size: 13px; }
#gb-claim input { width: 100%; margin-top: 6px; font: inherit; font-size: 12px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--edge); }
#gb-form { display: grid; gap: 8px; margin-bottom: 12px; }
#gb-form[hidden] { display: none; }
#gb-text { font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--edge); background: var(--card); color: var(--ink); resize: vertical; }
#gb-form button { justify-self: end; }
#gb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#gb-list li { padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--edge); }
#gb-list li.is-hidden { opacity: 0.55; }
.gb-head { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: 13px; }
.gb-head span { color: var(--cocoa); font-size: 12px; }
.gb-body { margin: 4px 0 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.gb-reply { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: #efe6d6; font-size: 13px; line-height: 1.6; }
.gb-reply b { display: block; font-size: 11px; color: var(--cocoa); }
.gb-acts { display: flex; gap: 6px; margin: 6px 0 0; }
.gb-acts:empty { display: none; }
.gb-acts button { padding: 3px 10px; font-size: 12px; background: var(--cream); }
.gb-empty { text-align: center; color: var(--cocoa); font-size: 13px; background: none !important; border: 0 !important; }