/* Reset e font napoletano */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

:root {
    /* Colori napoletani autentici */
    --tavolo-feltro: #0F5132;
    --bordo-legno: #8B4513;
    --oro-napoletano: #FFD700;
    --rosso-napoletano: #DC143C;
    --verde-napoletano: #228B22;
    --blu-napoletano: #191970;
    --crema-carta: #FFF8DC;
    --ombra-carta: rgba(0, 0, 0, 0.3);

    /* Layout landscape */
    --header-height: 60px;
    --footer-height: 100px;
    --tavolo-height: calc(100vh - var(--header-height) - var(--footer-height));

    /* Carte dimensioni */
    --carta-width: 50px;
    --carta-height: 75px;
    --carta-width-mobile: 45px;
    --carta-height-mobile: 68px;

    /* Animazioni */
    --anim-fast: 0.2s ease-out;
    --anim-medium: 0.4s ease-in-out;
    --anim-slow: 0.6s ease-in-out;
}

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

body {
    font-family: 'Crimson Text', serif;
    background: linear-gradient(135deg, #1a4735 0%, #0f3527 50%, #083020 100%);
    color: var(--crema-carta);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.landscape-optimized {
    height: 100vh;
    width: 100vw;
}

.game-container {
    display: grid;
    grid-template-rows: var(--header-height) 1fr var(--footer-height);
    height: 100vh;
    overflow: hidden;
}

/* HEADER COMPATTO */
.compact-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 8px 20px;
    background: linear-gradient(90deg, var(--bordo-legno), #a0522d, var(--bordo-legno));
    border-bottom: 3px solid var(--oro-napoletano);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.game-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 14px;
    font-weight: 600;
}

.round-indicator {
    color: var(--oro-napoletano);
    font-family: 'Cinzel', serif;
    font-weight: 700;
}

.turn-indicator {
    color: var(--crema-carta);
    font-size: 12px;
    font-style: italic;
}

.game-title {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--oro-napoletano);
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.controls {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* TAVOLO DA GIOCO */
.tavolo-container {
    position: relative;
    height: var(--tavolo-height);
    overflow: hidden;
}

.tavolo-feltro {
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, var(--tavolo-feltro) 0%, #0a3d28 70%, #083020 100%);
    position: relative;
    border: 8px solid var(--bordo-legno);
    border-radius: 20px;
    box-shadow: 
        inset 0 0 50px rgba(0,0,0,0.3),
        0 0 20px rgba(0,0,0,0.5);
}

.tavolo-feltro::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 15px;
    pointer-events: none;
}

.centro-tavolo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.logo-napoletano {
    font-size: 32px;
    opacity: 0.6;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}

.mazzo-carte {
    position: relative;
}

/* POSIZIONAMENTO GIOCATORI */
#players-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.player-position {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transform-origin: center;
}

/* Posizioni specifiche per layout responsive */
.pos-bottom {
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
}

.pos-top {
    top: 15px;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
}

.pos-left {
    left: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
}

.pos-right {
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
}

.player-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: rgba(0,0,0,0.7);
    border-radius: 15px;
    border: 2px solid var(--oro-napoletano);
    min-width: 80px;
}

.player-name {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--oro-napoletano);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.player-name.human {
    color: #87CEEB;
}

.player-name.active {
    color: #FFD700;
    text-shadow: 0 0 8px #FFD700;
}

.player-lives {
    display: flex;
    align-items: center;
    gap: 3px;
}

.vita-icon {
    font-size: 16px;
}

.vita-count {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 14px;
}

/* CARTE NAPOLETANE */
.player-cards {
    display: flex;
    gap: 4px;
}

.carta-container {
    position: relative;
}

.carta {
    width: var(--carta-width);
    height: var(--carta-height);
    border-radius: 8px;
    position: relative;
    transition: all var(--anim-medium);
    cursor: pointer;
    border: 2px solid #333;
    box-shadow: 0 4px 8px var(--ombra-carta);
}

