:root {
  --cooldown-green: #28f0b6;
  --cooldown-cyan: #62f5ff;
  --cooldown-deep: #031512;
}

.cooldown-screen {
  position: absolute;
  z-index: 770;
  inset: 0;
  display: none;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 12px;
  padding: 48px 16px 20px;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(rgba(76,244,210,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,244,210,.09) 1px, transparent 1px),
    radial-gradient(circle at 50% 18%, rgba(98,245,255,.25), transparent 42%),
    linear-gradient(180deg, #07352f 0%, #06211f 48%, #020c0b 100%);
  background-size: 26px 26px, 26px 26px, auto, auto;
  isolation: isolate;
}
.cooldown-screen::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -30%;
  border: 3px solid rgba(98,245,255,.18);
  border-radius: 50%;
  box-shadow: 0 0 90px rgba(40,240,182,.22), inset 0 0 90px rgba(98,245,255,.12);
  animation: cooldownRadar 8s linear infinite;
}
.cooldown-screen.show { display: grid; animation: cooldownScreenIn 480ms cubic-bezier(.16,1,.3,1) both; }
.cooldown-screen.leaving { pointer-events: none; animation: cooldownScreenOut 420ms cubic-bezier(.55,0,1,.45) both; }

.cooldown-header { display: grid; justify-items: center; gap: 5px; text-align: center; }
.cooldown-header > p { margin: 0; color: var(--cooldown-cyan); font: 1000 10px/1 var(--mono); }
.cooldown-header > h2 { max-width: 360px; margin: 0; color: #fff; font: 1000 38px/.88 var(--font); text-shadow: 5px 5px 0 #000, 0 0 28px var(--cooldown-green); }
.cooldown-header > span { max-width: 350px; color: #d9fff7; font: 800 12px/1.25 var(--mono); }

.cooldown-status { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px 12px; padding: 10px 12px; border: 3px solid #020807; border-radius: 7px; background: rgba(2,15,13,.9); box-shadow: 6px 6px 0 #000, 0 0 22px rgba(40,240,182,.32); }
.cooldown-status > span { color: var(--cooldown-cyan); font: 1000 11px/1 var(--mono); }
.cooldown-status > b { color: #fff; font: 1000 16px/1 var(--mono); }
.cooldown-heat-track { grid-column: 1 / -1; height: 13px; overflow: hidden; border: 2px solid #fff; border-radius: 999px; background: #06100f; box-shadow: inset 0 0 8px #000; }
.cooldown-heat-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cooldown-cyan), #ffe24a, #ff3159); box-shadow: 0 0 14px var(--cooldown-cyan); transition: width 520ms cubic-bezier(.16,1,.3,1); }
.cooldown-balance { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 6px; color: #e7fff9; font: 1000 11px/1 var(--mono); }
.cooldown-balance b { color: var(--cooldown-green); }

.cooldown-choice-prompt { align-self: end; color: #fff; font: 1000 20px/1 var(--font); text-align: center; text-shadow: 3px 3px 0 #000, 0 0 18px var(--cooldown-cyan); }
.cooldown-options { align-self: center; justify-self: center; width: min(360px, 100%); min-height: 0; display: grid; grid-template-rows: repeat(3, auto); gap: 12px; }
.cooldown-option { position: relative; min-height: 112px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; align-items: center; gap: 6px 12px; padding: 15px 16px; border: 4px solid var(--cooldown-green); border-radius: 7px; color: #fff; background: rgba(3,19,17,.94); box-shadow: 7px 7px 0 #000, 0 0 22px rgba(40,240,182,.3), inset 0 0 24px rgba(98,245,255,.07); text-align: left; touch-action: manipulation; transition: transform 180ms cubic-bezier(.16,1.25,.3,1), filter 180ms ease, opacity 180ms ease; }
.cooldown-screen.show .cooldown-option { animation: cooldownOptionIn 420ms cubic-bezier(.16,1.25,.3,1) both; }
.cooldown-screen.show .cooldown-option:nth-child(2) { animation-delay: 80ms; }
.cooldown-screen.show .cooldown-option:nth-child(3) { animation-delay: 160ms; }
.cooldown-option:nth-child(2) { border-color: #63ead0; }
.cooldown-option:nth-child(3) { border-color: var(--cooldown-cyan); }
.cooldown-option-kicker { width: max-content; padding: 5px 8px; border: 2px solid #020807; border-radius: 999px; color: #03130f; background: var(--cooldown-green); box-shadow: 2px 2px 0 #000; font: 1000 12px/1 var(--mono); }
.cooldown-option > strong { grid-row: 2; color: var(--cooldown-cyan); font: 1000 27px/.95 var(--font); text-shadow: 3px 3px 0 #000; }
.cooldown-option > b { grid-column: 2; grid-row: 1 / 3; color: #fff; font: 1000 24px/.95 var(--mono); text-align: right; text-shadow: 0 0 14px var(--cooldown-green); }
.cooldown-option > small { grid-column: 1 / -1; color: #d7eee9; font: 800 14px/1.24 var(--mono); }
.cooldown-option:not(:disabled):active { transform: translateY(3px) scale(.985); }
.cooldown-option:disabled { border-color: #52605d; opacity: .52; filter: grayscale(.78); }
.cooldown-screen.show .cooldown-option.selected { z-index: 2; transform: scale(1.03); filter: brightness(1.45); animation: cooldownChoiceSelected 720ms cubic-bezier(.16,1.35,.3,1) both; }
.cooldown-option.selected.backfired { border-color: #ff3159; box-shadow: 7px 7px 0 #000, 0 0 38px #ff3159; }

.cooldown-result { position: absolute; z-index: 5; inset: 0; display: none; place-content: center; justify-items: center; gap: 8px; padding: 24px; color: #fff; background: rgba(2,13,11,.76); text-align: center; pointer-events: none; }
.cooldown-result.show { display: grid; animation: cooldownResultIn 380ms cubic-bezier(.16,1.4,.3,1) both; }
.cooldown-result strong { color: var(--cooldown-cyan); font: 1000 42px/.88 var(--font); text-shadow: 6px 6px 0 #000, 0 0 34px var(--cooldown-green); }
.cooldown-result b { padding: 10px 16px; border: 4px solid #020807; border-radius: 999px; color: #03130f; background: var(--cooldown-green); box-shadow: 6px 6px 0 #000, 0 0 28px var(--cooldown-green); font: 1000 24px/1 var(--mono); }
.cooldown-result.backfired strong { color: #ff596f; text-shadow: 6px 6px 0 #000, 0 0 34px #ff3159; }
.cooldown-result.backfired b { color: #fff; background: #ff3159; box-shadow: 6px 6px 0 #000, 0 0 28px #ff3159; }

@keyframes cooldownScreenIn { from { opacity: 0; transform: scale(1.06); filter: brightness(2); } to { opacity: 1; transform: scale(1); filter: brightness(1); } }
@keyframes cooldownScreenOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.96); filter: brightness(1.6); } }
@keyframes cooldownRadar { to { transform: rotate(360deg); } }
@keyframes cooldownOptionIn { from { opacity: 0; transform: translateY(22px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes cooldownChoiceSelected { 0% { transform: scale(1); } 55% { transform: scale(1.045); } 100% { transform: scale(1.02); } }
@keyframes cooldownResultIn { from { opacity: 0; transform: scale(1.12); filter: brightness(2); } to { opacity: 1; transform: scale(1); filter: brightness(1); } }

@media (max-height: 760px) {
  .cooldown-screen { gap: 8px; padding-top: 34px; padding-bottom: 12px; }
  .cooldown-header > h2 { font-size: 31px; }
  .cooldown-header > span { font-size: 10px; }
  .cooldown-status { padding: 7px 10px; }
  .cooldown-choice-prompt { font-size: 17px; }
  .cooldown-options { gap: 8px; }
  .cooldown-option { min-height: 91px; padding: 9px 11px; }
  .cooldown-option-kicker { font-size: 10px; }
  .cooldown-option > strong { font-size: 22px; }
  .cooldown-option > b { font-size: 20px; }
  .cooldown-option > small { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .cooldown-screen.show,
  .cooldown-screen.leaving,
  .cooldown-screen::before,
  .cooldown-option,
  .cooldown-option.selected,
  .cooldown-result.show { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}