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

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

@@ -1,15 +1,10 @@
-
-@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
@@ -20,11 +15,10 @@
 
 @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 {
@@ -40,237 +34,321 @@
 .glyphicon-play:before {
    content: "\E174";
 }
+
 .glyphicon-exclamation-sign:before {
    content: "\E197";
 }
+
 .glyphicon-log-in:before {
    content: "\E387";
 }
+
 .glyphicon-log-out:before {
    content: "\E388";
 }
+
 .glyphicon-screenshot:before {
    content: "\E186";
 }
+
 .glyphicon-refresh:before {
    content: "\E082";
 }
+
 .glyphicon-forward:before {
    content: "\E177";
 }
+
 .glyphicon-fire:before {
    content: "\E023";
 }
+
 .glyphicon-ok:before {
    content: "\E207";
 }
+
 .glyphicon-remove:before {
    content: "\E208";
 }
+
 .glyphicon-info-sign:before {
    content: "\E196";
 }
+
 .glyphicon-cog:before {
    content: "\E137";
 }
+
 .glyphicon-chevron-left:before {
    content: "\E225";
 }
+
 .glyphicon-chevron-right:before {
    content: "\E224";
 }
+
 .glyphicon-circle-arrow-down:before {
    content: "\E220";
 }
+
 .glyphicon-download:before {
    content: "\E201";
 }
+
 .glyphicon-star:before {
    content: "\E050";
 }
+
 .glyphicon-flag:before {
    content: "\E267";
 }
+
 .glyphicon-flag-after:after {
    content: "\E267";
 }
+
 .glyphicon-bookmark:before {
    content: "\E073";
 }
+
 .glyphicon-star-empty:before {
    content: "\E049";
 }
+
 .glyphicon-hand-right:before {
    content: "\E346";
 }
+
 .glyphicon-hand-left:before {
    content: "\E347";
 }
+
 .glyphicon-thumbs-up:before {
    content: "\E344";
 }
+
 .glyphicon-thumbs-down:before {
    content: "\E345";
 }
+
 .glyphicon-remove-circle:before {
    content: "\E198";
 }
+
 .glyphicon-th:before {
    content: "\E157";
 }
+
 .glyphicon-user:before {
    content: "\E004";
 }
+
 .glyphicon-comment:before {
    content: "\E310";
 }
+
 .glyphicon-eye-open:before {
    content: "\E052";
 }
+
 .glyphicon-paperclip:before {
    content: "\E063";
 }
+
 .glyphicon-link:before {
    content: "\E051";
 }
+
 .glyphicon-arrow-up:before {
    content: "\E214";
 }
+
 .glyphicon-flash:before {
    content: "\E242";
 }
+
 .glyphicon-time:before {
    content: "\E055";
 }
+
 .glyphicon-volume-off:before {
    content: "\E183";
 }
+
 .glyphicon-volume-up:before {
    content: "\E185";
 }
+
 .glyphicon-hourglass:before {
    content: "\231B";
 }
+
 .glyphicon-random:before {
    content: "\E084";
 }
+
 .glyphicon-down-arrow:before {
    content: "\E213";
 }
+
 .glyphicon-signal:before {
    content: "\E080";
 }
+
 .glyphicon-crown:before {
    content: "\E362";
 }
+
 .glyphicon-dashboard:before {
    content: "\E332";
 }
+
 .glyphicon-show-lines:before {
    content: "\E159";
 }
+
 .glyphicon-user-conversation:before {
    content: "\E527";
 }
+
 .glyphicon-life-preserver:before {
    content: "\E308";
 }
+
 .glyphicon-conversation:before {
    content: "\E245";
 }
+
 .glyphicon-chat:before {
    content: "\E246";
 }
+
 .glyphicon-baby-formula:before {
    content: "\E492";
 }
+
 .glyphicon-stroller:before {
    content: "\E076";
 }
+
 .glyphicon-edit:before {
    content: "\E151";
 }
+
 .glyphicon-circle-question-mark:before {
    content: "\E195";
 }
+
 .glyphicon-resize-small:before {
    content: "\E215";
 }
+
 .glyphicon-shopping-bag:before {
    content: "\E351";
 }
+
 .glyphicon-address-book:before {
    content: "\E089";
 }
+
 .glyphicon-search:before {
    content: "\E028";
 }
+
 .glyphicon-lightbulb:before {
    content: "\E065";
 }
+
 .glyphicon-coffee-cup:before {
    content: "\E295";
 }
+
 .glyphicon-grid:before {
    content: "\E157";
 }
+
 .glyphicon-home:before {
    content: "\E021";
 }
+
 .glyphicon-target:before {
    content: "\E473";
 }
+
 .glyphicon-ban-circle:before {
    content: "\E200";
 }
+
 .glyphicon-right-arrow:before {
    content: "\E212";
 }
 
-
 /*
 
-   Skrafl-explo.css
+  Skrafl-explo.css
 
-   Explo theme template for netskrafl.is
+  Styles for netskrafl.is using Málstaður colors
 
-   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%);
+  --triple-word-color: hsl(from var(--malfridur-secondary) h 85% 65%);
+  --double-letter-color: hsl(from var(--svarkur-accent) h 50% 75%);
+  --triple-letter-color: hsl(from var(--svarkur-secondary) h 60% 55%);
+  --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%);
+  --pass-button: hsl(from var(--malfridur-secondary) h 85% 50%);
+  --option-selected: hsl(from var(--svarkur-secondary) h 80% 35%);
+  --human-color: hsl(from var(--svarkur-secondary) h s 35%);
+  --list-header-background: hsl(from var(--malfridur-secondary) h 85% 90%);
+  --list-header-bottom: hsl(from var(--malfridur-secondary) h 90% 55%);
+  --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;
+  /* The following two variables are assumed to be defined
+     by the container */
+  --primary-font: var(--font-lato);
+  --number-font: var(--font-open-sans);
 }
 
 div.netskrafl-container {
@@ -278,32 +356,47 @@ div.netskrafl-container {
   top: 0;
   left: 0;
   background-color: var(--container-bg-color);
-  font-family: var(--primary-font);
+  /* font-family: var(--primary-font); */
   width: 375px;
   /* Full height is 667px - we subtract 115px for browser chrome, top and bottom */
-  height: 552px;
+  height: 586px; /* 552px; */
   overflow-x: hidden;
   overflow-y: auto;
   margin: 0 auto;
   user-select: none;
   touch-action: none;
 }
+
 div.netskrafl-container * {
   box-sizing: content-box;
 }
+
 div.netskrafl-container ol, div.netskrafl-container ul {
   list-style: initial;
 }
+
+/*
 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%;
 }
+
 div.game-container {
   position: absolute;
   top: 0;
@@ -313,18 +406,22 @@ div.game-container {
   overflow-x: hidden;
   overflow-y: hidden;
 }
+
 div.netskrafl-container p {
   margin-top: 12px;
   margin-bottom: 12px;
 }
+
 input,
 textarea {
   user-select: text;
 }
+
 p a img {
   display: inline;
   vertical-align: text-bottom;
 }
+
 .ui-helper-reset {
   margin: 0;
   padding: 0;
@@ -336,29 +433,35 @@ p a img {
   font-size: 100%;
   list-style: none;
 }
+
 .ui-helper-clearfix:before,
 .ui-helper-clearfix:after {
   content: "";
   display: table;
   border-collapse: collapse;
 }
+
 .ui-helper-clearfix:after {
   clear: both;
 }
+
 .ui-helper-clearfix {
   min-height: 0;
   /* support: IE7 */
 }
+
 .ui-tabs {
   position: relative;
   /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
   padding: 3px;
   border-width: 0;
 }
+
 .ui-tabs .ui-tabs-nav {
   margin: 0;
   padding: 3px 3px 0;
 }
