:root{
    --bgTop:#0c0f14;
    --bgTop2:#0a0d12;
    --line:rgba(255,255,255,0.08);
    --text:rgba(255,255,255,0.92);
    --muted:rgba(255,255,255,0.70);
    --shadow:0 14px 40px rgba(0,0,0,0.6);
    --max:1320px;
    --padX:clamp(14px,2.2vw,26px);
    --h:var(--topbar-h,68px);
  }

  *{
    box-sizing:border-box;
  }

  html,
  body{
    height:100%;
  }

  body{
    margin:0;
    font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Arial,sans-serif;
    font-weight:500;
    color:var(--text);
    background:#000;
  }

  .pageBackground{
    position:fixed;
    inset:0;
    z-index:-1;
    background:
      linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55)),
      url('https://cdn.midwesternroleplay.com/images/background-1.png') center / cover no-repeat;
  }

  a{
    color:inherit;
    text-decoration:none;
  }

  .announcementBar{
    position:sticky;
    top:var(--h);
    z-index:45;
    width:100%;
    min-height:44px;
    padding:8px var(--padX);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:rgb(0,0,0);
    background:rgb(255,255,255);
    border-top:1px solid rgba(0,0,0,0.08);
    border-bottom:1px solid rgba(0,0,0,0.12);
    box-shadow:0 8px 22px rgba(0,0,0,0.22);
  }

  .announcementText{
    text-align:center;
    font-size:14px;
    font-weight:600;
    letter-spacing:.15px;
    color:rgb(0,0,0);
  }

  .announcementButton{
    flex-shrink:0;
    height:30px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    border:1px solid rgb(0,0,0);
    background:rgb(255,255,255);
    color:rgb(0,0,0);
    font-size:13px;
    font-weight:600;
    line-height:1;
    cursor:pointer;
    transition:background .14s ease,color .14s ease,transform .14s ease;
  }

  .announcementButton:hover{
    background:rgb(0,0,0);
    color:rgb(255,255,255);
    transform:translateY(-1px);
  }

  .announcementButton:disabled{
    opacity:.65;
    cursor:default;
    transform:none;
  }

  .countdownWrap{
    position:sticky;
    top:var(--h);
    z-index:40;
    width:100%;
    padding:0;
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
  }

  .countdownCard{
    width:100%;
    min-height:84px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:10px var(--padX);
    border-top:1px solid rgba(255,255,255,0.08);
    border-bottom:1px solid rgba(255,255,255,0.08);
    background:linear-gradient(180deg,rgba(10,13,18,0.82),rgba(5,7,10,0.76));
    box-shadow:0 10px 30px rgba(0,0,0,0.35);
  }

  .cdTop{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    min-width:0;
  }

  .cdTitle{
    font-size:15px;
    font-weight:900;
    letter-spacing:.8px;
    text-transform:uppercase;
    line-height:1.05;
    margin:0;
  }

  .cdSub{
    font-size:13px;
    color:var(--muted);
    line-height:1.15;
    margin:0;
  }

  .releaseTimer{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    flex-shrink:0;
  }

  .releaseUnit{
    min-width:66px;
    padding:8px 10px;
    border-radius:10px;
    background:rgba(0,0,0,0.45);
    border:1px solid rgba(255,255,255,0.08);
    text-align:center;
    box-shadow:0 10px 24px rgba(0,0,0,0.20);
    transition:background .16s ease,border-color .16s ease,transform .16s ease;
  }

  .releaseUnit:hover{
    background:rgba(255,255,255,0.065);
    border-color:rgba(255,255,255,0.14);
    transform:translateY(-1px);
  }

  .releaseNum{
    font-size:20px;
    font-weight:1000;
    line-height:1;
    color:#fff;
  }

  .releaseLbl{
    margin-top:3px;
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    color:rgba(255,255,255,0.6);
  }

  @media (max-width:900px){
    .announcementBar{
      padding:9px var(--padX);
    }

    .announcementText{
      font-size:13px;
    }

    .announcementButton{
      height:29px;
      padding:0 12px;
      font-size:12px;
    }

    .countdownCard{
      min-height:auto;
      flex-direction:column;
      align-items:flex-start;
      padding:12px var(--padX);
    }

    .cdTop{
      width:100%;
    }

    .cdTitle{
      font-size:14px;
    }

    .cdSub{
      font-size:12px;
    }

    .releaseTimer{
      width:100%;
      justify-content:space-between;
    }

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

  @media (max-width:560px){
    .announcementBar{
      gap:8px;
      flex-wrap:wrap;
    }

    .announcementText{
      font-size:12px;
      line-height:1.3;
    }

    .announcementButton{
      height:28px;
      padding:0 10px;
      font-size:12px;
    }

    .cdTitle{
      font-size:13px;
    }

    .cdSub{
      font-size:11px;
    }

    .releaseTimer{
      gap:6px;
    }

    .releaseUnit{
      padding:8px 6px;
    }

    .releaseNum{
      font-size:18px;
    }

    .releaseLbl{
      font-size:8px;
    }
  }