* {
    box-sizing: border-box;
    margin: 0; padding: 0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

html, body {
    width: 100vw; height: 100vh;
    overflow: hidden;
    background-color: #1a1a1a;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    touch-action: none;
}

.screen {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    transition: opacity 0.5s;
}

.hidden { opacity: 0; pointer-events: none; z-index: -1; }

#error-screen {
    background: #f0f0f0; color: #333;
    display: flex; justify-content: center; align-items: center; z-index: 10;
}
.error-content { text-align: center; }
.error-content h1 { font-size: 6rem; color: #cc0000; margin-bottom: 0; }
#start-btn { margin-top: 20px; padding: 10px 20px; cursor: pointer; font-family: monospace; }

#game-screen {
    background: radial-gradient(circle at top, #007a33 0%, #003a18 100%);
    display: flex; flex-direction: column; padding: 10px; z-index: 5;
}

.top-bar {
    display: flex; justify-content: space-between; color: white;
    padding: 5px 10px; background: rgba(0,0,0,0.2); border-radius: 5px; margin-bottom: 10px;
}

.tableau {
    display: flex; justify-content: space-between; flex-grow: 1;
    width: 100%; max-width: 1200px; margin: 0 auto; position: relative;
}

.pile {
    width: 9%; height: 100%; position: relative;
    border-radius: 5px; background: rgba(0,0,0,0.1);
}

.card {
    position: absolute; width: 100%; aspect-ratio: 1 / 1.44;
    background-color: white; border-radius: 4px; border: 1px solid #aaa;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
    display: flex; flex-direction: column; justify-content: space-between; padding: 4px;
    font-weight: bold; font-size: clamp(14px, 2.5vw, 24px);
    cursor: grab;
}

.card.red { color: #d00; }
.card.black { color: #000; }

.card-back {
    background: repeating-linear-gradient(45deg, #004d99, #004d99 5px, #003366 5px, #003366 10px);
    border: 2px solid white; cursor: default;
}

.bottom-bar { height: 15vh; display: flex; justify-content: space-between; align-items: center; }
.deck-area, .foundation { display: flex; gap: 5px; }

.deck-stack, .win-stack {
    width: 9vw; max-width: 70px; aspect-ratio: 1/1.44;
    border-radius: 4px;
}

.deck-stack {
    background: repeating-linear-gradient(45deg, #004d99, #004d99 5px, #003366 5px, #003366 10px);
    border: 2px solid white; cursor: pointer;
    box-shadow: -2px 2px 5px rgba(0,0,0,0.5);
}

.win-stack {
    background: white; border: 1px solid #aaa;
    display: flex; justify-content: center; align-items: center; text-align: center;
    font-weight: bold; font-size: clamp(14px, 2vw, 20px);
}

#drag-layer {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 1000;
}
.dragging { pointer-events: none; box-shadow: 5px 5px 15px rgba(0,0,0,0.6); }

#modal-layer {
    z-index: 2000; background: rgba(0,0,0,0.4);
    display: flex; justify-content: center; align-items: center;
}

.aero-window {
    background: rgba(220, 230, 240, 0.4);
    border: 1px solid rgba(255,255,255,0.6); border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6), inset 0 0 2px rgba(255,255,255,1);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    padding: 8px; width: 90%; max-width: 350px;
}

.aero-content {
    background: #fff; border: 1px solid #999; border-radius: 4px;
    padding: 20px; text-align: center; color: #000;
}

.aero-content.hidden { 
    display: none; 
}

.aero-content h2 { color: #003399; margin-bottom: 15px; font-weight: 400; font-size: 1.5rem; }

.menu-buttons { display: flex; flex-direction: column; gap: 10px; }

.aero-btn {
    background: linear-gradient(to bottom, #f2f2f2 0%, #ebebeb 50%, #dddddd 51%, #cfcfcf 100%);
    border: 1px solid #707070; border-radius: 3px; padding: 8px 15px;
    font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 14px;
    color: #000; cursor: pointer; box-shadow: inset 0 0 1px #fff;
}
.aero-btn:active {
    background: linear-gradient(to bottom, #eaf6fd 0%, #d9f0fc 50%, #bee6fd 51%, #a7d9f5 100%);
    border-color: #3c7fb1;
}

.confetti {
    position: absolute; width: 8px; height: 15px;
    top: -20px; z-index: 1500;
    animation: fall linear forwards;
}
@keyframes fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}