@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&display=swap');
  * { box-sizing: border-box; }
  :root { color-scheme: dark; }
  body { margin: 0; background: #0a0e1a; color: #e8edf6; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-synthesis: none; }
  header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 28px; border-bottom: 1px solid #1c2438; position: sticky; top: 0; background: #0a0e1abf; backdrop-filter: blur(6px); z-index: 5; }
  header h1 { margin: 0; font-size: 22px; letter-spacing: -.5px; }
  #conn { font-size: 13px; color: #8fa0bd; }
  #conn.live { color: #43d17c; }
  #conn.err { color: #ff9b6a; }
  main { width: 100%; padding: 22px 28px 40px; }
  [hidden] { display: none !important; }
  #empty { color: #8fa0bd; font-size: 14px; padding: 30px 4px; }

  #events { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
  .card { background: #11162a; border: 1px solid #232c45; border-radius: 12px; padding: 16px 18px; cursor: pointer; transition: border-color .15s, transform .1s; }
  .card:hover { border-color: #3d7bbf; transform: translateY(-2px); }
  .card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .card h2 { margin: 0 0 12px; font-size: 17px; font-weight: 650; letter-spacing: -.2px; line-height: 1.25; }
  .badge { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: .4px; white-space: nowrap; }
  .badge.live { background: #2b1a1a; color: #ff7b7b; }
  .badge.up { background: #12263b; color: #7ac5ff; }
  .chips { display: flex; gap: 6px; margin-bottom: 12px; }
  .chip { font-size: 11px; color: #b6c2d9; background: #1a2137; border: 1px solid #29335a; padding: 3px 9px; border-radius: 999px; }

  #detail { background: #fff0; color: #000; font-family: "Arvo", serif; min-height: 88vh; padding: 24px 28px 48px; }
  .back-link { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #d5d9e2; color: #111; font-family: Inter, system-ui, sans-serif; font-size: 14px; font-weight: 600; border-radius: 8px; padding: 8px 14px; cursor: pointer; margin-bottom: 18px; }
  .toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
  .toolbar .back-link { margin-bottom: 0; }
  .eye-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: #fff; border: 1px solid #d5d9e2; border-radius: 8px; cursor: pointer; color: #111; font-family: Inter, system-ui, sans-serif; }
  .eye-btn:hover { background: #f3f5f9; }
  .eye-btn svg { width: 20px; height: 20px; }
  #boards.hide-completed .board[data-type="COMPLETED_MATCH"] { display: none; }
  .back-link:hover { background: #f3f5f9; }
  #detail h2 { margin: 0 0 4px; font-size: 26px; letter-spacing: -.4px; }
  #detail-status { color: #55606e; font-size: 13px; margin: 0 0 26px; }

  #boards { max-width: 1100px; }
  .board { margin-bottom: 20px; }
  .board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
  .board-title { font-size: 15px; font-weight: 700; color: #333; }
  .board-state { font-size: 12px; color: #c0691a; font-weight: 700; }
  .cols, .row { display: grid; grid-template-columns: minmax(0, 1fr) 180px 180px; gap: 8px; align-items: center; }
  .cols { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: #777; text-align: center; margin-bottom: 6px; }
  .cols span:first-child { text-align: left; }
  .cols span:nth-child(2) { color: #1c62a8; }
  .cols span:nth-child(3) { color: #b0426b; }
  .row { padding: 8px 0; }
  .row .tname { font-size: 17px; font-weight: 700; color: #000; overflow-wrap: anywhere; }
  .cell { text-align: center; padding: 9px 6px; border-radius: 4px; }
  .cell strong { display: block; font-size: 20px; font-variant-numeric: tabular-nums; color: #000; letter-spacing: -.3px; }
  .cell small { display: block; font-size: 14px; color: #000; margin-top: 1px; }
  .cell.back { background: hsl(219,81%,81%) !important; --base: hsl(219,81%,81%); }
  .cell.lay { background: rgb(236,160,247) !important; --base: rgb(236,160,247); }
  .cell.na { background: #f0f1f5; }
  .cell.na strong, .cell.na small { color: #9aa0ac; }
  .cell.flash { animation: blink .6s ease-out; }
  @keyframes blink {
    from { box-shadow: inset 0 0 0 999px #ffd21f; }
    to { box-shadow: inset 0 0 0 0 transparent; }
  }
  @media (max-width: 640px) {
    header, main { padding-inline: 14px; }
    #events { grid-template-columns: 1fr; }
    #detail { padding-inline: 14px; }
    .cols, .row { grid-template-columns: minmax(0,1fr) 76px 76px; gap: 6px; }
    .row .tname { font-size: 15px; }
    .cell strong { font-size: 17px; }
  }
  header {
    display: none;
  }
  #dtitle {
    display: none;
  }
  #detail-status {
    display: none;
  }
  .board-head {
    display: none;
  }
  .cols span {
    display: none;
  }
  .tname {
    text-align: right;
    font-size: 35px !important;
    font-weight: bold;
    text-shadow: rgb(255, 255, 255) 3px 0px 0px, rgb(255, 255, 255) 2.83487px 0.981584px 0px, rgb(255, 255, 255) 2.35766px 1.85511px 0px, rgb(255, 255, 255) 1.62091px 2.52441px 0px, rgb(255, 255, 255) 0.705713px 2.91581px 0px, rgb(255, 255, 255) -0.287171px 2.98622px 0px, rgb(255, 255, 255) -1.24844px 2.72789px 0px, rgb(255, 255, 255) -2.07227px 2.16926px 0px, rgb(255, 255, 255) -2.66798px 1.37182px 0px, rgb(255, 255, 255) -2.96998px 0.42336px 0px, rgb(255, 255, 255) -2.94502px -0.571704px 0px, rgb(255, 255, 255) -2.59586px -1.50383px 0px, rgb(255, 255, 255) -1.96093px -2.27041px 0px, rgb(255, 255, 255) -1.11013px -2.78704px 0px, rgb(255, 255, 255) -0.137119px -2.99686px 0px, rgb(255, 255, 255) 0.850987px -2.87677px 0px, rgb(255, 255, 255) 1.74541px -2.43999px 0px, rgb(255, 255, 255) 2.44769px -1.73459px 0px, rgb(255, 255, 255) 2.88051px -0.838247px 0px;  
  }
  .cell.back, .cell.lay {
    width: 180px;
    border: 3px solid;
  }
  .cell strong {
    font-size: 55px;
  }
  .cell small {
    font-size: 32px;
    font-weight: 500 !important;
  }
  .lay {
    position: relative;
    left: -5px;
  }
  .row {
    padding: 2px 0;
  }
  .back {
    background: hsl(219,81%,81%) !important;
  }
  .lay {
    background: rgb(236,160,247) !important;
  }
  main > section:nth-of-type(2) > div > section:nth-of-type(2) :is(.back, .lay, ) {
    width: 125px;
    position: relative;
    top: 60px;
    height: 80px;
    left: 56px;
}
main > section:nth-of-type(2) > div > section:nth-of-type(2) :is(.row .tname)
 {
    position: relative;
    top: 60px;
     left: 53px;
}
main > section:nth-of-type(2) > div > section:nth-of-type(2) :is(.lay) {
    position: relative;
    left: -6px
}
main > section:nth-of-type(2) > div > section:nth-of-type(2) :is(.cell small) 
 {position: relative;
     top: -21px;
     font-size: 27px
}

main > section:nth-of-type(2) > div > section:nth-of-type(2) :is(.cell strong) {
    position: relative;
    font-size: 45px;
    top: -13px;
} 

  .cell small::before {
      content: "£";
  }

  .tname {
    text-align: right;
    font-size: 35px !important;
    font-weight: bold;

    color: #000 !important;

    /* Text ke beech thoda separation */
    letter-spacing: 1px;

    text-shadow:
        /* Black inner/dense shadow */
        0px 0px 1px #000,
        1px 0px 1px #000,
        -1px 0px 1px #000,
        0px 1px 1px #000,
        0px -1px 1px #000,

        /* White outer outline - ~5px */
        5px 0px 0px #fff,
        -5px 0px 0px #fff,
        0px 5px 0px #fff,
        0px -5px 0px #fff,

        3.5px 3.5px 0px #fff,
        -3.5px -3.5px 0px #fff,
        3.5px -3.5px 0px #fff,
        -3.5px 3.5px 0px #fff;
}

html, body {
  background-color: #fff0 !important;
}