/* Royal Knight deltas — base.css + reskin.css provide the polished UI. */

/* Face placeholder (rarely shown; the default face always has an image). */
#head-ph{border-radius:50%;border:2px dashed #ccc;display:flex;align-items:center;justify-content:center;font-size:9px;color:#bbb;text-align:center;line-height:1.3}

/* Reusable loot/result modal (thumbnail rows) */
#loot-overlay{position:absolute;inset:0;z-index:122;display:none;align-items:center;justify-content:center;background:rgba(44,30,40,0.55)}
#loot-overlay.show{display:flex}
#loot-overlay .loot-card{position:relative;width:84%;max-width:330px;background:linear-gradient(165deg,#fffdf4,#ffe9b8);border:5px solid #fff;border-radius:24px;padding:20px 18px;box-shadow:0 16px 40px rgba(137,95,116,0.32),inset 0 2px 0 rgba(255,255,255,0.85)}
#loot-overlay .loot-title{font-size:21px;font-weight:800;color:#6b4255;text-align:center}
#loot-overlay .loot-subtitle{font-size:12px;font-weight:600;color:#8b6f7c;text-align:center;margin-top:3px}
#loot-overlay .loot-scoreboard{display:flex;gap:10px;margin:12px 0 4px}
#loot-overlay .loot-sb-cell{flex:1;text-align:center;background:#fffafd;border:1px solid rgba(255,226,234,0.95);border-radius:14px;padding:10px 6px}
#loot-overlay .loot-sb-k{display:block;font-size:11px;font-weight:700;color:#8b6f7c;letter-spacing:0.5px}
#loot-overlay .loot-sb-v{display:block;font-size:30px;font-weight:800;color:#6b4255;line-height:1.1;margin-top:2px}
#loot-overlay .loot-rows{margin:14px 0 4px;display:flex;flex-direction:column;gap:8px}
#loot-overlay .loot-row{display:flex;align-items:center;gap:11px;background:#fffafd;border:1px solid rgba(255,226,234,0.95);border-radius:14px;padding:8px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.9)}
#loot-overlay .loot-row-icon{width:42px;height:42px;object-fit:contain;flex:0 0 auto}
#loot-overlay .loot-row-mid{flex:1 1 auto;min-width:0}
#loot-overlay .loot-row-name{font-size:15px;font-weight:700;color:#5a4450}
#loot-overlay .loot-row-sub{font-size:11px;font-weight:700;color:#c98aa6;letter-spacing:0.5px}
#loot-overlay .loot-row-amount{font-size:17px;font-weight:800;color:#6b4255;flex:0 0 auto}
#loot-overlay .loot-empty{font-size:13px;font-weight:600;color:#8b6f7c;text-align:center;padding:10px}
#loot-overlay .loot-buttons{display:flex;gap:10px;margin-top:16px}
#loot-overlay .loot-btn{flex:1 1 0;border:0;border-radius:14px;padding:12px 0;font-size:15px;font-weight:800;cursor:pointer}
#loot-overlay .loot-btn-primary{color:#fff;background:linear-gradient(90deg,#e0457b,#7c3fd0);box-shadow:0 6px 14px rgba(124,63,208,0.4)}
#loot-overlay .loot-btn-secondary{color:#8b2f52;background:#fbe0ea;border:1.5px solid #e0457b;padding:10.5px 0}

/* Level-up celebration modal + confetti */
#levelup-overlay{position:absolute;inset:0;z-index:135;display:none;align-items:center;justify-content:center;background:rgba(44,30,40,0.55);-webkit-tap-highlight-color:transparent}
#levelup-overlay.show{display:flex}
#levelup-confetti{position:absolute;inset:0;pointer-events:none}
#levelup-overlay .levelup-card{position:relative;z-index:1;width:78%;max-width:300px;background:linear-gradient(165deg,#fffdf4 0%,#ffe9b8 100%);border:5px solid #fff;border-radius:26px;padding:24px 20px 20px;text-align:center;box-shadow:0 16px 40px rgba(137,95,116,0.32),inset 0 2px 0 rgba(255,255,255,0.85);animation:levelup-pop .42s cubic-bezier(.18,.9,.32,1.3)}
#levelup-overlay .levelup-emoji{font-size:46px;line-height:1}
#levelup-overlay .levelup-title{margin-top:6px;font-size:24px;font-weight:800;color:#6b4255}
#levelup-overlay .levelup-lv{margin-top:8px;font-size:40px;font-weight:900;line-height:1;background:linear-gradient(90deg,#ff92b2,#b99cff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#levelup-overlay .levelup-name{margin-top:6px;font-size:16px;font-weight:700;color:#8b4e65}
#levelup-overlay .levelup-btn{margin-top:18px;border:0;border-radius:16px;padding:11px 30px;font-size:15px;font-weight:800;color:#fff;background:linear-gradient(90deg,#ff92b2,#b99cff);box-shadow:0 6px 14px rgba(185,156,255,0.4);cursor:pointer}
@keyframes levelup-pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}

/* 采药 herb menu (hub + inventory viewer) */
#herb-drawer .herb-menu-counts{display:flex;justify-content:center;gap:14px;margin:10px 0 14px;font-size:13px;font-weight:700;color:#8b4e65}
#herb-drawer .herb-menu-games{display:flex;flex-direction:column;gap:9px}
#herb-drawer .herb-menu-game{border:0;border-radius:14px;padding:13px;font-size:15px;font-weight:700;color:#fff;background:linear-gradient(90deg,#e0457b,#7c3fd0);box-shadow:inset 0 1px 0 rgba(255,255,255,0.22);cursor:pointer}
#herb-drawer .herb-menu-game.soon{background:#f0e6ec;color:#a890a0;box-shadow:none}

/* Toast (not styled by base/reskin). */
#notify{position:absolute;top:80px;left:50%;transform:translateX(-50%);z-index:200;background:rgba(40,30,40,0.88);color:#fff;font-size:13px;font-weight:600;padding:8px 16px;border-radius:20px;opacity:0;pointer-events:none;transition:opacity .3s;white-space:nowrap}
#notify.show{opacity:1}

/* Simplified stats — three SEPARATE thin pills, each = icon + one slim bar.
   Strips the single chunky card; each stat becomes its own compact capsule. */
