:root{
    --text:#f3f4f6;
    --muted:rgba(243,244,246,.72);

    --gold1:#fff7d1;
    --gold2:#ffd772;
    --gold3:#d6b35a;
    --gold4:#8a5b0a;

    --btnBlue1:#3b8dff;
    --btnBlue2:#0b3fb0;

    --red:#ff2b2b;

    --tabBd: rgba(255,255,255,.14);
    --tabTxt: rgba(243,244,246,.86);
  }

  *{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:center;



  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color:var(--text);
  font-family:"Teko","Noto Sans JP",system-ui,sans-serif;
  /*font-family: system-ui,-apple-system,"Noto Sans JP",Segoe UI,Roboto,sans-serif;*/
}


  /* =========================================================
     Stadium background (IMAGE BASE)
     ========================================================= */
  .stadiumBg{
    /*position:absolute; inset:0;*/
    overflow:hidden;
    border-radius: inherit;
    background:
      /* fallback gradients */
      radial-gradient(1200px 700px at 50% 22%, rgba(255,255,255,.10), transparent 55%),
      linear-gradient(180deg, rgba(10,14,30,.22) 0%, rgba(4,6,16,.70) 56%, rgba(0,0,0,.94) 100%),
      /* image 
      url("{% static 'results/img/stadium_bg.jpg' %}")*/;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: saturate(1.08) contrast(1.12);
  }

  /* overlay vignette + darkness */
  .stadiumBg::before{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(closest-side at 50% 22%, rgba(0,0,0,.05), rgba(0,0,0,.86) 78%),
      linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.76));
    pointer-events:none;
    z-index:2;
  }

  /* subtle spark particles overlay (still CSS, on top of image) */
  .stadiumBg::after{
    content:"";
    position:absolute; inset:0;
    background-image:
      radial-gradient(2px 2px at 10% 20%, rgba(255,210,120,.26), transparent 55%),
      radial-gradient(1px 1px at 18% 65%, rgba(255,255,255,.18), transparent 55%),
      radial-gradient(2px 2px at 36% 35%, rgba(120,190,255,.18), transparent 55%),
      radial-gradient(1px 1px at 52% 52%, rgba(255,210,120,.16), transparent 55%),
      radial-gradient(1px 1px at 64% 26%, rgba(255,255,255,.12), transparent 55%),
      radial-gradient(2px 2px at 78% 44%, rgba(120,190,255,.14), transparent 55%),
      radial-gradient(1px 1px at 86% 72%, rgba(255,210,120,.14), transparent 55%);
    opacity:.70;
    mix-blend-mode: screen;
    pointer-events:none;
    z-index:2;
    animation: drift 6.2s linear infinite;
  }

  @keyframes drift{
    0%{ transform: translateY(0); }
    50%{ transform: translateY(10px); }
    100%{ transform: translateY(0); }
  }

  /* =========================================================
     Root containers: Desktop & Mobile (responsive)
     ========================================================= */
  .wrap{
    width:min(1200px, 96vw);
  }
  .desktop{ display:none; }
  .mobile{ display:none; }

  @media (min-width: 900px){
    .desktop{ display:block; }
  }
  @media (max-width: 899px){
    .mobile{ display:block; }
  }

  /* =========================================================
     Desktop (PC)
     ========================================================= */
  .deskStage{
    position:relative;
    border-radius: 22px;
    border:1px solid rgba(255,255,255,.14);
    box-shadow: 0 30px 90px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);
    overflow:hidden;
  }
  .deskUI{
    position:relative;
    z-index:3;
    padding: 18px 18px 14px 18px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .deskTop{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 14px;
    border-radius: 16px;
    background: rgba(0,0,0,.34);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 45px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-weight: 1000; letter-spacing:.5px;
    font-size: 18px;
  }
  .brandDot{
    width:10px; height:10px; border-radius:999px;
    background: rgba(80,210,255,.95);
    box-shadow: 0 0 0 6px rgba(80,210,255,.16);
  }
  .deskLive{
    display:flex; align-items:center; gap:10px;
    font-weight: 1000;
    color: rgba(255,255,255,.92);
  }
  .deskLive .dot{
    width:9px; height:9px; border-radius:999px;
    background: var(--red);
    box-shadow: 0 0 0 6px rgba(255,43,43,.18);
  }
  .deskActions{ display:flex; align-items:center; gap:10px; }
  .pillBtn{
    padding:8px 12px;
    border-radius: 10px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: rgba(243,244,246,.92);
    font-weight: 900;
    cursor:pointer;
  }
  .ctaBtn{
    padding:8px 14px;
    border-radius: 10px;
    border:1px solid rgba(140,200,255,.30);
    background: linear-gradient(180deg, rgba(59,141,255,.95), rgba(11,63,176,.92));
    color:#fff;
    font-weight: 1000;
    cursor:pointer;
    box-shadow: 0 14px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
  }
  .deskGrid{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:14px;
  }
  .deskCard{
    border-radius: 18px;
    background: rgba(0,0,0,.30);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 55px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
    overflow:hidden;
  }
  .deskCardPad{ padding: 16px; }
  .deskCardTitle{
    font-weight: 1100;
    letter-spacing:.8px;
    font-size: 20px;
    color: rgba(255,255,255,.92);
    display:flex; align-items:center; justify-content:space-between;
  }
  .subNote{ margin-top: 4px; color: var(--muted); font-weight: 800; }
  .nowName{
    margin-top: 14px;
    font-size: 30px;
    font-weight: 1100;
    letter-spacing:.6px;
    text-shadow: 0 10px 22px rgba(0,0,0,.65);
  }
  .nowScoreRow{
    margin-top: 12px;
    display:flex;
    align-items:baseline;
    gap:14px;
    flex-wrap:wrap;
  }
  .nowScore{
    font-size: 72px;
    font-weight: 1200;
    letter-spacing: 1px;
    background: linear-gradient(180deg, var(--gold1) 0%, var(--gold2) 28%, #d6b35a 70%, #8a5b0a 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow: 0 22px 55px rgba(0,0,0,.75);
    filter: drop-shadow(0 0 22px rgba(214,179,90,.22));
    line-height:1;
  }
  .confirmed{
    font-weight: 1100;
    color: rgba(255,232,166,.95);
    letter-spacing:.8px;
    display:flex; align-items:center; gap:10px;
    padding: 8px 10px;
    border-radius: 10px;
    border:1px solid rgba(214,179,90,.45);
    background: rgba(214,179,90,.10);
  }
  .lock{
    display:inline-flex;
    width:20px;height:20px;
    border-radius:6px;
    align-items:center; justify-content:center;
    background: rgba(255,255,255,.10);
  }
  .rankBar{
    display:flex; align-items:center; gap:14px;
    font-weight: 700;
    font-size: 22px;
    margin-top: -10px;
  }
  .DeskrankBar{
    margin-top: 10px!important;
  }
  .rankNum{
    font-size: 35px;
  }
.rankArrow{
  width:24px;   /* 好きなサイズ */
  height:24px;

  background-image: url("{% static 'results/img/up.png' %}");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  display:inline-block;

}
  .rankUpTag{
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(255,209,102,.60);
    background: rgba(255,209,102,.10);
    color: rgba(255,209,102,.98);
    font-size: 14px;
    font-weight: 1100;
    letter-spacing:.8px;
  }
  .goldLine{
    height:2px;
    background: linear-gradient(90deg, transparent, rgba(214,179,90,.75), transparent);
    box-shadow: 0 0 18px rgba(214,179,90,.25);
    opacity:.9;
  }
  .highScore{
    margin-top: 10px;
    text-align:center;
    font-size: 34px;
    font-weight: 1200;
    letter-spacing: 1px;
    background: linear-gradient(180deg, var(--gold1) 0%, var(--gold2) 35%, #d6b35a 75%, #8a5b0a 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow: 0 20px 50px rgba(0,0,0,.70);
  }
  .presentMini{
    margin-top: 4px;
    text-align:center;
    color: rgba(243,244,246,.82);
    font-weight: 900;
    letter-spacing:.4px;
  }
  .streamBox{
    margin-top: 14px;
    border-radius: 14px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.22);
    overflow:hidden;
  }
  .streamHead{
    padding: 12px 14px;
    display:flex; align-items:center; gap:10px;
    font-weight: 1100;
    letter-spacing:.8px;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .streamBody{
    padding: 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
  }
  .streamBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid rgba(140,200,255,.30);
    background: linear-gradient(180deg, rgba(59,141,255,.98), rgba(11,63,176,.96));
    color:#fff;
    font-weight: 1100;
    letter-spacing:.6px;
    text-decoration:none;
    box-shadow: 0 18px 55px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
    min-width: 220px;
  }
  .cam{
    width:22px;height:16px;border-radius:4px;background:rgba(255,255,255,.92);
    position:relative;
  }
  .cam:after{
    content:"";
    position:absolute; right:-7px; top:4px;
    width:0;height:0;
    border-left:9px solid rgba(255,255,255,.92);
    border-top:4px solid transparent;
    border-bottom:4px solid transparent;
  }
  .partner{
    color: rgba(243,244,246,.78);
    font-weight: 900;
    letter-spacing:.6px;
    text-align:right;
  }
  .partner b{ color:#fff; letter-spacing:1px; }

  .lbHead{
    padding: 14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .lbTitle{
    font-weight: 1100;
    letter-spacing:.8px;
    font-size: 20px;
  }
  .lbPowered{
    color: rgba(243,244,246,.78);
    font-weight: 900;
    font-size: 12px;
    display:flex; align-items:center; gap:8px;
  }
  .lbLogo{
    width:24px;height:24px;border-radius:999px;
    background: rgba(255,255,255,.10);
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.14);
  }
  .lbRows{ padding: 10px 12px 14px 12px; display:flex; flex-direction:column; gap:8px; }
  .lbRow{
    display:flex; align-items:center; justify-content:space-between;
    padding: 12px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    font-weight: 1100;
    letter-spacing:.3px;
  }
  .lbRow .left{ display:flex; align-items:center; gap:10px; }
  .lbRank{
    width:26px;
    display:inline-flex; align-items:center; justify-content:center;
    font-weight: 1200;
    color: rgba(255,255,255,.92);
  }
  .lbRow.highlight{
    background: linear-gradient(90deg, rgba(42,164,255,.00), rgba(42,164,255,.28) 30%, rgba(42,164,255,.28) 70%, rgba(42,164,255,.00));
    border-color: rgba(42,164,255,.35);
    box-shadow: 0 0 22px rgba(42,164,255,.22), inset 0 0 18px rgba(42,164,255,.12);
  }

  .deskFooter{
    margin-top: 4px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(0,0,0,.30);
    border:1px solid rgba(255,255,255,.10);
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    backdrop-filter: blur(10px);
  }
  .sponsorLine{
    display:flex; align-items:center; gap:10px;
    font-weight: 900;
    color: rgba(243,244,246,.82);
    letter-spacing:.4px;
  }
  .badgeNitori{
    display:inline-flex; align-items:center; justify-content:center;
    padding: 4px 10px;
    border-radius: 6px;
    /*background: #0aa770;*/
    color:#fff;
    font-weight: 1100;
    letter-spacing: .8px;
  }
  .footerBtns{ display:flex; gap:10px; }
  .ghostBtn{
    padding:10px 14px;
    border-radius: 10px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color:#fff;
    font-weight: 1000;
    cursor:pointer;
  }

  /* =========================================================
     Mobile UI (NO device frame)
     ========================================================= */
  .phone{
    position:relative;
    overflow:hidden;
    width: 100%;
    min-height: 100vh;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .phone .ui{
    position:relative;
    z-index:3;
    padding: 5px 5px 5px;
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height: 100vh;
  }

  /* === Top unified bar (LIVE + apparatus tabs + arrow) === */
  .topBar{
    padding: 10px 10px;
    border-radius: 18px;
    background: rgba(0,0,0,.38);
    border:1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 45px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
  }
  .topRow{
    display:flex;
    align-items:center;
    gap:10px;
    /*justify-content: space-between; /* ←追加 */
  }
  .liveBadge{
    display:flex; align-items:center; gap:10px;
    font-weight: 1100;
    letter-spacing:.8px;
    font-size: 15px;
    text-transform:uppercase;
    white-space:nowrap;
  }
  .liveBadge .dot{
    width:10px; height:10px; border-radius:999px;
    background: var(--red);
    box-shadow: 0 0 0 6px rgba(255,43,43,.20);
  }

  /* ✅ ここが重要：タブは横スクロールできる（見切れない） */
  .tabs{
    margin-left:auto;
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:nowrap;
    justify-content: space-between; /* ←追加 */
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none; /* Firefox */
    scroll-snap-type: x proximity;
  }
  .tabs::-webkit-scrollbar{ display:none; }

  .tab{
    flex: 0 0 auto;
    min-width:44px;
    padding: 8px 10px;
    border-radius: 9px;
    border:1px solid var(--tabBd);
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
    color: var(--tabTxt);
    font-weight: 1100;
    letter-spacing:.4px;
    text-align:center;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      0 10px 26px rgba(0,0,0,.42);
    user-select:none;
    cursor:pointer;
    position:relative;
    scroll-snap-align: center;
  }
  .tab::after{
    content:"";
    position:absolute; inset:-1px;
    border-radius: 9px;
    pointer-events:none;
    opacity:.0;
    box-shadow: 0 0 26px rgba(214,179,90,.18);
  }
  .tab.active{
    border-color: rgba(214,179,90,.92);
    background: linear-gradient(180deg, rgba(255,232,166,.50), rgba(214,179,90,.22));
    color:#fff;
    text-shadow: 0 0 16px rgba(214,179,90,.25);
  }
  .tab.active::after{ opacity:1; }

  .swipeArrow{
    margin-left: 8px;
    font-weight: 1200;
    font-size: 20px;
    color: rgba(120,190,255,.95);
    text-shadow: 0 0 18px rgba(42,164,255,.45);
    filter: drop-shadow(0 0 12px rgba(42,164,255,.35));
    user-select:none;
    white-space:nowrap;
  }

  .swipeHint{
    text-align:center;
    font-weight: 900;
    color: rgba(243,244,246,.70);
    letter-spacing:.4px;
    font-size: 12px;
    margin-top: 2px;
  }

  .center{ margin-top:8px; text-align:center; }
  .athName{
    font-size:34px;
    font-weight:700;
    letter-spacing:.6px;
    text-shadow: 0 10px 22px rgba(0,0,0,.70);
    line-height:1.05;
  }
  #deskRank{
    font-size: 30px;
  }
  .athName small{ font-size:18px; font-weight:1000; opacity:.92; }
  .score{
    margin-top:8px;
    font-size:77px;
    font-weight:700;
    letter-spacing:1px;
    line-height:1;
    background: linear-gradient(180deg, var(--gold1) 0%, var(--gold2) 28%, #d6b35a 70%, #8a5b0a 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow: 0 22px 55px rgba(0,0,0,.75);
    filter: drop-shadow(0 0 22px rgba(214,179,90,.22));
  }
  .rankLine{
    margin-top:10px;
    font-size:36px;
    font-weight:1100;
    display:flex; align-items:center; justify-content:center;
    gap:12px;
    text-shadow: 0 10px 30px rgba(0,0,0,.65);
  }
  .arrowUp{
    display:none;
    width:0;height:0;
    border-left:11px solid transparent;
    border-right:11px solid transparent;
    border-bottom:16px solid rgba(255,209,102,.98);
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.65));
    transform: translateY(-1px);
  }
  .center::after{
    content:"";
    display:block;
    height:2px;
    margin: 3px auto 0;
    width: min(340px, 90%);
    background: linear-gradient(90deg, transparent, rgba(214,179,90,.75), transparent);
    box-shadow: 0 0 18px rgba(214,179,90,.25);
    opacity:.9;
  }

  .panel{
    margin-top:10px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    overflow:hidden;
    background: rgba(0,0,0,.30);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 55px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .panelHead{
    padding:9px 12px;
    font-weight:1100;
    letter-spacing:.6px;
    color: rgba(255,255,255,.90);
    border-bottom:1px solid rgba(255,255,255,.10);
    display:flex; align-items:center; justify-content:space-between;
    font-size:14px;
  }
  .chip{
    display:none;
    font-size:12px;
    font-weight:1100;
    letter-spacing:.8px;
    padding:4px 10px;
    border-radius:999px;
    border:1px solid rgba(255,209,102,.60);
    background: rgba(255,209,102,.10);
    color: rgba(255,209,102,.98);
  }
  .rows{ display:flex; flex-direction:column; }
  .row{
    display:flex; align-items:center; justify-content:space-between;
    padding:9px 12px;
    border-bottom:1px solid rgba(255,255,255,.08);
    font-weight: 1000;
    font-size:14px;
  }
  .row:last-child{ border-bottom:none; }
  .row .left{ display:flex; align-items:center; gap:10px; }
  .pos{ width:24px; text-align:right; opacity:.95; }
  .name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
  .total{ opacity:.95;font-size:20px; }

  .row.highlight{
    position:relative;
    background: linear-gradient(90deg, rgba(42,164,255,.00), rgba(42,164,255,.30) 30%, rgba(42,164,255,.30) 70%, rgba(42,164,255,.00));
  }
  .row.highlight::before{
    content:"";
    position:absolute; inset:-1px 0;
    border-top:1px solid rgba(42,164,255,.45);
    border-bottom:1px solid rgba(42,164,255,.45);
    box-shadow: 0 0 22px rgba(42,164,255,.42), inset 0 0 22px rgba(42,164,255,.18);
    pointer-events:none;
  }
  .row.highlight .pos,
  .row.highlight .name,
  .row.highlight .total{
    color:#fff;
    text-shadow: 0 0 14px rgba(42,164,255,.35);
  }

  .streamBtnM{
    margin-top:auto;
    display:flex; align-items:center; justify-content:center;
    gap:12px;
    padding:16px 14px;
    border-radius:12px;
    border:1px solid rgba(140,200,255,.30);
    background: linear-gradient(180deg, rgba(59,141,255,.98), rgba(11,63,176,.96));
    color:#fff;
    font-weight: 1100;
    letter-spacing:.6px;
    text-decoration:none;
    box-shadow: 0 22px 60px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.12);
  }
  .presented{
    margin-top: 8px;
    display:flex; align-items:center; justify-content:center; gap:10px;
    font-weight: 900;
    color: rgba(243,244,246,.80);
    letter-spacing:.4px;
    font-size: 14px;
    padding-bottom: 10px;
    opacity:.95;
  }

  /* NEW LEADER */
  .leaderBanner{
    position:absolute;
    left:0; right:0;
    top: 58px;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(0,0,0,.68), rgba(0,0,0,.12));
    display:none;
    text-align:center;
    z-index: 4;
  }
  .leaderInner{
    display:inline-flex; align-items:center; gap:12px;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid rgba(214,179,90,.70);
    background: linear-gradient(180deg, rgba(255,232,166,.26), rgba(214,179,90,.18));
    box-shadow: 0 22px 70px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.10);
    font-weight: 1100;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 28px;
    color: #ffe9a6;
    text-shadow: 0 10px 30px rgba(0,0,0,.60);
    position:relative;
    overflow:hidden;
  }
  .leaderInner:after{
    content:"";
    position:absolute;
    inset:-40% -20%;
    background:
      radial-gradient(closest-side at 30% 50%, rgba(255,209,102,.20), transparent 60%),
      radial-gradient(closest-side at 70% 50%, rgba(255,209,102,.18), transparent 60%);
    animation: shimmer 2.2s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes shimmer{
    0%{ transform: translateX(-8%); opacity:.45; }
    50%{ transform: translateX(8%); opacity:.80; }
    100%{ transform: translateX(-8%); opacity:.45; }
  }
  .flame{ font-size:24px; filter: drop-shadow(0 10px 22px rgba(0,0,0,.55)); }

  /* state classes */
  .state-regular .chip{ display:none; }
  .state-regular .leaderBanner{ display:none; }
  .state-regular .arrowUp{ display:none; }

  .state-rankup .chip{ display:inline-flex; }
  .state-rankup .leaderBanner{ display:none; }
  .state-rankup .arrowUp{ display:inline-block; }

  .state-newleader .chip{ display:none; }
  .state-newleader .leaderBanner{ display:block; }
  .state-newleader .arrowUp{ display:none; }

.center{
  width:100%;
  aspect-ratio: 16 / 9;   /* ←これだけ */
  gap: 10px;
}
.score{
  font-family:"Teko", sans-serif;
  font-variant-numeric:tabular-nums;
  letter-spacing:1px;

  display:flex;
  justify-content:center;
  align-items:flex-end;
}
#liveStatusText{
  display:flex;
  align-items:center;      /* 上下中央 */
  justify-content:space-between; /* 左寄せのまま */
  gap:10px;

  height:24px;            /* ←安定（好みで 22〜28） */
  line-height:1;          /* ←文字のズレ防止 */
  width:100%;
}
#liveStatusText .chip{
  display:flex;
  align-items:center;
  height:20px;        /* chipの高さ */
  line-height:1;
  margin:0;           /* inline styleの margin は消すのが理想 */
}
/* 1行のレイアウトを安定させる */
.row{
  display:flex;
  align-items:center;
  gap:12px;
}

