/* ---------------------------------------------------------------------------
   The week recap card (src/recap.js). A window of the room (room.css) over a
   night-navy shade: the title bar says how the week went — green for a win,
   red for a loss, ink for a week with no game — the men who moved are tiles
   with their faces, and the foot holds Continue. Dismissed with Continue or
   Escape. Solid colour only.
--------------------------------------------------------------------------- */
.rc-wrap {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: 24px; background: rgba(7, 13, 28, 0.84);
}
/* the head and the foot stay put and only the body scrolls, so Continue is
   on screen however long the week was */
/* scoped to the shade: .rc is also a record cell on the Teams sheet */
.rc-wrap .rc {
  width: min(660px, 100%); max-height: 86vh; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--win); color: #fff; border: 2px solid #fff; border-radius: 0;
  box-shadow: var(--frame), var(--drop);
}
.rc-head { flex: none; padding: 12px 16px 10px; color: #fff; border-bottom: 3px solid var(--ink); }
.rc-head.rc-win { background: var(--green); box-shadow: inset 0 3px 0 0 #3fc46f, inset 0 -3px 0 0 var(--green-dk); }
.rc-head.rc-loss { background: var(--red); box-shadow: inset 0 3px 0 0 #f25a7d, inset 0 -3px 0 0 var(--red-dk); }
.rc-head.rc-flat { background: var(--tm); color: var(--on-tm); box-shadow: inset 0 3px 0 0 var(--tm-hi), inset 0 -3px 0 0 var(--tm-dk); }
.rc-kick { font: 900 11px var(--sans); text-transform: uppercase; letter-spacing: 0.1em; }
.rc-head h2 { font-size: 38px; line-height: 1; margin: 4px 0 0; text-transform: uppercase; text-shadow: 3px 3px 0 var(--ink); }
.rc-head.rc-flat h2 { text-shadow: 3px 3px 0 var(--tm-sh); }
.rc-rec { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.rc-logo { width: 32px; height: 32px; object-fit: contain; background: #fff; box-shadow: var(--frame-2); margin: 2px; }
/* records.css has an .rc-logo of its own (22px) and loads later */
.rc-rec .rc-logo { width: 32px; height: 32px; }
.rc-rec b { font-family: var(--disp); font-weight: 400; font-size: 28px; line-height: 1; text-shadow: 2px 2px 0 var(--ink); }
.rc-rec span { font: 800 11.5px var(--sans); }

.rc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px; display: grid; gap: 16px; align-content: start;
  scrollbar-color: var(--rule) var(--win); }
.rc-body h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 3px 8px;
  font: 400 20px/1 var(--disp); letter-spacing: .6px; text-transform: uppercase; color: var(--gold);
}
.rc-body h3::after { content: ''; flex: 1; height: 3px; background: var(--rule); order: 2; }

/* every man who moved, with his face — not a list of names */
.rc-men { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.rc-man {
  position: relative; display: grid; justify-items: center; gap: 2px; margin: 3px; padding: 8px 6px 7px;
  text-decoration: none; color: var(--card-ink); background: var(--card); box-shadow: var(--frame); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
.rc-man:hover { background: var(--card-hov); color: var(--card-ink); }
.rc-face, .pxface.rc-face { width: 48px; height: 48px; background: var(--tm); box-shadow: var(--frame-2); margin: 2px; image-rendering: pixelated; }
.rc-man b { margin-top: 4px; max-width: 100%; font: 400 17px/1 var(--disp); letter-spacing: .3px; text-transform: uppercase; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-man span { font: 900 10px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--soft); text-align: center; }
.rc-man em {
  position: absolute; top: -9px; right: -7px; padding: 3px 7px 2px; font-style: normal;
  background: var(--green); color: #fff; font: 900 12px var(--sans);
  box-shadow: var(--frame-2);
}
.rc-man.rc-bad em { background: var(--red); }
.rc-more { display: inline-flex; margin: 8px 3px 0; padding: 4px 9px 3px; background: #fff; color: var(--ink); box-shadow: var(--frame);
  font: 400 16px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; text-decoration: none; }
.rc-more:hover { background: var(--gold); }

.rc-todo {
  position: relative; display: block; margin: 3px 3px 8px; padding: 10px 12px 9px 30px; text-decoration: none;
  background: var(--card); color: var(--card-ink); box-shadow: var(--frame);
  font: 400 20px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
.rc-todo::before {
  content: ''; position: absolute; left: 8px; top: 50%; width: 14px; height: 22px; margin-top: -11px;
  background: var(--cur) center / 100% 100% no-repeat; image-rendering: pixelated;
}
.rc-todo:hover { background: var(--card-hov); color: var(--card-ink); }
/* .rc > .rc-foot: records.css has a .rc-foot of its own (an ink strip), so
   this one is scoped to the recap card */
.rc-wrap .rc > .rc-foot {
  flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px;
  background: var(--ink); color: #fff; font: 800 12px var(--sans); letter-spacing: normal;
  border-top: 3px solid var(--ink);
}
.rc-btn {
  margin: 3px 3px 6px; padding: 9px 18px 8px; cursor: pointer; border: 0; border-radius: 0;
  background: var(--gold); color: var(--ink);
  box-shadow: var(--frame), 0 6px 0 0 #000, inset 0 -4px 0 0 var(--gold-dk);
  font: 400 24px/1 var(--disp); letter-spacing: 0.5px; text-transform: uppercase;
}
.rc-btn:hover { background: var(--gold-hi); }
.rc-btn:active { transform: translateY(3px); box-shadow: var(--frame), 0 3px 0 0 #000, inset 0 -2px 0 0 var(--gold-dk); }
.rc-box { background: #fff; box-shadow: var(--frame), 0 6px 0 0 #000, inset 0 -4px 0 0 var(--steel); }
.rc-box:hover { background: var(--gold); }
/* "Show me this each week": a pixel switch */
.rc-tgl {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 4px 0;
  background: none; border: 0; cursor: pointer; color: #fff; font: 900 11px var(--sans); letter-spacing: .06em; text-transform: uppercase;
}
.rc-tgl i {
  position: relative; flex: none; width: 40px; height: 22px;
  background: #4b5563; box-shadow: 0 0 0 2px #000;
}
.rc-tgl i::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  background: #fff; box-shadow: 0 0 0 2px #000;
}
.rc-tgl.on i { background: var(--green); }
.rc-tgl.on i::after { left: 21px; }

@media (max-width: 560px) {
  .rc-wrap { padding: 12px; }
  .rc-wrap .rc { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .rc-head { padding: 10px 12px 9px; }
  .rc-head h2 { font-size: 30px; }
  .rc-body { padding: 12px; }
  .rc-wrap .rc > .rc-foot { padding: 10px 12px; gap: 8px; }
  .rc-go { flex: 1 1 auto; }
  .rc-tgl { margin-left: 0; flex-basis: 100%; }
}

.rc-toast {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--win); color: #fff; border: 2px solid #fff; box-shadow: var(--frame), var(--drop);
}
.rc-toast b { font: 400 20px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; }
.rc-toast .rc-btn { font-size: 18px; padding: 5px 12px; }