* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: system-ui, -apple-system, sans-serif;
    background: #275238;
    color: #fff;
    min-height: 100vh;
    transition: background-color .8s;
}

body.your-turn { background: #1a6b3c; }

#app {
    max-width: 480px;
    margin: 0 auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: center;
}

h1 { margin-top: 8px; font-size: 2.2rem; }

.lang { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; }

.lang-btn {
    padding: 6px 12px;
    font-size: .85rem;
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

.lang-btn.active { background: #fff; color: #1a6b3c; font-weight: 700; }
h2 { font-size: 1.1rem; }
.muted { opacity: .75; font-size: .9rem; min-height: 1.2em; }
.loading { margin-top: 40px; }

form, .share { display: flex; gap: 8px; justify-content: center; }

input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
}

button {
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    background: #e9e9e9;
    touch-action: manipulation;
}

button.primary { background: #ffc32b; font-weight: 700; }
button:disabled { opacity: .45; cursor: default; }

.qr {
    align-self: center;
    background: #fff;
    border-radius: 12px;
    width: 180px;
    height: 180px;
}

.players { list-style: none; }
.players li { padding: 6px; font-size: 1.1rem; }

.opponents { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.opponent {
    background: rgba(0, 0, 0, .25);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 72px;
}

.opponent.on-turn { outline: 3px solid #ffc32b; }
.opponent.me { background: rgba(255, 255, 255, .15); }
.opp-name { font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }

.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 36px;
    background: #fff;
    color: #1a6b3c;
    border: 2px solid #1a6b3c;
    border-radius: 4px;
    font-weight: 700;
    font-size: .95rem;
}

.table {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 14px 0;
}

.deck-info { font-size: .85rem; opacity: .8; }

.status { font-size: 1.05rem; min-height: 1.4em; }
.status.your-turn { color: #ffc32b; font-weight: 700; }

.hand {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.card {
    width: 62px;
    height: 88px;
    border-radius: 8px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
    padding: 0;
}

.card:not(:disabled):active { transform: translateY(-4px); }
.card.static { cursor: default; }
.card-rank { font-size: 1.25rem; }
.card-suit { font-size: 1.5rem; line-height: 1; }

.suit-srdce { color: #d22; }
.suit-kule { color: #d70; }
.suit-listy { color: #182; }
.suit-zaludy { color: #631; }

.chosen-suit {
    background: #fff;
    border-radius: 8px;
    padding: 8px 10px;
    font-weight: 700;
}

.draw-btn { align-self: center; min-width: 160px; }

.winner { font-size: 1.4rem; }

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.dialog {
    background: #fff;
    color: #222;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(320px, 90vw);
}

.suit-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.suit-choice { font-size: 1.1rem; font-weight: 700; background: #f1f1f1; }

.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #b3261e;
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    z-index: 20;
    max-width: 90vw;
}