:root{
      --bg0:#070a12;
      --bg1:#0b1020;
      --border:rgba(255,255,255,.10);
      --text:rgba(255,255,255,.92);
      --muted:rgba(255,255,255,.66);

      --ok:#2bd576;
      --bad:#ff4d5a;
      --warn:#ffcc33;
      --info:#4db5ff;

      --red:#ff2e45;
      --blue:#256bff;

      --shadow: 0 18px 52px rgba(0,0,0,.55);
      --shadow2: 0 10px 26px rgba(0,0,0,.42);

      --r12:12px;
      --r14:14px;
      --r16:16px;
      --r18:18px;
      --r22:22px;

      --sab: env(safe-area-inset-bottom, 0px);
      --sat: env(safe-area-inset-top, 0px);

      --font: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
      --mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family:var(--font);
      color:var(--text);
      background:
        radial-gradient(1100px 620px at 10% -10%, rgba(77,181,255,.18), transparent 55%),
        radial-gradient(900px 540px at 95% 5%, rgba(255,46,69,.16), transparent 60%),
        radial-gradient(900px 780px at 45% 110%, rgba(43,213,118,.10), transparent 62%),
        radial-gradient(700px 420px at 70% 55%, rgba(255,204,51,.06), transparent 64%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    /* soft shapes */
    .shapes{
      position:fixed;
      inset:0;
      pointer-events:none;
      overflow:hidden;
      z-index:0;
    }
    .blob{
      position:absolute;
      filter: blur(24px);
      opacity:.55;
      border-radius:999px;
      mix-blend-mode: screen;
    }
    .b1{ width:320px; height:320px; left:-120px; top:110px; background:rgba(77,181,255,.32); }
    .b2{ width:380px; height:380px; right:-160px; top:180px; background:rgba(255,46,69,.26); }
    .b3{ width:260px; height:260px; left:35%; bottom:-120px; background:rgba(43,213,118,.20); }
    .b4{ width:220px; height:220px; right:18%; bottom:160px; background:rgba(255,204,51,.16); opacity:.35; }

    .app{
      position:relative;
      z-index:1;
      width:100%;
      max-width:720px;
      margin:0 auto;
      padding: calc(var(--sat) + 10px) 12px calc(var(--sab) + 96px);
    }

    /* ===== HEADER (1 LINE ONLY) ===== */
    .topbar{
      position:sticky;
      top:0;
      z-index:20;
      padding:10px 10px;
      border:1px solid var(--border);
      border-radius: var(--r22);
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      box-shadow: var(--shadow2);
      backdrop-filter: blur(10px);
    }

    .toprow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }

    .leftCluster{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }

    .menuBtn{
      width:34px; height:34px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.18);
      color: rgba(255,255,255,.90);
      display:grid;
      place-items:center;
      cursor:pointer;
      user-select:none;
      box-shadow: 0 10px 22px rgba(0,0,0,.35);
    }
    .menuBtn:active{ transform: translateY(1px); }

    .playerName{
      font-weight:950;
      letter-spacing:.2px;
      font-size:16px;
      line-height:1.1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width: 48vw;
    }

    .balancePill{
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px 12px;
      border-radius: 999px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.18);
      box-shadow: 0 10px 24px rgba(0,0,0,.35);
      min-width: 160px;
      justify-content:space-between;
      flex:0 0 auto;
    }
    .balancePill .lbl{
      color:rgba(255,255,255,.65);
      font-size:11px;
      letter-spacing:.35px;
      text-transform:uppercase;
      white-space:nowrap;
    }
    .balancePill .amt{
      font-weight:950;
      font-family:var(--mono);
      font-size:14px;
      white-space:nowrap;
    }

    /* ===== Card base ===== */
    .card{
      margin-top:12px;
      border-radius: var(--r22);
      border:1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .cardBody{ padding:12px; }

    /* ===== Pills row (moved into Video card) ===== */
    .pillsRow{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
      padding: 12px 12px 0;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.18);
      font-size:12px;
      white-space:nowrap;
      color: rgba(255,255,255,.86);
    }
    .dot{
      width:9px;height:9px;
      border-radius:50%;
      background: var(--warn);
      box-shadow:0 0 0 3px rgba(255,204,51,.14);
      flex:0 0 auto;
    }

    /* ===== Video panel ===== */
    .videoWrap{
      position:relative;
      margin-top:12px;
      border-radius: var(--r18);
      overflow:hidden;
      border:1px solid rgba(255,255,255,.10);
      background:#000;
    }
    video#liveVideo{
      width:100%;
      height:auto;
      display:block;
      background:#000;
      aspect-ratio: 16/9;
    }
    .videoOverlay{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:18px;
      text-align:center;
      background:
        radial-gradient(720px 340px at 50% 10%, rgba(77,181,255,.14), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.84));
      cursor:pointer;
    }
    .playCTA{
      width:min(420px, 92%);
      border-radius:18px;
      border:1px solid rgba(255,255,255,.14);
      background: linear-gradient(180deg, rgba(28,50,34,.92), rgba(18,28,22,.92));
      box-shadow: 0 18px 44px rgba(0,0,0,.55);
      padding:16px;
      display:flex;
      align-items:center;
      gap:14px;
      justify-content:center;
    }
    .playIcon{
      width:54px; height:54px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.22);
      display:grid;
      place-items:center;
      box-shadow: 0 10px 24px rgba(0,0,0,.35);
      flex:0 0 auto;
    }
    .playTri{
      width:0; height:0;
      border-left:16px solid rgba(255,255,255,.92);
      border-top:10px solid transparent;
      border-bottom:10px solid transparent;
      margin-left:3px;
    }
    .playText{
      display:flex;
      flex-direction:column;
      gap:6px;
      text-align:left;
      min-width:0;
    }
    .playText .big{
      font-weight:950;
      font-size:16px;
      line-height:1.2;
    }
    .playText .small{
      font-size:12px;
      color:rgba(255,255,255,.70);
      line-height:1.35;
    }

    /* Video footer pills (Video ID / Round ID) */
    .videoFooterRow{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:flex-start;
      flex-wrap:wrap;
      margin-top:12px;
    }

    .mono{ font-family:var(--mono); }

    /* ===== Timeline strip ===== */
    .strip{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap:10px;
      margin-top:12px;
    }
    .kv{
      display:flex;
      flex-direction:column;
      gap:6px;
      min-width:0;
    }
    .kv .k{
      font-size:10px;
      color: rgba(255,255,255,.54);
      letter-spacing:.35px;
      text-transform:uppercase;
      padding-left:2px;
    }
    .kv .box{
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.16);
      padding:10px 10px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:40px;
    }
    .kv .v{
      font-weight:950;
      font-family:var(--mono);
      font-size:13px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .lamp{
      width:10px; height:10px;
      border-radius:50%;
      background: var(--warn);
      box-shadow: 0 0 0 4px rgba(255,204,51,.12);
    }

    /* ===== Verify row ===== */
    .verifyRow{
      display:grid;
      grid-template-columns: 1fr 1fr auto;
      gap:10px;
      margin-top:12px;
      align-items:center;
    }
    .input{
      width:100%;
      padding:11px 12px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.12);
      outline:none;
      background: rgba(0,0,0,.18);
      color: rgba(255,255,255,.92);
      font-size:13px;
      font-family: var(--mono);
      font-weight:900;
    }
    .input::placeholder{ color: rgba(255,255,255,.40); font-family:var(--font); font-weight:700; }
    .btn{
      appearance:none;
      border:1px solid rgba(255,255,255,.14);
      background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
      color: rgba(255,255,255,.92);
      padding:11px 14px;
      border-radius: 14px;
      cursor:pointer;
      font-weight:950;
      letter-spacing:.2px;
      box-shadow: 0 12px 26px rgba(0,0,0,.34);
      user-select:none;
    }
    .btn:active{ transform: translateY(1px) scale(.99); }
    .btnGreen{
      background: linear-gradient(180deg, rgba(43,213,118,.26), rgba(43,213,118,.10));
      border-color: rgba(43,213,118,.36);
    }

    /* ===== Tables ===== */
    .tableCard{
      border-radius: var(--r18);
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.14);
      overflow:hidden;
      margin-top:12px;
    }
    .tableHead{
      padding:12px;
      font-weight:950;
      letter-spacing:.2px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      background: rgba(0,0,0,.18);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .tableHead .sub{ color: rgba(255,255,255,.60); font-size:12px; font-weight:800; }
    .tableWrap{ width:100%; overflow:auto; }
    table{ width:100%; border-collapse:collapse; min-width:520px; }
    th,td{
      padding:10px 10px;
      text-align:left;
      font-size:12px;
      color: rgba(255,255,255,.84);
      border-bottom: 1px solid rgba(255,255,255,.06);
      white-space:nowrap;
    }
    th{
      position:sticky;
      top:0;
      background: rgba(10,14,26,.92);
      color: rgba(255,255,255,.70);
      text-transform:uppercase;
      letter-spacing:.35px;
      font-size:11px;
      z-index:1;
    }

    .sidePill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:4px 9px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      font-weight:950;
      font-size:11px;
    }
    .sidePill .miniDot{ width:8px;height:8px;border-radius:50%; }
    .sidePill.red{ background: rgba(255,46,69,.12); border-color: rgba(255,46,69,.30); }
    .sidePill.red .miniDot{ background: var(--red); }
    .sidePill.blue{ background: rgba(37,107,255,.12); border-color: rgba(37,107,255,.30); }
    .sidePill.blue .miniDot{ background: var(--blue); }

    /* ===== Bottom action bar ===== */
    .bottomBar{
      position:fixed;
      left:0; right:0;
      bottom:0;
      z-index:50;
      padding: 10px 12px calc(var(--sab) + 10px);
      background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.75) 35%, rgba(0,0,0,.88));
      backdrop-filter: blur(10px);
    }
    .bottomInner{
      max-width:720px;
      margin:0 auto;
      display:grid;
      grid-template-columns: minmax(0,1fr) minmax(0,1fr);
      gap:12px;
    }
    .sideBtn{
      border:none;
      border-radius:14px;
      padding:14px 16px;
      cursor:pointer;
      user-select:none;
      font-weight:900;
      letter-spacing:.5px;
      color:#fff;

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

      min-width:0;
      box-shadow: 0 18px 42px rgba(0,0,0,.55);
    }
    .sideBtn:active{ transform: translateY(1px) scale(.99); }

    .sideBtn .label{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:18px;
      min-width:0; /* prevent pushing odds */
    }
    .sideBtn .label span:last-child{
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .sideBtn .odds{
      border-radius:10px;
      padding:6px 10px;
      background: rgba(255,255,255,.15);
      border:1px solid rgba(255,255,255,.25);
      font-family:var(--mono);
      font-size:14px;
      width:68px;
      text-align:center;
      flex-shrink:0;
    }

    .sideBtn .sideName{
      font-size:18px;
      font-weight:900;
      letter-spacing:1.2px;
      white-space:nowrap;
      flex-shrink:0;
    }

    .sideBtn.red{ background: linear-gradient(90deg, rgba(255,46,69,.92), rgba(255,46,69,.70)); }
    .sideBtn.blue{ background: linear-gradient(90deg, rgba(37,107,255,.92), rgba(37,107,255,.70)); }

    /* ===== Modals ===== */
    .modalBack{
      position:fixed;
      inset:0;
      z-index:80;
      display:none;
      align-items:flex-end;
      justify-content:center;
      padding: 12px 12px calc(var(--sab) + 12px);
      background: rgba(0,0,0,.62);
      backdrop-filter: blur(6px);
    }
    .modalBack.show{ display:flex; }

    .sheet{
      width:100%;
      max-width:720px;
      border-radius: 22px;
      border:1px solid rgba(255,255,255,.14);
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
      box-shadow: 0 22px 60px rgba(0,0,0,.70);
      overflow:hidden;
    }
    .sheetHead{
      padding:12px 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      background: rgba(0,0,0,.18);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .sheetTitle{
      font-weight:950;
      letter-spacing:.35px;
      text-transform:uppercase;
      font-size:12px;
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }
    .sheetTitle .sideDot{
      width:10px; height:10px;
      border-radius:50%;
      box-shadow: 0 0 0 4px rgba(255,255,255,.06);
    }
    .sheetTitle .sideDot.red{ background: var(--red); box-shadow: 0 0 0 4px rgba(255,46,69,.16); }
    .sheetTitle .sideDot.blue{ background: var(--blue); box-shadow: 0 0 0 4px rgba(37,107,255,.16); }

    .closeX{
      width:36px;height:36px;
      border-radius: 12px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.18);
      color: rgba(255,255,255,.92);
      cursor:pointer;
      user-select:none;
      display:grid;
      place-items:center;
    }
    .closeX:active{ transform: translateY(1px); }

    .sheetBody{ padding:12px; }

    .field{
      display:flex;
      flex-direction:column;
      gap:8px;
      margin-bottom:12px;
    }
    .field .lbl{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:10px;
      color: rgba(255,255,255,.76);
      font-size:12px;
    }
    .field .lbl .hint{ color: rgba(255,255,255,.54); font-size:11px; }

    .chips{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap:8px;
    }
    .chipBtn{
      border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.16);
      color: rgba(255,255,255,.90);
      padding:10px 10px;
      font-weight:950;
      cursor:pointer;
      user-select:none;
      font-family:var(--mono);
      font-size:12px;
    }
    .chipBtn:active{ transform: translateY(1px); }

    .sheetStats{
      display:grid;
      grid-template-columns: minmax(0,1fr) minmax(0,1fr);
      gap:10px;
      margin-top:10px;
      border-top: 1px dashed rgba(255,255,255,.12);
      padding-top:10px;
    }
    .miniStat{
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.14);
      border-radius: 14px;
      padding:10px 10px;
      display:flex;
      flex-direction:column;
      gap:4px;
      min-width:0;
    }
    .miniStat .k{
      font-size:10px;
      color: rgba(255,255,255,.52);
      letter-spacing:.35px;
      text-transform:uppercase;
    }
    .miniStat .v{
      font-weight:950;
      font-family:var(--mono);
      font-size:13px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .placeBtn{
      width:100%;
      margin-top:12px;
      border:none;
      border-radius: 14px;
      padding: 13px 14px;
      font-weight:950;
      letter-spacing:.3px;
      cursor:pointer;
      user-select:none;
      color: rgba(255,255,255,.96);
      box-shadow: 0 18px 40px rgba(0,0,0,.55);
    }
    .placeBtn:active{ transform: translateY(1px) scale(.99); }
    .placeBtn.red{ background: linear-gradient(180deg, rgba(255,46,69,.86), rgba(255,46,69,.64)); }
    .placeBtn.blue{ background: linear-gradient(180deg, rgba(37,107,255,.86), rgba(37,107,255,.64)); }
    .placeBtn:disabled{ opacity:.55; cursor:not-allowed; }

    .aboutText{
      color: rgba(255,255,255,.80);
      font-size:13px;
      line-height:1.45;
    }
    .aboutText b{ font-weight:950; }
    .aboutList{
      margin:10px 0 0;
      padding-left:18px;
      color: rgba(255,255,255,.78);
      font-size:13px;
      line-height:1.45;
    }
    .notice{
      margin-top:10px;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.16);
      color: rgba(255,255,255,.80);
      font-size:12px;
      line-height:1.45;
    }

    @media (max-width: 420px){
      .balancePill{ min-width: 140px; padding:9px 10px; }
      .verifyRow{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
      .verifyRow .btn{ grid-column: 1 / -1; }
      table{ min-width: 480px; }
      .playerName{ max-width: 44vw; }
    }

    .hidden{ display:none !important; }

    /* ===== VIDEO: AUDIO-ONLY CONTROLS (WebKit: Chrome/Safari/Edge) ===== */
    #liveVideo::-webkit-media-controls-play-button { display: none !important; }
    #liveVideo::-webkit-media-controls-timeline { display: none !important; }
    #liveVideo::-webkit-media-controls-current-time-display { display: none !important; }
    #liveVideo::-webkit-media-controls-time-remaining-display { display: none !important; }
    #liveVideo::-webkit-media-controls-fullscreen-button { display: none !important; }
    #liveVideo::-webkit-media-controls-overflow-button { display: none !important; }

    /* Prevent big overlay play icon (some browsers) */
    #liveVideo::-webkit-media-controls-overlay-play-button { display: none !important; }