/* 左側は伸びる（名前が長くても右列を押さない） */
.row .left{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 1 1 auto;
  min-width: 0; /* 省略に必須 */
}

/* 名前が長い時に省略（右列を守る） */
.row .name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* 右のスコア列を固定幅にして、右揃え＋等幅数字 */
.row .total{
  flex: 0 0 84px;
  text-align: right;

  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "kern" 0; /* ←重要 */
  font-kerning: none;                         /* ←重要 */
  letter-spacing: 0;                          /* 一旦0に */
}
/* ===============================
   SCORE DETAIL (GAME STYLE)
================================ */

.row{
  cursor:pointer;
  transition:.25s;
}

.row:hover{
  background:rgba(255,255,255,.05);
}

/* detail container */
.rowDetail{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
  background:linear-gradient(
      90deg,
      rgba(0,0,0,.0),
      rgba(20,40,70,.55),
      rgba(0,0,0,.0)
  );
}

.row.open + .rowDetail{
  max-height:100px;
}

/* inner grid */
.detailGrid{
  display:flex;
  justify-content:space-around;
  padding:8px 10px;
  font-size:16px;
  font-weight:900;
  letter-spacing:.5px;
}

/* stat blocks */
.stat{
  text-align:center;
}

.stat label{
  display:block;
  font-size:10px;
  opacity:.65;
}

