/* =====================================================================
 * Der Chat im Spielmodus (Desktop) - die schmale Anordnung wie am Handy.
 *
 * Einmalig aus mobil.css abgeleitet: Dort steht der Chat, wenn er auf
 * 375 Pixel schrumpft, in der Anordnung Verlauf oben, Eingabe und
 * Knoepfe am Boden, Anwesende hinter einem Knopf. Im Spielmodus zieht
 * der Chat in die rechte Spalte (351 Pixel) und braucht dieselbe
 * Anordnung. Ab jetzt eigenstaendig - was am Handy geaendert wird,
 * aendert sich hier nicht mit (und umgekehrt).
 *
 * Alles haengt an `.chatraum.pk-kompakt`; ohne die Klasse greift keine
 * Regel. spielmodus.js setzt sie, wenn der Chat umzieht.
 * ===================================================================== */

.chatraum.pk-kompakt {
    width: 100% !important;
    min-height: 320px;
    transform: none !important;
    background-size: cover !important;
    background-position: center top !important;
    border-radius: 0.5rem;
}

.chatraum.pk-kompakt #ch_begruessung,
.chatraum.pk-kompakt #ch_textfeld1,
.chatraum.pk-kompakt #ch_textfeld2,
.chatraum.pk-kompakt #ch_hoererzahl,
.chatraum.pk-kompakt #ch_chatterzahl,
.chatraum.pk-kompakt #ch_uhr,
.chatraum.pk-kompakt #ch_runter,
.chatraum.pk-kompakt #ch_wetter,
.chatraum.pk-kompakt #ch_dimmer,
.chatraum.pk-kompakt #ch_chatgrund,
.chatraum.pk-kompakt #ch_overlay,
.chatraum.pk-kompakt #ch_videoebene,
.chatraum.pk-kompakt #ch_ton {
    display: none !important;
}

.chatraum.pk-kompakt #ch_verlauf {
    left: 6px !important;
    top: 6px !important;
    right: 6px !important;
    bottom: 106px !important;
    width: auto !important;
    height: auto !important;
    padding: 8px 8px 8px 8px !important;
    background: rgba(8, 16, 36, .74);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 14px rgba(0, 0, 0, .4);
    font-size: 14px;
    color: #fff;
}

.chatraum.pk-kompakt #ch_eingabe {
    left: 6px !important;
    right: 6px !important;
    top: auto !important;
    bottom: 60px !important;
    width: auto !important;
    height: 40px !important;
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
}

.chatraum.pk-kompakt #ch_feld {
    height: 40px !important;
    line-height: 40px;
    font-size: 16px !important;
    padding: 0 10px;
    color: #fff;
    width: 100%;
}

.chatraum.pk-kompakt #ch_leiste {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 54px;
    padding: 7px 6px;
    box-sizing: border-box;
    display: flex;
    gap: 5px;
    z-index: 4;
    background: linear-gradient(to top, #0b1730 0%, #16305c 100%);
    border-top: 1px solid rgba(255, 255, 255, .22);
    border-radius: 0 0 0.5rem 0.5rem;
}

.chatraum.pk-kompakt #ch_leiste .ch-flaeche,
.chatraum.pk-kompakt #ch_emojiknopf {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: 40px !important;
    flex: 1 1 0;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 10px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 2px 4px rgba(0, 0, 0, .35);
    color: #fff;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
    line-height: 38px;
    text-align: center;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.chatraum.pk-kompakt #ch_emojiknopf {
    background-image: none !important;
}

.chatraum.pk-kompakt #ch_leiste .ch-flaeche:active {
    background: rgba(38, 194, 247, .35) !important;
}

.chatraum.pk-kompakt #ch_leiste .ch-flaeche.ch-an {
    background: linear-gradient(to bottom, rgba(38, 194, 247, .65) 0%, rgba(38, 194, 247, .35) 100%) !important;
    border-color: rgba(38, 194, 247, .9);
}

.chatraum.pk-kompakt #ch_anmelden::before,
.chatraum.pk-kompakt #ch_farbe::before,
.chatraum.pk-kompakt #ch_groesser::before,
.chatraum.pk-kompakt #ch_kleiner::before {
    font-family: 'feather' !important;
    font-weight: normal;
    font-size: 20px;
}

.chatraum.pk-kompakt #ch_anmelden::before {
    content: "\e986";
}

.chatraum.pk-kompakt #ch_farbe::before {
    content: "\e956";
}

