/* Sudden Death is an immersive, phone-first final pass — never a small modal. */
#suddenOverlay.modalOverlay{
  position:fixed;
  z-index:700;
  inset:0;
  display:block;
  overflow:hidden;
  padding:0;
  background:
    radial-gradient(circle at 50% -8%,rgba(255,79,103,.20),transparent 34%),
    radial-gradient(circle at 50% 110%,rgba(103,64,210,.16),transparent 42%),
    linear-gradient(180deg,#100812 0,#070812 38%,#03050b 100%);
  backdrop-filter:none;
}

#suddenOverlay .suddenCard{
  width:100%;
  height:100dvh;
  min-height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  overflow:auto;
  overscroll-behavior:contain;
  display:flex;
  flex-direction:column;
  padding:max(58px,calc(var(--safe-top) + 48px)) clamp(12px,4vw,30px) max(14px,var(--safe-bottom));
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  text-align:center;
}

#suddenOverlay .modalClose{
  position:fixed;
  z-index:4;
  top:max(10px,var(--safe-top));
  right:12px;
  width:48px;
  height:48px;
  border-radius:14px;
  font-size:27px;
}

#suddenOverlay .skullMark{
  width:64px;
  height:64px;
  flex:0 0 auto;
  margin:0 auto 8px;
  border-radius:20px;
}

#suddenOverlay .eyebrow{
  flex:0 0 auto;
  font-size:12px;
  letter-spacing:.16em;
}

#suddenOverlay .suddenCard h1{
  flex:0 0 auto;
  margin:6px 54px 4px;
  font-size:clamp(25px,7vw,40px);
  line-height:1.02;
}

#suddenOverlay .suddenCard>p{
  flex:0 0 auto;
  max-width:680px;
  margin:0 auto;
  color:#a8b4ca;
  font-size:clamp(12px,3.4vw,15px);
  line-height:1.35;
}

#suddenOverlay .suddenReady{
  min-height:28px;
  flex:0 0 auto;
  margin-top:8px;
  font-size:clamp(15px,4vw,19px);
}

#suddenOverlay .suddenHud,
#suddenOverlay .suddenTimer,
#suddenOverlay .suddenProgress,
#suddenOverlay .suddenKeyboard,
#suddenOverlay .suddenResult{
  width:min(100%,780px);
  margin-left:auto;
  margin-right:auto;
}

#suddenOverlay .suddenHud{
  flex:0 0 auto;
  margin-top:6px;
  padding:11px 15px;
  border-radius:16px;
}

#suddenOverlay .suddenHud b{
  font-size:14px;
}

#suddenOverlay .suddenHud span{
  font-size:clamp(28px,8vw,38px);
  line-height:1;
}

#suddenOverlay .suddenTimer{
  height:14px;
  flex:0 0 auto;
  margin-top:7px;
}

#suddenOverlay .suddenProgress{
  max-height:72px;
  flex:0 0 auto;
  margin-top:8px;
  padding:8px;
  border-radius:14px;
}

#suddenOverlay .suddenProgress span{
  width:22px;
  height:22px;
  font-size:11px;
}

#suddenOverlay .suddenKeyboard{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(7px,2vw,12px);
  margin-top:auto;
  padding-top:12px;
}

#suddenOverlay .suddenKeyboard button{
  width:100%;
  min-width:0;
  min-height:clamp(56px,8.5vh,82px);
  aspect-ratio:auto;
  border-width:1px;
  border-radius:clamp(14px,3.8vw,20px);
  background:linear-gradient(155deg,#251827,#11131e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 7px 18px rgba(0,0,0,.18);
  color:#fff;
  font-size:clamp(21px,6vw,31px);
  font-weight:1000;
  touch-action:manipulation;
}

#suddenOverlay .suddenKeyboard button:active{
  transform:scale(.94);
  background:#4a2438;
}

#suddenOverlay .suddenResult{
  flex:0 0 auto;
  margin-top:8px;
}

@media (max-height:720px){
  #suddenOverlay .suddenCard{
    padding-top:max(50px,calc(var(--safe-top) + 42px));
  }
  #suddenOverlay .skullMark{
    display:none;
  }
  #suddenOverlay .suddenCard h1{
    margin-top:3px;
    font-size:clamp(22px,6vw,32px);
  }
  #suddenOverlay .suddenCard>p{
    font-size:11px;
  }
  #suddenOverlay .suddenReady{
    min-height:22px;
    margin-top:4px;
  }
  #suddenOverlay .suddenProgress{
    max-height:52px;
    margin-top:6px;
  }
  #suddenOverlay .suddenKeyboard{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:6px;
    padding-top:8px;
  }
  #suddenOverlay .suddenKeyboard button{
    min-height:50px;
    font-size:20px;
  }
}

@media (orientation:landscape) and (max-height:540px){
  #suddenOverlay .suddenCard{
    padding-top:max(44px,calc(var(--safe-top) + 38px));
  }
  #suddenOverlay .eyebrow,
  #suddenOverlay .suddenCard>p,
  #suddenOverlay .suddenProgress{
    display:none;
  }
  #suddenOverlay .suddenCard h1{
    margin:0 54px 2px;
    font-size:22px;
  }
  #suddenOverlay .suddenReady{
    min-height:18px;
    margin-top:2px;
    font-size:14px;
  }
  #suddenOverlay .suddenHud{
    margin-top:3px;
    padding:7px 12px;
  }
  #suddenOverlay .suddenHud span{
    font-size:25px;
  }
  #suddenOverlay .suddenTimer{
    height:10px;
    margin-top:4px;
  }
  #suddenOverlay .suddenKeyboard{
    grid-template-columns:repeat(9,minmax(0,1fr));
    gap:6px;
    padding-top:6px;
  }
  #suddenOverlay .suddenKeyboard button{
    min-height:46px;
    font-size:19px;
  }
}