/* W1 屏幕样式：登录 / 美味镇 / 出海 / 世界地图 / 美味岛 / 菜单栏与顶栏 / 公告板 / 个人资料。坐标单位 = 原作舞台像素。 */

/* ---------- 登录（UI_SPEC §3.1） ---------- */
.lg-wrap { position: absolute; left: 0; top: 0; width: 950px; height: 600px; background: #0b2a52; }
.lg-bg { background-size: 950px 595px; }
.lg-shade { position: absolute; left: 0; top: 0; width: 950px; height: 600px; background: rgba(0, 0, 0, .45); }
.lg-title { position: absolute; left: 0; width: 950px; top: 18px; text-align: center; }
.lg-title-main {
  display: block; font-size: 50px; font-weight: 900; letter-spacing: 6px; color: #fff4c6;
  -webkit-text-stroke: 3px #8a3c00; paint-order: stroke fill; text-shadow: 0 0 10px #ffcf3a, 0 4px 0 #5a2600;
}
.lg-title-sub { display: block; margin-top: 2px; font-size: 20px; font-weight: bold; color: #cdeeff; letter-spacing: 4px; text-shadow: 0 2px 2px #000; }
.lg-body { display: flex; align-items: center; justify-content: center; }
.lg-view { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 18px; box-sizing: border-box; }
/* 6 位码：照原作黄色位图数字 digits_yellow 的配色（橙黄渐变 + 深棕描边），用文字画保证手机上清楚 */
.lg-code {
  padding: 2px 30px; border-radius: 12px; background: linear-gradient(180deg, #123f73, #0b2a52); border: 3px solid #0a2344;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
  font-size: 66px; line-height: 84px; font-weight: 900; letter-spacing: 10px; font-family: "Arial Black", Arial, var(--td-font);
  background-clip: padding-box; color: #ffd84a; -webkit-text-stroke: 2px #6b2c00; paint-order: stroke fill; text-shadow: 0 3px 0 #6b2c00, 0 0 10px rgba(255, 190, 40, .55);
}
.lg-say { font-size: 18px; font-weight: bold; color: #0b2e57; }
.lg-say em { font-style: normal; color: #c2185b; }
.lg-cmd { font-size: 24px; font-weight: 900; color: #ffd100; -webkit-text-stroke: 2px #1a1a1a; paint-order: stroke fill; letter-spacing: 2px; }
.lg-copy { height: 48px; font-size: 21px; padding: 0 26px; }
.lg-row { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.lg-cd { color: #0b2e57; font-weight: bold; }
.lg-link { border: 0; background: none; color: #0d4fa0; font-size: 16px; font-weight: bold; text-decoration: underline; cursor: pointer; padding: 6px 4px; pointer-events: auto; }
.lg-status { font-size: 15px; color: #164a82; min-height: 20px; }
.lg-hint { font-size: 14px; color: #3d6f9c; }
.lg-ok { gap: 16px; }
.lg-ok-top { font-size: 20px; font-weight: bold; color: #0b6b23; }
.lg-who { font-size: 34px; font-weight: 900; color: #ffe066; -webkit-text-stroke: 2px #5a2a00; paint-order: stroke fill; text-shadow: 0 3px 0 #5a2a00; }
.lg-ok-btns { gap: 34px; }
.lg-start { height: 54px; min-width: 200px; font-size: 24px; }
.lg-notme { height: 44px; }
.lg-note { font-size: 15px; color: #164a82; text-align: center; }
.lg-foot { position: absolute; left: 0; width: 950px; top: 534px; text-align: center; font-size: 16px; color: #d7efff; text-shadow: 0 1px 2px #000; letter-spacing: 1px; }
.lg-dev { position: absolute; left: 14px; top: 560px; border: 1px dashed #9cc; background: rgba(0, 0, 0, .45); color: #bff; font-size: 14px; padding: 4px 10px; border-radius: 6px; cursor: pointer; }

/* ---------- 美味镇 ---------- */
.tw-wrap { position: absolute; left: 0; top: 0; width: 950px; height: 600px; }
.tw-over { opacity: 0; transition: opacity .12s; background-size: 100% 100% !important; }
.tw-over.on { opacity: 1; }
.tw-hits { position: absolute; left: 0; top: 0; width: 950px; height: 600px; z-index: 1000; pointer-events: none; }
.tw-enter { background-size: 100% 100% !important; }
.tw-pier-bubble { background-size: 100% 100% !important; transition: filter .12s; }
.tw-pier-bubble.night { filter: hue-rotate(-148deg) brightness(.82) contrast(.87) saturate(1.15); }
.tw-pier-bubble.on { filter: brightness(1.15); }
.tw-pier-bubble.night.on { filter: hue-rotate(-148deg) brightness(.95) contrast(.87) saturate(1.15); }
.tw-pier-text {
  position: absolute; text-align: center; white-space: nowrap; pointer-events: none;
  font-size: 23px; line-height: 32px; font-weight: 900; letter-spacing: 1px; color: #fffbe8;
  -webkit-text-stroke: 3px #a64200; paint-order: stroke fill; text-shadow: 0 2px 0 rgba(90, 30, 0, .6);
}
.tw-wrap[data-variant="night"] .tw-pier-text { -webkit-text-stroke-color: #3a2a86; text-shadow: 0 2px 0 rgba(20, 10, 60, .6); }
.tw-pier-glow { position: absolute; left: 0; top: 0; width: 950px; height: 600px; pointer-events: none; z-index: 262; }
.tw-pier-glow polygon { fill: rgba(255, 240, 150, 0); stroke: rgba(255, 214, 0, 0); stroke-width: 4; stroke-linejoin: round; transition: all .12s; }
.tw-pier-glow.on polygon { fill: rgba(255, 244, 170, .16); stroke: #ffd400; }
.tw-bcast { position: absolute; left: 0; top: 0; width: 950px; height: 600px; z-index: 1100; pointer-events: none; display: none; }
.tw-bcast.on { display: block; }
.tw-bcast-bg { pointer-events: auto; }
.tw-bcast .td-img:not(.tw-bcast-bg) { background-size: 100% 100%; }
.tw-bcast-text { pointer-events: auto; overflow-y: auto; white-space: pre-wrap; padding: 2px 8px; box-sizing: border-box; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.tw-bcast-btn {
  position: absolute; z-index: 1100; border: 0; padding: 0; background: transparent no-repeat center / 100% 100%;
  cursor: pointer; pointer-events: auto; outline: none;
}
.tw-bcast-btn::before { content: ""; position: absolute; left: -6px; right: -18px; top: -14px; bottom: -14px; }
.tw-bcast-btn.off { display: none; }
.tw-label, .tw-blank { background-size: 100% 100%; }

/* ---------- 出海 ---------- */
.sl-wrap { position: absolute; left: 0; top: 0; width: 950px; height: 600px; }
.sl-wrap > .td-img:first-child { background-size: 100% 100% !important; }
.sl-shade { position: absolute; background: rgba(0, 10, 30, .3); }

/* ---------- 世界地图 ---------- */
.wm-wrap { position: absolute; left: 0; top: 0; width: 950px; height: 600px; }
.wm-wrap .td-img { background-size: 100% 100%; }
.wm-under-shade { position: absolute; left: 0; top: 0; width: 950px; height: 600px; background: rgba(0, 6, 20, .6); z-index: 50; }
.wm-dark { filter: brightness(.4) saturate(.3); }
.wm-over { opacity: 0; transition: opacity .12s; }
.wm-over.on { opacity: 1; }
.wm-hits { position: absolute; left: 0; top: 0; width: 950px; height: 600px; z-index: 1000; pointer-events: none; }
.wm-char { transition: transform .45s ease-in-out; }

/* ---------- 美味岛 ---------- */
.is-wrap { position: absolute; left: 0; top: 0; width: 950px; height: 600px; }
.is-wrap .td-img:not(.is-ring) { background-size: 100% 100%; }
.is-node { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.is-pin.press { filter: brightness(1.18); }
.is-hits { position: absolute; left: 0; top: 0; width: 950px; height: 600px; z-index: 1000; pointer-events: none; }

/* ---------- 菜单栏（右下，原作 TDMenuUI）+ 顶栏（左上玩家信息框、右上货币胶囊）---------- */
.mb-br { position: absolute; right: 0; bottom: 0; width: 500px; height: 440px; transform-origin: 100% 100%; transform: scale(var(--ui-menu, var(--ui))); pointer-events: none; }
.mb-img { background-size: 100% 100% !important; }
.mb-btn { position: absolute; border: 0; padding: 0; margin: 0; background: transparent no-repeat center / 100% 100%; cursor: pointer; pointer-events: auto; outline: none; }
.mb-btn.off { cursor: default; }
.mb-btn:not(.off):active { filter: brightness(1.12); }
.mb-tasktip { display: none; background-size: 100% 100%; animation: mb-bob 1s ease-in-out infinite; }
.mb-tasktip.on { display: block; }
@keyframes mb-bob { 50% { transform: translateY(-3px); } }
.mb-jump .mb-btn.off { filter: grayscale(1); }
#td-root.td-no-menubar .mb-br, #td-root.td-no-hud .mb-tl, #td-root.td-no-hud .mb-tr { display: none; }

.mb-tl { position: absolute; left: 4px; top: 4px; transform-origin: 0 0; transform: scale(var(--ui)); pointer-events: none; }
.mb-me {
  position: relative; display: block; width: 118px; height: 97px; padding: 0; border: 0; cursor: pointer; pointer-events: auto; outline: none;
  background: transparent no-repeat 0 0 / 100% 100%;
}
.mb-me:active { filter: brightness(1.1); }
.mb-me-face { position: absolute; left: 8px; top: 6px; width: 102px; height: 58px; overflow: hidden; background: no-repeat 50% 4px / 62px 80px; border-radius: 6px; }
.mb-me-lv { position: absolute; left: -2px; top: 30px; width: 56px; height: 40px; transform: scale(.8); transform-origin: 0 0; background-repeat: no-repeat; pointer-events: none; }
.mb-me-name {
  position: absolute; left: 9px; width: 100px; top: 68px; height: 18px; line-height: 18px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 13px; font-weight: bold; color: #fff; text-shadow: 1px 1px 0 #3a1500, -1px -1px 0 #3a1500, 1px -1px 0 #3a1500, -1px 1px 0 #3a1500;
}
.mb-tr { position: absolute; right: 4px; top: 4px; display: flex; gap: 8px; transform-origin: 100% 0; transform: scale(var(--ui)); pointer-events: none; }
.mb-chip {
  pointer-events: auto; box-sizing: border-box; height: 28px; border-radius: 14px; display: flex; align-items: center; gap: 6px;
  padding: 0 12px 0 3px; border: 1.5px solid #9fd3ff; color: #fff; font-size: 16px; font-weight: bold; white-space: nowrap;
  background: rgba(8, 51, 92, .88); box-shadow: 0 2px 4px rgba(0, 0, 0, .45); text-shadow: 0 1px 1px #000; font-family: var(--td-font); outline: none;
}
button.mb-chip { cursor: pointer; }
button.mb-chip:active { filter: brightness(1.15); }
.mb-money { min-width: 110px; justify-content: space-between; }
.mb-g, .mb-d { flex: none; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 14px; line-height: 20px; text-align: center; font-weight: 900; box-sizing: border-box; text-shadow: none; }
.mb-g { background: radial-gradient(circle at 35% 30%, #fff3a0, #ffc81e 55%, #d88a00); color: #6b3500; border: 1.5px solid #8a5200; }
.mb-d { background: radial-gradient(circle at 35% 30%, #a8e4ff, #2f95e8 55%, #1560b0); color: #fff; border: 1.5px solid #0b3f7a; }
.mb-day { display: none; font-size: 14px; padding: 0 12px; color: #cfeeff; }
.mb-tr.on-island .mb-day { display: flex; }
.mb-day.full { color: #ffb3a3; border-color: #ff7f6e; }
.mb-gear { width: 32px; padding: 0; justify-content: center; }
.mb-gear-i {
  width: 20px; height: 20px; display: block;
  background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M19.4 13a7.6 7.6 0 0 0 0-2l2.1-1.6-2-3.5-2.5 1a7.4 7.4 0 0 0-1.7-1L15 3.3h-4l-.4 2.6a7.4 7.4 0 0 0-1.7 1l-2.5-1-2 3.5L6.6 11a7.6 7.6 0 0 0 0 2l-2.1 1.6 2 3.5 2.5-1a7.4 7.4 0 0 0 1.7 1l.4 2.6h4l.4-2.6a7.4 7.4 0 0 0 1.7-1l2.5 1 2-3.5zM13 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z' transform='translate(-1 0)'/%3E%3C/svg%3E");
}

/* ---------- 面板（公告板 / 个人资料） ---------- */
.pn-wrap { position: absolute; left: 0; top: 0; width: 950px; height: 600px; }
.pn-shade { position: absolute; left: 0; top: 0; width: 950px; height: 600px; background: rgba(0, 8, 24, .5); pointer-events: auto; }
.pn-body { font-size: 17px; }
.pn-tabs { position: absolute; left: 10px; right: 10px; top: 8px; display: flex; gap: 6px; }
.pn-tab {
  pointer-events: auto; cursor: pointer; height: 34px; padding: 0 18px; border-radius: 10px 10px 4px 4px;
  border: 2px solid #1d5e9e; background: linear-gradient(180deg, #4a9fdc, #2a74b6); color: #dff3ff;
  font-size: 17px; font-weight: bold; text-shadow: 0 1px 1px #0b2e57;
}
.pn-tab.on { background: linear-gradient(180deg, #fff6c8, #ffd66a); color: #6b3500; border-color: #b36b00; text-shadow: none; }
.bd-sub { top: 46px; }
.bd-sub .pn-tab { height: 30px; font-size: 16px; padding: 0 14px; border-radius: 15px; }
.bd-list {
  position: absolute; left: 10px; right: 10px; top: 50px; bottom: 36px; overflow-y: auto; touch-action: pan-y;
  background: #e2f3ff; border: 2px solid #5aa3dc; border-radius: 8px; -webkit-overflow-scrolling: touch;
}
.bd-list.with-sub { top: 84px; }
.bd-row, .bd-item { display: flex; align-items: center; gap: 12px; padding: 0 14px; min-height: 40px; border-bottom: 1px solid #b9dcf5; color: #0b2e57; }
.bd-row.me { background: #fff2c2; }
.bd-rank { width: 34px; height: 28px; line-height: 28px; text-align: center; font-weight: 900; color: #3b6f9f; flex: none; border-radius: 14px; }
.bd-rank.m1 { background: linear-gradient(#ffe56b, #f0a800); color: #5a2a00; }
.bd-rank.m2 { background: linear-gradient(#f2f6fa, #a9b7c6); color: #2d3a48; }
.bd-rank.m3 { background: linear-gradient(#ffd0a0, #c9793a); color: #4a2300; }
.bd-name { flex: 1; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-sub2 { color: #4d7aa6; font-size: 15px; white-space: nowrap; }
.bd-val { font-weight: 900; color: #c55a00; white-space: nowrap; }
.bd-item { padding: 8px 14px; align-items: flex-start; }
.bd-ts { color: #5a86ad; font-size: 14px; width: 92px; flex: none; }
.bd-text { flex: 1; line-height: 1.5; }
.bd-empty { padding: 60px 20px; text-align: center; color: #3d6f9c; font-size: 18px; }
.bd-me { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 26px; line-height: 26px; font-weight: bold; color: #0b2e57; }

.pf-left { position: absolute; left: 14px; top: 14px; width: 170px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pf-avatar { position: relative; width: 106px; height: 138px; background-size: 100% 100%; background-color: rgba(255, 255, 255, .5); border: 2px solid #5aa3dc; border-radius: 10px; }
.pf-name { font-size: 20px; font-weight: 900; color: #fff; -webkit-text-stroke: 1px #0b3d73; paint-order: stroke fill; text-shadow: 0 2px 0 #0b3d73; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-uid { font-size: 14px; color: #164a82; }
.pf-small { height: 32px; min-width: 70px; font-size: 16px; }
.pf-table { position: absolute; left: 198px; right: 14px; top: 12px; background: #e2f3ff; border: 2px solid #5aa3dc; border-radius: 8px; overflow: hidden; }
.pf-row { display: flex; min-height: 34px; align-items: center; border-bottom: 1px solid #b9dcf5; padding: 0 12px; font-size: 16px; }
.pf-row:last-child { border-bottom: 0; }
.pf-k { width: 84px; flex: none; color: #3d6f9c; font-weight: bold; }
.pf-v { color: #0b2e57; font-weight: bold; }
.pf-btns { position: absolute; left: 0; right: 0; bottom: 42px; display: flex; justify-content: center; gap: 22px; }
.pf-allout { position: absolute; right: 16px; bottom: 12px; font-size: 14px; }
.pf-note { position: absolute; left: 16px; bottom: 16px; font-size: 13px; color: #164a82; }
.lg-device { font-size: 15px; color: #164a82; }
.pf-sex { font-size: 13px; padding: 0; margin-top: -4px; }