@charset "UTF-8";

  .mobile-achievement-page{display:none;}
  @media(max-width:768px){
    html.mobile-achievement-active,
    body.mobile-achievement-active{
      height:auto;
      min-height:100%;
      overflow-x:hidden;
      overflow-y:auto;
      background:
        radial-gradient(circle at 18% 4%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 36%),
        linear-gradient(180deg,var(--paper),var(--bg) 56%,var(--paper));
    }
    body.mobile-achievement-active header,
    body.mobile-achievement-active .desktop-side-footer,
    body.mobile-achievement-active nav{
      display:none!important;
    }
    body.mobile-achievement-active .wrap{
      width:auto;
      max-width:100%;
      min-width:0;
      padding:0;
      overflow-x:hidden;
    }
    body.mobile-achievement-active #view-achievements.active{
      display:block!important;
      min-height:100dvh;
      padding:0;
      margin:0;
      overflow:visible;
    }
    body.mobile-achievement-active #view-achievements>.ach-center,
    body.mobile-achievement-active #view-achievements>.card{
      display:none!important;
    }
    body.mobile-achievement-active .mobile-achievement-page{
      display:grid;
      gap:10px;
      box-sizing:border-box;
      width:100%;
      max-width:430px;
      min-height:100dvh;
      margin:0 auto;
      padding:10px 12px calc(22px + env(safe-area-inset-bottom));
      color:var(--ink);
      overflow-x:hidden;
    }
    .mobile-ach-topbar{
      display:grid;
      grid-template-columns:36px minmax(0,1fr) auto;
      align-items:center;
      gap:8px;
      min-height:44px;
    }
    .mobile-ach-back,
    .mobile-ach-rule,
    .mobile-ach-close{
      border:0;
      background:transparent;
      color:var(--ink);
      font-weight:850;
      cursor:pointer;
      min-height:32px;
      min-width:32px;
    }
    .mobile-ach-back{
      width:32px;
      height:32px;
      border-radius:12px;
      font-size:22px;
      line-height:1;
      display:grid;
      place-items:center;
    }
    .mobile-ach-title{
      text-align:center;
      font-size:19px;
      line-height:1.1;
      font-weight:950;
      letter-spacing:0;
    }
    .mobile-ach-rule{
      padding:0 2px;
      font-size:12px;
      color:var(--ink-soft);
      white-space:nowrap;
    }
    .mobile-ach-overview-card,
    .mobile-ach-section,
    .mobile-ach-shop{
      border:1px solid color-mix(in srgb,var(--line) 84%,transparent);
      background:color-mix(in srgb,var(--card) 92%,transparent);
      border-radius:18px;
      box-shadow:0 10px 26px rgba(42,37,32,.07);
      overflow:hidden;
    }
    .mobile-ach-overview{
      width:100%;
      box-sizing:border-box;
      display:grid;
      grid-template-columns:56px minmax(0,1fr) 64px;
      grid-template-areas:
        "badge summary ring"
        "stats stats stats";
      gap:9px 10px;
      align-items:center;
      padding:12px 12px 0;
    }
    .mobile-ach-trophy{
      grid-area:badge;
      width:54px;
      height:54px;
      border-radius:18px;
      display:grid;
      place-items:center;
      border:1px solid color-mix(in srgb,var(--amber) 28%,var(--line));
      background:linear-gradient(145deg,color-mix(in srgb,var(--amber) 22%,var(--card)),color-mix(in srgb,var(--accent) 12%,var(--card)));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 8px 18px color-mix(in srgb,var(--amber) 12%,transparent);
      color:var(--amber);
      font-size:28px;
      line-height:1;
    }
    .mobile-ach-trophy .achievement-medal,
    .mobile-ach-trophy-medal{
      width:44px;
      height:44px;
      min-width:44px;
      border-radius:15px;
      box-shadow:none;
    }
    .mobile-ach-trophy .achievement-medal-core{font-size:22px;}
    .mobile-ach-overview-main{
      grid-area:summary;
      min-width:0;
      width:100%;
      text-align:left;
      writing-mode:horizontal-tb!important;
      text-orientation:mixed!important;
      white-space:normal;
    }
    .mobile-ach-overview-main span,
    .mobile-ach-ring-label,
    .mobile-ach-stat span{
      display:block;
      color:var(--ink-soft);
      font-size:11px;
      line-height:1.35;
      font-weight:720;
    }
    .mobile-ach-overview-main span{
      width:100%;
      max-width:100%;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .mobile-ach-overview-main strong{
      display:flex;
      align-items:baseline;
      gap:4px;
      min-width:0;
      margin:2px 0 1px;
      color:var(--accent);
      font-family:var(--serif);
      font-size:34px;
      line-height:1;
      font-weight:950;
      letter-spacing:0;
      white-space:nowrap;
    }
    .mobile-ach-overview-main em{
      display:inline-block;
      font-style:normal;
      color:var(--ink-soft);
      font-family:var(--sans);
      font-size:18px;
      font-weight:760;
    }
    .mobile-ach-ring-wrap{
      grid-area:ring;
      justify-self:end;
      width:64px;
      min-width:0;
      display:grid;
      align-items:center;
      justify-items:center;
      gap:3px;
      padding:0;
      border:0;
      border-radius:0;
      background:transparent;
      text-align:center;
      box-sizing:border-box;
    }
    .mobile-ach-ring{
      width:52px;
      height:52px;
      border-radius:50%;
      display:grid;
      place-items:center;
      margin:0;
      position:relative;
      background:conic-gradient(var(--accent) 0 var(--mobile-ach-rate,0%),color-mix(in srgb,var(--line) 70%,transparent) var(--mobile-ach-rate,0%) 100%);
    }
    .mobile-ach-ring:after{
      content:"";
      position:absolute;
      inset:5px;
      border-radius:50%;
      background:var(--card);
      box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 40%,transparent);
    }
    .mobile-ach-ring b{
      position:relative;
      z-index:1;
      font-size:13px;
      line-height:1;
      font-weight:950;
      color:var(--ink);
    }
    .mobile-ach-ring-label{
      width:100%;
      text-align:center;
      margin-top:0;
      white-space:nowrap;
      font-size:9.5px;
    }
    .mobile-ach-stats{
      grid-area:stats;
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      border-top:1px solid var(--line);
      margin:2px -12px 0;
    }
    .mobile-ach-stat{
      display:grid;
      justify-items:center;
      gap:2px;
      padding:9px 2px 10px;
      border-right:1px solid var(--line);
      text-align:center;
      min-width:0;
    }
    .mobile-ach-stat:last-child{border-right:0;}
    .mobile-ach-stat i{
      display:grid;
      place-items:center;
      width:22px;
      height:22px;
      border-radius:9px;
      background:color-mix(in srgb,var(--accent-soft) 74%,var(--card));
      color:var(--accent);
      font-style:normal;
      font-size:13px;
      line-height:1;
    }
    .mobile-ach-stat b{
      color:var(--ink);
      font-size:17px;
      line-height:1.1;
      font-weight:950;
      letter-spacing:0;
    }
    .mobile-ach-stat span{
      max-width:100%;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      word-break:keep-all;
    }
    .mobile-ach-cats{
      display:flex;
      gap:6px;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      padding:2px 1px 1px;
      scrollbar-width:none;
    }
    .mobile-ach-cats::-webkit-scrollbar{display:none;}
    .mobile-ach-cat{
      flex:0 0 auto;
      min-width:72px;
      min-height:34px;
      padding:8px 12px;
      border:1px solid var(--line);
      border-radius:13px;
      background:color-mix(in srgb,var(--card) 92%,transparent);
      color:var(--ink-soft);
      font-size:12px;
      line-height:1;
      font-weight:820;
      white-space:nowrap;
    }
    .mobile-ach-cat.active{
      color:var(--accent);
      border-color:color-mix(in srgb,var(--accent) 34%,var(--line));
      background:color-mix(in srgb,var(--accent-soft) 72%,var(--card));
      box-shadow:inset 0 -2px 0 var(--accent);
    }
    .mobile-ach-section{
      display:grid;
      gap:10px;
      padding:13px 12px;
    }
    .mobile-ach-section-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
    }
    .mobile-ach-section h3{
      margin:0;
      color:var(--ink);
      font-size:15px;
      line-height:1.15;
      font-weight:940;
    }
    .mobile-ach-section-head button{
      border:0;
      background:transparent;
      color:var(--ink-soft);
      font-size:11px;
      font-weight:780;
      padding:3px 0;
      white-space:nowrap;
    }
    .mobile-ach-recent-grid,
    .mobile-ach-earned-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:7px;
      min-width:0;
    }
    .mobile-ach-mini{
      border:0;
      background:transparent;
      padding:0;
      display:grid;
      justify-items:center;
      gap:4px;
      min-width:0;
      color:var(--ink);
      cursor:pointer;
      text-align:center;
    }
    .mobile-ach-badge{
      position:relative;
      width:54px;
      height:54px;
      display:grid;
      place-items:center;
      margin-bottom:1px;
    }
    .mobile-ach-badge .achievement-medal{
      width:54px;
      height:54px;
      min-width:54px;
      font-size:25px;
    }
    .mobile-ach-badge .achievement-medal-core{font-size:24px;}
    .mobile-ach-new{
      position:absolute;
      right:-3px;
      top:-4px;
      display:grid;
      place-items:center;
      width:19px;
      height:19px;
      border-radius:50%;
      background:var(--accent);
      color:var(--on-accent);
      font-size:9px;
      font-weight:900;
      box-shadow:0 4px 10px rgba(0,0,0,.1);
    }
    .mobile-ach-mini b{
      display:block;
      max-width:100%;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      font-size:11px;
      line-height:1.15;
      font-weight:900;
    }
    .mobile-ach-mini span{
      display:block;
      max-width:100%;
      min-height:24px;
      color:var(--ink-soft);
      overflow:hidden;
      font-size:9.5px;
      line-height:1.25;
      font-weight:650;
    }
    .mobile-ach-mini time{
      color:color-mix(in srgb,var(--ink-soft) 72%,transparent);
      font-size:9px;
      line-height:1;
      font-weight:680;
    }
    .mobile-ach-progress-list{
      display:grid;
      gap:9px;
    }
    .mobile-ach-progress-row{
      width:100%;
      display:grid;
      grid-template-columns:38px minmax(0,1fr) auto 14px;
      gap:9px;
      align-items:center;
      border:0;
      background:transparent;
      padding:0;
      color:var(--ink);
      text-align:left;
      cursor:pointer;
    }
    .mobile-ach-progress-icon{
      width:38px;
      height:38px;
      border-radius:15px;
      display:grid;
      place-items:center;
      background:color-mix(in srgb,var(--accent-soft) 72%,var(--card));
      overflow:hidden;
    }
    .mobile-ach-progress-icon .achievement-medal{
      width:38px;
      height:38px;
      min-width:38px;
      font-size:18px;
      box-shadow:none;
    }
    .mobile-ach-progress-main{
      min-width:0;
      display:grid;
      gap:4px;
    }
    .mobile-ach-progress-title{
      display:flex;
      align-items:baseline;
      gap:6px;
      min-width:0;
    }
    .mobile-ach-progress-title b{
      font-size:12.5px;
      line-height:1.2;
      font-weight:930;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .mobile-ach-progress-title span{
      margin-left:auto;
      flex:0 0 auto;
      color:var(--accent);
      font-size:11px;
      font-weight:850;
      white-space:nowrap;
    }
    .mobile-ach-progress-main small{
      color:var(--ink-soft);
      font-size:10px;
      line-height:1.18;
      font-weight:650;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .mobile-ach-bar{
      height:5px;
      border-radius:999px;
      background:color-mix(in srgb,var(--line) 74%,transparent);
      overflow:hidden;
    }
    .mobile-ach-bar i{
      display:block;
      width:var(--mobile-ach-progress,0%);
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 68%,var(--amber)));
    }
    .mobile-ach-reward{
      display:flex;
      align-items:center;
      gap:3px;
      color:var(--amber);
      font-size:11px;
      font-weight:880;
      white-space:nowrap;
    }
    .mobile-ach-progress-row:after{
      content:"›";
      color:var(--ink-soft);
      font-size:21px;
      line-height:1;
    }
    .mobile-ach-shop{
      width:100%;
      display:grid;
      grid-template-columns:52px minmax(0,1fr) 18px;
      align-items:center;
      gap:10px;
      padding:12px;
      text-align:left;
      cursor:pointer;
      color:var(--ink);
    }
    .mobile-ach-shop-icon{
      width:48px;
      height:48px;
      border-radius:16px;
      display:grid;
      place-items:center;
      background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 20%,var(--card)),color-mix(in srgb,var(--accent-soft) 88%,var(--card)));
      color:var(--accent);
      font-size:24px;
    }
    .mobile-ach-shop b{
      display:block;
      font-size:14px;
      line-height:1.2;
      font-weight:930;
      color:var(--accent);
    }
    .mobile-ach-shop span{
      display:block;
      margin-top:2px;
      font-size:11px;
      line-height:1.2;
      color:var(--ink-soft);
      font-weight:700;
    }
    .mobile-ach-shop:after{
      content:"›";
      color:var(--ink-soft);
      font-size:24px;
      line-height:1;
    }
    .mobile-ach-empty{
      padding:12px;
      border:1px dashed var(--line);
      border-radius:14px;
      color:var(--ink-soft);
      background:color-mix(in srgb,var(--accent-soft) 38%,transparent);
      font-size:11px;
      line-height:1.5;
      font-weight:720;
      text-align:center;
    }
    .mobile-ach-modal{
      position:fixed;
      inset:0;
      height:100vh;
      height:100dvh;
      z-index:12060;
      display:none;
      padding:max(18px,env(safe-area-inset-top)) 12px max(18px,env(safe-area-inset-bottom));
      background:rgba(28,24,20,.44);
      backdrop-filter:blur(8px);
      align-items:center;
      justify-content:center;
    }
    .mobile-ach-modal.is-open{display:flex;}
    .mobile-ach-modal-panel{
      width:100%;
      max-width:430px;
      max-height:calc(100dvh - 36px);
      margin:0 auto;
      display:flex;
      flex-direction:column;
      border:1px solid var(--line);
      border-radius:22px;
      background:var(--card);
      box-shadow:0 24px 54px rgba(0,0,0,.22);
      overflow:hidden;
    }
    .mobile-ach-modal-body{overflow-y:auto;-webkit-overflow-scrolling:touch;}
    .mobile-ach-list{display:flex;flex-direction:column;gap:10px;}
    .mobile-ach-list-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center;padding:10px 12px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:14px;background:color-mix(in srgb,var(--card) 60%,transparent);}
    .mobile-ach-list-row.locked{opacity:.62;}
    .mobile-ach-list-medal{width:42px;height:42px;}
    .mobile-ach-list-copy{min-width:0;display:flex;flex-direction:column;gap:3px;}
    .mobile-ach-list-copy b{font-size:14px;color:var(--ink);}
    .mobile-ach-list-copy small{font-size:11px;color:var(--ink-soft);line-height:1.4;}
    .mobile-ach-list-state{font-size:11px;font-weight:900;color:var(--accent);white-space:nowrap;}
    .mobile-shop-balance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px;}
    .mobile-shop-balance>div{background:color-mix(in srgb,var(--accent) 12%,var(--card));border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:14px;padding:11px 8px;text-align:center;}
    .mobile-shop-balance span{display:block;font-size:11px;color:var(--ink-soft);margin-bottom:4px;}
    .mobile-shop-balance b{font-size:20px;color:var(--ws-accent-ink,var(--accent));font-family:var(--serif);}
    .mobile-shop-list{display:flex;flex-direction:column;gap:10px;}
    /* V6.9.0 全站 UI 验收：经典手机版（旧版界面）商城弹窗里「成就积分 / 卷轴币 / 铜板」三格与主题列表整块不见。
       根因：ui-polish-apple.css 给所有 [class*="mobile"] 加了 overflow-x:hidden，这两块就成了滚动容器；
       弹窗主体 .mobile-ach-modal-body 是 display:grid + max-height，网格行按内容自动分高时滚动容器的最小高度按 0 算，
       内容一多这两行就被压成 0 高（成就中心的 .mobile-ach-list 同理）。直接子块本来就不需要自己滚（主体在滚），恢复 overflow:visible。 */
    .mobile-ach-modal-body>.mobile-shop-balance,.mobile-ach-modal-body>.mobile-shop-list,.mobile-ach-modal-body>.mobile-ach-list{overflow:visible;}
    .mobile-shop-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:14px;background:color-mix(in srgb,var(--card) 60%,transparent);}
    .mobile-shop-item-copy b{display:block;font-size:14px;color:var(--ink);}
    .mobile-shop-item-copy small{font-size:11px;color:var(--ink-soft);}
    .mobile-shop-buy{border:0;border-radius:999px;background:var(--solid);color:var(--solid-text);font-family:var(--cjk);font-size:12px;font-weight:850;padding:9px 14px;cursor:pointer;white-space:nowrap;}
    .mobile-shop-buy.disabled{opacity:.5;}
    .mobile-shop-owned{font-size:12px;font-weight:850;color:var(--accent);white-space:nowrap;}
    .mobile-ach-modal-head{
      display:grid;
      grid-template-columns:1fr 34px;
      gap:8px;
      align-items:center;
      padding:13px 14px;
      border-bottom:1px solid var(--line);
    }
    .mobile-ach-modal-head b{
      font-size:15px;
      line-height:1.2;
      font-weight:940;
      color:var(--ink);
    }
    .mobile-ach-close{
      border:1px solid var(--line);
      border-radius:50%;
      background:color-mix(in srgb,var(--card) 80%,var(--paper));
      color:var(--ink-soft);
      font-size:18px;
      line-height:1;
    }
    .mobile-ach-modal-body{
      padding:14px;
      display:grid;
      gap:10px;
      max-height:min(72dvh,560px);
      overflow:auto;
    }
    .mobile-ach-detail-hero{
      display:grid;
      grid-template-columns:58px minmax(0,1fr);
      gap:11px;
      align-items:center;
    }
    .mobile-ach-detail-hero .achievement-medal{
      width:58px;
      height:58px;
      min-width:58px;
      font-size:28px;
    }
    .mobile-ach-detail-hero h4{
      margin:0;
      font-size:17px;
      line-height:1.18;
      font-weight:950;
      color:var(--ink);
    }
    .mobile-ach-detail-hero p{
      margin:3px 0 0;
      color:var(--ink-soft);
      font-size:11px;
      line-height:1.35;
      font-weight:680;
    }
    .mobile-ach-detail-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:7px;
    }
    .mobile-ach-detail-pill{
      border:1px solid var(--line);
      border-radius:13px;
      background:color-mix(in srgb,var(--accent-soft) 24%,var(--card));
      padding:8px;
      min-width:0;
    }
    .mobile-ach-detail-pill span{
      display:block;
      color:var(--ink-soft);
      font-size:9.5px;
      line-height:1.2;
      font-weight:760;
    }
    .mobile-ach-detail-pill b{
      display:block;
      margin-top:3px;
      color:var(--ink);
      font-size:12px;
      line-height:1.2;
      font-weight:900;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .mobile-ach-rules{
      display:grid;
      gap:8px;
      margin:0;
      padding:0;
      list-style:none;
    }
    .mobile-ach-rules li{
      border:1px solid var(--line);
      border-radius:14px;
      padding:9px 10px;
      background:color-mix(in srgb,var(--accent-soft) 22%,var(--card));
      font-size:11px;
      line-height:1.45;
      color:var(--ink-soft);
      font-weight:700;
    }
    .mobile-ach-rules b{
      display:block;
      margin-bottom:2px;
      color:var(--ink);
      font-size:12px;
      line-height:1.25;
      font-weight:920;
    }
    @media(max-width:380px){
      body.mobile-achievement-active .mobile-achievement-page{padding-left:10px;padding-right:10px;}
      .mobile-ach-overview{grid-template-columns:52px minmax(0,1fr) 58px;gap:8px;padding:11px 10px 0;}
      .mobile-ach-trophy{width:50px;height:50px;border-radius:17px;font-size:25px;}
      .mobile-ach-trophy .achievement-medal,
      .mobile-ach-trophy-medal{width:40px;height:40px;min-width:40px;}
      .mobile-ach-trophy .achievement-medal-core{font-size:20px;}
      .mobile-ach-ring-wrap{width:58px;}
      .mobile-ach-ring{width:46px;height:46px;}
      .mobile-ach-ring b{font-size:11px;}
      .mobile-ach-ring-label{font-size:9px;}
      .mobile-ach-overview-main strong{font-size:30px;}
      .mobile-ach-overview-main em{font-size:15px;}
      .mobile-ach-stats{margin:2px -10px 0;}
      .mobile-ach-stat{padding:8px 1px 9px;}
      .mobile-ach-stat b{font-size:15px;}
      .mobile-ach-stat span{font-size:10px;}
      .mobile-ach-badge,
      .mobile-ach-badge .achievement-medal{width:48px;height:48px;min-width:48px;}
      .mobile-ach-badge .achievement-medal-core{font-size:21px;}
    }
  }