/* Which button does what, said in the shape of the button rather than in words:
   the rack is the one panel on either screen that answers to both of them. */
.rack-keys { display: flex; gap: 12px; font-size: 9px; letter-spacing: 1.6px;
             color: #5f7a88; white-space: nowrap; }
.rack-keys span { display: flex; align-items: center; gap: 4px; }
.mbtn { width: 23px; height: 23px; flex: none; fill: none; stroke: currentColor;
        stroke-width: 1.4; stroke-linejoin: round; }
.mbtn .lit { fill: var(--accent); stroke: none; }

/* A gun crossing the bench on its way into the rack, and the slot waiting for
   it: the slot is marked as the target and holds its icon back until it lands. */
.gunfly {
  position: absolute; left: 0; top: 0; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent); background: rgba(6,10,14,.92); color: #fff;
  box-shadow: 0 0 20px rgba(255,255,255,.25);
  will-change: transform;
}
.gunfly .gico { width: 22px; height: 22px; fill: none; stroke: currentColor;
                stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.gun-slot.landing { border-color: var(--accent); border-style: dashed; }
.gun-slot.landing .gico { opacity: 0; }
.gun-slot.landed { animation: gun-landed .55s ease-out; }
@keyframes gun-landed {
  0%   { transform: scale(1.45); border-color: var(--accent);
         box-shadow: 0 0 26px var(--accent); }
  60%  { transform: scale(.94); }
  100% { transform: scale(1); box-shadow: none; }
}

.mod-rack.lit .rack-label { animation: rack-lit 1.3s ease-out; }
@keyframes rack-lit {
  0%, 100% { color: #5f7a88; }
  15%, 55% { color: var(--accent); letter-spacing: 3.4px; }
}

/* Taught once, the first time a third gun lands on the bench: the real rack is
   lifted out of the dim so it can be used while the card below it plays both
   moves. #modrack outranks the veil on z-index alone, which holds only because
   nothing between them opens a stacking context of its own. */
#rack-coach { position: fixed; inset: 0; z-index: 13; cursor: default;
              background: rgba(3,6,10,.74); animation: rc-wake .3s ease-out .45s backwards; }
@keyframes rc-wake { from { opacity: 0; } to { opacity: 1; } }

#modules.coaching #modrack {
  position: relative; z-index: 14; padding: 7px; margin: -7px;
  background: rgba(6,12,18,.96); animation: rc-ring 1.9s ease-in-out infinite;
}
#modules.coaching .rack-legend { position: relative; z-index: 14; }
@keyframes rc-ring {
  0%, 100% { box-shadow: 0 0 0 1px rgba(125,211,252,.4), 0 0 20px rgba(125,211,252,.16); }
  50%      { box-shadow: 0 0 0 1px rgba(125,211,252,.9), 0 0 40px rgba(125,211,252,.42); }
}

