* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    min-height: 100vh;
    background: #050302;
    color: #f7e7bd;
    font-family: Georgia, "Times New Roman", serif;

    overflow-x: hidden;
    overflow-y: auto;
}

.hidden {
    display: none !important;
}

button,
a,
input {
    font-family: inherit;
}

button {
    padding: 13px 30px;
    border: 1px solid #d9b76c;
    border-radius: 10px;
    background: linear-gradient(180deg, #164326, #06170d);
    color: #f7e7bd;
    font-weight: bold;
    font-size: 17px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,0.65);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        opacity 0.18s ease;
}

button:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 34px rgba(0,0,0,0.75),
        0 0 18px rgba(217,183,108,0.18);
}

button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

a {
    color: inherit;
    text-decoration: none;
}

.app,
.game {
    width: 100vw;
    height: 100vh;
    position: relative;
}

.screen {
    width: 100vw;
    min-height: 100vh;
    position: relative;

    display: flex;
    justify-content: center;

    align-items: flex-start;

    overflow-x: hidden;
    overflow-y: auto;

    padding: 30px 0;
}


/* ==========================================================
   MENÜWELT
   STARTSEITE / SETUP / REGELN / TUTORIAL
========================================================== */

.home-screen,
.setup-screen,
.rules-screen,
.tutorial-screen {
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(195, 198, 201, 0.10),
            rgba(68, 71, 74, 0.10) 32%,
            rgba(8, 9, 10, 1) 74%
        ),
        linear-gradient(
            180deg,
            #151719 0%,
            #090a0b 52%,
            #050607 100%
        );

    color: #e7e4dc;
}


.menu-card,
.rules-card,
.tutorial-card {
    width: min(760px, 92vw);

    padding: 42px 44px;

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,255,255,0.055),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            rgba(31,33,35,0.97),
            rgba(13,14,15,0.98)
        );

    border:
        1px solid
        rgba(215,199,160,0.30);

    box-shadow:
        0 32px 90px rgba(0,0,0,0.72),
        inset 0 1px 0 rgba(255,255,255,0.04);

    text-align: center;

    position: relative;

    z-index: 5;
}


.menu-card h1,
.rules-card h1,
.tutorial-card h1 {
    margin: 0 0 14px;

    color: #d7c49b;

    font-size: 48px;

    line-height: 1.05;

    letter-spacing: 2px;

    text-shadow:
        0 10px 28px
        rgba(0,0,0,0.75);
}


.menu-card p,
.rules-card p,
.tutorial-card p {
    color:
        rgba(225,224,219,0.82);

    font-size: 18px;

    line-height: 1.45;
}


.menu-actions {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;

    margin-top: 24px;
}


.setup-screen .menu-actions button,
.rules-screen .menu-actions button,
.tutorial-screen .menu-actions button {
    background:
        linear-gradient(
            180deg,
            #3d4042,
            #1c1e20
        );

    color: #e3e1db;

    border:
        1px solid
        rgba(208,195,164,0.36);

    box-shadow:
        0 8px 24px
        rgba(0,0,0,0.50);
}


.setup-screen .menu-actions button:hover,
.rules-screen .menu-actions button:hover,
.tutorial-screen .menu-actions button:hover {
    border-color:
        rgba(220,203,164,0.62);

    box-shadow:
        0 12px 30px rgba(0,0,0,0.60),
        0 0 16px rgba(211,191,143,0.10);
}


/* ==========================================================
   STARTSEITE
========================================================== */

.home-screen {
    background: #050607;
}


.royal-home {
    width: 100vw;

    height: 100vh;

    min-height: 100svh;

    position: relative;

    overflow: hidden;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;


    background:
        radial-gradient(
            circle at 50% 46%,
            rgba(187,190,192,0.13) 0%,
            rgba(104,106,107,0.09) 20%,
            rgba(41,43,44,0.16) 38%,
            rgba(7,8,9,0.84) 64%,
            #030405 100%
        ),
        linear-gradient(
            180deg,
            #111315 0%,
            #090a0b 48%,
            #040506 100%
        );
}


.royal-home::before {
    content: "";

    position: absolute;

    inset: 0;

    opacity: 0.09;

    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 0px,
            rgba(255,255,255,0.025) 1px,
            transparent 2px,
            transparent 6px
        );

    mix-blend-mode:
        soft-light;

    pointer-events: none;
}


.royal-home::after {
    content: "";

    position: absolute;

    left: 50%;

    top: 50%;

    width:
        min(1050px, 78vw);

    height:
        min(640px, 68vh);

    transform:
        translate(-50%, -50%);

    border-radius: 50%;


    background:
        radial-gradient(
            ellipse at center,
            rgba(111,113,113,0.19) 0%,
            rgba(67,69,69,0.12) 36%,
            rgba(38,39,39,0.06) 56%,
            transparent 76%
        );


    border:
        1px solid
        rgba(211,196,159,0.24);


    box-shadow:
        0 0 95px
        rgba(0,0,0,0.48),

        inset 0 0 110px
        rgba(255,255,255,0.025);


    pointer-events: none;
}


.home-pro-card {
    width: auto;

    max-width: 900px;

    padding: 0;

    margin: 0;

    background: transparent;

    border: none;

    box-shadow: none;

    text-align: center;

    position: relative;

    z-index: 2;
}


.home-pro-kicker {
    margin-bottom: 22px;

    color:
        rgba(190,192,194,0.70);

    font-size: 13px;

    letter-spacing: 7px;

    text-transform: uppercase;
}


.home-pro-logo {
    display: flex;

    flex-direction: column;

    align-items: center;

    margin-bottom: 34px;
}


.logo-main {
    font-size:
        clamp(72px, 9vw, 108px);

    font-weight: 700;

    letter-spacing: 4px;

    line-height: 1;


    background:
        linear-gradient(
            180deg,
            #fff8de 0%,
            #dfd2ad 25%,
            #b79b62 50%,
            #e4e1d8 73%,
            #776b51 100%
        );


    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;


    text-shadow:
        0 4px 2px
        rgba(0,0,0,0.55),

        0 12px 28px
        rgba(0,0,0,0.80);
}

.logo-seven {
    display: inline-block;
    transform: translateY(-15px);
}

.logo-online {
    margin-top: 12px;

    position: relative;

    color: #cbb98d;

    font-size: 26px;

    letter-spacing: 12px;

    opacity: 0.92;
}


.logo-online::before,
.logo-online::after {
    content: "";

    position: absolute;

    top: 50%;

    width: 120px;

    height: 1px;


    background:
        linear-gradient(
            90deg,
            transparent,
            #888b8d,
            transparent
        );
}


.logo-online::before {
    right:
        calc(100% + 25px);
}


.logo-online::after {
    left:
        calc(100% + 25px);
}


.home-pro-actions {
    display: flex;

    justify-content: center;

    gap: 16px;

    flex-wrap: wrap;

    margin-bottom: 30px;
}


.home-primary-btn,
.home-secondary-btn {
    min-width: 220px;

    padding: 15px 34px;

    border-radius: 999px;

    font-size: 18px;

    font-weight: 700;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}


.home-primary-btn {
    background:
        linear-gradient(
            180deg,
            #d9c38f,
            #9f8552
        );

    color: #111213;

    border:
        1px solid
        rgba(245,235,208,0.40);

    box-shadow:
        0 16px 34px
        rgba(0,0,0,0.58),

        0 0 22px
        rgba(211,191,143,0.14);
}


.home-secondary-btn {
    background:
        linear-gradient(
            180deg,
            rgba(70,72,74,0.72),
            rgba(28,30,31,0.82)
        );

    color: #e1dfda;

    border:
        1px solid
        rgba(186,188,189,0.34);

    box-shadow:
        0 16px 34px
        rgba(0,0,0,0.50);
}


.home-primary-btn:hover,
.home-secondary-btn:hover {
    transform:
        translateY(-2px);
}


.home-pro-links {
    display: flex;

    justify-content: center;

    gap: 24px;

    flex-wrap: wrap;
}


.home-pro-links button {
    padding: 6px 4px;

    background: transparent;

    border: none;

    box-shadow: none;

    color:
        rgba(188,190,191,0.74);

    font-size: 16px;

    font-weight: 500;
}


.home-pro-links button:hover {
    color: #d7c49b;

    transform: none;

    box-shadow: none;
}


.royal-top-line,
.royal-bottom-line,
.royal-divider,
.royal-logo,
.royal-online,
.royal-logo-image {
    display: none !important;
}


/* ==========================================================
   SETUP / PRIVATER TISCH
========================================================== */

.setup-block {
    margin: 26px 0;
}


.setup-block h3 {
    margin: 0 0 12px;

    color: #c9b98f;

    font-size: 22px;

    letter-spacing: 1px;
}


.setup-option {
    min-width: 180px;

    margin: 7px;

    padding: 16px 26px;

    border-radius: 14px;

    border:
        1px solid
        rgba(202,195,177,0.34);


    background:
        linear-gradient(
            180deg,
            rgba(55,57,59,0.97),
            rgba(24,26,27,0.98)
        );


    color: #e2dfd8;

    font-size: 19px;

    font-weight: 800;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    cursor: pointer;


    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.06),

        0 10px 22px
        rgba(0,0,0,0.42);
}


.setup-option:hover:not(:disabled) {
    transform:
        translateY(-2px);

    border-color:
        rgba(221,205,166,0.68);


    box-shadow:
        0 0 18px
        rgba(211,191,143,0.14),

        0 14px 28px
        rgba(0,0,0,0.52);
}


.setup-option.active {
    background:
        radial-gradient(
            circle at top,
            rgba(219,202,162,0.15),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            rgba(76,71,59,0.98),
            rgba(34,33,29,0.98)
        );


    border-color:
        rgba(224,207,167,0.72);


    color: #eadbb4;


    box-shadow:
        0 0 24px
        rgba(211,191,143,0.16),

        inset 0 0 18px
        rgba(255,255,255,0.025),

        0 14px 30px
        rgba(0,0,0,0.56);


    transform:
        translateY(-2px)
        scale(1.03);
}


.setup-option:disabled {
    opacity: 0.42;

    cursor: not-allowed;

    box-shadow: none;
}


.multiplayer-form {
    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-top: 25px;
}


.multiplayer-form input {
    width: 100%;

    padding: 15px 16px;

    border-radius: 12px;

    border:
        1px solid
        rgba(212,175,55,0.42);

    background:
        rgba(0,0,0,0.34);

    color: #f1d27e;

    text-align: center;

    font-size: 17px;

    outline: none;
}


.multiplayer-form input:focus {
    border-color:
        rgba(241,210,126,0.80);

    box-shadow:
        0 0 0 3px
        rgba(217,183,108,0.12);
}


.multiplayer-form hr {
    width: 100%;

    border: none;

    height: 1px;

    background:
        rgba(212,175,55,0.20);

    margin: 12px 0;
}


/* ==========================================================
   TUTORIAL
========================================================== */

.tutorial-card {
    width:
        min(900px, 92vw);

    padding: 46px;
}


.tutorial-kicker {
    margin-bottom: 18px;

    color: #d4b164;

    letter-spacing: 7px;

    text-transform:
        uppercase;

    font-size: 14px;
}


.tutorial-card h1 {
    margin: 0 0 14px;

    color: #f1d27e;

    font-size: 54px;

    letter-spacing: 4px;
}


.tutorial-intro {
    max-width: 680px;

    margin:
        0 auto 34px;

    color:
        rgba(225,224,219,0.86);

    font-size: 20px;

    line-height: 1.5;
}


.tutorial-table {
    min-height: 260px;

    margin: 35px 0;

    padding: 30px;

    border-radius: 20px;

    border:
        1px solid
        rgba(212,177,100,0.35);


    background:
        radial-gradient(
            circle at center,
            rgba(109,108,102,0.12),
            transparent 70%
        ),
        rgba(0,0,0,0.22);


    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    flex-wrap: wrap;
}


.tutorial-hint {
    min-height: 32px;

    margin-bottom: 28px;

    color: #f1d27e;

    font-size: 18px;

    font-weight: bold;
}


.tutorial-step {
    display: flex;

    gap: 20px;

    padding: 20px;

    border-radius: 14px;

    border:
        1px solid
        rgba(212,177,100,0.25);

    background:
        rgba(0,0,0,0.18);

    text-align: left;
}


.tutorial-step span {
    width: 55px;

    height: 55px;

    flex-shrink: 0;

    border-radius: 50%;

    border:
        2px solid
        #d4b164;

    color: #f1d27e;

    font-weight: bold;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;
}


.tutorial-step h3 {
    margin: 0 0 8px;

    color: #f1d27e;
}


.tutorial-step p {
    margin: 0;

    color:
        rgba(225,224,219,0.86);

    line-height: 1.5;
}


