@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700;900&family=Orbitron:wght@700;900&display=swap');
  :root{
    --red:#e10600; --red-lt:#ff3b30; --black:#15151e; --dark:#1f1f2b; --darker:#0d0d13;
    --white:#f7f4f1; --grey:#38383f; --lgrey:#8a8a93; --gold:#ffd54a; --green:#4ade80; --blue:#48cae4;
    --num:"Orbitron","Titillium Web","Segoe UI",sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;overflow-x:hidden}
  body{
    zoom:0.9;   /* 整體畫面比例 90% */
    font-family:"Titillium Web","Segoe UI",Arial,sans-serif;color:var(--white);line-height:1.5;
    -webkit-font-smoothing:antialiased;
    background:
      radial-gradient(1100px 500px at 50% -8%, rgba(225,6,0,.16), transparent 60%),
      repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 2px, transparent 2px 4px),
      var(--black);
    background-attachment:fixed;
  }
  #app{max-width:calc(620px / 0.9);margin:0 auto;height:calc(100vh / 0.9);height:calc(100dvh / 0.9);overflow:hidden;display:flex;flex-direction:column;
    background:linear-gradient(180deg, rgba(13,13,19,.86), rgba(13,13,19,.94));box-shadow:0 0 60px rgba(0,0,0,.6)}
  .num,.big,.stat-val,.attr-num,#hAge,.res-pos{font-family:var(--num)}

  /* ===== Header ===== */
  header{background:linear-gradient(100deg,#101019,var(--dark) 55%,#101019);border-bottom:3px solid var(--red);
    padding:11px 14px 12px;position:sticky;top:0;z-index:20;box-shadow:0 6px 22px rgba(0,0,0,.55)}
  header::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;
    background:linear-gradient(90deg,var(--red),var(--red-lt)),repeating-linear-gradient(90deg,#000 0 6px,#fff 6px 12px);opacity:.95}
  .brand{display:flex;align-items:center;gap:9px;margin-bottom:10px;flex-wrap:wrap}
  .brand .logo{font-weight:900;font-size:20px;letter-spacing:1px;font-style:italic;color:#fff;padding:2px 9px;border-radius:5px;flex:0 0 auto;
    background:linear-gradient(160deg,#ff2a20,var(--red) 60%,#b60500);box-shadow:0 2px 10px rgba(225,6,0,.55),inset 0 1px 0 rgba(255,255,255,.35)}
  /* 自訂圖片商標 */
  .brand-logo{height:36px;width:auto;display:block;flex:0 0 auto;border-radius:5px}
  .brand .brand-logo{height:34px}
  .slogo .brand-logo.slogo-logo{height:48px}
  .brand-logo.sm{height:30px}
  .brand h1{font-size:13px;font-weight:700;letter-spacing:.5px;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand .who{margin-left:auto;text-align:right;font-size:12px;line-height:1.25;flex:0 1 auto;min-width:0}
  .brand .who b{font-size:13px}
  .brand .who .dnum{font-family:var(--num);color:var(--gold)}
  .status-bar{display:flex;gap:8px;flex-wrap:wrap}
  .st{background:linear-gradient(180deg,#24242e,#1b1b24);border-radius:9px;padding:7px 5px;flex:1 1 0;min-width:0;text-align:center;overflow:hidden;
    border:1px solid rgba(255,255,255,.06);box-shadow:0 2px 6px rgba(0,0,0,.25)}
  .st .l{font-size:9.5px;text-transform:uppercase;color:var(--lgrey);letter-spacing:.3px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .st .v{font-size:15px;font-weight:800;font-family:var(--num);white-space:nowrap}
  .st .v span{font-family:var(--num)}
  .tier-badge{display:inline-block;font-family:var(--num);font-weight:800;font-size:11px;padding:2px 7px;border-radius:4px;color:#fff}

  /* ===== Attributes strip ===== */
  .attrs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:12px 16px 13px;background:rgba(0,0,0,.22);border-bottom:1px solid var(--grey)}
  .attr{text-align:center;min-width:0}
  .attr .an{font-size:10px;color:var(--lgrey);text-transform:uppercase;letter-spacing:.3px}
  .attr .attr-num{font-size:16px;font-weight:800;color:var(--gold)}
  .attr .bar{height:6px;background:#101016;border-radius:3px;overflow:hidden;margin-top:5px}
  .attr .bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--red),#ff8a4a);transition:width .5s}

  /* ===== Feed ===== */
  #feed{flex:1;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px;scroll-behavior:smooth}
  #feed::-webkit-scrollbar{width:7px}#feed::-webkit-scrollbar-thumb{background:var(--red);border-radius:4px}
  .card{background:linear-gradient(180deg,#22222d,#1a1a23);border-radius:11px;padding:12px 14px;flex:0 0 auto;
    border:1px solid rgba(255,255,255,.06);box-shadow:0 3px 12px rgba(0,0,0,.3);animation:in .28s ease;position:relative;overflow:hidden}
  @keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .card.race::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--red),transparent 70%)}
  .card .ct{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--lgrey);margin-bottom:3px;display:flex;gap:7px;align-items:center}
  .card .ch{font-size:15px;font-weight:800;margin-bottom:2px}
  .card .cb{font-size:13px;color:#cfcfcf}
  .card.result{display:flex;align-items:center;gap:13px}
  .res-pos{font-size:34px;font-weight:900;min-width:58px;text-align:center;line-height:1}
  .res-pos small{display:block;font-size:10px;font-weight:600;color:var(--lgrey);letter-spacing:.5px;margin-top:2px}
  .p1{color:var(--gold)}.p2{color:#dfe4ea}.p3{color:#cd7f32}.pdnf{color:var(--red)}.pmid{color:var(--white)}
  .res-main{flex:1}
  .res-main .rt{font-size:13px;font-weight:700}
  .res-main .rs{font-size:12px;color:var(--lgrey)}
  .tag{display:inline-block;font-size:10px;font-weight:800;padding:1px 7px;border-radius:4px;letter-spacing:.5px;text-transform:uppercase}
  .tag.win{background:var(--gold);color:#15151e}.tag.pod{background:#cd7f32;color:#fff}
  .tag.pts{background:var(--green);color:#0d0d13}.tag.dnf{background:var(--red);color:#fff}.tag.info{background:var(--blue);color:#0d0d13}
  .card.season{border:1px solid rgba(255,213,74,.35);background:linear-gradient(180deg,#26261f,#1b1b17)}
  /* 世界冠軍：流動彩虹漸層邊框 */
  .card.champ-glow{
    border:2px solid transparent;
    background:
      linear-gradient(180deg,#242419,#191914) padding-box,
      linear-gradient(90deg,#ff2a20,#ffd54a,#4ade80,#48cae4,#a855f7,#ff2a20) border-box;
    background-size:auto, 300% 100%;
    box-shadow:0 0 28px rgba(255,213,74,.3);
    animation:champFlow 3.2s linear infinite, in .28s ease;
  }
  .card.champ-glow::before{display:none}
  .card.champ-glow .ch{
    background:linear-gradient(90deg,#ff2a20,#ffd54a,#4ade80,#48cae4,#a855f7,#ff2a20);
    background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
    animation:champText 3.2s linear infinite;font-weight:900;
  }
  @keyframes champFlow{from{background-position:0 0,0% 0}to{background-position:0 0,300% 0}}
  @keyframes champText{from{background-position:0% 0}to{background-position:300% 0}}
  .card.season .ch{color:var(--gold)}
  .mini-tbl{width:100%;font-size:12px;border-collapse:collapse;margin-top:7px}
  .mini-tbl td{padding:2px 4px;border-bottom:1px solid rgba(255,255,255,.05)}
  .mini-tbl tr.me td{color:var(--gold);font-weight:800}
  .mini-tbl .mp{font-family:var(--num);width:22px;color:var(--lgrey)}
  .mini-tbl .mpt{text-align:right;font-family:var(--num);color:var(--gold)}
  .newsflag{font-size:15px}

  /* ===== Action bar ===== */
  .actionbar{padding:11px 14px calc(11px + env(safe-area-inset-bottom,0));background:linear-gradient(180deg,#0b0b11,#101017);
    border-top:1px solid var(--grey);display:flex;gap:9px;position:sticky;bottom:0;z-index:15}
  .btn{flex:1;border:none;border-radius:10px;padding:14px 10px;font-size:14px;font-weight:800;cursor:pointer;
    letter-spacing:.5px;transition:.15s;font-family:inherit}
  .btn-primary{color:#fff;background:linear-gradient(180deg,#ff2a20,var(--red) 70%,#c00500);
    box-shadow:0 4px 16px rgba(225,6,0,.4),inset 0 1px 0 rgba(255,255,255,.25)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(225,6,0,.55)}
  .btn-ghost{flex:0 0 auto;color:var(--white);background:linear-gradient(180deg,#2c2c35,#20202a);border:1px solid var(--grey)}
  .btn-ghost:hover{border-color:var(--red);color:#fff}
  .btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}

  /* ===== 現場直播賽事 ===== */
  .race-stage{position:fixed;inset:0;z-index:40;display:none;flex-direction:column;
    background:radial-gradient(1000px 500px at 50% -10%,rgba(225,6,0,.22),transparent 60%),linear-gradient(180deg,#0d0d13,#07070b);
    padding:calc(16px + env(safe-area-inset-top,0)) 16px 16px;animation:fade .25s}
  .race-stage.show{display:flex}
  .rs-head{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--lgrey);margin-bottom:8px}
  .rs-head .rs-track{font-weight:800;color:var(--white);font-size:15px}
  .rs-head .rs-lap{margin-left:auto;font-family:var(--num);font-weight:800;color:var(--gold);font-size:15px;letter-spacing:1px}
  .rs-flag{height:4px;border-radius:3px;background:repeating-linear-gradient(90deg,#000 0 8px,#fff 8px 16px);opacity:.45;margin-bottom:12px}
  .rs-big{text-align:center;margin:4px 0 10px}
  .rs-big .rs-pos{font-family:var(--num);font-size:70px;font-weight:900;line-height:1;transition:color .2s}
  .rs-big .rs-delta{font-size:18px;font-weight:800;height:22px;letter-spacing:1px}
  .rs-up{color:var(--green)}.rs-dn{color:var(--red)}
  .rs-mate{text-align:center;font-size:12.5px;color:var(--lgrey);margin:-2px 0 10px;min-height:17px;font-weight:700;letter-spacing:.3px}
  .rs-mate b{color:var(--white)}
  .rs-mate .up{color:var(--green)}.rs-mate .dn{color:var(--red)}
  .rs-track-bar{position:relative;height:54px;margin:4px 0 14px;border-radius:27px;
    background:linear-gradient(180deg,#1b1b24,#141419);border:1px solid var(--grey);overflow:hidden}
  .rs-track-bar::before{content:"";position:absolute;top:50%;left:0;right:0;height:2px;transform:translateY(-50%);
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 14px,transparent 14px 28px)}
  .rs-car{position:absolute;top:50%;left:5%;transform:translateY(-50%) scaleX(-1);font-size:38px;transition:left .18s linear;
    filter:drop-shadow(0 0 8px rgba(225,6,0,.7))}
  .rs-tower{flex:1;overflow:hidden;background:linear-gradient(180deg,#16161d,#101015);border-radius:12px;border:1px solid var(--grey);padding:6px}
  .tw-row{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;font-size:13px;transition:.28s ease}
  .tw-row .tw-p{font-family:var(--num);font-weight:800;width:26px;text-align:center;color:var(--lgrey)}
  .tw-row .tw-n{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tw-row .tw-g{font-family:var(--num);font-size:11px;color:var(--lgrey)}
  .tw-row.me{background:linear-gradient(90deg,rgba(225,6,0,.34),rgba(225,6,0,.08));color:#fff}
  .tw-row.me .tw-p{color:var(--gold)}
  .tw-row.out{opacity:.4}
  .rs-flash{position:absolute;left:16px;right:16px;bottom:80px;text-align:center;font-weight:800;font-size:15px;color:var(--gold);
    text-shadow:0 2px 14px rgba(0,0,0,.85);pointer-events:none;opacity:0;transform:translateY(6px);transition:.3s}
  .rs-flash.show{opacity:1;transform:none}

  /* ===== Modal ===== */
  .overlay{position:fixed;inset:0;background:rgba(3,3,6,.82);backdrop-filter:blur(4px);display:none;
    align-items:center;justify-content:center;z-index:50;padding:18px}
  .overlay.show{display:flex;animation:fade .2s}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .modal{background:linear-gradient(180deg,#232330,#191921);border:1px solid rgba(225,6,0,.6);border-radius:14px;
    padding:20px;max-width:440px;width:100%;position:relative;overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(225,6,0,.25);animation:pop .25s cubic-bezier(.2,.9,.3,1.2)}
  @keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
  .modal::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red),var(--red-lt),var(--red))}
  .modal .mtag{background:linear-gradient(180deg,#ff2a20,var(--red));color:#fff;font-size:11px;font-weight:800;padding:3px 10px;border-radius:5px;text-transform:uppercase;letter-spacing:1px}
  .modal h3{font-size:18px;margin:11px 0 8px;font-weight:900}
  .modal p.md{font-size:14px;color:#cfcfcf;margin-bottom:16px}
  .choices{display:flex;flex-direction:column;gap:9px;max-height:62vh;overflow-y:auto}
  .choices::-webkit-scrollbar{width:7px}
  .choices::-webkit-scrollbar-thumb{background:var(--red);border-radius:4px}
  .choices::-webkit-scrollbar-track{background:transparent}
  .choice{width:100%;padding:12px 13px;border-radius:9px;cursor:pointer;font-size:14px;font-weight:600;text-align:left;line-height:1.35;
    background:var(--grey);color:var(--white);border:1px solid var(--lgrey);transition:.15s}
  .choice:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}
  .choice.risky{border-color:var(--red);background:rgba(225,6,0,.16)}
  .choice small{display:block;font-weight:400;font-size:11px;color:var(--lgrey);margin-top:2px}
  .choice:hover small{color:#ffd9d0}

  /* ===== Start / Retire screens ===== */
  .screen{position:fixed;inset:0;z-index:100;overflow-y:auto;padding:26px 18px;display:none;
    background:radial-gradient(circle at 50% 0%,#1f1f2b 0%,var(--black) 55%,#000 100%)}
  .screen.show{display:block}
  .sinner{max-width:460px;margin:0 auto}
  .slogo{display:flex;align-items:center;gap:11px;font-size:20px;font-weight:900;margin-bottom:4px}
  .slogo .logo{font-weight:900;font-size:24px;font-style:italic;background:var(--red);color:#fff;padding:2px 11px;border-radius:5px}
  .ssub{color:var(--lgrey);font-size:14px;margin-bottom:22px}
  /* 中/EN 語言切換 + 里程碑橫幅 */
  .lang-toggle{display:flex;align-items:center;gap:8px;margin-bottom:8px}
  .lang-btn{flex:0 0 auto;background:var(--dark);border:1px solid var(--grey);color:var(--lgrey);border-radius:6px;
    padding:4px 12px;font-size:12px;font-weight:800;cursor:pointer;transition:.15s;font-family:inherit}
  .lang-btn:hover{border-color:var(--red);color:var(--white)}
  .lang-btn.on{background:var(--red);border-color:var(--red);color:#fff}
  .ms-badge{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:.15s;
    background:linear-gradient(90deg,rgba(225,6,0,.22),rgba(255,213,74,.08));border:1px solid rgba(225,6,0,.55);
    border-radius:7px;padding:6px 12px;font-size:12px;font-weight:800;color:var(--gold)}
  .ms-badge:hover{background:linear-gradient(90deg,rgba(225,6,0,.38),rgba(255,213,74,.14));transform:translateY(-1px);box-shadow:0 3px 12px rgba(225,6,0,.25)}
  /* 里程碑頁 */
  .ms-inner{max-width:1000px}
  .milestone-img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--grey);box-shadow:0 10px 40px rgba(0,0,0,.55)}
  .ms-item{margin-bottom:22px}
  .ms-date{font-family:var(--num);font-size:13px;font-weight:800;color:var(--gold);letter-spacing:.5px;margin-bottom:7px}
  .ms-item .ms-caption{font-size:12px;color:var(--lgrey);margin-top:6px;text-align:center}
  .like-wrap{display:flex;justify-content:center;margin:4px 0 18px}
  .like-btn{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:800;cursor:pointer;
    padding:11px 26px;border-radius:24px;color:var(--white);font-family:inherit;transition:.15s;
    background:linear-gradient(180deg,#2c2c35,#20202a);border:1px solid var(--grey)}
  .like-btn .lk-ic{font-size:20px;line-height:1}
  .like-btn b{color:var(--gold);font-family:var(--num)}
  .like-btn:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:0 6px 18px rgba(225,6,0,.25)}
  .like-btn:active{transform:scale(.96)}
  .like-btn.liked{background:linear-gradient(180deg,#ff2a20,var(--red));border-color:var(--red)}
  .like-btn.liked:hover{transform:none;box-shadow:none;cursor:default}
  .like-btn.liked b{color:#fff}
  /* 標題與新聞條同一列 */
  .slogo-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
  .slogo-row .slogo{margin-bottom:0;flex:0 0 auto}
  .slogo-row .news-ticker{flex:1 1 200px;min-width:0;margin:0}
  .slogo-row .news-track{height:30px}
  .slogo-row .news-label{font-size:11px;padding:0 9px}

  /* 首頁跑馬燈新聞條 */
  .news-ticker{display:flex;align-items:stretch;margin:0 0 22px;border-radius:8px;overflow:hidden;
    background:linear-gradient(180deg,#1c1c26,#141419);border:1px solid rgba(225,6,0,.4);box-shadow:0 3px 12px rgba(0,0,0,.35)}
  .news-label{flex:0 0 auto;display:flex;align-items:center;white-space:nowrap;
    background:linear-gradient(180deg,#ff2a20,var(--red));color:#fff;font-weight:800;font-size:12px;letter-spacing:.5px;padding:0 11px}
  .news-track{flex:1;min-width:0;overflow:hidden;position:relative;height:36px}
  .news-content{position:absolute;top:0;left:0;height:100%;display:inline-flex;align-items:center;white-space:nowrap;
    font-size:12.5px;color:#e6e6ea;will-change:transform;animation:newsScroll 30s linear infinite}
  .news-content b{color:var(--gold);font-weight:800}
  .news-ticker{cursor:pointer;transition:border-color .15s}
  .news-ticker:hover{border-color:var(--red)}
  .news-ticker:hover .news-content{animation-play-state:paused}
  @keyframes newsScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ===== 更新內容頁：不規則磚牆排版 ===== */
  #updatesScreen .sinner{max-width:640px}
  .updates-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
  .updates-head .slogo{margin-bottom:0;flex:1;min-width:0}
  .up-back{flex:0 0 auto;background:linear-gradient(180deg,#2c2c35,#20202a);color:var(--white);
    border:1px solid var(--lgrey);border-radius:8px;padding:8px 14px;font-size:13px;font-weight:800;
    cursor:pointer;transition:.15s;font-family:inherit;white-space:nowrap}
  .up-back:hover{background:var(--red);border-color:var(--red);transform:translateY(-1px)}

  /* ===== 目前排行榜頁 ===== */
  #standingsScreen .sinner{max-width:620px}
  .standings-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  @media(max-width:560px){.standings-wrap{grid-template-columns:1fr;gap:8px}}
  .st-col{min-width:0}
  .st-box{background:linear-gradient(180deg,#191921,#141419);border:1px solid var(--grey);border-radius:10px;
    padding:4px 10px;max-height:340px;overflow-y:auto;box-shadow:inset 0 2px 10px rgba(0,0,0,.4)}
  .st-box::-webkit-scrollbar{width:7px}
  .st-box::-webkit-scrollbar-thumb{background:var(--red);border-radius:4px}
  .st-box .mini-tbl td{padding:7px 5px}
  .st-me{background:linear-gradient(90deg,rgba(225,6,0,.25),rgba(225,6,0,.06));border:1px solid rgba(225,6,0,.5);
    border-radius:9px;padding:9px 13px;margin:0 0 16px;font-size:14px;font-weight:700;color:var(--white)}
  .st-me b{color:var(--gold)}
  #roundsTable{margin-bottom:18px}
  #roundsTable .mini-tbl td:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:1px;width:99%}
  #roundsTable .mini-tbl td.mpt{white-space:nowrap;text-align:right;padding-left:8px}
  .updates-masonry{columns:2;column-gap:12px;margin:6px 0 20px}
  @media(max-width:420px){.updates-masonry{columns:1}}
  .update-card{break-inside:avoid;display:inline-block;width:100%;margin:0 0 12px;padding:13px 15px;border-radius:12px;
    background:linear-gradient(180deg,#22222d,#1a1a23);border:1px solid rgba(255,255,255,.07);
    border-top:3px solid var(--ac,#e10600);box-shadow:0 4px 14px rgba(0,0,0,.32);animation:in .3s ease both;position:relative;overflow:hidden}
  .update-card::after{content:"";position:absolute;top:-30px;right:-30px;width:80px;height:80px;border-radius:50%;
    background:radial-gradient(circle,var(--ac,#e10600),transparent 70%);opacity:.14}
  .update-card .uc-ic{font-size:26px;line-height:1;margin-bottom:7px}
  .update-card .uc-title{font-size:15px;font-weight:800;color:#fff;margin-bottom:5px;letter-spacing:.3px}
  .update-card .uc-body{font-size:12.5px;line-height:1.6;color:#cfcfcf}
  .update-card.feat{border-top-width:4px}
  .update-card.feat .uc-ic{font-size:34px}
  .update-card.feat .uc-title{font-size:18px;color:var(--ac,#e10600)}
  .update-card.feat .uc-body{font-size:13.5px}
  .play-count{text-align:center;margin-top:16px;font-size:12px;color:var(--lgrey);font-family:var(--num);letter-spacing:.5px;min-height:16px}
  .community-link{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:14px;text-decoration:none;text-align:center}
  .community-link .cl-txt{font-size:13px;font-weight:700;color:var(--gold)}
  .community-link .cl-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:9px;
    background:#06c755;color:#fff;font-size:14px;font-weight:800;letter-spacing:.5px;
    box-shadow:0 4px 14px rgba(6,199,85,.35);transition:transform .12s ease,box-shadow .12s ease}
  .community-link:hover .cl-btn{transform:translateY(-2px);box-shadow:0 7px 20px rgba(6,199,85,.5)}
  .community-link .cl-ic{font-size:16px}
  .field{margin-bottom:16px}
  .field>label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--lgrey);margin-bottom:7px;font-weight:700}
  .field input,.field select{width:100%;background:var(--dark);border:1px solid var(--grey);border-radius:8px;color:var(--white);
    padding:12px 13px;font-size:16px;font-weight:600;outline:none;transition:.15s;font-family:inherit}
  .field input:focus,.field select:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(225,6,0,.2)}
  .row{display:flex;gap:11px}.row .grow{flex:1}.row .n{width:92px}.row .n input{text-align:center;font-family:var(--num)}
  /* 名字欄 + 隨機骰子鈕 */
  .name-row{display:flex;gap:8px}
  .name-row input{flex:1;min-width:0}
  .dice-btn{flex:0 0 auto;width:48px;background:var(--dark);border:1px solid var(--grey);border-radius:8px;
    color:var(--white);font-size:22px;line-height:1;cursor:pointer;transition:.15s}
  .dice-btn:hover{border-color:var(--red);background:rgba(225,6,0,.14);transform:translateY(-1px)}
  .dice-btn:active{transform:rotate(20deg) scale(.95)}
  .mode-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mopt{border:1px solid var(--grey);border-radius:8px;padding:11px;cursor:pointer;background:var(--dark);transition:.15s}
  .mopt:hover{border-color:var(--lgrey)}
  .mopt.sel{border-color:var(--red);background:rgba(225,6,0,.14);box-shadow:0 0 0 1px var(--red) inset}
  .mopt .mt{font-size:13px;font-weight:800;margin-bottom:3px}
  .mopt .mdz{font-size:11px;color:var(--lgrey);line-height:1.35}
  .btn-start{width:100%;margin-top:6px;padding:15px;font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:1px;
    color:#fff;border:none;border-radius:11px;cursor:pointer;
    background:linear-gradient(180deg,#ff2a20,var(--red) 70%,#c00500);box-shadow:0 6px 20px rgba(225,6,0,.45)}
  .btn-start:hover{transform:translateY(-2px)}
  .serr{color:#ff6b6b;font-size:13px;min-height:18px;font-weight:600;margin-bottom:8px}

  /* Retirement */
  #retireScreen .sinner{max-width:600px}
  .retire-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-bottom:20px}
  .retire-cols .rc-col{min-width:0}
  .retire-cols .ach-grid{grid-template-columns:1fr}
  @media(max-width:560px){.retire-cols{grid-template-columns:1fr;gap:6px}}
  /* 職涯時間軸：固定高度的可捲動小框，不佔太多空間 */
  .timeline.framed{max-height:200px;overflow-y:auto;border:1px solid var(--grey);box-shadow:inset 0 2px 10px rgba(0,0,0,.4)}
  .timeline.framed::-webkit-scrollbar{width:7px}
  .timeline.framed::-webkit-scrollbar-thumb{background:var(--red);border-radius:4px}
  .timeline.framed::-webkit-scrollbar-track{background:transparent}
  /* 職業生涯總結：填滿下方空白的收尾文字 */
  .career-summary{background:linear-gradient(180deg,#22222d,#1a1a23);border:1px solid rgba(255,255,255,.06);
    border-left:3px solid var(--red);border-radius:10px;padding:14px 16px;margin-bottom:18px;
    font-size:14px;line-height:1.75;color:#d7d7dd}
  .career-summary .cs-name{color:var(--gold);font-weight:800}
  /* 生涯排名走勢折線圖 */
  .career-chart{background:linear-gradient(180deg,#191921,#141419);border:1px solid var(--grey);
    border-radius:10px;padding:10px 12px;margin-bottom:18px;box-shadow:inset 0 2px 10px rgba(0,0,0,.4)}
  .career-chart svg{display:block;width:100%;height:auto}
  .career-chart .cc-grid{stroke:rgba(255,255,255,.08);stroke-width:1}
  .career-chart .cc-lbl{fill:var(--lgrey);font-size:9px;font-family:var(--num)}
  .career-chart .cc-line{fill:none;stroke:var(--red);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
  .career-chart .cc-dot{fill:#fff;stroke:var(--red);stroke-width:2}
  .career-chart .cc-champ{fill:var(--gold);stroke:#c8940f;stroke-width:2}
  /* 生涯最匹配車手 */
  .match-box{background:linear-gradient(180deg,#26261c,#1b1b15);border:1px solid rgba(255,213,74,.4);border-radius:10px;
    padding:12px 14px;display:flex;align-items:center;gap:13px;box-shadow:0 3px 12px rgba(0,0,0,.3)}
  .match-box .mb-score{font-family:var(--num);font-size:30px;font-weight:900;color:var(--gold);line-height:1;
    text-shadow:0 0 14px rgba(255,213,74,.4);flex:0 0 auto}
  .match-box .mb-score small{font-size:14px;font-weight:800}
  .match-box .mb-info{flex:1;min-width:0}
  .match-box .mb-name{font-size:15px;font-weight:800;color:var(--white)}
  .match-box .mb-tag{font-size:11px;color:var(--lgrey);margin-top:2px}
  .legacy{text-align:center;margin:6px 0 18px}
  .legacy .big{font-size:40px;font-weight:900;color:var(--gold);text-shadow:0 0 24px rgba(255,213,74,.4);line-height:1.1}
  .legacy .sub{font-size:13px;color:var(--lgrey);margin-top:4px}
  .sumgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:16px}
  .sumcell{background:linear-gradient(180deg,#22222d,#1a1a23);border-radius:10px;padding:11px 8px;text-align:center;border:1px solid rgba(255,255,255,.06)}
  .sumcell .sv{font-size:22px;font-weight:900;font-family:var(--num);color:var(--gold)}
  .sumcell .sl{font-size:10px;text-transform:uppercase;color:var(--lgrey);letter-spacing:.5px;margin-top:2px}
  .timeline{background:linear-gradient(180deg,#191921,#141419);border-radius:10px;padding:6px 12px;margin-bottom:16px;max-height:210px;overflow-y:auto}
  .tl-row{display:flex;gap:9px;font-size:12px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05);align-items:baseline}
  .tl-row:last-child{border-bottom:none}
  .tl-yr{font-family:var(--num);color:var(--lgrey);width:64px;flex:0 0 auto;font-size:11px}
  .tl-tx{flex:1}.tl-tx b{color:var(--white)}
  .tl-medal{color:var(--gold);font-weight:800}

  /* 傳奇標題發光脈動 */
  .legacy .big{animation:legacyGlow 2.6s ease-in-out infinite}
  @keyframes legacyGlow{0%,100%{text-shadow:0 0 22px rgba(255,213,74,.35)}50%{text-shadow:0 0 46px rgba(255,213,74,.75)}}
  .legacy .crown{font-size:34px;line-height:1;margin-bottom:2px;filter:drop-shadow(0 0 12px rgba(255,213,74,.5));animation:crownFloat 3s ease-in-out infinite}
  @keyframes crownFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  .sumcell{transition:.15s}
  .sumcell:hover{transform:translateY(-2px);border-color:rgba(255,213,74,.4)}

  /* ===== 成就徽章牆 ===== */
  .ach-head{font-size:14px;font-weight:900;letter-spacing:.5px;margin:4px 0 11px;display:flex;align-items:center;gap:8px}
  .ach-head::before{content:"";width:5px;height:16px;border-radius:2px;background:linear-gradient(180deg,var(--gold),#c8940f);box-shadow:0 0 10px rgba(255,213,74,.6)}
  .ach-head span{margin-left:auto;font-family:var(--num);color:var(--gold);font-size:13px}
  .ach-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:18px}
  /* 生涯成就：固定高度可捲動小框，一次露出約 6 個 */
  .ach-box{max-height:308px;overflow-y:auto;border:1px solid var(--grey);border-radius:10px;padding:8px;
    background:linear-gradient(180deg,#191921,#141419);box-shadow:inset 0 2px 10px rgba(0,0,0,.4)}
  .ach-box .ach-grid{margin-bottom:0}
  .ach-box::-webkit-scrollbar{width:7px}
  .ach-box::-webkit-scrollbar-thumb{background:var(--red);border-radius:4px}
  .ach-box::-webkit-scrollbar-track{background:transparent}
  .ach{display:flex;gap:10px;align-items:center;padding:10px 11px;border-radius:11px;
    border:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,#22222d,#1a1a23);transition:.18s;position:relative;overflow:hidden}
  .ach.got{border-color:rgba(255,213,74,.5);background:linear-gradient(180deg,#2a271b,#1e1c15);
    box-shadow:0 0 16px rgba(255,213,74,.12),inset 0 1px 0 rgba(255,255,255,.05)}
  .ach.got::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--gold),transparent 75%)}
  .ach.got:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,213,74,.22)}
  .ach.lock{opacity:.42;filter:grayscale(.7)}
  .ach-ic{font-size:24px;line-height:1;flex:0 0 auto;width:32px;text-align:center}
  .ach-n{font-size:12px;font-weight:800;color:var(--white)}
  .ach.got .ach-n{color:var(--gold)}
  .ach-d{font-size:10.5px;color:var(--lgrey);line-height:1.32;margin-top:2px}
  @media(max-width:480px){.ach-grid{grid-template-columns:1fr}}
  .expand-btn{width:100%;padding:11px;margin-bottom:18px;cursor:pointer;
    background:linear-gradient(180deg,#22222d,#1a1a23);color:var(--white);border:1px solid var(--grey);border-radius:10px;
    font-size:12px;font-weight:800;letter-spacing:.5px;transition:.15s;font-family:inherit}
  .expand-btn:hover{border-color:var(--gold);color:var(--gold)}
  .expand-btn .arw{display:inline-block;transition:transform .2s;margin-left:4px}
  .expand-btn.open .arw{transform:rotate(180deg)}

  /* ===== 響應式（RWD）：依裝置寬度自動調整，避免方塊被擠掉／蓋住 ===== */
  @media(max-width:400px){
    header{padding:10px 11px 11px}
    .brand{gap:7px;margin-bottom:8px}
    .brand h1{font-size:12px}
    .brand .who{font-size:11px}
    .status-bar{gap:5px}
    .st{padding:6px 3px}
    .st .l{font-size:9px;letter-spacing:.2px}
    .st .v{font-size:14px}
    .attrs{gap:6px;padding:10px 12px 11px}
    .attr .an{font-size:9px}
    .attr .attr-num{font-size:14px}
    .attr .bar{height:5px}
    #feed{padding:12px}
    .card{padding:11px 12px}
    .actionbar{padding:9px 11px calc(9px + env(safe-area-inset-bottom,0))}
    .btn{padding:12px 8px;font-size:13px}
  }
  @media(max-width:330px){
    .attrs{gap:4px;padding:9px 8px}
    .attr .an{font-size:8px}
    .st .l{font-size:8.5px}
    .st .v{font-size:13px}
  }
  /* 橫向或矮螢幕：壓縮頂部，把垂直空間留給主畫面 */
  @media(max-height:520px){
    header{padding:8px 12px 9px}
    .brand{margin-bottom:7px}
    .attrs{padding:8px 14px}
    .attr .bar{height:4px;margin-top:3px}
  }