.chatraum.pk-kompakt #ch_fett::before {
    content: "B";
    font-family: Georgia, serif;
    font-size: 19px;
}

.chatraum.pk-kompakt #ch_kursiv::before {
    content: "I";
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 19px;
}

.chatraum.pk-kompakt #ch_groesser::before {
    content: "\ea05";
}

.chatraum.pk-kompakt #ch_kleiner::before {
    content: "\ea06";
}

.chatraum.pk-kompakt #ch_smileys::before {
    content: "\263A";
    font-size: 24px;
    line-height: 38px;
}

.chatraum.pk-kompakt #ch_emojiknopf::before {
    content: "\1F600";
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
    font-size: 22px;
}

.chatraum.pk-kompakt #ch_smileyfenster,
.chatraum.pk-kompakt #ch_emojifenster {
    left: 6px !important;
    right: 6px !important;
    top: auto !important;
    bottom: 106px !important;
    width: auto !important;
    height: 55% !important;
    max-height: 320px;
}

.chatraum.pk-kompakt #ch_emojianzeige {
    left: 0 !important;
    top: auto !important;
    bottom: 106px !important;
    width: 100% !important;
    height: 64px !important;
    padding-left: 0 !important;
}

.chatraum.pk-kompakt #ch_anwesende {
    display: none !important;
}

.chatraum.pk-kompakt.mob-anwesende-auf #ch_anwesende {
    display: block !important;
    left: 6px !important;
    top: 60px !important;
    right: 6px !important;
    bottom: 106px !important;
    width: auto !important;
    height: auto !important;
    background: rgba(8, 16, 36, .94);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 12px;
    padding: 6px !important;
    overflow-y: auto;
    z-index: 6;
    font-family: Verdana, Geneva, sans-serif;
    text-shadow: none;
}

.chatraum.pk-kompakt #ch_anwesende .ch-wer {
    height: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    white-space: nowrap;
}

.chatraum.pk-kompakt #ch_anwesende .ch-wer:last-child {
    border-bottom: 0;
}

.chatraum.pk-kompakt #ch_anwesende .ch-ausblenden {
    float: none;
    line-height: 0;
    flex: 0 0 auto;
}

.chatraum.pk-kompakt #ch_anwesende .ch-ausblenden img {
    width: 24px;
    height: 24px;
}

.chatraum.pk-kompakt #ch_anwesende .ch-name {
    display: block;
    margin-left: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 17px;
    line-height: 1.3;
}

.chatraum.pk-kompakt #ch_anwesende .ch-zeichen {
    width: 20px;
    height: 20px;
}

.chatraum.pk-kompakt #ch_anwesende .ch-sendet {
    width: 24px;
    height: 24px;
}

.chatraum.pk-kompakt .mob-anwesende {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 7;
    height: 40px;
    padding: 0 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .55);
    background: linear-gradient(to bottom, rgba(30, 60, 114, .95) 0%, rgba(18, 35, 67, .95) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .2);
    color: #fff;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    font-weight: bold;
    -webkit-tap-highlight-color: transparent;
}

.chatraum.pk-kompakt .mob-anwesende i {
    font-size: 20px;
}

.chatraum.pk-kompakt.mob-anwesende-auf .mob-anwesende {
    background: rgba(38, 194, 247, .6);
}

.chatraum.pk-kompakt #ch_verlauf {
    top: 60px !important;
}

.chatraum.pk-kompakt {
    background-image: url("/img/mobil/chat-hg.jpg") !important;
    background-color: #08111f !important;
    background-size: cover !important;
    background-position: center top !important;
}

.chatraum.pk-kompakt::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 62px;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(6, 12, 28, .92) 0%, rgba(6, 12, 28, .75) 70%, rgba(6, 12, 28, 0) 100%);
    pointer-events: none;
}

.chatraum.pk-kompakt::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 108px;
    z-index: 2;
    background: linear-gradient(to top, #0b1730 0%, #16305c 100%);
    border-top: 1px solid rgba(255, 255, 255, .22);
    border-radius: 0 0 0.5rem 0.5rem;
    pointer-events: none;
}

.chatraum.pk-kompakt #ch_leiste {
    background: transparent;
    border-top: 0;
}

.chatraum.pk-kompakt .mob-schriftzug {
    display: block;
    position: absolute;
    top: 14px;
    left: 60px;
    right: 110px;
    height: 36px;
    z-index: 7;
    text-align: center;
    pointer-events: none;
}

.chatraum.pk-kompakt .mob-schriftzug img {
    max-height: 36px;
    max-width: 100%;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
}