.tutorial-real-card {
    width: 110px;

    height: 160px;

    border-radius: 12px;

    overflow: hidden;

    display: flex;

    justify-content: center;

    align-items: center;

    background: transparent;


    box-shadow:
        0 10px 25px
        rgba(0,0,0,0.45);


    transition:
        transform 0.20s ease,
        box-shadow 0.20s ease;
}


.tutorial-real-card:hover {
    transform:
        translateY(-6px);


    box-shadow:
        0 18px 34px
        rgba(0,0,0,0.58),

        0 0 14px
        rgba(217,183,108,0.25);
}


.tutorial-real-card img {
    width: 100%;

    height: 100%;

    object-fit: contain;
}


.tutorial-demo-card,
.playing-card {
    width: 90px;

    height: 130px;

    border-radius: 12px;

    border:
        2px solid
        #d7b25d;

    background:
        linear-gradient(
            180deg,
            #fffef8,
            #f7f0dc
        );

    color: #111;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 32px;

    font-weight: bold;


    box-shadow:
        0 12px 25px
        rgba(0,0,0,0.35);


    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.playing-card:hover {
    transform:
        translateY(-8px);
}


.tutorial-info-card {
    min-width: 140px;

    padding: 20px;

    border-radius: 12px;

    background:
        rgba(212,175,55,0.08);

    border:
        1px solid
        rgba(212,175,55,0.25);

    color: #f1d27e;
}


.tutorial-ad {
    width: 180px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #d4af37;

    opacity: 0.50;

    font-size: 20px;
}


.tutorial-gold {
    background:
        rgba(212,175,55,0.15);

    border:
        1px solid
        rgba(212,175,55,0.40);
}


.tutorial-player {
    background:
        rgba(255,255,255,0.06);

    border:
        1px solid
        rgba(255,255,255,0.15);
}


/* ==========================================================
   LOBBY
========================================================== */

.table-lobby-code {
    margin:
        24px auto;

    padding: 18px;

    border-radius: 14px;

    border:
        1px solid
        rgba(212,175,55,0.45);

    background:
        rgba(0,0,0,0.25);

    text-align: center;
}


.table-lobby-code span {
    display: block;

    margin-bottom: 8px;

    color:
        rgba(247,231,189,0.75);

    font-size: 14px;

    letter-spacing: 4px;

    text-transform:
        uppercase;
}


.table-lobby-code strong {
    color: #f1d27e;

    font-size: 46px;

    letter-spacing: 8px;
}


.table-lobby-players {
    margin-top: 20px;

    text-align: left;
}


.table-lobby-players h3 {
    text-align: center;

    color: #f1d27e;
}


.table-seat {
    display: flex;

    justify-content:
        space-between;

    align-items: center;

    padding: 12px 16px;

    margin-bottom: 8px;

    border-radius: 10px;

    background:
        rgba(0,0,0,0.22);

    border:
        1px solid
        rgba(212,175,55,0.22);
}


.table-seat span {
    color:
        rgba(247,231,189,0.70);
}


.table-seat strong {
    color: #f7e7bd;
}


.table-lobby-status {
    margin-top: 20px;

    color: #f1d27e;

    font-weight: bold;
}


.seat-status {
    padding: 4px 9px;

    border-radius: 999px;

    font-size: 12px;

    font-style: normal;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.seat-status.online {
    color: #0e2b16;

    background: #7ee28d;
}


.seat-status.offline {
    color: #2b100e;

    background: #d96f5f;
}


.seat-status.empty {
    color:
        rgba(247,231,189,0.55);

    background:
        rgba(255,255,255,0.08);
}


/* ==========================================================
   SPIELSCREEN
========================================================== */

.game-screen {
    background: #050302;
}


.game {
    overflow: hidden;


    background:
        radial-gradient(
            circle at 56% 48%,
            rgba(24,75,40,0.18),
            transparent 48%
        ),
        linear-gradient(
            180deg,
            #050302 0%,
            #020101 100%
        );
}


header {
    position: absolute;

    top: 16px;

    left: 24px;

    right: 24px;

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    z-index: 80;
}


header h1,
.game header h1 {
    margin: 0;

    color: #d9b76c;

    font-size: 40px;


    text-shadow:
        0 4px 18px
        rgba(0,0,0,0.90);
}


.header-actions {
    display: flex;

    gap: 12px;
}


/* ==========================================================
   SIDEBAR
========================================================== */

.sidebar {
    position: absolute;

    left: 20px;

    top: 78px;

    width: 315px;

    z-index: 120;

    overflow: visible;
}


.scoreboard,
.wins-board,
.gamevalue-board,
.history-board {
    margin-bottom: 10px;

    padding: 10px 12px;

    border-radius: 14px;

    border:
        3px solid
        #8a6b2d;


    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(255,255,255,0.06),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            rgba(19,40,24,0.98),
            rgba(7,18,10,0.98)
        );


    box-shadow:
        inset 0 0 18px
        rgba(0,0,0,0.55),

        0 14px 34px
        rgba(0,0,0,0.65);
}


.scoreboard h3,
.wins-board h3,
.gamevalue-board h3,
.history-board h3 {
    margin: 0 0 6px;

    text-align: center;

    color: #e3c37a;

    font-size: 20px;

    letter-spacing: 1px;
}


.score-row {
    display: flex;

    justify-content:
        space-between;

    gap: 10px;

    margin-bottom: 3px;

    font-size: 16px;
}


.wins-count {
    color: #f5f0d8;

    font-size: 18px;

    font-weight: bold;
}


.game-value {
    text-align: center;

    color: #f5f0d8;

    font-size: 24px;

    font-weight: bold;
}


.knock-info {
    margin-top: 3px;

    text-align: center;

    color:
        rgba(247,231,189,0.78);

    font-size: 11px;
}


.history-board {
    height: 420px;

    position: relative;

    overflow: visible;

    z-index: 130;
}


.trick-history {
    height: 365px;

    padding-right: 0;

    overflow: visible;

    position: relative;

    font-size: 11px;
}


.history-trick {
    padding: 4px 0;

    border-top:
        1px solid
        rgba(227,195,122,0.32);

    position: relative;

    overflow: visible;

    z-index: 1;
}


.history-trick:hover {
    z-index: 500;
}


.history-trick:first-child {
    border-top: none;
}


.history-title {
    margin-bottom: 2px;

    display: flex;

    justify-content:
        space-between;

    gap: 6px;

    color: #e3c37a;

    font-size: 11px;

    font-weight: bold;

    line-height: 1.1;
}


.history-title span {
    color: #f5f0d8;

    font-size: 10px;

    font-style: italic;

    white-space: nowrap;
}


.history-cards-row {
    display: flex;

    align-items:
        flex-start;

    gap: 4px;

    overflow: visible;

    position: relative;

    z-index: 1;
}


.history-cards-row:hover {
    z-index: 9999;
}


.history-mini-card {
    width: 39px;

    text-align: center;

    position: relative;

    z-index: 1;

    transition:
        transform 0.18s ease;

    transform-origin:
        center center;
}


.history-mini-card:hover {
    z-index: 9999;

    transform:
        translateX(50px)
        translateY(-30px)
        scale(2.4);
}


.history-mini-card img {
    width: 36px;

    height: 53px;

    display: block;

    margin:
        0 auto 1px;

    border-radius: 4px;

    image-rendering: auto;

    cursor: pointer;


    box-shadow:
        0 6px 14px
        rgba(0,0,0,0.70),

        0 0 0 1px
        rgba(255,255,255,0.25);


    transition:
        box-shadow 0.18s ease;
}


.history-mini-card:hover img {
    box-shadow:
        0 22px 44px
        rgba(0,0,0,0.92),

        0 0 18px
        rgba(217,183,108,0.75),

        0 0 0 1px
        rgba(255,255,255,0.40);
}


.history-mini-card span {
    display: inline-block;

    min-width: 16px;

    padding: 0 4px;

    border-radius: 8px;

    background:
        rgba(3,12,7,0.90);

    border:
        1px solid
        rgba(217,183,108,0.45);

    color: #f7e7bd;

    font-size: 9px;

    line-height: 1.1;
}


/* ==========================================================
   SPIELTISCH
========================================================== */

.table {
    position: absolute;

    left: 56%;

    top: 52%;

    width:
        min(1380px, 88vw);

    aspect-ratio:
        16 / 10;

    transform:
        translate(-50%, -50%);

    background-image:
        url("assets/tables/table-premium.png");

    background-position:
        center;

    background-repeat:
        no-repeat;

    background-size:
        contain;

    overflow: visible;
}


.player {
    position: absolute;

    text-align: center;

    z-index: 20;
}


.name {
    display: inline-block;

    margin-bottom: 8px;

    padding: 8px 20px;

    border-radius: 8px;

    background:
        rgba(3,12,7,0.90);

    border:
        1px solid
        rgba(217,183,108,0.80);

    color: #f7e7bd;

    font-size: 20px;


    box-shadow:
        0 8px 22px
        rgba(0,0,0,0.60);
}


.top {
    top: 9%;

    left: 50%;

    transform:
        translateX(-50%);
}


.left {
    left: 9%;

    top: 43%;

    transform:
        rotate(-8deg);
}


.right {
    right: 9%;

    top: 43%;

    transform:
        rotate(8deg);
}


.bottom {
    bottom: 8%;

    left: 50%;

    transform:
        translateX(-50%);
}


.hand,
.bot-cards,
.played-zone {
    display: flex;

    justify-content: center;

    gap: 10px;
}


/* ==========================================================
   KARTEN
========================================================== */

.card {
    position: relative;

    width: 146px;

    height: 214px;

    border-radius: 14px;

    overflow: hidden;

    background: #f8f0dc;


    box-shadow:
        0 18px 38px
        rgba(0,0,0,0.68),

        0 0 0 1px
        rgba(255,255,255,0.16);
}


.card img {
    width: 100%;

    height: 100%;

    display: block;

    border-radius: 14px;
}


.card.playable {
    cursor: pointer;


    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


.card.playable:hover {
    z-index: 999;


    transform:
        translateY(-40px)
        scale(1.12);


    box-shadow:
        0 35px 60px
        rgba(0,0,0,0.90),

        0 0 20px
        rgba(217,183,108,0.80),

        0 0 40px
        rgba(217,183,108,0.40);
}


.hand .card {
    margin-left: -18px;
}


.hand .card:first-child {
    margin-left: 0;

    transform:
        rotate(-4deg);
}


.hand .card:nth-child(2) {
    transform:
        rotate(-1.5deg)
        translateY(-6px);
}


.hand .card:nth-child(3) {
    transform:
        rotate(1.5deg)
        translateY(-6px);
}


.hand .card:nth-child(4) {
    transform:
        rotate(4deg);
}


.bot-cards .card {
    width: 124px;

    height: 182px;

    margin-left: -52px;
}


.bot-cards .card:first-child {
    margin-left: 0;
}


.played-zone {
    position: absolute;

    min-width: 160px;

    min-height: 210px;

    align-items: center;

    z-index: 35;
}


.played-zone .card {
    width: 138px;

    height: 202px;
}


.played-zone.north {
    left: 50%;

    top: 190px;

    transform:
        translateX(-50%);
}


.played-zone.west {
    left: 330px;

    top: 50%;

    transform:
        translateY(-50%)
        rotate(-8deg);
}


.played-zone.east {
    right: 330px;

    top: 50%;

    transform:
        translateY(-50%)
        rotate(8deg);
}


.played-zone.south {
    left: 50%;

    bottom: 230px;

    transform:
        translateX(-50%);
}


.played-by {
    position: absolute;

    left: 0;

    right: 0;

    bottom: -24px;

    text-align: center;

    color: #f7e7bd;

    font-size: 13px;

    text-shadow:
        0 2px 4px
        black;
}


/* ==========================================================
   INFO
========================================================== */

.info {
    position: absolute;

    left: 56%;

    bottom: 10px;

    transform:
        translateX(-50%);

    min-width: 520px;

    max-width: 760px;

    padding: 13px 24px;

    border-radius: 10px;

    background:
        rgba(3,12,7,0.92);

    border:
        1px solid
        rgba(217,183,108,0.72);

    color: #f7e7bd;

    font-size: 21px;

    text-align: center;

    z-index: 90;


    box-shadow:
        0 12px 32px
        rgba(0,0,0,0.65);
}


/* ==========================================================
   STRÖM
========================================================== */

.stroem-display {
    min-width: 92px;

    display: flex;

    justify-content:
        flex-end;

    align-items: center;

    gap: 9px;

    flex-wrap: wrap;
}


.stroem-pack {
    position: relative;

    width: 30px;

    height: 22px;
}


.stroem-pack .line,
.stroem-rest .line {
    width: 2px;

    height: 18px;

    border-radius: 2px;

    background: #f5f0d8;


    box-shadow:
        0 0 3px
        rgba(255,255,255,0.25);
}


.stroem-pack .line {
    position: absolute;

    bottom: 2px;
}


.stroem-pack .line:nth-child(1) {
    left: 1px;
}


.stroem-pack .line:nth-child(2) {
    left: 8px;
}


.stroem-pack .line:nth-child(3) {
    left: 15px;
}


.stroem-pack .line:nth-child(4) {
    left: 22px;
}


.stroem-pack .cross {
    position: absolute;

    left: -2px;

    top: 10px;

    width: 31px;

    height: 2px;

    border-radius: 2px;

    background: #f5f0d8;


    transform:
        rotate(-22deg);

    transform-origin:
        center;


    box-shadow:
        0 0 3px
        rgba(255,255,255,0.25);
}


.stroem-rest {
    height: 22px;

    display: flex;

    align-items:
        flex-end;

    gap: 6px;
}


/* ==========================================================
   AUSGESTIEGENE KARTEN
========================================================== */

.folded-cards {
    position: relative;

    min-width: 130px;

    min-height: 95px;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    opacity: 0.72;

    filter:
        grayscale(0.55)
        brightness(0.75);

    pointer-events: none;
}


.folded-card {
    width: 92px;

    height: 135px;

    margin-left: -72px;

    border-radius: 10px;

    overflow: hidden;

    background: #f8f0dc;

    transform:
        rotate(-84deg);


    box-shadow:
        0 14px 28px
        rgba(0,0,0,0.75),

        0 0 0 1px
        rgba(255,255,255,0.13);
}


.folded-card:first-child {
    margin-left: 0;
}


.folded-card:nth-child(2) {
    transform:
        rotate(-86deg)
        translateY(3px);
}


.folded-card:nth-child(3) {
    transform:
        rotate(-82deg)
        translateY(-3px);
}


.folded-card:nth-child(4) {
    transform:
        rotate(-85deg)
        translateY(5px);
}


.folded-card img {
    width: 100%;

    height: 100%;

    display: block;
}


.folded-label {
    position: absolute;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%, -50%);

    padding: 4px 12px;

    border-radius: 999px;

    background:
        rgba(3,12,7,0.90);

    border:
        1px solid
        rgba(217,183,108,0.65);

    color: #f7e7bd;

    font-size: 13px;

    font-weight: bold;

    text-transform:
        uppercase;

    letter-spacing: 0.8px;


    box-shadow:
        0 8px 20px
        rgba(0,0,0,0.65);
}


.folded-human {
    transform:
        translateY(8px)
        scale(0.92);
}


.folded-bot {
    transform:
        scale(0.82);
}


.left .folded-cards {
    transform:
        rotate(8deg)
        scale(0.82);
}


.right .folded-cards {
    transform:
        rotate(-8deg)
        scale(0.82);
}


.top .folded-cards {
    transform:
        scale(0.82);
}


/* ==========================================================
   WÜRFEL
========================================================== */

.dice-overlay {
    position: fixed;

    inset: 0;

    z-index: 500;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(0,0,0,0.78);

    backdrop-filter:
        blur(4px);
}


.dice-overlay.hidden {
    display: none;
}


.dice-box {
    min-width: 900px;

    max-width: 1200px;

    padding: 40px;

    border-radius: 22px;

    border:
        3px solid
        #d9b76c;


    background:
        radial-gradient(
            circle at top,
            rgba(255,255,255,0.08),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #18351f,
            #08110a
        );


    box-shadow:
        0 30px 90px
        rgba(0,0,0,0.90),

        0 0 30px
        rgba(217,183,108,0.25);

    text-align: center;
}


.dice-box h2 {
    margin-top: 0;

    margin-bottom: 25px;

    color: #e3c37a;

    font-size: 42px;
}


.dice-round-info {
    margin-bottom: 30px;

    color: #f7e7bd;

    font-size: 22px;
}


.dice-results {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 25px;

    margin-bottom: 35px;
}


.dice-player {
    padding: 18px;

    border-radius: 16px;

    background:
        rgba(0,0,0,0.25);

    border:
        2px solid
        rgba(217,183,108,0.35);
}


.dice-player.winner {
    border-color: #f1d27e;

    box-shadow:
        0 0 30px
        rgba(241,210,126,0.55);
}


.dice-player-name {
    margin-bottom: 15px;

    color: #f7e7bd;

    font-size: 22px;

    font-weight: bold;
}


.dice-row {
    display: flex;

    justify-content: center;

    gap: 12px;

    margin-bottom: 12px;
}


.die {
    width: 72px;

    height: 72px;

    border-radius: 12px;

    background: #f8f0dc;

    color: #111;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 42px;

    font-weight: bold;


    box-shadow:
        inset 0 0 8px
        rgba(0,0,0,0.25),

        0 10px 20px
        rgba(0,0,0,0.40);
}


.dice-total {
    color: #e3c37a;

    font-size: 28px;

    font-weight: bold;
}


.dice-winner {
    margin-top: 15px;

    color: #f5f0d8;

    font-size: 30px;

    font-weight: bold;
}


.table-dice-layer {
    position: absolute;

    inset: 0;

    z-index: 400;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 25px;

    pointer-events: auto;
}


.table-dice-layer.hidden {
    display: none;
}


.table-dice-group {
    min-width: 150px;

    padding: 15px;

    border-radius: 14px;

    background:
        rgba(0,0,0,0.82);

    border:
        2px solid
        rgba(217,183,108,0.45);

    text-align: center;
}


.table-dice-group.winner {
    border:
        3px solid
        gold;


    box-shadow:
        0 0 20px
        rgba(255,215,0,0.80);


    transform:
        scale(1.1);
}


.table-dice-group.clickable {
    cursor: pointer;

    border-color: #f1d27e;


    box-shadow:
        0 0 24px
        rgba(241,210,126,0.75),

        0 16px 34px
        rgba(0,0,0,0.75);
}


.table-dice-group.clickable:hover {
    transform:
        scale(1.08);
}


.table-dice-name {
    margin-bottom: 10px;

    color: #f7e7bd;

    font-weight: bold;
}


.table-dice-row {
    display: flex;

    justify-content: center;

    gap: 10px;

    margin-bottom: 10px;
}


.table-die {
    width: 55px;

    height: 55px;

    border-radius: 10px;

    background: #ffffff;

    position: relative;


    box-shadow:
        0 6px 16px
        rgba(0,0,0,0.55);
}


.table-dice-total {
    color: #e3c37a;

    font-size: 24px;

    font-weight: bold;
}


.table-die-pip {
    position: absolute;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #000;
}


.pip-1 {
    left: 10px;
    top: 10px;
}


.pip-3 {
    right: 10px;
    top: 10px;
}


.pip-4 {
    left: 10px;
    top: 50%;

    transform:
        translateY(-50%);
}


.pip-5 {
    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);
}


