#app {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
display: grid;
margin: 0.1em;
}

#app.desktop1 {
grid-gap: 0.25em 0.5em;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 4.4em 2.2em;
grid-template-areas:
"history game"
"actions actions"
"chat chat";
}

#app.desktop2 {
grid-gap: 0.25em 0.5em;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr 4.4em 2.2em;
grid-template-areas:
"history game"
"actions actions"
"chat chat";
}

#app.wide1 {
grid-gap: 0.5em 1em;
grid-template-columns: 3fr 2fr 2fr;
grid-template-rows: 1fr 2.2em;
grid-template-areas:
"history game actions"
"history chat chat";
}

#app.mobile1 {
grid-gap: 0.25em 0.5em;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 6.4em 1.6em;
grid-template-areas:
"history"
"game"
"actions"
"chat";
}

#historyArea { 
grid-area: history; 
}

#gameArea { 
grid-area: game; 
user-select: none;
-webkit-user-select: none;
touch-action: none;
}

#actionsArea { 
grid-area: actions; 
user-select: none;
-webkit-user-select: none;
}

#chatArea { 
grid-area: chat; 
}

#gameMenu, #actionsMenu, #history {
overflow: auto;
width: 100%;
height: 100%;
margin: 0;
}

#historyArea, #gameArea, #actionsArea, #chatArea {
padding: 0;
margin: 0;
overflow: hidden;
}

.scrollX {
overflow-x: auto;
width: auto;
}

.scrollY {
overflow-y: auto;
height: auto;
}

span.chSystem, span.chAdmin { color: var(--ch-system-admin); font-weight: bold; }
span.chGame { color: var(--ch-game); }
span.chChat { color: var(--ch-chat); }
span.chPM { color: var(--ch-pm); }
span.chFriend, span.chInvitation { color: var(--ch-invite); }
span.chTable { color: var(--ch-table); }
span.chGlobal { color: var(--ch-global); }

button.color0, span.color0, button.colorBlack, span.colorBlack { color: var(--clr-black); }
button.color1, span.color1, button.colorViolet, span.colorViolet { color: var(--clr-violet); }
button.color2, span.color2, button.colorMagenta, span.colorMagenta { color: var(--clr-magenta); }
button.color3, span.color3, button.colorPink, span.colorPink { color: var(--clr-pink); }
button.color4, span.color4, button.colorRed, span.colorRed { color: var(--clr-red); }
button.color5, span.color5, button.colorBrown, span.colorBrown { color: var(--clr-brown); }
button.color6, span.color6, button.colorOrange, span.colorOrange { color: var(--clr-orange); }
button.color7, span.color7, button.colorYellow, span.colorYellow { color: var(--clr-yellow); }
button.color8, span.color8, button.colorYellowgreen, span.colorYellowgreen { color: var(--clr-yellowgreen); }
button.color9, span.color9, button.colorGreen, span.colorGreen { color: var(--clr-green); }
button.color10, span.color10, button.colorAzur, span.colorAzur { color: var(--clr-azur); }
button.color11, span.color11, button.colorBlue, span.colorBlue { color: var(--clr-blue); }
button.color12, span.color12, button.colorNavy, span.colorNavy { color: var(--clr-navy); }
button.color13, span.color13, button.colorDarkgray, span.colorDarkgray { color: var(--clr-dark-gray); }
button.color14, span.color14, button.colorLightgray, span.colorLightgray { color: var(--clr-light-gray); }