/* The other rooms in the house. BREED has its own sheet. */

/* --- 1996 --------------------------------------------------------------- */
#wired { position: fixed; inset: 0; z-index: 60; width: 100%; height: 100%; display: none; touch-action: none; cursor: none; user-select: none; -webkit-user-select: none; }
@media (hover: none) { #wired { cursor: default; } #wired-glove { display: none; } }
#wired-ui { position: fixed; inset: 0; z-index: 61; pointer-events: none; overflow: hidden; animation: wired-ui 1.6s .5s ease both; }
#wired-ui[hidden] { display: none; }
@keyframes wired-ui { from { opacity: 0; } }
#wired-leave { position: fixed; top: 12px; left: 16px; opacity: .6; transition: opacity .2s; pointer-events: auto; cursor: pointer; }
#wired-leave:hover, #wired-leave:focus-visible { opacity: 1; }
#wired-leave img { display: block; height: auto; }
#wired-glove { position: fixed; left: 0; top: 0; opacity: 0; pointer-events: none; transform-origin: 8px 6px; filter: drop-shadow(0 0 10px rgba(255, 40, 200, .6)); }

/* Set like the cover of a magazine that's going to be about the future for ever. */
#wired-phrase {
  position: fixed; margin: 0; max-width: 72vw; opacity: 0; pointer-events: none;
  font-family: 'Michroma', sans-serif; font-size: clamp(22px, 5.2vw, 76px); line-height: .92; letter-spacing: -.03em; text-transform: uppercase;
  color: #fff; transform-origin: left center; transform: skewX(-9deg) scaleY(1.8);
  text-shadow: 3px 0 0 #ff1fb4, -3px 0 0 #1fe6ff, 0 0 26px rgba(255, 40, 200, .75);
}
#wired-phrase.on { animation: wired-phrase 5.2s ease both; }
@keyframes wired-phrase {
  0% { opacity: 0; transform: skewX(-30deg) scaleY(.1) scaleX(1.6); }
  7% { opacity: 1; transform: skewX(-9deg) scaleY(1.8); }
  10% { opacity: .35; }
  13% { opacity: 1; }
  88% { opacity: .95; transform: skewX(-9deg) scaleY(1.9); filter: blur(0); }
  100% { opacity: 0; transform: skewX(4deg) scaleY(2.5); filter: blur(4px); }
}
#wired-tip { position: fixed; left: 0; top: 0; margin: 0; color: #7bff5a; background: rgba(0, 0, 0, .76); padding: 1px 7px 0; pointer-events: none; white-space: nowrap; }
#wired-tip:empty { display: none; }

/* --- ST ----------------------------------------------------------------- */
#st { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; cursor: pointer; touch-action: none; }
#st[hidden] { display: none; }
#st canvas:first-child { display: none; width: min(100vw, 150vh); height: auto; aspect-ratio: 8 / 5; image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; }
#st-bombs { position: absolute; inset: 0; pointer-events: none; }
#st.bombs { background: transparent; cursor: wait; }
#st.black { background: #000; }
#st.black canvas:first-child, #st.off canvas:first-child { display: block; }
#st.black #st-bombs, #st.off #st-bombs { display: none; }
#st.black::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .22) 2px 4px);
}
#st.off { pointer-events: none; background: #000; animation: st-curtain .52s linear both; }
#st.off canvas:first-child { animation: st-off .5s cubic-bezier(.6, 0, .9, .4) both; }
@keyframes st-off {
  0% { transform: scale(1, 1); filter: brightness(1); }
  55% { transform: scale(1, .006); filter: brightness(4); }
  100% { transform: scale(0, .004); filter: brightness(6); }
}
@keyframes st-curtain { 0%, 40% { background: #000; } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { #wired-phrase.on { animation-duration: 6s; } }