Adds referee screen and deities.

Updates bestiary with links to nonhuman racial modifiers.

src/assets/scripts/tools.js

@@ -19,15 +19,28 @@ const // Scripts for the Die Roller
             if (rollerInput.value === '') rollerOutput.replaceChildren();
         });
 
-        // do the roll and show th (cleaned-up) result
+        // do the roll(s) and show the (cleaned-up) result(s)
         rollerForm.addEventListener('submit', (e) => {
             e.preventDefault();
             if (!window.dice) return;
 
-            const newEl = document.createElement('li');
-            const result = dice.roll(rollerInput.value);
-            newEl.innerText = `${dice.stringify(result)
-                .replaceAll('!!!mods listing not yet complete!!!', '')} = ${+result}`;
+            const newEl = document.createElement('li'),
+                // support multiple sets of dice
+                rolls = rollerInput.value.split(/,\s+/);
+
+            newEl.innerText = rolls
+                .map((roll) => {
+                    const result = dice.roll(roll),
+                        stringifiedResult = dice.stringify(result);
+                    return `${stringifiedResult.replaceAll(
+                        '!!!mods listing not yet complete!!!',
+                        ''
+                    )}${
+                        // only show total if there's multiple dice thrown in a set
+                        stringifiedResult.includes(',') ? ` = ${+result}` : ''
+                    }`;
+                })
+                .join(', ');
             rollerOutput.prepend(newEl);
         });
 
@@ -36,7 +49,6 @@ const // Scripts for the Die Roller
             if (event.key === 'Escape') rollerForm.reset();
         });
     },
-
     // Scripts for the Complication Randomizers
     shuffleContainer = (parent) => {
         const container = document.getElementById(parent),
@@ -48,7 +60,6 @@ const // Scripts for the Die Roller
             shuffled.sort(() => 0.5 - Math.random());
         for (let i = 0; i < length; i++) container.appendChild(shuffled[i]);
     },
-
     addComplicationForm = () => {
         const complicationForm = document.getElementById('js-complicationForm');
         complicationForm.addEventListener('submit', (e) => {
@@ -56,7 +67,6 @@ const // Scripts for the Die Roller
             shuffleContainer('js-complicationList');
         });
     },
-
     addAstralComplicationForm = () => {
         const complicationForm = document.getElementById(
             'js-astralComplicationForm'

src/assets/styles/styles.css

@@ -336,6 +336,10 @@ table th {
 	background: rgba(37, 40, 55, 0.6);
 }
 
+.contentWarning {
+	font-style: italic;
+}
+
 .headlessTableWrapper thead {
 	display: none;
 }
@@ -607,37 +611,11 @@ a.licenseLink:hover {
 	border: 1px solid #e94e5c;
 }
 
-/*
-.navMenu > ul > li.hasSubMenu > a {
-	border: 1px solid #e94e5c;
-}
-
-/*
-.navMenu li.hasSubMenu:hover,
-.navMenu li.hasSubMenu:focus-within {
-	background-color: rgba(233, 78, 92, 0.5);
-}
-*/
-
 .navMenu li:hover,
 .navMenu li:focus-within {
 	background-color: rgba(233, 78, 92, 0.5);
 }
 
-/*
-.navMenu ul li ul li.hasSubMenu:hover,
-.navMenu ul li ul li.hasSubMenu:focus-within {
-	background-color: transparent;
-}
-*/
-
-/*
-.navMenu li.hasSubMenu:hover a,
-.navMenu li.hasSubMenu:hover a:visited {
-	color: #44fcfc;
-}
-*/
-
 .navMenu li a:hover,
 .navMenu li a:visited:hover {
 	color: #e94e5c;
@@ -828,10 +806,66 @@ a.pageTitle-sublink {
 	margin-top: 0.5rem;
 }
 
+.refereeScreen {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	width: 100%;
+}
+
+.refereeScreen .toolDetails {
+	font-size: medium;
+}
+
+.refereeScreen .toolDetails > ol,
+.refereeScreen .toolDetails > ul {
+	margin-left: .25rem;
+	padding-left: 0;
+}
+
+.refereeScreen .toolDetails > ol > li > p {
+	margin-bottom: 0;
+	margin-top: 0;
+}
+
+.refereeScreen .toolDetails > ul > li > ul {
+	padding-left: 1rem;
+}
+.refereeScreen .toolDetails ol p,
+.refereeScreen .toolDetails ul p {
+	margin-left: 0;
+}
+
+.refereeScreen .toolDetails > p {
+	margin: -.5rem 0 -.5rem -1rem;
+}
+
+.refereeScreen .toolDetails > summary > h3 {
+	font-size: large;
+	margin: 0;
+}
+
+.refereeScreen .toolDetails > summary + * {
+	margin-top: -.25rem;
+}
+
 .refereeTools {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
+	width: 100%;
+}
+
+.refereeTools .toolDetails > summary > h3 {
+	font-size: large;
+	margin: 0;
+}
+
+.refereeScreen .toolDetails summary,
+.refereeTools .toolDetails summary {
+	backdrop-filter: blur(1rem);
+	position: sticky;
+	top: 0;	
 }
 
 .rollerForm input[type=reset] {