/* Learn to Play (course.js): the card over the training rooms.
   Top centre, because teach.js owns the strip at the bottom centre and the
   controls card and vitals own the left. The painted card is the picture,
   one word says the step, the keys are words ("Space", "Left click"). The
   Blink step opens into a lesson: four moving pictures, one per way. */
#course {
  --co-ink: #f2e6bd;
  --co-muted: #a99f86;
  --co-brass: #c6a85b;
  --co-gold-a: #f1d27d;
  --co-gold-b: #c99443;
  --co-gold-ink: #22170e;
  --co-moss: #7fb069;
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  width: min(560px, calc(100vw - 32px));
  box-sizing: border-box;
  display: grid;
  gap: 10px;
  padding: 12px 16px 14px;
  background: rgba(10, 15, 24, .95);
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .55), 0 10px 30px rgba(0, 0, 0, .45);
  color: var(--co-ink);
  font: 400 14px/1.35 "Avenir Next", "Segoe UI", system-ui, sans-serif;
  pointer-events: auto;
}
#course .co-pips { display: flex; gap: 6px; justify-content: center; }
#course .co-pips i {
  width: 22px; height: 4px;
  background: rgba(198, 168, 91, .25);
}
#course .co-pips i.is-done { background: var(--co-moss); }
#course .co-pips i.is-now { background: var(--co-gold-a); }
#course .co-row { display: flex; align-items: center; gap: 14px; }
#course .co-art {
  flex: none;
  width: 64px; height: 64px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .55);
  background: #0f1813;
}
#course .co-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* "Try it" shows the shop's own picture of what was bought, whole. */
#course .co-art.is-icon img { object-fit: contain; padding: 6px; box-sizing: border-box; }
#course .co-caps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
#course .co-or { font-size: 12px; color: var(--co-muted); padding: 0 1px; }
#course .co-cap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 36px;
  height: 34px;
  padding: 0 9px;
  box-sizing: border-box;
  background: linear-gradient(#253246, #182230);
  border: 1px solid rgba(198, 168, 91, .7);
  border-bottom-width: 3px;
  border-radius: 6px;
  font: 700 15px/1 "Glow Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .03em;
  color: var(--co-ink);
  white-space: nowrap;
}
#course .co-cap-mouse svg { width: 15px; height: 21px; color: var(--co-gold-a); }
#course .co-cap-mouse i { font-style: normal; }
#course .co-words { min-width: 0; flex: 1; }
#course .co-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font: 700 20px/1.1 "Glow Serif", "PT Serif", Georgia, serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--co-gold-a);
}
#course .co-n {
  font: 700 13px/1 "Glow Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  font-style: normal;
  color: var(--co-brass);
  letter-spacing: .04em;
}
#course .co-hint { margin: 3px 0 0; color: var(--co-ink); opacity: .85; }
#course .co-count {
  flex: none;
  font: 700 18px/1 "Glow Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--co-brass);
}
#course .co-tick { display: none; flex: none; width: 36px; height: 36px; color: var(--co-moss); }
#course .co-tick svg { width: 100%; height: 100%; }
#course.is-ticked { box-shadow: inset 0 0 0 2px var(--co-moss), 0 10px 30px rgba(0, 0, 0, .45); }
#course.is-ticked .co-tick { display: block; animation: co-pop .25s cubic-bezier(.2, .9, .3, 1.3); }
#course.is-arriving .co-caps, #course.is-arriving .co-count { opacity: .4; }

/* The Blink lesson: four ways, each a moving picture, a key and a few words.
   The ones you have done carry a tick. */
#course.is-lesson { width: min(860px, calc(100vw - 32px)); }
#course .co-ways {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#course .co-ways li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 6px 6px 8px;
  background: rgba(16, 23, 34, .9);
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .3);
}
#course .co-ways canvas { width: 100%; max-width: 168px; aspect-ratio: 168 / 128; display: block; }
#course .co-ways .cw-what { font-size: 12px; line-height: 1.25; text-align: center; color: var(--co-ink); opacity: .85; }
#course .co-ways .cw-tick { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; color: var(--co-moss); display: none; }
#course .co-ways .cw-tick svg { width: 100%; height: 100%; }
#course .co-ways li.is-done { box-shadow: inset 0 0 0 2px var(--co-moss); }
#course .co-ways li.is-done .cw-tick { display: block; }
#course .co-ways .co-cap { height: 28px; font-size: 13px; }
#course.is-ticked .co-count { display: none; }
@keyframes co-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#course .co-exit {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--co-muted);
  text-decoration: none;
}
#course .co-exit:hover { color: var(--co-ink); }

#course.is-finished { justify-items: center; text-align: center; padding: 16px 18px 18px; }
#course.is-finished .co-title { font-size: 26px; }
#course .co-foot { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: center; margin-top: 4px; }
#course .co-go {
  display: inline-grid;
  place-items: center;
  min-width: 220px;
  min-height: 52px;
  background: linear-gradient(var(--co-gold-a), var(--co-gold-b));
  border: 1px solid #7a5f38;
  color: var(--co-gold-ink);
  font: 700 22px/1 "Glow Serif", "PT Serif", Georgia, serif;
  letter-spacing: .2em;
  text-decoration: none;
}
#course .co-go:hover { background: linear-gradient(#f6dc94, #d5a04c); }
#course .co-more {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--co-muted);
  text-decoration: none;
}

@media (max-width: 600px) {
  #course { top: 8px; padding: 10px 12px 12px; }
  #course .co-row { gap: 10px; }
  #course .co-cap { min-width: 32px; height: 30px; font-size: 13px; }
  #course .co-art { width: 48px; height: 48px; }
  #course .co-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #course .co-ways .cw-what { font-size: 11px; }
  #course .co-title { font-size: 17px; }
  #course .co-hint { font-size: 13px; }
  #course .co-pips i { width: 16px; }
}

/* A training room has no round to introduce: the "Round 01" card and its
   stone-carrying line would sit under this one and tell a learner about a
   match they are not in. The score box ("0 : 0, no timer") and the kill feed
   (a Revive yard downs its own bodies, six lines of it) are match furniture
   the card would sit on top of. */
body:has(#course) #rd-intro,
body:has(#course) #top,
body:has(#course) #feed { display: none !important; }

/* gameplay-ease-25 (round-5 ease judge): the Stone yard's card, with its four
   pictures, reaches a third of the way down, and the death card ("fell in the
   Sink") stood at 24% under it, so the one lesson about the pit showed the
   fall and the respawn but never the words. While the course is up the death
   card stands in the lower half instead, clear of the card on every step. */
body:has(#course) #downbanner { top: 56%; }