@mideind/netskrafl-react 1.0.0-beta.5 → 1.0.0-beta.6

package/dist/cjs/{index.css → css/netskrafl.css}

@@ -2,14 +2,13 @@
 @import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
-
 /*
 
    Glyphs.css
 
    Style support for Glyphicons
 
-   Copyright © 2024 Miðeind ehf.
+   Copyright © 2025 Miðeind ehf.
    Author: Vilhjalmur Thorsteinsson
 
    The Creative Commons Attribution-NonCommercial 4.0
@@ -17,16 +16,13 @@
    For further information, see https://github.com/mideind/Netskrafl
 
 */
-
 @font-face {
    font-family: 'Glyphicons Regular';
-   /* The following source URLs are patched up at run-time
-      to point to the backend server */
-   src: url('../fonts/glyphicons-regular.eot') format('embedded-opentype'),
-      url('../fonts/glyphicons-regular.woff') format('woff'),
-      url('../fonts/glyphicons-regular.ttf') format('truetype');
+   /* The following source URLs are assumed to be present on the host */
+   src: url('/static/fonts/glyphicons-regular.eot') format('embedded-opentype'),
+      url('/static/fonts/glyphicons-regular.woff') format('woff'),
+      url('/static/fonts/glyphicons-regular.ttf') format('truetype');
 }
-
 .glyphicon {
    position: relative;
    top: 2px;
@@ -36,7 +32,6 @@
    font-weight: normal;
    line-height: 1;
 }
-
 .glyphicon-play:before {
    content: "\E174";
 }
@@ -226,53 +221,67 @@
 .glyphicon-right-arrow:before {
    content: "\E212";
 }
-
-
 /*
 
-   Skrafl-explo.css
+  Skrafl-explo.css
 
-   Explo theme template for netskrafl.is
+  Explo theme template for netskrafl.is
 
-   Copyright © 2025 Miðeind ehf.
-   Author: Vilhjalmur Thorsteinsson
+  Copyright © 2025 Miðeind ehf.
+  Author: Vilhjalmur Thorsteinsson
 
-   The Creative Commons Attribution-NonCommercial 4.0
-   International Public License (CC-BY-NC 4.0) applies to this software.
-   For further information, see https://github.com/mideind/Netskrafl
+  The Creative Commons Attribution-NonCommercial 4.0
+  International Public License (CC-BY-NC 4.0) applies to this software.
+  For further information, see https://github.com/mideind/Netskrafl
 
+*/
+/*
 */
 div.netskrafl-container {
-  --container-bg-color: #f8f8f8;
+  --logo-primary: #C94314;
+  --logo-secondary: #FFAA88;
+  --logo-accent: #F17736;
+  --svarkur-primary: #066960;
+  --svarkur-secondary: #0a574f;
+  --svarkur-accent: #008b7c;
+  --malfridur-primary: #FF7C24;
+  --malfridur-secondary: #ffb400;
+  --malfridur-accent: #0788C0;
+  --malfridur-green: #09814A;
   --dark-bg-color: #222222;
+  --light-shadow: #666666;
+  --blank-tile: #999999;
+  --middle-shadow: #cccccc;
+  --container-bg-color: #f8f8f8;
   --light-header-color: #eaf5f7;
-  --header-hover-color: #59b2c0;
+  --header-color: hsl(from var(--malfridur-accent) h 50% 60%);
+  --header-hover-color: hsl(from var(--malfridur-accent) h 50% 70%);
+  --humangrad-color: hsl(from var(--malfridur-accent) h 55% 65%);
+  --stats-foreground: hsl(from var(--malfridur-accent) h 45% 45%);
   --link-hover-color: #006db8;
-  --double-word-color: #f8D992;
-  --triple-word-color: #F9B32D;
-  --double-letter-color: #9ED5DA;
-  --triple-letter-color: #21A4B6;
-  --tile-background: #F9E5E6;
+  --double-word-color: hsl(from var(--malfridur-secondary) h 85% 80%); /* #f8D992; */
+  --triple-word-color: hsl(from var(--malfridur-secondary) h 90% 55%); /* #F9B32D; */
+  --double-letter-color: hsl(from var(--svarkur-accent) h 55% 65%); /* #9ED5DA; */
+  --triple-letter-color: hsl(from var(--svarkur-secondary) h 70% 40%); /* #21A4B6; */
+  --chat-background: hsl(from var(--malfridur-secondary) h 65% 92%);
+  --ok-button: var(--malfridur-green);
+  --cancel-button: hsl(from var(--logo-primary) h 45% 55%); /* #B6676D; */
+  --human-color: hsl(from var(--svarkur-secondary) h s 35%); /* #208C9F; */
+  --list-header-background: hsl(from var(--malfridur-secondary) h 85% 90%); /* #fff1d0; */
+  --list-header-bottom: hsl(from var(--malfridur-secondary) h 90% 55%); /* #ffc559; */
+  --tile-background: hsl(from var(--logo-secondary) h 70% 92%);
   --board-background: #E4EAF0;
   --tab-background: #f3f3f6;
   --header-background: #dde1e4;
-  --ok-button: #72a55f;
-  --cancel-button: #B6676D;
-  --two-letter-background: #D8E3D2;
+  --two-letter-background:  hsl(from var(--malfridur-green) h 20% 90%);
+  --header-green:  hsl(from var(--malfridur-green) h 80% 35%);
   --dark-shadow: rgba(0, 0, 0, 0.5);
-  --light-shadow: #666666;
   --rack-shadow: #afb7cad0;
   --focus-border: var(--triple-word-color);
   --light-background: #B9D9DC;
-  --stats-foreground: #197d8b;
-  --human-color: #208C9F;
-  --blank-tile: #999999;
-  --list-header-background: #fff1d0;
-  --list-header-bottom: #ffc559;
   --primary-font: 'Lato', 'Open Sans', 'Arial', sans-serif;
   --number-font: 'Open Sans', 'Lato', 'Arial', sans-serif;
 }
