/* ============================================================================
   OAKLAND CODERS WORLD — the wordmark.

   This used to REBUILD the lockup in CSS: "Oakland Coders" as text, then W · globe ·
   R · L · D as five positioned spans, reproducing the game's letter and gap ratios
   from TitleScreen.js so the two would match. It was ~100 lines of derived constants,
   and it never quite landed — the globe sat a shade low against the flat-topped caps,
   because an image box and a glyph's cap height are not the same thing and no amount
   of vertical-align arithmetic makes them agree across font loads and zoom levels.

   It's one exported PNG now (645x163, the same artwork the game's title uses). The
   alignment is baked into the art, so there is nothing left to drift.

   Pages size it with a width; height follows from the aspect ratio. The min(px, vw)
   pattern keeps it from overflowing a narrow window.
   ========================================================================= */

.ocw {
  display: block;
  height: auto;
  max-width: 100%;
  image-rendering: pixelated;   /* pixel art — no smoothing when scaled */
}

/* ============================================================================
   Demo-video thumbnails — shared by the dashboard home cards and the login
   page: a framed still with a centered play badge and a "Watch demo" pill.
   The .video-thumb element is the button that opens the video.

   The two source stills differ by a few pixels in ratio, so every thumb crops
   to the same 7:5 box and renders identically. The ▶ is a text glyph (FE0E
   pins text presentation) so pages don't need an icon font for it.
   ========================================================================= */
.video-thumb { position: relative; display: block; cursor: pointer; }
.video-thumb img { display: block; width: 100%; aspect-ratio: 7 / 5; object-fit: cover;
  transition: opacity 0.15s; }
.video-thumb:hover img { opacity: 0.85; }
.thumb-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center;
  justify-content: center; background: rgba(17,24,39,0.72); color: #fff;
  border: 2px solid rgba(255,255,255,0.85); transition: background 0.15s, transform 0.15s; }
.thumb-play::after { content: '\25B6\FE0E'; font-size: 13px; line-height: 1; padding-left: 3px; }
.video-thumb:hover .thumb-play { background: #1E8A62; transform: translate(-50%, -50%) scale(1.08); }
.thumb-label { position: absolute; bottom: 5px; right: 6px; font-size: 10px; font-weight: 600;
  color: #fff; background: rgba(17,24,39,0.72); padding: 1px 7px; border-radius: 999px; }