:root {
    --transition: 250ms ease;

}

body {
    overflow-x: clip;
    margin: 0;
    font-size: 0.8rem;
    min-height: 100vh;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 200px;
}

body:has(.room-header) main {
    align-items: flex-start;
}

footer {
    display: grid;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    text-align: center;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
}

.hidden {
    display: none !important;
}




/*選択可能表示*/
.selectable {
    cursor: pointer;
    transition: filter var(--transition);
}

.selectable:hover,
.selectable:visited,
.selectable:active {

    filter: brightness(75%);
}


/* ボタン制御*/
button {
    transition: filter var(--transition);
    cursor: pointer;
}

button:hover,
button:visited,
button:active {
    filter: brightness(75%);
}

/* リンク制御 */
a {
    color: inherit;
    text-decoration: none;
    transition: filter var(--transition);
}

a:hover,
a:visited,
a:active {
    color: inherit;
    text-decoration: none;
    filter: brightness(75%);
}

.footer-links a,
.footer-links a:hover,
.footer-links a:visited,
.footer-links a:active {
    color: var(--secondary-text-color);
}


input[type=text],
input[type=password],
textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: block;
}


.custom-tag-large {
    font-size: 1.35em;
    font-weight: 700;
}

.custom-tag-small {
    font-size: 0.78em;
}

.chat-cell-message ruby {
    ruby-position: over;
}

.chat-cell-message rt {
    font-size: 0.65em;
}

.chat-dice-roll {
    display: inline;
    margin: 0 0.1em;
    padding: 0.08em 0.45em;
    border: 1px solid var(--secondary-bg-color);
    border-radius: 4px;
    background: var(--tertiary-bg-color);
    color: var(--tertiary-text-color);
    font-weight: 700;
    line-break: anywhere;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.chat-dice-rolls {
    font-weight: 500;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media screen {
    .container {
        width: 980px;
        height: 100%;
    }
}

@media screen and (max-width: 980px) {
    .container {
        width: 100%;
    }

}