.chatraum.pk-kompakt #ch_smileyfenster,
.chatraum.pk-kompakt #ch_emojifenster {
    left: 6px !important;
    right: 6px !important;
    top: auto !important;
    bottom: 112px !important;
    width: auto !important;
    height: 62% !important;
    max-height: 420px;
    padding: 8px !important;
    background: linear-gradient(to bottom, #16305c 0%, #0b1730 100%) !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    border-radius: 14px !important;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .55);
    z-index: 30 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    overscroll-behavior: contain;
}

.chatraum.pk-kompakt .ch-fenster .ch-fensterkopf {
    margin: -8px -8px 8px;
    padding: 10px 14px;
    font-size: 16px;
    background: rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    border-radius: 14px 14px 0 0;
}

.chatraum.pk-kompakt .ch-fenster .ch-fensterzu {
    font-size: 28px;
    padding: 0 6px;
}

.chatraum.pk-kompakt .ch-fenster .ch-reiter {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 2px 2px 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.chatraum.pk-kompakt .ch-fenster .ch-reiter::-webkit-scrollbar {
    display: none;
}

.chatraum.pk-kompakt .ch-fenster .ch-reiter img {
    flex: 0 0 auto;
    width: 46px !important;
    height: 46px !important;
    object-fit: contain;
    padding: 7px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
}

.chatraum.pk-kompakt .ch-fenster .ch-reiter img.ch-an {
    background: linear-gradient(to bottom, rgba(38, 194, 247, .65) 0%, rgba(38, 194, 247, .35) 100%);
    border-color: rgba(38, 194, 247, .9);
}

.chatraum.pk-kompakt .ch-fenster .ch-inhalt {
    flex: 1 1 auto;
    min-height: 0;
    padding: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    text-align: left;
    line-height: 0;
}

.chatraum.pk-kompakt .ch-fenster .ch-inhalt img {
    display: inline-block;
    width: 54px !important;
    height: 54px !important;
    object-fit: contain;
    margin: 3px !important;
    padding: 7px !important;
    box-sizing: border-box;
    border-radius: 12px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    vertical-align: top;
    -webkit-tap-highlight-color: transparent;
}

.chatraum.pk-kompakt .ch-fenster .ch-inhalt img:active {
    background: rgba(38, 194, 247, .4);
}

.chatraum.pk-kompakt .ch-fenster .ch-inhalt p {
    text-align: center;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    padding: 20px 0;
}

.chatraum.pk-kompakt,
.chatraum.pk-kompakt #ch_verlauf,
.chatraum.pk-kompakt .ch-fenster .ch-reiter,
.chatraum.pk-kompakt #ch_anwesende {
    overscroll-behavior: contain;
}

.chatraum.pk-kompakt #ch_emojifenster img[data-grafik] {
    width: 76px;
    height: 76px;
    object-fit: contain;
    margin: 4px;
    padding: 6px;
    box-sizing: border-box;
    border-radius: 12px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
}

.chatraum.pk-kompakt #ch_smileyfenster .ch-inhalt {
    height: calc(100% - 78px);
    max-height: calc(100% - 78px);
}

.chatraum.pk-kompakt .ch-fenster .ch-reiter img[src*="/reiter/"] {
    padding: 0 !important;
    object-fit: cover;
}

.chatraum.pk-kompakt #ch_befehlshilfe {
    left: 6px !important;
    right: 6px !important;
    width: auto !important;
    top: auto !important;
    bottom: 106px !important;
    max-height: 45vh;
    z-index: 60;
}

.chatraum.pk-kompakt .ch-befehl-name {
    flex-basis: 120px;
}


/* =====================================================================
 * Der Spielmodus (Desktop) - siehe spielmodus.js
 *
 * Alles haengt an `body.pk-spielmodus` bzw. an eigenen Klassen (sb-*,
 * sm-*); ohne den Modus aendert sich nichts. Am Handy gibt es ihn nicht.
 * ===================================================================== */

/* Der Knopf am Rand: nicht am Handy. */
body.pk-mobil #koch_auf {
    display: none !important;
}

#koch_auf img {
    border-radius: 50%;
    object-fit: cover;
}

/* Die Leiste, in der im Spielmodus die vier Karten stehen. */
.sm-leiste {
    display: none;
}

body.pk-spielmodus:not(.pk-sm-ein) .offers.ticker {
    display: none !important;
}

body.pk-spielmodus:not(.pk-sm-ein) .sm-leiste {
    display: flex;
    gap: 12px;
    width: 100%;
    height: 80px;
    margin: 8px 0 12px;
}

