/* The right-hand column every game's start screen shares: join with the phone (scan first, type as
   the backup), sound, and one way back to the game menu on the home page. Same place on every game. */
.ck-side{position:absolute;right:28px;top:24px;bottom:22px;width:330px;display:flex;flex-direction:column;gap:12px;z-index:5;font-family:'Nunito',system-ui,sans-serif}
.ck-join{background:#fff;border-radius:26px;padding:16px 20px 14px;text-align:center;box-shadow:0 10px 0 rgba(0,0,0,.18);color:#26302a}
.ck-step{font-weight:800;font-size:19px;line-height:1.2;color:#26302a;display:flex;align-items:center;justify-content:center;gap:9px;text-align:left}
.ck-step i{flex:none;font-style:normal;background:#f5b93c;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;font-family:'Baloo 2',system-ui,sans-serif;font-size:21px}
.ck-join #qr{width:196px;height:196px;margin:8px auto 4px;image-rendering:pixelated}
.ck-join #qr svg,.ck-join #qr img{width:100%;height:100%}
.ck-or{font-size:17px;font-weight:700;color:#55635a;line-height:1.3}
.ck-or b{color:#1f5a3a;font-family:'Baloo 2',system-ui,sans-serif;font-size:23px;font-weight:800}
.ck-code{font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;font-size:62px;letter-spacing:.14em;line-height:1;margin:2px 0 0;color:#26302a}
.ck-status{margin:4px 0 8px;font-size:16px;color:#55635a;font-weight:700;min-height:22px}
.ck-btn{display:block;width:100%;font-weight:800;font-size:20px;border:none;border-radius:999px;padding:12px 16px;cursor:pointer;color:#26302a;background:#fff;font-family:inherit;text-decoration:none;text-align:center;box-shadow:0 5px 0 rgba(0,0,0,.22)}
.ck-btn.sound{background:#f5b93c}
.ck-btn.menu{margin-top:auto}
/* the grown-ups' privacy policy link, small, in the margin under the column */
.ck-privacy{position:absolute;right:0;bottom:-21px;font-size:13px;font-weight:700;color:rgba(38,48,42,.75);text-decoration:underline}
.ck-btn:focus{outline:5px solid #ffe08a;outline-offset:3px}
/* the game's own picture area, left of the column */
@keyframes ck-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.ck-bob{animation:ck-bob 2.4s ease-in-out infinite}
.ck-bob:nth-child(2){animation-delay:.4s}.ck-bob:nth-child(3){animation-delay:.8s}.ck-bob:nth-child(4){animation-delay:1.2s}
/* phone badges move left of the column while the start screen shows */
#stage:has(#lobby:not(.hidden)) #players{right:384px}
/* how to play, in pictures, for kids who can't read yet */
.ck-how{display:flex;gap:12px;align-items:stretch;margin-top:10px}
.ck-how div{flex:1;background:rgba(255,255,255,.88);border-radius:20px;padding:10px 10px 12px;font-weight:800;font-size:19px;line-height:1.15;color:#26302a;text-align:center;box-shadow:0 5px 0 rgba(0,0,0,.14)}
.ck-how span{display:block;font-size:42px;line-height:1.15;margin-bottom:4px}
.ck-two{margin:12px 0 0;font-weight:800;font-size:19px;opacity:.85}