.character-content {
  .tarot-hand-container {
    padding: 0.3rem;
    height: 100%;
    display: flex;
    flex-direction: column;

    .tarot-hand-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.2rem;
      padding-bottom: 0.2rem;
      border-bottom: 2px solid var(--color-border-dark);

      h2 {
        margin: 0;
        font-size: 1.5rem;
        color: var(--color-text-dark-primary);
      }

      .tarot-hand-info {
        display: flex;
        align-items: center;
        gap: 1rem;

        .card-count {
          display: flex;
          align-items: center;
          gap: 0.3rem;
          padding: 0.3rem 0.6rem;
          background: rgba(102, 126, 234, 0.2);
          border-radius: 0.25rem;
          border: 1px solid rgba(102, 126, 234, 0.4);
          font-weight: bold;
          font-size: 0.85rem;
          color: var(--color-text-light-heading);

          i {
            color: #667eea;
          }

          &.over-limit {
            background: rgba(234, 102, 102, 0.2);
            border-color: rgba(234, 102, 102, 0.4);

            i {
              color: #ea6666;
            }
          }
        }

        .hand-warning {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.5rem 1rem;
          background: rgba(234, 179, 8, 0.2);
          border-radius: 0.25rem;
          border: 1px solid rgba(234, 179, 8, 0.4);
          color: #eab308;
          font-weight: bold;
          animation: pulse 2s ease-in-out infinite;

          i {
            color: #eab308;
          }
        }

        @keyframes pulse {
          0%,
          100% {
            opacity: 1;
          }
          50% {
            opacity: 0.7;
          }
        }
      }
    }

    .tarot-hand-cards {
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem;
      overflow-y: auto;
      padding: 0.2rem;
      justify-content: center;
      align-items: flex-start;

      .tarot-card-wrapper {
        perspective: 1000px;
        cursor: grab;
        flex-shrink: 0;
        position: relative;

        &:active {
          cursor: grabbing;
        }

        &.success-card {
          .tarot-card {
            .tarot-card-inner {
              .tarot-card-front {
                border: 3px solid #ffd700;
                box-shadow:
                  0 0 15px rgba(255, 215, 0, 0.6),
                  0 4px 8px rgba(0, 0, 0, 0.3);
              }
            }
          }

          .tarot-card-controls {
            .success-indicator {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 20px;
              height: 20px;
              border-radius: 50%;
              background: rgba(255, 215, 0, 0.9);
              color: #8b6914;
              animation: pulse-gold 2s ease-in-out infinite;

              i {
                font-size: 0.7rem;
              }
            }
          }
        }

        &.selected {
          .tarot-card {
            border: 2px solid #667eea;
            box-shadow: 0 0 20px rgba(102, 126, 234, 0.6);
          }

          .card-actions {
            display: flex !important;
          }
        }

        .tarot-card {
          position: relative;
          width: 110px;
          height: 190px;
          transition: transform 0.3s ease;

          &:hover {
            transform: translateY(-10px) scale(1.05);
            z-index: 10;
          }

          .tarot-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 0.5rem;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            overflow: hidden;

            .tarot-card-front {
              width: 100%;
              height: 100%;
              background: linear-gradient(
                135deg,
                rgba(20, 20, 30, 0.95) 0%,
                rgba(40, 40, 50, 0.95) 100%
              );
              border: 2px solid var(--color-border-dark);
              border-radius: 0.5rem;
              display: flex;
              flex-direction: column;
              padding: 0.4rem;

              .tarot-card-header {
                position: absolute;
                top: 0.25rem;
                right: 0.25rem;
                z-index: 2;

                .tarot-card-controls {
                  display: flex;
                  gap: 0.25rem;
                  opacity: 0;
                  transition: opacity 0.2s ease;

                  .card-control {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    background: rgba(0, 0, 0, 0.7);
                    color: white;
                    transition: all 0.2s ease;

                    &.delete-control:hover {
                      background: rgba(234, 102, 102, 0.9);
                    }

                    &.view-control:hover {
                      background: rgba(102, 126, 234, 0.9);
                    }

                    i {
                      font-size: 0.7rem;
                    }
                  }
                }
              }

              &:hover .tarot-card-header .tarot-card-controls {
                opacity: 1;
              }

              .tarot-card-image {
                width: 100%;
                height: 125px;
                border-radius: 0.25rem 0.25rem 0 0;
                overflow: hidden;
                background: rgba(0, 0, 0, 0.3);

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }

              .tarot-card-name {
                padding: 0.5rem;
                background: rgba(0, 0, 0, 0.3);
                border-bottom: 1px solid var(--color-border-dark);

                h4 {
                  margin: 0;
                  font-size: 0.85rem;
                  font-weight: bold;
                  color: #667eea;
                  text-align: center;
                  line-height: 1.2;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
              }

              .tarot-card-info {
                padding: 0.5rem;
                background: rgba(0, 0, 0, 0.2);

                .card-info-compact {
                  display: flex;
                  flex-direction: column;
                  gap: 0.4rem;
                  font-size: 0.75rem;

                  .card-symbole {
                    display: flex;
                    align-items: center;
                    gap: 0.3rem;
                    font-weight: bold;
                    justify-content: center;

                    i {
                      font-size: 0.6rem;
                    }

                    &.symbole-coupe {
                      color: #3498db;
                    }

                    &.symbole-epee {
                      color: #d4a574;
                    }

                    &.symbole-denier {
                      color: #f39c12;
                    }

                    &.symbole-baton {
                      color: #2ecc71;
                    }
                  }

                  .card-valeur {
                    text-align: center;
                    color: #ffffff;
                    font-weight: bold;
                    font-size: 1rem;
                    background: rgba(0, 0, 0, 0.4);
                    padding: 0.3rem 0.5rem;
                    border-radius: 0.25rem;
                  }
                }

                .card-actions {
                  display: none;
                  margin-top: 0.5rem;

                  .discard-and-draw-button {
                    width: 100%;
                    padding: 0.5rem;
                    background: rgba(102, 126, 234, 0.3);
                    border: 1px solid rgba(102, 126, 234, 0.6);
                    border-radius: 0.25rem;
                    color: #9ab4ff;
                    font-size: 0.75rem;
                    font-weight: bold;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 0.3rem;

                    i {
                      font-size: 0.7rem;
                    }

                    &:hover {
                      background: rgba(102, 126, 234, 0.5);
                      border-color: rgba(102, 126, 234, 0.8);
                      color: #aac4ff;
                      transform: translateY(-1px);
                    }

                    &:active {
                      transform: translateY(0);
                    }
                  }
                }

                .discard-button {
                  margin-top: 0.5rem;
                  padding: 0.4rem 0.5rem;
                  background: rgba(234, 102, 102, 0.3);
                  border: 1px solid rgba(234, 102, 102, 0.6);
                  border-radius: 0.25rem;
                  color: #ea6666;
                  font-size: 0.7rem;
                  font-weight: bold;
                  cursor: pointer;
                  transition: all 0.2s ease;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  gap: 0.3rem;

                  i {
                    font-size: 0.65rem;
                  }

                  &:hover {
                    background: rgba(234, 102, 102, 0.5);
                    border-color: rgba(234, 102, 102, 0.8);
                    color: #ff6666;
                    transform: translateY(-1px);
                  }

                  &:active {
                    transform: translateY(0);
                  }
                }
              }
            }
          }
        }
      }
    }

    .tarot-hand-empty {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      .empty-state {
        text-align: center;
        color: var(--color-text-dark-secondary);
        max-width: 400px;

        i {
          opacity: 0.2;
          margin-bottom: 1rem;
        }

        h3 {
          margin: 0 0 0.5rem 0;
          font-size: 1.25rem;
          color: var(--color-text-dark-primary);
        }

        p {
          margin: 0;
          font-style: italic;
          opacity: 0.8;
        }
      }
    }
  }
}