.rhythm-shell {
  --rhythm-accent: #3a91ff;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: #fff;
  background: #05060b;
  overflow: hidden;
}

.rhythm-shell::backdrop {
  background: #020307;
}

.rhythm-shell[open] {
  display: block;
}

.rhythm-framebar {
  position: absolute;
  z-index: 8;
  top: max(10px, env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.rhythm-framebar p {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--rhythm-accent) 62%, #fff 18%);
  background: rgba(4, 7, 15, .72);
  box-shadow: 0 0 22px color-mix(in srgb, var(--rhythm-accent) 28%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 8px 100%);
}

.rhythm-framebar small {
  color: #aebbd5;
  font: 800 9px/1 system-ui, sans-serif;
  letter-spacing: .18em;
}

.rhythm-framebar strong {
  overflow: hidden;
  color: #fff;
  font: 950 12px/1 system-ui, sans-serif;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rhythm-live {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--rhythm-accent);
  box-shadow: 0 0 12px var(--rhythm-accent);
  animation: rhythm-live 1.1s ease-in-out infinite alternate;
}

@keyframes rhythm-live {
  to { opacity: .35; transform: scale(.75); }
}

#rhythm-close {
  min-height: 42px;
  padding: 0 12px 0 16px;
  border: 1px solid color-mix(in srgb, var(--rhythm-accent) 54%, #fff 20%);
  background: rgba(4, 7, 15, .8);
  color: #fff;
  font: 850 11px/1 system-ui, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 0 22px color-mix(in srgb, var(--rhythm-accent) 24%, transparent);
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

#rhythm-close kbd {
  margin-left: 8px;
  padding: 3px 5px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 3px;
  color: #bfc9df;
  font: inherit;
  font-size: 9px;
}

#rhythm-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #05060b;
}

.rhythm-shell.is-gameplay .rhythm-framebar {
  display: none;
}

.rhythm-entry {
  position: absolute;
  z-index: 12;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  background:
    linear-gradient(112deg, transparent 0 39%, color-mix(in srgb, var(--rhythm-accent) 85%, #fff 10%) 39.3% 40%, transparent 40.3%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--rhythm-accent) 35%, transparent), #03050b 58%);
  pointer-events: none;
  opacity: 0;
}

.rhythm-shell.is-entering .rhythm-entry {
  opacity: 1;
  animation: rhythm-entry-out .76s cubic-bezier(.72, 0, .2, 1) both;
}

.rhythm-entry::before,
.rhythm-entry::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  height: 31%;
  background: #05060b;
  border-color: var(--rhythm-accent);
  box-shadow: 0 0 50px color-mix(in srgb, var(--rhythm-accent) 42%, transparent);
}

.rhythm-entry::before {
  top: 0;
  border-bottom: 2px solid var(--rhythm-accent);
  transform: skewY(-4deg);
}

.rhythm-entry::after {
  bottom: 0;
  border-top: 2px solid var(--rhythm-accent);
  transform: skewY(-4deg);
}

.rhythm-entry span {
  color: var(--rhythm-accent);
  font: 900 10px/1 system-ui, sans-serif;
  letter-spacing: .55em;
}

.rhythm-entry strong {
  max-width: 92vw;
  color: #fff;
  font: italic 950 clamp(36px, 9vw, 104px)/.9 system-ui, sans-serif;
  letter-spacing: -.04em;
  text-align: center;
  text-shadow: 0 0 30px var(--rhythm-accent), 5px 5px 0 #05060b;
}

.rhythm-entry i {
  width: min(440px, 74vw);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--rhythm-accent), #fff, var(--rhythm-accent), transparent);
  box-shadow: 0 0 18px var(--rhythm-accent);
}

.rhythm-entry b {
  font: italic 950 clamp(18px, 4vw, 42px)/1 system-ui, sans-serif;
  letter-spacing: .2em;
}

@keyframes rhythm-entry-out {
  0%, 52% { opacity: 1; clip-path: inset(0); }
  74% { opacity: 1; clip-path: inset(44% 0 43%); filter: brightness(2.2); }
  100% { opacity: 0; clip-path: inset(50% 0); filter: brightness(3); }
}

@media (max-width: 620px) {
  .rhythm-framebar {
    top: max(6px, env(safe-area-inset-top));
    left: 7px;
    right: 7px;
    height: 39px;
  }

  .rhythm-framebar p {
    max-width: calc(100% - 130px);
    padding: 7px 10px;
  }

  .rhythm-framebar small { display: none; }
  .rhythm-framebar strong { font-size: 10px; }
  #rhythm-close { min-height: 38px; padding: 0 10px; }
  #rhythm-close kbd { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rhythm-shell.is-entering .rhythm-entry { animation-duration: .18s; }
  .rhythm-live { animation: none; }
}