-
 div.netskrafl-container {
   position: relative;
   top: 0;
@@ -296,11 +305,17 @@ div.netskrafl-container ol, div.netskrafl-container ul {
 }
 div.netskrafl-container h1,
 div.netskrafl-container h2,
-div.netskrafl-container h3
-{
+div.netskrafl-container h3 {
   font-size: revert;
   font-weight: revert;
 }
+body div.netskrafl-loading,
+body div.netskrafl-user {
+  display: none;
+}
+div.netskrafl-container div.netskrafl-user {
+  display: block;
+}
 div#board-background {
   height: 100%;
 }
@@ -421,36 +436,22 @@ p a img {
 .ui-widget-header a {
   color: var(--light-header-color);
 }
-.ui-state-default,
-.ui-widget-content .ui-state-default {
-  background-color: #afb8bf;
-  font-weight: bold;
-  color: #ffffff;
-}
-.ui-widget-header .ui-state-default {
-  background-color: #a9d0d6;
+.ui-state-default {
+  background-color: var(--header-color);
   font-weight: bold;
-  color: #ffffff;
+  color: white;
 }
 .ui-state-default a,
 .ui-state-default a:link,
 .ui-state-default a:visited {
-  color: #ffffff;
+  color: white;
   text-decoration: none;
 }
 .ui-state-hover,
-.ui-widget-content .ui-state-hover,
-.ui-state-focus,
-.ui-widget-content .ui-state-focus {
-  background-color: var(--header-hover-color);
-  font-weight: bold;
-  color: #ffffff;
-}
-.ui-widget-header .ui-state-hover,
-.ui-widget-header .ui-state-focus {
+.ui-state-focus {
   background-color: var(--header-hover-color);
   font-weight: bold;
-  color: #ffffff;
+  color: white;
 }
 .ui-state-hover a,
 .ui-state-hover a:hover,
@@ -460,49 +461,30 @@ p a img {
 .ui-state-focus a:hover,
 .ui-state-focus a:link,
 .ui-state-focus a:visited {
-  color: var(--link-hover-color);
-  text-decoration: none;
-}
-.ui-widget-header .ui-state-hover a,
-.ui-widget-header .ui-state-hover a:hover,
-.ui-widget-header .ui-state-hover a:link,
-.ui-widget-header .ui-state-hover a:visited,
-.ui-widget-header .ui-state-focus a,
-.ui-widget-header .ui-state-focus a:hover,
-.ui-widget-header .ui-state-focus a:link,
-.ui-widget-header .ui-state-focus a:visited {
-  color: #ffffff;
-  /* Pantone 300 U */
-  /* #026890; */
+  color: white;
   text-decoration: none;
 }
-.ui-widget-header .ui-state-focus a:focus {
+.ui-state-focus a:focus {
   outline: 0;
 }
 .ui-state-active,
 .ui-widget-content .ui-state-active {
   background-color: var(--container-bg-color);
   font-weight: bold;
-  color: #000000;
-  /* #ffffff; */
+  color: black;
+  /* white; */
 }
 .ui-widget-header .ui-state-active {
   background-color: var(--container-bg-color);
   font-weight: bold;
-  color: #000000;
-  /* #ffffff; */
+  color: black;
+  /* white; */
 }
 .ui-state-active a,
 .ui-state-active a:link,
+.ui-state-active a:hover,
 .ui-state-active a:visited {
-  color: var(--container-bg-color);
-  text-decoration: none;
-}
-.ui-widget-header .ui-state-active a,
-.ui-widget-header .ui-state-active a:link,
-.ui-widget-header .ui-state-active a:hover,
-.ui-widget-header .ui-state-active a:visited {
-  color: #000000;
+  color: black;
   text-decoration: none;
 }
 .ui-corner-all,
@@ -584,6 +566,13 @@ div.logo {
 div.logo:hover {
   animation: expand 0.4s;
 }
+div.netskrafl-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+}
 div.rightcol {
   position: relative;
   width: 362px;
@@ -847,7 +836,7 @@ div.tile.dragging {
     becomes a child of the document body element when dragging, and
     the style variables are not in scope at the body level. */
   box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.2);
-  border-color: #72a55f;
+  border-color: #09814A; /* var(--ok-button); */
   border-radius: 5px;
   border-width: 3px;
   border-style: solid;
@@ -864,7 +853,7 @@ div.tile.dragging {
   box-sizing: content-box;
 }
 div.tile.dragging.no-drop {
-  border-color: #B6676D;
+  border-color: #c07359; /* var(--cancel-button); */
 }
 .board td {
   min-width: 21px;
@@ -963,7 +952,7 @@ div.word-check {
   line-height: 42px;
   visibility: hidden;
   border: 1.5px solid;
-  border-radius: 4px;
+  border-radius: 5px;
 }
 div.score {
   display: none;
@@ -980,7 +969,7 @@ div.score {
   line-height: 42px;
   color: var(--blank-tile);
   border: 1.5px solid;
-  border-radius: 4px;
+  border-radius: 5px;
   border-color: var(--blank-tile);
 }
 .standard-button {
@@ -1159,7 +1148,7 @@ div.scramblebtn {
   cursor: pointer;
   width: 33px;
   height: 26px;
-  background-color: var(--double-letter-color);
+  background-color: var(--malfridur-accent);
   display: none;
 }
 div.rack-left div.scramblebtn {
@@ -1187,8 +1176,8 @@ div.buttons .glyphicon {
   position: absolute;
   top: 0;
   padding-top: 8px;
-  background-color: #fcfcfc;
-  border: 1.5px solid #dddddd;
+  background-color: var(--tab-background);
+  border: 1.5px solid var(--header-background);
   width: 66px;
   height: 23px;
 }
@@ -1204,8 +1193,8 @@ div.submitresign {
   position: absolute;
   top: 0;
   padding-top: 8px;
-  background-color: #fcfcfc;
-  border: 1.5px solid #dddddd;
+  background-color: var(--tab-background);
+  border: 1.5px solid var(--header-background);
   width: 66px;
   height: 23px;
   color: var(--cancel-button);
@@ -1224,14 +1213,14 @@ div.submitexchange {
   top: 0;
   left: 93px;
   padding-top: 8px;
-  background-color: #fcfcfc;
-  border: 1.5px solid #dddddd;
+  background-color: var(--tab-background);
+  border: 1.5px solid var(--header-background);
   width: 66px;
   height: 23px;
   color: var(--ok-button);
 }
 div.submitexchange.disabled {
-  color: #888888;
+  color: var(--blank-tile);
 }
 div.submitpass {
   text-align: center;
@@ -1245,8 +1234,8 @@ div.submitpass {
   position: absolute;
   top: 0;
   padding-top: 8px;
-  background-color: #fcfcfc;
-  border: 1.5px solid #dddddd;
+  background-color: var(--tab-background);
+  border: 1.5px solid var(--header-background);
   width: 66px;
   height: 23px;
   color: var(--triple-word-color);
@@ -1264,8 +1253,8 @@ div.challenge {
   position: absolute;
   top: 0;
   padding-top: 8px;
-  background-color: var(--container-bg-color);
-  border: 1.5px solid #dddddd;
+  background-color: var(--tab-background);
+  border: 1.5px solid var(--header-background);
   width: 66px;
   height: 23px;
   left: 279px;
@@ -1350,7 +1339,7 @@ div.robot-btn {
   position: absolute;
   margin-left: 0px;
   margin-right: 2px;
-  padding-top: 3px;
+  padding-top: 4px;
   height: 30px;
   min-height: 30px;
   line-height: 22px;
@@ -1370,9 +1359,9 @@ div.gamestats div.robot-btn {
 div.player-btn {
   display: block;
   position: absolute;
-  margin-left: 2px;
-  margin-right: 2px;
-  padding-top: 3px;
+  margin-left: 4px;
+  margin-right: 4px;
+  padding-top: 4px;
   height: 30px;
   min-height: 30px;
   line-height: 22px;
@@ -1620,7 +1609,7 @@ div.right-tab#tab-games {
 }
 div.right-tab#tab-chat {
   left: 301px;
-  background-color: #F7F0DE;
+  background-color: var(--chat-background);
 }
 div.right-tab.selected {
   opacity: 1;
@@ -1713,7 +1702,7 @@ div.modal-dialog#spinner-dialog {
 }
 div.animated-spinner {
   position: absolute;
-  left: 141.5px;
+  left: 50%;
   top: 271.5px;
 }
 svg circle.shadow {
@@ -1812,9 +1801,11 @@ div.error {
   cursor: pointer;
 }
 div.opp-turn {
-  display: block;
+  display: inline-block;
   padding-top: 10px;
-  width: 246px;
+  padding-left: 10px;
+  width: 220px;
+  text-align: right;
 }
 div.opp-turn.flashing {
   color: var(--cancel-button);
@@ -2065,27 +2056,21 @@ div.submitmove#move-mobile span.glyphicon {
   margin-top: 2px;
 }
 div.force-resign {
-  font-size: 18px;
-  font-weight: 700;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-weight: normal;
+  font-size: 13px;
   margin: 0;
   padding: 6px;
-  padding-top: 9px;
-  border-radius: 5px;
   cursor: pointer;
-  width: 32px;
   height: 26px;
-  background-color: var(--ok-button);
-  display: block;
-  float: right;
-  padding-top: 3px;
-  padding-bottom: 12px;
+  width: 122px;
   margin-right: 1px;
-  width: 96px;
-  text-align: center;
-  font-weight: normal;
-  font-size: 13px;
   color: white;
   background-color: var(--cancel-button);
+  border-radius: 5px;
 }
 div.gameinfo {
   position: absolute;
@@ -2113,6 +2098,7 @@ div.gameinfo {
   padding-top: 10px;
 }
 input.chat-txt {
+  box-sizing: border-box;
   font-family: var(--primary-font);
   width: 276px;
   font-size: 18px;
@@ -2128,6 +2114,13 @@ input.chat-txt {
   padding-left: 6px;
   padding-right: 6px;
 }
+input.chat-txt:focus {
+  border-color: var(--ok-button);
+  border-width: 2px;
+  padding-left: 5px;
+  padding-right: 5px;
+  outline-style: none;
+}
 div.chat-area {
   position: absolute;
   top: 6px;
@@ -2148,7 +2141,7 @@ div.modal-close#chat-send {
   margin: 0 0 2px 8px;
   padding-top: 4px;
   padding-bottom: 0;
-  background-color: var(--triple-letter-color);
+  background-color: var(--ok-button);
   color: white;
 }
 div.twoletter {
@@ -2223,7 +2216,7 @@ div#main-tabs > div[role=tabpanel] {
 div#main-tabs div.header-logo {
   padding-left: 14px;
   padding-right: 8px;
-  padding-top: 7px;
+  padding-top: 12px;
 }
 div#tabs {
   background-color: transparent;
@@ -2250,19 +2243,19 @@ span.list-chall {
   text-overflow: ellipsis;
 }
 span.list-s0 {
-  display: inline-block;
   width: 38px;
   max-width: 38px;
   text-align: right;
+  justify-content: flex-end;
 }
 span.list-s1 {
-  display: inline-block;
   width: 38px;
   max-width: 38px;
   text-align: left;
+  justify-content: flex-start;
 }
 span.list-colon {
-  display: inline-block;
+  justify-content: center;
   text-align: center;
   width: 8px;
   max-width: 8px;
@@ -2307,7 +2300,7 @@ div.tilecount {
   width: 92px;
   min-width: 92px;
   text-align: left;
-  background-color: #ffffff;
+  background-color: white;
   border-radius: 6px;
   overflow: hidden;
 }
@@ -3012,7 +3005,7 @@ div.highlight1.dim {
   font-size: 28px;
   line-height: 28px;
   font-weight: 700;
-  color: #202020;
+  color: var(--dark-bg-color);
   overflow: hidden;
   margin-top: 4px;
   margin-bottom: 4px;
@@ -3025,7 +3018,7 @@ h3.clockleft {
   font-size: 28px;
   line-height: 28px;
   font-weight: 700;
-  color: #202020;
+  color: var(--dark-bg-color);
   overflow: hidden;
   margin-top: 4px;
   margin-bottom: 4px;
@@ -3040,7 +3033,7 @@ h3.clockright {
   font-size: 28px;
   line-height: 28px;
   font-weight: 700;
-  color: #202020;
+  color: var(--dark-bg-color);
   overflow: hidden;
   margin-top: 4px;
   margin-bottom: 4px;
@@ -3114,7 +3107,7 @@ div.at-top-left div.tilecount {
   border-radius: 10px;
   border-width: 0;
   overflow: hidden;
-  background-color: #ccd5de;
+  background-color: var(--header-background);
 }
 div.at-top-left div.tilecount.trans {
   background-color: transparent;
@@ -3133,7 +3126,7 @@ div.at-top-left div.tilecount div.tc {
   padding-bottom: 2px;
 }
 div.at-top-left div.tilecount div.oc {
-  color: #202020;
+  color: var(--dark-bg-color);
   padding-left: 8px;
   margin-left: 0;
   overflow: hidden;
@@ -3144,13 +3137,13 @@ div.at-top-left div.tilecount div.oc {
   padding-bottom: 2px;
   background-color: transparent;
 }
-div.chat {
+div.chat-container {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 466px;
-  background-color: #F7F0DE;
+  background-color: var(--chat-background);
   z-index: 1;
   border-radius: 4px 4px 0 0;
 }
@@ -3198,8 +3191,11 @@ div.chat-msg.remote {
   background-color: #F1DBDA;
 }
 div.chat-msg img {
-  vertical-align: -10px;
   /* Emoticon alignment to baseline */
+  vertical-align: -10px;
+  display: inline;
+  margin-left: 2px;
+  margin-right: 2px;
 }
 div.chat-input {
   position: absolute;
@@ -3228,7 +3224,7 @@ div.reviewhdr {
   height: 18px;
   text-align: left;
   padding: 11px;
-  background-color: var(--ok-button);
+  background-color: var(--human-color);
   color: white;
   font-weight: 400;
   font-size: 18px;
@@ -3269,7 +3265,7 @@ div.gamestats {
   width: 724px;
   height: 580px;
   left: 150px;
-  top: 64px;
+  top: 24px;
   padding: 12px;
   border-radius: 5px;
   box-shadow: 3px 3px 5px 2px var(--dark-shadow);
@@ -3278,21 +3274,20 @@ div.statscol {
   display: block;
   float: left;
   width: 50%;
-  padding-top: 24px;
 }
 div.statscol p {
-  margin-top: 0.85em;
-  margin-bottom: 0.8em;
+  margin-top: 0;
+  margin-bottom: 12px;
 }
 div.gamestats p span {
   font-weight: 700;
 }
-div #gamestarted {
+div#gamestarted {
   width: 100%;
   text-align: center;
   position: relative;
-  top: 42px;
-  margin-bottom: 24px;
+  margin-top: 16px;
+  margin-bottom: 16px;
 }
 #gamestarted p {
   font-style: italic;
@@ -3307,13 +3302,13 @@ div #gamestarted {
 }
 /* Scores in move list */
 .humangrad_left {
-  color: #208C9F;
+  color: var(--human-color);
 }
 .autoplayergrad_right {
   color: var(--cancel-button);
 }
 .humangrad_right {
-  color: #208C9F;
+  color: var(--human-color);
 }
 .autoplayergrad_left {
   color: var(--cancel-button);
@@ -3356,16 +3351,16 @@ div.rightmove span.total {
   margin-left: 2px;
 }
 span.total.human {
-  background-color: #aad1d4;
+  background-color: var(--human-color);
 }
 div.leftmove span.total.human {
-  border-left-color: #208C9F;
+  border-left-color: var(--svarkur-secondary);
 }
 div.rightmove span.total.human {
-  border-right-color: #208C9F;
+  border-right-color: var(--svarkur-secondary);
 }
 span.total.autoplayer {
-  background-color: #d3c0c7;
+  background-color: var(--cancel-button);
 }
 div.leftmove span.total.autoplayer {
   border-left-color: var(--cancel-button);
@@ -3619,9 +3614,10 @@ div.scorediff {
   font-weight: normal;
   color: white;
   visibility: hidden;
-  padding-top: 3px;
+  padding-top: 2px;
   padding-bottom: 2px;
-  font-family: 'Open Sans', 'Arial', sans-serif;
+  font-family: var(--number-font);
+  border-radius: 5px;
 }
 div.posdiff {
   background-color: var(--ok-button);
@@ -3641,7 +3637,7 @@ div.navbtn {
   height: 30px;
   bottom: 136px;
   line-height: 24px;
-  background-color: var(--ok-button);
+  background-color: var(--human-color);
 }
 div.navbtn#navnext {
   position: absolute;
@@ -3772,12 +3768,12 @@ div#btn-cancel-no {
   top: auto;
   background-color: var(--ok-button);
 }
-.tabbed-page a:link,
-.tabbed-page a:visited {
+div.help-tabs .ui-tabs-panel a:link,
+div.help-tabs .ui-tabs-panel a:visited {
   text-decoration: none;
-  color: #5699A5;
+  color: var(--humangrad-color);
 }
-.tabbed-page a:hover {
+div.help-tabs .ui-tabs-panel a:hover {
   text-decoration: none;
   color: var(--triple-word-color);
 }
@@ -3859,7 +3855,7 @@ div.userid {
   cursor: pointer;
 }
 div.userid:hover {
-  background-color: #5699A5;
+  background-color: var(--humangrad-color);
   color: white;
 }
 div.listitem {
@@ -3878,6 +3874,7 @@ div.listitem {
   top: 0;
 }
 .listitem a {
+  display: flex;
   cursor: pointer;
 }
 .listitem a:link,
@@ -3888,6 +3885,10 @@ div.listitem {
 .listitem a:hover {
   color: var(--triple-word-color);
 }
+.listitem span {
+  display: flex;
+  align-items: center;
+}
 div.oddlist {
   background-color: var(--board-background);
 }
@@ -4008,7 +4009,7 @@ span.timed-btn {
   top: 0px;
   cursor: default;
   color: white;
-  background-color: #f5c862;
+  background-color: var(--triple-word-color);
   border-radius: 5px;
   padding: 4px;
   margin: 0 4px 0 0;
@@ -4113,7 +4114,7 @@ span.elo-btn.elo-neutral {
   background-color: var(--double-letter-color);
 }
 span.elo-hdr-left {
-  background-color: var(--triple-letter-color);
+  background-color: var(--header-color);
   color: white;
   border-radius: 5px;
   padding: 4px;
@@ -4124,7 +4125,7 @@ span.elo-hdr-left {
   top: 0px;
 }
 span.elo-hdr-right {
-  background-color: var(--triple-letter-color);
+  background-color: var(--header-color);
   color: white;
   border-radius: 5px;
   padding: 4px;
@@ -4218,13 +4219,16 @@ div#user-no-match span#search-prefix {
   font-weight: bold;
 }
 div.modal-close {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
   text-align: center;
   font-size: 18px;
   font-weight: 700;
   color: white;
   margin: 0;
   padding: 6px;
-  padding-top: 9px;
   border-radius: 5px;
   cursor: pointer;
   position: absolute;
@@ -4234,6 +4238,9 @@ div.modal-close {
   right: 12px;
   top: auto;
 }
+div.modal-close span.glyphicon {
+  top: 0;
+}
 div#usr-info-close {
   width: 72px;
   /* Override */
@@ -4378,7 +4385,7 @@ h1.usr-info-icon span.glyphicon-coffee-cup {
 div.usr-info-fav {
   display: inline-block;
   position: absolute;
-  top: 26px;
+  top: 16px;
   right: 20px;
   color: var(--triple-letter-color);
   font-size: 26px;
@@ -4416,11 +4423,11 @@ p#usr-best {
 p#usr-best a:link,
 p#usr-best a:visited {
   text-decoration: none;
-  color: #5699A5;
+  color: var(--stats-foreground);
 }
 p#usr-best a:hover {
   text-decoration: none;
-  color: var(--triple-word-color);
+  color: var(--logo-accent);
 }
 div#stats-toggler {
   margin-top: 7px;
@@ -4451,16 +4458,16 @@ div#own-stats-all {
   vertical-align: top;
 }
 div.stats-games {
-  color: #ec9d07;
-  border-color: #ec9d07;
+  color: var(--malfridur-secondary);
+  border-color: var(--malfridur-secondary);
 }
 div.stats-win-ratio {
   color: var(--ok-button);
   border-color: var(--ok-button);
 }
 div.stats-avg-score {
-  color: #ec9d07;
-  border-color: #ec9d07;
+  color: var(--logo-accent);
+  border-color: var(--logo-accent);
 }
 div.chall-hdr {
   font-size: 18px;
@@ -4496,11 +4503,11 @@ div.chall-hdr h2 {
   line-height: 24px;
   margin-top: 6px;
   margin-bottom: 4px;
-  color: #208C9F;
+  color: var(--humangrad-color);
 }
 h1.chall-icon {
   display: block;
-  color: #208C9F;
+  color: var(--humangrad-color);
   margin-right: 12px;
   margin-top: 0;
   margin-bottom: 0;
@@ -4520,7 +4527,7 @@ div.chall-time {
   font-size: 20px;
   font-weight: 700;
   line-height: 22px;
-  background-color: #cccccc;
+  background-color: var(--middle-shadow);
   color: white;
   cursor: pointer;
   border-radius: 4px;
@@ -4621,16 +4628,16 @@ div#user-unfriend {
   left: 180px;
   width: 280px;
   /* Override */
-  padding-top: 6px;
   border-style: solid;
   border-width: 2px;
   border-color: var(--ok-button);
   background-color: white;
   color: var(--ok-button);
-  line-height: 24px;
 }
 div#user-unfriend span.glyphicon-coffee-cup {
+  top: -1px;
   color: var(--triple-word-color);
+  margin-right: 8px;
 }
 div#user-cancel {
   right: 108px;
@@ -4701,7 +4708,7 @@ div.welcome {
 .welcome a:link,
 .welcome a:visited {
   text-decoration: none;
-  color: #5699A5;
+  color: var(--humangrad-color);
 }
 .welcome a:hover {
   text-decoration: none;
@@ -4780,7 +4787,7 @@ input.text {
   padding-right: 8px;
 }
 input.text:focus {
-  background-color: #ffffc8;
+  background-color: hsl(from var(--malfridur-secondary) h 85% 90%);
   border-style: solid;
   border-color: var(--ok-button);
   border-width: 2px;
@@ -4800,11 +4807,11 @@ input.text#search-id {
   font-weight: normal;
   height: 28px;
   font-size: 18px;
-  border-color: var(--double-letter-color);
+  border-color: var(--header-color);
   margin-top: 0px;
   margin-bottom: 0px;
 }
-button[type="submit"] {
+div.netskrafl-container button[type="submit"] {
   font-family: var(--primary-font);
   font-size: 20px;
   font-weight: 400;
@@ -4825,18 +4832,18 @@ button[type="submit"] {
   padding-right: 8px;
   cursor: pointer;
 }
-button[type="submit"]:focus,
-button[type="submit"]:hover {
+div.netskrafl-container button[type="submit"]:focus,
+div.netskrafl-container button[type="submit"]:hover {
   outline: var(--focus-border) solid 3px;
 }
-button.login {
+div.netskrafl-container button.login {
   margin-top: 24px;
 }
-button.logout {
+div.netskrafl-container button.logout {
   margin-top: 80px;
   background-color: var(--cancel-button);
 }
-input[type="checkbox"] {
+div.netskrafl-container input[type="checkbox"] {
   display: none;
 }
 div.toggler {
@@ -4875,7 +4882,7 @@ div.toggler div.option.small {
 div.toggler div.option.x-small {
   width: 30px;
   height: 20px;
-  line-height: 20px;
+  line-height: 22px;
   font-size: 15px;
   padding-top: 1px;
   padding-bottom: 3px;
@@ -4883,11 +4890,8 @@ div.toggler div.option.x-small {
 div.toggler div.option.selected {
   background-color: var(--triple-letter-color);
 }
-div#fairplay-toggler div.option.selected {
-  background-color: var(--ok-button);
-}
-div#fairplay-toggler span.glyphicon-edit {
-  top: 0;
+div.toggler span.glyphicon {
+  top: 1px;
 }
 div #radioset {
   padding-top: 6px;
@@ -4910,11 +4914,11 @@ a.nodecorate:hover {
 }
 a.iconlink:link {
   text-decoration: none;
-  color: var(--triple-letter-color);
+  color: var(--malfridur-accent);
 }
 a.iconlink:visited {
   text-decoration: none;
-  color: var(--triple-letter-color);
+  color: var(--malfridur-accent);
 }
 a.iconlink:hover {
   text-decoration: none;
@@ -5035,9 +5039,7 @@ div.signup-header {
   left: 110px;
   width: 900px;
 }
-
 /* ================= MOBILE PORTRAIT UI, LARGE ENOUGH TO BE NON-SCROLLABLE =============== */
-
 @media all and (max-width: 1023px) and (min-height: 552px) {
   /* On sufficiently large mobile screens, keep the body fixed (unscrollable) */
   div.netskrafl-container {
@@ -5045,9 +5047,7 @@ div.signup-header {
     overflow: hidden;
   }
 }
-
 /* ================= MOBILE PORTRAIT UI, EXTRA TALL =============== */
-
 @media all and (max-width: 1023px) and (min-height: 632px) {
   /* iPhone X or taller */
   /* Tall mobile phones: use two lines to display the header */
@@ -5159,7 +5159,7 @@ div.signup-header {
     height: 288px;
     /* 8 lines @ 36px each */
   }
-  div.chat,
+  div.chat-container,
   div.twoletter {
     height: 474px;
   }
@@ -5176,7 +5176,6 @@ div.signup-header {
     margin-top: 12px;
   }
 }
-
 /* iPhone 11 or larger: scale the UI to appear larger on the screen */
 @media all and (min-width: 414px) and (max-width: 1023px) and (min-height: 652px) {
   div.netskrafl-container {
@@ -5188,9 +5187,7 @@ div.signup-header {
     height: 652px;
   }
 }
-
 /* ================= MOBILE LANDSCAPE UI ====================== */
-
 @media all and (min-width: 667px) {
   /* Mobile screen, landscape mode */
   div.netskrafl-container {
@@ -5259,6 +5256,9 @@ div.signup-header {
   div.rack-left div.recallbtn {
     display: none;
   }
+  div.force-resign {
+    display: none;
+  }
   div.scramblebtn {
     left: 376px;
     top: 158px;
@@ -5275,7 +5275,7 @@ div.signup-header {
     border-width: 0;
     color: white;
     left: 441px;
-    background-color: var(--ok-button);
+    background-color: var(--human-color);
   }
   div.submitpass {
     top: 158px;
@@ -5369,7 +5369,7 @@ div.signup-header {
   }
   div.games,
   div.twoletter,
-  div.chat {
+  div.chat-container {
     display: none;
   }
   div.right-area {
@@ -5412,16 +5412,13 @@ div.signup-header {
     display: none;
   }
 }
-
 @media all and (min-width: 667px) and (max-height: 360px) {
   div.board {
     transform: scale(0.96);
     transform-origin: top left;
   }
 }
-
 /* fullscreen.css */
-
 @media all and (min-width: 1024px) {
 
   .ui-helper-reset {
@@ -5490,13 +5487,17 @@ div.signup-header {
   div.logo {
     display: block;
   }
+  div.netskrafl-logo {
+    width: 46px;
+    height: 46px;
+  }
   div#main-tabs div.header-logo {
     display: none;
   }
   div.circle {
     height: 38px;
     width: 38px;
-    background-color: #80aede;
+    background-color: var(--header-hover-color);
     border-radius: 50%;
     display: inline-block;
     position: relative;
@@ -5564,12 +5565,12 @@ div.signup-header {
   }
   div.games,
   div.twoletter,
-  div.chat {
+  div.chat-container {
     display: block;
     border-radius: 0;
   }
   div.twoletter,
-  div.chat {
+  div.chat-container {
     height: 420px;
   }
   div.board-area {
@@ -5743,8 +5744,8 @@ div.signup-header {
     background-color: var(--cancel-button);
   }
   .rack td:empty {
-    border-color: #dddddd;
-    background-color: #f4f4f4;
+    border-color: var(--middle-shadow);
+    background-color: var(--tab-background);
     box-shadow: none;
   }
   div.buttons {
@@ -6051,8 +6052,16 @@ div.signup-header {
   div.gamestats div.player.humancolor {
     color: white;
   }
+  div.gamestats div.player.left {
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+  }
+  div.gamestats div.player.right {
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
   div.scorewrapper {
-    background-color: #aad1d4;
+    background-color: var(--humangrad-color);
     min-height: 32px;
   }
   div.scoreleft {
@@ -6211,7 +6220,7 @@ div.signup-header {
     height: 380px;
   }
   div.right-area.with-clock div.twoletter,
-  div.right-area.with-clock div.chat {
+  div.right-area.with-clock div.chat-container {
     /* Timed game */
     height: 380px;
   }
@@ -6284,6 +6293,7 @@ div.signup-header {
     border-radius: 0;
   }
   div.opp-turn {
+    display: block;
     position: absolute;
     text-align: center;
     bottom: 83px;
@@ -6294,7 +6304,6 @@ div.signup-header {
     line-height: 24px;
     padding: 4px 0 0;
     margin: 0;
-    display: block;
   }
   div#congrats {
     position: absolute;
@@ -6406,8 +6415,8 @@ div.signup-header {
     margin: 0;
   }
   input.chat-txt {
-    width: 218px;
-    height: 22px;
+    width: 234px;
+    height: 32px;
     font-size: 15px;
   }
   div.chat-area {
@@ -6415,7 +6424,7 @@ div.signup-header {
     width: 278px;
   }
   div.modal-close#chat-send {
-    height: 25px;
+    height: 26px;
     bottom: 0;
   }
   span.statsbutton {
@@ -6559,10 +6568,12 @@ div.signup-header {
     max-width: 32px;
   }
   span.list-s0 {
+    display: inline-block;
     width: 40px;
     max-width: 40px;
   }
   span.list-s1 {
+    display: inline-block;
     width: 40px;
     max-width: 40px;
   }