* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
  overflow: hidden;
  background: #080808;
  color: #fff;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ===========================
   LOBBY / NAME SCREEN
=========================== */

#nameScreen {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at top, #1d0000 0%, #0d0d0d 40%, #050505 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

#nameScreen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.18), transparent),
    radial-gradient(2px 2px at 40% 70%, rgba(255,80,80,.22), transparent),
    radial-gradient(2px 2px at 70% 25%, rgba(255,255,255,.15), transparent),
    radial-gradient(2px 2px at 80% 60%, rgba(255,80,80,.18), transparent),
    radial-gradient(2px 2px at 15% 85%, rgba(255,255,255,.12), transparent),
    radial-gradient(2px 2px at 60% 90%, rgba(255,80,80,.16), transparent);
  animation: twinkle 5s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes twinkle {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

.nameBox {
  position: relative;
  z-index: 1;

  min-width: 390px;

  padding: 44px 40px 36px;

  border-radius: 6px;

  background: rgba(18,18,18,.94);

  backdrop-filter: blur(20px);

  border: 1px solid rgba(239,68,68,.15);

  box-shadow:
      0 25px 70px rgba(0,0,0,.8),
      0 0 40px rgba(220,38,38,.15),
      inset 0 1px rgba(255,255,255,.04);

  animation: fadeInUp .7s ease;
}

.nameBox::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:6px;
  background:linear-gradient(
      135deg,
      rgba(239,68,68,.35),
      transparent,
      rgba(248,113,113,.28)
  );
  z-index:-1;
  opacity:0;
  transition:.35s;
}

.nameBox:hover::before{
}

@keyframes fadeInUp {
  from {
    opacity:0;
    transform:translateY(30px) scale(.96);
  }
  to {
    opacity:1;
    transform:none;
  }
}

.nameBox h2{
  font-size:30px;
  font-weight:800;
  letter-spacing:2px;
  margin-bottom:8px;

  background:linear-gradient(
      135deg,
      #ffffff,
      #ef4444,
      #fca5a5
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.nameBox>p{
  color:rgba(255,255,255,.5);
  font-size:13px;
  margin-bottom:24px;
}

/* labels */

.field-label{
  display:block;
  text-align:left;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:600;

  color:rgba(255,255,255,.45);

  margin-bottom:6px;
}

/* inputs */

.nameBox input,
.modal-box input{

  width:100%;

  padding:13px 18px;

  border-radius:6px;

  border:2px solid rgba(239,68,68,.12);

  background:#111;

  color:#fff;

  text-align:center;

  font-size:15px;

  outline:none;

  transition:.25s;

  margin-bottom:14px;
}

.nameBox input::placeholder,
.modal-box input::placeholder{
  color:rgba(255,255,255,.25);
}

.nameBox input:focus,
.modal-box input:focus{

  border-color:#ef4444;

  background:#171717;

  box-shadow:
      0 0 18px rgba(239,68,68,.22);
}

/* PRIMARY BUTTON */

.btn-primary{

  width:100%;

  padding:13px;

  border:none;

  border-radius:4px;

  cursor:pointer;

  color:#fff;

  font-size:15px;

  font-weight:700;

  text-transform:uppercase;

  letter-spacing:.8px;

  position:relative;

  overflow:hidden;

  background:linear-gradient(
      135deg,
      #991b1b,
      #dc2626,
      #ef4444
  );

  box-shadow:
      0 6px 22px rgba(220,38,38,.35);

  transition:.25s;

  margin-bottom:10px;
}

.btn-primary:hover:not(:disabled){


  background:linear-gradient(
      135deg,
      #b91c1c,
      #ef4444,
      #f87171
  );

  box-shadow:
      0 10px 30px rgba(239,68,68,.45);
}

.btn-primary:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.btn-primary::after{

  content:"";

  position:absolute;

  top:-50%;
  left:-70%;

  width:40%;
  height:200%;

  transform:skewX(-20deg);

  background:
      linear-gradient(
          90deg,
          transparent,
          rgba(255,255,255,.18),
          transparent
      );

  animation:shimmer 3s infinite;
}

@keyframes shimmer{

  from{
      left:-70%;
  }

  to{
      left:120%;
  }

}

/* secondary */

.btn-secondary{

  padding:12px 18px;

  border-radius:4px;

  cursor:pointer;

  background:      #dc2626;

  color:#f5f5f5;

  border:2px solid rgba(239,68,68,.18);

  transition:.2s;

  font-weight:600;
}

.btn-secondary:hover{

  border-color:#ef4444;

  background:#1d0a0a;

  color:#fff;
}

.btn-ghost{

  width:100%;

  padding:11px;

  border:none;

  background:transparent;

  color:rgba(255,255,255,.45);

  border-radius:12px;

  cursor:pointer;

  transition:.2s;
}

.btn-ghost:hover{

  color:#fff;

  background:rgba(239,68,68,.08);
}

/* divider */

.divider{

  display:flex;

  align-items:center;

  gap:10px;

  margin:18px 0;
}

.divider::before,
.divider::after{

  content:"";

  flex:1;

  height:1px;

  background:rgba(239,68,68,.15);
}

.divider span{

  color:rgba(255,255,255,.3);

  font-size:11px;

  text-transform:uppercase;

  letter-spacing:1px;
}

/* join row */

.join-row{
  display:flex;
  gap:8px;
}

.join-row input{
  flex:1;
  margin-bottom:0;
  letter-spacing:3px;
  font-weight:700;
  text-transform:uppercase;
}

.error-msg{
  min-height:18px;
  margin-top:10px;
  color:#f87171;
  opacity:0;
  transition:.35s;
}

/* ===========================
   HUD
=========================== */

#hud{

  position:fixed;

  top:14px;
  right:14px;

  display:flex;

  gap:10px;

  align-items:center;

  z-index:5;
}

#menuBtn{

  width:40px;
  height:40px;

  border:none;

  border-radius:10px;

  background:rgba(0,0,0,.75);

  color:#f87171;

  cursor:pointer;

  transition:.2s;
}

