*{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:'Roboto Mono',monospace;
    background:#0b1020;
    color:#dbe6f0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2rem;
  }

  .card{
    width:100%;
    max-width:980px;
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius:14px;
    box-shadow:0 8px 30px rgba(2,6,23,0.7);
    padding: clamp(1rem, 3.5vw, 2.25rem);
    text-align:center;
    position:relative;
    overflow:hidden;
  }

  .title{
    color:#7ec8ff;
    font-family:'Anton',monospace;
    font-size:clamp(2rem,5.5vw,3rem);
    margin-bottom:0.6rem;
    transform:translateY(30px);
    opacity:0;
    animation:slideUp .7s ease-out .2s forwards;
  }

  .date {
    font-size:clamp(1.2rem,3vw,2rem);
    color:#bfe6ff;
    letter-spacing:0.6px;
    margin-bottom:0.6rem;
    transform:translateY(30px);
    opacity:0;
    animation:slideUp .7s ease-out .35s forwards;
  }

  .countdown{
    font-size:clamp(1.2rem,3vw,2.5rem);
    color:#f0f7ff;
    background:rgba(255,255,255,0.02);
    display:inline-block;
    padding:0.6rem 1rem;
    border-radius:10px;
    transform:translateY(30px);
    opacity:0;
    animation:slideUp .7s ease-out .5s forwards;
  }

  .note{
    margin-top:0.9rem;
    color:#93a6b8;
    font-size:clamp(0.8rem,2vw,1rem);
    transform:translateY(30px);
    opacity:0;
    animation:slideUp .7s ease-out .65s forwards;
  }

  @keyframes slideUp{
    to{ transform:translateY(0); opacity:1; }
  }

/* =====================*/

  @media (max-width:420px){
    .date{ font-size:1.4rem; }
    .countdown{ font-size:0.95rem; padding:0.45rem 0.8rem; }
  }
  
.notice-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  box-shadow: 0 4px 18px rgba(2,6,23,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  text-align: center;
  padding: 0.9rem 1.2rem;
  display: none;
  font-family: 'Anton', monospace;
  color: #bfe6ff;
  backdrop-filter: blur(6px);
}

.notice-link {
  color: inherit;
  text-decoration: none;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  letter-spacing: 0.5px;
  transition: color 0.2s ease, transform 0.25s ease;
  display: inline-block;
}

.notice-link:hover {
  color: #7ec8ff;
  transform: scale(1.03);
}

body.has-notice {
  padding-top: 60px;
}

*{
  user-select: none;
}