body.reskin-active #stats-bar{
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
  min-height:0 !important;
  padding:0 !important;
  gap:8px !important;
  align-items:center !important;
}
body.reskin-active #stats-bar .reskin-stat{
  flex:1 1 0 !important;
  min-width:0 !important;
  background:rgba(255,255,255,0.92) !important;
  border-radius:999px !important;
  padding:5px 11px !important;
  box-shadow:0 2px 8px rgba(140,80,100,0.12) !important;
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
}
body.reskin-active #stats-bar .reskin-stat-icon{ width:17px !important; height:17px !important; flex:0 0 auto !important; }
body.reskin-active #stats-bar .reskin-stat > div{ flex:1 1 auto !important; min-width:0 !important; }
body.reskin-active #stats-bar .reskin-stat-label{ display:none !important; }
body.reskin-active #stats-bar .reskin-stat-track{ height:5px !important; border-radius:999px !important; }

/* Level pill: remove the default button border (the dropped link class used to). */
body.reskin-active .reskin-lv-pill{ border:0 !important; cursor:pointer; -webkit-tap-highlight-color:transparent; }

/* 我 (profile) button — stacked directly under the task button (same square size). */
body.reskin-active .prince-me-btn{
  position:absolute !important;
  right: 2px !important;  /* same width as the task button now, so share its right inset */
  top: calc(54px + clamp(64px, 16vw, 76px)) !important;   /* task top(50) + task height + gap */
  width: clamp(64px, 16vw, 76px) !important;
  height: clamp(64px, 16vw, 76px) !important;
  padding:0 !important; border:0 !important; background:transparent !important;
  box-shadow:none !important; z-index:22 !important;
}
body.reskin-active .prince-me-btn img{ width:100% !important; height:100% !important; object-fit:contain !important; display:block !important; pointer-events:none !important; }
body.reskin-active .prince-me-btn:active{ transform:scale(0.96) !important; }
body.reskin-active .prince-charts-btn{
  position:absolute !important;
  right: 2px !important;
  top: calc(58px + 2 * clamp(64px, 16vw, 76px)) !important;   /* below the 我 button */
  width: clamp(64px, 16vw, 76px) !important;
  height: clamp(64px, 16vw, 76px) !important;
  padding:0 !important; border:0 !important; background:transparent !important;
  box-shadow:none !important; z-index:22 !important;
}
body.reskin-active .prince-charts-btn img{ width:100% !important; height:100% !important; object-fit:contain !important; display:block !important; pointer-events:none !important; }
body.reskin-active .prince-charts-btn:active{ transform:scale(0.96) !important; }

