/* RedCat Spookkasteel menu runtime - layout of the 800x600 GDI stage. */
.rcm-root {
  position: fixed;
  inset: 0;
  background: #000;
  overflow: hidden;
  z-index: 1000;
  user-select: none;
  -webkit-user-select: none;
}
.rcm-root[hidden] { display: none; }
.rcm-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 800px;
  height: 600px;
  transform-origin: 0 0;
  overflow: hidden;
  background: #000;
  font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", "Comic Relief", cursive;
  cursor: default;
}
.rcm-form {
  position: absolute;
  overflow: hidden;
}
.rcm-form[hidden], .rcm-ctl[hidden] { display: none !important; }
.rcm-ctl {
  position: absolute;
  box-sizing: border-box;
  white-space: nowrap;
  line-height: 1.2;
}
.rcm-img { pointer-events: none; }
.rcm-img > img, .rcm-btn > img { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
.rcm-label { pointer-events: none; display: flex; flex-direction: column; }
.rcm-label.wrap { white-space: normal; overflow-wrap: break-word; }
.rcm-label.lay-center { justify-content: center; }
.rcm-label.lay-bottom { justify-content: flex-end; }
.rcm-btn { outline: none; }
.rcm-btn .rcm-cap {
  position: absolute;
  display: flex;
  overflow: hidden;
  pointer-events: none;
  line-height: 1.15;
}
.rcm-edit {
  border: 0;
  outline: none;
  padding: 0 2px;
  margin: 0;
  font-family: inherit;
}
.rcm-black {
  position: absolute;
  inset: 0;
  background: #000;
  pointer-events: auto;
}
.rcm-slider-track { position: absolute; }
.rcm-video {
  position: absolute;
  inset: 0;
  background: #000;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 14px sans-serif;
  cursor: pointer;
}
.rcm-busy { cursor: wait; }
.rcm-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* 320x240 stretched to the 800x600 client area, 4:3 kept */
  background: #000;
}
.rcm-video-click {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 96px;
  background: rgba(0, 0, 0, 0.35);
}

/* Overleven (web addition): second caption line on the main-menu button, character slots in the
   lobby (TCompOptionA frame 06150000 at 85 %, content in the frame's own boxes) */
.rcm-subcap { display: block; font-size: 12px; line-height: 1; opacity: .85; padding-bottom: 3px; }
.rcm-surv-slot { position: absolute; transform-origin: 0 0; cursor: pointer; color: #fff;
  font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive; text-align: center; }
.rcm-surv-slot > * { position: absolute; left: 0; right: 0; }
.rcm-surv-slot .frame { top: 0; width: 204px; height: 401px; pointer-events: none; }
.rcm-surv-slot .nm { top: 6px; font-size: 21px; font-weight: bold; color: #cbd701; text-shadow: 2px 2px 0 #000; }
.rcm-surv-slot .ds { top: 46px; left: 18px; right: 18px; height: 60px; font-size: 17px; line-height: 1.15;
  display: flex; align-items: center; justify-content: center; }
.rcm-surv-slot .pt { top: 132px; left: 38px; width: 128px; height: 128px; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.rcm-surv-slot .who { top: 270px; font-size: 19px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 16px; }
.rcm-surv-slot .st { top: 338px; font-size: 20px; color: #c0c0c0; }
.rcm-surv-slot .st.ready { color: #00ff00; font-weight: bold; }
.rcm-surv-slot.free .st { color: #ffff00; }
.rcm-surv-slot.hover.free .frame, .rcm-surv-slot.mine .frame { filter: brightness(1.25) drop-shadow(0 0 8px #ff66ff); }
.rcm-surv-slot.mine .who { color: #00ff00; }
.rcm-surv-slot.taken { cursor: default; }
.rcm-surv-slot.taken .pt { filter: grayscale(.7) brightness(.7); }
.rcm-surv-slot.taken .frame, .rcm-surv-slot.taken .nm, .rcm-surv-slot.taken .ds { filter: grayscale(.8) brightness(.7); }
/* lobby: what to do next. The paw button to press (Klaar!, or Start! for the host when everybody
   is ready) pulses with a glow; the instruction line under the player list bobs along with it. */
@keyframes rcm-glow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 255, 0, .5)) brightness(1); }
  50% { filter: drop-shadow(0 0 8px #ffff00) drop-shadow(0 0 16px #ff9900) brightness(1.35); }
}
.rcm-btn.rcm-glow { animation: rcm-glow 1.1s ease-in-out infinite; }   /* no transform: the hit box stays put */
@keyframes rcm-hint { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.rcm-surv-hint { text-shadow: 2px 2px 0 #000; }
.rcm-surv-hint.go { animation: rcm-hint 1.1s ease-in-out infinite; }
/* per-player ready state: green tick on the portrait, green frame glow, state line */
.rcm-surv-slot .ok { left: auto; right: 30px; top: 128px; width: 44px; height: 44px; border-radius: 50%;
  background: #00b000; border: 3px solid #fff; box-shadow: 2px 2px 0 #000; color: #fff; font-size: 30px;
  line-height: 42px; font-weight: bold; display: none; pointer-events: none; }
.rcm-surv-slot.ready .ok { display: block; }
.rcm-surv-slot.ready .frame { filter: brightness(1.15) drop-shadow(0 0 8px #00ff00); }
.rcm-surv-slot.ready.taken .frame { filter: grayscale(.4) brightness(.85) drop-shadow(0 0 8px #00ff00); }
.rcm-surv-slot .st.todo { color: #ffff00; font-weight: bold; animation: rcm-hint 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .rcm-btn.rcm-glow, .rcm-surv-hint.go, .rcm-surv-slot .st.todo { animation: none; }
  .rcm-btn.rcm-glow { filter: drop-shadow(0 0 7px #ffff00) brightness(1.25); }
}