.rc-card {
  position: fixed; width: 400px; max-width: calc(100vw - 24px); padding: 20px 24px 8px;
  border: 1px solid rgba(125,211,252,.45); background: rgba(6,12,18,.97);
  box-shadow: 0 18px 50px rgba(0,0,0,.6); text-align: center;
  animation: rc-card-in .34s cubic-bezier(.2,.9,.3,1.25) .5s backwards;
}
.rc-card::before {
  content: ''; position: absolute; top: -8px; right: var(--rc-arrow, 40px);
  width: 14px; height: 14px; margin-right: -7px; rotate: 45deg;
  border-left: 1px solid rgba(125,211,252,.45); border-top: 1px solid rgba(125,211,252,.45);
  background: rgba(6,12,18,.97);
}
@keyframes rc-card-in {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rc-title { font-size: 12px; letter-spacing: 4px; color: #5f7a88; }
.rc-row { display: flex; align-items: center; justify-content: center; gap: 20px; }
.rc-what { font-size: 14px; letter-spacing: 3px; color: var(--accent); }
.rc-card .btn { margin-top: 12px; padding: 11px 34px; font-size: 13px; letter-spacing: 3px; }

/* The rack playing itself, a size up from the bench's own so the swap reads
   across the room: a gun carried to the front, and a gun struck off in place. */
.rc-demo { position: relative; width: 188px; height: 110px; margin: 10px 0 2px; flex: none; }
.rc-slot { position: absolute; top: 0; width: 56px; height: 56px;
           border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.35); }
.rc-slot b { position: absolute; top: 1px; left: 4px; font-size: 10px; font-weight: 400;
             color: rgba(255,255,255,.4); }
.rc-demo i:nth-of-type(1) { left: 0; }
.rc-demo i:nth-of-type(2) { left: 66px; }
.rc-demo i:nth-of-type(3) { left: 132px; }
.rc-gun { position: absolute; left: 0; top: 0; width: 56px; height: 56px;
          display: flex; align-items: center; justify-content: center;
          color: rgba(255,255,255,.5); will-change: transform; }
.rc-gun .gico { width: 34px; height: 34px; fill: none; stroke: currentColor;
                stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rc-hand { position: absolute; left: 0; top: 0; color: var(--accent);
           animation: rc-hand 5s ease-in-out .9s infinite; }
.rc-hand .mbtn { width: 38px; height: 38px; }
.rc-dot { display: block; width: 32px; height: 32px; border-radius: 50%;
          border: 2px solid var(--accent); background: rgba(125,211,252,.28); }

.rc-mid { transform: translate(66px, 0); }
.rc-old { animation: rc-old 5s ease-in-out .9s infinite; }
.rc-new { animation: rc-new 5s ease-in-out .9s infinite; }
.rc-move i:nth-of-type(1) { animation: rc-dst 5s ease-in-out .9s infinite; }
.rc-move i:nth-of-type(3) { animation: rc-src 5s ease-in-out .9s infinite; }

.rc-p1 { transform: translate(0, 0); }
.rc-p2 { transform: translate(66px, 0); animation: rc-dim 5s ease-in-out .9s infinite; }
.rc-p3 { transform: translate(132px, 0); }
.rc-drop .rc-hand { animation-name: rc-hand2; }
.rc-drop i:nth-of-type(2) { animation: rc-hit 5s ease-in-out .9s infinite; }
.rc-drop i:nth-of-type(2)::after {
  content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px;
  background: #ff4436; rotate: -35deg;
  animation: rc-slash 5s ease-in-out .9s infinite;
}

@keyframes rc-hand {
  0%, 4%    { transform: translate(178px, 74px) scale(1); opacity: 0; }
  10%       { transform: translate(178px, 74px) scale(1); opacity: 1; }
  20%       { transform: translate(141px, 36px) scale(1); opacity: 1; }
  23%       { transform: translate(141px, 36px) scale(.82); opacity: 1; }
  26%       { transform: translate(141px, 36px) scale(1); opacity: 1; }
  46%       { transform: translate(9px, 36px) scale(1); opacity: 1; }
  49%       { transform: translate(9px, 36px) scale(.82); opacity: 1; }
  52%       { transform: translate(9px, 36px) scale(1); opacity: 1; }
  66%       { transform: translate(178px, 74px) scale(1); opacity: 1; }
  72%, 100% { transform: translate(178px, 74px) scale(1); opacity: 0; }
}
@keyframes rc-new {
  0%, 23%   { transform: translate(132px, 0) scale(1); color: rgba(255,255,255,.5); opacity: 1; }
  28%       { transform: translate(132px, -18px) scale(1.16); color: var(--accent); opacity: 1; }
  46%, 52%  { transform: translate(0, -18px) scale(1.16); color: var(--accent); opacity: 1; }
  58%       { transform: translate(0, 0) scale(1); color: var(--accent); opacity: 1; }
  84%       { transform: translate(0, 0) scale(1); color: rgba(255,255,255,.5); opacity: 1; }
  90%       { transform: translate(0, 0) scale(1); opacity: 0; }
  92%       { transform: translate(132px, 0) scale(1); opacity: 0; }
  100%      { transform: translate(132px, 0) scale(1); opacity: 1; }
}
@keyframes rc-old {
  0%, 49%   { transform: translate(0, 0); opacity: 1; }
  55%       { transform: translate(66px, 26px); opacity: 1; }
  62%, 84%  { transform: translate(132px, 0); opacity: 1; }
  90%       { transform: translate(132px, 0); opacity: 0; }
  92%       { transform: translate(0, 0); opacity: 0; }
  100%      { transform: translate(0, 0); opacity: 1; }
}
@keyframes rc-src {
  0%, 22%   { border-color: rgba(255,255,255,.2); border-style: solid; }
  25%, 56%  { border-color: rgba(125,211,252,.7); border-style: dashed; }
  62%, 100% { border-color: rgba(255,255,255,.2); border-style: solid; }
}
@keyframes rc-dst {
  0%, 25%   { border-color: rgba(255,255,255,.2); box-shadow: none; }
  30%, 52%  { border-color: rgba(125,211,252,.55); box-shadow: none; }
  58%       { border-color: var(--accent); box-shadow: 0 0 22px rgba(125,211,252,.5); }
  70%, 100% { border-color: rgba(255,255,255,.2); box-shadow: none; }
}

@keyframes rc-hand2 {
  0%, 8%    { transform: translate(178px, 74px) scale(1); opacity: 0; }
  16%       { transform: translate(178px, 74px) scale(1); opacity: 1; }
  28%       { transform: translate(75px, 36px) scale(1); opacity: 1; }
  32%       { transform: translate(75px, 36px) scale(.82); opacity: 1; }
  36%       { transform: translate(75px, 36px) scale(1); opacity: 1; }
  54%       { transform: translate(178px, 74px) scale(1); opacity: 1; }
  60%, 100% { transform: translate(178px, 74px) scale(1); opacity: 0; }
}
@keyframes rc-dim {
  0%, 31%   { transform: translate(66px, 0) scale(1); opacity: 1; }
  36%, 84%  { transform: translate(66px, 0) scale(.88); opacity: .3; }
  92%, 100% { transform: translate(66px, 0) scale(1); opacity: 1; }
}
@keyframes rc-hit {
  0%, 31%   { border-color: rgba(255,255,255,.2); }
  36%, 84%  { border-color: rgba(255,68,54,.6); }
  92%, 100% { border-color: rgba(255,255,255,.2); }
}
@keyframes rc-slash {
  0%, 31%   { scale: 0 1; opacity: 0; }
  38%, 84%  { scale: 1 1; opacity: 1; }
  90%, 100% { scale: 1 1; opacity: 0; }
}