.pip-6 {
    right: 10px;
    top: 50%;

    transform:
        translateY(-50%);
}


.pip-7 {
    left: 10px;
    bottom: 10px;
}


.pip-9 {
    right: 10px;
    bottom: 10px;
}


/* ==========================================================
   SPIELAKTIONEN
========================================================== */

.table-action-bar {
    position: absolute;

    left: 56%;

    bottom: 88px;

    transform:
        translateX(-50%);

    display: flex;

    gap: 18px;

    z-index: 120;
}


.table-action-bar button {
    min-width: 190px;

    padding: 14px 26px;

    border-radius: 999px;

    font-size: 18px;

    font-weight: bold;
}


.table-secondary-btn {
    background:
        linear-gradient(
            180deg,
            #184427,
            #07170d
        );

    border:
        2px solid
        #d9b76c;
}


.table-secondary-btn:hover {
    box-shadow:
        0 0 20px
        rgba(217,183,108,.45),

        0 14px 30px
        rgba(0,0,0,.75);
}


.table-knock-btn {
    background:
        linear-gradient(
            180deg,
            #7a1810,
            #320705
        );

    border:
        2px solid
        #d9b76c;
}


.table-knock-btn:hover {
    box-shadow:
        0 0 20px
        rgba(255,110,90,.35),

        0 14px 30px
        rgba(0,0,0,.75);
}


/* ==========================================================
   POPUPS / MODALS
========================================================== */

.knock-modal {
    position: fixed;

    inset: 0;

    background:
        rgba(0,0,0,0.62);

    z-index: 300;

    display: flex;

    align-items: center;

    justify-content: center;
}


.knock-modal.hidden {
    display: none;
}


.knock-box {
    width: 430px;


    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,255,255,0.08),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #17331d,
            #07110a
        );


    border:
        3px solid
        #d9b76c;

    border-radius: 16px;

    padding: 26px;

    text-align: center;


    box-shadow:
        0 28px 80px
        rgba(0,0,0,0.85);
}


.knock-box h2 {
    margin:
        0 0 12px;

    color: #e3c37a;
}


.knock-box p {
    margin:
        0 0 22px;

    font-size: 18px;
}


.knock-actions {
    display: flex;

    gap: 14px;

    justify-content: center;
}


.trick-winner-modal {
    position: fixed;

    inset: 0;

    z-index: 300;

    pointer-events: none;

    display: flex;

    align-items: center;

    justify-content: center;

    background: transparent;
}


.trick-winner-modal.hidden {
    display: none;
}


.trick-winner-modal .trick-box {
    width: 390px;

    padding: 20px 24px;


    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,255,255,0.08),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(23,51,29,0.96),
            rgba(7,17,10,0.96)
        );


    border:
        2px solid
        #d9b76c;

    border-radius: 16px;

    text-align: center;


    box-shadow:
        0 20px 55px
        rgba(0,0,0,0.75),

        0 0 22px
        rgba(217,183,108,0.28);
}


.trick-winner-modal h2 {
    margin:
        0 0 8px;

    color: #e3c37a;
}


.trick-winner-modal p {
    margin: 0;

    font-size: 20px;

    color: #f7e7bd;
}


/* ==========================================================
   RESPONSIVE – TABLET / KLEINER DESKTOP
========================================================== */

@media (max-width: 1200px) {

    .sidebar {
        width: 280px;
    }


    .table {
        left: 58%;

        width:
            min(1120px, 86vw);
    }


    .card {
        width: 126px;

        height: 185px;
    }


    .bot-cards .card {
        width: 106px;

        height: 156px;
    }


    .played-zone .card {
        width: 120px;

        height: 176px;
    }

}


/* ==========================================================
   RESPONSIVE – TABLET
========================================================== */

@media (max-width: 900px) {

    .logo-main {
        font-size: 64px;

        letter-spacing: 2px;
    }


    .logo-online {
        font-size: 18px;

        letter-spacing: 8px;
    }


    .logo-online::before,
    .logo-online::after {
        width: 60px;
    }


    .home-pro-actions {
        flex-direction: column;

        align-items: center;
    }


    .home-primary-btn,
    .home-secondary-btn {
        min-width: 240px;
    }


    .royal-home::after {
        width: 88vw;

        height: 66vh;
    }


    .menu-card,
    .rules-card,
    .tutorial-card {
        padding: 32px 24px;
    }

}


/* ==========================================================
   RESPONSIVE – SMARTPHONE
========================================================== */

@media (max-width: 600px) {

    .home-screen,
    .setup-screen,
    .rules-screen,
    .tutorial-screen {
        padding: 18px 0;
    }


    .royal-home {
        min-height: 100svh;

        padding:
            72px 18px
            36px;
    }


    .royal-home::after {
        width: 94vw;

        height: 72vh;
    }


    .home-pro-kicker {
        margin-bottom: 16px;

        font-size: 11px;

        letter-spacing: 4px;
    }


    .home-pro-logo {
        margin-bottom: 28px;
    }


    .logo-main {
        font-size:
            clamp(48px, 15vw, 68px);

        letter-spacing: 1px;
    }


    .logo-online {
        margin-top: 10px;

        font-size: 15px;

        letter-spacing: 6px;
    }


    .logo-online::before,
    .logo-online::after {
        width: 34px;
    }


    .logo-online::before {
        right:
            calc(100% + 12px);
    }


    .logo-online::after {
        left:
            calc(100% + 12px);
    }


    .home-pro-actions {
        width:
            min(100%, 320px);

        margin:
            0 auto
            24px;

        gap: 12px;
    }


    .home-primary-btn,
    .home-secondary-btn {
        width: 100%;

        min-width: 0;

        padding:
            14px 22px;

        font-size: 17px;
    }


    .home-pro-links {
        gap: 16px;
    }


    .home-pro-links button {
        font-size: 14px;
    }


    .menu-card,
    .rules-card,
    .tutorial-card {
        width:
            min(94vw, 760px);

        padding:
            28px 18px;

        border-radius: 18px;
    }


    .menu-card h1,
    .rules-card h1,
    .tutorial-card h1 {
        font-size: 36px;
    }


    .menu-card p,
    .rules-card p,
    .tutorial-card p {
        font-size: 16px;
    }


    .setup-option {
        width: 100%;

        min-width: 0;

        margin: 6px 0;
    }


    .tutorial-card {
        padding:
            28px 18px;
    }


    .tutorial-card h1 {
        font-size: 38px;
    }


    .tutorial-intro {
        font-size: 17px;

        margin-bottom: 24px;
    }


    .tutorial-table {
        min-height: 220px;

        margin: 24px 0;

        padding:
            18px 12px;
    }

}