.sm-leiste > .card {
    flex: 1 1 0;
    min-width: 0;
    height: 80px !important;
    margin: 0 !important;
    overflow: hidden;
}

.sm-leiste > #usercard {
    flex: 1.35 1 0;
}

.sm-leiste #usercard .card-header {
    display: none;
}

.sm-leiste #usercard .card-body {
    height: 80px !important;
    max-width: none !important;
    padding: 4px 8px !important;
}

.sm-leiste #spiele_uebersicht {
    height: 72px !important;
}

/* Der Chat in der rechten Spalte: eine durchgehende Box. */
.sm-chatbox {
    position: relative;
    width: 100%;
    height: 586px;
    overflow: hidden;
    border-radius: .5rem;
    background: #08111f;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 22px rgba(0, 0, 0, .35);
}

.sm-chatbox .chatraum {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
}

.chatraum.pk-kompakt {
    background-image: url("/img/spielmodus/chat-hg.jpg") !important;
    background-color: #08111f !important;
}

/* Lautsprecher oben links - der Ton-Knopf des Chats ist hier ausgeblendet. */
.chatraum.pk-kompakt .sm-ton {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 7;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    background: linear-gradient(to bottom, rgba(30, 60, 114, .95) 0%, rgba(18, 35, 67, .95) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .2);
    color: #fff;
    font-size: 19px;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
}

.chatraum.pk-kompakt .sm-ton-aus {
    border-color: rgba(255, 90, 110, .8);
    color: #ff8fa0;
}

.chatraum.pk-kompakt .mob-schriftzug {
    left: 62px;
    right: 116px;
}

/* Die Buehne: das grosse Fenster, in dem das Spiel laeuft. */
.sb {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(520px 320px at 50% 46%, rgba(38, 96, 210, .32), transparent 72%),
        linear-gradient(180deg, #060d20 0%, #0a1834 55%, #050b1a 100%);
    color: #fff;
    font-family: Muli, Verdana, sans-serif;
}

.sb[hidden] {
    display: none;
}

.sb-kopf {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    background: rgba(3, 8, 22, .8);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.sb-titel {
    flex: 1;
    color: #e9c86b;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .16em;
    text-align: center;
    text-transform: uppercase;
}

.sb-werkzeuge {
    display: flex;
    gap: 6px;
}

.sb-knopf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 15px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04));
    color: #fff;
    font: 700 12px/1 Muli, Verdana, sans-serif;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.sb-knopf:hover,
.sb-knopf:focus {
    outline: 0;
    border-color: rgba(38, 194, 247, .9);
    background: rgba(38, 194, 247, .25);
}

.sb-knopf i {
    font-size: 14px;
}

.sb-inhalt {
    position: relative;
    flex: 1;
    overflow: hidden;
}

/* Titel-Karte in der schmalen Leiste: nur Hoererzahl und laufender Titel. */
.sm-leiste #titelcard span[style*="right"] {
    display: none !important;
}

.sm-leiste #titelcard #streamzahl {
    width: auto !important;
    max-width: calc(100% - 20px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-leiste #titelcard #streamtitel {
    display: block;
    width: calc(100% - 20px);
    left: 10px;
    margin-top: 24px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-leiste #titelcard #marequeediv {
    max-width: calc(100% - 20px);
    overflow: hidden;
}

/* Am Desktop steht die Schreibleiste oben - wie im grossen Chat -, die
 * Knopfleiste bleibt unten. Und die Ecken sind so rund wie die des
 * Spielkastens daneben. */
.sm-chatbox,
.sm-chatbox .chatraum.pk-kompakt,
.chatraum.pk-kompakt {
    border-radius: 16px;
}

.chatraum.pk-kompakt #ch_leiste,
.chatraum.pk-kompakt::after {
    border-radius: 0 0 16px 16px;
}

.chatraum.pk-kompakt::after {
    height: 56px;
}

.chatraum.pk-kompakt #ch_eingabe {
    top: 64px !important;
    bottom: auto !important;
}

.chatraum.pk-kompakt #ch_verlauf {
    top: 110px !important;
    bottom: 62px !important;
}

.chatraum.pk-kompakt.mob-anwesende-auf #ch_anwesende {
    top: 110px !important;
    bottom: 62px !important;
}

.chatraum.pk-kompakt #ch_smileyfenster,
.chatraum.pk-kompakt #ch_emojifenster {
    bottom: 62px !important;
}