/* 任务 page — tabbed habit tracker + Weibo sign-in (matches loot-modal aesthetic) */
#tasks-modal{position:absolute;inset:0;z-index:122;align-items:center;justify-content:center;background:rgba(44,30,40,0.55)}
#tasks-card{position:relative;width:86%;max-width:340px;max-height:88dvh;overflow:hidden;display:flex;flex-direction:column;background:linear-gradient(165deg,#fffdf4,#ffe9b8);border:5px solid #fff;border-radius:24px;padding:18px 16px;box-shadow:0 16px 40px rgba(137,95,116,0.32),inset 0 2px 0 rgba(255,255,255,0.85)}
#tasks-card .tasks-title{font-size:21px;font-weight:800;color:#6b4255;text-align:center}
#tasks-card .tasks-tabs{display:flex;gap:8px;margin:14px 0 12px}
#tasks-card .tasks-tab{flex:1 1 0;border:1.5px solid #e0457b;border-radius:12px;padding:8px 0;font-size:14px;font-weight:800;color:#8b2f52;background:#fbe0ea;cursor:pointer}
#tasks-card .tasks-tab.active{color:#fff;background:linear-gradient(90deg,#e0457b,#7c3fd0);border-color:transparent}
#tasks-card .tk-counter{font-size:12px;font-weight:700;color:#8b6f7c;text-align:right;margin-bottom:6px}
#tasks-card .tk-list{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:8px;min-height:0;max-height:58dvh}
#tasks-card .tk-item{display:flex;align-items:center;gap:11px;background:#fffafd;border:1px solid rgba(255,226,234,0.95);border-radius:14px;padding:8px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.9)}
#tasks-card .tk-item.done{opacity:0.66}
#tasks-card .tk-check{flex:0 0 auto;width:30px;height:30px;border-radius:9px;border:1.5px solid #e0457b;background:#fff;color:#fff;font-size:16px;font-weight:800;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
#tasks-card .tk-check.done{background:linear-gradient(90deg,#e0457b,#7c3fd0);border-color:transparent}
#tasks-card .tk-label{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
#tasks-card .tk-name{font-size:15px;font-weight:700;color:#5a4450;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#tasks-card .tk-sub{font-size:11px;font-weight:700;color:#c98aa6}
#tasks-card .tk-del{flex:0 0 auto;width:26px;height:26px;border:0;border-radius:8px;background:#f4e6ec;color:#a86e84;font-size:17px;font-weight:800;line-height:1;cursor:pointer}
#tasks-card .tk-empty{font-size:13px;font-weight:600;color:#8b6f7c;text-align:center;padding:14px 6px}
#tasks-card .tk-add{display:flex;gap:8px;margin-top:12px}
#tasks-card .tk-add input{flex:1 1 auto;min-width:0;border:1.5px solid #f0c8d8;border-radius:12px;padding:10px 12px;font-size:14px;color:#5a4450;background:#fffafd}
#tasks-card .tk-add input:focus{outline:none;border-color:#e0457b}
#tasks-card .tk-add-btn{flex:0 0 auto;border:0;border-radius:12px;padding:10px 16px;font-size:14px;font-weight:800;color:#fff;background:linear-gradient(90deg,#e0457b,#7c3fd0);cursor:pointer}
.modal-x{position:absolute;top:12px;right:12px;z-index:5;width:32px;height:32px;border:1.5px solid #e0457b;border-radius:50%;background:#fbe0ea;color:#8b2f52;font-size:16px;font-weight:800;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
/* ── Battle (PRD §11) ── */
/* Full-screen battle hub: its X is absolute, so it must clear the status bar itself */
#battle-hub .modal-x{top:calc(12px + env(safe-area-inset-top,0px))}
/* Full-screen minigame close X's: same case — add any new minigame's close id here */
#cg-x, #g2048-x, #mg-x, #nt-x, #zzkp-x{top:calc(12px + env(safe-area-inset-top,0px))}
#battle-modal{position:absolute;inset:0;z-index:50;display:none;flex-direction:column;background:url("../assets/battle/forest-bg.jpg") center/cover no-repeat;overflow:hidden;padding:calc(18px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px))}
#bt-tier-banner{display:none;flex-direction:column;align-items:center;gap:2px;margin:0 0 10px;padding:8px 14px;border-radius:13px;text-align:center;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,0.32)}
.bt-tb-label{font-size:16px;font-weight:800;letter-spacing:0.5px}
.bt-tb-hint{font-size:12px;font-weight:600;opacity:0.96}
.bt-tb-elite{background:linear-gradient(90deg,#f0a830,#e0820f)}
.bt-tb-boss{background:linear-gradient(90deg,#e0463a,#a01414);animation:btTbPulse 1.4s ease-in-out infinite}
@keyframes btTbPulse{0%,100%{box-shadow:0 4px 14px rgba(224,40,40,0.45)}50%{box-shadow:0 4px 22px 3px rgba(224,40,40,0.72)}}
#bt-enemy{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:0}
.bt-bar-wrap{width:100%;max-width:300px;margin:0 auto}
.bt-bar-meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.bt-bar-label{font-size:14px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.55)}
.bt-bar-val{font-size:11px;font-weight:700;color:#f3e6dd;text-shadow:0 1px 2px rgba(0,0,0,0.5)}
.bt-bar{height:11px;border-radius:999px;background:rgba(0,0,0,0.45);overflow:hidden;border:1px solid rgba(255,255,255,0.18)}
.bt-bar-fill{height:100%;width:100%;border-radius:999px;transition:width 0.45s cubic-bezier(.2,.8,.2,1)}
.bt-bar.enemy .bt-bar-fill{background:linear-gradient(90deg,#ff7a7a,#e0457b);box-shadow:0 0 10px rgba(224,69,123,0.5)}
.bt-bar.hp .bt-bar-fill{background:linear-gradient(90deg,#6fd47f,#37b34a);box-shadow:0 0 10px rgba(111,208,138,0.5)}
#bt-player-wrap.low .bt-bar.hp .bt-bar-fill{background:linear-gradient(90deg,#ff7a7a,#e0457b);animation:bt-pulse 1s infinite}
#bt-enemy-sprite{flex:0 0 auto;width:min(260px,62vw);height:min(300px,40vh);object-fit:contain;margin:0 0 16px;filter:drop-shadow(0 8px 14px rgba(0,0,0,0.35));animation:bt-float 3s ease-in-out infinite}
#bt-enemy-sprite.hit{animation:bt-hit 0.34s}
#bt-enemy-sprite.defeated{animation:bt-defeat 0.9s forwards}
@keyframes bt-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes bt-hit{0%,100%{transform:translateX(0)}20%{transform:translateX(-12px);filter:brightness(2.2) drop-shadow(0 8px 14px rgba(0,0,0,0.35))}40%{transform:translateX(10px);filter:brightness(1.9)}60%{transform:translateX(-8px);filter:brightness(1.4)}80%{transform:translateX(6px)}}
@keyframes bt-defeat{to{transform:scale(0.4) rotate(-18deg);opacity:0;filter:blur(8px)}}
@keyframes bt-pulse{50%{filter:brightness(1.3)}}
.bt-dmg{position:absolute;transform:translateX(-50%);font-size:30px;font-weight:800;color:#ffd0c8;text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,0 0 14px rgba(255,120,120,0.6);pointer-events:none;z-index:60;animation:bt-dmgpop 1.2s ease-out forwards}
.bt-dmg.heal{color:#a3e6b4;text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,0 0 14px rgba(120,255,150,0.6)}
@keyframes bt-dmgpop{0%{transform:translate(-50%,0) scale(0.5);opacity:0}20%{transform:translate(-50%,-10px) scale(1.4);opacity:1}40%{transform:translate(-50%,-20px) scale(1)}100%{transform:translate(-50%,-86px) scale(0.9);opacity:0}}
#bt-log{flex:0 0 auto;text-align:center;color:#fff;font-size:13px;font-weight:600;background:rgba(40,28,38,0.6);border-radius:14px;padding:9px 12px;margin:8px 0;min-height:18px}
#bt-player{flex:0 0 auto;margin-bottom:16px}
#bt-actions{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:9px}
.bt-action{border:0;border-radius:16px;padding:14px;font-size:15px;font-weight:800;color:#6b4255;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.2);cursor:pointer}
.bt-action.primary{color:#fff;background:linear-gradient(90deg,#e0457b,#7c3fd0)}
.bt-action.retreat{color:#8b2f52;background:#fbe0ea;border:1.5px solid #e0457b}
.bt-action:disabled{opacity:0.5;cursor:default}
/* Battle hub (full-screen start page, cream/berry) */
#battle-hub{position:absolute;inset:0;z-index:50;display:none;overflow:hidden;background:linear-gradient(180deg,#fffdf4,#ffe9b8)}
#battle-hub .hub-scroll{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px))}
#battle-hub #hub-header{font-size:22px;font-weight:800;color:#6b4255;margin:2px 0 14px;padding-right:44px}
#hub-tabs{display:flex;gap:8px;margin:0 0 16px}
.hub-tab{flex:1;padding:10px;border:0;border-radius:14px;background:rgba(137,95,116,0.1);color:#8b6f7d;font-size:15px;font-weight:800;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hub-tab-on{background:linear-gradient(90deg,#e0457b,#c23d8f);color:#fff}
.kf-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.kf-title{font-size:16px;font-weight:800;color:#6b4255}
.kf-refresh{border:0;border-radius:11px;padding:7px 16px;font-size:13px;font-weight:700;color:#8b6f7d;background:rgba(137,95,116,0.1);cursor:pointer;-webkit-tap-highlight-color:transparent}
.kf-list{display:flex;flex-direction:column;gap:8px}
.kf-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px;padding:10px 13px;border-radius:12px;font-size:14px;line-height:1.4;color:#5a4250;background:#fff;border-left:3px solid transparent;box-shadow:0 2px 8px rgba(137,95,116,0.1)}
.kf-who{font-weight:800;color:#6b4255}
.kf-act{color:#9a8290}
.kf-enemy{font-weight:700}
.kf-elite{border-left-color:#2ea862;background:rgba(46,168,98,0.1)}
.kf-elite .kf-enemy{color:#1f8d4e}
.kf-boss{border-left-color:#f08a18;background:rgba(240,138,24,0.12)}
.kf-boss .kf-enemy{color:#d4760c}
.kf-empty{padding:30px 12px;text-align:center;color:#9a8290;font-size:14px}
.hub-hero{position:relative;border-radius:22px;overflow:hidden;padding:30px 18px 22px;margin-bottom:16px;background:url("../assets/battle/forest-bg.jpg") center/cover;box-shadow:0 10px 26px rgba(137,95,116,0.28);text-align:center}
.hub-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,20,28,0.32),rgba(28,20,28,0.64))}
.hub-hero>*{position:relative}
.hub-hero-kicker{color:#ffe1a8;font-size:11px;font-weight:800;letter-spacing:3px}
.hub-hero-title{color:#fff;font-size:26px;font-weight:800;margin:6px 0 5px;text-shadow:0 2px 8px rgba(0,0,0,0.45)}
.hub-hero-sub{color:#f0e6dd;font-size:13px;margin-bottom:16px;text-shadow:0 1px 3px rgba(0,0,0,0.4)}
.hub-enter{border:0;border-radius:999px;padding:13px 32px;font-size:16px;font-weight:800;color:#fff;background:linear-gradient(90deg,#e0457b,#7c3fd0);box-shadow:0 8px 18px rgba(124,63,208,0.45);cursor:pointer}
.hub-section{background:#fffef9;border:2px solid #fff;border-radius:20px;padding:14px;margin-bottom:14px;box-shadow:0 6px 16px rgba(137,95,116,0.14)}
.hub-sec-head{display:flex;justify-content:space-between;align-items:center}
.hub-sec-title{font-size:17px;font-weight:800;color:#6b4255}
.hub-sec-badge{font-size:11px;font-weight:700;color:#8b2f52;background:#fbe0ea;border:1px solid #e0457b;border-radius:999px;padding:3px 10px}
.hub-sec-sub{font-size:12px;color:#a98ba0;margin:2px 0 12px}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hub-card{text-align:center}
.hub-card-img{position:relative;background:linear-gradient(165deg,#fffdf4,#ffe9b8);border:1.5px solid #f0d9b0;border-radius:16px;padding:10px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.hub-card-img img{max-width:100%;max-height:100%;object-fit:contain}
.hub-card-badge{position:absolute;right:5px;bottom:5px;background:rgba(40,28,38,0.82);color:#fff;font-size:11px;font-weight:700;border-radius:8px;padding:1px 6px}
.hub-card-name{font-size:13px;font-weight:800;color:#6b4255;margin-top:6px;line-height:1.2}
.hub-card-tag{font-size:10px;font-weight:700;color:#a98ba0;letter-spacing:1px}
.hub-card-uses{font-size:11px;font-weight:700;color:#c08a2e}
.hub-empty{font-size:13px;color:#a98ba0;padding:6px 2px}

/* ── Market (PRD §6.4, §7) ── */
#market-page{position:absolute;left:0;right:0;bottom:0;z-index:50;background:linear-gradient(180deg,#fffdf4,#ffe9b8);border-radius:18px 18px 0 0;box-shadow:0 -10px 30px rgba(137,95,116,0.28);transform:translateY(calc(100% + 80px + env(safe-area-inset-bottom,0px)));transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);max-height:85dvh;overflow-y:auto;-webkit-overflow-scrolling:touch}
#market-page.open{transform:translateY(0)}
.mk-sheet-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:8px 0 6px;background:#fffdf4;border-radius:18px 18px 0 0}
.mk-grab{width:40px;height:4px;border-radius:2px;background:rgba(137,95,116,0.28)}
.mk-sheet-head .modal-x{position:absolute;top:16px;right:12px}
#market-page .mk-scroll{padding:0 16px calc(20px + env(safe-area-inset-bottom,0px))}
#mk-header{font-size:22px;font-weight:800;color:#6b4255;margin:2px 0 14px}
#mk-grid{display:flex;flex-direction:column;gap:9px}
.mk-shop-btn{border:0;border-radius:14px;padding:14px;font-size:15px;font-weight:700;color:#fff;background:linear-gradient(90deg,#e0457b,#7c3fd0);box-shadow:inset 0 1px 0 rgba(255,255,255,0.22);cursor:pointer;text-align:center}
.mk-shop-btn:active{transform:scale(0.98)}
.mk-back{border:1.5px solid #e0457b;background:#fbe0ea;color:#8b2f52;font-weight:800;font-size:14px;border-radius:999px;padding:8px 16px;cursor:pointer;margin-bottom:14px}
#mk-shop-title{font-size:20px;font-weight:800;color:#6b4255;margin-bottom:12px}
.mk-soon{color:#8b4e65;font-size:14px;background:#fffdf4;border-radius:16px;padding:18px;text-align:center}
.mk-forge-row{display:flex;gap:12px;align-items:center;background:linear-gradient(165deg,#fffdf4,#ffe9b8);border:1px solid #fff;border-radius:18px;padding:12px;margin-bottom:10px;box-shadow:0 4px 12px rgba(137,95,116,0.16)}
.mk-forge-icon{width:54px;height:54px;object-fit:contain;flex:0 0 auto}
.mk-forge-info{flex:1 1 auto;min-width:0}
.mk-forge-name{font-weight:800;color:#6b4255;font-size:15px;display:flex;align-items:center;gap:6px}
.mk-rar{font-size:10px;font-weight:700;padding:1px 7px;border-radius:999px}
.mk-rar.common{background:#e7d8e0;color:#8b4e65}
.mk-rar.rare{background:linear-gradient(90deg,#e0457b,#7c3fd0);color:#fff}
.mk-forge-meta{font-size:12px;color:#8b4e65;margin-top:2px}
.mk-forge-recipe{margin-top:5px;display:flex;flex-wrap:wrap;gap:5px}
.mk-ing{font-size:11px;font-weight:700;color:#6b4255;background:#fff;border-radius:999px;padding:2px 8px}
.mk-ing.short{background:#ffe0e0;color:#c0392b}
.mk-forge-btn{flex:0 0 auto;border:0;border-radius:14px;padding:10px 16px;font-size:14px;font-weight:800;color:#fff;background:linear-gradient(90deg,#e0457b,#7c3fd0);cursor:pointer;align-self:center}
.mk-forge-btn:disabled{opacity:0.45;cursor:default;background:#c9b8c2}

.mk-pawn-tabs{display:flex;gap:8px;margin-bottom:10px}
.mk-pawn-tab{flex:1;border:1.5px solid #e0457b;background:#fff;color:#8b2f52;font-weight:800;font-size:14px;border-radius:999px;padding:9px;cursor:pointer}
.mk-pawn-tab.on{background:linear-gradient(90deg,#e0457b,#7c3fd0);color:#fff;border-color:transparent}
.mk-coin-bar{font-size:13px;font-weight:800;color:#6b4255;margin-bottom:12px}

/* ── Battle Phase 2: entry button, weapon strip, item picker ── */
.hub-enter-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.hub-enter{padding:12px 18px;font-size:15px}
.bt-picker{position:absolute;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;background:linear-gradient(165deg,#fffdf4,#ffe9b8);border:1px solid #fff;border-radius:18px;padding:12px;box-shadow:0 12px 30px rgba(0,0,0,0.4)}
.bt-pick-head{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:800;color:#6b4255;margin-bottom:10px}
.bt-pick-x{width:30px;height:30px;border:1.5px solid #e0457b;border-radius:50%;background:#fbe0ea;color:#8b2f52;font-size:14px;cursor:pointer}
.bt-pick-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:#fff;border-radius:14px;padding:10px 12px;margin-bottom:8px;cursor:pointer}
.bt-pick-item:last-child{margin-bottom:0}
.bt-pick-item img{width:40px;height:40px;object-fit:contain;flex:0 0 auto}
.bt-pick-text{display:flex;flex-direction:column}
.bt-pick-name{font-size:14px;font-weight:800;color:#6b4255}
.bt-pick-eff{font-size:10px;font-weight:800;color:#3a2a00;background:#ffd76a;border-radius:999px;padding:1px 7px;margin-left:4px;vertical-align:middle}
.bt-pick-sub{font-size:12px;color:#8b4e65}
/* Bonds (羁绊) relationship sheet — same bottom-sheet pattern as #market-page */
#bonds-page, #lb-page, #pg-page, #settings-page, #guide-page, #frame-page{position:absolute;left:0;right:0;bottom:0;z-index:50;background:linear-gradient(180deg,#fffdf4,#ffe9b8);border-radius:18px 18px 0 0;box-shadow:0 -10px 30px rgba(137,95,116,0.28);transform:translateY(calc(100% + 80px + env(safe-area-inset-bottom,0px)));transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);max-height:85dvh;overflow-y:auto;-webkit-overflow-scrolling:touch}
#bonds-page.open, #lb-page.open, #pg-page.open, #settings-page.open, #guide-page.open, #frame-page.open{transform:translateY(0)}
#bonds-page .bd-scroll, #lb-page .bd-scroll, #pg-page .bd-scroll, #settings-page .bd-scroll, #guide-page .bd-scroll, #frame-page .bd-scroll{padding:0 16px calc(20px + env(safe-area-inset-bottom,0px))}
#frame-page .frame-wrap{text-align:center;padding:8px 0 16px}
.frame-preview{width:200px;height:168px;margin:8px auto 14px;border-radius:12px;border:2px solid #e6d3a8;overflow:hidden;background:#fbf3e2;display:flex;align-items:center;justify-content:center}
.frame-preview img{width:100%;height:100%;object-fit:cover}
.frame-ph{font-size:46px;opacity:0.5}
.frame-hint{font-size:12px;color:#9a8268;margin:0 0 16px;line-height:1.5}
.frame-btns{display:flex;gap:10px;justify-content:center}
.frame-up{border:0;border-radius:14px;padding:11px 26px;font-size:14px;font-weight:800;color:#fff;background:linear-gradient(90deg,#e0457b,#c23d8f);cursor:pointer;-webkit-tap-highlight-color:transparent}
.frame-rm{border:1px solid #d8c49a;border-radius:14px;padding:11px 24px;font-size:14px;font-weight:700;color:#9a7a5a;background:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sheet-title{font-size:22px;font-weight:800;color:#6b4255;margin:2px 0 12px}

/* 年轻骑士手册 (guide) typography */
#guide-page .guide-body{font-size:14px;line-height:1.85;color:#5a3a22;padding-bottom:10px}
#guide-page .gd-intro{margin:0 0 14px}
#guide-page .gd-h{font-size:16px;font-weight:800;color:#8e1322;margin:18px 0 8px}
#guide-page .guide-body p{margin:0 0 10px}
#guide-page .gd-list{margin:0 0 10px;padding-left:20px}
#guide-page .gd-list li{margin-bottom:6px}
#guide-page .gd-note{background:rgba(189,148,54,0.12);border:1px solid rgba(189,148,54,0.4);border-radius:12px;padding:12px 14px;margin:10px 0}
#guide-page .gd-note-t{font-weight:800;color:#8e1322;margin-bottom:6px}
#guide-page .gd-note p{margin:0 0 8px}
#guide-page .gd-note p:last-child{margin-bottom:0}

/* First-launch welcome modal */
#welcome-overlay{position:absolute;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(40,18,10,0.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#welcome-overlay.show{display:flex}
.welcome-card{width:min(100%,360px);max-height:80dvh;overflow-y:auto;background:linear-gradient(165deg,#fdf6e9,#f1ddbb);border:4px solid #ddbe72;border-radius:20px;box-shadow:0 16px 40px rgba(60,25,12,0.4),inset 0 2px 0 rgba(255,248,225,0.8);padding:22px 20px}
.welcome-title{font-size:20px;font-weight:800;color:#8e1322;text-align:center;margin-bottom:12px}
.welcome-body{font-size:14px;line-height:1.85;color:#5a3a22;margin-bottom:18px}
.welcome-buttons{display:flex;flex-direction:column;gap:10px}
.welcome-btn{width:100%;padding:12px;border-radius:14px;font-size:14px;font-weight:800;cursor:pointer;border:1.5px solid #bd9436}
.welcome-btn-pri{background:linear-gradient(180deg,#c4283f,#931024);color:#fff8e6;border-color:#d8b25a}
.welcome-btn-sec{background:linear-gradient(180deg,#fdf2d6,#f0d79a);color:#8e1322}
#bd-tabs{display:flex;gap:8px;margin:4px 0 14px}
.bd-tab{flex:1;padding:10px;border:0;border-radius:14px;background:rgba(137,95,116,0.1);color:#8b6f7d;font-size:15px;font-weight:800;cursor:pointer}
.bd-tab.on{background:linear-gradient(90deg,#e0457b,#c23d8f);color:#fff}
.bd-heartbroken{background:#fbe0ea;color:#8b2f52;border-radius:12px;padding:8px 12px;font-size:13px;font-weight:700;margin-bottom:12px}
#bd-list{display:flex;flex-direction:column;gap:10px}
.bd-row{display:flex;gap:12px;background:#fff;border-radius:16px;padding:10px;box-shadow:0 3px 10px rgba(137,95,116,0.12)}
.bd-row.bonded{box-shadow:0 0 0 2px #e0457b,0 3px 12px rgba(224,69,123,0.25)}
.bd-portrait{width:72px;height:72px;border-radius:12px;object-fit:cover;flex:0 0 auto;background:#f3e8df}
.bd-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.bd-name-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bd-name{font-size:16px;font-weight:800;color:#6b4255}
.bd-role{font-size:11px;color:#a07d8e;background:#f6ecf1;border-radius:8px;padding:1px 7px}
.bd-badge{font-size:11px;font-weight:800;color:#fff;background:#e0457b;border-radius:8px;padding:1px 8px}
.bd-stage{font-size:12px;color:#8b6f7d;font-weight:700}
.bd-num{color:#b094a0;font-weight:600}
.bd-bar{height:7px;border-radius:4px;background:#efe3ea;overflow:hidden}
.bd-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#e0457b,#f29ac0);transition:width 0.3s}
.bd-bonus{font-size:11.5px;color:#8a6e3a;line-height:1.3}
.bd-act{border:0;border-radius:999px;padding:7px 16px;font-size:13px;font-weight:800;cursor:pointer;color:#fff}
.bd-confess{background:linear-gradient(90deg,#e0457b,#c23d8f)}
.bd-break{background:#b9657f}
.bd-act:active{transform:scale(0.97)}
.bd-hint{font-size:11.5px;color:#a892a0}
/* Keeper greeting banner (top of a shop view) */
.mk-keeper-card{display:flex;align-items:center;gap:12px;background:linear-gradient(165deg,#fffdf4,#ffe9b8);border:1px solid #fff;border-radius:18px;padding:10px 12px;margin-bottom:14px;box-shadow:0 4px 12px rgba(137,95,116,0.16)}
.mk-keeper-face{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:0 0 auto;background:#f3e8df}
.mk-keeper-info{flex:1 1 auto;min-width:0}
.mk-keeper-name{font-size:16px;font-weight:800;color:#6b4255}
.mk-keeper-stage{font-size:12px;color:#a07d8e;font-weight:700}
.mk-keeper-card{width:100%;text-align:left;cursor:pointer;font:inherit}
.mk-keeper-card:active{transform:scale(0.99)}
.mk-keeper-expand{margin-left:auto;flex:0 0 auto;font-size:12px;font-weight:800;color:#a07d8e}
/* Keeper chat overlay */
#kp-chat{position:absolute;inset:0;z-index:60;display:none;align-items:flex-end;justify-content:center;background:rgba(40,20,30,0.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#kp-chat.show{display:flex}
.kc-card{width:100%;max-width:520px;background:linear-gradient(180deg,#fffdf4,#ffe9b8);border-radius:22px 22px 0 0;box-shadow:0 -12px 36px rgba(0,0,0,0.3);padding:14px 16px calc(18px + env(safe-area-inset-bottom,0px));max-height:80dvh;display:flex;flex-direction:column}
.kc-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.kc-face{width:48px;height:48px;border-radius:12px;object-fit:cover;background:#f3e8df}
.kc-name{font-size:16px;font-weight:800;color:#6b4255;flex:1 1 auto}
.kc-close{border:0;background:transparent;font-size:18px;color:#a07d8e;cursor:pointer;padding:4px 8px}
.kc-dialog{min-height:54px;margin-bottom:12px}
.kc-line{font-size:15px;line-height:1.5;color:#5a4150;background:#fffdf4;border-radius:14px;padding:12px 14px;box-shadow:inset 0 0 0 1px rgba(137,95,116,0.12)}
.kc-line.kc-good{background:#fff2f7;box-shadow:inset 0 0 0 1px rgba(224,69,123,0.25)}
.kc-line.kc-bad{background:#f6ecec;color:#9c6a6a}
.kc-aff{display:inline-block;font-size:12px;font-weight:800;color:#e0457b}
.kc-cue{font-size:12px;color:#bb7799;opacity:0.85;margin-top:6px;text-align:center}
.kc-options{display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.kc-opt{border:1.5px solid #e7c9d8;background:#fff;color:#6b4255;border-radius:14px;padding:11px 14px;font-size:14px;font-weight:700;text-align:left;cursor:pointer}
.kc-opt:active{transform:scale(0.99)}
.kc-leave{border-style:dashed;color:#a07d8e;text-align:center;font-weight:600}
/* Keeper welcome (hero) + gift tray (Phase C) */
#mk-hero{position:relative;border-radius:18px;overflow:hidden;margin-bottom:14px;box-shadow:0 6px 18px rgba(137,95,116,0.2)}
.mk-hero-img{display:block;width:100%;max-height:52dvh;object-fit:cover;background:#f3e8df}
.mk-hero-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:baseline;gap:10px;padding:16px 16px 12px;background:linear-gradient(0deg,rgba(40,20,30,0.62),rgba(40,20,30,0))}
.mk-hero-name{font-size:20px;font-weight:800;color:#fff}
.mk-hero-stage{font-size:13px;font-weight:700;color:#ffd9ea}
#mk-welcome-actions{display:flex;gap:10px;margin-bottom:12px}
.mk-wact{flex:1;border:1.5px solid #e7c9d8;background:#fff;color:#6b4255;border-radius:14px;padding:12px;font-size:15px;font-weight:800;cursor:pointer}
.mk-wact:active{transform:scale(0.98)}
.mk-wact-go{border:0;color:#fff;background:linear-gradient(90deg,#e0457b,#7c3fd0)}
#mk-gift-tray{margin-bottom:8px}
.mk-gift-empty{font-size:13px;color:#8b6f7d;background:#fff;border-radius:14px;padding:14px;text-align:center}
.mk-gift-chips{display:flex;gap:10px;flex-wrap:wrap}
.mk-gift-chip{display:flex;flex-direction:column;align-items:center;gap:3px;border:1.5px solid #e7c9d8;background:#fff;border-radius:14px;padding:8px 6px;cursor:pointer;width:80px}
.mk-gift-chip img{width:44px;height:44px;object-fit:contain}
.mk-gift-chip span{font-size:12px;font-weight:700;color:#6b4255}
.mk-gift-chip em{font-size:11px;color:#a07d8e;font-style:normal}
.mk-gift-chip:active{transform:scale(0.97)}
/* Keeper interaction — inline panel under the hero (gift confirm / confession / breakup) */
#mk-interact-panel{padding:4px 4px 8px;animation:ixFade .18s ease}
@keyframes ixFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
#mk-hero.mk-hero-shy .mk-hero-img{box-shadow:0 0 0 2px #fff,0 0 26px 6px rgba(224,69,123,0.45)}
#mk-hero.mk-hero-sad .mk-hero-img{filter:saturate(0.82) brightness(0.96)}
.ix-prompt{font-size:15px;font-weight:800;color:#6b4255;text-align:center;line-height:1.5;margin:0 0 12px}
.ix-n{font-size:14px;color:#8b6f7d;line-height:1.6;margin:0 0 6px}
.ix-s{font-size:15px;color:#5a4150;line-height:1.6;margin:0 0 8px;font-weight:600}
.ix-s::before{content:'\201C'}
.ix-s::after{content:'\201D'}
.ix-you{font-size:14px;color:#b05a86;line-height:1.6;margin:0 0 10px;text-align:right;font-weight:600}
.ix-aff{font-size:13px;font-weight:800;color:#e0457b;text-align:center;margin:8px 0 0}
.ix-options{display:flex;flex-direction:column;gap:8px}
.ix-opt{border:1.5px solid #e7c9d8;background:#fff;color:#6b4255;border-radius:14px;padding:11px 14px;font-size:14px;font-weight:700;text-align:left;cursor:pointer;line-height:1.4}
.ix-opt.ix-go{border:0;color:#fff;background:linear-gradient(90deg,#e0457b,#c23d8f);text-align:center;font-weight:800}
.ix-opt:active{transform:scale(0.99)}
.mk-wact-love{border:0;color:#fff;background:linear-gradient(90deg,#d6336c,#a01f5b)}
.mk-wact-back{border-style:dashed;color:#a07d8e;font-weight:700}
/* Shop-entry keeper greeting (under the hero) */
#mk-greet{margin:0 auto 14px;padding:9px 16px;max-width:92%;text-align:center;font-size:14px;font-weight:600;color:#6b4255;background:rgba(255,255,255,0.62);border-radius:16px;line-height:1.55}
#mk-greet::before{content:'\201C'}
#mk-greet::after{content:'\201D'}
/* Inline note by the action buttons (so it isn't missed at the top) */
#mk-welcome-msg{width:fit-content;max-width:90%;margin:0 auto;background:rgba(40,30,40,0.9);color:#fff;font-size:13px;font-weight:600;border-radius:18px;padding:0 16px;line-height:0;opacity:0;overflow:hidden;transition:opacity .25s,line-height .25s,padding .25s,margin-bottom .25s}
#mk-welcome-msg.show{padding:9px 16px;line-height:1.45;opacity:1;margin-bottom:10px}
/* Active-bond perk banner at the top of a shop service view */
.mk-bond-perk{display:flex;align-items:center;gap:6px;margin:0 0 10px;padding:8px 12px;border-radius:12px;background:rgba(224,69,123,0.12);color:#c23d8f;font-size:12.5px;font-weight:700;line-height:1.4}
/* 我 page: inventory + leaderboard sections */
/* 伴侣 corner badge on the bonded keeper's shop hero */
.mk-hero-couple{position:absolute;top:10px;right:10px;z-index:2;background:linear-gradient(90deg,#e0457b,#c23d8f);color:#fff;font-size:12px;font-weight:800;letter-spacing:1px;padding:5px 12px;border-radius:14px;box-shadow:0 3px 10px rgba(224,69,123,0.4)}
/* 委托 banner (keeper side-quest), overlaid on the hero top-left; turns tappable when ready */
.mk-quest-banner{position:absolute;top:10px;left:10px;z-index:2;max-width:74%;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 11px;border:0;border-radius:13px;font-size:12px;font-weight:700;line-height:1.3;text-align:left;color:#ffe9c8;background:linear-gradient(180deg,rgba(46,26,34,0.82),rgba(46,26,34,0.66));box-shadow:0 3px 10px rgba(0,0,0,0.28)}
.mk-quest-prog{color:#ffd9ea;font-weight:800}
button.mk-quest-banner{cursor:pointer;-webkit-tap-highlight-color:transparent}
.mk-quest-ready{background:linear-gradient(180deg,rgba(224,69,123,0.92),rgba(194,61,143,0.86));color:#fff;animation:mkQuestPulse 1.6s ease-in-out infinite}
.mk-quest-cta{margin-left:2px;padding:2px 9px;border-radius:10px;background:rgba(255,255,255,0.22);font-weight:800}
@keyframes mkQuestPulse{0%,100%{box-shadow:0 3px 10px rgba(224,69,123,0.4)}50%{box-shadow:0 3px 16px 2px rgba(224,69,123,0.7)}}
/* 王子任务 — daily prince quests */
.pt-list{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.pt-loading{padding:24px;text-align:center;color:#8b6f7d;font-size:13px;font-weight:600}
.pt-item{background:rgba(137,95,116,0.06);border-radius:14px;padding:12px 14px}
.pt-item.claimed{opacity:0.55}
.pt-top{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.pt-diff{font-size:11px;font-weight:800;padding:2px 9px;border-radius:8px;color:#fff;flex-shrink:0}
.pt-diff-easy{background:#4caa6e}
.pt-diff-medium{background:#d99a2b}
.pt-diff-hard{background:#c4283f}
.pt-desc{font-size:14px;font-weight:700;color:#5a3a48}
.pt-mid{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.pt-bar{flex:1;height:8px;border-radius:6px;background:rgba(137,95,116,0.15);overflow:hidden}
.pt-bar-fill{height:100%;background:linear-gradient(90deg,#e0457b,#c23d8f);border-radius:6px;transition:width .3s}
.pt-count{font-size:12px;font-weight:700;color:#8b6f7d;flex-shrink:0;min-width:36px;text-align:right}
.pt-bot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pt-reward{font-size:12px;font-weight:700;color:#c79a3c}
.pt-claim{border:0;border-radius:12px;padding:7px 18px;background:linear-gradient(90deg,#e0457b,#c23d8f);color:#fff;font-size:13px;font-weight:800;cursor:pointer}
.pt-claim:disabled{background:rgba(137,95,116,0.18);color:#a890a0;cursor:default}
.pt-bonus{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding:10px 14px;border-radius:12px;background:rgba(199,154,60,0.12);font-size:12px;font-weight:700;color:#9a7a3a}
.pt-bonus-reward{color:#c79a3c}
.pt-bonus-state{margin-left:auto;color:#4caa6e;font-weight:800}
/* coin balance on the 我 → 库存 tab */
.bd-coins{display:inline-flex;align-items:center;gap:7px;margin:0 0 14px;padding:7px 14px;border-radius:14px;background:rgba(199,154,60,0.14);font-size:15px;font-weight:800;color:#9a7a3a}
.bd-coins-icon{width:20px;height:20px;object-fit:contain}
/* 我 page — profile / rename strip (above the tabs) */
#bd-profile{margin:0 0 12px}
#bd-pf-view{display:flex;align-items:center;gap:10px;background:rgba(199,154,60,0.14);border-radius:14px;padding:9px 14px}
.bd-pf-label{font-size:13px;font-weight:700;color:#9a7a3a}
.bd-pf-name{flex:1;min-width:0;font-size:16px;font-weight:800;color:#8b4e65;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-pf-edit{border:0;border-radius:12px;padding:7px 14px;background:linear-gradient(90deg,#e0457b,#c23d8f);color:#fff;font-size:13px;font-weight:800;cursor:pointer}
#bd-pf-edit-row{display:flex;align-items:center;gap:8px}
.bd-pf-input{flex:1;min-width:0;border:1.5px solid #e0457b;border-radius:12px;padding:8px 12px;font-size:15px;font-weight:700;color:#6b4255;background:#fff;outline:none}
.bd-pf-ok{border:0;border-radius:12px;padding:8px 14px;background:linear-gradient(90deg,#e0457b,#c23d8f);color:#fff;font-size:14px;font-weight:800;cursor:pointer}
.bd-pf-ok:disabled{opacity:.55}
.bd-pf-cancel{border:1.5px solid #e0457b;border-radius:12px;padding:7px 12px;background:#fbe0ea;color:#8b2f52;font-size:14px;font-weight:800;cursor:pointer}
/* 榜单 — two boards (等级榜 / 讨伐榜) */
#lb-tabs{display:flex;gap:8px;margin:4px 0 12px}
.lb-note{font-size:11px;color:#a98ba0;font-weight:600;margin:0 2px 10px}
.lb-list{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.lb-msg{padding:28px 12px;text-align:center;color:#8b6f7d;font-size:13px;font-weight:600}
.lb-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;background:rgba(137,95,116,0.06)}
.lb-rank{flex-shrink:0;width:30px;text-align:center;font-size:15px;font-weight:800;color:#8b6f7d}
.lb-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lb-name{font-size:14px;font-weight:700;color:#5a3a48;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-bond{font-size:11px;font-weight:600;color:#a98ba0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-value{flex-shrink:0;font-size:13px;font-weight:800;color:#c79a3c}
.lb-top{background:rgba(199,154,60,0.1)}
.lb-top-1 .lb-rank{color:#e0a92b}
.lb-top-2 .lb-rank{color:#9aa5b1}
.lb-top-3 .lb-rank{color:#c97f3a}
/* 关卡进度 — level-progress / evolution ladder */
#pg-head{margin:0 0 16px;padding:12px 14px;border-radius:14px;background:rgba(199,154,60,0.14)}
.pg-cur{font-size:16px;font-weight:700;color:#8b4e65}
.pg-cur b{font-weight:800;color:#8b2f52}
.pg-xp{font-size:12px;font-weight:600;color:#a98ba0;margin:6px 0 8px}
.pg-bar-bg{height:12px;border-radius:8px;background:rgba(137,95,116,0.16);overflow:hidden}
.pg-bar-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,#e0457b,#c23d8f)}
.pg-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid rgba(137,95,116,0.1)}
.pg-row:last-child{border-bottom:0}
.pg-row.soon{opacity:.4}
.pg-lvl{flex-shrink:0;width:52px;font-size:13px;font-weight:800;color:#9a7a3a}
.pg-name{flex:1;min-width:0;font-size:15px;font-weight:700;color:#8b6f7d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-row.completed .pg-name,.pg-row.current .pg-name{color:#6b4255}
.pg-rowbar-bg{flex-shrink:0;width:58px;height:7px;border-radius:5px;background:rgba(137,95,116,0.16);overflow:hidden}
.pg-rowbar-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,#e0457b,#c23d8f)}
.pg-row.completed .pg-rowbar-fill{background:#7fc99a}
.pg-status{flex-shrink:0;width:72px;text-align:right;white-space:nowrap;font-size:12px;font-weight:800;color:#a98ba0}
.pg-row.completed .pg-status,.pg-row.current .pg-status{color:#4caa6e}
/* 设置 — settings sheet (sound toggle + about) */
.set-row{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-radius:14px;background:rgba(199,154,60,0.14);margin-bottom:18px}
.set-label{font-size:16px;font-weight:800;color:#8b4e65}
.set-switch{flex-shrink:0;width:50px;height:28px;border:0;border-radius:14px;background:#d8c4cf;padding:0;cursor:pointer;position:relative;transition:background .2s}
.set-switch.on{background:linear-gradient(90deg,#e0457b,#c23d8f)}
.set-knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.2);transition:left .2s}
.set-switch.on .set-knob{left:25px}
.set-section-title{font-size:15px;font-weight:800;color:#6b4255;margin:4px 0 10px}
.about-box{padding:2px}
.about-name{font-size:18px;font-weight:800;color:#8b2f52;margin-bottom:4px}
.about-line{font-size:12px;color:#a98ba0;line-height:1.7}
.about-disc{margin-top:12px;background:#fff8f0;border:1px solid #f0e0d0;border-radius:10px;padding:11px 13px}
.about-disc-title{font-size:12px;font-weight:700;color:#c08040;margin-bottom:6px}
.about-disc-text{font-size:11px;color:#8b7d6f;line-height:1.75}