.stat span{
  font-variant-numeric:tabular-nums;
}

/* colors */
.stat.d span{ color:#7bd3ff; }
.stat.sb span{ color:#ffd772; }
.stat.e span{ color:#9cffb2; }
.stat.nd span{ color:#ff7b7b; }
.rowGroup {
  position: relative;
}
/* =========================
   Highlight line position fix
   - Move blue line from row to detail when opened
   ========================= */

/* 1) 通常時（openじゃない）は、これまで通り row に青ライン */
.row.highlight::before{
  content:"";
  position:absolute;
  inset:-1px 0;
  border:1px solid rgba(42,164,255,.45);
  border-bottom:1px solid rgba(42,164,255,.45);
  box-shadow:
    0 0 22px rgba(42,164,255,.18),
    inset 0 0 22px rgba(42,164,255,.18);
  pointer-events:none;
}

/* 2) open時は row 側の「下線」だけ消す（枠は残してOK） */
.row.highlight.open::before{
  border-bottom: 0;
}

/* 3) detail 側の一番下に “青い線” を描画する */
.rowDetail{
  position: relative;
}

.row.highlight.open + .rowDetail::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background: linear-gradient(
    90deg,
    rgba(42,164,255,0),
    rgba(42,164,255,.95),
    rgba(42,164,255,0)
  );
  box-shadow: 0 0 18px rgba(42,164,255,.35);
  pointer-events:none;
}

/* 4) detail 自体の区切り線が邪魔なら消す（必要なら） */
.rowDetail{
  /* border-bottom: 0; */
}
/* =========================
   DETAIL SIDE GLOW LINE
   ========================= */

.row.highlight.open + .rowDetail{
  position: relative;
}

/* 左右の青ライン */
.row.highlight.open + .rowDetail::before{
  content:"";
  position:absolute;
  inset:0;
  border-left:1px solid rgba(42,164,255,.45);
  border-right:1px solid rgba(42,164,255,.45);
  pointer-events:none;

  /* 発光 */
  box-shadow:
    inset 22px 0 22px -22px rgba(42,164,255,.25),
    inset -22px 0 22px -22px rgba(42,164,255,.25);
}

/* 下ライン（前回分を強化） */
.row.highlight.open + .rowDetail::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;

  background: linear-gradient(
    90deg,
    rgba(42,164,255,0),
    rgba(42,164,255,.95),
    rgba(42,164,255,0)
  );

  box-shadow:0 0 18px rgba(42,164,255,.45);
  pointer-events:none;
}
.detailGrid.aa{
  grid-template-columns: repeat(2,1fr);
}

.stat.aa-ap{
  padding:3px;
  /*border-radius:12px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);*/
}

.stat.aa-ap label{
  font-weight:800;
  letter-spacing:.06em;
}

.stat.aa-ap .mini{
  margin-top:6px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2px;
  font-size:11px;
  opacity:.8;
}


.chip{
  display:inline-block;
  padding:10px 18px;
  border-radius:12px;
  font-weight:900;
  font-size:16px;
  letter-spacing:0.12em;

  background:rgba(255,255,255,0.95);
  border:3px solid transparent;
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
  transition:all .25s ease;
}

.chip-standby{
  color:#e60033;
  border-color:#e60033;
  box-shadow:0 0 18px rgba(230,0,51,0.4);
}
.chip-go{
  color:#0f7a2f;
  border-color:#0f7a2f;
  box-shadow:0 0 18px rgba(15,122,47,0.5);
}
.chip-acting{
  color:#0b4fc2;
  border-color:#0b4fc2;
  box-shadow:0 0 18px rgba(11,79,194,0.5);
}
.chip-judging{
  color:#6a1fbf;
  border-color:#6a1fbf;
  box-shadow:0 0 18px rgba(106,31,191,0.5);
}
.chip-confirmed{
  color:#b8860b;
  border-color:#b8860b;
  background:linear-gradient(135deg,#fff7d6,#ffe082);
  box-shadow:0 0 25px rgba(255,215,0,0.8);
}
#PR{
  aspect-ratio:16/9;
  width:100%;
  max-width:960px;
}
/* =========================
   TOP TOGGLE + STREAM
========================= */
.liveTopToggle{
  position:relative;
  display:flex;
  width:fit-content;
  margin:0 auto 20px;
  padding:4px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  overflow:hidden;
}

.liveTopToggleBtn{
  position:relative;
  z-index:2;
  min-width:108px;
  padding:10px 16px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.86);
  font-weight:1100;
  letter-spacing:.08em;
  border-radius:999px;
  cursor:pointer;
  font-family: "Teko", "Noto Sans JP", system-ui, sans-serif;
}

.liveTopToggleBtn.is-active{
  color:#fff;
}

.liveTopTogglePill{
  position:absolute;
  top:4px;
  left:4px;
  width:calc(50% - 4px);
  height:calc(100% - 8px);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(59,141,255,.98), rgba(11,63,176,.96));
  box-shadow:0 10px 24px rgba(11,63,176,.35);
  transition:transform .22s ease;
  z-index:1;
}

