.personnage {
  .tarot-hand-container {
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;

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

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

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

          i {
            color: #667eea;
          }
        }
      }
    }

    .tarot-hand-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 1.5rem;
      overflow-y: auto;
      padding-right: 0.5rem;

      .tarot-card-wrapper {
        perspective: 1000px;
        cursor: grab;

        &:active {
          cursor: grabbing;
        }

        .tarot-card {
          position: relative;
          width: 100%;
          height: 400px;
          transition: transform 0.3s ease;

          &:hover {
            transform: translateY(-5px);
          }

          .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.75rem;

              .tarot-card-header {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                margin-bottom: 0.75rem;

                .tarot-card-name {
                  margin: 0;
                  font-size: 1.1rem;
                  font-weight: bold;
                  color: #667eea;
                  flex: 1;
                  line-height: 1.3;
                }

                .tarot-card-controls {
                  display: flex;
                  gap: 0.25rem;

                  .card-control {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 24px;
                    height: 24px;
                    border-radius: 0.25rem;
                    background: rgba(0, 0, 0, 0.3);
                    color: var(--color-text-light-heading);
                    transition: all 0.2s ease;

                    &:hover {
                      background: rgba(102, 126, 234, 0.5);
                      color: white;
                    }

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

              .tarot-card-image {
                width: 100%;
                height: 150px;
                margin-bottom: 0.75rem;
                border-radius: 0.25rem;
                overflow: hidden;
                border: 1px solid var(--color-border-dark);
                background: rgba(0, 0, 0, 0.3);

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

              .tarot-card-info {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
                margin-bottom: 0.75rem;

                .card-info-row {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  padding: 0.4rem 0.5rem;
                  background: rgba(0, 0, 0, 0.2);
                  border-radius: 0.25rem;
                  font-size: 0.875rem;

                  .info-label {
                    display: flex;
                    align-items: center;
                    gap: 0.35rem;
                    color: var(--color-text-dark-secondary);
                    font-weight: 500;

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

                  .info-value {
                    color: var(--color-text-light-heading);
                    font-weight: bold;

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

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

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

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

              .tarot-card-description {
                flex: 1;
                overflow-y: auto;
                padding: 0.5rem;
                background: rgba(0, 0, 0, 0.2);
                border-radius: 0.25rem;
                border: 1px solid var(--color-border-dark);

                .description-text {
                  font-size: 0.8rem;
                  line-height: 1.4;
                  color: var(--color-text-dark-primary);

                  p {
                    margin: 0 0 0.5rem 0;

                    &:last-child {
                      margin-bottom: 0;
                    }
                  }
                }

                &::-webkit-scrollbar {
                  width: 4px;
                }

                &::-webkit-scrollbar-track {
                  background: rgba(0, 0, 0, 0.2);
                  border-radius: 2px;
                }

                &::-webkit-scrollbar-thumb {
                  background: rgba(102, 126, 234, 0.5);
                  border-radius: 2px;

                  &:hover {
                    background: rgba(102, 126, 234, 0.7);
                  }
                }
              }
            }
          }
        }
      }
    }

    .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;
        }
      }
    }
  }
}