/* 会员中心样式。玩家的手机页：亮色、圆角卡片、大按钮；出码页高对比（店内扫码要快）。 */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #f5f7f6;
  --card: #ffffff;
  --text: #111827;
  --dim: #6b7280;
  --primary: #059669;
  --primary-dark: #047857;
  --bad: #dc2626;
  --line: #e5e7eb;
}

html { font-size: 16px; }

body {
  font-family: system-ui, -apple-system, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: 4.5rem; /* 给底部导航留空间 */
}

.hidden { display: none !important; }

.view { padding: 1.2rem; max-width: 30rem; margin: 0 auto; }
h1 { font-size: 1.4rem; margin-bottom: .8rem; }
h2 { font-size: 1.05rem; }
.hint { color: var(--dim); font-size: .88rem; line-height: 1.55; margin-top: .4rem; }
.hint.center { text-align: center; }
.error { color: var(--bad); font-size: .95rem; margin-top: .7rem; line-height: 1.5; }
.label { color: var(--dim); font-size: .85rem; display: block; margin-top: 1rem; }
.warn-note { color: #b45309; font-size: .85rem; margin-top: .4rem; }
.dim-note { margin-top: 1.2rem; }

input[type=text] {
  width: 100%;
  font-size: 1.15rem;
  padding: .8rem 1rem;
  border-radius: .7rem;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--text);
  margin: .5rem 0;
}
input[type=text]:focus { outline: none; border-color: var(--primary); }