.topPane{
  width:100%;
}

.topPane[hidden]{
  display:none !important;
}

.streamEmbedWrap{
  width:100%;
  aspect-ratio:16 / 9;
  border-radius:16px;
  overflow:hidden;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 55px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
}

.streamEmbedWrap iframe{
  width:100%;
  height:100%;
  display:block;
}

.streamMetaRow{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.streamNowLabel{
  font-weight:1000;
  letter-spacing:.06em;
  color:rgba(243,244,246,.92);
}

.streamOpenBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(140,200,255,.30);
  background:linear-gradient(180deg, rgba(59,141,255,.98), rgba(11,63,176,.96));
  color:#fff;
  text-decoration:none;
  font-weight:1100;
  letter-spacing:.04em;
  box-shadow:0 14px 36px rgba(0,0,0,.40);
}

@media (max-width: 520px){
  .liveTopToggle{
    width:100%;
  }

  .liveTopToggleBtn{
    flex:1 1 0;
    min-width:0;
  }

  .streamMetaRow{
    flex-direction:column;
    align-items:stretch;
  }

  .streamOpenBtn{
    width:100%;
  }
}
.liveTopToggle{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:30;

  display:flex;
  width:auto;
  margin:0;
  padding:3px;
  border-radius:999px;
  background:rgba(10,14,30,.72);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(8px);
  overflow:hidden;

  box-shadow:0 8px 24px rgba(0,0,0,.28);
}

