/* The board: linen in a wooden hoop, printed pattern, stitches, pins (see tafel.js, stick.js). */

.brett { display: block; max-width: 100%; }
.brett text { user-select: none; }

/* linen */
.leinen-grund { fill: var(--leinen); }
.leinen-schuss { fill: #EBE5D9; opacity: 0.8; }
.leinen-kette { fill: #CFC5B1; opacity: 0.55; }
.noppen { opacity: 0.55; }
.spannung { pointer-events: none; }

/* printed hex pattern in blue transfer ink, with the field numbers */
.vordruck polygon { fill: none; stroke: var(--druck); stroke-width: 1.1; stroke-opacity: 0.6; stroke-linejoin: round; }
.feld-flaeche { fill: transparent; }
.feld-nr { font-family: var(--f-zahl); font-size: 8.5px; fill: var(--druck); fill-opacity: 0.75; text-anchor: middle; }
.feld.offen .feld-nr { fill: var(--mech-garn); fill-opacity: 0.55; }

/* revealed fields: backstitched frame and the stitched name */
.feld-heft { fill: rgba(255, 252, 244, 0.38); stroke: var(--mech-garn); stroke-width: 1.2; stroke-dasharray: 4.2 2.6; stroke-opacity: 0.5; }
.feld-wort {
  font-family: var(--f-titel); font-stretch: 78%; font-weight: 700; font-size: 12.5px; letter-spacing: 0.01em;
  fill: var(--mech-garn); text-anchor: middle;
  paint-order: stroke; stroke: rgba(255, 255, 255, 0.45); stroke-width: 0.6;
}
.feld.sonder .feld-heft { stroke: var(--kreuz-rot); stroke-opacity: 0.7; stroke-dasharray: 2 2.2; stroke-width: 1.6; }
.feld.sonder .feld-wort { fill: var(--kreuz-dunkel); font-size: 13.5px; }

/* choosing a field: gold running stitch around the options; the chosen one in the player's thread */
.feld-wahl { fill: rgba(233, 203, 110, 0.22); stroke: #9C7414; stroke-width: 2.6; stroke-dasharray: 5 3.4; stroke-linecap: round; }
.feld.ist-fokus .feld-wahl { fill: rgba(233, 203, 110, 0.42); stroke-width: 3.6; stroke-dasharray: none; }
.feld-gewaehlt { fill: color-mix(in srgb, var(--garn) 14%, transparent); stroke: var(--garn); stroke-width: 2.6; stroke-dasharray: 6 3.4; stroke-linecap: round; }
.treffer-flaeche { fill: transparent; cursor: help; }
.treffer-flaeche.waehlbar { cursor: pointer; }
.treffer-flaeche:focus { outline: none; }

/* goals: cross stitch pictures */
.ziel-name { font-family: var(--f-titel); font-stretch: 80%; font-weight: 700; font-size: 11px; fill: var(--kreuz-rot); text-anchor: middle; }
.ziel-ring { fill: none; stroke: var(--garn); stroke-width: 2.6; stroke-dasharray: 5 3.6; stroke-linecap: round; }
.ziel-haken { fill: none; stroke: var(--mech-garn); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 5 2; }
.ziel.erreicht .kreuz { opacity: 0.55; }

/* threads: stem stitch in three layers */
.stich-grund { fill: none; stroke: var(--garn-dunkel); stroke-width: 5.6; stroke-linecap: round; }
.stich-garn { fill: none; stroke: var(--garn); stroke-width: 4; stroke-linecap: round; }
.stich-glanz { fill: none; stroke: var(--garn-hell); stroke-width: 1.2; stroke-linecap: round; opacity: 0.85; transform: translate(-0.7px, -0.9px); }
.stich-grund-f { fill: var(--garn-dunkel); }
.stich-garn-f { fill: var(--garn); }
.stich-glanz-f { fill: none; stroke: var(--garn-hell); stroke-width: 1.1; stroke-linecap: round; }
.spannstich .stich-grund { stroke-width: 5; }
.spannstich .stich-garn { stroke-width: 3.6; }
.einstich { fill: rgba(40, 30, 20, 0.55); }
.faden-name { font-family: var(--f-titel); font-weight: 800; font-size: 13px; fill: var(--garn-dunkel); paint-order: stroke; stroke: rgba(247, 244, 236, 0.8); stroke-width: 2.4; }

/* new stitches are drawn while the thread moves */
.faden-neu path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sticken var(--zug-ms, 120ms) linear forwards; }
@keyframes sticken { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .faden-neu path { animation: none; stroke-dashoffset: 0; } }

/* knot (tangled) and a thread that fell out of the frame */
.knoten-hof { fill: rgba(247, 244, 236, 0.75); }
.knoten-ring { fill: none; stroke: var(--rot); stroke-width: 1.6; stroke-dasharray: 3 2.4; }
.rand-faden { fill: none; stroke: var(--garn); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 7 3; }
.rand-kreuz { stroke: var(--rot); stroke-width: 2.4; stroke-linecap: round; }

/* needle at the thread end */
.nadel-garn { fill: none; stroke: var(--garn); stroke-width: 2.4; stroke-linecap: round; }
.nadel-koerper { stroke: #262B2F; stroke-width: 1; }
.nadel-oehr { fill: var(--leinen); stroke: #4A5157; stroke-width: 0.4; }
.nadel-hof { fill: none; stroke: var(--garn); stroke-width: 2.2; stroke-dasharray: 3 3; }

/* preview: basting stitch in the thread of the player at the turn, pins in word colours */
.geist-heft { fill: none; stroke: var(--garn); stroke-width: 2.4; stroke-dasharray: 9 6; stroke-linecap: round; opacity: 0.85; }
.geist-flug { fill: none; stroke: var(--garn); stroke-width: 2.6; stroke-dasharray: 14 6; stroke-linecap: round; opacity: 0.85; filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.3)); }
.geist-dreh { fill: none; stroke: var(--wa-eigen); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.geist-dreh.doppelt { stroke-width: 3.6; }
.geist-kreuz { stroke: var(--rot); stroke-width: 2.6; stroke-linecap: round; }
.geist-knoten { fill: rgba(179, 38, 30, 0.12); stroke: var(--rot); stroke-width: 2; stroke-dasharray: 3 2; }
.geist-ziel { fill: none; stroke: #9C7414; stroke-width: 3; stroke-dasharray: 4 3; }
.geist-achse { fill: none; stroke: var(--garn-dunkel); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 3; }
.nadel-schaft { stroke: #8D959B; stroke-width: 1.6; stroke-linecap: round; }
.stecknadel .kopf { stroke: rgba(0, 0, 0, 0.35); stroke-width: 1; fill: var(--wa-haupt); }
.stecknadel.zeit .kopf { fill: var(--wa-zeit); }
.stecknadel.eigen .kopf { fill: var(--wa-eigen); }
.stecknadel .kopf-licht { fill: #fff; opacity: 0.5; }
.stecknadel .kopf-zahl { font-family: var(--f-zahl); font-weight: 500; font-size: 10px; fill: #fff; text-anchor: middle; }
.stecknadel.landung .kopf-zahl { font-size: 12px; }
.glitzer-ring { fill: none; stroke: url(#metall); stroke-width: 2.6; }

/* the wooden hoop and its brass screw */
.reifen-holz { fill: none; stroke: url(#holz); }
.maser { fill: none; stroke: #8F6230; stroke-width: 0.8; opacity: 0.35; }
.maser.dunkel { stroke: #6E4518; opacity: 0.4; stroke-width: 1.1; }
.reifen-kante { fill: none; stroke: #6E4A22; stroke-width: 1.6; opacity: 0.8; }
.reifen-kante.innen { stroke: #5A3A18; stroke-width: 2.2; }
.reifen-fuge { fill: none; stroke: #6E4A22; stroke-width: 1.2; opacity: 0.55; }
.lasche { fill: #B98C52; stroke: #6E4A22; stroke-width: 1.2; }
.schraube-stift, .schraube-kopf { stroke: #5E4613; stroke-width: 1; }
.schraube-schlitz { stroke: #4D390E; stroke-width: 2; stroke-linecap: round; }

/* small effect glyphs (word marks, legend, rules) */
.glyph { display: inline-block; vertical-align: middle; flex: none; height: 14px; width: auto; overflow: visible; }
.g-schritt { fill: none; stroke: var(--wa-haupt); stroke-linecap: round; stroke-linejoin: round; }
.g-schritt.s1 { stroke-width: 3.2; }
.g-schritt.s2 { stroke-width: 1.8; }
.g-schritt.s3 { stroke-width: 1.8; stroke-dasharray: 2.2 2.4; }
.g-schritt.leer { stroke: currentColor; opacity: 0.25; stroke-width: 1.2; stroke-dasharray: none; }
.g-zick { fill: none; stroke: var(--wa-zeit); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.g-punkt { fill: var(--wa-zeit); }
.g-bogen { fill: none; stroke: var(--wa-eigen); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.g-spann { stroke: #9C7414; stroke-width: 2.6; stroke-linecap: round; }
.g-stern { fill: #C9A23C; stroke: #6E5510; stroke-width: 0.5; }
.g-knoten-pfad { fill: none; stroke: var(--rot); stroke-width: 2.2; stroke-linecap: round; }
.g-heft { stroke: currentColor; stroke-width: 2; stroke-dasharray: 4 3; }
.g-holz { stroke: #9C6E36; stroke-width: 4; }
.g-pin { fill: var(--wa-haupt); }
.g-pin-zahl { font-family: var(--f-zahl); font-size: 8px; fill: #fff; text-anchor: middle; }
.g-feld { fill: rgba(233, 203, 110, 0.3); stroke: #9C7414; stroke-width: 1.6; stroke-dasharray: 3 2; }
.g-wert { font-family: var(--f-zahl); font-size: 11px; fill: currentColor; text-anchor: middle; }