.rules{
    text-align: left;
    background-color: #f1f0f0;
    padding: 20px;
    display: none;
}
a.rules-toggle {
    color: #0b6915;
    text-decoration: none;
    margin-bottom: 30px;
    display: inline-block;
    background-color: var(--green);
   padding: 5px 10px;
}
.rules.open{
    display: block;
    margin-bottom: 30px;
}
.rules ul{
    padding: 10px;
}
.table {
    background: #00B842;
    background: radial-gradient(circle, rgb(0, 145, 52) 0%, rgb(0, 52, 19) 76%);
    text-align: center;
    display: none;
    padding: 20px 0 40px;
    position: relative;
}

.table.visible {
    display: block;
}

.start {
    padding: 20px;
    text-align: center;
}

.start.hidden {
    display: none;
}

.start-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.start .play-btn,
.start .invite-btn,
.start .invite-friend-btn,
.start .invite-restt-btn {
    padding: 12px 40px;
    border: 0;
    border-radius: 40px;
    color: #fff;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0px 3px 4px -2px black;
}

.start .play-btn {
    background-color: var(--green, #00B842);
}

.start .invite-btn,
.start .invite-friend-btn,
.start .invite-restt-btn {
    background-color: #53fc18;
    color: #0b1a05;
}

.start .play-btn:hover,
.start .invite-btn:hover,
.start .invite-friend-btn:hover,
.start .invite-restt-btn:hover {
    filter: brightness(1.1);
}

.invite-friend-form {
    max-width: 360px;
    margin: 16px auto 0;
    padding: 16px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 16px;
}

/*** tabuľka odohratých online hier ***/
.online-results {
    max-width: 480px;
    margin: 24px auto 0;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    text-align: left;
}

.online-results h2 {
    margin: 0 0 10px;
    font-size: 1.1em;
    text-align: center;
}

.online-results-empty {
    text-align: center;
    color: #777;
    margin: 0;
}

.online-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.online-results-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-weight: bold;
}

.online-results-list li:last-child {
    border-bottom: 0;
}

.online-results-date {
    font-weight: normal;
    font-size: 0.85em;
    color: #777;
    white-space: nowrap;
}

/*** rebríček hráčov ***/
.online-leaderboard {
    max-width: 480px;
    margin: 24px auto 0;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    text-align: left;
}

.online-leaderboard h2 {
    margin: 0 0 10px;
    font-size: 1.1em;
    text-align: center;
}

.online-leaderboard-table {
    width: 100%;
    border-collapse: collapse;
}

.online-leaderboard-table th,
.online-leaderboard-table td {
    padding: 6px 8px;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.online-leaderboard-table th:first-child,
.online-leaderboard-table td:first-child {
    text-align: left;
}

.online-leaderboard-table td:first-child {
    font-weight: bold;
}

.online-leaderboard-table tr:last-child td {
    border-bottom: 0;
}

.online-leaderboard-table th {
    font-size: 0.85em;
    color: #777;
    font-weight: normal;
}

.invite-friend-name-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    font-size: 1em;
}

.invite-friend-form-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 12px;
}

.invite-friend-continue-btn,
.invite-friend-cancel-btn {
    padding: 8px 20px;
    border: 0;
    border-radius: 40px;
    font-weight: bold;
    cursor: pointer;
}

.invite-friend-continue-btn {
    background-color: var(--green, #00B842);
    color: #fff;
}

.invite-friend-cancel-btn {
    background-color: #ddd;
    color: #333;
}

.online-status-text {
    min-height: 1.2em;
    color: #ec0000;
    font-weight: bold;
}

/*** online lobby ***/
.online-lobby {
    max-width: 420px;
    margin: 0 auto 20px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.25);
    border: 2px dotted #fff;
    border-radius: 20px;
    color: #fff;
}

.lobby-text {
    font-weight: bold;
    margin: 0 0 12px;
}

