:root{
      --topbarH:64px;
      --bg1:#f7fbff;
      --bg2:#fff7fb;
      --card:#ffffffcc;
      --card2:#ffffffee;
      --text:#233047;
      --muted:#6b7a90;
      --brand:#4aa3ff;
      --brand2:#ff7eb6;
      --ok:#32c275;
      --warn:#ffb020;
      --bad:#ff5a6a;
      --shadow: 0 10px 30px rgba(16,24,40,.10);
      --shadow2: 0 8px 18px rgba(16,24,40,.08);
      --r2:24px;
      --pad:18px;
      --max: 460px;
      --tap: 52px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-size: 15px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC","Microsoft YaHei", Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(1100px 700px at 10% 10%, rgba(74,163,255,.18), transparent 55%),
        radial-gradient(900px 650px at 90% 20%, rgba(255,126,182,.16), transparent 60%),
        radial-gradient(900px 650px at 40% 95%, rgba(50,194,117,.12), transparent 60%),
        linear-gradient(180deg, var(--bg1), var(--bg2));
      overflow-x:hidden;
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
    }
    .safe{padding-top: env(safe-area-inset-top); padding-bottom: calc(env(safe-area-inset-bottom) + 14px);}
    .wrap{max-width: var(--max); margin: 0 auto; padding: 16px 18px 260px;}    /* 我的 / FomoPG 页可纵向滚动到底（移动端） */
    body[data-page="me"] .wrap,
    body[data-page="rank"] .wrap,
    body[data-page="leaderboard"] .wrap{
      max-height:none;
      min-height: calc(100dvh - var(--topbarH));
      overflow:visible;
      padding-bottom: calc(300px + env(safe-area-inset-bottom));
      -webkit-overflow-scrolling:touch;
    }
    body[data-page="me"] section[data-page="me"],
    body[data-page="rank"] section[data-page="rank"],
    body[data-page="leaderboard"] section[data-page="leaderboard"]{
      padding-bottom: 12px;
    }

    .topbar{position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px);
      background: linear-gradient(180deg, rgba(247,251,255,.85), rgba(247,251,255,.45));
      border-bottom: 1px solid rgba(233,238,247,.8);}
    .topbar-inner{max-width: var(--max); margin:0 auto; padding: 11px 12px 9px;
      display:flex; align-items:center; justify-content:space-between; gap:7px;}
    .brand{display:flex; align-items:center; gap:8px; min-width:0; flex:0 1 108px; max-width:108px;}
    .logo{width:34px;height:34px;border-radius:12px;
      background:
        radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.35) 60%, transparent 70%),
        linear-gradient(135deg, rgba(74,163,255,.95), rgba(255,126,182,.92));
      box-shadow: var(--shadow2); position:relative; overflow:hidden;}
    .logo:after{content:""; position:absolute; inset:-20px;
      background: conic-gradient(from 160deg, rgba(255,255,255,.0), rgba(255,255,255,.35), rgba(255,255,255,0));
      animation: shine 3.6s linear infinite; opacity:.55;}
    @keyframes shine{to{transform:rotate(360deg)}}
    .brand-title{line-height:1; min-width:0;}
    .brand-title b{font-size:14px; display:block; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
    .brand-title span{font-size:12px; color:var(--muted); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
    #subtitle{display:none !important;}

    .pillrow{display:flex; align-items:center; gap:5px; flex:1 1 auto; min-width:0; justify-content:flex-end; flex-wrap:nowrap;}
    .pill{height:31px; padding:0 9px; border-radius:999px; background: rgba(255,255,255,.75);
      border: 1px solid rgba(233,238,247,.9); box-shadow: 0 6px 16px rgba(16,24,40,.06);
      display:flex; align-items:center; gap:6px; font-size:12px; color: var(--text); user-select:none; white-space:nowrap;}
    .pill .coin,.pill .heart{width:9px;height:9px;border-radius:999px; display:inline-block;}
    .pill .coin{background: linear-gradient(180deg, #ffd66b, #ffb020); box-shadow: 0 0 0 3px rgba(255,176,32,.18);}
    .pill .heart{background: linear-gradient(180deg, #ff7eb6, #ff5a6a); box-shadow: 0 0 0 3px rgba(255,90,106,.16);}
    .iconbtn{width:32px;height:32px;border-radius:13px; background: rgba(255,255,255,.8);
      border: 1px solid rgba(233,238,247,.9); box-shadow: 0 6px 16px rgba(16,24,40,.06);
      display:grid; place-items:center; cursor:pointer; transition: transform .12s ease, box-shadow .12s ease; position:relative;}
    .iconbtn:active{transform:scale(.97); box-shadow: 0 4px 10px rgba(16,24,40,.06)}
    .iconbtn svg{opacity:.85}
    .iconbtn.muted{opacity:.55}
    .dot{position:absolute; right:7px; top:7px; width:7px;height:7px;border-radius:99px;
      background: linear-gradient(180deg, #ff7eb6, #ff5a6a); box-shadow: 0 0 0 3px rgba(255,90,106,.18); display:none;}
    .dot.show{display:block}
    #langMark{font-weight:900; font-size:12px; letter-spacing:.3px;}

    .topbarSoundBtn{
      height:32px; min-width:48px; padding:0 12px; border-radius:13px;
      border:1px solid rgba(233,238,247,.9); background:rgba(255,255,255,.82);
      box-shadow: 0 6px 16px rgba(16,24,40,.06); color:var(--text);
      display:inline-flex; align-items:center; justify-content:center;
      cursor:pointer; transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
      position:relative; flex:0 0 auto; white-space:nowrap;
    }
    .topbarSoundBtn:active{transform:scale(.97); box-shadow:0 4px 10px rgba(16,24,40,.06)}
    .topbarSoundBtn .musicText{
      font-size:12px; font-weight:800; letter-spacing:.3px; line-height:1;
    }
    .topbarSoundBtn.muted{opacity:.62}
    .topbarSoundBtn.muted::after{
      content:""; position:absolute; width:18px; height:2px; border-radius:99px;
      background: linear-gradient(90deg, #ff7eb6, #ff5a6a); transform: rotate(-34deg);
    }
    .noticeBtn{padding:0}
    .noticeBtn .noticeIcon{width:15px; height:15px; opacity:.88}
    .noticeBtn .dot{right:5px; top:5px; width:6px; height:6px; box-shadow: 0 0 0 2px rgba(255,90,106,.16);}


    .card{background: var(--card); border: 1px solid rgba(233,238,247,.9); box-shadow: var(--shadow);
      border-radius: var(--r2); padding: var(--pad); backdrop-filter: blur(10px);}
    .card.solid{background:var(--card2)}
    .mt{margin-top:16px}
    .grid{display:grid; gap:14px}
    .two{grid-template-columns: 1fr 1fr}
    .row{display:flex; align-items:center; justify-content:space-between; gap:10px}
    .h1{font-size:19px; margin:0; letter-spacing:.02em}
    .sub{font-size:13px; color:var(--muted); margin-top:4px; line-height:1.45}
    .tag{font-size:12px; padding:7px 10px; border-radius:999px; border: 1px solid rgba(233,238,247,.95);
      background: rgba(255,255,255,.75); display:inline-flex; align-items:center; gap:8px; white-space:nowrap;}
    .tag .spark{width:8px;height:8px;border-radius:99px; background: linear-gradient(180deg, var(--ok), #8ce7b1);
      box-shadow: 0 0 0 3px rgba(50,194,117,.15); display:inline-block;}

    .timerDock{display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-shrink:0;}
    .timerTag{height:36px; padding:0 12px; gap:6px; font-weight:700; color:var(--text);}
    .timerSoundBtn{width:36px;height:36px;border-radius:999px; background: rgba(255,255,255,.82);
      border: 1px solid rgba(233,238,247,.95); box-shadow: 0 8px 18px rgba(16,24,40,.07);
      display:grid; place-items:center; cursor:pointer; transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
      position:relative; color:var(--text); flex-shrink:0;}
    .timerSoundBtn:active{transform:scale(.97); box-shadow: 0 5px 12px rgba(16,24,40,.06)}
    .timerSoundBtn svg{opacity:.82}
    .timerSoundBtn.muted{opacity:.62}
    .timerSoundBtn.muted::after{content:""; position:absolute; width:15px; height:2px; border-radius:99px;
      background: linear-gradient(90deg, #ff7eb6, #ff5a6a); transform: rotate(-40deg);}


    .cta{margin-top: 10px; height: var(--tap); border-radius: 20px; border: 0; cursor:pointer; width:100%; position:relative; overflow:hidden;
      font-weight:700; letter-spacing:.2px; color:white;
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      box-shadow: 0 12px 28px rgba(74,163,255,.18); transition: transform .12s ease, filter .12s ease;}
    .cta:active{transform: scale(.985); filter:saturate(.95)}

    .cta.breath{background-size: 200% 200%;
      animation: ctaShift 6.5s ease-in-out infinite, ctaBreath 2.8s ease-in-out infinite;}
    .cta.breath:after{content:""; position:absolute; top:-40%; left:-60%; width:60%; height:180%;
      transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
      opacity:.35; animation: ctaShine 3.8s ease-in-out infinite; pointer-events:none;}
    .cta.secondary{background: linear-gradient(135deg, rgba(74,163,255,.92), rgba(255,126,182,.92));
      box-shadow: 0 12px 28px rgba(74,163,255,.16);} 

    @keyframes ctaShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
    @keyframes ctaBreath{0%,100%{filter:saturate(1); box-shadow:0 12px 28px rgba(74,163,255,.18)}
      50%{filter:saturate(1.05); box-shadow:0 16px 36px rgba(74,163,255,.26)}}
    @keyframes ctaShine{0%,55%{transform:translateX(0) rotate(18deg); opacity:0}
      60%{opacity:.28}
      90%{transform:translateX(260%) rotate(18deg); opacity:0}100%{opacity:0}}

    .ghost{height: var(--tap); border-radius: 20px; border: 1px solid rgba(233,238,247,.95); cursor:pointer; width:100%;
      font-weight:650; color: var(--text); background: rgba(255,255,255,.75); box-shadow: 0 10px 24px rgba(16,24,40,.08);
      transition: transform .12s ease, box-shadow .12s ease;}
    .ghost:active{transform: scale(.985); box-shadow: 0 8px 18px rgba(16,24,40,.06)}
    a.ghost.linkbtn{display:flex; align-items:center; justify-content:center; text-decoration:none; font:inherit; font-weight:650; line-height:1; letter-spacing:.2px;}
    #btnContactSupport{font-size:15px; font-weight:700; letter-spacing:.15px;}
    @media(max-width:390px){
      .topbar-inner{padding: 10px 10px 8px; gap:4px;}
      .brand{flex-basis:92px; max-width:92px;}
      .logo{width:30px; height:30px; border-radius:11px;}
      .brand-title b{font-size:12.5px;}
      .pillrow{gap:4px;}
      .pill{height:29px; padding:0 7px; font-size:11px;}
      .iconbtn{width:30px; height:30px; border-radius:12px;}
      .iconbtn svg{width:14px; height:14px;}
      .topbarSoundBtn{height:30px; min-width:44px; padding:0 10px; border-radius:12px;}
      .topbarSoundBtn .musicText{font-size:11px;}
    }

    .mini{height:40px; border-radius:16px; font-size:13px;}

    .stat{display:flex; align-items:flex-start; gap:10px;}
    .stat .badge{width:34px;height:34px;border-radius:14px; display:grid; place-items:center;
      background: rgba(255,255,255,.85); border: 1px solid rgba(233,238,247,.95);}
    .stat b{display:block; font-size:15px}
    .stat span{display:block; font-size:13px; color:var(--muted); margin-top:2px}

    .board{height: 460px; max-height: 62vh; min-height: 380px; overflow:hidden; position:relative;
      border-radius: 22px; border: 1px dashed rgba(74,163,255,.35);
      background:
        radial-gradient(240px 160px at 15% 20%, rgba(74,163,255,.12), transparent 60%),
        radial-gradient(260px 180px at 85% 30%, rgba(255,126,182,.11), transparent 60%),
        radial-gradient(280px 200px at 45% 92%, rgba(50,194,117,.10), transparent 60%),
        rgba(255,255,255,.7);
      position:relative; overflow:hidden;}
    .tile{position:absolute;
      width: var(--tile-size, 56px);
      height: var(--tile-size, 56px);
      border-radius: 18px; background: rgba(255,255,255,.92);
      border: 1px solid rgba(233,238,247,.98); box-shadow: 0 10px 24px rgba(16,24,40,.10);
      display:grid; place-items:center; font-size: 26px; user-select:none; transform: translateZ(0);}
    .tile.small{--tile-size: var(--tile-size-small, 50px); border-radius:16px}
    .tile.locked{opacity:.55; filter: saturate(.6)}
    .tile:after{content:""; position:absolute; inset:0; border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); opacity:.55; pointer-events:none;}
    .tile .corner{position:absolute; right:10px; top:10px; width:10px;height:10px;border-radius:99px;
      background: linear-gradient(180deg, var(--brand), #7bc2ff); opacity:.9;}
    .hint{position:absolute; left:12px; right:12px; bottom:12px; padding:10px 12px; border-radius: 16px;
      border: 1px solid rgba(233,238,247,.95); background: rgba(255,255,255,.78); color: var(--muted); font-size: 13px;
      display:flex; align-items:center; justify-content:space-between; gap:10px;}
    .hint b{color:var(--text); font-size:13px}
    .progress{display:flex; align-items:center; gap:8px;}
    .bar{width:90px; height:10px; border-radius: 99px; background: rgba(233,238,247,.9); overflow:hidden;
      border: 1px solid rgba(233,238,247,.95);}
    .bar > i{display:block; height:100%; width: 42%; background: linear-gradient(135deg, var(--brand), var(--brand2)); border-radius: 99px;}
    .tray{margin-top: 14px; padding: 10px; border-radius: 22px; border: 1px solid rgba(233,238,247,.95);
      background: rgba(255,255,255,.78); box-shadow: 0 10px 24px rgba(16,24,40,.06);}
    .tray-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
    .tray-top b{font-size:14px}
    .slots{display:grid; grid-template-columns: repeat(7,1fr); gap:8px}
    .slot{height: 46px; border-radius: 16px; background: rgba(247,251,255,.9);
      border: 1px dashed rgba(107,122,144,.30); display:grid; place-items:center; color: rgba(107,122,144,.55);
      font-size: 13px; user-select:none;}
    .slot.filled{border-style: solid; background: rgba(255,255,255,.95); color: var(--text);
      box-shadow: 0 8px 16px rgba(16,24,40,.08);}
    .toolrow{display:flex; gap:10px; margin-top: 14px;}
    .tool{flex:1; height: 48px; border-radius: 20px; border: 1px solid rgba(233,238,247,.95);
      background: rgba(255,255,255,.82); cursor:pointer; display:flex; align-items:center; justify-content:center;
      gap:8px; font-weight:650; color:var(--text); box-shadow: 0 10px 20px rgba(16,24,40,.06);
      transition: transform .12s ease;}
    .tool:active{transform:scale(.985)}
    .tool.active{border-color: rgba(74,163,255,.32); background: rgba(255,255,255,.92); box-shadow: 0 14px 28px rgba(74,163,255,.16);}
    .tool .count{font-size:12px; padding: 3px 8px; border-radius: 999px; background: rgba(74,163,255,.12);
      border: 1px solid rgba(74,163,255,.22); color: rgba(35,48,71,.92); font-weight:700;}

.gameGrid{display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:10px;}
.gameCard{border-radius: 22px; overflow:hidden; border: 1px solid rgba(233,238,247,.95);
      background: rgba(255,255,255,.80); box-shadow: 0 10px 24px rgba(16,24,40,.08); cursor:pointer; transition: transform .12s ease;}
.gameCard:active{transform: scale(.985)}
.cover{height: 120px; position: relative;
      background:
        radial-gradient(120px 80px at 20% 25%, rgba(255,255,255,.65), rgba(255,255,255,0) 70%),
        linear-gradient(135deg, rgba(74,163,255,.75), rgba(255,126,182,.72));}
.cover.alt{background:
        radial-gradient(120px 80px at 20% 25%, rgba(255,255,255,.65), rgba(255,255,255,0) 70%),
        linear-gradient(135deg, rgba(50,194,117,.72), rgba(74,163,255,.70));}
.cover-img-wrap{overflow:hidden; display:flex; align-items:center; justify-content:center;}
.cover-img-wrap .gameCover{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;}
.cover svg{position:absolute; right:10px; bottom:10px; opacity:.88}
.badgeSoon{position:absolute; left:10px; top:10px; padding:6px 10px; border-radius: 999px;
      background: rgba(255,255,255,.82); border: 1px solid rgba(233,238,247,.95); font-size: 12px; font-weight: 800; z-index:1;}
    .gameMeta{padding: 14px 16px 14px;}
    .gameMeta b{display:block; font-size:14px}
    .gameMeta span{display:block; font-size:13px; color:var(--muted); margin-top:4px; line-height:1.35}

    .nav{position: fixed; left:0; right:0; bottom: 0; padding-bottom: env(safe-area-inset-bottom);
      backdrop-filter: blur(12px);
      background:  rgba(255,255,255,1);
      border-top: 1px solid rgba(233,238,247,.9); z-index: 30;}
    .nav-inner{max-width: var(--max); margin:0 auto; padding: 10px 12px 12px; display:grid;
      grid-template-columns: repeat(4, 1fr); gap: 8px;}
    .tab{border-radius: 20px; height: 56px; display:flex; flex-direction:column; align-items:center; justify-content:center;
      gap:4px; cursor:pointer; user-select:none; border: 1px solid rgba(233,238,247,.95);
      background: rgba(255,255,255,.75); box-shadow: 0 10px 20px rgba(16,24,40,.06);
      transition: transform .12s ease, background .12s ease; font-size: 11px; color: var(--muted);}
    .tab svg{opacity:.78}
    .tab.active{background: rgba(255,255,255,.92); color: var(--text); border-color: rgba(74,163,255,.28);}
    .tab:active{transform:scale(.985)}
    .tl{line-height:1}

    .mask{position:fixed; inset:0; background: rgba(35,48,71,.28); backdrop-filter: blur(10px);
      display:none; align-items:flex-end; justify-content:center; padding: 16px 14px calc(env(safe-area-inset-bottom) + 14px); z-index: 50;}
    .mask.show{display:flex}
    body.sheet-open{overflow:hidden; touch-action:none;}
    .sheet{width: min(var(--max), 100%); max-height: 90vh; border-radius: 26px; background: rgba(255,255,255,.96);
      border: 1px solid rgba(233,238,247,.95); box-shadow: 0 24px 60px rgba(16,24,40,.18); overflow:hidden;
      display:flex; flex-direction:column; transform: translateY(8px); animation: up .18s ease-out forwards; position:relative; z-index:1;}
    @keyframes up{to{transform:translateY(0)}}
    .sheet-hd{padding: 16px 18px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px;
      border-bottom: 1px solid rgba(233,238,247,.9); flex-shrink:0;}
    .sheet-hd b{font-size:14px}
    .sheet-bd{padding: 16px 18px 18px; overflow-y:auto; overflow-x:hidden; min-height:0; flex:1;}
    #sheetBody.level-list-bd,.sheet-bd.level-list-bd{display:flex; flex-direction:column; overflow:hidden; padding-bottom:0;}
    .sheet-bd.level-list-bd .level-list-scroll,#sheetBody.level-list-bd .level-list-scroll{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;}
    .level-list-scroll{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;}
    .sheet-ft{padding: 12px 18px 18px; border-top: 1px solid rgba(233,238,247,.9); flex-shrink:0;}
    .x{width:36px;height:36px;border-radius:14px; background: rgba(247,251,255,.9);
      border: 1px solid rgba(233,238,247,.95); display:grid;place-items:center; cursor:pointer;}
    .x:active{transform:scale(.98)}
    .list{display:grid; gap:12px}
    .item{padding: 14px 14px; border-radius: 18px; border: 1px solid rgba(233,238,247,.95);
      background: rgba(247,251,255,.75); display:flex; align-items:center; justify-content:space-between; gap:10px;}
    .item b{font-size:14px}
    .item span{font-size:13px; color:var(--muted)}
    .btn{height: 40px; padding: 0 14px; border-radius: 16px; border: 1px solid rgba(233,238,247,.95);
      background: rgba(255,255,255,.92); cursor:pointer; font-weight:650; display:flex; align-items:center; gap:8px;
      color: var(--text); transition: transform .12s ease; white-space: nowrap;}
    .btn.primary{border:0; color:white; background: linear-gradient(135deg, var(--brand), var(--brand2));}
    .btn:active{transform:scale(.985)}
    .btn[disabled]{opacity:.5; cursor:not-allowed; transform:none;}

    .toast{position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%);
      background: rgba(255,255,255,.96); border: 1px solid rgba(233,238,247,.95); border-radius: 999px;
      box-shadow: 0 18px 40px rgba(16,24,40,.16); padding: 10px 14px; font-size: 13px; color: var(--text);
      display:none; align-items:center; gap:8px; z-index: 60;}
    .toast.show{display:flex; animation: pop .18s ease-out}
    @keyframes pop{from{transform:translateX(-50%) translateY(6px); opacity:.3} to{transform:translateX(-50%) translateY(0); opacity:1}}
    .toast .miniDot{width:8px;height:8px;border-radius:99px; background: linear-gradient(180deg, var(--ok), #8ce7b1);
      box-shadow: 0 0 0 3px rgba(50,194,117,.15); display:inline-block;}

    .divider{height:1px; background: rgba(233,238,247,.95); margin: 10px 0;}
    .rank{display:grid; gap:12px;}
    .rank .rrow{display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 14px 14px;
      border-radius: 18px; border: 1px solid rgba(233,238,247,.95); background: rgba(255,255,255,.74);}
    .rank .left{display:flex; align-items:center; gap:10px}
    .medal{width:34px;height:34px;border-radius:14px; display:grid;place-items:center;
      border:1px solid rgba(233,238,247,.95); background: rgba(247,251,255,.9); font-weight:900;}
    .name b{font-size:14px; display:block}
    .name span{font-size:13px; color:var(--muted)}
    .time{font-weight:800}
    .muted{color:var(--muted)}
    .smallNote{font-size:13px; color:var(--muted); line-height:1.5}

    .input{width:100%; height:46px; border-radius: 16px; border: 1px solid rgba(233,238,247,.95);
      background: rgba(247,251,255,.9); padding: 0 12px; outline: none; font-size: 14px; color: var(--text);}
    .input:focus{border-color: rgba(74,163,255,.35); box-shadow: 0 0 0 4px rgba(74,163,255,.12);}

/* ===============================
   Theme support (v17) - CLEAN & SIMPLE
   =============================== */
body{ position: relative; }
body::after{
  content:"";
  position: fixed;
  inset: 0;
  background: var(--theme-bg, none) center / cover no-repeat;
  opacity: .05;
  filter: saturate(1.02) contrast(1.02);
  pointer-events: none;
  z-index: -2;
}
body::before{ z-index: -1; }

.p7g-tileimg{
  width: 88%;
  height: 88%;
  max-width: 56px;
  max-height: 56px;
  object-fit: contain;
  display: block;
  margin: auto;
  filter: drop-shadow(0 6px 12px rgba(16,24,40,.18));
}
.tile > span, .slot{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.tile > span > img.p7g-tileimg,
.slot img.p7g-tileimg{
  width: 88%;
  height: 88%;
  min-width: clamp(20px, 50%, 56px);
  min-height: clamp(20px, 50%, 56px);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.tile .p7g-ico{
  width: 88%;
  height: 88%;
  min-width: clamp(20px, 50%, 56px);
  min-height: clamp(20px, 50%, 56px);
  max-width: 56px;
  max-height: 56px;
  object-fit: contain;
}

.themeGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.themeCard{
  border: 1px solid rgba(233,238,247,.95);
  background: rgba(255,255,255,.78);
  border-radius: 16px;
  overflow:hidden;
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(16,24,40,.08);
  transition: transform .12s ease;
}
.themeCard:hover{ transform: translateY(-1px); }
.themeBg{
  height: 86px;
  background-size: cover;
  background-position: center;
  filter: saturate(1.02) contrast(1.02);
}
.themeInfo{ padding: 10px 12px; display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.themeName{ font-weight: 800; letter-spacing:.2px; color: var(--text); }
.themeThumbs{ display:flex; gap: 6px; }
.themeThumbs img{ width: 26px; height: 26px; object-fit: contain; opacity: .95; filter: drop-shadow(0 6px 10px rgba(16,24,40,.18)); }
.themeHint{ color: var(--muted); font-size: 12px; }


/* --- Home start row (Start + Level List) --- */
.btnrow{display:flex; gap:12px; margin-top:10px; flex-wrap:wrap}
.btnrow .cta{width:auto; flex:1 1 240px; margin-top:0}
.btnrow .cta.secondary{flex:0 0 auto; min-width:124px}
.btnrow .btn{margin-top:0; white-space:nowrap}
@media (max-width: 420px){
  .btnrow .cta{flex:1 1 100%}
  .btnrow .cta.secondary{flex:1 1 100%}
}


/* --- Level list sheet：标准横向布局，缩略图固定、中间单列不拆字、右侧固定按钮 --- */
.lvlGrid{display:grid; grid-template-columns:1fr; gap:12px}
.lvlCard{min-height:88px; border:1px solid rgba(233,238,247,.95); background:rgba(255,255,255,.78); border-radius:18px; padding:12px 16px; overflow:hidden; box-shadow: 0 10px 24px rgba(16,24,40,.08); display:flex; align-items:center; gap:12px}
.lvlThumb{width:72px; height:72px; min-width:72px; flex:0 0 auto; border-radius:16px; background:#eee; background-size:cover; background-position:center; position:relative; overflow:hidden}
.lvlThumb .lvlThumbImg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.lvlThumb:after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(35,48,71,.10)); pointer-events:none}
.lvlRow{display:flex; align-items:center; justify-content:space-between; gap:12px; flex:1; min-width:0}
.lvlMeta{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; line-height:1.35}
.lvlMeta .lvlTitle{font-size:15px; font-weight:700; white-space:nowrap; word-break:keep-all; overflow:hidden; text-overflow:ellipsis}
.lvlMeta .lvlStatus{font-size:12px; color:var(--muted); white-space:nowrap; word-break:keep-all; overflow:hidden; text-overflow:ellipsis}
.lvlLock{opacity:.6}
.lvlBadge{display:inline-block; margin-left:6px; font-size:11px; padding:2px 6px; border-radius:999px; background:rgba(255,255,255,.70); border:1px solid rgba(170,190,220,.55); color: var(--muted); font-weight:800}
.lvlBadge.ok{background:rgba(16,185,129,.12); border-color: rgba(16,185,129,.28); color: rgba(16,120,90,.95)}
.lvlBadge.lock{background:rgba(255,255,255,.60); border-color: rgba(148,163,184,.55); color: rgba(100,116,139,.95)}
.lvlBadge.current{background:rgba(74,163,255,.18); border-color: rgba(74,163,255,.45); color: var(--brand)}
.lvlCardCurrent{border-color: rgba(74,163,255,.5); box-shadow: 0 0 0 1px rgba(74,163,255,.25)}
.lvlCard .lvlBtn{height:40px; padding:0 16px; min-width:88px; flex:0 0 auto; border-radius:20px; font-weight:700; white-space:nowrap}
.lvlCard .lvlBtn.primary,.lvlCard .lvlBtn.cta{border:0; color:white; background: linear-gradient(135deg, var(--brand), var(--brand2)); box-shadow: 0 8px 20px rgba(74,163,255,.2)}
.lvlCard .lvlBtn.ghost,.lvlCard .lvlBtn.lvlBtnReplay{background:rgba(255,255,255,.75); border:1px solid rgba(233,238,247,.95); color:var(--muted); width:auto; min-width:88px}
.lvlCard .lvlBtn[disabled]{opacity:.6; cursor:not-allowed}

/* Level list modal: ensure close X is visible */
.sheet-hd .x{flex-shrink:0; cursor:pointer;}

/* Check-in 7 days */
.checkin-days{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.checkin-day{font-size:12px; padding:6px 10px; border-radius:12px; background:rgba(233,238,247,.6); color:var(--muted);}
.checkin-day.done{background:rgba(50,194,117,.15); color:var(--ok); font-weight:700;}


/* ===============================
   Withdraw UI (v20)
   =============================== */
.innerModal{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 16px;
  background: rgba(35,48,71,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 5;
}
.innerModal.show{display:flex;}
.innerModalCard{
  width: 100%;
  max-width: 380px;
  border-radius: 24px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(233,238,247,.95);
  box-shadow: 0 24px 60px rgba(16,24,40,.18);
  padding: 16px 16px 14px;
}
.innerModalCard b{font-size: 15px;}
.innerModalCard .sub{font-size: 13px; color: var(--muted); line-height: 1.5;}

.withdrawLabel{font-size: 12px; color: var(--muted); margin: 4px 0 6px;}
.withdrawStatus{white-space:nowrap;}
.withdrawItem{background: rgba(255,255,255,.78);} 


/* ===== FomoPG UI (v21) ===== */
.fomoBoard{
  padding: 12px;
  border-radius: var(--r2);
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.42));
  box-shadow: var(--shadow2);
}
.fomoGrid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media(max-width:420px){ .fomoGrid{grid-template-columns:1fr;} }

.fomoTile{
  padding: 14px 14px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,.58);
  box-shadow: 0 8px 18px rgba(16,24,40,.06);
}
.fomoTile.soft{background: rgba(255,255,255,.44);}
.fomoTile .k{font-weight:800; color: var(--muted); font-size:12px; letter-spacing:.2px;}
.fomoTile .v{margin-top:6px; font-size:28px; line-height:1.05; color: var(--text);}
.fomoTile .v b{font-size:38px; letter-spacing:.4px;}
.fomoTile .u{margin-left:6px; font-weight:900; font-size:12px; color: var(--muted);}
.fomoTile .h{margin-top:8px; font-size:12px; color: var(--muted);}

.fomoMetaBlock{display:grid; gap:12px;}
.fomoMetaCard{
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.54);
  box-shadow: 0 8px 18px rgba(16,24,40,.06);
}
.fomoOwnerCard{
  background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.46));
}
.fomoOwnerHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.fomoRoundTag{font-weight:900;}
.fomoOwnerNameRow{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:12px;
}
.fomoOwnerAvatar{
  width:48px;
  height:48px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  background: linear-gradient(135deg, rgba(109,168,255,.20), rgba(255,126,182,.16));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
.fomoOwnerText{display:flex; flex-direction:column; gap:4px; min-width:0;}
.fomoOwnerText b{font-size:18px; line-height:1.1; color: var(--text);}
.fomoOwnerText span{font-size:12px; color: var(--muted); line-height:1.45;}
.fomoHistoryList{display:flex; flex-direction:column; gap:10px; margin-top:12px;}
.fomoHistoryItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.38);
}
.fomoRoundPill{
  flex:0 0 auto;
  min-width:58px;
  text-align:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color: var(--text);
  background: rgba(109,168,255,.14);
}
.fomoHistoryMeta{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1;}
.fomoHistoryMeta b{font-size:14px; line-height:1.2; color: var(--text);}
.fomoHistoryMeta span{font-size:12px; line-height:1.45; color: var(--muted);}
.fomoHistoryState{
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  color: var(--brand);
  background: rgba(255,126,182,.12);
}
@media(max-width:420px){
  .fomoHistoryItem{align-items:flex-start;}
}

.cta.fomoCta{
  box-shadow: 0 16px 42px rgba(255,126,182,.20);
}

.rulesBox{
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.52);
  box-shadow: 0 8px 18px rgba(16,24,40,.06);
}
.rulesHd{display:flex; align-items:center; justify-content:space-between;}
.rulesBd{margin-top:8px;}
.rulesOl{margin:0; padding-left:18px;}
.rulesOl li{margin:6px 0; color: var(--muted);}

.rankBlock{
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.52);
  box-shadow: 0 8px 18px rgba(16,24,40,.06);
}
.h2{font-size:16px; letter-spacing:.2px;}
.sub.mini{font-size:12px; opacity:.92;}


/* ===== FomoPG big timer + Drop ticker (v22) ===== */
.fomoHero{
  margin-top: 12px;
  padding: 16px 16px 14px;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(135deg, rgba(120,170,255,.22), rgba(255,120,200,.18));
  box-shadow: 0 14px 36px rgba(68, 63, 196, .10);
  position: relative;
  overflow: hidden;
}
.fomoHero::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.38), rgba(255,255,255,0));
  transform: rotate(20deg);
  animation: fomoSheen 3.4s ease-in-out infinite;
  pointer-events:none;
}
.fomoHeroLabel{
  font-weight: 900;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .3px;
  position: relative;
}
.fomoHeroTime{
  margin-top: 8px;
  font-size: 66px;
  font-weight: 950;
  letter-spacing: 1px;
  line-height: 1;
  position: relative;
  background: linear-gradient(90deg, #6da8ff, #ff7eb6, #ffd36a);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--brand);
  -webkit-text-fill-color: transparent;
  text-shadow: 0 18px 44px rgba(255,126,182,.18);
  animation: glowPulse 1.9s ease-in-out infinite;
}
@media(max-width:420px){
  .fomoHeroTime{font-size: 54px;}
}
@keyframes fomoSheen{
  0%{transform: translateX(-25%) rotate(20deg);}
  100%{transform: translateX(25%) rotate(20deg);}
}
@keyframes glowPulse{
  0%,100%{filter: drop-shadow(0 0 0 rgba(255,126,182,.0)); transform: translateY(0);}
  50%{filter: drop-shadow(0 10px 18px rgba(255,126,182,.24)); transform: translateY(-1px);}
}

.ticker{
  width: 100%;
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(255,255,255,.60);
  box-shadow: 0 10px 22px rgba(16,24,40,.06);
  overflow: hidden;
}
.ticker-inner{
  display: inline-block;
  white-space: nowrap;
  font-weight: 800;
  color: var(--text);
  font-size: 12px;
  animation: tickerMove 18s linear infinite;
}
@keyframes tickerMove{
  0%{transform: translateX(0);}
  100%{transform: translateX(-50%);}
}