/* ==========================================================
   WÜRFEL-LAYER
========================================================== */

.table-dice-layer.hidden {
    display: none !important;

    pointer-events: none !important;
}


/* ==========================================================
   AKTIONSLEISTEN
========================================================== */

.table-action-bar {
    pointer-events: auto;

    z-index: 9999;
}


.table-action-bar button {
    pointer-events: auto;
}


/* ==========================================================
   ONLINE-AKTIONSLEISTE
========================================================== */

.online-action-bar {
    position: absolute;

    left: 56%;

    bottom: 88px;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    z-index: 9999;

    pointer-events: auto;
}


.online-dark-actions {
    display: flex;

    gap: 18px;
}


.online-dark-actions.hidden {
    display: none !important;
}


.online-action-bar button {
    min-width: 190px;

    padding: 14px 26px;

    border-radius: 999px;

    font-size: 18px;

    font-weight: bold;

    pointer-events: auto;
}


/* ==========================================================
   FINALE AKTIONSLEISTEN
   EINZELSPIELER + MEHRSPIELER
========================================================== */

.single-action-bar,
.online-action-bar {
    position: absolute;

    left: 56%;

    bottom: 88px;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    z-index: 9999;

    pointer-events: auto;
}


.online-dark-actions {
    display: flex;

    gap: 18px;
}


.online-dark-actions.hidden {
    display: none !important;
}


.single-action-bar button,
.online-action-bar button {
    min-width: 190px;

    padding: 14px 26px;

    border-radius: 999px;

    font-size: 18px;

    font-weight: bold;

    pointer-events: auto;
}


/* ==========================================================
   SINGLEPLAYER-POLISH
========================================================== */

.single-action-bar {
    left: 56% !important;

    bottom: 78px !important;

    transform:
        translateX(-50%) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 18px !important;

    z-index: 9999 !important;
}


.single-action-bar button {
    min-width: 190px !important;

    height: 56px !important;

    padding:
        0 26px !important;

    border-radius:
        999px !important;

    font-size:
        18px !important;
}


.single-action-bar #knockBtn {
    margin-left: 0 !important;
}


/* ==========================================================
   PROBOTS IM PRIVATEN TISCH
========================================================== */

.seat-status.bot {
    background:
        linear-gradient(
            180deg,
            #d9b76c,
            #9d7d2c
        );

    color: #111;

    font-weight: bold;

    border-radius: 999px;

    padding: 2px 10px;

    display: inline-block;
}


.bot-controls {
    margin-top: 20px;

    padding: 18px;

    border-radius: 16px;

    border:
        1px solid
        rgba(217,183,108,0.30);

    background:
        rgba(0,0,0,0.18);
}


.bot-controls h3 {
    margin:
        0 0 10px;

    color: #d9b76c;

    font-size: 20px;
}


.bot-controls p {
    margin:
        0 0 18px;

    color:
        rgba(247,231,189,0.75);

    font-size: 15px;
}


.bot-list {
    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-bottom: 18px;
}


.bot-list-empty {
    padding: 12px;

    text-align: center;

    color:
        rgba(247,231,189,0.55);

    border:
        1px dashed
        rgba(217,183,108,0.20);

    border-radius: 10px;
}


.bot-row {
    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 12px;

    padding:
        10px 14px;

    border-radius: 10px;

    background:
        rgba(255,255,255,0.04);

    border:
        1px solid
        rgba(217,183,108,0.20);
}


.bot-row span {
    color: #f7e7bd;

    font-weight: bold;
}


.bot-row button {
    min-width: 110px;

    padding: 8px 14px;

    border-radius: 999px;

    border:
        1px solid
        rgba(217,183,108,0.40);


    background:
        linear-gradient(
            180deg,
            #7a1d1d,
            #4f1010
        );


    color: #fff;

    cursor: pointer;

    transition:
        all .2s ease;
}


.bot-row button:hover {
    transform:
        translateY(-1px);


    background:
        linear-gradient(
            180deg,
            #9c2828,
            #661414
        );
}


#addProBotBtn {
    width: 100%;

    padding: 12px;

    border-radius: 999px;

    border:
        1px solid
        rgba(217,183,108,0.40);


    background:
        linear-gradient(
            180deg,
            #1d6b37,
            #114324
        );


    color: #fff;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

    transition:
        all .2s ease;
}


#addProBotBtn:hover:not(:disabled) {
    transform:
        translateY(-2px);


    box-shadow:
        0 10px 24px
        rgba(0,0,0,0.35);
}


#addProBotBtn:disabled {
    opacity: .45;

    cursor: default;
}


@media (max-width: 700px) {

    .bot-row {
        flex-direction: column;

        align-items: stretch;
    }


    .bot-row button {
        width: 100%;
    }

}
/* ==========================================================
   STICHGEWINNER – GOLDENE MARKIERUNG
========================================================== */

.played-zone .card.trick-winner-card {
    z-index: 80;

    outline:
        3px solid
        rgba(241, 210, 126, 0.96);

    outline-offset:
        4px;

    box-shadow:
        0 22px 46px
        rgba(0, 0, 0, 0.82),

        0 0 12px
        rgba(241, 210, 126, 0.95),

        0 0 28px
        rgba(217, 183, 108, 0.72),

        0 0 48px
        rgba(217, 183, 108, 0.34);

    animation:
        trickWinnerGlow
        0.75s
        ease-in-out
        infinite
        alternate;
}


@keyframes trickWinnerGlow {

    from {
        filter:
            brightness(1);

        box-shadow:
            0 22px 46px
            rgba(0, 0, 0, 0.82),

            0 0 10px
            rgba(241, 210, 126, 0.70),

            0 0 22px
            rgba(217, 183, 108, 0.46);
    }

    to {
        filter:
            brightness(1.08);

        box-shadow:
            0 28px 54px
            rgba(0, 0, 0, 0.88),

            0 0 18px
            rgba(255, 226, 146, 1),

            0 0 36px
            rgba(217, 183, 108, 0.82),

            0 0 58px
            rgba(217, 183, 108, 0.38);
    }

}
/* ==========================================================
   PRIVATE TISCH LOBBY – PREMIUM GRAU
========================================================== */

.lobby-screen {
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 40px 20px;

    background:
        radial-gradient(
            circle at 50% 46%,
            rgba(187,190,192,0.13) 0%,
            rgba(104,106,107,0.09) 20%,
            rgba(41,43,44,0.16) 38%,
            rgba(7,8,9,0.84) 64%,
            #030405 100%
        ),
        linear-gradient(
            180deg,
            #111315 0%,
            #090a0b 48%,
            #040506 100%
        );

    color: #e7e4dc;

    position: relative;
    overflow: hidden;
}


/* feine Struktur wie auf der Startseite */

.lobby-screen::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.09;

    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 0px,
            rgba(255,255,255,0.025) 1px,
            transparent 2px,
            transparent 6px
        );

    mix-blend-mode: soft-light;

    pointer-events: none;
}


/* dezenter Lichtbereich hinter der Lobby */

.lobby-screen::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: min(980px, 86vw);
    height: min(760px, 82vh);

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(111,113,113,0.18) 0%,
            rgba(67,69,69,0.11) 36%,
            rgba(38,39,39,0.05) 56%,
            transparent 76%
        );

    border:
        1px solid
        rgba(211,196,159,0.18);

    box-shadow:
        0 0 95px rgba(0,0,0,0.48),
        inset 0 0 110px rgba(255,255,255,0.02);

    pointer-events: none;
}


/* Hauptkarte */

.lobby-card {
    width: min(620px, 92vw);

    padding: 42px 48px 34px;

    position: relative;
    z-index: 2;

    text-align: center;

    border-radius: 24px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,255,255,0.06),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            rgba(31,33,35,0.96),
            rgba(13,14,15,0.98)
        );

    border:
        1px solid
        rgba(215,199,160,0.28);

    box-shadow:
        0 32px 90px rgba(0,0,0,0.72),
        inset 0 1px 0 rgba(255,255,255,0.04);
}


/* kleine Überschrift */

.lobby-kicker {
    margin-bottom: 18px;

    color:
        rgba(190,192,194,0.70);

    font-size: 12px;

    letter-spacing: 6px;

    text-transform: uppercase;
}


/* Logo */

.lobby-logo {
    display: flex;

    flex-direction: column;

    align-items: center;

    margin-bottom: 28px;
}


.lobby-logo .logo-main {
    font-size:
        clamp(48px, 7vw, 72px);

    letter-spacing: 3px;
}


.lobby-logo .logo-online {
    margin-top: 8px;

    font-size: 16px;

    letter-spacing: 8px;
}


.lobby-logo .logo-online::before,
.lobby-logo .logo-online::after {
    width: 70px;
}


.lobby-logo .logo-online::before {
    right:
        calc(100% + 18px);
}


.lobby-logo .logo-online::after {
    left:
        calc(100% + 18px);
}


/* Titel */

.lobby-card h1 {
    margin: 0 0 12px;

    color: #d7c49b;

    font-size:
        clamp(34px, 5vw, 46px);

    line-height: 1.05;

    letter-spacing: 2px;

    text-shadow:
        0 10px 28px
        rgba(0,0,0,0.75);
}


/* Einleitung */

.lobby-intro {
    max-width: 500px;

    margin:
        0 auto 30px;

    color:
        rgba(225,224,219,0.78);

    font-size: 17px;

    line-height: 1.5;
}


/* Formular */

.lobby-card .multiplayer-form {
    display: flex;

    flex-direction: column;

    gap: 0;

    margin-top: 0;
}


/* einzelne Bereiche */

.lobby-form-block {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 13px;
}


.lobby-form-title {
    margin-bottom: 2px;

    color:
        rgba(215,196,155,0.92);

    font-size: 18px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* Eingabefelder – überschreibt bewusst alten Gold-Look */

.lobby-card .multiplayer-form input {
    width: min(420px, 100%);

    padding: 14px 18px;

    border-radius: 999px;

    border:
        1px solid
        rgba(186,188,189,0.30);

    background:
        linear-gradient(
            180deg,
            rgba(23,25,26,0.92),
            rgba(12,13,14,0.96)
        );

    color: #e7e4dc;

    text-align: center;

    font-size: 17px;

    outline: none;

    box-shadow:
        inset 0 2px 8px rgba(0,0,0,0.35),
        0 8px 20px rgba(0,0,0,0.24);

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}


.lobby-card .multiplayer-form input::placeholder {
    color:
        rgba(190,192,194,0.48);
}


.lobby-card .multiplayer-form input:focus {
    border-color:
        rgba(215,199,160,0.62);

    background:
        linear-gradient(
            180deg,
            rgba(31,33,34,0.96),
            rgba(15,16,17,0.98)
        );

    box-shadow:
        inset 0 2px 8px rgba(0,0,0,0.32),
        0 0 0 3px rgba(211,191,143,0.07),
        0 8px 22px rgba(0,0,0,0.28);
}


/* Lobby Buttons */

.lobby-primary-btn,
.lobby-secondary-btn {
    width: min(320px, 100%);

    min-width: 0;

    padding: 14px 28px;

    border-radius: 999px;

    font-size: 17px;

    font-weight: 700;
}


/* Tisch erstellen – Premium */

.lobby-primary-btn {
    background:
        linear-gradient(
            180deg,
            #d9c38f,
            #9f8552
        );

    color: #111213;

    border:
        1px solid
        rgba(245,235,208,0.40);

    box-shadow:
        0 14px 30px rgba(0,0,0,0.52),
        0 0 20px rgba(211,191,143,0.11);
}


/* Tisch beitreten – Grau */

.lobby-secondary-btn {
    background:
        linear-gradient(
            180deg,
            rgba(70,72,74,0.72),
            rgba(28,30,31,0.82)
        );

    color: #e1dfda;

    border:
        1px solid
        rgba(186,188,189,0.34);

    box-shadow:
        0 14px 30px rgba(0,0,0,0.48);
}


.lobby-primary-btn:hover,
.lobby-secondary-btn:hover {
    transform:
        translateY(-2px);
}


/* ODER Trenner */

.lobby-divider {
    width: min(440px, 100%);

    margin: 25px auto;

    display: flex;

    align-items: center;

    gap: 15px;

    color:
        rgba(188,190,191,0.46);

    font-size: 11px;

    letter-spacing: 4px;
}


.lobby-divider::before,
.lobby-divider::after {
    content: "";

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(186,188,189,0.24),
            transparent
        );
}


