/* Colour code (mirrors the original com_sudoku knacker):
   given (user-entered) = green tint + dark digit, solver-filled = blue tint. */
.tssd-knacker .tssd-game__cell.is-given   { background: rgba(0, 192, 0, 0.10); }
.tssd-knacker .tssd-game__cell.is-given   .tssd-game__val { color: #075d10; font-weight: 700; }
.tssd-knacker .tssd-game__cell.is-solution { background: rgba(0, 0, 192, 0.10); }
.tssd-knacker .tssd-game__cell.is-solution .tssd-game__val { color: #0033a0; font-weight: 700; }

.tssd-knacker .tssd-game__cell.is-hint { box-shadow: inset 0 0 0 3px var(--sd-gold); animation: tssd-knacker-hint 0.9s ease-out 1; }
.tssd-knacker .tssd-game__cell.is-hint-region { box-shadow: inset 0 0 0 2px rgba(240, 186, 55, 0.7); }
@keyframes tssd-knacker-hint { 0% { box-shadow: inset 0 0 0 6px #f0ba37; } 100% { box-shadow: inset 0 0 0 3px #f0ba37; } }

.tssd-knacker .tssd-game__cell.is-coordref { box-shadow: inset 0 0 0 3px #6b21a8; }

.tssd-knacker .tssd-game__cell.is-conflict,
.tssd-knacker .tssd-game__cell.is-given.is-conflict,
.tssd-knacker .tssd-game__cell.is-solution.is-conflict { background: #ffb3b3; }
.tssd-knacker .tssd-game__cell.is-conflict .tssd-game__val { color: #b30000; font-weight: 700; }

.tssd-knacker__steps { margin: 6px 2px 0; padding-left: 22px; font-size: 0.92em; color: #333; }
.tssd-knacker__steps:empty { display: none; }
.tssd-knacker__step { margin: 3px 0; line-height: 1.35; }

.tssd-knacker__step-tech { font-weight: 700; color: #8a6a00; cursor: help; }
.tssd-knacker__step-msg { color: #333; }

.tssd-knacker__stepshead {
	display: flex; align-items: center; justify-content: space-between;
	margin: 10px 2px 0; font-size: 0.85em; font-weight: 700; color: #555;
}
.tssd-knacker__orderbtn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; padding: 4px;
	border: 1px solid var(--sd-line); border-radius: var(--sd-radius-sm);
	background: var(--sd-white); cursor: pointer; color: var(--sd-muted);
}
.tssd-knacker__orderbtn:hover, .tssd-knacker__orderbtn:focus { background: var(--sd-surface-2); }
.tssd-knacker__orderbtn .tssd-knacker__icon { width: 18px; height: 18px; }

.tssd-knacker__coordref {
	border: 0; background: none; padding: 0 1px; margin: 0; cursor: pointer;
	font: inherit; border-radius: var(--sd-radius-sm);
}
.tssd-knacker__coordref:hover, .tssd-knacker__coordref:focus {
	background: rgba(240, 186, 55, 0.25); outline: none;
}

.tssd-knacker__status { margin: 8px 2px; }

/* Controls — icon + label. */
.tssd-knacker__controls { display: flex; gap: 10px; margin-top: 12px; align-items: stretch; }
.tssd-knacker__controls .tssd-knacker__btn { flex: 1 1 0; justify-content: center; }

.tssd-knacker__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	/* 44 px wie der Spiel-Knopf: kein Bedienelement unter 44 x 44 px, und Spiel und
	   Löser teilen EINEN Sekundär-Knopf. */
	min-height: 44px; padding: 8px 14px;
	border: 1px solid var(--sd-line); border-radius: var(--sd-radius);
	background: var(--sd-white); font-weight: var(--sd-btn-weight); cursor: pointer; line-height: 1.2;
}
.tssd-knacker__btn--primary {
	background: var(--sd-gold); border-color: var(--sd-gold-line); color: var(--sd-gold-ink);
}

.tssd-knacker__btn--primary:hover, .tssd-knacker__btn--primary:focus { background: var(--sd-gold-dark); color: var(--sd-gold-ink); }
.tssd-knacker__btn:hover, .tssd-knacker__btn:focus { background: var(--sd-surface-2); }
.tssd-knacker__icon { width: 22px; height: 22px; flex: 0 0 22px; }

/* Legend */
.tssd-knacker__legend {
	margin: 16px 0 4px; padding: 10px 12px;
	background: var(--sd-white); border: 1px solid var(--sd-line-cool); border-radius: var(--sd-radius);
	font-size: var(--sd-fs-sm); line-height: 1.5;
}
.tssd-knacker__legend-row { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.tssd-knacker__swatch { display: inline-block; width: 24px; height: 24px; border: 1px solid #888; flex: 0 0 24px; }
.tssd-knacker__swatch--empty    { background: #fff; }
.tssd-knacker__swatch--preset   { background: rgba(0, 192, 0, 0.10); }
.tssd-knacker__swatch--solution { background: rgba(0,   0, 192, 0.10); }
.tssd-knacker__legend-note { margin: 8px 0 0; font-size: var(--sd-fs-xs); color: var(--sd-muted); }

/* "Lösung per ID anzeigen" */
.tssd-knacker__byid {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	margin-top: 14px; padding-top: 12px; border-top: 1px solid #ddd;
}
.tssd-knacker__id { flex: 1 1 130px; min-width: 110px; padding: 5px 8px; border: 1px solid var(--sd-field-line); border-radius: var(--sd-radius-sm); }
.tssd-knacker__byid .tssd-knacker__btn { flex: 1 0 100%; justify-content: center; margin-top: 4px; }

.tssd-knacker__byid-btns { flex: 1 0 100%; display: flex; gap: 8px; margin-top: 4px; }
.tssd-knacker__byid-btns .tssd-knacker__btn { flex: 1 1 0; justify-content: center; margin-top: 0; }

.tssd-knacker__controls--secondary { margin-top: 8px; }
.tssd-knacker__controls--secondary .tssd-knacker__btn { font-size: 0.92em; }
.tssd-knacker__btn[aria-pressed="true"] { background: var(--sd-highlight); border-color: var(--sd-gold-line); }

.tssd-knacker__gridwrap { display: block; width: 100%; max-width: 540px; margin: 0 auto; }
/* When the coordinate frame is shown, widen the wrapper by the row-number gutter
   (18px) so the 9×9 board itself stays a constant 540px — exactly the Spielfeld
   size (operator P1) — instead of shrinking to make room for the labels. The
   knacker root carries `.tssd-game` (max-width:540px); lift that cap by the gutter
   when coords are on, otherwise the 540 cap would clamp the board back to 522. */
.tssd-knacker.tssd-knacker--coords { max-width: 558px; }
.tssd-knacker--coords .tssd-knacker__gridwrap { max-width: 558px; }
.tssd-knacker__gridline { display: flex; align-items: stretch; }
/* The grid takes the remaining width next to the (optional) row-number gutter and
   keeps its 1:1 ratio regardless of fill state. min-width:0 lets it shrink in flex. */
.tssd-knacker .tssd-knacker__gridline .tssd-game__grid { flex: 1 1 auto; min-width: 0; width: auto; aspect-ratio: 1 / 1; }
.tssd-knacker__coordrow--top { display: flex; }
.tssd-knacker__coordcol { display: flex; flex-direction: column; }
.tssd-knacker__coordlabel {
	display: none; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 700; flex: 1 1 0;
}

.tssd-knacker__coordlabel--r,
.tssd-knacker__coord-r { color: #b3245b; font-weight: 700; } /* Reihe = magenta/red */
.tssd-knacker__coordlabel--s,
.tssd-knacker__coord-s { color: #0033a0; font-weight: 700; } /* Spalte = blue */
.tssd-knacker__coordcorner { display: none; }
/* When coordinates are ON: reserve a fixed gutter for the numbers. */
.tssd-knacker--coords .tssd-knacker__coordlabel { display: flex; }
.tssd-knacker--coords .tssd-knacker__coordcorner { display: block; width: 18px; flex: 0 0 18px; }
.tssd-knacker--coords .tssd-knacker__coordrow--top .tssd-knacker__coordlabel { height: 16px; }
.tssd-knacker--coords .tssd-knacker__coordcol { width: 18px; flex: 0 0 18px; }

.tssd-knacker__helpmodal {
	position: fixed; inset: 0; z-index: 9999;
	background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center;
	padding: 16px;
}
.tssd-knacker__helppanel {
	background: var(--sd-white); border-radius: var(--sd-radius); max-width: 560px; width: 100%;
	max-height: 85vh; overflow: auto; padding: 18px 20px; box-shadow: var(--sd-shadow-lg);
}
.tssd-knacker__helppanel h3 { margin: 0 0 8px; }
.tssd-knacker__helplist { margin: 10px 0 16px; }
.tssd-knacker__helplist dt { font-weight: 700; color: #8a6a00; margin-top: 10px; }
.tssd-knacker__helplist dd { margin: 2px 0 0; line-height: 1.4; }