/* DOTFRAME.CSS - Nur Layout und Struktur */

/* Statische Fallbacks für vereinzelte .dot außerhalb eines .dot-frame
   (z. B. Deko-Punkte in Menü-Kacheln). */
:root {
    --cell-size: 45px;
    --dot-size: 32px;
    --gap-size: 3px;
}

/* Responsive Zellen: das Feld ist 10 Spalten breit und muss quer auf den Schirm
   passen → Zelle an min(Breite, Höhe) koppeln. Punkt (0.72) und Lücke (0.07)
   leiten sich aus der Zelle ab, damit das Punktbild bei JEDER Größe gleich
   aussieht. Obergrenzen = die bisherigen festen Maße. */
.dot-frame {
    --cell-size: clamp(18px, min(8.5vw, 9vh), 45px);
    --dot-size: calc(var(--cell-size) * 0.72);
    --gap-size: calc(var(--cell-size) * 0.07);
}

.dot-frame.small {
    --cell-size: clamp(14px, min(6vw, 6vh), 30px);
}

.dot-frame.large {
    --cell-size: clamp(22px, min(8.5vw, 11vh), 65px);
}

/* Fünferfeld: genau die HALBE Reihe des Zehnerfelds (1×5) — gleiche
   Zellen, gleiche Punkte, gleicher Rahmen, nur fünf Spalten. Der
   dicke 5er-Trenner entfällt, weil die fünfte Zelle hier schon der
   Rand ist. Genutzt, wo eine Menge in Fünfern gebündelt gezeigt wird
   (Mengenmemory: eine Reihe je begonnenem Fünfer). */
.dot-frame.v-5 {
    display: grid;
    grid-template-columns: repeat(5, var(--cell-size));
    grid-template-rows: repeat(1, var(--cell-size));
    width: fit-content;
    border: 1px solid #999;
    background-color: #fff;
    margin: 10px 0;
    transition: opacity 0.3s ease;
}

.dot-frame.v-10 {
    display: grid;
    grid-template-columns: repeat(10, var(--cell-size));
    grid-template-rows: repeat(1, var(--cell-size));
    width: fit-content;
    border: 1px solid #999;
    background-color: #fff;
    margin: 10px 0;
    transition: opacity 0.3s ease;
}

.dot-frame.v-20 {
    display: grid;
    grid-template-columns: repeat(10, var(--cell-size));
    grid-template-rows: repeat(2, var(--cell-size));
    width: fit-content;
    border: 1px solid #999;
    background-color: #fff;
    margin: 10px 0;
    transition: opacity 0.3s ease;
}

/* 5er-Trenner: dickerer Strich zwischen den beiden Reihen (nur v-20) */
.dot-frame.v-20 .dot-cell:nth-child(-n+10) {
    border-bottom: 2px solid #555;
}

/* 5er-Trenner: dickerer Strich vertikal nach Spalte 5.
   v-10 ist einreihig (1x10) → Strich nach Zelle 5.
   v-20 ist zweireihig (2x10) → Strich nach Zelle 5 und 15. */
.dot-frame.v-10 .dot-cell:nth-child(5),
.dot-frame.v-20 .dot-cell:nth-child(5),
.dot-frame.v-20 .dot-cell:nth-child(15) {
    border-right: 2px solid #555;
}

.dot-frame .dot-cell {
    width: var(--cell-size);
    height: var(--cell-size);
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
    transition: opacity 0.3s ease;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Maskierung: Untere Reihe ausgrauen (Zellen 11-20) */
.dot-frame.mask-bottom .dot-cell:nth-child(n+11) {
    opacity: 0.15;
    pointer-events: none;
}

/* Maskierung: Obere Reihe ausgrauen (Zellen 1-10) */
.dot-frame.mask-top .dot-cell:nth-child(-n+10) {
    opacity: 0.15;
    pointer-events: none;
}

/* Mini-Icon-Variante für Settings-Buttons: dasselbe echte .dot-frame-Element
   (gleiche Zellen, Punkte, 5er-Trennstriche aus den Regeln oben) — nur über
   `--cell-size` auf Button-Größe heruntergesetzt (cqw/cqh, Button ist
   `container-type: size`, siehe settingsmenu.css; bindender Wert ist IMMER
   die kleinere der beiden Button-Maße, `-14px` lässt nur einen kleinen Rand)
   und ohne den Standard-Außenabstand/Cursor des echten Feldes. Funktion ist
   bereits über `.frozen` (dotframe.js) deaktiviert. */
.dot-frame.icon-mini {
    --cell-size: min(calc((100cqw - 14px) / var(--icon-cols, 10)), calc((100cqh - 14px) / var(--icon-rows, 1)));
    margin: 0;
}

.dot-frame.icon-mini .dot-cell {
    cursor: default;
}