.lobby-divider span {
    flex-shrink: 0;
}


/* Zurück */

.lobby-back {
    margin-top: 30px;
}


.lobby-back a {
    display: inline-block;

    padding: 6px 4px;

    color:
        rgba(188,190,191,0.68);

    font-size: 15px;

    transition:
        color 0.18s ease;
}


.lobby-back a:hover {
    color: #d7c49b;
}


/* ==========================================================
   PRIVATE TISCH LOBBY – RESPONSIVE
========================================================== */

@media (max-width: 700px) {

    .lobby-screen {
        padding:
            24px 14px;
    }

    .lobby-card {
        width: 100%;

        padding:
            32px 22px 28px;

        border-radius: 20px;
    }

    .lobby-kicker {
        font-size: 10px;

        letter-spacing: 5px;
    }

    .lobby-logo {
        margin-bottom: 24px;
    }

    .lobby-logo .logo-main {
        font-size:
            clamp(42px, 15vw, 60px);
    }

    .lobby-logo .logo-online {
        font-size: 13px;

        letter-spacing: 6px;
    }

    .lobby-logo .logo-online::before,
    .lobby-logo .logo-online::after {
        width: 42px;
    }

    .lobby-logo .logo-online::before {
        right:
            calc(100% + 12px);
    }

    .lobby-logo .logo-online::after {
        left:
            calc(100% + 12px);
    }

    .lobby-card h1 {
        font-size: 34px;
    }

    .lobby-intro {
        font-size: 15px;
    }

    .lobby-primary-btn,
    .lobby-secondary-btn {
        width: 100%;
    }

    .lobby-card .multiplayer-form input {
        width: 100%;
    }

}
/* ==========================================================
   PRIVATER TISCH – WARTERLOBBY
========================================================== */

.table-waiting-card {
    width: min(650px, 92vw);

    padding: 40px 46px 34px;

    position: relative;
    z-index: 2;

    text-align: center;

    border-radius: 24px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,255,255,0.06),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            rgba(31,33,35,0.96),
            rgba(13,14,15,0.98)
        );

    border:
        1px solid
        rgba(215,199,160,0.28);

    box-shadow:
        0 32px 90px rgba(0,0,0,0.72),
        inset 0 1px 0 rgba(255,255,255,0.04);
}


/* ==========================================================
   LOGO
========================================================== */

.table-waiting-logo {
    display: flex;

    flex-direction: column;

    align-items: center;

    margin-bottom: 24px;
}


.table-waiting-logo .logo-main {
    font-size:
        clamp(46px, 6vw, 68px);

    letter-spacing: 3px;
}


.table-waiting-logo .logo-online {
    margin-top: 8px;

    font-size: 15px;

    letter-spacing: 8px;
}


.table-waiting-logo .logo-online::before,
.table-waiting-logo .logo-online::after {
    width: 65px;
}


.table-waiting-logo .logo-online::before {
    right:
        calc(100% + 18px);
}


.table-waiting-logo .logo-online::after {
    left:
        calc(100% + 18px);
}


/* ==========================================================
   TITEL / INTRO
========================================================== */

.table-waiting-card h1 {
    margin:
        0 0 10px;

    color:
        #d7c49b;

    font-size:
        clamp(34px, 5vw, 44px);

    line-height: 1.05;

    letter-spacing: 2px;

    text-shadow:
        0 10px 28px
        rgba(0,0,0,0.75);
}


.table-waiting-intro {
    max-width: 500px;

    margin:
        0 auto 26px;

    color:
        rgba(225,224,219,0.78);

    font-size: 17px;

    line-height: 1.5;
}


/* ==========================================================
   TISCHCODE
========================================================== */

.table-waiting-card .table-lobby-code {
    width:
        min(420px, 100%);

    margin:
        22px auto 30px;

    padding:
        19px 20px 18px;

    border-radius: 16px;

    border:
        1px solid
        rgba(186,188,189,0.30);

    background:
        linear-gradient(
            180deg,
            rgba(23,25,26,0.92),
            rgba(12,13,14,0.96)
        );

    box-shadow:
        inset 0 2px 8px
        rgba(0,0,0,0.35),

        0 12px 30px
        rgba(0,0,0,0.32);

    text-align: center;
}


.table-waiting-card .table-lobby-code span {
    display: block;

    margin-bottom: 7px;

    color:
        rgba(190,192,194,0.62);

    font-size: 12px;

    letter-spacing: 5px;

    text-transform: uppercase;
}


.table-waiting-card .table-lobby-code strong {
    color: #ded2b0;

    font-size: 45px;

    line-height: 1;

    letter-spacing: 10px;

    text-shadow:
        0 4px 16px
        rgba(0,0,0,0.70);
}


/* ==========================================================
   SPIELERLISTE
========================================================== */

.table-waiting-card .table-lobby-players {
    width:
        min(500px, 100%);

    margin:
        0 auto;

    text-align: left;
}


.table-waiting-card .table-lobby-players h3 {
    margin:
        0 0 14px;

    text-align: center;

    color:
        rgba(215,196,155,0.92);

    font-size: 19px;

    letter-spacing: 1px;
}


/* Sitzplatz */

.table-waiting-card .table-seat {
    min-height: 52px;

    display: grid;

    grid-template-columns:
        70px 1fr 72px;

    align-items: center;

    gap: 10px;

    margin-bottom: 9px;

    padding:
        10px 14px;

    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            rgba(48,50,52,0.54),
            rgba(22,24,25,0.70)
        );

    border:
        1px solid
        rgba(186,188,189,0.18);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.025);

    transition:
        border-color 0.18s ease,
        background 0.18s ease;
}


.table-waiting-card .table-seat:hover {
    border-color:
        rgba(211,196,159,0.30);

    background:
        linear-gradient(
            180deg,
            rgba(54,56,58,0.60),
            rgba(24,26,27,0.76)
        );
}


.table-seat-position {
    color:
        rgba(188,190,191,0.58);

    font-size: 13px;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.table-waiting-card .table-seat strong {
    color:
        #e3e1db;

    font-size: 17px;

    text-align: center;
}


/* ==========================================================
   SPIELERSTATUS
========================================================== */

.table-waiting-card .seat-status {
    justify-self: end;

    min-width: 58px;

    padding:
        5px 8px;

    border-radius: 999px;

    text-align: center;

    font-size: 10px;

    font-style: normal;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.8px;
}


/* online */

.table-waiting-card .seat-status.online {
    color:
        #dfe3df;

    background:
        rgba(73,87,76,0.75);

    border:
        1px solid
        rgba(148,170,153,0.28);
}


/* offline */

.table-waiting-card .seat-status.offline {
    color:
        #ded8d6;

    background:
        rgba(91,62,60,0.72);

    border:
        1px solid
        rgba(171,123,119,0.28);
}


/* frei */

.table-waiting-card .seat-status.empty {
    color:
        rgba(188,190,191,0.54);

    background:
        rgba(255,255,255,0.045);

    border:
        1px solid
        rgba(186,188,189,0.12);
}


/* ==========================================================
   STATUS TEXT
========================================================== */

.table-waiting-card .table-lobby-status {
    margin-top: 23px;

    color:
        rgba(220,209,181,0.88);

    font-size: 16px;

    font-weight: 700;

    min-height: 24px;
}


/* ==========================================================
   BUTTONS
========================================================== */

.table-waiting-actions {
    margin-top: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;
}


.table-waiting-primary,
.table-waiting-secondary {
    min-width: 205px;

    padding:
        14px 26px;

    border-radius: 999px;

    font-size: 16px;

    font-weight: 700;
}


/* Spiel starten */

.table-waiting-primary {
    background:
        linear-gradient(
            180deg,
            #d9c38f,
            #9f8552
        );

    color: #111213;

    border:
        1px solid
        rgba(245,235,208,0.40);

    box-shadow:
        0 14px 30px
        rgba(0,0,0,0.52),

        0 0 20px
        rgba(211,191,143,0.11);
}


.table-waiting-primary:hover:not(:disabled) {
    transform:
        translateY(-2px);
}


/* Einladung kopieren */

.table-waiting-secondary {
    background:
        linear-gradient(
            180deg,
            rgba(70,72,74,0.72),
            rgba(28,30,31,0.82)
        );

    color: #e1dfda;

    border:
        1px solid
        rgba(186,188,189,0.34);

    box-shadow:
        0 14px 30px
        rgba(0,0,0,0.48);
}


.table-waiting-secondary:hover {
    transform:
        translateY(-2px);
}


/* deaktivierter Startbutton */

.table-waiting-primary:disabled {
    opacity: 0.30;

    filter:
        grayscale(0.45);

    cursor: not-allowed;

    transform: none;

    box-shadow:
        0 8px 20px
        rgba(0,0,0,0.30);
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 700px) {

    .table-waiting-card {
        width: 100%;

        padding:
            30px 20px 26px;

        border-radius: 20px;
    }


    .table-waiting-logo .logo-main {
        font-size:
            clamp(40px, 14vw, 58px);
    }


    .table-waiting-logo .logo-online {
        font-size: 12px;

        letter-spacing: 6px;
    }


    .table-waiting-logo .logo-online::before,
    .table-waiting-logo .logo-online::after {
        width: 38px;
    }


    .table-waiting-logo .logo-online::before {
        right:
            calc(100% + 11px);
    }


    .table-waiting-logo .logo-online::after {
        left:
            calc(100% + 11px);
    }


    .table-waiting-card h1 {
        font-size: 32px;
    }


    .table-waiting-intro {
        font-size: 15px;
    }


    .table-waiting-card .table-lobby-code strong {
        font-size: 36px;

        letter-spacing: 7px;
    }


    .table-waiting-card .table-seat {
        grid-template-columns:
            55px 1fr 60px;

        padding:
            10px 10px;

        gap: 6px;
    }


    .table-waiting-card .table-seat strong {
        font-size: 15px;
    }


    .table-seat-position {
        font-size: 11px;
    }


    .table-waiting-card .seat-status {
        min-width: 52px;

        font-size: 9px;
    }


    .table-waiting-actions {
        flex-direction: column;
    }


    .table-waiting-primary,
    .table-waiting-secondary {
        width: 100%;
    }

}
/* ==========================================================
   FREIES SPIEL
========================================================== */

.free-play-card {
    width: min(700px, 92vw);

    padding:
        42px 48px 36px;

    text-align: center;
}


/* kleine obere Beschriftung */

.free-play-kicker {
    margin-bottom: 18px;

    color:
        rgba(190,192,194,0.70);

    font-size: 12px;

    letter-spacing: 6px;

    text-transform: uppercase;
}


/* Logo */

.free-play-logo {
    display: flex;

    flex-direction: column;

    align-items: center;

    margin-bottom: 28px;
}


.free-play-logo .logo-main {
    font-size:
        clamp(48px, 6vw, 72px);

    letter-spacing: 3px;
}


.free-play-logo .logo-online {
    margin-top: 8px;

    font-size: 15px;

    letter-spacing: 8px;
}


.free-play-logo .logo-online::before,
.free-play-logo .logo-online::after {
    width: 65px;
}


.free-play-logo .logo-online::before {
    right:
        calc(100% + 18px);
}


.free-play-logo .logo-online::after {
    left:
        calc(100% + 18px);
}


/* Titel */

.free-play-card h1 {
    margin:
        0 0 14px;

    color:
        #d7c49b;

    font-size:
        clamp(36px, 5vw, 46px);

    letter-spacing: 2px;

    line-height: 1.05;

    text-shadow:
        0 10px 28px
        rgba(0,0,0,0.75);
}


/* Intro */

.free-play-intro {
    max-width: 560px;

    margin:
        0 auto 30px;

    color:
        rgba(225,224,219,0.78);

    font-size: 17px;

    line-height: 1.5;
}


/* Tisch-Auswahl */

.free-play-options {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    width:
        min(560px, 100%);

    margin:
        0 auto 28px;
}


.free-play-option {
    min-width: 0;

    width: 100%;

    min-height: 118px;

    margin: 0;

    padding:
        20px 18px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 7px;
}


.free-play-option-title {
    display: block;

    font-size: 21px;

    font-weight: 700;
}


.free-play-option-text {
    display: block;

    color:
        rgba(214,213,209,0.60);

    font-size: 13px;

    font-weight: 400;

    line-height: 1.35;
}


.free-play-option.active
.free-play-option-text {
    color:
        rgba(234,219,180,0.72);
}


/* Spiel beginnen */

.free-play-actions {
    display: flex;

    justify-content: center;

    margin-top: 8px;
}


.free-play-start-btn {
    min-width: 250px;

    padding:
        15px 34px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #d9c38f,
            #9f8552
        );

    color: #111213;

    border:
        1px solid
        rgba(245,235,208,0.40);

    font-size: 17px;

    font-weight: 700;

    box-shadow:
        0 16px 34px
        rgba(0,0,0,0.58),

        0 0 22px
        rgba(211,191,143,0.14);
}


