Add code for data-ck attributes which can occur on any tag

/**
 * FRISE (FRee Interactive Story Engine)
 * A light-weight engine for writing interactive fiction and games.
 *
 * Copyright 2022-2023 Christopher Pollett chris@pollett.org
 *
 * @license
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 *
 * @file The CSS code used to style the elements used by a game
 * @author Chris Pollett
 * @link https://www.frise.org/
 * @copyright 2022 - 2023
 */
/* make sure game tags we don't want to display, we don't display
 */
x-game,
x-action
{
    display: none;
}
/*
 * General useful classes
 */
.float-right
{
    float: right;
}
.float-left
{
    float: left;
}
.float-opposite
{
    float: right;
}
.rtl .float-opposite
{
    float: left;
}
.left
{
    text-align: left;
}
.right
{
    text-align: right;
}
.opposite
{
    text-align: left;
}
.rtl .opposite
{
    text-align: right;
}
.center
{
    text-align: center;
}
.fit-content
{
    width: fit-content;
}
.rounded
{
    border-radius: 20px;
}
.rounded-top
{
    border-radius: 20px 20px 0 0;
}
.medium-width
{
    width: 150px;
}
.mobile .medium-width
{
    width: 100px;
}
.medium-border
{
    border: solid 2px black;
}
.outline
{
    color: white;
    text-shadow:
        -1px -1px 0 black,
        1px -1px 0 black,
        -1px 1px 0 black,
        1px 1px 0 black;
}
/*
 * Styles specific to the game content and nav areas
 */
#game-content
{
    font-family: "Oswald", serif;
    font-size: 18pt;
    height: 100%;
    left: 300px;
    line-height: 1.6;
    overflow-x: scroll;
    overflow-y: scroll;
    position: fixed;
    transition: left .25s ease-in;
    top: 0px;
    padding-top: 23px;
    width: calc(100% - 300px);
}
.rtl
{
    direction: rtl;
}
.rtl #game-content
{
    left: unset;
    right: 300px;
    transition: right .25s ease-in;
}
.no-nav #game-content
{
    left: 20px;
    right: 20px;
    transition: unset;
    width: calc(100% - 40px);
}
#main-nav,
#main-bar
{
    background: linear-gradient(to right, white, 97%, lightgray);
    height: 100%;
    left: 0;
    overflow-y: scroll;
    position: fixed;
    text-align: center;
    transition: left .25s ease-in;
    top: 0px;
    width: 240px;
    z-index: 0;
}
.rtl #main-nav,
.rtl #main-bar
{
    background: linear-gradient(to left, white, 97%, lightgray);
    left: unset;
    right: 0;
    transition: right .25s ease-in;
}
#main-bar
{
    background: white;
    height: 50px;
    text-align: left;
    top: 0;
    width: 50px;
    z-index: 2;
}
.mobile #main-bar
{
    background: white;
    height: 50px;
    top: 0;
    width: 50px;
    z-index: 2;
}
.rtl #main-bar
{
    text-align: right;
}
#main-nav button,
#main-bar button
{
    border-radius: 10px;
    font-size: 21pt;
    padding: 2px 5px 5px 5px;
    width: 40px;
}
.mobile #main-nav button,
.mobile #main-bar button
{
    font-size: 18pt;
    height: 50px;
    margin: 2px;
    padding: 8px 10px 10px 10px;
    width: 40px;
}
#main-nav h1
{
    margin: 8px;
}
#main-nav x-button,
#main-nav input[type="range"]
{
    width: 170px;
}
#main-nav .nav-label
{
    font-size: 18pt;
    margin: auto;
    text-align: left;
    width: 170px;
}
.rtl #main-nav .nav-label
{
    text-align: right;
}
#main-nav .nav-info
{
    font-size: 18pt;
    margin: 0px auto 15px auto;
    text-align: left;
    width: 170px;
}
.rtl #main-nav .nav-info
{
    text-align: right;
}
.footer-space {
    height: 1in;
}
/*
 * Styles related to a Save/Load Game Location
 */
.filled
{
    background-color: blue;
    color: white;
}
table.save-table
{
    width: 7in;
}
.mobile table.save-table
{
    width: 320px;
}
table.save-table,
table.save-table tr,
table.save-table th,
table.save-table td
{
    border-collapse: collapse;
    border: 1px solid black;
    padding:10px;
    text-align: center;
}
.mobile table.save-table,
.mobile table.save-table tr,
.mobile table.save-table th,
.mobile table.save-table td
{
    padding:3px;
}
table.save-table td.save-name
{
    width: 3in;
}
.mobile table.save-table td.save-name
{
    width: 100px;
}
.mobile #save-disk,
.mobile #load-disk
{
    visibility: hidden;
}
/*
 * Styles specific to how we want HTML to appear in the game
 * as well as the new x- tags that we use for presentation
 */
h1
{
    margin: 0px;
    padding: 0px;
}
img
{
    max-width: 90%;
}
figure
{
    max-width: 90%;
}
figure > img
{
    max-width: 100%;
}
input
{
    border: 2px solid lightblue;
    border-radius: 5px;
    font-size: 18pt;
    padding: 2px;
}
x-button
{
    background-color: #F0F0F6;
    border: 1px solid gray;
    border-radius: 5px;
    color: black;
    display: inline-block;
    font-size: 18pt;
    font-weight: bold;
    padding: 8px;
    margin: 3px;
}
x-button.disabled
{
    border: 1px solid lightgray;
    background-color: #F6F6FA;
    color: #666;
    cursor: not-allowed;
}
x-button:hover
{
    background-color: lightgray;
}

x-button.disabled:hover
{
    color: #666;
    background-color: #F6F6FA;
}
x-speaker
{
    border: 3px solid black;
    border-radius: 10px;
    display: block;
    font-size:18pt;
    margin: 10px;
    min-height: 110px;
    padding: 10px;
    width: 90%;
}
.mobile x-speaker
{
    margin: 2px;
    padding: 4px;
    width: 82%;
}
x-speaker figure:first-of-type
{
    border-radius: 5px;
    display: block;
    float: left;
    margin: 0;
    width: 120px;
}
.rtl x-speaker figure:first-of-type
{
    float: right;
}
.mobile x-speaker figure:first-of-type
{
    width: 80px;
}
x-speaker figure:first-of-type > img
{
    border-radius: 10px;
    display: block;
    height: 100px;
    margin: auto;
    width: 100px;
}
.mobile x-speaker figure:first-of-type > img
{
    width: 70px;
    height: 70px;
}