/* ---------- the console's cartridge library (cartridges.js): click the console ----------
   A tray moulded in the console's own charcoal plastic, in its lettering and C·E·S orange,
   opening over the console. Each cartridge stands in it as it would in the slot. */
#console svg > * { cursor: pointer; }
/* its power light, lit while a game is playing */
#con-led .lit { opacity: 0; transition: opacity .15s; }
#console.playing #con-led .lit { opacity: 1; }

#cart-picker {
  position: fixed;
  z-index: 19;
  display: flex;
  flex-direction: column;
  width: 330px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  padding: 10px 8px 8px;
  border-radius: 9px;
  background: linear-gradient(#3b3b42, #2a2a30 40%, #1f1f23);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 -1px 0 rgb(0 0 0 / .5), 0 0 0 1px #0a0a0c, 0 16px 36px rgb(0 0 0 / .55), 0 3px 8px rgb(0 0 0 / .35);
  font-family: 'Archivo Narrow', sans-serif;
  color: #d8d8de;
  animation: cp-in .16s ease-out;
}
#cart-picker[hidden] { display: none; }
@keyframes cp-in { from { opacity: 0; translate: 0 8px; } }

.cp-head { display: flex; align-items: baseline; gap: 8px; margin: 0 4px; padding: 0 2px 8px; border-bottom: 1px solid rgb(0 0 0 / .5); box-shadow: 0 1px 0 rgb(255 255 255 / .06); font-weight: 700; font-size: 12px; letter-spacing: 1.8px; color: #8d8d96; }
.cp-head b { font-size: 16px; letter-spacing: 1.6px; color: #d97757; }
.cp-head .cp-hint { margin-left: auto; font-size: 11px; font-weight: 400; letter-spacing: .4px; color: #77777f; }

.cp-list { display: grid; gap: 2px; padding-top: 6px; overflow-y: auto; }
.cp-list[hidden], .cp-help[hidden] { display: none; }
.cp-row { position: relative; border-radius: 6px; }
.cp-row.sel { background: rgb(255 255 255 / .055); box-shadow: inset 0 0 0 1px rgb(217 119 87 / .5); }
.cp-cart { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 12px; width: 100%; padding: 7px 8px; border: 0; border-radius: 6px; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; outline: none; }
.cp-cart svg { display: block; width: 100px; height: auto; filter: drop-shadow(0 2px 1.5px rgb(0 0 0 / .55)); transition: translate .12s ease-out; }
.cp-row.sel .cp-cart svg { translate: 0 -2px; }
.cp-txt { display: grid; gap: 2px; min-width: 0; }
.cp-txt b { font-size: 15px; letter-spacing: .9px; color: #f1ece2; }
.cp-txt i { font-style: normal; font-size: 12px; letter-spacing: .3px; color: #d9a48f; }
.cp-txt small { font-size: 12px; line-height: 1.25; color: #9a9aa3; }
/* the bottom line: IN THE CONSOLE on the left, the CONTROLS button over its right end */
.cp-tags { display: flex; min-height: 19px; align-items: flex-end; }
.cp-txt em { display: none; padding: 1px 6px 0; border-radius: 3px; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; color: #1c1c20; background: #d97757; }
.cp-row.in em { display: block; }

/* a small moulded button, in the console's plastic */
.cp-ctl, .cp-btns button {
  border: 0;
  border-radius: 3px;
  font: 700 10px/1 'Archivo Narrow', sans-serif;
  letter-spacing: 1.2px;
  color: #e9dcc4;
  background: linear-gradient(#4a4a52, #2e2e34);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 1px 0 #0a0a0c, 0 1px 3px rgb(0 0 0 / .35);
  cursor: pointer;
  outline: none;
}
.cp-ctl { position: absolute; right: 9px; bottom: 8px; padding: 4px 8px 3px; }
/* a little more to hit than it shows, so a near miss doesn't put the cartridge in instead */
.cp-ctl::before { content: ''; position: absolute; inset: -7px -9px; }
.cp-ctl:hover, .cp-btns button:hover { color: #fff; background: linear-gradient(#55555e, #36363d); }
.cp-ctl:active, .cp-btns button:active { translate: 0 1px; box-shadow: inset 0 1px 2px rgb(0 0 0 / .5); }
.cp-ctl:focus-visible, .cp-btns button:focus-visible { box-shadow: 0 0 0 2px rgb(217 119 87 / .7); }

/* the CONTROLS card: one cartridge's keys, game by game, in the help caption's key caps */
.cp-help { min-height: 0; overflow-y: auto; padding: 8px 6px 2px; }
.cp-hcart { display: flex; align-items: center; gap: 12px; padding-bottom: 2px; }
.cp-hcart svg { width: 74px; height: auto; flex: none; filter: drop-shadow(0 2px 1.5px rgb(0 0 0 / .55)); }
.cp-hcart b { font-size: 16px; letter-spacing: 1px; color: #f1ece2; }
.cp-help section { margin-top: 10px; }
.cp-help h4 { margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px dashed rgb(217 119 87 / .3); font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px; color: #d97757; }
.cp-help dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; align-items: center; margin: 0; }
.cp-help dt { white-space: nowrap; }
.cp-help dd { margin: 0; font-size: 13px; line-height: 1.2; color: #d8d8de; }
.cp-help kbd {
  display: inline-block;
  min-width: 17px;
  margin: 0 1px;
  padding: 0 5px;
  border-radius: 3px;
  font: 700 11px/17px 'Archivo Narrow', sans-serif;
  letter-spacing: .4px;
  text-align: center;
  color: #e9dcc4;
  background: linear-gradient(#3a332c, #241f1a);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 1px 0 #0b0907;
}
.cp-or { margin: 0 3px; font-size: 10.5px; color: #8d8d96; }
.cp-note, .cp-warn { margin: 7px 0 0; font-size: 12px; line-height: 1.3; color: #9a9aa3; }
.cp-warn { color: #ffb27a; }
.cp-foot { margin: 12px 0 0; padding-top: 8px; border-top: 1px solid rgb(0 0 0 / .5); box-shadow: inset 0 1px 0 rgb(255 255 255 / .05); font-size: 12px; line-height: 1.5; color: #9a9aa3; }
.cp-btns { display: flex; justify-content: space-between; gap: 8px; margin: 10px 0 4px; }
.cp-btns button { padding: 7px 12px 6px; font-size: 11px; }
.cp-btns .cp-play { color: #1c1c20; background: linear-gradient(#ec9474, #c4603f); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 1px 0 #0a0a0c, 0 1px 3px rgb(0 0 0 / .35); }
.cp-btns .cp-play:hover { color: #000; background: linear-gradient(#f3a283, #cf6a48); }

/* the Freedoom cartridge's engine (freedoom.js, doom/engine.html), set into the picture over the game
   canvas, under the tube's glass and scanlines; there only while its input is showing */
#picture .doom-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; visibility: hidden; pointer-events: none; }
#picture .doom-frame.on { visibility: visible; pointer-events: auto; }
#crt[data-input="tv"] .doom-frame, #crt[data-input="av3"] .doom-frame { visibility: hidden; pointer-events: none; }