.free-play-start-btn:hover {
    transform:
        translateY(-2px);
}


/* Zurück */

.free-play-back-btn {
    padding:
        6px 4px;

    background:
        transparent;

    border: none;

    box-shadow: none;

    color:
        rgba(188,190,191,0.68);

    font-size: 15px;

    font-weight: 500;
}


.free-play-back-btn:hover {
    color: #d7c49b;

    transform: none;

    box-shadow: none;
}


/* ==========================================================
   FREIES SPIEL RESPONSIVE
========================================================== */

@media (max-width: 700px) {

    .free-play-card {
        width: 100%;

        padding:
            32px 22px 28px;
    }


    .free-play-logo .logo-main {
        font-size:
            clamp(42px, 15vw, 60px);
    }


    .free-play-logo .logo-online {
        font-size: 12px;

        letter-spacing: 6px;
    }


    .free-play-logo .logo-online::before,
    .free-play-logo .logo-online::after {
        width: 40px;
    }


    .free-play-logo .logo-online::before {
        right:
            calc(100% + 12px);
    }


    .free-play-logo .logo-online::after {
        left:
            calc(100% + 12px);
    }


    .free-play-card h1 {
        font-size: 34px;
    }


    .free-play-intro {
        font-size: 15px;
    }


    .free-play-options {
        grid-template-columns: 1fr;
    }


    .free-play-option {
        min-height: 94px;
    }


    .free-play-start-btn {
        width: 100%;
    }

}
/* ==========================================================
   KLOPFENTSCHEIDUNG AM SPIELER
========================================================== */

.knock-decision-inline {
    display: block;

    width: max-content;

    margin:
        7px auto
        -1px;

    padding:
        4px 11px;

    border-radius:
        999px;

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;

    white-space:
        nowrap;

    animation:
        knockDecisionAppear
        0.22s
        ease-out;
}


.knock-decision-inline.hold {
    color:
        #17130b;

    background:
        linear-gradient(
            180deg,
            #ead7a6,
            #b79a5d
        );

    border:
        1px solid
        rgba(255,239,199,0.82);

    box-shadow:
        0 0 14px
        rgba(225,199,135,0.42),

        0 5px 12px
        rgba(0,0,0,0.55);
}


.knock-decision-inline.pass {
    color:
        #f5ddd7;

    background:
        linear-gradient(
            180deg,
            #71342e,
            #351714
        );

    border:
        1px solid
        rgba(215,130,116,0.72);

    box-shadow:
        0 0 12px
        rgba(173,74,59,0.30),

        0 5px 12px
        rgba(0,0,0,0.55);
}


@keyframes knockDecisionAppear {

    from {
        opacity: 0;

        transform:
            translateY(-4px)
            scale(0.88);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}
/* ==========================================================
   SPIELTISCH – ANTHRAZIT / CHAMPAGNER DESIGN
   Der eigentliche grüne Spieltisch bleibt unverändert.
========================================================== */


/* ==========================================================
   SPIELBEREICH / HINTERGRUND
========================================================== */

.game-screen {
    background: #050607;
}


.game {
    background:
        radial-gradient(
            circle at 56% 48%,
            rgba(156, 159, 161, 0.10),
            rgba(51, 53, 55, 0.08) 34%,
            transparent 58%
        ),
        linear-gradient(
            180deg,
            #151719 0%,
            #090a0b 52%,
            #050607 100%
        );
}


/*
    Sehr dezente Struktur im Hintergrund.
    Der Tisch selbst wird davon nicht verändert.
*/
.game::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.08;

    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 0px,
            rgba(255,255,255,0.025) 1px,
            transparent 2px,
            transparent 6px
        );

    mix-blend-mode: soft-light;

    z-index: 0;
}


/* ==========================================================
   HEADER
========================================================== */

.game header h1,
header h1 {
    color: #d7c49b;

    text-shadow:
        0 5px 18px rgba(0,0,0,0.88),
        0 0 16px rgba(211,191,143,0.08);
}


.header-actions button {
    background:
        linear-gradient(
            180deg,
            #3d4042,
            #1c1e20
        );

    color: #e3e1db;

    border:
        1px solid
        rgba(208,195,164,0.38);

    box-shadow:
        0 8px 22px
        rgba(0,0,0,0.52);
}


.header-actions button:hover {
    border-color:
        rgba(220,203,164,0.64);

    box-shadow:
        0 12px 28px rgba(0,0,0,0.62),
        0 0 15px rgba(211,191,143,0.10);
}


/* ==========================================================
   SIDEBAR
   STRÖM / SIEGE / SPIELWERT / STICHVERLAUF
========================================================== */

.scoreboard,
.wins-board,
.gamevalue-board,
.history-board {
    border:
        1px solid
        rgba(215,199,160,0.32);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,255,255,0.055),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            rgba(35,37,39,0.98),
            rgba(15,16,17,0.98)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 14px 34px rgba(0,0,0,0.62);
}


.scoreboard h3,
.wins-board h3,
.gamevalue-board h3,
.history-board h3 {
    color: #d7c49b;

    text-shadow:
        0 3px 12px
        rgba(0,0,0,0.55);
}


.score-row {
    color:
        rgba(226,224,218,0.90);
}


.wins-count,
.game-value {
    color: #ece9e1;
}


.knock-info {
    color:
        rgba(207,204,196,0.76);
}


/* Stichverlauf */

.history-trick {
    border-top:
        1px solid
        rgba(211,196,159,0.22);
}


.history-title {
    color: #cbb98d;
}


.history-title span {
    color:
        rgba(232,229,221,0.90);
}


.history-mini-card span {
    background:
        rgba(22,23,24,0.96);

    border:
        1px solid
        rgba(211,196,159,0.42);

    color: #e6e2d9;
}


/* ==========================================================
   SPIELERNAMEN
========================================================== */

.name {
    background:
        linear-gradient(
            180deg,
            rgba(48,50,52,0.96),
            rgba(20,21,22,0.97)
        );

    border:
        1px solid
        rgba(215,199,160,0.48);

    color: #e7e4dc;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.045),
        0 8px 22px rgba(0,0,0,0.62);
}


/* ==========================================================
   INFOLEISTE UNTEN
========================================================== */

.info {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,255,255,0.045),
            transparent 55%
        ),
        linear-gradient(
            180deg,
            rgba(41,43,45,0.97),
            rgba(17,18,19,0.98)
        );

    border:
        1px solid
        rgba(215,199,160,0.42);

    color: #e8e5de;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 12px 32px rgba(0,0,0,0.62);
}


/* ==========================================================
   AUSGESTIEGEN / GEFALTETE KARTEN
========================================================== */

.folded-label {
    background:
        linear-gradient(
            180deg,
            rgba(53,55,57,0.96),
            rgba(22,23,24,0.97)
        );

    border:
        1px solid
        rgba(211,196,159,0.46);

    color: #dedbd4;

    box-shadow:
        0 8px 20px
        rgba(0,0,0,0.65);
}


/* ==========================================================
   WÜRFEL – GROSSES FENSTER
========================================================== */

.dice-overlay {
    background:
        rgba(3,4,5,0.82);

    backdrop-filter:
        blur(5px);
}


.dice-box {
    border:
        1px solid
        rgba(215,199,160,0.44);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,255,255,0.065),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            #292b2d,
            #111213
        );

    box-shadow:
        0 30px 90px rgba(0,0,0,0.90),
        0 0 30px rgba(211,191,143,0.10),
        inset 0 1px 0 rgba(255,255,255,0.04);
}


.dice-box h2 {
    color: #d7c49b;
}


.dice-round-info {
    color: #dedbd3;
}


.dice-player {
    background:
        linear-gradient(
            180deg,
            rgba(58,60,62,0.80),
            rgba(28,29,30,0.86)
        );

    border:
        1px solid
        rgba(199,191,171,0.28);
}


.dice-player.winner {
    border-color:
        rgba(221,205,166,0.80);

    box-shadow:
        0 0 26px
        rgba(211,191,143,0.22);
}


.dice-player-name {
    color: #e6e3dc;
}


.dice-total {
    color: #d7c49b;
}


.dice-winner {
    color: #eee9dc;
}


/* ==========================================================
   WÜRFEL AUF DEM TISCH
========================================================== */

.table-dice-group {
    background:
        linear-gradient(
            180deg,
            rgba(45,47,49,0.96),
            rgba(18,19,20,0.97)
        );

    border:
        1px solid
        rgba(211,196,159,0.42);

    box-shadow:
        0 10px 28px
        rgba(0,0,0,0.65);
}


.table-dice-group.clickable {
    border-color:
        rgba(224,207,167,0.76);

    box-shadow:
        0 0 20px rgba(211,191,143,0.18),
        0 16px 34px rgba(0,0,0,0.75);
}


.table-dice-name {
    color: #e7e4dc;
}


.table-dice-total {
    color: #d7c49b;
}


/* ==========================================================
   SPIELAKTIONEN
========================================================== */

.table-action-bar button {
    box-shadow:
        0 10px 26px
        rgba(0,0,0,0.58);
}


/*
    Haupt-/neutrale Aktion:
    Grau statt Grün.
*/
.table-secondary-btn {
    background:
        linear-gradient(
            180deg,
            #484b4d,
            #242628
        );

    color: #e7e4dc;

    border:
        1px solid
        rgba(211,196,159,0.48);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 10px 26px rgba(0,0,0,0.58);
}


.table-secondary-btn:hover {
    border-color:
        rgba(224,207,167,0.72);

    box-shadow:
        0 0 18px rgba(211,191,143,0.12),
        0 14px 30px rgba(0,0,0,0.72);
}


/*
    Klopfen bleibt bewusst rötlich,
    damit sich die Aktion klar unterscheidet.
*/
.table-knock-btn {
    background:
        linear-gradient(
            180deg,
            #71342e,
            #351714
        );

    color: #f1e3df;

    border:
        1px solid
        rgba(215,130,116,0.64);
}


.table-knock-btn:hover {
    border-color:
        rgba(225,151,137,0.78);

    box-shadow:
        0 0 18px rgba(173,74,59,0.26),
        0 14px 30px rgba(0,0,0,0.72);
}


/* ==========================================================
   KLOPFEN / HALTEN / PASSEN MODAL
========================================================== */

.knock-modal {
    background:
        rgba(3,4,5,0.72);

    backdrop-filter: none;
}


.knock-box {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,255,255,0.065),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            #292b2d,
            #111213
        );

    border:
        1px solid
        rgba(215,199,160,0.42);

    box-shadow:
        0 28px 80px rgba(0,0,0,0.86),
        inset 0 1px 0 rgba(255,255,255,0.04);
}


.knock-box h2 {
    color: #d7c49b;
}


.knock-box p {
    color:
        rgba(229,226,218,0.88);
}


/*
    Buttons im Entscheidungsfenster
*/
.knock-box button {
    background:
        linear-gradient(
            180deg,
            #46494b,
            #222426
        );

    color: #e7e4dc;

    border:
        1px solid
        rgba(211,196,159,0.42);
}


.knock-box button:hover {
    border-color:
        rgba(224,207,167,0.70);

    box-shadow:
        0 0 16px rgba(211,191,143,0.12),
        0 12px 28px rgba(0,0,0,0.66);
}
/* ========================================================================
   ========================================================================
   7-STRÖM – RESPONSIVE SPIELTISCH
   TABLET + SMARTPHONE
   ========================================================================
   WICHTIG:
   DIESER BLOCK MUSS GANZ UNTEN IN DER style.css STEHEN.
   ========================================================================
   ======================================================================== */


/* ========================================================================
   TABLET
   701px – 1100px
   ======================================================================== */

