/* Solitär (E113) */
.hero-sol { display: flex; gap: 8px; justify-content: center; }
.hero-sol span { width: 52px; height: 72px; display: grid; place-items: center; border-radius: 8px; background: #f8fafc;
    font-size: 22px; font-weight: 800; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.hero-sol .s { color: #111827; } .hero-sol .r { color: #dc2626; }
.hero-sol span:nth-child(2) { transform: translateY(-6px); }

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

/* Kartengröße aus der Spaltenzahl: so breit, wie es geht (S15) */
.so-tisch {
    --lueck: clamp(3px, 1vw, 10px);
    --kw: min(calc((100cqi - (var(--spalten) - 1) * var(--lueck)) / var(--spalten)), 96px);
    --kh: calc(var(--kw) * 1.4);
    width: min(100%, 860px); margin: 0 auto; container-type: inline-size;
}
.so-oben { display: grid; grid-template-columns: repeat(var(--spalten), var(--kw)); gap: var(--lueck); margin-bottom: 14px; justify-content: center; }
.so-spalten { display: grid; grid-template-columns: repeat(var(--spalten), var(--kw)); gap: var(--lueck); justify-content: center; align-items: start; }

.so-platz { all: unset; box-sizing: border-box; width: var(--kw); height: var(--kh); border-radius: calc(var(--kw) * .1);
    border: 1.5px dashed rgba(255, 255, 255, .22); display: grid; place-items: center; position: relative; cursor: pointer; }
.so-platz.reihen { border-style: solid; font-size: calc(var(--kw) * .22); color: var(--muted); cursor: default; }
.so-platz.stapel.leer { color: var(--muted); font-size: calc(var(--kw) * .4); }
.so-ass { font-size: calc(var(--kw) * .45); opacity: .25; }
.so-luecke { width: var(--kw); }
.so-rueck { position: absolute; inset: 0; border-radius: inherit; display: grid; place-items: end center; padding-bottom: 6%;
    background: repeating-linear-gradient(45deg, #1d4ed8 0 6px, #1e40af 6px 12px); color: #fff; font-size: calc(var(--kw) * .2); font-weight: 700;
    border: 2px solid #f8fafc; }

/* Ablage bei „3 ziehen": fächern */
.so-platz.ablage { border: 0; cursor: default; }
.so-platz.ablage .so-hit { position: absolute; left: 0; top: 0; }
.so-platz.ablage.drei .so-hit { left: calc(var(--i) * var(--kw) * .22); }

.so-spalte { position: relative; min-height: var(--kh); height: calc(var(--kh) + (var(--n) - 1) * var(--kh) * .26);
    border-radius: calc(var(--kw) * .1); background: rgba(255, 255, 255, .03); cursor: pointer; }
.so-spalte > .so-karte.rueck, .so-spalte > .so-hit { position: absolute; left: 0; top: calc(var(--i) * var(--kh) * .26); }
.so-hit { all: unset; display: block; cursor: pointer; }
.so-hit.tot { cursor: default; }
.so-hit:focus-visible .so-karte { outline: 2px solid var(--accent); }

.so-karte { width: var(--kw); height: var(--kh); border-radius: calc(var(--kw) * .1); background: #f8fafc; position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .45); font-weight: 800; line-height: 1; user-select: none; -webkit-user-select: none; }
.so-karte.rueck { background: repeating-linear-gradient(45deg, #1d4ed8 0 6px, #1e40af 6px 12px); border: 2px solid #f8fafc; box-sizing: border-box; }
.so-karte.schwarz { color: #111827; } .so-karte.rot { color: #dc2626; }
.so-karte .w { position: absolute; left: 7%; top: 5%; font-size: calc(var(--kw) * .3); }
.so-karte .f { position: absolute; right: 7%; top: 5%; font-size: calc(var(--kw) * .26); }
.so-karte .gross { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); font-size: calc(var(--kw) * .5); }
.so-karte.gewaehlt { outline: 3px solid #fbbf24; outline-offset: -1px; transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .so-karte.gewaehlt { transform: none; } }

/* Seitenwerbung (Betreiber-Inhalt) */
.so-werbung { margin: 18px auto 0; max-width: 340px; padding: 14px; border-radius: 14px; background: #fefce8; color: #1f2937;
    border: 1px solid #fde68a; text-align: center; position: relative; }
.so-werbung[hidden] { display: none; }
.so-werbung img { max-width: 100%; border-radius: 8px; margin: 6px 0; }
.so-werbung b { display: block; font-size: 17px; margin: 4px 0; }
.so-werbung p { margin: 4px 0 10px; font-size: 13.5px; }
.so-werbung a { display: inline-block; padding: 8px 14px; border-radius: 999px; background: #16a34a; color: #fff; text-decoration: none; font-weight: 700; }
.so-w-label { position: absolute; top: 6px; right: 10px; font-size: 10.5px; color: #92400e; text-transform: uppercase; letter-spacing: .05em; }

.so-tabelle { display: grid; gap: 6px; margin: 12px 0; text-align: left; }
.so-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); }
.so-zeile span:last-child { color: var(--muted); font-size: 12.5px; }