#menuBtn:hover{

  background:#dc2626;

  color:white;

  transform:scale(1.08);
}

#roomBadge{

  padding:8px 14px;

  border-radius:10px;

  background:rgba(12,12,12,.9);

  border:1px solid rgba(239,68,68,.18);

  color:#fca5a5;

  font-size:13px;

  font-weight:700;

  letter-spacing:1.5px;

  text-transform:uppercase;
}

/* ===========================
   MODAL
=========================== */

#optionsModal{

  position:fixed;

  inset:0;

  display:flex;

  justify-content:center;

  align-items:center;

  background:rgba(0,0,0,.72);

  backdrop-filter:blur(4px);

  z-index:20;
}

.modal-box{

  min-width:340px;

  padding:36px 36px 28px;

  border-radius:20px;

  background:rgba(18,18,18,.97);

  border:1px solid rgba(239,68,68,.15);

  box-shadow:
      0 30px 80px rgba(0,0,0,.85),
      0 0 45px rgba(220,38,38,.12);

  animation:popIn .22s;
}

@keyframes popIn{

  from{
      opacity:0;
      transform:scale(.9);
  }

  to{
      opacity:1;
      transform:scale(1);
  }

}

.modal-box h3{

  margin-bottom:22px;

  font-size:22px;

  background:linear-gradient(
      135deg,
      #fff,
      #ef4444
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.room-code-display{

  display:block;

  margin:8px 0;

  font-size:28px;

  font-weight:900;

  letter-spacing:6px;

  color:#ef4444;
}

#roomInfo{

  margin-top:8px;

  padding:12px 16px;

  border-radius:12px;

  background:#111;

  border:1px solid rgba(239,68,68,.12);

  color:rgba(255,255,255,.55);

  font-size:12px;
}

#roomInfo small{

  display:block;

  margin-top:4px;

  color:rgba(255,255,255,.35);
}

.landing-container{

    width:min(1200px,92vw);

    display:grid;

    grid-template-columns:1fr 430px;

    align-items:center;

    gap:80px;
}

.hero{

    color:white;
}

.hero-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:rgba(239,68,68,.12);

    border:1px solid rgba(239,68,68,.3);

    color:#f87171;

    font-size:.75rem;

    letter-spacing:2px;

    margin-bottom:24px;
}

.hero h1{

    font-size:72px;

    line-height:.95;

    margin-bottom:20px;

    font-weight:900;

    background:linear-gradient(
        180deg,
        white,
        #ef4444
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}

.hero-description{

    max-width:560px;

    color:rgba(255,255,255,.7);

    font-size:20px;

    line-height:1.8;

    margin-bottom:42px;
}

.hero-features{

    display:flex;

    gap:20px;

    flex-wrap:wrap;
}

.feature{

    width:140px;

    padding:20px;

    border-radius:18px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(239,68,68,.12);

    text-align:center;

    transition:.25s;
}

.feature:hover{

    transform:translateY(-6px);

    border-color:#ef4444;

    box-shadow:0 0 25px rgba(239,68,68,.18);
}

.feature span{

    font-size:28px;

    display:block;

    margin-bottom:10px;
}

.feature p{

    color:rgba(255,255,255,.8);

    font-size:14px;
}

@media (max-width:900px){

    .landing-container{

        grid-template-columns:1fr;

        text-align:center;

        gap:40px;
    }

    .hero-description{

        margin-inline:auto;
    }

    .hero-features{

        justify-content:center;
    }

    .hero h1{

        font-size:54px;
    }
}