/* Checkers-only bits on top of /arcade/arcade.css (the shared board-game chrome). */
.ck-key { display: inline-block; width: 1em; height: 1em; border-radius: 50%; vertical-align: -.12em; margin: 0 .15em; }
.ck-key.you { background: #FBF6EC; box-shadow: inset 0 0 0 3px #D83A34, 0 0 0 1px #8C7A5A; }
.ck-key.rocko { background: #1E1B1A; box-shadow: inset 0 0 0 3px #B8652F; }
.ck-green { color: #1F8F5A; font-weight: 800; }

/* The page sits in an illustrated scene (Ron's DALL·E backdrop, public/scenes/)
   instead of the purple confetti stage: a fixed layer (works on iPhone, where
   background-attachment: fixed doesn't). The board goes on the open lawn in the
   middle; on phones the centre of the scene shows (sky, trees, grass). */
body.ck { background: #7CC35A; }
body.ck::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("/scenes/checkers-picnic.webp?v=3bb9f07") center 35% / cover no-repeat; }
/* light footer text needs a backing over the bright scene */
body.ck .site-foot { background: rgba(24,10,64,.82); }