@media (min-width: 701px) and (max-width: 1100px) {

    /* --------------------------------------------------------------------
       SPIELFLÄCHE
       -------------------------------------------------------------------- */

    .game-screen,
    .game-screen .game {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: hidden;
    }


    /* --------------------------------------------------------------------
       HEADER
       -------------------------------------------------------------------- */

    .game header {
        top: 10px;
        left: 14px;
        right: 14px;
    }

    .game header h1 {
        font-size: 28px;
    }

    .game .header-actions {
        gap: 8px;
    }

    .game .header-actions button {
        padding: 9px 15px;
        font-size: 13px;
    }


    /* --------------------------------------------------------------------
       SIDEBAR
       -------------------------------------------------------------------- */

    .game .sidebar {
        left: 10px;
        top: 62px;
        width: 220px;
        z-index: 150;
    }

    .game .scoreboard,
    .game .wins-board,
    .game .gamevalue-board,
    .game .history-board {
        padding: 7px 9px;
        margin-bottom: 6px;
        border-radius: 10px;
    }

    .game .scoreboard h3,
    .game .wins-board h3,
    .game .gamevalue-board h3,
    .game .history-board h3 {
        margin-bottom: 4px;
        font-size: 15px;
    }

    .game .score-row {
        margin-bottom: 2px;
        font-size: 12px;
    }

    .game .wins-count {
        font-size: 14px;
    }

    .game .game-value {
        font-size: 18px;
    }

    .game .knock-info {
        font-size: 10px;
    }

    .game .history-board {
        height: 205px;
        overflow: hidden;
    }

    .game .trick-history {
        height: 165px;
        overflow-y: auto;
    }


    /* --------------------------------------------------------------------
       TISCH
       -------------------------------------------------------------------- */

    .game .table {
        left: 61%;
        top: 50%;
        width: calc(100vw - 245px);
        max-width: none;
        transform: translate(-50%, -50%);
    }


    /* --------------------------------------------------------------------
       SPIELERNAMEN
       -------------------------------------------------------------------- */

    .game .name {
        padding: 5px 10px;
        margin-bottom: 4px;
        font-size: 13px;
    }


    /* --------------------------------------------------------------------
       EIGENE KARTEN
       -------------------------------------------------------------------- */

    .game .hand .card {
        width: 92px;
        height: 135px;
        margin-left: -12px;
    }

    .game .hand .card:first-child {
        margin-left: 0;
    }


    /* --------------------------------------------------------------------
       GEGNERKARTEN
       -------------------------------------------------------------------- */

    .game .bot-cards .card {
        width: 70px;
        height: 103px;
        margin-left: -36px;
    }

    .game .bot-cards .card:first-child {
        margin-left: 0;
    }


    /* --------------------------------------------------------------------
       AUSGESPIELTE KARTEN
       -------------------------------------------------------------------- */

    .game .played-zone {
        min-width: 90px;
        min-height: 130px;
    }

    .game .played-zone .card {
        width: 78px;
        height: 114px;
    }

    .game .played-zone.north {
        top: 120px;
    }

    .game .played-zone.west {
        left: 190px;
    }

    .game .played-zone.east {
        right: 190px;
    }

    .game .played-zone.south {
        bottom: 145px;
    }


    /* --------------------------------------------------------------------
       AKTIONSLEISTE
       -------------------------------------------------------------------- */

    .game .single-action-bar,
    .game .online-action-bar {
        left: calc(50% + 115px) !important;
        bottom: 62px !important;
        width: calc(100vw - 270px);
        max-width: 650px;

        transform: translateX(-50%) !important;

        gap: 8px !important;
    }

    .game .single-action-bar button,
    .game .online-action-bar button {
        min-width: 0 !important;
        height: 44px !important;

        flex: 1 1 0;

        padding: 0 12px !important;

        font-size: 13px !important;

        white-space: nowrap;
    }

    .game .online-dark-actions {
        gap: 8px;
    }


    /* --------------------------------------------------------------------
       INFO UNTEN
       -------------------------------------------------------------------- */

    .game .info {
        left: calc(50% + 115px);

        bottom: 8px;

        width: calc(100vw - 270px);
        min-width: 0;
        max-width: 650px;

        padding: 9px 12px;

        font-size: 14px;
    }


    /* --------------------------------------------------------------------
       MODALS
       -------------------------------------------------------------------- */

    .game .knock-box {
        width: min(430px, calc(100vw - 40px));
        max-height: 85dvh;
        overflow-y: auto;
    }


    /* --------------------------------------------------------------------
       WÜRFEL
       -------------------------------------------------------------------- */

    .game .table-dice-layer {
        gap: 12px;
        padding: 20px;
        flex-wrap: wrap;
    }

    .game .table-dice-group {
        min-width: 120px;
        padding: 10px;
    }

    .game .table-die {
        width: 42px;
        height: 42px;
    }

}



/* ========================================================================
   SMARTPHONE
   BIS 700px
   ======================================================================== */