+
 .ui-tabs .ui-tabs-nav li {
   list-style: none;
   float: left;
@@ -370,6 +473,7 @@ p a img {
   white-space: nowrap;
   box-shadow: 1px 2px 4px 1px #afb7cad0;
 }
+
 .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
   float: left;
   text-decoration: none;
@@ -378,15 +482,18 @@ p a img {
   padding-right: 12px;
   text-align: center;
 }
+
 .ui-tabs .ui-tabs-nav .ui-tabs-anchor.sp {
   /* Single page version */
   min-width: 51px;
 }
+
 .ui-tabs .ui-tabs-nav li.ui-tabs-active {
   margin-bottom: -1px;
   padding-bottom: 0px;
   background-color: var(--container-bg-color);
 }
+
 .ui-tabs .ui-tabs-panel {
   display: block;
   border-width: 0;
@@ -396,62 +503,56 @@ p a img {
   padding-bottom: 4px;
   background-color: var(--container-bg-color);
 }
+
 .ui-widget {
-  font-family: var(--primary-font);
   font-size: 1.2em;
 }
+
 .ui-widget input,
 .ui-widget select,
 .ui-widget textarea,
 .ui-widget button {
-  font-family: var(--primary-font);
   font-size: 1em;
 }
+
 .ui-widget-content {
   color: var(--dark-bg-color);
 }
+
 .ui-widget-content a {
   color: var(--dark-bg-color);
 }
+
 .ui-widget-header {
   color: var(--light-header-color);
   font-weight: bold;
   cursor: pointer;
 }
+
 .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,
 .ui-state-hover a:link,
@@ -460,102 +561,101 @@ 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,
 .ui-corner-left,
 .ui-corner-tl {
   border-top-left-radius: 4px;
 }
+
 .ui-corner-all,
 .ui-corner-right,
 .ui-corner-tr {
   border-top-right-radius: 4px;
 }
+
 .ui-corner-all,
 .ui-corner-bottom,
 .ui-corner-left,
 .ui-corner-bl {
   border-bottom-left-radius: 4px;
 }
+
 .ui-corner-all,
 .ui-corner-bottom,
 .ui-corner-right,
 .ui-corner-br {
   border-bottom-right-radius: 4px;
 }
+
 .ui-corner-top {
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
 }
+
 ul.ui-tabs-nav.ui-corner-all {
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
 }
+
 /* Default media: small screen, i.e. mobile */
+
 span.mobile-space {
   display: inline;
   padding-left: 32px;
   padding-right: 32px;
 }
+
 .no-mobile-block {
   display: none;
 }
+
 .no-mobile-inline {
   display: none;
 }
+
 .no-mobile-inline-block {
   display: none;
 }
+
 .no-mobile-list {
   display: none;
 }
+
 .upper {
   text-transform: uppercase;
 }
+
 @media all and (max-width: 360px) {
   /* Hack to squeeze the content on 360 pixel wide phones */
   div.netskrafl-container {
@@ -564,16 +664,19 @@ span.mobile-space {
     transform-origin: center top;
   }
 }
+
 div.header-logo {
   display: block;
   float: left;
-  padding-left: 5px;
-  padding-top: 14px;
+  padding-left: 4px;
+  padding-top: 18px;
 }
+
 div.header-button {
   display: block;
   float: right;
 }
+
 div.logo {
   display: none;
   position: absolute;
@@ -581,25 +684,38 @@ div.logo {
   left: 28px;
   width: 46px;
 }
+
 div.logo:hover {
   animation: expand 0.4s;
 }
+
+div.netskrafl-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+}
+
 div.rightcol {
   position: relative;
   width: 362px;
   left: 6px;
 }
+
 div.logowrapper {
   display: inline-block;
   width: 11%;
   vertical-align: top;
 }
+
 div.playerwrapper {
   display: inline-block;
   position: relative;
   width: 89%;
   padding-top: 4px;
 }
+
 div.bag {
   position: absolute;
   right: 12px;
@@ -614,9 +730,11 @@ div.bag {
   padding: 0;
   opacity: 0.75;
 }
+
 table.bag-content {
   border-collapse: separate;
 }
+
 table.bag-content td {
   width: 12px;
   height: 17px;
@@ -625,20 +743,25 @@ table.bag-content td {
   overflow: hidden;
   cursor: default;
 }
+
 table.bag-content.new td {
   background-color: var(--tile-background);
 }
+
 table.bag-content.empty td {
   background-color: var(--cancel-button);
   /* Opponent's color */
   color: white;
 }
+
 td.over {
   outline: var(--focus-border) solid 3px;
 }
+
 td.highlight {
   outline: var(--focus-border) solid 2px;
 }
+
 tr.colid td {
   height: 24px;
   width: 32px;
@@ -653,7 +776,9 @@ tr.colid td {
   border-color: transparent;
   box-shadow: none;
 }
+
 /* Board layout */
+
 #H8,
 #B2,
 #C3,
@@ -673,6 +798,7 @@ tr.colid td {
 #N14 {
   background-color: var(--double-word-color);
 }
+
 #A1,
 #A8,
 #A15,
@@ -683,6 +809,7 @@ tr.colid td {
 #O15 {
   background-color: var(--triple-word-color);
 }
+
 #A4,
 #A12,
 #C7,
@@ -709,6 +836,7 @@ tr.colid td {
 #L15 {
   background-color: var(--double-letter-color);
 }
+
 #B6,
 #B10,
 #F2,
@@ -723,22 +851,27 @@ tr.colid td {
 #J14 {
   background-color: var(--triple-letter-color);
 }
+
 table.board td.dw:empty {
   /* Double word score */
   background-color: var(--double-word-color);
 }
+
 table.board td.tw:empty {
   /* Triple word score */
   background-color: var(--triple-word-color);
 }
+
 table.board td.dl:empty {
   /* Double letter score */
   background-color: var(--double-letter-color);
 }
+
 table.board td.tl:empty {
   /* Triple letter score */
   background-color: var(--triple-letter-color);
 }
+
 table.board td.center:empty {
   font-family: 'Glyphicons Regular';
   text-align: center;
@@ -746,11 +879,13 @@ table.board td.center:empty {
   line-height: 21px;
   color: white;
 }
+
 table.board td.center:empty::before {
   content: "\E473";
   /* Target */
   animation: opacityBlink 1.5s infinite;
 }
+
 table.board {
   margin-left: auto;
   margin-right: auto;
@@ -759,6 +894,7 @@ table.board {
   border-collapse: separate;
   table-layout: fixed;
 }
+
 div.board table.board {
   transform: scale(1);
   transform-origin: 0 0;
@@ -769,26 +905,33 @@ div.board table.board {
    transition: transform .2s ease-in-out;
    */
 }
+
 table.board tr {
   height: 24px;
 }
+
 .rack table.board {
   border-spacing: 8px;
   margin-left: auto;
   margin-right: auto;
 }
+
 .rack table.board tr {
   height: 36px;
 }
+
 div.info {
   display: none;
 }
+
 div.board-help {
   display: none;
 }
+
 div.bag {
   display: none;
 }
+
 div.board-area {
   position: absolute;
   margin-left: 8px;
@@ -796,15 +939,17 @@ div.board-area {
   padding-top: 6px;
   background-color: var(--container-bg-color);
 }
+
 div.board {
   background-color: var(--container-bg-color);
-  overflow: hidden;
+  overflow: auto; /* Must be auto to allow panning/scrolling */
   width: 361px;
 }
+
 div.tile {
   position: relative;
   background-color: var(--tile-background);
-  font-family: 'Open Sans', 'Arial', sans-serif;
+  font-family: var(--number-font);
   font-size: 17px;
   line-height: 21px;
   font-weight: 700;
@@ -820,17 +965,21 @@ div.tile {
   vertical-align: top;
   cursor: default;
 }
+
 div.tile.wide,
 div.tile.extra-wide {
   /* Wide tile in the rack */
   text-indent: -6px;
 }
+
 div.board div.tile.wide,
 div.board div.tile.extra-wide {
   /* Wide letter tile on the board */
   text-indent: -2px;
 }
+
 /* On small form factors, we have bigger tiles in the rack than on the board */
+
 .rack div.tile {
   font-size: 26px;
   line-height: 33px;
@@ -839,7 +988,9 @@ div.board div.tile.extra-wide {
   margin-left: -2px;
   padding-right: 2px;
 }
+
 /* While dragging a tile, show it in the rack form factor */
+
 div.tile.dragging {
   position: fixed;
   z-index: 10;
@@ -847,7 +998,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;
@@ -863,9 +1014,11 @@ div.tile.dragging {
     not of the netskrafl-container div */
   box-sizing: content-box;
 }
+
 div.tile.dragging.no-drop {
-  border-color: #B6676D;
+  border-color: #c07359; /* var(--cancel-button); */
 }
+
 .board td {
   min-width: 21px;
   overflow: hidden;
@@ -876,36 +1029,43 @@ div.tile.dragging.no-drop {
   border-width: 1.5px;
   border-radius: 2.5px;
 }
+
 .rack td {
   min-width: 36px;
   width: 36px;
   border-width: 0px;
   box-shadow: 2px 2px 4px 0 var(--rack-shadow);
 }
+
 tr.colid {
   display: none;
 }
+
 td.rowid {
   display: none;
 }
+
 div.rack-row {
   display: block;
   width: 100%;
   margin-top: 8px;
   height: 52px;
 }
+
 div.rack-left {
   display: block;
   width: 14%;
   height: 1px;
   float: left;
 }
+
 div.rack-right {
   display: block;
   width: 0%;
   height: 1px;
   float: left;
 }
+
 div.rack {
   display: block;
   position: relative;
@@ -915,6 +1075,7 @@ div.rack {
   top: -6px;
   left: -3px;
 }
+
 div.letterscore {
   position: absolute;
   bottom: 0px;
@@ -929,23 +1090,27 @@ div.letterscore {
   background-color: transparent;
   vertical-align: bottom;
 }
+
 div.tile.wide div.letterscore,
 div.tile.extra-wide div.letterscore {
   /* Adjust letter score tracking for wide tiles */
   letter-spacing: -0.5px;
 }
+
 .rack div.letterscore {
   right: 2px;
   bottom: 3px;
   font-size: 9px;
   line-height: 9px;
 }
+
 div.tile.dragging div.letterscore {
   bottom: 5px;
   right: 1.75px;
   font-size: 9px;
   line-height: 9px;
 }
+
 div.word-check {
   display: none;
   position: absolute;
@@ -963,8 +1128,9 @@ div.word-check {
   line-height: 42px;
   visibility: hidden;
   border: 1.5px solid;
-  border-radius: 4px;
+  border-radius: 5px;
 }
+
 div.score {
   display: none;
   position: absolute;
@@ -980,9 +1146,10 @@ 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 {
   text-align: center;
   font-size: 18px;
@@ -994,20 +1161,7 @@ div.score {
   border-radius: 5px;
   cursor: pointer;
 }
-.submitbutton {
-  text-align: center;
-  font-size: 18px;
-  font-weight: 700;
-  color: white;
-  margin: 0;
-  padding: 6px;
-  padding-top: 9px;
-  border-radius: 5px;
-  cursor: pointer;
-  width: 32px;
-  height: 26px;
-  background-color: var(--ok-button);
-}
+
 div.submitnewgame {
   text-align: center;
   font-size: 18px;
@@ -1023,6 +1177,7 @@ div.submitnewgame {
   background-color: var(--ok-button);
   display: none;
 }
+
 div.fb-share {
   text-align: center;
   font-size: 18px;
@@ -1039,43 +1194,46 @@ div.fb-share {
   display: none;
   /* Don't display on mobile */
 }
+
 div.fb-share:hover {
   outline: var(--focus-border) solid 3px;
 }
+
 div.waitmove {
-  text-align: center;
-  font-size: 18px;
-  font-weight: 700;
-  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
   margin: 0;
+  margin-right: 1px;
   padding: 6px;
-  padding-top: 9px;
   border-radius: 5px;
-  cursor: pointer;
-  width: 32px;
-  height: 26px;
-  background-color: var(--ok-button);
+  cursor: default;
+  width: 96px;
+  height: 24px;
   z-index: 10;
   border-style: solid;
-  border-width: 1px;
-  border-color: var(--ok-button);
-  background-color: white;
-  margin-right: 1px;
+  border-width: 1.5px;
+  border-color: var(--logo-accent);
   float: right;
-  width: 96px;
 }
+
 div.animated-waitmove {
-  position: relative;
-  display: inline-block;
-  width: 40px;
-  top: -4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 26px;
+  height: 26px;
 }
+
 div.login-buttons {
   position: relative;
 }
+
 div.login-padding {
   min-height: 60px;
 }
+
 div.try-again {
   text-align: center;
   font-size: 18px;
@@ -1098,6 +1256,7 @@ div.try-again {
   padding: 10px;
   font-size: 16px;
 }
+
 div.get-help {
   text-align: center;
   font-size: 18px;
@@ -1121,12 +1280,15 @@ div.get-help {
   font-size: 16px;
   background-color: var(--triple-letter-color);
 }
+
 div.get-help span.glyphicon {
   padding-right: 6px;
 }
+
 div.try-again span.glyphicon {
   padding-right: 6px;
 }
+
 div.recallbtn {
   text-align: center;
   font-size: 18px;
@@ -1142,11 +1304,13 @@ div.recallbtn {
   background-color: var(--triple-word-color);
   display: none;
 }
+
 div.rack-left div.recallbtn {
   display: block;
   margin-right: auto;
   /* Left-align the button */
 }
+
 div.scramblebtn {
   text-align: center;
   font-size: 18px;
@@ -1159,21 +1323,25 @@ 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 {
   display: block;
   margin-right: auto;
   /* Left-align the button */
 }
+
 div.buttons {
   position: relative;
   height: 54px;
 }
+
 div.buttons .glyphicon {
   top: 0;
 }
+
 .bottom-button {
   text-align: center;
   font-size: 18px;
@@ -1187,11 +1355,12 @@ 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;
 }
+
 div.submitresign {
   text-align: center;
   font-size: 18px;
@@ -1204,13 +1373,14 @@ 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);
   left: 0px;
 }
+
 div.submitexchange {
   text-align: center;
   font-size: 18px;
@@ -1224,15 +1394,17 @@ 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;
   font-size: 18px;
@@ -1245,13 +1417,14 @@ 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);
+  color: var(--pass-button);
   left: 186px;
 }
+
 div.challenge {
   text-align: center;
   font-size: 18px;
@@ -1264,16 +1437,18 @@ 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;
   color: var(--triple-letter-color);
 }
+
 div.challenge.disabled {
   border-color: var(--board-background);
 }
+
 div.submitmove {
   text-align: center;
   font-size: 18px;
@@ -1289,17 +1464,21 @@ div.submitmove {
   background-color: var(--ok-button);
   display: none;
 }
+
 div.rack-right div.submitmove {
   display: block;
   margin-left: auto;
   /* Right-align the button */
 }
+
 div.submitmove.error-shown {
   display: none;
 }
+
 div.submitmove span.glyphicon {
   margin-left: 8px;
 }
+
 div.player {
   display: block;
   padding-left: 4px;
@@ -1310,11 +1489,13 @@ div.player {
   font-weight: 400;
   color: white;
 }
+
 div.scorewrapper {
   font-family: var(--number-font);
   background-color: transparent;
   width: 100%;
 }
+
 div.scoreleft {
   display: block;
   width: 42px;
@@ -1330,6 +1511,7 @@ div.scoreleft {
   top: 4px;
   left: 0;
 }
+
 div.scoreright {
   display: block;
   width: 42px;
@@ -1345,12 +1527,13 @@ div.scoreright {
   top: 4px;
   right: 0;
 }
+
 div.robot-btn {
   display: block;
   position: absolute;
   margin-left: 0px;
   margin-right: 2px;
-  padding-top: 3px;
+  padding-top: 4px;
   height: 30px;
   min-height: 30px;
   line-height: 22px;
@@ -1359,20 +1542,23 @@ div.robot-btn {
   overflow: hidden;
   background-color: transparent;
 }
+
 div.robot-btn span.glyphicon-cog {
   margin-right: 2px;
 }
+
 div.gamestats div.robot-btn {
   width: 100%;
   margin: 0;
   padding-top: 6px;
 }
+
 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;
@@ -1384,25 +1570,29 @@ div.player-btn {
   border-width: 0;
   border-radius: 5px;
 }
+
 div.player-btn.left,
 div.robot-btn.left {
   padding-left: 38px;
-  padding-right: 12px;
+  padding-right: 4px;
 }
+
 div.player-btn.right,
 div.robot-btn.right {
-  padding-left: 10px;
-  /* Note: purposefully a bit asymmetric with the left button */
+  padding-left: 4px;
   padding-right: 38px;
 }
+
 div.player-btn.left.tomove,
 div.player-btn.right.tomove {
   color: white;
 }
+
 div.player-btn.left.tomove:hover,
 div.player-btn.right.tomove:hover {
   color: black;
 }
+
 div.heading {
   position: relative;
   width: 100%;
@@ -1413,6 +1603,7 @@ div.heading {
   padding-right: 0;
   height: 38px;
 }
+
 div.tabbed-page {
   position: absolute;
   left: 0;
@@ -1423,9 +1614,11 @@ div.tabbed-page {
   font-size: 13px;
   line-height: 23px;
 }
+
 div.tab-scroll-area {
   position: relative;
 }
+
 div.loginform-small {
   display: block;
   position: absolute;
@@ -1434,6 +1627,7 @@ div.loginform-small {
   padding-left: 0;
   padding-right: 0;
 }
+
 div.loginform-large {
   display: none;
   position: absolute;
@@ -1444,22 +1638,27 @@ div.loginform-large {
   max-width: 740px;
   padding: 0;
 }
+
 div.login-logo {
   margin-top: 120px;
   margin-left: 100px;
 }
+
 div.login-legend {
   margin-left: 50px;
   margin-top: 40px;
 }
+
 div#logo-pic {
   text-align: center;
   padding-top: 32px;
   padding-bottom: 16px;
 }
+
 div.loginform-small div#logo-pic {
   padding-top: 0;
 }
+
 @keyframes expand {
   0% {
     transform: scale(1);
@@ -1471,6 +1670,7 @@ div.loginform-small div#logo-pic {
     transform: scale(1);
   }
 }
+
 @-webkit-keyframes expand {
   0% {
     transform: scale(1);
@@ -1482,6 +1682,7 @@ div.loginform-small div#logo-pic {
     transform: scale(1);
   }
 }
+
 @keyframes slidein {
   0% {
     transform: scale(0);
@@ -1490,6 +1691,7 @@ div.loginform-small div#logo-pic {
     transform: scale(1);
   }
 }
+
 @-webkit-keyframes slidein {
   0% {
     transform: scale(0);
@@ -1498,6 +1700,7 @@ div.loginform-small div#logo-pic {
     transform: scale(1);
   }
 }
+
 div.login-btn-large {
   text-align: center;
   font-size: 19px;
@@ -1515,13 +1718,16 @@ div.login-btn-large {
   cursor: pointer;
   float: right;
 }
+
 div.login-btn-large:hover {
-  background-color: var(--triple-word-color);
+  background-color: var(--pass-button);
   animation: expand 0.4s;
 }
+
 div.login-btn-large span {
   padding-left: 18px;
 }
+
 div.login-btn-small {
   width: 60%;
   text-align: center;
@@ -1539,15 +1745,18 @@ div.login-btn-small {
   vertical-align: middle;
   cursor: pointer;
 }
+
 div.login-btn-small:hover {
-  background-color: var(--triple-word-color);
+  background-color: var(--pass-button);
 }
+
 div.blurb {
   font-size: 16px;
   font-weight: bold;
   padding-bottom: 24px;
   text-align: center;
 }
+
 div.login-error {
   padding: 12px;
   margin-top: 160px;
@@ -1561,27 +1770,32 @@ div.login-error {
   font-size: 15px;
   box-shadow: 3px 3px 5px 2px var(--dark-shadow);
 }
+
 p.login-sorry {
   font-weight: bold;
 }
+
 p.login-error-icon {
   margin-top: 8px;
   margin-bottom: 8px;
   font-size: 34px;
   color: var(--triple-word-color);
 }
+
 div.leftplayer {
   display: inline-block;
   width: 50%;
   text-align: left;
   border-radius: 4px 0 0 4px;
 }
+
 div.rightplayer {
   display: inline-block;
   width: 50%;
   text-align: right;
   border-radius: 0 4px 4px 0;
 }
+
 div.right-tab {
   position: absolute;
   top: -28px;
@@ -1602,37 +1816,46 @@ div.right-tab {
   cursor: pointer;
   box-shadow: 2px 2px 4px 0 #afb7cad0;
 }
+
 div.right-tab#tab-board {
   left: 41px;
   background-color: var(--container-bg-color);
 }
+
 div.right-tab#tab-movelist {
   left: 106px;
   background-color: var(--board-background);
 }
+
 div.right-tab#tab-twoletter {
   left: 171px;
   background-color: var(--two-letter-background);
 }
+
 div.right-tab#tab-games {
   left: 236px;
   background-color: var(--tile-background);
 }
+
 div.right-tab#tab-chat {
   left: 301px;
-  background-color: #F7F0DE;
+  background-color: var(--chat-background);
 }
+
 div.right-tab.selected {
   opacity: 1;
 }
+
 div.right-tab:hover {
   opacity: 1;
 }
+
 div.right-tab.alert > span.glyphicon {
   color: var(--cancel-button);
   animation: redBlink 1s infinite;
   -webkit-animation: redBlink 1s infinite;
 }
+
 div.right-area {
   /* display: none; */
   position: relative;
@@ -1646,10 +1869,12 @@ div.right-area {
   color: black;
   cursor: default;
 }
+
 div.right-area.with-clock {
   height: 380px;
-  margin-top: 48px;
+  margin-top: 46px;
 }
+
 div.message {
   text-align: center;
   font-size: 14px;
@@ -1658,9 +1883,11 @@ div.message {
   background-color: var(--light-background);
   font-weight: 400;
 }
+
 div.message strong {
   text-transform: uppercase;
 }
+
 div.movelist-container {
   position: absolute;
   top: 0;
@@ -1673,6 +1900,7 @@ div.movelist-container {
   z-index: 6;
   border-radius: 4px 4px 0 0;
 }
+
 div.movelist {
   font-family: var(--number-font);
   margin: 0;
@@ -1681,9 +1909,11 @@ div.movelist {
   width: 100%;
   height: 350px;
 }
+
 div.movelist.bestmoves {
   overflow-y: hidden;
 }
+
 div.movelist-container div.bag {
   display: block;
   background-color: var(--container-bg-color);
@@ -1695,9 +1925,11 @@ div.movelist-container div.bag {
   width: 100%;
   height: 104px;
 }
+
 div.game-timed {
   display: none;
 }
+
 div.modal-dialog {
   visibility: hidden;
   position: fixed;
@@ -1708,17 +1940,40 @@ div.modal-dialog {
   z-index: 10;
   background-color: rgba(32, 32, 32, 0.2);
 }
+
 div.modal-dialog#spinner-dialog {
   background-color: rgba(255, 255, 255, 0.4);
 }
+
 div.animated-spinner {
-  position: absolute;
-  left: 141.5px;
-  top: 271.5px;
+  position: fixed;
+  top: min(360px, 50vh);
+  left: 50%;
+  width: 120px;
+  height: 120px;
+  transform: translate(-50%, -50%);
+  z-index: 100;
+}
+
+@keyframes oscillate {
+  0% { transform: rotate(0deg); }
+  25% { transform: rotate(30deg); }
+  50% { transform: rotate(0deg); }
+  75% { transform: rotate(-30deg); }
+  100% { transform: rotate(0deg); }
 }
+
+div.animated-netskrafl-logo {
+  display: inline-block;
+  aspect-ratio: 1;
+  transform-origin: center center;
+  animation: oscillate 2s ease-in-out infinite;
+}
+
 svg circle.shadow {
   filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
 }
+
 .std-form {
   position: absolute;
   padding-left: 12px;
@@ -1730,6 +1985,7 @@ svg circle.shadow {
   z-index: 20;
   background-color: var(--container-bg-color);
 }
+
 div#blank-form {
   position: absolute;
   padding-left: 12px;
@@ -1746,6 +2002,7 @@ div#blank-form {
   height: 400px;
   background-color: var(--board-background);
 }
+
 .bottom-message {
   position: absolute;
   text-align: right;
@@ -1765,6 +2022,7 @@ div#blank-form {
   transform-origin: left top;
   animation: slidein 0.4s;
 }
+
 .bold-bottom-message {
   position: absolute;
   text-align: right;
@@ -1787,6 +2045,7 @@ div#blank-form {
   color: white;
   border-radius: 4px;
 }
+
 div.error {
   position: absolute;
   text-align: right;
@@ -1811,19 +2070,24 @@ div.error {
   background-color: var(--cancel-button);
   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);
   transition: 0.1s;
   transform: scale(1.1);
-  transform-origin: center left;
+  transform-origin: center right;
   animation: redBlink 0.4s;
   animation-iteration-count: 2;
 }
+
 div#congrats,
 div#gameover {
   position: absolute;
@@ -1849,14 +2113,17 @@ div#gameover {
   text-align: center;
   padding-bottom: 0px;
 }
+
 div#congrats span.glyphicon-bookmark {
   padding-right: 2px;
   color: var(--ok-button);
 }
+
 div#gameover span.glyphicon-info-sign {
   padding-right: 4px;
   color: var(--triple-letter-color);
 }
+
 div.resign {
   position: absolute;
   text-align: right;
@@ -1880,6 +2147,7 @@ div.resign {
   border-radius: 4px;
   background-color: var(--cancel-button);
 }
+
 div.pass {
   position: absolute;
   text-align: right;
@@ -1903,6 +2171,7 @@ div.pass {
   border-radius: 4px;
   background-color: var(--triple-word-color);
 }
+
 div.pass-last {
   position: absolute;
   text-align: right;
@@ -1926,6 +2195,7 @@ div.pass-last {
   border-radius: 4px;
   background-color: var(--triple-word-color);
 }
+
 div.chall {
   position: absolute;
   text-align: right;
@@ -1949,6 +2219,7 @@ div.chall {
   border-radius: 4px;
   background-color: var(--triple-letter-color);
 }
+
 div.chall-info {
   position: absolute;
   text-align: right;
@@ -1976,6 +2247,7 @@ div.chall-info {
   width: 311px;
   padding: 2px 24px 0px;
 }
+
 div.exchange {
   position: absolute;
   text-align: right;
@@ -1999,6 +2271,7 @@ div.exchange {
   border-radius: 4px;
   background-color: var(--ok-button);
 }
+
 div.submitmove#move-mobile {
   display: flex;
   flex-direction: row;
@@ -2014,14 +2287,17 @@ div.submitmove#move-mobile {
   padding-right: 10px;
   padding-top: 6px;
 }
+
 div.submitmove#move-mobile.manual {
   background-color: var(--double-letter-color);
   color: white;
 }
+
 div.submitmove#move-mobile.word-good {
   background-color: var(--ok-button);
   color: white;
 }
+
 @keyframes colorPulseMobile {
   0% {
     transform: scale(1);
@@ -2036,6 +2312,7 @@ div.submitmove#move-mobile.word-good {
     transform: scale(1);
   }
 }
+
 @-webkit-keyframes colorPulseMobile {
   0% {
     transform: scale(1);
@@ -2050,43 +2327,42 @@ div.submitmove#move-mobile.word-good {
     transform: scale(1);
   }
 }
+
 span.score-mobile {
   display: inline-block;
   font-weight: 400;
   font-size: 22px;
   line-height: 22px;
 }
+
 div.submitmove#move-mobile.word-great span.score-mobile {
   animation: colorPulseMobile 1.5s infinite;
   -webkit-animation: colorPulseMobile 1.5s infinite;
 }
+
 div.submitmove#move-mobile span.glyphicon {
   top: 0px;
   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;
   text-align: right;
@@ -2112,22 +2388,32 @@ div.gameinfo {
   color: white;
   padding-top: 10px;
 }
+
 input.chat-txt {
-  font-family: var(--primary-font);
-  width: 276px;
+  box-sizing: border-box;
+  /* font-family: var(--primary-font); */
+  width: 292px;
   font-size: 18px;
-  height: 24px;
+  height: 32px;
   font-weight: normal;
   border-style: solid;
-  border-color: var(--ok-button);
+  border-color: var(--header-color);
   border-width: 1px;
   border-radius: 3px;
-  margin-top: 1px;
   padding-top: 4px;
   padding-bottom: 3px;
   padding-left: 6px;
   padding-right: 6px;
 }
+
+input.chat-txt:focus {
+  border-color: var(--header-color);
+  border-width: 2px;
+  padding-left: 5px;
+  padding-right: 5px;
+  outline-style: none;
+}
+
 div.chat-area {
   position: absolute;
   top: 6px;
@@ -2137,6 +2423,7 @@ div.chat-area {
   padding: 6px;
   overflow: auto;
 }
+
 div.modal-close#chat-send {
   display: inline-block;
   position: relative;
@@ -2148,9 +2435,14 @@ 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(--header-color);
   color: white;
 }
+
+div.modal-close#chat-send span.glyphicon {
+  top: 4px;
+}
+
 div.twoletter {
   position: absolute;
   top: 0px;
@@ -2162,6 +2454,7 @@ div.twoletter {
   z-index: 3;
   border-radius: 4px 4px 0 0;
 }
+
 div.twoletter-area {
   position: absolute;
   top: 0;
@@ -2175,17 +2468,21 @@ div.twoletter-area {
   margin-top: 12px;
   cursor: pointer;
 }
+
 div.twoletter-area#two-2 {
   visibility: hidden;
 }
+
 div.twoletter-group {
   display: inline-block;
   margin-right: 5px;
 }
+
 div.twoletter-word {
   display: inline-block;
   padding-right: 4px;
 }
+
 div.twoletter-word b {
   background-color: var(--ok-button);
   color: white;
@@ -2193,15 +2490,19 @@ div.twoletter-word b {
   padding-right: 2px;
   border-radius: 2px;
 }
+
 span.statsbutton {
   display: none;
 }
+
 div#ready-toggler {
   display: none;
 }
+
 div#timed-toggler {
   display: none;
 }
+
 div.help-container img {
   /* On mobile, scale images in help text down to fit the column width */
   max-width: 100%;
@@ -2209,39 +2510,47 @@ div.help-container img {
   object-fit: scale-down;
   display: inline;
 }
+
 div#tabs,
 div#main-tabs {
   border-width: 0;
   padding: 0;
 }
+
 div#tabs > div[role=tabpanel],
 div#main-tabs > div[role=tabpanel] {
   position: relative;
   top: -8px;
   height: 504px;
 }
+
 div#main-tabs div.header-logo {
-  padding-left: 14px;
-  padding-right: 8px;
-  padding-top: 7px;
+  padding-left: 8px;
+  padding-right: 4px;
+  padding-top: 12px;
 }
+
 div#tabs {
   background-color: transparent;
 }
+
 div.userid {
   display: none;
 }
+
 span.list-ts {
   display: none;
   width: 164px;
   max-width: 164px;
 }
+
 span.list-ts-short {
   display: none;
   padding-left: 4px;
   width: 144px;
   max-width: 144px;
 }
+
 span.list-chall {
   display: inline-block;
   width: 184px;
@@ -2249,24 +2558,28 @@ span.list-chall {
   overflow: hidden;
   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;
 }
+
 span.list-scorehdr {
   display: inline-block;
   width: 84px;
@@ -2274,6 +2587,7 @@ span.list-scorehdr {
   max-width: 84px;
   text-align: center;
 }
+
 div.list-elo-adj {
   display: inline-flex;
   flex-direction: column;
@@ -2284,6 +2598,7 @@ div.list-elo-adj {
   text-align: center;
   text-overflow: clip;
 }
+
 span.list-elo-hdr {
   display: inline-block;
   width: 104px;
@@ -2291,6 +2606,7 @@ span.list-elo-hdr {
   max-width: 104px;
   text-align: center;
 }
+
 span.list-tc {
   display: inline-block;
   width: 84px;
@@ -2298,6 +2614,7 @@ span.list-tc {
   text-align: left;
   padding-right: 0;
 }
+
 div.tilecount {
   display: inline-block;
   vertical-align: middle;
@@ -2307,22 +2624,26 @@ div.tilecount {
   width: 92px;
   min-width: 92px;
   text-align: left;
-  background-color: #ffffff;
+  background-color: white;
   border-radius: 6px;
   overflow: hidden;
 }
+
 div.tc {
   display: inline-block;
   text-align: left;
   background-color: var(--ok-button);
 }
+
 div.tc.losing {
   background-color: var(--cancel-button);
 }
+
 div.tc:before {
   content: "\A0";
   /* Invisible space */
 }
+
 div#userlist span.list-ch,
 div#elolist span.list-ch,
 div#chall-received span.list-ch,
@@ -2330,6 +2651,7 @@ div#chall-sent span.list-ch,
 div#userlist span.list-fav {
   cursor: pointer;
 }
+
 span.list-ch,
 span.list-fav,
 span.list-icon,
@@ -2342,10 +2664,12 @@ span.list-overdue {
   overflow: hidden;
   margin-left: 2px;
 }
+
 span.list-overdue,
 span.list-fav {
   display: none;
 }
+
 span.list-newbag {
   display: none;
   font-size: 18px;
@@ -2354,6 +2678,7 @@ span.list-newbag {
   max-width: 22px;
   margin-left: 14px;
 }
+
 span.list-manual {
   display: none;
   font-size: 18px;
@@ -2362,6 +2687,7 @@ span.list-manual {
   max-width: 26px;
   margin-left: 14px;
 }
+
 span.list-win {
   display: inline-block;
   font-size: 18px;
@@ -2369,28 +2695,33 @@ span.list-win {
   max-width: 26px;
   margin-left: 0;
 }
+
 span.list-nick {
   display: inline-block;
   width: 140px;
   min-width: 140px;
   overflow: hidden;
 }
+
 span.list-nick-elo {
   display: inline-block;
   width: 150px;
   max-width: 150px;
 }
+
 span.list-opp {
   display: inline-block;
   width: 150px;
   max-width: 150px;
 }
+
 span.list-fullname {
   display: inline-block;
   width: 400px;
   min-width: 400px;
   overflow: hidden;
 }
+
 span.list-fullname-robot {
   display: inline-block;
   font-size: 14px;
@@ -2401,6 +2732,7 @@ span.list-fullname-robot {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
 span.list-human-elo {
   display: inline-block;
   width: 40px;
@@ -2408,18 +2740,21 @@ span.list-human-elo {
   text-align: center;
   margin-right: 6px;
 }
+
 span.list-duration {
   display: none;
   width: 192px;
   max-width: 192px;
   text-align: right;
 }
+
 span.list-info-hdr {
   display: none;
   width: 52px;
   max-width: 52px;
   text-align: center;
 }
+
 span.list-info {
   display: none;
   width: 52px;
@@ -2428,6 +2763,7 @@ span.list-info {
   height: 24px;
   line-height: 20px;
 }
+
 span.list-rank {
   display: inline-block;
   width: 36px;
@@ -2435,6 +2771,7 @@ span.list-rank {
   text-align: center;
   margin-right: 8px;
 }
+
 span.list-rank-no-mobile {
   display: none;
   width: 32px;
@@ -2442,6 +2779,7 @@ span.list-rank-no-mobile {
   text-align: center;
   margin-right: 10px;
 }
+
 span.list-elo {
   display: inline-block;
   width: 40px;
@@ -2449,6 +2787,7 @@ span.list-elo {
   text-align: center;
   margin-right: 10px;
 }
+
 span.list-elo-no-mobile {
   display: none;
   width: 40px;
@@ -2456,6 +2795,7 @@ span.list-elo-no-mobile {
   text-align: center;
   margin-right: 10px;
 }
+
 span.list-games {
   display: none;
   width: 48px;
@@ -2463,6 +2803,7 @@ span.list-games {
   text-align: right;
   margin-right: 10px;
 }
+
 span.list-ratio {
   display: none;
   width: 40px;
@@ -2470,6 +2811,7 @@ span.list-ratio {
   text-align: right;
   margin-right: 10px;
 }
+
 span.list-avgpts {
   display: none;
   width: 36px;
@@ -2477,22 +2819,28 @@ span.list-avgpts {
   text-align: right;
   margin-right: 16px;
 }
+
 span.mobile-break {
   display: inline;
 }
+
 .tab-legend {
   display: none;
   font-weight: normal;
 }
+
 div.user-cat span#break {
   display: inline;
 }
+
 div.user-cat#user-headings {
   line-height: 32px;
 }
+
 div.user-cat#user-search {
   display: none;
 }
+
 div#chall-form {
   position: absolute;
   padding-left: 12px;
@@ -2515,6 +2863,7 @@ div#chall-form {
   height: 352px;
   font-size: 0.85em;
 }
+
 div#chall-fairplay {
   margin-top: 10px;
   padding-left: 0;
@@ -2522,27 +2871,33 @@ div#chall-fairplay {
   font-size: 14px;
   text-align: right;
 }
+
 div#chall-oldbag {
   position: absolute;
   bottom: 16px;
   font-size: 14px;
 }
+
 div#chall-oldbag td span.glyphicon-exclamation-sign {
   color: var(--cancel-button);
   padding-right: 8px;
 }
+
 span.caption.wide {
   width: 200px;
 }
+
 div#manual-toggler {
   display: inline-block;
 }
+
 div#chall-ok {
   right: 12px;
   width: 72px;
   /* Override */
   background-color: var(--ok-button);
 }
+
 div#chall-cancel {
   right: 108px;
   /* 12 + 72 + 12 + 12 */
@@ -2550,9 +2905,11 @@ div#chall-cancel {
   /* Override */
   background-color: var(--cancel-button);
 }
+
 div.user-cat#user-headings span {
   white-space: nowrap;
 }
+
 div#user-load {
   display: none;
   position: absolute;
@@ -2561,10 +2918,14 @@ div#user-load {
   width: 24px;
   height: 24px;
   z-index: 10;
+  /*
+  !!! TODO:
   background-image: url('user-loader.gif');
   background-repeat: no-repeat;
   background-size: 24px 24px;
+  */
 }
+
 div#promo-form {
   position: absolute;
   padding-left: 12px;
@@ -2581,17 +2942,21 @@ div#promo-form {
   height: 364px;
   line-height: 1.5em;
 }
+
 div.promo-content {
   margin-top: 16px;
   margin-left: 16px;
   margin-right: 16px;
 }
+
 div.promo-fullscreen {
   display: none;
 }
+
 div.promo-mobile {
   display: block;
 }
+
 div.btn-promo-yes {
   text-align: center;
   font-size: 18px;
@@ -2610,6 +2975,7 @@ div.btn-promo-yes {
   top: auto;
   background-color: var(--ok-button);
 }
+
 div.btn-promo-no {
   text-align: center;
   font-size: 18px;
@@ -2628,6 +2994,7 @@ div.btn-promo-no {
   top: auto;
   background-color: var(--ok-button);
 }
+
 div #userlist,
 div #elolist {
   height: 396px;
@@ -2635,24 +3002,28 @@ div #elolist {
   overflow-y: auto;
   overflow-x: hidden;
 }
+
 div #gamelist {
   height: 468px;
   /* 13 lines @ 36px each */
   overflow-y: auto;
   overflow-x: hidden;
 }
+
 div #recentlist {
   height: 396px;
   /* 11 lines @ 36px each */
   overflow-y: auto;
   overflow-x: hidden;
 }
+
 div #usr-recent {
   height: 432px;
   /* 12 lines @ 36px each */
   overflow-y: auto;
   overflow-x: hidden;
 }
+
 div #chall-sent,
 div #chall-received {
   height: 216px;
@@ -2660,6 +3031,7 @@ div #chall-received {
   overflow-y: auto;
   overflow-x: hidden;
 }
+
 div.games {
   position: absolute;
   top: 0;
@@ -2673,6 +3045,7 @@ div.games {
   padding-bottom: 12px;
   border-radius: 4px 4px 0 0;
 }
+
 div#wait-form {
   position: absolute;
   padding-left: 12px;
@@ -2688,6 +3061,7 @@ div#wait-form {
   width: 335px;
   height: 488px;
 }
+
 span.move-indicator {
   position: relative;
   top: 2px;
@@ -2701,9 +3075,11 @@ span.move-indicator {
   color: var(--triple-word-color);
   margin-right: 4px;
 }
+
 span.move-indicator:before {
   content: "\E267";
 }
+
 div.hint {
   display: none;
   position: absolute;
@@ -2715,6 +3091,7 @@ div.hint {
   margin-left: 12px;
   margin-right: 12px;
 }
+
 div.stats-box {
   font-family: var(--number-font);
   width: 224px;
@@ -2722,6 +3099,7 @@ div.stats-box {
   top: 0px;
   right: -62px;
 }
+
 div.stats-fig {
   display: inline-block;
   width: 68px;
@@ -2743,12 +3121,14 @@ div.stats-fig {
   margin-left: 2px;
   cursor: default;
 }
+
 div#own-toggler {
   position: absolute;
   top: 2px;
   margin-top: 0;
   margin-right: 8px;
 }
+
 p#own-best {
   display: inline-block;
   position: absolute;
@@ -2758,6 +3138,7 @@ p#own-best {
   text-align: right;
   font-size: 0.85em;
 }
+
 div#own-stats {
   position: relative;
   margin-top: 2px;
@@ -2766,14 +3147,18 @@ div#own-stats {
   width: 100%;
   vertical-align: top;
 }
+
 /* Paragraphs of help text that should be centered on screens that are wide enough */
+
 p.help-center {
   text-align: left;
 }
+
 div.racktile {
   cursor: pointer;
   background-color: white;
 }
+
 @keyframes selBlink {
   0% {
     color: white;
@@ -2796,6 +3181,7 @@ div.racktile {
     background-color: var(--cancel-button);
   }
 }
+
 @-webkit-keyframes selBlink {
   0% {
     color: white;
@@ -2818,6 +3204,7 @@ div.racktile {
     background-color: var(--cancel-button);
   }
 }
+
 @keyframes selBlank {
   0% {
     color: white;
@@ -2840,6 +3227,7 @@ div.racktile {
     background-color: var(--cancel-button);
   }
 }
+
 @-webkit-keyframes selBlank {
   0% {
     color: white;
@@ -2862,6 +3250,7 @@ div.racktile {
     background-color: var(--cancel-button);
   }
 }
+
 @keyframes redBlink {
   0% {
     opacity: 1;
@@ -2879,6 +3268,7 @@ div.racktile {
     opacity: 1;
   }
 }
+
 @-webkit-keyframes redBlink {
   0% {
     opacity: 1;
@@ -2896,6 +3286,7 @@ div.racktile {
     opacity: 1;
   }
 }
+
 @keyframes opacityBlink {
   0% {
     opacity: 1;
@@ -2913,6 +3304,7 @@ div.racktile {
     opacity: 0.1;
   }
 }
+
 @-webkit-keyframes opacityBlink {
   0% {
     opacity: 1;
@@ -2930,27 +3322,34 @@ div.racktile {
     opacity: 0.1;
   }
 }
+
 div.sel {
   animation: selBlink 1.2s infinite;
   -webkit-animation: selBlink 1.2s infinite;
 }
+
 div.blanktile.sel {
   animation: selBlank 1.2s infinite;
   -webkit-animation: selBlank 1.2s infinite;
 }
+
 td.sel {
   outline: var(--cancel-button) solid 3px;
 }
+
 div.xchg {
   cursor: pointer;
 }
+
 div.xchgsel {
   color: white;
   background-color: var(--ok-button);
 }
+
 .blanktile {
   color: var(--blank-tile);
 }
+
 @keyframes fresh-appear {
   0% {
     opacity: 0;
@@ -2959,6 +3358,7 @@ div.xchgsel {
     opacity: 1;
   }
 }
+
 @-webkit-keyframes fresh-appear {
   0% {
     opacity: 0;
@@ -2967,6 +3367,7 @@ div.xchgsel {
     opacity: 1;
   }
 }
+
 div.freshtile {
   color: white;
   background-color: var(--cancel-button);
@@ -2980,30 +3381,37 @@ div.freshtile {
   -webkit-animation-delay: 0s;
   -webkit-animation-fill-mode: forwards;
 }
+
 div.highlight0 {
   /* Human (local) player */
   color: black;
   background-color: white;
 }
+
 div.highlight1 {
   /* Computer (remote) player */
   color: white;
   background-color: var(--cancel-button);
 }
+
 div.highlight0.blanktile {
   /* Human (local) player */
   color: var(--blank-tile);
 }
+
 div.highlight1.blanktile {
   /* Computer (remote) player */
   color: #f3d6d8;
 }
+
 div.highlight0.dim {
   background-color: #fbedee;
 }
+
 div.highlight1.dim {
   background-color: #deb3b6;
 }
+
 .clock {
   display: inline-block;
   position: absolute;
@@ -3012,57 +3420,63 @@ 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;
 }
+
 h3.clockleft {
   display: inline-block;
   position: absolute;
-  top: 82px;
+  top: 86px;
   width: 147px;
   font-size: 28px;
   line-height: 28px;
   font-weight: 700;
-  color: #202020;
+  color: var(--dark-bg-color);
   overflow: hidden;
   margin-top: 4px;
   margin-bottom: 4px;
   left: 0;
   text-align: left;
 }
+
 h3.clockright {
   display: inline-block;
   position: absolute;
-  top: 82px;
+  top: 86px;
   width: 147px;
   font-size: 28px;
   line-height: 28px;
   font-weight: 700;
-  color: #202020;
+  color: var(--dark-bg-color);
   overflow: hidden;
   margin-top: 4px;
   margin-bottom: 4px;
   right: 0;
   text-align: right;
 }
+
 h3.clockleft.running-out {
   color: var(--cancel-button);
 }
+
 h3.clockright.running-out {
   color: var(--cancel-button);
 }
+
 div.clockface {
   display: block;
   position: absolute;
-  top: 84px;
+  top: 86px;
   width: 100%;
   text-align: center;
   font-size: 28px;
   line-height: 28px;
   color: var(--triple-word-color);
 }
+
 div.fairplay {
   position: absolute;
   top: 10px;
@@ -3070,6 +3484,7 @@ div.fairplay {
   text-align: center;
   color: var(--ok-button);
 }
+
 div.games-item {
   position: relative;
   height: 24px;
@@ -3086,18 +3501,22 @@ div.games-item {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
 div.games-item a:link,
 div.games-item a:visited {
   color: black;
   text-decoration: none;
 }
+
 div.games-item a:hover {
   color: black;
 }
+
 div.games-item:hover {
   border-radius: 5px;
   background-color: rgba(86, 153, 165, 0.5);
 }
+
 div.at-top-left {
   position: absolute;
   top: 6px;
@@ -3107,6 +3526,7 @@ div.at-top-left {
   line-height: 20px;
   font-weight: bold;
 }
+
 div.at-top-left div.tilecount {
   width: 276px;
   min-width: 276px;
@@ -3114,11 +3534,13 @@ 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;
 }
+
 div.at-top-left div.tilecount div.tc {
   color: var(--container-bg-color);
   padding-left: 4px;
@@ -3132,8 +3554,9 @@ div.at-top-left div.tilecount div.tc {
   padding-top: 2px;
   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,19 +3567,22 @@ 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;
 }
+
 div.chat-area.with-clock {
   height: 310px;
 }
+
 div.chat-ts {
   clear: both;
   display: inline-block;
@@ -3168,6 +3594,7 @@ div.chat-ts {
   margin-bottom: 8px;
   width: 100%;
 }
+
 div.chat-msg {
   display: inline-block;
   border-radius: 8px;
@@ -3181,26 +3608,35 @@ div.chat-msg {
   max-width: 80%;
   margin-bottom: 6px;
 }
+
 div.chat-msg.left {
   float: left;
   clear: both;
   text-align: left;
 }
+
 div.chat-msg.right {
   float: right;
   clear: both;
   text-align: right;
 }
+
 div.chat-msg.local {
   background-color: var(--board-background);
 }
+
 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;
   bottom: 0px;
@@ -3209,31 +3645,36 @@ div.chat-input {
   padding: 6px;
   vertical-align: bottom;
 }
+
 div.movelist.noscroll {
   overflow-y: hidden;
 }
+
 div.leftmove {
   text-align: left;
   padding-left: 0px;
   height: 20px;
   line-height: 18px;
 }
+
 div.rightmove {
   text-align: right;
   padding-right: 0px;
   height: 20px;
   line-height: 18px;
 }
+
 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;
   line-height: 18px;
 }
+
 span.movenumber {
   background-color: white;
   color: var(--ok-button);
@@ -3249,17 +3690,20 @@ span.movenumber {
   padding-left: 12px;
   padding-right: 12px;
 }
+
 div.gameover {
   text-align: center;
   margin-top: 6px;
   padding: 10px;
   background-color: var(--triple-word-color);
   color: white;
-  font-weight: 700;
+  font-weight: 400;
 }
+
 span.gameovermsg {
   margin-right: 6px;
 }
+
 div.gamestats {
   visibility: hidden;
   color: black;
@@ -3269,58 +3713,70 @@ 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);
 }
+
 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;
   margin-top: 4px;
   margin-bottom: 8px;
 }
+
 .humancolor {
   background-color: var(--human-color);
 }
+
 .autoplayercolor {
   background-color: var(--cancel-button);
 }
+
 /* 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);
 }
+
 span.score {
   display: inline-block;
-  width: 28px;
+  width: 32px;
   padding-left: 2px;
   margin-left: 2px;
   padding-right: 2px;
@@ -3329,6 +3785,7 @@ span.score {
   text-align: right;
   line-height: 20px;
 }
+
 span.total {
   display: inline-block;
   width: 28px;
@@ -3341,6 +3798,7 @@ span.total {
   color: white;
   line-height: 20px;
 }
+
 div.leftmove span.total {
   border-left-width: 0px;
   border-left-style: solid;
@@ -3348,6 +3806,7 @@ div.leftmove span.total {
   border-bottom-right-radius: 2.5px;
   margin-right: 2px;
 }
+
 div.rightmove span.total {
   border-right-width: 0px;
   border-right-style: solid;
@@ -3355,45 +3814,56 @@ div.rightmove span.total {
   border-bottom-left-radius: 2.5px;
   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);
 }
+
 div.rightmove span.total.autoplayer {
   border-right-color: var(--cancel-button);
 }
+
 span.highlight {
   background-color: var(--ok-button);
   color: white;
 }
+
 span.wordmove {
   text-transform: uppercase;
   padding-left: 3px;
   padding-right: 3px;
   font-size: 12px;
 }
+
 span.wordmove i {
   font-weight: bold;
   padding-left: 3px;
   padding-right: 3px;
   font-size: 16px;
 }
+
 span.othermove {
   text-transform: none;
   padding-left: 3px;
   font-size: 14px;
 }
+
 div.error p {
   display: inline;
   position: relative;
@@ -3402,15 +3872,18 @@ div.error p {
   margin: 0;
   padding: 0;
 }
+
 div.error span.glyphicon {
   padding-right: 6px;
 }
+
 span.pass-explain {
   font-weight: normal;
   font-style: italic;
   padding-left: 3px;
   padding-right: 3px;
 }
+
 span.yesnobutton {
   height: 20px;
   text-align: center;
@@ -3428,33 +3901,42 @@ span.yesnobutton {
   border-radius: 5px;
   cursor: pointer;
 }
+
 div.resign span.yesnobutton {
   color: var(--cancel-button);
 }
+
 div.pass span.yesnobutton,
 div.pass-last span.yesnobutton {
   color: var(--triple-word-color);
 }
+
 div.exchange span.yesnobutton {
   color: var(--ok-button);
 }
+
 div.chall span.yesnobutton {
   color: var(--triple-letter-color);
 }
+
 span.closebtn {
   color: var(--triple-word-color);
 }
+
 span.yesnobutton#force-resign {
   display: none;
 }
+
 div.score.word-good {
   color: var(--ok-button);
   border-color: var(--ok-button);
 }
+
 div.score.manual {
   color: var(--triple-letter-color);
   border-color: var(--triple-letter-color);
 }
+
 @keyframes colorPulse {
   0% {
     color: var(--ok-button);
@@ -3471,6 +3953,7 @@ div.score.manual {
     color: var(--ok-button);
   }
 }
+
 @-webkit-keyframes colorPulse {
   0% {
     color: var(--ok-button);
@@ -3487,21 +3970,25 @@ div.score.manual {
     color: var(--ok-button);
   }
 }
+
 div.score.word-great {
   animation: colorPulse 1.5s infinite;
   -webkit-animation: colorPulse 1.5s infinite;
   border-color: var(--ok-button);
 }
+
 div.score.opponent {
   color: white;
   background-color: var(--cancel-button);
   border: none;
 }
+
 div.score.localplayer {
   color: white;
   background-color: var(--human-color);
   border: none;
 }
+
 div.channel {
   position: absolute;
   width: 32px;
@@ -3517,28 +4004,34 @@ div.channel {
   overflow: hidden;
   visibility: hidden;
 }
+
 div.channel:before {
   content: "\E051";
   /* glyphicon-link */
 }
+
 div.word-check.word-good {
   color: var(--ok-button);
   border-color: var(--ok-button);
   visibility: visible;
 }
+
 div.word-check.word-good:before {
   content: "\E344";
   /* glyphicon-thumbs-up */
 }
+
 div.word-check.word-bad {
   color: var(--cancel-button);
   border-color: var(--cancel-button);
   visibility: visible;
 }
+
 div.word-check.word-bad:before {
   content: "\E200";
   /* glyphicon-ban-circle */
 }
+
 div.board-help {
   position: absolute;
   z-index: 2;
@@ -3550,12 +4043,14 @@ div.board-help {
   border-radius: 5px;
   cursor: default;
 }
+
 div.board-help-close {
   width: 50px;
   text-align: right;
   background-color: white;
   margin: 2px;
 }
+
 div.board-help-close span {
   background-color: var(--cancel-button);
   color: white;
@@ -3564,13 +4059,16 @@ div.board-help-close span {
   padding-left: 2px;
   cursor: pointer;
 }
+
 div.board-help-close span:hover {
-  background-color: var(--triple-word-color);
+  background-color: var(--pass-button);
 }
+
 div.board-colors {
   margin: 0;
   padding: 0;
 }
+
 div.board-color {
   width: 44px;
   text-align: center;
@@ -3584,28 +4082,34 @@ div.board-color {
   border: solid 2px white;
   border-collapse: collapse;
 }
+
 div.board-color#triple-word {
   background-color: var(--triple-word-color);
   color: white;
   border-bottom: none;
 }
+
 div.board-color#double-word {
   background-color: var(--double-word-color);
   border-bottom: none;
 }
+
 div.board-color#triple-letter {
   background-color: var(--triple-letter-color);
   color: white;
   border-bottom: none;
 }
+
 div.board-color#double-letter {
   background-color: var(--double-letter-color);
   border-bottom: none;
 }
+
 div.board-color#single-letter {
   background-color: var(--board-background);
   color: black;
 }
+
 div.scorediff {
   position: absolute;
   width: 50px;
@@ -3613,19 +4117,22 @@ div.scorediff {
   text-align: center;
   vertical-align: middle;
   bottom: 272px;
-  left: 643px;
+  left: 646px;
   background-color: var(--cancel-button);
   font-size: 18px;
   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);
+  background-color: var(--human-color);
 }
+
 div.navbtn {
   text-align: center;
   font-size: 18px;
@@ -3641,30 +4148,37 @@ div.navbtn {
   height: 30px;
   bottom: 136px;
   line-height: 24px;
-  background-color: var(--ok-button);
+  background-color: var(--header-color);
 }
+
 div.navbtn#navnext {
   position: absolute;
   left: 550px;
   font-weight: normal;
 }
+
 div.navbtn#navprev {
   position: absolute;
   left: 110px;
   font-weight: normal;
 }
+
 span#nav-prev-visible {
   display: inline;
 }
+
 span#nav-prev-waiting {
   display: none;
 }
+
 span#nav-next-visible {
   display: inline;
 }
+
 span#nav-next-waiting {
   display: none;
 }
+
 div.closebtn {
   text-align: center;
   font-size: 18px;
@@ -3680,29 +4194,35 @@ div.closebtn {
   bottom: 12px;
   background-color: var(--ok-button);
 }
+
 #review-close {
   position: absolute;
   right: 12px;
 }
+
 span#total0,
 span#total1 {
   font-size: 28px;
   margin-left: 8px;
   margin-right: 8px;
 }
+
 div.promo-content h2 {
   color: var(--ok-button);
   font-size: 24px;
   line-height: 30px;
   font-weight: bold;
 }
+
 div.promo-content h2 span.glyphicon-coffee-cup,
 div.help-container span.glyphicon-coffee-cup {
   color: var(--triple-word-color);
 }
+
 div.promo-krafla {
   background-color: var(--board-background);
 }
+
 div.btn-krafla-yes {
   text-align: center;
   font-size: 18px;
@@ -3720,6 +4240,7 @@ div.btn-krafla-yes {
   top: auto;
   background-color: var(--ok-button);
 }
+
 div#btn-thanks {
   text-align: center;
   font-size: 18px;
@@ -3738,6 +4259,7 @@ div#btn-thanks {
   top: auto;
   background-color: var(--ok-button);
 }
+
 div#btn-cancel-yes {
   text-align: center;
   font-size: 18px;
@@ -3755,6 +4277,7 @@ div#btn-cancel-yes {
   top: auto;
   background-color: var(--cancel-button);
 }
+
 div#btn-cancel-no {
   text-align: center;
   font-size: 18px;
@@ -3772,19 +4295,23 @@ 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);
+  color: var(--pass-button);
 }
+
 a.ui-tabs-anchor:link,
 a.ui-tabs-anchor:visited {
   color: white;
 }
+
 .notifier {
   display: none;
   /* Set to inline-block by the script if shown */
@@ -3801,6 +4328,7 @@ a.ui-tabs-anchor:visited {
   margin-top: 16px;
   vertical-align: top;
 }
+
 span#numgames {
   display: none;
   /* Set to inline-block by the script if shown */
@@ -3817,6 +4345,7 @@ span#numgames {
   margin-top: 16px;
   vertical-align: top;
 }
+
 span#numchallenges {
   display: none;
   /* Set to inline-block by the script if shown */
@@ -3833,10 +4362,12 @@ span#numchallenges {
   margin-top: 16px;
   vertical-align: top;
 }
+
 div.smallprint {
   font-size: 12px;
   padding-top: 6px;
 }
+
 div.userid {
   position: absolute;
   top: 22px;
@@ -3858,10 +4389,12 @@ div.userid {
   border-radius: 5px;
   cursor: pointer;
 }
+
 div.userid:hover {
-  background-color: #5699A5;
+  background-color: var(--humangrad-color);
   color: white;
 }
+
 div.listitem {
   display: flex;
   flex-direction: row;
@@ -3874,26 +4407,34 @@ div.listitem {
   white-space: nowrap;
   justify-items: center;
 }
+
 .listheader > span {
   top: 0;
 }
+
 .listitem a {
+  display: flex;
   cursor: pointer;
 }
+
 .listitem a:link,
 .listitem a:visited {
   color: black;
   text-decoration: none;
 }
+
 .listitem a:hover {
-  color: var(--triple-word-color);
+  color: var(--pass-button);
 }
+
 div.oddlist {
   background-color: var(--board-background);
 }
+
 div.evenlist {
   background-color: #F7F0DE;
 }
+
 div.listheader {
   background-color: var(--list-header-background);
   font-weight: 400;
@@ -3901,9 +4442,11 @@ div.listheader {
   border-bottom-color: var(--list-header-bottom);
   border-bottom-style: solid;
 }
+
 div#elo-hdr span {
   cursor: default;
 }
+
 div#elo-toggler {
   display: inline-block;
   position: absolute;
@@ -3913,21 +4456,26 @@ div#elo-toggler {
   right: 6px;
   z-index: 10;
 }
+
 span.bold {
   font-weight: 700;
 }
+
 div#initials {
   margin-top: 8px;
   margin-bottom: 14px;
   padding: 0;
 }
+
 div.user-cat {
   display: inline-block;
   vertical-align: middle;
 }
+
 div.user-cat#user-search {
   float: right;
 }
+
 div.user-cat span {
   font-size: 16px;
   cursor: pointer;
@@ -3937,20 +4485,24 @@ div.user-cat span {
   padding-right: 6px;
   margin: 2px;
 }
+
 div.user-cat span.shown {
   background-color: rgba(158, 213, 218, 0.3);
   border-radius: 5px;
 }
+
 div.user-cat span:hover {
   color: white;
   background-color: var(--header-hover-color);
   border-radius: 5px;
 }
+
 div.user-cat#user-search span.glyphicon-search {
   padding-top: 6px;
   padding-bottom: 6px;
   top: 0;
 }
+
 span.versus-cat span {
   font-size: 16px;
   cursor: pointer;
@@ -3960,15 +4512,18 @@ span.versus-cat span {
   padding-right: 6px;
   margin: 2px;
 }
+
 span.versus-cat span.shown {
   background-color: rgba(158, 213, 218, 0.2);
   border-radius: 5px;
 }
+
 span.versus-cat span:hover {
   color: white;
   background-color: var(--double-letter-color);
   border-radius: 5px;
 }
+
 span.ready-btn {
   position: relative;
   top: 2px;
@@ -3984,15 +4539,17 @@ span.ready-btn {
   top: 0;
   cursor: default; /* Not a pushable button even though it looks like one */
   color: white;
-  background-color: var(--triple-letter-color);
+  background-color: var(--option-selected);
   border-radius: 5px;
   padding: 4px;
   margin: 0 4px 0 0;
 }
+
 span.ready-btn:before {
   content: "\E344";
   /* thumbs-up */
 }
+
 span.timed-btn {
   position: relative;
   top: 2px;
@@ -4008,15 +4565,17 @@ 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;
 }
+
 span.timed-btn:before {
   content: "\E055";
   /* time */
 }
+
 span.fairplay-btn {
   position: relative;
   top: 2px;
@@ -4037,10 +4596,12 @@ span.fairplay-btn {
   padding: 4px;
   margin: 0 4px 0 0;
 }
+
 span.fairplay-btn:before {
   content: "\E151";
   /* edit */
 }
+
 span.fairplay-btn.large {
   /* This is shown in the board header */
   top: 0;
@@ -4051,6 +4612,7 @@ span.fairplay-btn.large {
   padding: 2px;
   padding-bottom: 4px;
 }
+
 span.manual-btn {
   position: relative;
   top: 2px;
@@ -4071,10 +4633,12 @@ span.manual-btn {
   padding: 4px;
   margin: 0 4px 0 0;
 }
+
 span.manual-btn:before {
   content: "\E065";
   /* lightbulb */
 }
+
 span.elo-btn {
   display: inline-block;
   width: 30px;
@@ -4088,32 +4652,40 @@ span.elo-btn {
   padding: 5px 6px;
   margin: 0;
 }
+
 span.elo-btn .glyphicon {
   font-size: 15px;
   line-height: 12px;
 }
+
 span.elo-btn.left {
   margin-left: 6px;
   margin-right: 4px;
 }
+
 span.elo-btn.right {
   margin-left: 4px;
   margin-right: 6px;
 }
+
 span.elo-btn.invisible {
   visibility: hidden;
 }
+
 span.elo-btn.elo-win {
   background-color: var(--ok-button);
 }
+
 span.elo-btn.elo-loss {
   background-color: var(--cancel-button);
 }
+
 span.elo-btn.elo-neutral {
-  background-color: var(--double-letter-color);
+  background-color: var(--option-selected);
 }
+
 span.elo-hdr-left {
-  background-color: var(--triple-letter-color);
+  background-color: var(--option-selected);
   color: white;
   border-radius: 5px;
   padding: 4px;
@@ -4123,8 +4695,9 @@ span.elo-hdr-left {
   margin-right: 6px;
   top: 0px;
 }
+
 span.elo-hdr-right {
-  background-color: var(--triple-letter-color);
+  background-color: var(--option-selected);
   color: white;
   border-radius: 5px;
   padding: 4px;
@@ -4134,6 +4707,7 @@ span.elo-hdr-right {
   margin-right: 6px;
   top: 0px;
 }
+
 span.usr-info {
   position: relative;
   top: 2px;
@@ -4149,21 +4723,25 @@ span.usr-info {
   top: 0px;
   cursor: pointer;
   color: white;
-  background-color: var(--ok-button);
+  background-color: var(--header-color);
   border-radius: 5px;
   padding: 4px;
   margin: 0;
 }
+
 span.usr-info:before {
   content: "\E028";
   /* Search */
 }
+
 span.usr-info:hover {
-  background-color: var(--triple-word-color);
+  background-color: var(--pass-button);
 }
+
 #userlist span.glyphicon.glyphicon-star {
-  color: var(--triple-letter-color);
+  color: var(--header-color);
 }
+
 #userlist span.glyphicon.glyphicon-hand-right,
 #elolist span.glyphicon.glyphicon-hand-right,
 #chall-sent span.glyphicon.glyphicon-hand-right,
@@ -4171,16 +4749,19 @@ span.usr-info:hover {
 p span.glyphicon.glyphicon-flag,
 #gamelist span.glyphicon.glyphicon-flag,
 #gamelist span.glyphicon.glyphicon-hourglass {
-  color: var(--triple-word-color);
+  color: var(--pass-button);
 }
+
 #recentlist span.glyphicon.glyphicon-bookmark,
 #usr-recent span.glyphicon.glyphicon-bookmark,
 #gamelist span.glyphicon.glyphicon-bookmark {
   color: var(--ok-button);
 }
+
 span.glyphicon.glyphicon-lightbulb.grayed {
   color: rgba(0, 0, 0, 0.2);
 }
+
 .listheader span.glyphicon.glyphicon-star-empty,
 .listheader span.glyphicon.glyphicon-hand-right.grayed,
 .listheader span.glyphicon.glyphicon-thumbs-down.grayed,
@@ -4191,10 +4772,12 @@ span.glyphicon.glyphicon-lightbulb.grayed {
 #elolist span.glyphicon.glyphicon-hand-right.grayed {
   color: rgba(0, 0, 0, 0.15);
 }
+
 span.glyphicon.glyphicon-hourglass.grayed,
 span.glyphicon.glyphicon-shopping-bag.grayed {
   color: rgba(0, 0, 0, 0.1);
 }
+
 .listheader span.glyphicon.glyphicon-bookmark.grayed,
 #recentlist span.glyphicon.glyphicon-bookmark.grayed,
 #usr-recent span.glyphicon.glyphicon-bookmark.grayed,
@@ -4202,9 +4785,11 @@ span.glyphicon.glyphicon-shopping-bag.grayed {
 #gamelist span.glyphicon.glyphicon-hourglass.grayed {
   color: rgba(0, 0, 0, 0.06);
 }
+
 #gamelist span.glyphicon.glyphicon-flag.zombie {
   color: var(--double-letter-color);
 }
+
 div#user-no-match {
   display: none;
   position: absolute;
@@ -4214,17 +4799,22 @@ div#user-no-match {
   z-index: 10;
   text-align: center;
 }
+
 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,32 +4824,38 @@ div.modal-close {
   right: 12px;
   top: auto;
 }
+
 div#usr-info-close {
   width: 72px;
   /* Override */
   background-color: var(--ok-button);
 }
+
 div#load-game {
   width: 72px;
   /* Override */
   background-color: var(--ok-button);
 }
+
 div#wait-cancel {
   right: 12px;
   width: 72px;
   /* Override */
   background-color: var(--cancel-button);
 }
+
 div#accept-cancel {
   right: 12px;
   width: 72px;
   /* Override */
   background-color: var(--cancel-button);
 }
+
 div#blank-close,
 div#promo-close {
   background-color: var(--cancel-button);
 }
+
 div#thanks-form {
   position: absolute;
   padding-left: 12px;
@@ -4276,6 +4872,7 @@ div#thanks-form {
   height: 248px;
   line-height: 1.62em;
 }
+
 div#cancel-form {
   position: absolute;
   padding-left: 12px;
@@ -4292,6 +4889,7 @@ div#cancel-form {
   height: 372px;
   line-height: 1.62em;
 }
+
 div#confirm-form {
   position: absolute;
   padding-left: 12px;
@@ -4308,6 +4906,7 @@ div#confirm-form {
   height: 200px;
   line-height: 1.62em;
 }
+
 div#conditions-form {
   position: absolute;
   padding-left: 12px;
@@ -4326,6 +4925,7 @@ div#conditions-form {
   padding-left: 24px;
   padding-right: 24px;
 }
+
 div#usr-info-form {
   position: absolute;
   padding-left: 12px;
@@ -4341,6 +4941,7 @@ div#usr-info-form {
   width: 884px;
   height: 644px;
 }
+
 div.thanks-content,
 div#cancel-content,
 div#confirm-content {
@@ -4348,64 +4949,81 @@ div#confirm-content {
   margin-left: 24px;
   margin-right: 24px;
 }
+
 div.usr-info-hdr {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   font-size: 18px;
   margin-top: 0px;
   margin-bottom: 0px;
 }
+
 div.usr-info-hdr h1 {
-  display: inline;
+  display: block;
   font-size: 36px;
   font-weight: bold;
+  margin-right: 3px;
 }
+
 div.usr-info-hdr h2 {
-  display: inline;
+  display: block;
   font-size: 24px;
   font-weight: bold;
 }
+
 span.vbar {
   color: var(--light-background);
   font-size: 2em;
   padding-left: 10px;
   padding-right: 10px;
 }
+
 h1.usr-info-icon {
   color: var(--light-background);
 }
+
 h1.usr-info-icon span.glyphicon-coffee-cup {
   color: var(--ok-button);
 }
+
 div.usr-info-fav {
-  display: inline-block;
+  display: block;
   position: absolute;
-  top: 26px;
+  top: 16px;
   right: 20px;
   color: var(--triple-letter-color);
   font-size: 26px;
   cursor: pointer;
 }
+
 div.usr-info-fav span.glyphicon-star-empty {
   color: rgba(0, 0, 0, 0.15);
 }
+
 div#usr-info-chall {
   display: inline-block;
   position: absolute;
   top: 68px;
   right: 20px;
 }
+
 div#usr-info-chall.chall span.glyphicon-hand-right {
   font-size: 26px;
   color: var(--triple-word-color);
 }
+
 div#usr-info-chall.no-chall span.glyphicon-hand-right {
   font-size: 26px;
   color: rgba(0, 0, 0, 0.15);
 }
+
 span.best-word {
   text-transform: uppercase;
   font-weight: bold;
   font-style: italic;
 }
+
 p#usr-best {
   display: inline-block;
   position: absolute;
@@ -4413,19 +5031,23 @@ p#usr-best {
   top: 50px;
   text-align: right;
 }
+
 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;
   margin-right: 8px;
 }
+
 div#usr-stats {
   position: absolute;
   height: 48px;
@@ -4434,46 +5056,56 @@ div#usr-stats {
   left: 12px;
   vertical-align: top;
 }
+
 div#usr-stats-human {
   display: inline-block;
   vertical-align: top;
 }
+
 div#usr-stats-all {
   display: none;
   vertical-align: top;
 }
+
 div#own-stats-human {
   display: inline-block;
   vertical-align: top;
 }
+
 div#own-stats-all {
   display: none;
   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;
   margin-top: 6px;
   margin-bottom: 15px;
   overflow-x: hidden;
 }
+
 div.chall-hdr table {
   border-spacing: 0;
   margin: 0;
   padding: 0;
   vertical-align: top;
 }
+
 td.l-border {
   border-left-style: solid;
   border-left-color: black;
@@ -4481,6 +5113,7 @@ td.l-border {
   padding-left: 12px;
   white-space: nowrap;
 }
+
 div.chall-hdr h1 {
   display: inline-block;
   font-size: 28px;
@@ -4490,21 +5123,24 @@ div.chall-hdr h1 {
   margin-bottom: 8px;
   font-weight: bold;
 }
+
 div.chall-hdr h2 {
   display: block;
   font-size: 22px;
   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;
 }
+
 div.chall-time {
   display: inline-block;
   width: 300px;
@@ -4520,24 +5156,29 @@ 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;
 }
+
 div.chall-time.selected {
   background-color: var(--triple-word-color);
   color: black;
 }
+
 div.chall-time:hover {
   background-color: var(--double-letter-color);
 }
+
 div.chall-time.selected:hover {
   background-color: var(--double-word-color);
 }
+
 div.chall-time span.glyphicon-time {
   margin-right: 8px;
 }
+
 span#chall-online {
   position: relative;
   top: 2px;
@@ -4555,13 +5196,16 @@ span#chall-online {
   padding: 5px;
   margin: 0;
 }
+
 span#chall-online:before {
   content: "\E242";
   /* Flash */
 }
+
 span#chall-online.online {
   background-color: var(--ok-button);
 }
+
 div#chall-newbag {
   margin-top: 24px;
   padding-left: 6px;
@@ -4569,27 +5213,33 @@ div#chall-newbag {
   font-size: 14px;
   text-align: left;
 }
+
 div#chall-newbag td {
   vertical-align: middle;
   padding-right: 12px;
 }
+
 div#chall-manual {
   margin-top: 4px;
   font-size: 14px;
 }
+
 div#manual-toggler {
   margin-top: 12px;
   margin-bottom: 0;
 }
+
 div.wait-explain {
   padding-left: 48px;
   padding-right: 12px;
   padding-top: 24px;
   padding-bottom: 24px;
 }
+
 div#user-dialog {
   visibility: visible;
 }
+
 div#user-form {
   position: absolute;
   padding-left: 12px;
@@ -4605,33 +5255,38 @@ div#user-form {
   width: 736px;
   height: 582px;
 }
+
 div#user-logout {
   left: 12px;
   width: 144px;
   /* Override */
   background-color: var(--triple-word-color);
 }
+
 div#user-friend {
   left: 180px;
   width: 280px;
   /* Override */
   background-color: var(--ok-button);
 }
+
 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 {
-  color: var(--triple-word-color);
+  top: -1px;
+  color: var(--pass-button);
+  margin-right: 8px;
 }
+
 div#user-cancel {
   right: 108px;
   /* 12 + 72 + 12 + 12 */
@@ -4639,6 +5294,7 @@ div#user-cancel {
   /* Override */
   background-color: var(--cancel-button);
 }
+
 div#user-ok {
   right: 12px;
   /* 12 */
@@ -4646,6 +5302,7 @@ div#user-ok {
   /* Override */
   background-color: var(--ok-button);
 }
+
 div#accept-form {
   position: absolute;
   padding-left: 12px;
@@ -4661,6 +5318,7 @@ div#accept-form {
   width: 335px;
   height: 488px;
 }
+
 h1#accept-nick {
   display: inline-block;
   font-size: 28px;
@@ -4669,48 +5327,59 @@ h1#accept-nick {
   margin-top: 0;
   margin-bottom: 8px;
 }
+
 .blink {
   animation: opacityBlink 1s infinite;
   -webkit-animation: opacityBlink 1s infinite;
 }
+
 .opp-ready {
   animation: opacityBlink 1s infinite;
   -webkit-animation: opacityBlink 1s infinite;
 }
+
 a.opp-ready:link,
 a.opp-ready:visited {
   color: var(--cancel-button);
 }
+
 a.opp-ready:hover {
-  color: var(--triple-word-color);
+  color: var(--pass-button);
 }
+
 div.blank-rack {
   position: relative;
   top: 0;
   left: 0;
 }
+
 .blank-rack table.board {
   border-spacing: 8px;
 }
+
 div.welcome {
   font-size: 15px;
   line-height: 20px;
   font-weight: normal;
   padding-bottom: 12px;
 }
+
 .welcome a:link,
 .welcome a:visited {
   text-decoration: none;
-  color: #5699A5;
+  color: var(--humangrad-color);
 }
+
 .welcome a:hover {
   text-decoration: none;
-  color: var(--triple-word-color);
+  color: var(--pass-button);
 }
+
 div.dialog-spacer {
   margin-top: 2px;
   margin-bottom: 4px;
 }
+
 span.caption {
   display: inline-block;
   position: relative;
@@ -4721,6 +5390,7 @@ span.caption {
   overflow: hidden;
   text-align: right;
 }
+
 span.subcaption {
   display: inline-block;
   position: relative;
@@ -4729,15 +5399,18 @@ span.subcaption {
   margin-left: 18px;
   margin-right: 6px;
 }
+
 span.caption.sub {
   top: 16px;
 }
+
 span.asterisk {
   color: red;
   font-size: 1.4em;
   font-weight: bold;
   margin-left: 4px;
 }
+
 div.explain {
   margin-left: 158px;
   margin-bottom: 12px;
@@ -4746,6 +5419,7 @@ div.explain {
   font-style: italic;
   color: var(--light-shadow);
 }
+
 div.subexplain {
   display: inline-block;
   width: 420px;
@@ -4756,6 +5430,7 @@ div.subexplain {
   font-size: 14px;
   color: var(--light-shadow);
 }
+
 div.errinput {
   margin-left: 158px;
   margin-bottom: 10px;
@@ -4764,8 +5439,9 @@ div.errinput {
   font-weight: bold;
   color: var(--cancel-button);
 }
+
 input.text {
-  font-family: var(--primary-font);
+  /* font-family: var(--primary-font); */
   font-size: 20px;
   font-weight: 700;
   height: 32px;
@@ -4779,33 +5455,38 @@ input.text {
   padding-left: 8px;
   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;
   border-radius: 5px;
   outline-style: none;
 }
+
 input.username {
   width: 300px;
 }
+
 input.fullname {
   width: 450px;
 }
+
 input.email {
   width: 400px;
 }
+
 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"] {
-  font-family: var(--primary-font);
+
+div.netskrafl-container button[type="submit"] {
   font-size: 20px;
   font-weight: 400;
   height: 40px;
@@ -4825,20 +5506,25 @@ 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 {
   background-color: var(--light-background);
   color: white;
@@ -4849,10 +5535,12 @@ div.toggler {
   overflow: hidden;
   border: white solid 3px;
 }
+
 div.toggler:focus, div.toggler:hover {
   outline-style: none;
   border: var(--focus-border) solid 3px;
 }
+
 div.toggler div.option {
   display: inline-block;
   width: 46px;
@@ -4864,6 +5552,7 @@ div.toggler div.option {
   text-align: center;
   border-style: none;
 }
+
 div.toggler div.option.small {
   width: 36px;
   height: 24px;
@@ -4872,69 +5561,83 @@ div.toggler div.option.small {
   padding-top: 3px;
   padding-bottom: 2px;
 }
+
 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;
 }
+
 div.toggler div.option.selected {
-  background-color: var(--triple-letter-color);
-}
-div#fairplay-toggler div.option.selected {
-  background-color: var(--ok-button);
+  background-color: var(--option-selected);
 }
-div#fairplay-toggler span.glyphicon-edit {
-  top: 0;
+
+div.toggler span.glyphicon {
+  display: inline-block;
+  top: 1px;
 }
+
 div #radioset {
   padding-top: 6px;
   padding-bottom: 24px;
 }
+
 div.disabled {
   background-color: var(--board-background);
 }
+
 a.nodecorate:link {
   text-decoration: none;
   color: black;
 }
+
 a.nodecorate:visited {
   text-decoration: none;
   color: black;
 }
+
 a.nodecorate:hover {
   text-decoration: none;
-  color: var(--triple-letter-color);
+  color: var(--pass-button);
 }
+
 a.iconlink:link {
   text-decoration: none;
-  color: var(--triple-letter-color);
+  color: var(--header-color);
 }
+
 a.iconlink:visited {
   text-decoration: none;
-  color: var(--triple-letter-color);
+  color: var(--header-color);
 }
+
 a.iconlink:hover {
   text-decoration: none;
-  color: var(--triple-word-color);
+  color: var(--pass-button);
 }
+
 a.backlink:link {
   text-decoration: none;
   color: var(--board-background);
 }
+
 a.backlink:visited {
   text-decoration: none;
   color: var(--board-background);
 }
+
 a.backlink:hover {
   text-decoration: none;
-  color: var(--triple-word-color);
+  color: var(--pass-button);
 }
+
 div#tabs-1 p {
   line-height: 1.6em;
 }
+
 div#tabs-1 p img,
 div#tabs-3 p img {
   margin-left: 3px;
@@ -4942,33 +5645,40 @@ div#tabs-3 p img {
   vertical-align: -3px;
   display: inline;
 }
+
 div#tabs-3 p,
 div#tabs-3 ol li,
 div#tabs-3 ol p,
 div#tabs-3 ol ul li {
   line-height: 1.65em;
 }
+
 div#tabs-3 ol {
   list-style-type: decimal;
   margin: auto;
   padding-inline-start: 40px;
 }
+
 div#tabs-3 li {
   display: list-item;
   margin: auto;
   padding: auto;
 }
+
 div.help-container ol li {
   font-weight: bold;
 }
+
 div.help-container ul li {
   font-weight: normal;
   list-style-type: disc;
 }
+
 div.help-container table {
   border-spacing: 0;
   border-collapse: collapse;
 }
+
 div.help-container td {
   margin: 0;
   padding: 4px;
@@ -4979,27 +5689,33 @@ div.help-container td {
   border-style: solid;
   width: 80px;
 }
+
 div.help-container td.row-caption {
   text-align: left;
   font-weight: bold;
   width: 120px;
 }
+
 div.help-container span.glyphicon-hourglass {
   color: var(--cancel-button);
 }
+
 div.help-container p {
   font-weight: normal;
 }
+
 div.help-container img.browserlogo {
   height: 28px;
   width: auto;
   object-fit: scale-down;
   margin-right: 8px;
 }
+
 div.help-container b.vcenter {
   position: relative;
   top: -8px;
 }
+
 div.twolist {
   -webkit-column-count: 2;
   -moz-column-count: 2;
@@ -5008,27 +5724,33 @@ div.twolist {
   line-height: 30px;
   padding-bottom: 12px;
 }
+
 span.twoword {
   font-weight: bold;
   padding-right: 3px;
 }
+
 span.errword {
   text-transform: uppercase;
 }
+
 div#emoticons-div {
   padding-bottom: 24px;
 }
+
 table#emoticons td {
   font-family: 'Courier', sans-serif;
   font-size: 20px;
   text-align: center;
 }
+
 img#villi {
   float: right;
   margin-left: 12px;
   margin-top: 18px;
   margin-bottom: 12px;
 }
+
 div.signup-header {
   position: absolute;
   top: 12px;
@@ -5159,7 +5881,7 @@ div.signup-header {
     height: 288px;
     /* 8 lines @ 36px each */
   }
-  div.chat,
+  div.chat-container,
   div.twoletter {
     height: 474px;
   }
@@ -5178,6 +5900,7 @@ div.signup-header {
 }
 
 /* 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 {
     /*
@@ -5259,6 +5982,9 @@ div.signup-header {
   div.rack-left div.recallbtn {
     display: none;
   }
+  div.force-resign {
+    display: none;
+  }
   div.scramblebtn {
     left: 376px;
     top: 158px;
@@ -5275,7 +6001,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;
@@ -5283,7 +6009,7 @@ div.signup-header {
     border-width: 0;
     color: white;
     left: 506px;
-    background-color: var(--triple-word-color);
+    background-color: var(--pass-button);
   }
   div.submitresign {
     top: 158px;
@@ -5369,7 +6095,7 @@ div.signup-header {
   }
   div.games,
   div.twoletter,
-  div.chat {
+  div.chat-container {
     display: none;
   }
   div.right-area {
@@ -5490,13 +6216,18 @@ div.signup-header {
   div.logo {
     display: block;
   }
+  div.netskrafl-logo {
+    /* Same size as Málstaður logo */
+    width: 40px;
+    height: 40px;
+  }
   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;
@@ -5559,17 +6290,17 @@ div.signup-header {
   div.right-area {
     display: block;
     top: 0;
-    margin-top: 12px;
+    margin-top: 6px;
     height: 420px;
   }
   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 +6474,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 {
@@ -5771,7 +6502,7 @@ div.signup-header {
     line-height: 46px;
     top: auto;
     bottom: 273px;
-    left: 643px;
+    left: 646px;
     border-radius: 5px;
   }
   div.score {
@@ -5782,9 +6513,9 @@ div.signup-header {
     line-height: 46px;
     top: auto;
     bottom: 211px;
-    left: 643px;
+    left: 646px;
     border-radius: 5px;
-    font-family: 'Open Sans', 'Arial', sans-serif;
+    font-family: var(--number-font);
   }
   .standard-button {
     position: absolute;
@@ -5799,28 +6530,6 @@ div.signup-header {
     border-radius: 5px;
     cursor: pointer;
   }
-  .submitbutton {
-    position: absolute;
-    top: 528px;
-    text-align: center;
-    font-size: 19px;
-    font-weight: 700;
-    color: white;
-    margin: 0;
-    padding: 6px;
-    padding-top: 9px;
-    border-radius: 5px;
-    cursor: pointer;
-    width: 78px;
-    height: 30px;
-    top: auto;
-    bottom: 136px;
-    left: 546px;
-    background-color: var(--ok-button);
-    font-size: 18px;
-    line-height: 24px;
-    font-weight: normal;
-  }
   div.submitnewgame {
     position: absolute;
     top: 528px;
@@ -5871,30 +6580,12 @@ div.signup-header {
   }
   div.waitmove {
     position: absolute;
-    top: 528px;
-    text-align: center;
-    font-size: 19px;
-    font-weight: 700;
-    color: white;
-    margin: 0;
-    padding: 6px;
-    padding-top: 9px;
-    border-radius: 5px;
-    cursor: pointer;
-    width: 78px;
-    height: 30px;
     top: auto;
     bottom: 136px;
     left: 546px;
-    background-color: var(--ok-button);
-    font-size: 18px;
-    line-height: 24px;
-    font-weight: normal;
+    width: 78px;
+    height: 30px;
     float: none;
-    border-style: solid;
-    border-width: 1px;
-    border-color: var(--ok-button);
-    background-color: white;
   }
   div.submitmove {
     position: absolute;
@@ -6051,8 +6742,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 {
@@ -6199,9 +6898,6 @@ div.signup-header {
   div.message {
     display: none;
   }
-  div.right-area.with-clock {
-    margin-top: 52px;
-  }
   div.right-area.with-clock div.movelist-container {
     /* If in a clock game, reduce the movelist height by two lines (2 * 20px) */
     height: 380px;
@@ -6211,7 +6907,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 +6980,7 @@ div.signup-header {
     border-radius: 0;
   }
   div.opp-turn {
+    display: block;
     position: absolute;
     text-align: center;
     bottom: 83px;
@@ -6294,7 +6991,6 @@ div.signup-header {
     line-height: 24px;
     padding: 4px 0 0;
     margin: 0;
-    display: block;
   }
   div#congrats {
     position: absolute;
@@ -6406,8 +7102,8 @@ div.signup-header {
     margin: 0;
   }
   input.chat-txt {
-    width: 218px;
-    height: 22px;
+    width: 234px;
+    height: 32px;
     font-size: 15px;
   }
   div.chat-area {
@@ -6415,19 +7111,18 @@ div.signup-header {
     width: 278px;
   }
   div.modal-close#chat-send {
-    height: 25px;
     bottom: 0;
   }
   span.statsbutton {
     display: inline;
     text-align: center;
-    background-color: white;
+    background-color: var(--header-color);
     font-size: 16px;
     font-weight: 700;
-    color: var(--triple-word-color);
+    color: white;
     margin-left: 4px;
     margin-right: 4px;
-    padding-top: 2px;
+    padding-top: 4px;
     padding-bottom: 4px;
     padding-left: 12px;
     padding-right: 12px;
@@ -6559,10 +7254,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;
   }
@@ -6648,10 +7345,6 @@ div.signup-header {
     height: 48px;
     background-size: 48px 48px;
   }
-  div.animated-spinner {
-    left: 472px;
-    top: 272px;
-  }
   div#promo-form {
     left: auto;
     top: 60px;
@@ -6827,7 +7520,7 @@ div.signup-header {
     line-height: 23px;
   }
   div.twoletter-area.with-clock {
-    font-size: 15px;
+    font-size: 14px;
     line-height: 24px;
     margin-top: 3px;
   }