.carta-coperta {
    background: linear-gradient(135deg, #8B0000 0%, #A0522D  50%, #8B4513 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.carta-coperta::before {
    content: '🎴';
    font-size: 20px;
    color: var(--oro-napoletano);
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
}

.carta-coperta-mazzo {
    background: linear-gradient(135deg, #4B0082 0%, #663399 50%, #8B008B 100%);
}

.carta-napoletana {
    background: var(--crema-carta);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 4px;
    color: #333;
}

.carta-valore {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
}

.carta-seme {
    font-size: 18px;
    text-align: center;
}

.carta-figura {
    font-size: 10px;
    text-align: center;
    font-weight: 600;
}

/* Colori semi napoletani */
.seme-coppe { color: var(--rosso-napoletano); }
.seme-denari { color: var(--oro-napoletano); }
.seme-bastoni { color: var(--verde-napoletano); }
.seme-spade { color: var(--blu-napoletano); }

/* Animazioni carte */
.carta:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}

.carta.active {
    border-color: var(--oro-napoletano);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

.carta.revealed {
    animation: flipCard var(--anim-slow);
}

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

.carta.swapping {
    animation: cardSwap 0.8s ease-in-out;
}

@keyframes cardSwap {
    0% { transform: translateX(0) scale(1); }
    25% { transform: translateX(20px) scale(1.1) rotateZ(10deg); }
    75% { transform: translateX(-20px) scale(1.1) rotateZ(-10deg); }
    100% { transform: translateX(0) scale(1); }
}

/* PANNELLO AZIONI */
.azioni-panel {
    background: linear-gradient(90deg, var(--bordo-legno), #a0522d, var(--bordo-legno));
    border-top: 3px solid var(--oro-napoletano);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.azioni-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.azione-info {
    text-align: center;
}

.azioni-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn-azione {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 20px;
    border: 3px solid var(--oro-napoletano);
    border-radius: 15px;
    background: linear-gradient(135deg, #8B4513, #A0522D);
    color: var(--crema-carta);
    font-family: 'Cinzel', serif;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--anim-fast);
    min-width: 100px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.btn-azione:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
    background: linear-gradient(135deg, #A0522D, #CD853F);
}

.btn-azione:active {
    transform: translateY(0);
}

.btn-icon {
    font-size: 24px;
}

.btn-text {
    font-size: 14px;
}

.btn-tieni:hover {
    border-color: #90EE90;
    box-shadow: 0 0 15px rgba(144, 238, 144, 0.4);
}

.btn-scambia:hover {
    border-color: #FFD700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

/* BOTTONI NAPOLETANI */
.btn-napoletano {
    padding: 8px 16px;
    border: 2px solid var(--oro-napoletano);
    border-radius: 12px;
    background: linear-gradient(135deg, #8B4513, #A0522D);
    color: var(--crema-carta);
    font-family: 'Cinzel', serif;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--anim-fast);
    font-size: 12px;
}

.btn-napoletano:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #A0522D, #CD853F);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.btn-small {
    padding: 6px 12px;
    font-size: 11px;
}

.btn-large {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 700;
}

.btn-secondary {
    background: linear-gradient(135deg, #696969, #808080);
    border-color: #C0C0C0;
}

/* MODAL */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-napoletano {
    background: linear-gradient(135deg, var(--bordo-legno), #A0522D);
    border: 4px solid var(--oro-napoletano);
    border-radius: 20px;
    padding: 24px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

.modal-header {
    text-align: center;
    margin-bottom: 20px;
}

.modal-header h2 {
    font-family: 'Cinzel', serif;
    font-size: 24px;
    color: var(--oro-napoletano);
    margin-bottom: 8px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.setup-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    margin-bottom: 20px;
}

.bot-buttons {
    display: flex;
    gap: 12px;
}

.bot-select.active {
    background: linear-gradient(135deg, #228B22, #32CD32);
    border-color: #90EE90;
}

.regole-rapide {
    background: rgba(0,0,0,0.3);
    padding: 16px;
    border-radius: 12px;
    border: 2px solid rgba(255, 215, 0, 0.3);
}

.regole-rapide h4 {
    color: var(--oro-napoletano);
    margin-bottom: 8px;
}

.regole-rapide ul {
    list-style: none;
    padding-left: 0;
}

.regole-rapide li {
    margin-bottom: 4px;
    font-size: 14px;
}

/* TOAST MESSAGES */
#toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    padding: 12px 20px;
    background: rgba(0,0,0,0.9);
    border: 2px solid var(--oro-napoletano);
    border-radius: 12px;
    color: var(--crema-carta);
    font-family: 'Cinzel', serif;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    animation: slideInDown 0.3s ease-out;
}

.toast.cucu {
    border-color: var(--rosso-napoletano);
    background: rgba(220, 20, 60, 0.2);
    font-size: 16px;
    text-align: center;
}

@keyframes slideInDown {
    from {
        transform: translateY(-100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* UTILITY CLASSES */
.hidden { display: none !important; }
.active { opacity: 1 !important; }

/* RESPONSIVE LANDSCAPE */
@media (max-height: 480px) {
    :root {
        --header-height: 50px;
        --footer-height: 80px;
        --carta-width: var(--carta-width-mobile);
        --carta-height: var(--carta-height-mobile);
    }

    .game-title { font-size: 16px; }
    .compact-header { padding: 6px 15px; }
    .azioni-panel { padding: 10px 15px; }
    .player-info { padding: 4px 8px; }
    .btn-azione { min-width: 80px; padding: 8px 15px; }
}

@media (max-width: 640px) {
    .controls { gap: 6px; }
    .bot-buttons { flex-direction: column; gap: 8px; }
    .azioni-buttons { gap: 15px; }
    .modal-napoletano { padding: 16px; }
}

/* Landscape orientation hint */
@media (orientation: portrait) {
    body::before {
        content: "🔄 Ruota il dispositivo per un'esperienza migliore";
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0,0,0,0.9);
        color: var(--oro-napoletano);
        padding: 20px;
        border-radius: 15px;
        font-family: 'Cinzel', serif;
        font-weight: 600;
        text-align: center;
        z-index: 3000;
        border: 2px solid var(--oro-napoletano);
    }
}