/* themes use css named colours only; the server sets data-theme from a
   cookie, and without one it is silber, or nachtschicht in dark mode */
:root {
  --page: white; --text: black; --link: blue; --visited: purple;
  --board: gray; --sq: silver; --tile: silver; --tile-fg: black;
  --hi: white; --lo: gray; --tw: crimson; --tw-fg: white; --dw: lightpink;
  --tl: royalblue; --tl-fg: white; --dl: lightskyblue;
  --mark: lemonchiffon; --error: crimson; --muted: gray;
  color-scheme: light;
  --pattern: repeating-conic-gradient(gainsboro 0 25%, white 0 50%) 0 0 / 8px 8px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --page: black; --text: gainsboro; --link: lightskyblue; --visited: plum;
    --board: black; --sq: dimgray; --tile: gainsboro; --tile-fg: black;
    --hi: white; --lo: gray; --tw: crimson; --tw-fg: white; --dw: indianred;
    --tl: royalblue; --tl-fg: white; --dl: steelblue;
    --mark: darkkhaki; --error: tomato; --muted: gray;
    color-scheme: dark;
    --pattern: radial-gradient(gray 1px, transparent 1.5px) 0 0 / 37px 37px, radial-gradient(dimgray 1px, transparent 1.5px) 13px 19px / 23px 23px, black;
}
}
:root[data-theme="nachtschicht"] {
  --page: black; --text: gainsboro; --link: lightskyblue; --visited: plum;
  --board: black; --sq: dimgray; --tile: gainsboro; --tile-fg: black;
  --hi: white; --lo: gray; --tw: crimson; --tw-fg: white; --dw: indianred;
  --tl: royalblue; --tl-fg: white; --dl: steelblue;
  --mark: darkkhaki; --error: tomato; --muted: gray;
  color-scheme: dark;
  --pattern: radial-gradient(gray 1px, transparent 1.5px) 0 0 / 37px 37px, radial-gradient(dimgray 1px, transparent 1.5px) 13px 19px / 23px 23px, black;
}
:root[data-theme="brettspiel"] {
  --page: ivory; --text: black; --link: darkgreen; --visited: saddlebrown;
  --board: peru; --sq: tan; --tile: burlywood; --tile-fg: black;
  --hi: wheat; --lo: saddlebrown; --tw: firebrick; --tw-fg: white; --dw: salmon;
  --tl: steelblue; --tl-fg: white; --dl: powderblue;
  --mark: khaki; --error: firebrick; --muted: gray;
  --pattern: repeating-conic-gradient(wheat 0 25%, ivory 0 50%) 0 0 / 24px 24px;
}
:root[data-theme="win95"] {
  --page: teal; --text: white; --link: yellow; --visited: khaki;
  --board: gray; --sq: silver; --tile: silver; --tile-fg: black;
  --hi: white; --lo: gray; --tw: maroon; --tw-fg: white; --dw: pink;
  --tl: navy; --tl-fg: white; --dl: lightblue;
  --mark: yellow; --error: yellow; --muted: silver;
  --pattern: teal;
}
:root[data-theme="lavendel"] {
  --page: lavender; --text: midnightblue; --link: slateblue; --visited: purple;
  --board: mediumpurple; --sq: thistle; --tile: ghostwhite; --tile-fg: midnightblue;
  --hi: white; --lo: mediumpurple; --tw: mediumvioletred; --tw-fg: white; --dw: plum;
  --tl: slateblue; --tl-fg: white; --dl: lightsteelblue;
  --mark: lemonchiffon; --error: mediumvioletred; --muted: slategray;
  --pattern: linear-gradient(135deg, thistle 25%, transparent 25%) -10px 0 / 20px 20px, linear-gradient(225deg, thistle 25%, transparent 25%) -10px 0 / 20px 20px, linear-gradient(315deg, thistle 25%, transparent 25%) 0 0 / 20px 20px, linear-gradient(45deg, thistle 25%, transparent 25%) 0 0 / 20px 20px, lavender;
}
/* the pattern shows in the margins; the column itself stays solid */
html { background: var(--pattern); min-height: 100%; }
body {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 16px 32px;
  background: var(--page);
  color: var(--text);
  font: 16px/1.35 "Times New Roman", Times, serif;
}
a { color: var(--link); }
a:visited { color: var(--visited); }
h1 { margin: 0.3em 0; }
h1 a, h1 a:visited { color: var(--text); text-decoration: none; }
h2 { font-size: 1.15em; margin: 0.6em 0 0.3em; }
mark { background: var(--mark); color: black; }
.error { color: var(--error); }
:focus-visible { outline: 1px dotted var(--text); outline-offset: 2px; }

button, input, select { font: 13px Verdana, Geneva, sans-serif; }
input, select { border: 2px inset; padding: 2px; }
label { display: block; margin-bottom: 8px; }
footer label, footer label input, footer label select { display: inline; margin: 0; }
label input, label select { display: block; margin-top: 2px; }
/* the one ornament: win95 bevels, raised until pressed */
button, .tile {
  border: 2px solid;
  border-color: var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  border-radius: 0;
  padding: 2px 10px;
  cursor: pointer;
}
button:active, button.active, .rack .tile.selected {
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
}
/* buttons stay silver in every theme, tiles take its colours */
button { --bevel-hi: white; --bevel-lo: gray; background: silver; color: black; }
.tile { --bevel-hi: var(--hi); --bevel-lo: var(--lo); background: var(--tile); color: var(--tile-fg); }

.scores { font-family: "Courier New", monospace; }
.board {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 1px;
  aspect-ratio: 1;
  background: var(--board);
  border: 2px solid;
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  container-type: inline-size;
}
.sq {
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1;
  background: var(--sq);
  color: black;
  font: bold 2.4cqi Verdana, Geneva, sans-serif;
  cursor: pointer;
}
.sq.tw { background: var(--tw); color: var(--tw-fg); }
.sq.dw { background: var(--dw); }
.sq.tl { background: var(--tl); color: var(--tl-fg); }
.sq.dl { background: var(--dl); }
.sq:has(.tile) .label { display: none; }
.tile {
  position: relative;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0;
  font: bold 3.8cqi Verdana, Geneva, sans-serif;
}
.tile sub { position: absolute; right: 6%; bottom: 0; font-size: 0.5em; font-weight: normal; }
.tile.blank { color: navy; }
.tile.pending, .rack .tile.marked { background: var(--mark); }
.tile.tentative { outline: 1px dotted black; outline-offset: -5px; }

.rack { display: flex; gap: 4px; min-height: 44px; margin: 12px 0 8px; }
.rack .tile { width: 44px; height: 44px; font-size: 20px; }
.rack .tile.used { visibility: hidden; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; }
.actions form { display: contents; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 600px) { .cols { grid-template-columns: 1fr; } }
.history { margin: 0 0 8px; }
.messages { max-height: 16em; overflow: auto; margin: 0 0 8px; }
.messages { list-style: none; padding: 0; }
.messages + form input { width: 100%; box-sizing: border-box; }
#preview { align-self: center; }
time { margin-right: 0.4em; color: var(--muted); font: 0.85em "Courier New", monospace; }
/* a table as it looked in 1997 */
.games { border: 2px outset silver; border-spacing: 2px; }
.games th, .games td { border: 1px inset silver; padding: 2px 6px; text-align: left; }
.games time { margin: 0; }
.ticker { display: block; margin: 0 0 6px; background: var(--mark); color: black; font: 0.9em "Courier New", monospace; }