.liveTopToggleBtn{
  position:relative;
  z-index:2;
  min-width:72px;
  padding:7px 10px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.72);
  font-weight:1000;
  font-size:11px;
  letter-spacing:.08em;
  border-radius:999px;
  cursor:pointer;
}

.liveTopToggleBtn.is-active{
  color:#fff;
}

.liveTopTogglePill{
  position:absolute;
  top:3px;
  left:3px;
  width:calc(50% - 3px);
  height:calc(100% - 6px);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(59,141,255,.92), rgba(11,63,176,.90));
  box-shadow:0 6px 18px rgba(11,63,176,.28);
  transition:transform .22s ease;
  z-index:1;
}

@media (max-width: 520px){
  .liveTopToggle{
    right:8px;
    bottom:8px;
  }

  .liveTopToggleBtn{
    min-width:64px;
    padding:6px 9px;
    font-size:10px;
  }
}
.presented{
  position:absolute;
  left: 10px;
  bottom: 0px;
  display:flex;
  justify-content:center;
  z-index:4;
}


<!-- =========================
     Desktop / PC
     ========================= -->

.deskGridUnified{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:14px;
  align-items:stretch;
}

.deskColLeft,
.deskColRight{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}

.deskStatusWrap{
  margin-top:10px;
}

.deskStatusCenter{
  width:100%;
  aspect-ratio:auto;
  min-height:auto;
  margin-top:0;
}

