/* Sudoku (E113) */
.hero-sudoku { display: flex; gap: 8px; justify-content: center; font-size: 40px; font-weight: 800; }
.hero-sudoku span { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 12px;
    background: var(--panel); border: 1px solid var(--panel-border); color: var(--accent); }

.su-kopf { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 2px 0 10px; font-size: 14px; color: var(--muted); }
.su-uhr { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }

/* Brett: so groß, wie Breite UND Höhe erlauben (S15, Sicht-Wächter E111) */
.su-brett {
    --kante: clamp(270px, min(100%, calc(100dvh - 330px)), 560px);
    width: var(--kante); aspect-ratio: 1; margin: 0 auto;
    display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr);
    border: 2px solid rgba(255, 255, 255, .55); border-radius: 10px; overflow: hidden;
    background: rgba(255, 255, 255, .03); container-type: inline-size;
}
@media (min-width: 1100px) { .su-brett { --kante: clamp(320px, calc(100dvh - 300px), 620px); } }
.su-feld {
    all: unset; box-sizing: border-box; display: grid; place-items: center; cursor: pointer;
    border-right: 1px solid rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: 6cqi; font-weight: 600; color: #8fb4ff; font-variant-numeric: tabular-nums;
    min-width: 0; min-height: 0; position: relative;
}
.su-feld.rand-r { border-right: 2px solid rgba(255, 255, 255, .55); }
.su-feld.rand-u { border-bottom: 2px solid rgba(255, 255, 255, .55); }
.su-feld.vorgabe { color: var(--text); font-weight: 800; cursor: default; }
.su-feld.bezug { background: rgba(124, 92, 255, .10); }
.su-feld.gleich { background: rgba(124, 92, 255, .28); }
.su-feld.gewaehlt { background: rgba(124, 92, 255, .45); }
.su-feld:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.su-loesung { color: #ff8a8d; opacity: .8; }
.su-notizen { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 100%; padding: 2px; }
.su-notizen i { font-style: normal; font-size: 2.2cqi; line-height: 1; display: grid; place-items: center; color: var(--muted); font-weight: 500; }

.su-brett.wackeln { animation: su-wackeln .35s ease; }
@keyframes su-wackeln { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .su-brett.wackeln { animation: none; } }

.su-pad { width: var(--pad, min(560px, 100%)); margin: 12px auto 0; }
.su-pad[hidden] { display: none; }
.su-ziffern { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
.su-z { min-height: 52px; padding: 0; font-size: 22px; font-weight: 700; display: grid; place-items: center; position: relative; }
.su-z small { position: absolute; right: 5px; bottom: 3px; font-size: 10px; color: var(--muted); font-weight: 500; }
.su-z.voll { opacity: .35; }
.su-werkzeug { display: flex; gap: 8px; margin-top: 8px; }
.su-werkzeug .btn { flex: 1; min-height: 44px; }

.su-tabelle { display: grid; gap: 6px; margin: 12px 0; text-align: left; }
.su-zeile { display: grid; grid-template-columns: 2.2em 1fr auto auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--panel); }
.su-zeile span:last-child { color: var(--muted); font-size: 12.5px; }

/* Am Rechner: Ziffernblock als 3×3-Tastenfeld in der Seitenspalte */
@media (min-width: 1100px) {
    .mit-seite .su-brett { --kante: clamp(320px, calc(100dvh - 280px), 680px); }
    .spiel-seite .su-pad { margin-top: 40px; }
    .spiel-seite .su-ziffern { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .spiel-seite .su-z { min-height: 64px; font-size: 26px; }
    .spiel-seite .su-werkzeug { flex-direction: column; }
}