@mideind/netskrafl-react 3.2.10 → 3.3.0

package/dist/esm/css/netskrafl.css

@@ -353,10 +353,12 @@ div.netskrafl-container {
     --cold: hsl(177, 58%, 68%);
     --cold-light: hsl(from var(--cold) h s 80%);
     --malfridur-green: #09814a;
+    --thermometer-label-color: var(--malfridur-green);
     --dark-bg-color: #222222;
     --light-shadow: #666666;
     --blank-tile: #999999;
     --middle-shadow: #cccccc;
+    --rack-empty-border: var(--middle-shadow);
     --container-bg-color: #fafafa;
     --light-header-color: #eaf5f7;
     --header-color: hsl(from var(--malfridur-accent) h 50% 60%);
@@ -364,6 +366,8 @@ div.netskrafl-container {
     --humangrad-color: hsl(from var(--malfridur-accent) h 55% 65%);
     --scorewrapper-background: var(--humangrad-color);
     --player-btn-color: white;
+    --tab-text-color: white;
+    --tab-active-text-color: black;
     --stats-foreground: hsl(from var(--malfridur-accent) h 45% 45%);
     --link-hover-color: #006db8;
     --iconlink-color: var(--malfridur-accent);
@@ -401,10 +405,17 @@ div.netskrafl-container {
     --rack-shadow: #afb7cad0;
     --focus-border: var(--triple-word-color);
     --light-background: #b9d9dc;
+    --info-icon-color: var(--light-background);
     --dialog-background-color: #fafafa;
+    --dialog-overlay-opacity: 50%;
+    --tilecount-background: white;
+    --chat-accent-color: var(--header-color);
+    --board-help-background: var(--board-background);
+    --button-background: var(--board-background);
     --oddlist-background: var(--board-background);
     --evenlist-background: #f7f0de;
     --toggler-background: #b9d9dc;
+    --toggler-border: white;
     --toggler-selected: var(--option-selected);
     --tab-movelist-background: var(--board-background);
     /* Move list gradients - none for default scheme */
@@ -413,11 +424,13 @@ div.netskrafl-container {
     --autoplayergrad-left: none;
     --autoplayergrad-right: none;
     --move-text-color: inherit;
+    --othermove-color: inherit;
     --total-background-color: transparent;
     --total-margin: 0px;
     --total-human-background: var(--human-color);
     --total-autoplayer-background: var(--autoplayer-color);
     --autoplayer-highlight-color: white;
+    --autoplayer-blank-tile: var(--double-word-color);
     --racktile-background: white;
     /* The following two variables are assumed to be defined
      by the container */
@@ -429,7 +442,7 @@ div.netskrafl-container {
     DARK THEME OVERRIDES
     ========================================================================== */
 
-[data-theme="dark"] .netskrafl-container {
+[data-theme="dark"] .netskrafl-container:not(.legacy-colors) {
     --text-color: var(--foreground);
     --color-border: var(--color-neutral-300);
     /* Brand/identity colors - brightened for dark backgrounds */
@@ -448,50 +461,75 @@ div.netskrafl-container {
     --cold: var(--color-gatadagsinsPalette-400);
     --cold-light: var(--color-gatadagsinsPalette-600);
     --malfridur-green: var(--color-success);
+    --thermometer-label-color: var(--color-primary-600);
 
     /* Dark backgrounds and surfaces */
     --dark-bg-color: var(--color-neutral-100);
     --container-bg-color: var(--background);
     --board-background: var(--color-neutral-200);
-    --dialog-background-color: var(--color-neutral-100);
-    --chat-background: var(--color-neutral-80);
+    --dialog-background-color: var(--color-neutral-300);
+    --dialog-overlay-opacity: 72%;
+    --tilecount-background: var(--color-neutral-400);
+    --chat-accent-color: var(--color-secondary-500);
+    --board-help-background: var(--board-background);
+    --button-background: var(--color-neutral-300);
+    --chat-background: color-mix(
+        in oklch,
+        var(--color-neutral-300) 70%,
+        var(--color-samheitiPalette-100)
+    );
     --light-background: var(--color-neutral-200);
+    --info-icon-color: var(--color-neutral-500);
     --light-header-color: var(--color-neutral-800);
-    --tab-background: var(--color-neutral-100);
+    --tab-background: color-mix(
+        in oklch,
+        var(--color-neutral-200) 50%,
+        var(--color-neutral-300)
+    );
     --rack-slot-background: var(--color-neutral-100);
-    --header-background: var(--color-neutral-200);
+    --header-background: color-mix(
+        in oklch,
+        var(--color-neutral-100) 50%,
+        var(--color-neutral-200)
+    );
     --oddlist-background: var(--board-background);
     --evenlist-background: var(--color-neutral-50);
-    --tab-movelist-background: var(--board-background);
-    --list-header-background: var(--color-neutral-80);
+    --tab-movelist-background: var(--color-neutral-300);
+    --list-header-background: var(--color-neutral-200);
     --toggler-background: var(--color-neutral-300);
+    --toggler-border: var(--color-neutral-500);
 
     /* Shadows, borders and neutral tones */
-    --light-shadow: var(--color-neutral-600);
-    --blank-tile: var(--color-neutral-500);
+    --light-shadow: var(--color-neutral-700);
+    --blank-tile: var(--color-neutral-600);
     --middle-shadow: var(--color-neutral-400);
+    --rack-empty-border: var(--color-neutral-300);
     --dark-shadow: rgba(0, 0, 0, 0.7);
     --rack-shadow: rgba(0, 0, 0, 0.5);
     --board-cell-border-color: var(--page-background);
     --focus-border: var(--color-malfridurPalette-400);
 
     /* Text, links and header colors - lightened for dark backgrounds */
-    --header-color: var(--color-secondary-400);
-    --header-hover-color: var(--color-secondary-700);
+    --header-color: var(--color-secondary-300);
+    --header-hover-color: var(--color-secondary-400);
     --humangrad-color: var(--color-secondary-500);
-    --scorewrapper-background: var(--humangrad-color);
+    --scorewrapper-background: var(--color-secondary-300);
     --player-btn-color: var(--color-neutral-900);
+    --tab-text-color: var(--foreground);
+    --tab-active-text-color: var(--foreground);
     --stats-foreground: var(--color-secondary-600);
     --link-hover-color: var(--color-info);
     --iconlink-color: var(--color-info);
     --move-text-color: var(--color-neutral-900);
+    --othermove-color: var(--text-color);
     --autoplayer-highlight-color: var(--color-neutral-950);
+    --autoplayer-blank-tile: var(--blank-tile);
 
     /* Board square colors - darker/richer tones for dark mode */
     --double-word-color: var(--color-malfridurPalette-100);
     --triple-word-color: var(--color-malfridurPalette-200);
-    --double-letter-color: var(--color-gatadagsinsPalette-200);
-    --triple-letter-color: var(--color-gatadagsinsPalette-400);
+    --double-letter-color: #085e5d;
+    --triple-letter-color: #0f918d;
 
     /* Button colors */
     --ok-button: var(--color-success);
@@ -501,18 +539,26 @@ div.netskrafl-container {
     /* Selection and player identity colors */
     --option-selected: var(--color-gatadagsinsPalette-200);
     --human-color: var(--color-gatadagsinsPalette-300);
-    --autoplayer-color: var(--color-samheitiPalette-400);
+    --autoplayer-color: var(--color-samheitiPalette-200);
     --toggler-selected: var(--color-primary-400);
     --header-green: var(--color-primary-500);
 
     /* Tile, list and tab backgrounds */
     --tile-background: #8d563f;
-    --tab-games-background: var(--tile-malfridurPalette-100);
+    --tab-games-background: color-mix(
+        in oklch,
+        var(--color-neutral-300) 70%,
+        var(--color-malfridurPalette-100)
+    );
     --rack-tile-background: var(--color-neutral-800);
     --stats-item-background: var(--board-background);
     --list-header-bottom: var(--color-malfridurPalette-200);
-    --two-letter-background: var(--color-primary-100);
-    --racktile-background: var(--color-neutral-300);
+    --two-letter-background: color-mix(
+        in oklch,
+        var(--color-neutral-300) 70%,
+        var(--color-primary-300)
+    );
+    --racktile-background: var(--color-neutral-400);
 
     /* Board geometry - unchanged */
     --board-cell-border-width: 1.5px;
@@ -627,6 +673,7 @@ div.netskrafl-container.legacy-colors {
 
     /* Dialog backgrounds remain white */
     --dialog-background-color: #fafafa;
+    --board-help-background: white;
 
     /* List backgrounds - theme2 and theme1 from skrafl-curry */
     --oddlist-background: #d8efe7;
@@ -669,7 +716,7 @@ div.netskrafl-container.legacy-colors {
     --total-margin: 2px;
     --total-human-background: #b5bdc4;
     --total-autoplayer-background: #b5bdc4;
-    --autoplayer-highlight-color: white;
+    --autoplayer-highlight-color: black;
     --racktile-background: var(--human-color);
 
     /* Button backgrounds for classic scheme - white text on colored background */
@@ -786,7 +833,6 @@ div.netskrafl-container.legacy-colors div.blank-rack {
 div.netskrafl-container.legacy-colors div.score {
         color: var(--board-background);
         border-style: solid;
-        border-width: 2px;
         border-color: var(--board-background);
     }
 
@@ -826,10 +872,6 @@ div.netskrafl-container.legacy-colors div.navbtn {
         background-color: var(--pass-button);
     }
 
-div.netskrafl-container.legacy-colors div.highlight0 {
-        background-color: var(--human-color);
-    }
-
 div.netskrafl-container.legacy-colors div.reviewhdr {
         background-color: var(--pass-button);
     }
@@ -946,6 +988,10 @@ div.netskrafl-container.legacy-colors div.help-tabs .ui-tabs-panel a:link,div.ne
         color: #2266aa;
     }
 
+div.netskrafl-container.legacy-colors table.bag-content tr td {
+        color: black;
+    }
+
 /* ==========================================================================
    BASE CONTAINER STYLES
    ========================================================================== */
@@ -1188,13 +1234,13 @@ div.netskrafl-container {
 .netskrafl-container .ui-state-default {
     background-color: var(--header-color);
     font-weight: bold;
-    color: var(--text-color);
+    color: var(--tab-text-color);
 }
 
 .netskrafl-container .ui-state-default a,
 .netskrafl-container .ui-state-default a:link,
 .netskrafl-container .ui-state-default a:visited {
-    color: var(--text-color);
+    color: var(--tab-text-color);
     text-decoration: none;
 }
 
@@ -1202,7 +1248,7 @@ div.netskrafl-container {
 .netskrafl-container .ui-state-focus {
     background-color: var(--header-hover-color);
     font-weight: bold;
-    color: var(--text-color);
+    color: var(--tab-text-color);
 }
 
 .netskrafl-container .ui-state-hover a,
@@ -1225,22 +1271,20 @@ div.netskrafl-container {
 .netskrafl-container .ui-widget-content .ui-state-active {
     background-color: var(--container-bg-color);
     font-weight: bold;
-    color: black;
-    /* white; */
+    color: var(--tab-active-text-color);
 }
 
 .netskrafl-container .ui-widget-header .ui-state-active {
     background-color: var(--container-bg-color);
     font-weight: bold;
-    color: black;
-    /* white; */
+    color: var(--tab-active-text-color);
 }
 
 .netskrafl-container .ui-state-active a,
 .netskrafl-container .ui-state-active a:link,
 .netskrafl-container .ui-state-active a:hover,
 .netskrafl-container .ui-state-active a:visited {
-    color: var(--text-color);
+    color: var(--tab-active-text-color);
     text-decoration: none;
 }
 
@@ -1811,9 +1855,19 @@ div.netskrafl-tile.dragging.no-drop {
     border-color: #c07359; /* Matches default --cancel-button */
 }
 
+[data-theme="dark"] div.netskrafl-tile.dragging {
+    color: oklch(86% 0.004 155.258);
+    background-color: oklch(42% 0.008 155.258);
+}
+
+[data-theme="dark"] div.netskrafl-tile.dragging.no-drop {
+    border-color: oklch(58% 0.13 25);
+}
+
 div.netskrafl-tile.dragging.legacy-colors {
     /* Legacy color scheme: hardcode values since CSS variables are out of
     scope when the tile is a child of the document body during dragging */
+    color: black;
     background-color: #fcce43; /* Matches legacy --rack-tile-background */
     border-color: #47ba96; /* Matches legacy --ok-button */
 }
@@ -1860,15 +1914,15 @@ div.netskrafl-tile.dragging.legacy-colors.no-drop {
 }
 
 .netskrafl-container tr.colid td {
-    height: 24px;
+    height: 14px;
     width: 32px;
     margin: 0;
     padding: 0;
     overflow: hidden;
     background-color: transparent;
     text-align: center;
-    font-size: 14px;
-    line-height: 14px;
+    font-size: 10px;
+    line-height: 10px;
     font-weight: 400;
     border-color: transparent;
     box-shadow: none;
@@ -2142,6 +2196,10 @@ div.netskrafl-tile.dragging div.letterscore {
     background-color: var(--malfridur-accent);
 }
 
+.netskrafl-container div.scramblebtn span.glyphicon {
+    top: 0;
+}
+
 .netskrafl-container div.rack-left div.recallbtn,
 .netskrafl-container div.rack-left div.scramblebtn {
     display: flex;
@@ -2185,7 +2243,7 @@ div.netskrafl-tile.dragging div.letterscore {
     cursor: pointer;
     position: absolute;
     top: 0;
-    background-color: var(--tab-background);
+    background-color: var(--button-background);
     border: 1.5px solid var(--header-background);
     width: 66px;
     height: 23px;
@@ -2219,6 +2277,13 @@ div.netskrafl-tile.dragging div.letterscore {
     border-color: var(--board-background);
 }
 
+.netskrafl-container div.submitresign.disabled,
+.netskrafl-container div.submitexchange.disabled,
+.netskrafl-container div.submitpass.disabled,
+.netskrafl-container div.challenge.disabled {
+    color: var(--middle-shadow);
+}
+
 .netskrafl-container div.submitmove {
     text-align: center;
     font-size: 18px;
@@ -2700,11 +2765,20 @@ div.netskrafl-tile.dragging div.letterscore {
     width: 100%;
     height: 100%;
     z-index: 10;
-    background-color: color-mix(in srgb, var(--container-bg-color) 50%, transparent);
+    outline: none;
+    background-color: color-mix(
+        in oklch,
+        var(--container-bg-color) var(--dialog-overlay-opacity),
+        transparent
+    );
 }
 
 .netskrafl-container div.modal-dialog#spinner-dialog {
-    background-color: color-mix(in srgb, var(--container-bg-color) 40%, transparent);
+    background-color: color-mix(
+        in oklch,
+        var(--container-bg-color) calc(var(--dialog-overlay-opacity) - 10%),
+        transparent
+    );
 }
 
 .netskrafl-container div.animated-spinner {
@@ -2913,6 +2987,7 @@ div.netskrafl-tile.dragging div.letterscore {
     padding-top: 8px;
     padding-left: 2px;
     text-align: left;
+    color: var(--text-color);
 }
 
 @keyframes oppTurnFlash {
@@ -3037,7 +3112,7 @@ div.netskrafl-tile.dragging div.letterscore {
     height: 32px;
     font-weight: normal;
     border-style: solid;
-    border-color: var(--header-color);
+    border-color: var(--chat-accent-color);
     border-width: 1px;
     border-radius: 3px;
     padding-top: 4px;
@@ -3047,7 +3122,7 @@ div.netskrafl-tile.dragging div.letterscore {
 }
 
 .netskrafl-container input.chat-txt:focus {
-    border-color: var(--header-color);
+    border-color: var(--chat-accent-color);
     border-width: 2px;
     padding-left: 5px;
     padding-right: 5px;
@@ -3075,7 +3150,7 @@ div.netskrafl-tile.dragging div.letterscore {
     margin: 0 0 2px 8px;
     padding-top: 4px;
     padding-bottom: 0;
-    background-color: var(--header-color);
+    background-color: var(--chat-accent-color);
     color: white;
 }
 
@@ -3272,7 +3347,7 @@ div.netskrafl-tile.dragging div.letterscore {
     width: 92px;
     min-width: 92px;
     text-align: left;
-    background-color: white;
+    background-color: var(--tilecount-background);
     border-radius: 6px;
     overflow: hidden;
 }
@@ -3811,27 +3886,27 @@ div.netskrafl-racktile {
 
 @keyframes selBlink {
     0% {
-        color: white;
+        /* color: var(--container-bg-color); */
         background-color: var(--cancel-button);
         border-color: var(--cancel-button);
     }
     45% {
-        color: white;
+        /* color: var(--container-bg-color); */
         background-color: var(--cancel-button);
         border-color: var(--cancel-button);
     }
     50% {
-        color: black;
-        background-color: white;
-        border-color: white;
+        /* color: var(--text-color); */
+        background-color: var(--container-bg-color);
+        border-color: var(--container-bg-color);
     }
     95% {
-        color: black;
-        background-color: white;
-        border-color: white;
+        /* color: var(--text-color); */
+        background-color: var(--container-bg-color);
+        border-color: var(--container-bg-color);
     }
     100% {
-        color: white;
+        /* color: var(--container-bg-color); */
         background-color: var(--cancel-button);
         border-color: var(--cancel-button);
     }
@@ -3977,7 +4052,7 @@ div.netskrafl-xchgsel {
 }
 
 div.netskrafl-freshtile {
-    color: var(--container-bg-color);
+    color: white;
     background-color: var(--autoplayer-color);
     opacity: 0;
     animation-name: fresh-appear;
@@ -3986,10 +4061,14 @@ div.netskrafl-freshtile {
     animation-fill-mode: forwards;
 }
 
+div.netskrafl-freshtile.netskrafl-blanktile {
+    color: var(--light-shadow);
+}
+
 .netskrafl-container div.highlight0 {
     /* Human (local) player */
     color: var(--text-color);
-    background-color: var(--container-bg-color);
+    background-color: var(--racktile-background);
 }
 
 .netskrafl-container div.highlight1 {
@@ -4005,7 +4084,7 @@ div.highlight0.netskrafl-blanktile {
 
 div.highlight1.netskrafl-blanktile {
     /* Computer (remote) player */
-    color: var(--double-word-color);
+    color: var(--autoplayer-blank-tile);
 }
 
 .netskrafl-container div.highlight0.dim {
@@ -4190,7 +4269,7 @@ div.highlight1.netskrafl-blanktile {
 .netskrafl-container div.chat-ts {
     clear: both;
     display: inline-block;
-    color: var(--dark-shadow);
+    color: var(--light-shadow);
     font-size: 12px;
     line-height: 12px;
     text-align: center;
@@ -4309,9 +4388,8 @@ div.highlight1.netskrafl-blanktile {
 }
 
 .netskrafl-container div.gamestats {
-    visibility: hidden;
     color: var(--text-color);
-    background-color: white;
+    background-color: var(--dialog-background-color);
     z-index: 20;
     position: absolute;
     width: 724px;
@@ -4477,6 +4555,7 @@ div.highlight1.netskrafl-blanktile {
     text-transform: none;
     padding-left: 3px;
     font-size: 15px;
+    color: var(--othermove-color);
 }
 
 .netskrafl-container div.reviewhdr span.othermove {
@@ -4639,7 +4718,7 @@ div.highlight1.netskrafl-blanktile {
     left: 22px;
     top: 160px;
     width: 54px;
-    background-color: var(--racktile-background);
+    background-color: var(--board-help-background);
     padding: 2px;
     border-radius: 5px;
     cursor: default;
@@ -4648,13 +4727,13 @@ div.highlight1.netskrafl-blanktile {
 .netskrafl-container div.board-help-close {
     width: 50px;
     text-align: right;
-    background-color: var(--racktile-background);
+    background-color: var(--board-help-background);
     margin: 2px;
 }
 
 .netskrafl-container div.board-help-close span {
     background-color: var(--cancel-button);
-    color: var(--racktile-background);
+    color: var(--board-help-background);
     padding: 1px;
     padding-top: 2px;
     padding-left: 2px;
@@ -4682,7 +4761,7 @@ div.highlight1.netskrafl-blanktile {
     margin-top: 2px;
     margin-bottom: 2px;
     font-weight: 400;
-    border: solid 2px var(--racktile-background);
+    border: solid 2px var(--board-help-background);
     border-collapse: collapse;
     border-radius: 5px;
 }
@@ -4712,6 +4791,7 @@ div.highlight1.netskrafl-blanktile {
 .netskrafl-container div.board-color#single-letter {
     background-color: var(--board-background);
     color: var(--text-color);
+    border-color: var(--rack-empty-border);
 }
 
 .netskrafl-container div.scorediff {
@@ -4750,7 +4830,7 @@ div.highlight1.netskrafl-blanktile {
     top: auto;
     width: 90px;
     height: 30px;
-    bottom: 136px;
+    bottom: 156px;
     line-height: 24px;
     background-color: var(--header-color);
 }
@@ -5358,7 +5438,7 @@ div.highlight1.netskrafl-blanktile {
 }
 
 .netskrafl-container span.glyphicon.glyphicon-lightbulb.grayed {
-    color: color-mix(in srgb, var(--text-color) 40%, transparent);
+    color: color-mix(in oklch, var(--text-color) 40%, transparent);
 }
 
 .netskrafl-container div.listheader span.glyphicon.glyphicon-star-empty,
@@ -5369,12 +5449,12 @@ div.highlight1.netskrafl-blanktile {
 .netskrafl-container #userlist span.glyphicon.glyphicon-star-empty,
 .netskrafl-container #userlist span.glyphicon.glyphicon-hand-right.grayed,
 .netskrafl-container #elolist span.glyphicon.glyphicon-hand-right.grayed {
-    color: color-mix(in srgb, var(--text-color) 35%, transparent);
+    color: color-mix(in oklch, var(--text-color) 35%, transparent);
 }
 
 .netskrafl-container span.glyphicon.glyphicon-hourglass.grayed,
 .netskrafl-container span.glyphicon.glyphicon-shopping-bag.grayed {
-    color: color-mix(in srgb, var(--text-color) 30%, transparent);
+    color: color-mix(in oklch, var(--text-color) 30%, transparent);
 }
 
 .netskrafl-container div.listheader span.glyphicon.glyphicon-bookmark.grayed,
@@ -5382,7 +5462,7 @@ div.highlight1.netskrafl-blanktile {
 .netskrafl-container #usr-recent span.glyphicon.glyphicon-bookmark.grayed,
 .netskrafl-container #gamelist span.glyphicon.glyphicon-bookmark.grayed,
 .netskrafl-container #gamelist span.glyphicon.glyphicon-hourglass.grayed {
-    color: color-mix(in srgb, var(--text-color) 26%, transparent);
+    color: color-mix(in oklch, var(--text-color) 26%, transparent);
 }
 
 .netskrafl-container #gamelist span.glyphicon.glyphicon-flag.zombie {
@@ -5526,14 +5606,14 @@ div.highlight1.netskrafl-blanktile {
 }
 
 .netskrafl-container span.vbar {
-    color: var(--light-background);
+    color: var(--info-icon-color);
     font-size: 2em;
     padding-left: 10px;
     padding-right: 10px;
 }
 
 .netskrafl-container h1.usr-info-icon {
-    color: var(--light-background);
+    color: var(--info-icon-color);
 }
 
 .netskrafl-container h1.usr-info-icon span.glyphicon-coffee-cup {
@@ -6058,13 +6138,13 @@ div.netskrafl-container input[type="checkbox"] {
 
 .netskrafl-container div.toggler {
     background-color: var(--toggler-background);
-    color: var(--color-background);
+    color: white;
     margin-top: 9px;
     margin-bottom: 3px;
     border-radius: 10px;
     cursor: pointer;
     overflow: hidden;
-    border: var(--color-background) solid 3px;
+    border: var(--toggler-border) solid 3px;
 }
 
 .netskrafl-container div.toggler:focus,
@@ -6814,7 +6894,7 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.info {
         display: block;
         position: absolute;
-        bottom: 52px;
+        bottom: 96px;
         top: auto;
         left: 26px;
         width: 50px;
@@ -6865,7 +6945,7 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.rightcol {
         position: absolute;
         width: 302px;
-        top: 38px;
+        top: 18px;
         right: 12px;
         height: auto;
         left: auto;
@@ -6892,11 +6972,36 @@ div.netskrafl-container input[type="checkbox"] {
         height: 746px;
         top: 0;
     }
+    .netskrafl-container div.rack-row {
+        display: block;
+        height: auto;
+        margin: 0;
+    }
+    .netskrafl-container div.rack {
+        position: absolute;
+        display: block;
+        width: auto;
+        float: none;
+        top: auto;
+        bottom: 152px;
+        left: 241px;
+        padding: 6px;
+        border-width: 0;
+        border-radius: 5px;
+        margin: 0;
+        background-color: var(--board-background);
+    }
+    .netskrafl-container div.rack-left {
+        display: none;
+    }
+    .netskrafl-container div.rack-right {
+        display: none;
+    }
     .netskrafl-container div.board {
         position: absolute;
         top: 0;
         padding-top: 0;
-        left: 93px;
+        left: 102px;
         width: auto;
         height: auto;
         margin: 0;
@@ -6935,7 +7040,6 @@ div.netskrafl-container input[type="checkbox"] {
         height: 34px;
     }
     div.netskrafl-tile {
-        color: var(--text-color);
         font-size: 24px;
         line-height: 25px;
         height: 28px;
@@ -7034,45 +7138,38 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container tr.colid {
         display: table-row;
     }
-    .netskrafl-container td.rowid {
+    .netskrafl-container table.board td.rowid {
         display: table-cell;
         overflow: hidden;
-        font-size: 14px;
-        line-height: 14px;
-        text-align: center;
+        font-size: 10px;
+        line-height: 10px;
+        text-align: right;
+        padding-right: 4px;
         font-weight: 400;
+        width: 22px;
+        min-width: 22px;
+        max-width: 22px;
+        height: auto;
+        min-height: auto;
+        max-height: none;
         background-color: transparent;
         border-color: transparent;
         box-shadow: none;
     }
-    .netskrafl-container div.bag {
-        display: block;
-        bottom: 32px;
+    .netskrafl-container table.board tr.colid {
+        height: 14px;
     }
-    .netskrafl-container div.rack-row {
-        display: block;
-        height: auto;
-        margin: 0;
-    }
-    .netskrafl-container div.rack {
-        position: absolute;
-        display: block;
+    .netskrafl-container table.board tr.colid td {
+        height: 14px;
+        min-height: 14px;
+        max-height: 14px;
         width: auto;
-        float: none;
-        top: auto;
-        bottom: 132px;
-        left: 241px;
-        padding: 6px;
-        border-width: 0;
-        border-radius: 5px;
-        margin: 0;
-        background-color: var(--board-background);
-    }
-    .netskrafl-container div.rack-left {
-        display: none;
+        min-width: auto;
+        max-width: none;
     }
-    .netskrafl-container div.rack-right {
-        display: none;
+    .netskrafl-container div.bag {
+        display: block;
+        bottom: 52px;
     }
     .netskrafl-container div.rack td {
         /* Match tr height of 34px for consistent sizing */
@@ -7094,7 +7191,7 @@ div.netskrafl-container input[type="checkbox"] {
         background-color: var(--autoplayer-color);
     }
     .netskrafl-container div.rack td:empty {
-        border-color: var(--middle-shadow);
+        border-color: var(--rack-empty-border);
         background-color: var(--rack-slot-background);
         border-width: 2px;
         box-shadow: none;
@@ -7122,9 +7219,10 @@ div.netskrafl-container input[type="checkbox"] {
         font-size: 26px;
         line-height: 46px;
         top: auto;
-        bottom: 273px;
+        bottom: 293px;
         left: 646px;
         border-radius: 5px;
+        border-width: 2px;
     }
     .netskrafl-container div.score {
         display: block;
@@ -7133,9 +7231,10 @@ div.netskrafl-container input[type="checkbox"] {
         font-size: 24px;
         line-height: 46px;
         top: auto;
-        bottom: 211px;
+        bottom: 231px;
         left: 646px;
         border-radius: 5px;
+        border-width: 2px;
         font-family: var(--number-font);
     }
     .netskrafl-container .standard-button {
@@ -7162,7 +7261,7 @@ div.netskrafl-container input[type="checkbox"] {
         cursor: pointer;
         width: 78px;
         height: 30px;
-        bottom: 136px;
+        bottom: 156px;
         left: 546px;
         background-color: var(--ok-button);
         font-size: 18px;
@@ -7181,7 +7280,7 @@ div.netskrafl-container input[type="checkbox"] {
         cursor: pointer;
         width: 78px;
         top: auto;
-        bottom: 136px;
+        bottom: 156px;
         background-color: var(--ok-button);
         font-size: 18px;
         line-height: 24px;
@@ -7193,7 +7292,7 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.waitmove {
         position: absolute;
         top: auto;
-        bottom: 136px;
+        bottom: 156px;
         left: 546px;
         width: 78px;
         height: 30px;
@@ -7211,7 +7310,7 @@ div.netskrafl-container input[type="checkbox"] {
         width: 78px;
         height: 30px;
         top: auto;
-        bottom: 136px;
+        bottom: 156px;
         left: 546px;
         background-color: var(--ok-button);
         font-size: 18px;
@@ -7235,13 +7334,13 @@ div.netskrafl-container input[type="checkbox"] {
         display: block;
         position: absolute;
         top: auto;
-        bottom: 136px;
+        bottom: 156px;
     }
     .netskrafl-container div.submitresign {
         display: block;
         position: absolute;
         top: auto;
-        bottom: 136px;
+        bottom: 156px;
         font-size: 22px;
         width: 40px;
         height: 30px;
@@ -7254,7 +7353,7 @@ div.netskrafl-container input[type="checkbox"] {
         display: block;
         position: absolute;
         top: auto;
-        bottom: 136px;
+        bottom: 156px;
         font-size: 22px;
         width: 40px;
         height: 30px;
@@ -7267,7 +7366,7 @@ div.netskrafl-container input[type="checkbox"] {
         display: flex;
         position: absolute;
         top: auto;
-        bottom: 136px;
+        bottom: 156px;
         background-color: var(--triple-word-color);
         font-size: 22px;
         width: 52px;
@@ -7279,7 +7378,7 @@ div.netskrafl-container input[type="checkbox"] {
         display: flex;
         position: absolute;
         top: auto;
-        bottom: 136px;
+        bottom: 156px;
         font-size: 22px;
         width: 52px;
         height: 45px;
@@ -7289,7 +7388,7 @@ div.netskrafl-container input[type="checkbox"] {
         display: block;
         position: absolute;
         top: auto;
-        bottom: 136px;
+        bottom: 156px;
         font-size: 22px;
         width: 40px;
         height: 30px;
@@ -7308,7 +7407,7 @@ div.netskrafl-container input[type="checkbox"] {
         cursor: pointer;
         width: 78px;
         top: auto;
-        bottom: 136px;
+        bottom: 156px;
         font-size: 18px;
         line-height: 24px;
         font-weight: normal;
@@ -7554,7 +7653,7 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container .bottom-message {
         position: absolute;
         text-align: center;
-        bottom: 83px;
+        bottom: 104px;
         left: 84px;
         width: 596px;
         height: 28px;
@@ -7566,7 +7665,7 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container .bold-bottom-message {
         position: absolute;
         text-align: center;
-        bottom: 83px;
+        bottom: 104px;
         left: 84px;
         width: 596px;
         height: 28px;
@@ -7580,7 +7679,7 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.error {
         position: absolute;
         text-align: center;
-        bottom: 83px;
+        bottom: 104px;
         left: 84px;
         width: 596px;
         height: 28px;
@@ -7595,7 +7694,7 @@ div.netskrafl-container input[type="checkbox"] {
         display: block;
         position: absolute;
         text-align: center;
-        bottom: 83px;
+        bottom: 104px;
         left: 84px;
         width: 596px;
         height: 28px;
@@ -7607,7 +7706,7 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div#congrats {
         position: absolute;
         text-align: center;
-        bottom: 83px;
+        bottom: 104px;
         left: 84px;
         width: 596px;
         height: 28px;
@@ -7620,7 +7719,7 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.resign {
         position: absolute;
         text-align: center;
-        bottom: 83px;
+        bottom: 104px;
         left: 84px;
         width: 596px;
         height: 28px;
@@ -7634,7 +7733,7 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.pass {
         position: absolute;
         text-align: center;
-        bottom: 83px;
+        bottom: 104px;
         left: 84px;
         width: 596px;
         height: 28px;
@@ -7648,7 +7747,7 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.pass-last {
         position: absolute;
         text-align: center;
-        bottom: 83px;
+        bottom: 104px;
         left: 84px;
         width: 596px;
         height: 28px;
@@ -7662,7 +7761,7 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.chall {
         position: absolute;
         text-align: center;
-        bottom: 83px;
+        bottom: 104px;
         left: 84px;
         width: 596px;
         height: 28px;
@@ -7676,7 +7775,7 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.chall-info {
         position: absolute;
         text-align: center;
-        bottom: 83px;
+        bottom: 104px;
         left: 84px;
         width: 596px;
         height: 28px;
@@ -7690,7 +7789,7 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.exchange {
         position: absolute;
         text-align: center;
-        bottom: 83px;
+        bottom: 104px;
         left: 84px;
         width: 596px;
         height: 28px;
@@ -7704,7 +7803,7 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.gameinfo {
         position: absolute;
         text-align: center;
-        bottom: 83px;
+        bottom: 104px;
         left: 84px;
         width: 596px;
         height: 28px;
@@ -7926,13 +8025,13 @@ div.netskrafl-container input[type="checkbox"] {
         display: block;
         position: absolute;
         left: 10px;
-        top: 440px;
+        top: 420px;
     }
     .netskrafl-container div#timed-toggler {
         display: block;
         position: absolute;
         left: 10px;
-        top: 490px;
+        top: 470px;
     }
     .netskrafl-container span.caption.wide {
         width: 264px;
@@ -8028,6 +8127,10 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.over {
         outline: var(--focus-border) solid 3px;
     }
+    .netskrafl-container div#board-background.over,
+    .netskrafl-container div#gatadagsins-background.over {
+        outline: none;
+    }
     .netskrafl-container span.over {
         outline: var(--focus-border) solid 3px;
     }
@@ -8507,7 +8610,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
 }
 
 .netskrafl-container .date-navigator .nav-arrow.disabled {
-    color: #ccc;
+    color: var(--middle-shadow);
     cursor: default;
     pointer-events: none;
     background-color: transparent;
@@ -8636,7 +8739,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     margin-top: 8px;
     margin-left: 0;
     font-size: 12px;
-    color: var(--malfridur-green);
+    color: var(--thermometer-label-color);
     font-style: italic;
     font-family: var(--primary-font);
     transition: color 1s ease;
@@ -8938,7 +9041,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
 .netskrafl-container .mobile-status-label {
     font-size: 11px;
     font-family: var(--primary-font);
-    color: #666;
+    color: var(--thermometer-label-color);
     text-align: center;
     white-space: nowrap;
 }
@@ -9436,7 +9539,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
 .netskrafl-container .stat-label {
     flex: 0 1 auto;
     font-size: 13px;
-    color: var(--color-neutral-600);
+    color: var(--light-shadow);
     font-family: var(--primary-font);
     text-align: left;
     white-space: nowrap;
@@ -9480,7 +9583,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
 
 .netskrafl-container .stats-settings .settings-label {
     font-size: 13px;
-    color: #666;
+    color: var(--light-shadow);
     font-family: var(--primary-font);
 }
 
@@ -9550,7 +9653,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
 
 .netskrafl-container .leaderboard-entry.current-user {
     background-color: color-mix(
-        in srgb,
+        in oklch,
         var(--double-word-color) 40%,
         transparent
     );
@@ -9917,7 +10020,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
 }
 
 .netskrafl-container .share-popup-btn.primary:hover {
-    background-color: color-mix(in srgb, var(--malfridur-green) 85%, black);
+    background-color: color-mix(in oklch, var(--malfridur-green) 85%, black);
     transform: scale(1.02);
 }
 
@@ -9927,7 +10030,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
 }
 
 .netskrafl-container .share-popup-btn.secondary:hover {
-    background-color: color-mix(in srgb, var(--malfridur-accent) 85%, black);
+    background-color: color-mix(in oklch, var(--malfridur-accent) 85%, black);
     transform: scale(1.02);
 }
 
@@ -10010,7 +10113,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     .netskrafl-container div.gatadagsins-container {
         /* Dynamic viewport height minus header, adapts to browser chrome */
         height: 100%;
-        max-height: 686px; /* Cap on large screens */
+        max-height: 654px; /* Cap on large screens */
     }
 
     .netskrafl-container div.gatadagsins-board-rack-wrapper {
@@ -10022,8 +10125,8 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     }
 
     .netskrafl-container div.gatadagsins-container div.board {
-        /* 16 x 34 pixels, i.e. 15 rows/columns plus row/column id */
-        height: 544px;
+        /* 15 x 34 pixels, i.e. 15 rows/columns, plus 24px column id */
+        height: 534px;
         width: 544px;
     }
 
@@ -10122,7 +10225,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     }
 
     .netskrafl-container div.gatadagsins-rack-area {
-        flex: 0 0 104px;
+        flex: 0 0 84px;
         /* Push left to compensate for row ids
        on the left side of the board */
         padding-left: 36px;
@@ -10174,11 +10277,6 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
         margin-right: 5px;
     }
 
-    .netskrafl-container div.info {
-        bottom: 72px;
-    }
-
-    /* Desktop share popup adjustments */
     .netskrafl-container .modal-dialog.share-popup {
         max-width: 400px;
     }