#deskLiveStatusText{
  display:flex;
  align-items:center;
  justify-content:end;
  gap:10px;
  height:24px;
  line-height:1;
  width:100%;
}

.deskRankingCard{
  padding:14px;
}

.desktop .deskColRight .panel{
  margin-top:0;
  background: rgba(0,0,0,.20);
  min-height:100%;
}

/* desk tabs */
#deskTabs{
  margin:10px auto;
}

/* accordion row */
.lbRowGroup{
  position:relative;
}

.lbRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  font-weight:1100;
  letter-spacing:.3px;
  cursor:pointer;
  transition:.25s;
  position:relative;
}

.lbRow:hover{
  background:rgba(255,255,255,.08);
}

.lbRow::after{
  content:"▼";
  font-size:10px;
  opacity:.65;
  margin-left:8px;
  transition:transform .25s ease;
}

.lbRow.open::after{
  transform:rotate(180deg);
}

.lbRow .left{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 auto;
  min-width:0;
}

.lbRank{
  width:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:1200;
  color:rgba(255,255,255,.92);
}

.lbName{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.lbTotal{
  flex:0 0 84px;
  text-align:right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "kern" 0;
  font-kerning:none;
  letter-spacing:0;
  font-size:20px;
}

.lbRow.highlight{
  position:relative;
  background:linear-gradient(
    90deg,
    rgba(42,164,255,.00),
    rgba(42,164,255,.28) 30%,
    rgba(42,164,255,.28) 70%,
    rgba(42,164,255,.00)
  );
  border-color:rgba(42,164,255,.35);
  box-shadow:
    0 0 22px rgba(42,164,255,.22),
    inset 0 0 18px rgba(42,164,255,.12);
}

.lbRowDetail{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease, padding-top .35s ease;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.0),
    rgba(20,40,70,.55),
    rgba(0,0,0,.0)
  );
  border-radius:0 0 10px 10px;
  padding-top:0;
}