.chatraum.pk-kompakt #ch_emojianzeige {
    bottom: 62px !important;
}

.chatraum.pk-kompakt #ch_befehlshilfe {
    top: 108px !important;
    bottom: auto !important;
    max-height: 300px;
}

/* ---- Einspaltig: Handy und schmale Fenster -------------------------------- */
/* Chat und Spiel teilen sich die Spalte; eine Leiste oben schaltet um. */

body.pk-mobil .mob-spiel-koch {
    grid-column: 1 / -1;
    min-height: 120px;
    background-image: url("/img/koch/goldplatte.jpg");
    background-position: center 35%;
}

.sm-schalter {
    display: none;
}

body.pk-sm-ein .sm-schalter {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 46px;
    padding: 0 8px;
    background: linear-gradient(to bottom, #16305c 0%, #0b1730 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.sm-sw {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 16px;
    background: rgba(255, 255, 255, .07);
    color: #d5e2ff;
    font: 700 13px/1 Muli, Verdana, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-sw i {
    margin-right: 4px;
    font-size: 15px;
    vertical-align: -2px;
}

.sm-sw-aktiv {
    border-color: rgba(233, 200, 107, .9);
    background: linear-gradient(to bottom, rgba(233, 200, 107, .32), rgba(233, 200, 107, .12));
    color: #fff3c6;
}

.sm-punkt {
    position: absolute;
    top: 5px;
    right: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff4d5e;
    box-shadow: 0 0 0 2px #0b1730;
}

.sm-punkt[hidden] {
    display: none;
}

.sm-zu {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    color: #fff;
    font-size: 16px;
    line-height: 1;
}

/* Die Buehne liegt jetzt im Fluss der Seite - kein Kasten mit festem Ma. */
body.pk-sm-ein #spielbuehne {
    position: relative;
    inset: auto;
    z-index: 1;
}

body.pk-sm-ein.pk-sm-spiel #chatdiv {
    display: none !important;
}

body.pk-sm-ein.pk-sm-chat #spielbuehne {
    display: none !important;
}

body.pk-sm-ein #spielbuehne .sb-inhalt {
    flex: none;
    height: calc(542px * var(--sm-skala, 1));
}

body.pk-sm-ein .sb-zurueck {
    display: none;
}

body.pk-sm-ein .k-buehne {
    inset: auto;
    left: calc(-1 * var(--sm-versatz, 0px));
    top: 0;
    width: 742px;
    height: 542px;
    transform-origin: 0 0;
    transform: scale(var(--sm-skala, 1));
}

.sb-nur-beschnitten {
    display: none;
}

body.pk-sm-beschnitten .sb-nur-beschnitten {
    display: inline-flex;
}

/* Kopfzeile schmal: nur Symbole. */
body.pk-mobil .sb-knopf span {
    display: none;
}

body.pk-mobil .sb-knopf {
    padding: 0 10px;
}

body.pk-mobil .sb-titel {
    font-size: 12px;
    letter-spacing: .1em;
    text-align: left;
}

/* Die Gewinntabelle liegt ausserhalb der beschnittenen Buehne - auf Knopfdruck ueber der Maschine. */
body.pk-sm-beschnitten .k-tab-auf .k-tabelle {
    left: 184px;
    z-index: 12;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .8), 0 0 0 1000px rgba(0, 0, 0, .35);
}

/* Regeln und Bestenliste bleiben unverkleinert lesbar: als Blatt ueber der Seite. */
body.pk-sm-beschnitten .k-blatt {
    position: fixed;
    inset: calc(var(--mob-kopf, 0px) + var(--mob-player, 0px) + 6px) 8px calc(var(--mob-reiter, 0px) + 8px) 8px;
    z-index: 100000;
}

body.pk-sm-beschnitten .k-meldung {
    max-width: 90%;
}

/* Am Handy fehlt dem Chat die Hoehe der Leiste. */
body.pk-mobil.pk-sm-ein .chatraum {
    height: calc(100vh - var(--mob-kopf) - var(--mob-player) - var(--mob-reiter) - 10px - 46px) !important;
    height: calc(100dvh - var(--mob-kopf) - var(--mob-player) - var(--mob-reiter) - 10px - 46px) !important;
}

/* Am Handy nutzt das Spiel die ganze Fensterbreite - ohne Rand und Rundung. */
body.pk-mobil.pk-sm-spiel #chatcard.chatdiv {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

body.pk-mobil.pk-sm-spiel #spielbuehne .sb-inhalt {
    border-radius: 0;
}