button.big {
  display: block; width: 100%;
  font-size: 1.15rem; font-weight: 700;
  padding: .95rem;
  border: none; border-radius: .8rem;
  margin-top: .8rem;
  color: #fff;
  touch-action: manipulation;
}
button.big:active { transform: scale(.98); }
button.primary { background: var(--primary); }
button.primary:disabled { background: #d1d5db; color: #9ca3af; }
button.ghost { background: transparent; border: 1.5px solid var(--line); color: var(--dim); }
button.onfill { background: rgba(255,255,255,.25); max-width: 20rem; }
.link-btn {
  background: none; border: none; color: var(--primary);
  font-size: .95rem; font-weight: 700; padding: .2rem .4rem;
}

/* ---------------- 登录 ---------------- */
.login-hero { text-align: center; padding: 3rem 0 2rem; }
.login-hero h1 { font-size: 1.8rem; color: var(--primary-dark); }

/* ---------------- 卡片 ---------------- */
.card {
  background: var(--card); border-radius: 1rem;
  padding: 1rem 1.1rem 1.1rem; margin-bottom: .9rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.card-head { display: flex; justify-content: space-between; align-items: center; }
.card-main { font-size: 1.15rem; font-weight: 700; margin-top: .4rem; }

.balance-card {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; border-radius: 1.1rem;
  padding: 1.4rem 1.2rem; margin-bottom: 1rem; text-align: center;
}
.balance-label { font-size: .9rem; opacity: .85; }
.balance-num { font-size: 3rem; font-weight: 800; line-height: 1.2; }
.balance-card .warn-note { color: #fde68a; }

.plain-list { list-style: none; }
.plain-list li {
  padding: .7rem 0; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
}
.plain-list li:last-child { border-bottom: none; }

/* ---------------- 弹层 ---------------- */
.modal {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(17,24,39,.45);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  background: var(--card); border-radius: 1.2rem 1.2rem 0 0;
  width: 100%; max-width: 30rem;
  padding: 1.3rem 1.2rem 1.6rem;
}
.sheet select {
  width: 100%; margin-top: .8rem; font-size: 1rem;
  border: 1.5px solid var(--line); border-radius: .6rem; padding: .3rem;
}
.cf-price { font-size: 1.3rem; font-weight: 700; margin-top: .6rem; }
#cf-price { color: var(--primary-dark); }

/* ---------------- 权益卡片 ---------------- */
.offer-card {
  background: var(--card); border-radius: 1rem;
  padding: 1rem 1.1rem; margin-bottom: .9rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.offer-title { font-size: 1.2rem; font-weight: 700; }
.offer-partner { color: var(--dim); font-size: .85rem; margin-top: .15rem; }
.offer-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }
.chip {
  font-size: .8rem; padding: .25rem .6rem; border-radius: 2rem;
  background: #ecfdf5; color: var(--primary-dark);
}
.chip.gray { background: #f3f4f6; color: var(--dim); }
.chip.red { background: #fef2f2; color: var(--bad); }
.offer-price { font-size: 1.5rem; font-weight: 800; color: var(--primary-dark); }
.offer-row { display: flex; justify-content: space-between; align-items: center; margin-top: .5rem; }
.offer-row button {
  width: auto; margin: 0; padding: .7rem 1.6rem; font-size: 1.05rem;
}

/* ---------------- 出码页 ---------------- */
.fullscreen {
  position: fixed; inset: 0; z-index: 30;
  max-width: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--primary-dark); color: #fff;
  text-align: center; padding: 1.5rem;
}
.code-offer { font-size: 1.2rem; font-weight: 700; }
#qr-box {
  background: #fff; border-radius: 1rem; padding: 12px;
  margin: 1rem 0 .8rem; line-height: 0;
}
.code-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.6rem; font-weight: 700; letter-spacing: .12em;
  user-select: all; /* 允许长按全选复制 */
}
.code-count { font-size: 1.1rem; margin-top: .5rem; opacity: .9; }
.code-count.expired { color: #fecaca; font-weight: 700; }
.fullscreen .hint { color: rgba(255,255,255,.75); }

/* ---------------- 历史 ---------------- */
.h-delta { font-weight: 800; font-size: 1.1rem; min-width: 3.5rem; text-align: right; }
.h-delta.pos { color: var(--primary-dark); }
.h-delta.neg { color: var(--bad); }
.h-main { flex: 1; }
.h-reason { font-size: 1rem; }
.h-time { color: var(--dim); font-size: .8rem; margin-top: .1rem; }

/* ---------------- 榜单（v9 定稿：明亮晴空蓝底 + 插图头 + 天梯/地图） ----------------
 * 配色、圆角、尺寸全部照抄 docs/design/board-ui-mockup.html（v9），四端统一，别改数值。
 * 类名相对原稿改了两处以避开本文件既有类：.bar→.ebar（能量条）、.chip→.coinchip（金币胶囊）。 */

/* 整页视图：晴空蓝渐变底铺满，去掉 .view 默认内边距让插图头贴顶 */
.board-view {
  padding: 0 0 .9rem;
  background: linear-gradient(180deg, #CDEBFF 0%, #E4F4FF 40%, #F4FAFF 100%);
  min-height: calc(100dvh - 4.5rem);
}

/* 96px 双城对峙插图头。preserveAspectRatio=none：宽度自适应时允许轻微拉伸（规格如此） */
.board-hero { position: relative; height: 96px; }
.board-hero svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bh-title {
  position: absolute; left: 14px; bottom: 8px; color: #fff;
  font-weight: 900; font-size: 19px; letter-spacing: 3px;
  text-shadow: 0 2px 5px rgba(20,70,140,.65);
}
/* 76×30 迷你分段（🏆 天梯 / 🗺️ 地图），压在插图右上角 */
.mini {
  position: absolute; right: 12px; top: 12px; display: flex;
  background: rgba(255,255,255,.88); border: 2px solid #B7D4F2;
  border-radius: 12px; overflow: hidden;
}
.mini i {
  width: 38px; height: 30px; display: grid; place-items: center;
  font-style: normal; font-size: 15px; color: #7FA6CE; cursor: pointer;
}
.mini i.on { background: linear-gradient(180deg, #FFE066, #FFA41B); color: #7A3B00; }

/* 子页 tab（城市对抗 / 我的城市）：与迷你分段同一套白底蓝框 + 金渐变选中态 */
.board-tabs { display: flex; gap: .5rem; margin: .6rem 14px 0; }
.btab {
  flex: 1; font-size: .95rem; font-weight: 800; padding: .5rem;
  border-radius: 12px; border: 2px solid #B7D4F2;
  background: rgba(255,255,255,.88); color: #7FA6CE; touch-action: manipulation;
}
.btab.active { background: linear-gradient(180deg, #FFE066, #FFA41B); border-color: #E8A20E; color: #7A3B00; }

/* 元信息行：左边周期分段，右边说明文字 */
.bmeta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px 4px; color: #5B7290; font-size: 11.5px;
}
.bmeta b { color: #E4700C; font-weight: 800; }
.bseg {
  display: inline-flex; background: rgba(255,255,255,.88);
  border: 2px solid #B7D4F2; border-radius: 10px; overflow: hidden;
}
.bseg-btn {
  border: none; background: none; color: #7FA6CE;
  font-size: 11.5px; font-weight: 800; padding: .3rem .75rem; touch-action: manipulation;
}
.bseg-btn.active { background: linear-gradient(180deg, #FFE066, #FFA41B); color: #7A3B00; }

.board-guide { margin: 1rem 14px; }

/* v9 天梯行：全部元素卡内排布；不对称圆角（20/12/20/12）打破方框感 */
.ladder { padding: 4px 14px 0; }
.gr {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; margin-bottom: 7px;
  border-radius: 20px 12px 20px 12px;
  background: linear-gradient(180deg, #FFFFFF, #F2F8FF);
  border: 2px solid #D5E3F5; box-shadow: 0 3px 0 rgba(120,160,210,.2);
}
/* 32px 圆角方章，完全收进卡内 */
.rb {
  width: 32px; height: 32px; flex: none; border-radius: 11px;
  display: grid; place-items: center; font-weight: 900; font-size: 14px; color: #6B84A8;
  background: linear-gradient(180deg, #F4F8FE, #E3ECF8); border: 2px solid #C9D9EE;
}
.rb.r1 { background: radial-gradient(circle at 35% 28%, #FFF3B0, #FFD23F 60%, #F0A400); border-color: #D98E1B; color: #7A3B00; }
.rb.r2 { background: radial-gradient(circle at 35% 28%, #FFF, #E4ECFA 60%, #9FB2D4); border-color: #8FA6C6; color: #3C4C66; }
.rb.r3 { background: radial-gradient(circle at 35% 28%, #FFD9B8, #FF9C5B 60%, #D96627); border-color: #C1702E; color: #6B2E00; }
.gr .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gr .nm { display: flex; align-items: baseline; gap: 8px; }
.gr .nm b { color: #27436B; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr .nm span { color: #8AA3C4; font-size: 10.5px; white-space: nowrap; }
/* 能量条：宽度 ∝ 积分/榜首 */
.ebar { height: 8px; border-radius: 5px; background: #E4EDF9; overflow: hidden; }
.ebar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #FFD23F, #FF7A3D); }
/* 前三整卡金/银/铜渐变 */
.gr.t1 { background: linear-gradient(135deg, #FFE99A, #FFC93C); border-color: #E8A20E; }
.gr.t2 { background: linear-gradient(135deg, #EDF3FC, #C9D6EA); border-color: #A9BCD8; }
.gr.t3 { background: linear-gradient(135deg, #FFDCBB, #FF9C5B); border-color: #E07E36; }
.gr.t1 .nm b, .gr.t3 .nm b { color: #5C3A08; }
.gr.t1 .nm span, .gr.t3 .nm span { color: #8A6425; }
.gr.t2 .nm b { color: #33445F; }
.gr.t2 .nm span { color: #6C7F9D; }
.gr.t1 .ebar, .gr.t3 .ebar { background: rgba(255,255,255,.5); }
.gr.t1 .ebar i { background: linear-gradient(90deg, #FFFDF4, #FFAB1F); }
.gr.t2 .ebar { background: rgba(255,255,255,.6); }
.gr.t2 .ebar i { background: linear-gradient(90deg, #FFF, #93A9CC); }
.gr.t3 .ebar i { background: linear-gradient(90deg, #FFF3E6, #F07018); }
/* 金币胶囊分数 */
.coinchip {
  flex: none; display: flex; align-items: center; gap: 5px; padding: 4px 10px;
  border-radius: 999px; font-weight: 900; font-size: 13.5px; color: #B35A00;
  background: linear-gradient(180deg, #FFF7DF, #FFE9AD); border: 2px solid #EDC35C;
}
.cc {
  width: 13px; height: 13px; border-radius: 50%; display: inline-block;
  background: radial-gradient(circle at 35% 30%, #FFF3B0, #FFC93C 60%, #E4700C);
  border: 2px solid #D98E1B;
}
/* 我所在的行：青绿描边（outline 不占布局，压在不对称圆角上） */
.myrow { outline: 3px solid #0FBE8F; outline-offset: -3px; }

/* 「我的城市」底部绿色固定条：sticky 浮在底部导航之上 */
.mebar {
  position: sticky; bottom: 4.75rem; z-index: 5;
  margin: 8px 14px 14px; padding: 11px 16px; border-radius: 15px;
  display: flex; justify-content: space-between; font-weight: 900; color: #fff;
  background: linear-gradient(180deg, #3CE08A, #12A85E); border: 3px solid #0A9052;
  box-shadow: 0 4px 0 #0A7A46, inset 0 2px 0 rgba(255,255,255,.45);
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* 地图：无框，浮在浅蓝底上（阴影在 SVG filter 里） */
.mapfree { margin: 0 8px; }
.mapfree svg { display: block; width: 100%; height: auto; max-height: 62vh; margin: 0 auto; }

.legend {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-size: 10.5px; color: #41628C; padding: 4px 14px 6px;
}
.legend .grad {
  flex: 1; max-width: 150px; height: 9px; border-radius: 5px;
  border: 1.5px solid rgba(60,90,140,.25);
  background: linear-gradient(90deg, #CDD8F4, #B28AF5, #FF7A3D, #FFC93C);
}
.legend .hatch {
  width: 14px; height: 11px; border-radius: 3px; display: inline-block;
  background: repeating-linear-gradient(45deg, #EDF2FA 0 3px, #D8E1F0 3px 6px);
  border: 1.5px solid rgba(60,90,140,.25); vertical-align: -2px;
}

/* 点府后的底部铭牌：就地更新，不弹窗 */
.selplaque {
  margin: 0 14px 14px; padding: 10px 14px; border-radius: 14px;
  display: flex; align-items: center; gap: 10px; color: #27436B;
  background: linear-gradient(180deg, #FFFFFF, #F4F9FF);
  border: 2.5px solid #C9DBF2; box-shadow: 0 3px 0 rgba(120,160,210,.25);
}
.selplaque .p { margin-left: auto; font-weight: 900; color: #E4700C; font-size: 16px; white-space: nowrap; }

/* ---------------- 关联 ---------------- */
.link-icon { font-size: 3rem; text-align: center; }

/* ---------------- 底部导航 ---------------- */
#bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex;
  background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-btn {
  flex: 1; font-size: .95rem; font-weight: 700;
  padding: .9rem 0; border: none; background: none; color: var(--dim);
}
.nav-btn.active { color: var(--primary-dark); }