.lbRow.open + .lbRowDetail{
  padding-top:6px;
}

.lbDetailGrid{
  display:flex;
  justify-content:space-around;
  padding:8px 10px 10px;
  font-size:16px;
  font-weight:900;
  letter-spacing:.5px;
}

.lbStat{
  text-align:center;
  min-width:52px;
}

.lbStat label{
  display:block;
  font-size:10px;
  opacity:.65;
  margin-bottom:2px;
}

.lbStat span{
  font-variant-numeric:tabular-nums;
}

.lbStat.d span{ color:#7bd3ff; }
.lbStat.sb span{ color:#ffd772; }
.lbStat.e span{ color:#9cffb2; }
.lbStat.nd span{ color:#ff7b7b; }

.lbRow.highlight.open{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  border-bottom-color:transparent;
}

.lbRow.highlight.open + .lbRowDetail{
  position:relative;
}

.lbRow.highlight.open + .lbRowDetail::before{
  content:"";
  position:absolute;
  inset:0;
  border-left:1px solid rgba(42,164,255,.45);
  border-right:1px solid rgba(42,164,255,.45);
  pointer-events:none;
  box-shadow:
    inset 22px 0 22px -22px rgba(42,164,255,.25),
    inset -22px 0 22px -22px rgba(42,164,255,.25);
}

.lbRow.highlight.open + .lbRowDetail::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:linear-gradient(
    90deg,
    rgba(42,164,255,0),
    rgba(42,164,255,.95),
    rgba(42,164,255,0)
  );
  box-shadow:0 0 18px rgba(42,164,255,.45);
  pointer-events:none;
}

@media (max-width: 1200px){
  .deskGridUnified{
    grid-template-columns:1fr;
  }
}
.lbRowGroup{
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.lbRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 12px 14px;
  position: relative;
}

.lbRowDetail{
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease;
}

.lbDetailGrid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  padding: 0 14px 14px;
}

/*.lbStat{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 10px 12px;
}*/

.lbStat label{
  display: block;
  font-size: 11px;
  opacity: .7;
  margin-bottom: 4px;
}

.lbStat span{
  font-size: 16px;
  font-weight: 700;
}
.lbRow.open + .lbRowDetail{
  max-height:200px;
  padding-top:6px;
}


.classDrawerToggle{
  position:absolute;
  top:5px;
  right:10px;
  z-index:1200;

  width:42px;
  height:42px;
  border:none;
  border-radius:12px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(8,12,28,.72);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  backdrop-filter:blur(8px);
  cursor:pointer;
}

.classDrawerToggle svg{
  width:22px;
  height:22px;
}

.classDrawerBackdrop{
  position:fixed;
  inset:0;
  z-index:1290;
  background:rgba(0,0,0,.36);
  backdrop-filter:blur(2px);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}

.classDrawerBackdrop.is-open{
  opacity:1;
  pointer-events:auto;
}

.classDrawer{
  position:fixed;
  top:0;
  right:0;
  width:min(360px, 55vw);
  height:100dvh;
  z-index:1300;

  background:linear-gradient(180deg, rgba(7,10,24,.98), rgba(8,12,30,.96));
  border-left:1px solid rgba(255,255,255,.10);
  box-shadow:-20px 0 50px rgba(0,0,0,.45);

  transform:translateX(100%);
  transition:transform .24s ease;
  display:flex;
  flex-direction:column;
}

.classDrawer.is-open{
  transform:translateX(0);
}

.classDrawerHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.classDrawerTitle{
  color:#fff;
  font-size:18px;
  font-weight:900;
  letter-spacing:.08em;
}

.classDrawerClose{
  width:38px;
  height:38px;
  border:none;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.10);
}

.classDrawerBody{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;
}

.classDrawerItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:54px;
  padding:12px 14px;
  border-radius:14px;
  text-decoration:none;
  color:#fff;

  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:all .18s ease;
}