.invite-link-box {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.invite-link-input {
    flex: 1 1 220px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 0;
    min-width: 0;
}

.copy-invite-btn {
    padding: 8px 16px;
    border: 0;
    border-radius: 40px;
    background-color: var(--green, #00B842);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

.player-name,
.bank-name {
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 2px black;
    min-height: 1.2em;
}

/*** indikátor, kto je na rade ***/
.turn-indicator {
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
    display: inline-block;
    margin: 0 auto 10px;
    padding: 6px 18px;
    border-radius: 20px;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
}

/*** online scoreboard (vľavo hore) ***/
.online-scoreboard {
    position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(0, 48, 17, 0.72);
  border: 1px solid rgba(83, 252, 24, 0.45);
  border-radius: 50px;
  padding: 20px 30px;
  color: var(--green);
  font-weight: 100;
  text-shadow: 1px 1px 2px black;
  z-index: 5;
  box-shadow: 0 0px 20px -5px var(--green);
}

/*** prerušenie hry (súper odišiel) ***/
.online-interrupt {
    max-width: 420px;
  margin: 0 auto 20px;
  padding: 20px;
  background: rgba(132, 0, 0, 0.87);
  border: 2px dotted #ec0000;
  border-radius: 20px;
  color: #fff;
  box-shadow: 0px 10px 86px 6px #ed0000;
  top: 400px;
  position: relative;
  z-index: 100;
}

.online-interrupt .interrupt-text {
    font-weight: bold;
    margin: 0 0 12px;
}

.online-interrupt .interrupt-close-btn {
    padding: 8px 20px;
    border: 0;
    border-radius: 40px;
    background-color: rgb(255, 43, 43);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

/*** pozvánka kamoša: overenie cez Kick ***/
.online-kick-verify {
    max-width: 420px;
    margin: 0 auto 20px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.35);
    border: 2px dotted #fff;
    border-radius: 20px;
    color: #fff;
}

.online-kick-verify .kick-verify-text {
    font-weight: bold;
    margin: 0 0 12px;
}

.online-kick-verify .kick-verify-btn {
    padding: 8px 20px;
    border: 0;
    border-radius: 40px;
    background-color: #53fc18;
    color: #0b1a05;
    font-weight: bold;
    cursor: pointer;
}

/*** pozvánka kamoša: nezhoda mena ***/
.online-name-mismatch {
    max-width: 420px;
    margin: 0 auto 20px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px dotted #ec0000;
    border-radius: 20px;
    color: #fff;
}

.online-name-mismatch .name-mismatch-text {
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0 0 12px;
}

.online-name-mismatch .name-mismatch-close-btn {
    padding: 8px 20px;
    border: 0;
    border-radius: 40px;
    background-color: rgb(255, 43, 43);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

/*** pozvánka RESTTA: zadanie hesla ***/
.online-password-prompt {
    max-width: 360px;
    margin: 0 auto 20px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.35);
    border: 2px dotted #fff;
    border-radius: 20px;
    color: #fff;
}

.online-password-prompt .password-prompt-text {
    font-weight: bold;
    margin: 0 0 12px;
}

.online-password-prompt .password-prompt-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    font-size: 1em;
    margin-bottom: 10px;
}

.online-password-prompt .password-prompt-submit-btn {
    padding: 8px 20px;
    border: 0;
    border-radius: 40px;
    background-color: #53fc18;
    color: #0b1a05;
    font-weight: bold;
    cursor: pointer;
}

.online-password-prompt .password-prompt-error {
    color: #ff8080;
    font-weight: bold;
    min-height: 1.2em;
    margin: 10px 0 0;
}


/*** bank / player card areas ***/
.bank,
.player {
  padding: 10px 0;
}

.player-card,
.bank-card {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  min-height: 160px;
  flex-wrap: wrap;
}


.player-card img,
.bank-card img {
  width: 140px;
  height: auto;
  border-radius: 10px;
  transition: transform 0.3s ease, z-index 0s;
  margin-left: -60px;
  box-shadow: -2px 5px 24px -5px black;
}

.player-card img:first-child,
.bank-card img:first-child {
  margin-left: 0;
}

.player-card img:hover,
.bank-card img:hover {
  z-index: 10;
  transform: scale(1.1);
  cursor: pointer;
}

.payer-tools button,
.bank-tools button {
    width: 100px;
  padding: 10px;
  border-radius: 40px;
  position: relative;
  box-shadow: 0px 3px 4px -2px black, inset 2px 2px 4px #ffffff8a;
  cursor: pointer;
  font-weight: bold;
  border: .5px solid black;
}
.payer-tools button:hover,
.bank-tools button:hover {
    box-shadow: inset 2px 2px 4px 1px black, inset 0 2px 40px -7px #000;
  top: 1px;
  color: white;

}
.payer-tools button:disabled,
.bank-tools button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
    top: 0;
}
button.stand {
    background-color: rgb(255, 43, 43);
}
button.hit {
    background-color: var(--green, #00B842);
}
button.double {
    background-color: rgb(0, 166, 255);
}

/*** card dealing animation ***/
@keyframes dealCard {
  0% {
    opacity: 0;
    transform: translate(-50%, -240px) rotate(-25deg) scale(0.6);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

.player-card img.dealt,
.bank-card img.dealt {
  animation: dealCard 0.5s ease-out;
}

@keyframes flipCard {
  0% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

.player-card img.flipped,
.bank-card img.flipped {
  animation: flipCard 0.4s ease-in;
}


/*** result ***/
.result {
   border: 2px dotted var(--green, #00B842);
  border-radius: 20px;
  color: var(--green, #00B842);
  font-size: 1.8em;
  font-weight: bold;
  text-shadow: 1px 1px 2px black, -1px -1px 3px black;
  max-width: 90%;
  margin: 20px auto;
  overflow: hidden;
  position: relative;
}
.bank-result {
    border-bottom: 2px dotted var(--green, #00B842);
    padding: 20px;
}
.player-result {
    padding: 20px;
}
.fail {
    color: #ec0000;
}
.winner {
    background-color: #00FF5C;
  border-radius: 20px;
  box-shadow: 0 0 25px 12px lime;
  color: #0b6915;
  text-shadow: 0 0 5px #ecffca;
  position: relative;
}
.winner::before {
    content: 'winner!';
  font-weight: lighter;
  display: block;
  font-size: 0.5em;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.result-actions {
    padding: 15px 20px 20px;
    display: flex;
    gap: 40px;
    justify-content: center;
}

.result-actions button {
    padding: 10px 20px;
    border: 0;
    border-radius: 40px;
    background-color: #fff;
    color: #0b6915;
    font-weight: bold;
    font-size: 0.55em;
    cursor: pointer;
    box-shadow: 0px 3px 4px -2px black;
}

.result-actions button:hover {
    filter: brightness(0.95);
}
span.result-name {
    width: 280px;
  display: inline-block;
}
span.winner-name {
    color: #268400;
  background-color: #dcffcf;
}
.result-actions button.close-game {
    background-color: #311c1c;
  color: #ff3c00;
}
.close-game::before{
  content: 'X';
  color: #ff3c00;
  margin-right: 10px;
  border-radius: 30px;
  height: 26px;
  width: 26px;
  display: inline-block;
  line-height: 26px;
  border: 1px solid #ff3c00;
}
.result-actions button.new-game{
    width: 200px;
}