@media (max-width: 700px) {

    /* --------------------------------------------------------------------
       GRUNDLAGE
       -------------------------------------------------------------------- */

    html,
    body {
        width: 100%;
        max-width: 100%;
        height: 100%;
        margin: 0;
        overflow: hidden;

        overscroll-behavior: none;
    }

    .app,
    .game-screen,
    .game-screen .game {
        width: 100vw !important;

        height: 100vh !important;
        height: 100dvh !important;

        min-height: 100vh !important;
        min-height: 100dvh !important;

        max-width: 100vw !important;

        overflow: hidden !important;
    }

    .game-screen .game {
        position: relative;

        background:
            radial-gradient(
                circle at 50% 45%,
                rgba(90, 94, 96, 0.15),
                transparent 50%
            ),
            linear-gradient(
                180deg,
                #090a0b 0%,
                #020303 100%
            );
    }


    /* --------------------------------------------------------------------
       HEADER
       -------------------------------------------------------------------- */

    .game header {
        position: absolute;

        top: 5px;
        left: 6px;
        right: 6px;

        height: 40px;

        display: flex;
        align-items: center;
        justify-content: flex-end;

        z-index: 1000;
    }

    /*
       Auf dem Handy brauchen wir den großen Titel nicht.
       Der Platz gehört dem Spiel.
    */

    .game header h1 {
        display: none !important;
    }

    .game .header-actions {
        width: 100%;

        display: flex;
        justify-content: space-between;
        align-items: center;

        gap: 6px;
    }

    .game .header-actions button {
        min-width: 0;

        height: 34px;

        padding: 0 11px;

        border-radius: 8px;

        font-size: 11px;
        line-height: 1;
    }


    /* --------------------------------------------------------------------
       MOBILE HUD
       STRÖM + SPIELWERT OBEN
       -------------------------------------------------------------------- */

    .game .sidebar {
        position: absolute !important;

        top: 49px !important;
        left: 6px !important;
        right: 6px !important;

        width: auto !important;
        height: 82px;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1.4fr)
            minmax(0, 0.8fr);

        gap: 6px;

        overflow: visible !important;

        z-index: 900 !important;
    }


    /* --------------------------------------------------------------------
       STRÖM-ANZEIGE
       -------------------------------------------------------------------- */

    .game .scoreboard {
        width: auto;
        height: 82px;

        margin: 0 !important;

        padding: 5px 7px !important;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        grid-template-rows:
            18px
            1fr
            1fr;

        column-gap: 7px;
        row-gap: 1px;

        border-width: 1px !important;
        border-radius: 9px !important;

        overflow: hidden;
    }

    .game .scoreboard h3 {
        grid-column: 1 / -1;

        margin: 0 !important;

        font-size: 12px !important;
        line-height: 16px !important;

        letter-spacing: 0.5px;
    }

    .game .scoreboard .score-row {
        min-width: 0;

        margin: 0 !important;

        padding: 0 3px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 4px;

        font-size: 10px !important;
        line-height: 15px;
    }

    .game .scoreboard .score-row span:first-child {
        min-width: 0;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;
    }

    .game .scoreboard .chalk {
        flex: 0 0 auto;

        font-size: 13px;
        font-weight: bold;
    }


    /* --------------------------------------------------------------------
       SPIELWERT
       -------------------------------------------------------------------- */

    .game .gamevalue-board {
        width: auto;
        height: 82px;

        margin: 0 !important;

        padding: 6px 5px !important;

        display: flex;

        flex-direction: column;

        align-items: center;
        justify-content: center;

        border-width: 1px !important;
        border-radius: 9px !important;

        overflow: hidden;
    }

    .game .gamevalue-board h3 {
        margin: 0 0 2px !important;

        font-size: 11px !important;
        line-height: 14px;
    }

    .game .game-value {
        font-size: 18px !important;
        line-height: 20px;
    }

    .game .knock-info {
        width: 100%;

        margin-top: 2px !important;

        padding: 0 2px;

        overflow: hidden;

        color: rgba(230, 227, 219, 0.72);

        font-size: 8px !important;
        line-height: 10px;

        text-align: center;

        text-overflow: ellipsis;
    }


    /* --------------------------------------------------------------------
       AUF DEM HANDY SEKUNDÄRE BOARDS AUSBLENDEN

       Siege und vollständiger Stichverlauf dürfen nicht den eigentlichen
       Spieltisch verdrängen.
       -------------------------------------------------------------------- */

    .game .wins-board,
    .game .history-board {
        display: none !important;
    }


    /* --------------------------------------------------------------------
       TISCH
       -------------------------------------------------------------------- */

    .game .table {
        position: absolute !important;

        top: 137px !important;
        bottom: 132px !important;

        left: 4px !important;
        right: 4px !important;

        width: auto !important;
        height: auto !important;

        max-width: none !important;

        aspect-ratio: auto !important;

        transform: none !important;

        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;

        overflow: visible !important;

        z-index: 20;
    }


    /* --------------------------------------------------------------------
       ALLGEMEIN SPIELER
       -------------------------------------------------------------------- */

    .game .player {
        z-index: 30;
    }

    .game .name {
        max-width: 115px;

        margin-bottom: 3px !important;

        padding: 3px 7px !important;

        overflow: hidden;

        border-radius: 6px !important;

        font-size: 10px !important;
        line-height: 14px;

        white-space: nowrap;
        text-overflow: ellipsis;
    }


    /* --------------------------------------------------------------------
       NORD
       -------------------------------------------------------------------- */

    .game .player.top {
        top: 2% !important;

        left: 50% !important;

        transform: translateX(-50%) !important;
    }


    /* --------------------------------------------------------------------
       WEST
       -------------------------------------------------------------------- */

    .game .player.left {
        top: 38% !important;

        left: 2% !important;

        transform: none !important;
    }


    /* --------------------------------------------------------------------
       OST
       -------------------------------------------------------------------- */

    .game .player.right {
        top: 38% !important;

        right: 2% !important;

        transform: none !important;
    }


    /* --------------------------------------------------------------------
       EIGENER SPIELER
       -------------------------------------------------------------------- */

    .game .player.bottom {
        bottom: 2px !important;

        left: 50% !important;

        width: 100%;

        transform: translateX(-50%) !important;
    }

    .game .player.bottom .name {
        margin-top: 2px;
        margin-bottom: 2px !important;
    }


    /* --------------------------------------------------------------------
       GEGNERKARTEN
       -------------------------------------------------------------------- */

    .game .bot-cards {
        gap: 0 !important;
    }

    .game .bot-cards .card {
        width: 44px !important;
        height: 64px !important;

        margin-left: -27px !important;

        border-radius: 5px !important;

        box-shadow:
            0 5px 12px
            rgba(0, 0, 0, 0.70) !important;
    }

    .game .bot-cards .card:first-child {
        margin-left: 0 !important;
    }

    .game .bot-cards .card img {
        border-radius: 5px !important;
    }


    /* --------------------------------------------------------------------
       EIGENE HAND

       Vier Karten bleiben groß genug zum Antippen.
       -------------------------------------------------------------------- */

    .game .hand {
        width: 100%;

        display: flex;

        justify-content: center;
        align-items: flex-end;

        gap: 0 !important;

        overflow: visible;
    }

    .game .hand .card {
        width: clamp(70px, 22vw, 88px) !important;
        height: auto !important;

        aspect-ratio: 146 / 214;

        flex: 0 0 auto;

        margin-left: -7px !important;

        border-radius: 8px !important;

        box-shadow:
            0 9px 19px
            rgba(0, 0, 0, 0.78) !important;
    }

    .game .hand .card:first-child {
        margin-left: 0 !important;

        transform: rotate(-3deg) !important;
    }

    .game .hand .card:nth-child(2) {
        transform:
            rotate(-1deg)
            translateY(-3px) !important;
    }

    .game .hand .card:nth-child(3) {
        transform:
            rotate(1deg)
            translateY(-3px) !important;
    }

    .game .hand .card:nth-child(4) {
        transform:
            rotate(3deg) !important;
    }

    .game .hand .card img {
        border-radius: 8px !important;
    }


    /* --------------------------------------------------------------------
       ANTIPPAKTION DER KARTEN

       Desktop-Hover darf auf dem Handy nicht 40px nach oben springen.
       -------------------------------------------------------------------- */

    .game .card.playable:hover {
        transform: inherit;

        box-shadow:
            0 9px 19px
            rgba(0, 0, 0, 0.78);
    }

    .game .hand .card.playable:active {
        z-index: 999;

        transform:
            translateY(-8px)
            scale(1.03) !important;
    }


    /* --------------------------------------------------------------------
       AUSGESPIELTE KARTEN

       Diese werden auf dem Handy unabhängig von den großen Desktop-
       Pixelwerten sauber um die Tischmitte angeordnet.
       -------------------------------------------------------------------- */

    .game .played-zone {
        position: fixed !important;

        width: auto !important;
        height: auto !important;

        min-width: 0 !important;
        min-height: 0 !important;

        display: flex;

        align-items: center;
        justify-content: center;

        z-index: 150 !important;

        pointer-events: none;
    }

    .game .played-zone .card {
        width: clamp(51px, 14vw, 61px) !important;
        height: auto !important;

        aspect-ratio: 138 / 202;

        border-radius: 6px !important;

        box-shadow:
            0 7px 18px
            rgba(0, 0, 0, 0.78) !important;
    }

    .game .played-zone .card img {
        border-radius: 6px !important;
    }


    /* Nord – etwas oberhalb der Mitte */

    .game .played-zone.north {
        top: 42dvh !important;
        left: 50vw !important;

        right: auto !important;
        bottom: auto !important;

        transform:
            translate(-50%, -50%) !important;
    }


    /* West */

    .game .played-zone.west {
        top: 49dvh !important;
        left: calc(50vw - 47px) !important;

        right: auto !important;
        bottom: auto !important;

        transform:
            translate(-50%, -50%)
            rotate(-5deg) !important;
    }


    /* Ost */

    .game .played-zone.east {
        top: 49dvh !important;
        left: calc(50vw + 47px) !important;

        right: auto !important;
        bottom: auto !important;

        transform:
            translate(-50%, -50%)
            rotate(5deg) !important;
    }


    /* Süd */

    .game .played-zone.south {
        top: 56dvh !important;
        left: 50vw !important;

        right: auto !important;
        bottom: auto !important;

        transform:
            translate(-50%, -50%) !important;
    }


    /* Name unter ausgespielter Karte auf dem Handy kleiner */

    .game .played-by {
        bottom: -14px !important;

        font-size: 8px !important;
        line-height: 10px;
    }


    /* --------------------------------------------------------------------
       STICHGEWINNER
       -------------------------------------------------------------------- */

    .game .played-zone .card.trick-winner-card {
        outline-width: 2px !important;
        outline-offset: 2px !important;
    }


    /* --------------------------------------------------------------------
       AKTIONSLEISTE

       Einspieler:
       Karten ansehen | 3 Dunkel | Klopfen

       Online:
       Karten ansehen | 3 Dunkel | Klopfen

       Alles passt vollständig in die Bildschirmbreite.
       -------------------------------------------------------------------- */

    .game .table-action-bar,
    .game .single-action-bar,
    .game .online-action-bar {
        position: absolute !important;

        left: 6px !important;
        right: 6px !important;

        bottom: 43px !important;

        width: auto !important;
        max-width: none !important;

        min-height: 38px;

        transform: none !important;

        display: flex !important;

        align-items: stretch !important;
        justify-content: center !important;

        gap: 5px !important;

        z-index: 10000 !important;

        pointer-events: auto !important;
    }


    /* Online-Wrapper verhält sich wie direkte Buttons */

    .game .online-dark-actions {
        display: contents !important;
    }

    .game .online-dark-actions.hidden {
        display: none !important;
    }


    /* Buttons */

    .game .table-action-bar button,
    .game .single-action-bar button,
    .game .online-action-bar button {
        width: auto !important;

        min-width: 0 !important;
        max-width: none !important;

        height: 38px !important;
        min-height: 38px !important;

        flex: 1 1 0 !important;

        margin: 0 !important;

        padding: 0 5px !important;

        border-radius: 8px !important;

        font-size: clamp(9px, 2.8vw, 12px) !important;
        font-weight: 700 !important;
        line-height: 1.05 !important;

        white-space: normal;

        overflow: hidden;

        text-align: center;

        pointer-events: auto !important;

        touch-action: manipulation;
    }


    /* Falls nur Klopfen sichtbar ist, nicht über den ganzen Bildschirm */

    .game .online-action-bar > #knockBtn:only-child {
        max-width: 150px !important;
    }


    /* --------------------------------------------------------------------
       INFOLEISTE UNTEN
       -------------------------------------------------------------------- */

    .game .info {
        position: absolute !important;

        left: 6px !important;
        right: 6px !important;

        bottom: 5px !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        min-height: 30px;

        transform: none !important;

        display: flex;

        align-items: center;
        justify-content: center;

        padding: 5px 8px !important;

        border-radius: 7px !important;

        font-size: clamp(9px, 2.6vw, 11px) !important;
        line-height: 1.15 !important;

        z-index: 9990 !important;
    }


    /* --------------------------------------------------------------------
       KLOPFEN / HALTEN / PASSEN
       -------------------------------------------------------------------- */

    .game .knock-modal,
    .knock-modal {
        padding: 12px;

        z-index: 20000;
    }

    .game .knock-box,
    .knock-box {
        width: calc(100vw - 24px) !important;
        max-width: 420px !important;

        max-height: calc(100dvh - 30px);

        overflow-y: auto;

        padding: 17px 14px !important;

        border-width: 1px !important;
        border-radius: 13px !important;
    }

    .game .knock-box h2,
    .knock-box h2 {
        margin-bottom: 8px !important;

        font-size: 21px !important;
    }

    .game .knock-box p,
    .knock-box p {
        margin-bottom: 14px !important;

        font-size: 13px !important;
        line-height: 1.4;
    }

    .game .knock-actions,
    .knock-actions {
        display: flex;

        gap: 7px;
    }

    .game .knock-actions button,
    .knock-actions button {
        min-width: 0 !important;

        flex: 1;

        min-height: 42px;

        padding: 8px !important;

        font-size: 13px !important;
    }


    /* --------------------------------------------------------------------
       WÜRFELN AUF DEM ONLINE-TISCH
       -------------------------------------------------------------------- */

    .game .table-dice-layer {
        position: fixed !important;

        top: 135px !important;
        left: 6px !important;
        right: 6px !important;
        bottom: 92px !important;

        width: auto !important;
        height: auto !important;

        padding: 8px !important;

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-auto-rows:
            min-content;

        align-content: center;
        justify-content: stretch;

        gap: 7px !important;

        background:
            rgba(0, 0, 0, 0.36);

        border-radius: 14px;

        backdrop-filter: blur(2px);

        z-index: 15000 !important;
    }

    .game .table-dice-layer.hidden {
        display: none !important;
    }

    .game .table-dice-group {
        width: 100% !important;
        min-width: 0 !important;

        padding: 7px 4px !important;

        border-width: 1px !important;
        border-radius: 9px !important;
    }

    .game .table-dice-group.winner {
        border-width: 2px !important;

        transform: scale(1.02) !important;
    }

    .game .table-dice-name {
        max-width: 100%;

        margin-bottom: 4px !important;

        overflow: hidden;

        font-size: 10px !important;

        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .game .table-dice-row {
        gap: 5px !important;

        margin-bottom: 4px !important;
    }

    .game .table-die {
        width: 31px !important;
        height: 31px !important;

        border-radius: 6px !important;
    }

    .game .table-dice-total {
        font-size: 11px !important;
        line-height: 13px;
    }

    .game .table-die-pip {
        width: 5px !important;
        height: 5px !important;
    }

    .game .pip-1 {
        left: 6px !important;
        top: 6px !important;
    }

    .game .pip-3 {
        right: 6px !important;
        top: 6px !important;
    }

    .game .pip-4 {
        left: 6px !important;
    }

    .game .pip-6 {
        right: 6px !important;
    }

    .game .pip-7 {
        left: 6px !important;
        bottom: 6px !important;
    }

    .game .pip-9 {
        right: 6px !important;
        bottom: 6px !important;
    }

    .game .table-dice-message {
        grid-column: 1 / -1;

        padding: 6px 8px;

        text-align: center;

        font-size: 12px;
    }


    /* --------------------------------------------------------------------
       GROSSES WÜRFELFENSTER DES EINZELSPIELS
       -------------------------------------------------------------------- */

    .game .dice-box,
    .dice-box {
        width: calc(100vw - 24px) !important;

        min-width: 0 !important;
        max-width: 420px !important;

        max-height: calc(100dvh - 30px);

        overflow-y: auto;

        padding: 16px 12px !important;
    }

    .game .dice-box h2,
    .dice-box h2 {
        font-size: 20px !important;
    }

    .game .dice-results,
    .dice-results {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 7px !important;
    }

    .game .dice-player,
    .dice-player {
        min-width: 0 !important;

        padding: 8px !important;
    }


    /* --------------------------------------------------------------------
       GEWINNERBOX
       -------------------------------------------------------------------- */

    .game .winner-box,
    .winner-box {
        width: calc(100vw - 24px) !important;

        max-width: 420px !important;
    }

}



/* ========================================================================
   SEHR SCHMALE SMARTPHONES
   BIS 430px
   ======================================================================== */

@media (max-width: 430px) {

    /* HUD noch etwas kompakter */

    .game .sidebar {
        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(0, 0.75fr);

        gap: 4px;
    }

    .game .scoreboard {
        padding:
            5px 4px !important;

        column-gap: 3px;
    }

    .game .scoreboard .score-row {
        padding: 0 2px;

        font-size: 9px !important;
    }

    .game .gamevalue-board {
        padding:
            5px 3px !important;
    }

    .game .game-value {
        font-size: 16px !important;
    }

    .game .knock-info {
        font-size: 7.5px !important;
    }


    /* Gegnerkarten */

    .game .bot-cards .card {
        width: 40px !important;
        height: 59px !important;

        margin-left: -25px !important;
    }


    /* Eigene Karten */

    .game .hand .card {
        width: clamp(67px, 21.5vw, 82px) !important;

        margin-left: -6px !important;
    }


    /* Ausgespielte Karten */

    .game .played-zone .card {
        width: clamp(48px, 13.5vw, 57px) !important;
    }


    /* Aktionsknöpfe */

    .game .table-action-bar,
    .game .single-action-bar,
    .game .online-action-bar {
        gap: 3px !important;
    }

    .game .table-action-bar button,
    .game .single-action-bar button,
    .game .online-action-bar button {
        padding:
            0 3px !important;

        font-size:
            clamp(8px, 2.55vw, 10px) !important;
    }

}



/* ========================================================================
   SMARTPHONE QUERFORMAT
   ======================================================================== */

@media (max-height: 520px) and (orientation: landscape) {

    .game header {
        top: 3px;

        height: 30px;
    }

    .game .header-actions button {
        height: 28px;

        font-size: 10px;
    }

    .game .sidebar {
        top: 36px !important;
        left: 5px !important;

        width: 180px !important;
        height: auto;

        right: auto !important;

        display: block !important;
    }

    .game .scoreboard {
        height: auto;

        grid-template-rows:
            16px
            1fr
            1fr;
    }

    .game .gamevalue-board {
        height: auto;

        margin-top: 4px !important;
    }

    .game .table {
        top: 35px !important;
        bottom: 74px !important;

        left: 190px !important;
        right: 5px !important;
    }

    .game .hand .card {
        width: clamp(55px, 10vw, 72px) !important;
    }

    .game .bot-cards .card {
        width: 34px !important;
        height: 50px !important;

        margin-left: -21px !important;
    }

    .game .played-zone .card {
        width: 43px !important;
    }

    .game .played-zone.north {
        top: 30vh !important;
        left: 63vw !important;
    }

    .game .played-zone.west {
        top: 46vh !important;
        left: calc(63vw - 43px) !important;
    }

    .game .played-zone.east {
        top: 46vh !important;
        left: calc(63vw + 43px) !important;
    }

    .game .played-zone.south {
        top: 61vh !important;
        left: 63vw !important;
    }

    .game .table-action-bar,
    .game .single-action-bar,
    .game .online-action-bar {
        left: 195px !important;
        right: 5px !important;

        bottom: 35px !important;

        height: 32px !important;
        min-height: 32px !important;
    }

    .game .table-action-bar button,
    .game .single-action-bar button,
    .game .online-action-bar button {
        height: 32px !important;
        min-height: 32px !important;

        font-size: 9px !important;
    }

    .game .info {
        left: 195px !important;
        right: 5px !important;

        bottom: 3px !important;

        min-height: 27px;

        font-size: 9px !important;
    }

}