.classDrawerItem:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.16);
}

.classDrawerItem.is-active{
  background:linear-gradient(180deg, rgba(59,141,255,.98), rgba(11,63,176,.96));
  border-color:rgba(140,200,255,.30);
  box-shadow:0 10px 24px rgba(11,63,176,.28);
}

.classDrawerItemName{
  font-size:15px;
  font-weight:900;
  letter-spacing:.03em;
}

.classDrawerItemBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
}

.scoreLabel{
  min-height: 18px;
  margin-top: 6px;
  margin-bottom: 2px;
  text-align: center;
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .12em;
  color: rgba(243,244,246,.72);
  text-transform: uppercase;
}

.desktop .scoreLabel{
  font-size: 16px;
  margin-top: 8px;
  margin-bottom: 4px;
}

#deskScore{
  font-size: 120px;
}
.deskEventRanks{
  display:contents;
  gap:10px;
  margin-top:12px;
  justify-content:space-between;
}

.deskEventRankChip{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;   /* ←変更 */
  gap:6px;

  padding:8px 0;
  color:rgba(243,244,246,.92);
  font-weight:1000;
  font-size:18px;
  letter-spacing:.03em;
}

.mobileEventRanks{
  display:flex;
  gap:6px;
  margin-top: 8px;
}

.mobileEventRankChip{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:6px 4px;
  font-weight:700;
}